https://greencalculus.com/wp-content/plugins/greencalculus-core/line-chart.js?ver=1780538789

1/**
2 * GreenCalculus — Line Chart enhancement (line-chart.js)
3 * Pairs with inc/shortcodes/sc-line-chart.php + line-chart.css.
4 *
5 * PROGRESSIVE ENHANCEMENT ONLY. The chart renders complete and static
6 * server-side, and tooltips work with pure CSS (:hover / :focus-within).
7 * This script adds two niceties and nothing the chart depends on:
8 *   1. Keyboard arrow-key roving between point markers (Left/Right/Home/End).
9 *   2. A one-time draw-in of the series line, gated behind
10 *      prefers-reduced-motion so it never animates for motion-sensitive users.
11 *
12 * If this file fails to load, the chart is still fully usable: Tab still
13 * reaches each point (tabindex="0"), and tooltips still show on hover/focus.
14 */
15(function () {
16  'use strict';
17
18  function enhance(fig) {
19    if (fig.__lcBound) return;
20    fig.__lcBound = true;
21
22    var points = Array.prototype.slice.call(fig.querySelectorAll('.lc-point'));
23    if (points.length > 1) {
24      fig.addEventListener('keydown', function (e) {
25        var idx = points.indexOf(document.activeElement);
26        if (idx === -1) return;
27        var next = null;
28        switch (e.key) {
29          case 'ArrowRight': case 'ArrowUp':   next = points[Math.min(idx + 1, points.length - 1)]; break;
30          case 'ArrowLeft':  case 'ArrowDown': next = points[Math.max(idx - 1, 0)]; break;
31          case 'Home': next = points[0]; break;
32          case 'End':  next = points[points.length - 1]; break;
33          default: return;
34        }
35        if (next) { e.preventDefault(); next.focus(); }
36      });
37    }
38
39    // Draw-in animation — skipped entirely under reduced-motion.
40    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
41    if (reduce) return;
42    var line = fig.querySelector('.lc-line:not(.lc-line--target)');
43    if (!line || typeof line.getTotalLength !== 'function') return;
44    try {
45      var len = line.getTotalLength();
46      if (!len) return;
47      line.style.transition = 'none';
48      line.style.strokeDasharray = len;
49      line.style.strokeDashoffset = len;
50      // force reflow, then animate
51      line.getBoundingClientRect();
52      line.style.transition = 'stroke-dashoffset 700ms ease';
53      line.style.strokeDashoffset = '0';
54      window.setTimeout(function () {
55        line.style.strokeDasharray = '';
56        line.style.strokeDashoffset = '';
57        line.style.transition = '';
58      }, 800);
59    } catch (err) { /* no-op — static chart unaffected */ }
60  }
61
62  function init() {
63    var figs = document.querySelectorAll('.line-chart');
64    for (var i = 0; i < figs.length; i++) enhance(figs[i]);
65  }
66
67  if (document.readyState === 'loading') {
68    document.addEventListener('DOMContentLoaded', init);
69  } else {
70    init();
71  }
72})();