@heartlandone/vega 2.76.0 → 2.77.0

package/dist/collection/polyfill/d3/d3-time-format-polyfill.js

@@ -0,0 +1,207 @@
+/**
+ * D3 Time Format Polyfill - Lightweight date formatting and parsing.
+ *
+ * This is a drop-in replacement for d3-time-format, implementing only the methods
+ * used in the Vega chart rendering system: timeFormat and timeParse.
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+/**
+ * Mapping of format directives (e.g. %Y, %m) to their format functions.
+ * Each function takes a Date and returns the formatted string segment.
+ */
+/* eslint-disable jsdoc/require-jsdoc */
+const FORMAT_DIRECTIVES = {
+  '%Y': (d) => String(d.getFullYear()),
+  '%m': (d) => String(d.getMonth() + 1).padStart(2, '0'),
+  '%d': (d) => String(d.getDate()).padStart(2, '0'),
+  '%H': (d) => String(d.getHours()).padStart(2, '0'),
+  '%I': (d) => {
+    const hours = d.getHours() % 12;
+    return String(hours === 0 ? 12 : hours).padStart(2, '0');
+  },
+  '%M': (d) => String(d.getMinutes()).padStart(2, '0'),
+  '%S': (d) => String(d.getSeconds()).padStart(2, '0'),
+  '%L': (d) => String(d.getMilliseconds()).padStart(3, '0'),
+  '%b': (d) => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    return months[d.getMonth()];
+  },
+  '%B': (d) => {
+    const months = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ];
+    return months[d.getMonth()];
+  },
+  '%a': (d) => {
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    return days[d.getDay()];
+  },
+  '%p': (d) => (d.getHours() >= 12 ? 'PM' : 'AM'),
+  '%%': () => '%',
+};
+/* eslint-enable jsdoc/require-jsdoc */
+/**
+ * Creates a date formatter function for the given specifier.
+ * Mimics d3.timeFormat().
+ *
+ * Supported directives: %Y, %m, %d, %H, %I, %M, %S, %L, %b, %B, %a, %p, %%
+ *
+ * @param {string} specifier - Format specifier string (e.g., '%Y-%m-%d', '.%L', ':%S').
+ * @returns {Function} A function that formats a Date into a string.
+ */
+export function timeFormat(specifier) {
+  return (date) => {
+    let result = specifier;
+    // Sort directives by length (longest first) to avoid partial matches
+    const directives = Object.keys(FORMAT_DIRECTIVES).sort((a, b) => b.length - a.length);
+    for (const directive of directives) {
+      if (result.includes(directive)) {
+        result = result.split(directive).join(FORMAT_DIRECTIVES[directive](date));
+      }
+    }
+    return result;
+  };
+}
+/**
+ * Mapping of format directives to regex capture patterns for parsing.
+ */
+/* eslint-disable jsdoc/require-jsdoc */
+const PARSE_PATTERNS = {
+  /** Parses a 4-digit year. */
+  '%Y': {
+    regex: '(\\d{4})',
+    handler: (m, p) => {
+      p.year = parseInt(m, 10);
+    },
+  },
+  /** Parses a 2-digit month. */
+  '%m': {
+    regex: '(\\d{2})',
+    handler: (m, p) => {
+      p.month = parseInt(m, 10) - 1;
+    },
+  },
+  /** Parses a 2-digit day. */
+  '%d': {
+    regex: '(\\d{2})',
+    handler: (m, p) => {
+      p.day = parseInt(m, 10);
+    },
+  },
+  /** Parses a 2-digit hour (24h). */
+  '%H': {
+    regex: '(\\d{2})',
+    handler: (m, p) => {
+      p.hours = parseInt(m, 10);
+    },
+  },
+  /** Parses a 2-digit hour (12h). */
+  '%I': {
+    regex: '(\\d{2})',
+    handler: (m, p) => {
+      p.hours = parseInt(m, 10);
+    },
+  },
+  /** Parses a 2-digit minute. */
+  '%M': {
+    regex: '(\\d{2})',
+    handler: (m, p) => {
+      p.minutes = parseInt(m, 10);
+    },
+  },
+  /** Parses a 2-digit second. */
+  '%S': {
+    regex: '(\\d{2})',
+    handler: (m, p) => {
+      p.seconds = parseInt(m, 10);
+    },
+  },
+  /** Parses a 3-digit millisecond. */
+  '%L': {
+    regex: '(\\d{3})',
+    handler: (m, p) => {
+      p.milliseconds = parseInt(m, 10);
+    },
+  },
+};
+/**
+ * Creates a date parser function for the given specifier.
+ * Mimics d3.timeParse().
+ *
+ * Supported directives: %Y, %m, %d, %H, %I, %M, %S, %L
+ *
+ * @param {string} specifier - Parse specifier string (e.g., '%Y-%m-%d').
+ * @returns {Function} A function that parses a string into a Date, or null on failure.
+ */
+// eslint-disable-next-line spellcheck/spell-checker
+// eslint-disable-next-line @heartlandone/vega-eslint/vega-mandatory-method-return-corresponds-to-comments-tag-verify
+export function timeParse(specifier) {
+  // Build regex and capture order from specifier
+  const captureOrder = [];
+  let regexStr = '^';
+  let remaining = specifier;
+  while (remaining.length > 0) {
+    let matched = false;
+    // Sort by key length (longest first) to avoid partial matches
+    const keys = Object.keys(PARSE_PATTERNS).sort((a, b) => b.length - a.length);
+    for (const key of keys) {
+      if (remaining.startsWith(key)) {
+        regexStr += PARSE_PATTERNS[key].regex;
+        captureOrder.push({ handler: PARSE_PATTERNS[key].handler });
+        remaining = remaining.slice(key.length);
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      // Escape special regex chars for literal characters
+      regexStr += remaining[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      remaining = remaining.slice(1);
+    }
+  }
+  regexStr += '$';
+  const regex = new RegExp(regexStr);
+  return (dateString) => {
+    const match = dateString.match(regex);
+    if (!match)
+      return null;
+    const parts = {
+      year: 1970,
+      month: 0,
+      day: 1,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      milliseconds: 0,
+    };
+    for (let i = 0; i < captureOrder.length; i++) {
+      captureOrder[i].handler(match[i + 1], parts);
+    }
+    return new Date(parts.year, parts.month, parts.day, parts.hours, parts.minutes, parts.seconds, parts.milliseconds);
+  };
+}

package/dist/collection/polyfill/d3/d3-time-polyfill.js

@@ -0,0 +1,99 @@
+/**
+ * D3 Time Polyfill - Lightweight time interval functions.
+ *
+ * This is a drop-in replacement for d3-time, implementing only the time interval
+ * floor functions used in the Vega chart time axis label formatter:
+ * timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear.
+ *
+ * Each function floors a Date to the nearest interval boundary, which is used
+ * to determine the appropriate label granularity for time-series chart axes.
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+/**
+ * Floors a date to the nearest second boundary.
+ * Used to detect sub-second (millisecond) granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to the nearest second.
+ */
+export function timeSecond(date) {
+  const d = new Date(date);
+  d.setMilliseconds(0);
+  return d;
+}
+/**
+ * Floors a date to the nearest minute boundary.
+ * Used to detect sub-minute (second) granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to the nearest minute.
+ */
+export function timeMinute(date) {
+  const d = new Date(date);
+  d.setSeconds(0, 0);
+  return d;
+}
+/**
+ * Floors a date to the nearest hour boundary.
+ * Used to detect sub-hour (minute) granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to the nearest hour.
+ */
+export function timeHour(date) {
+  const d = new Date(date);
+  d.setMinutes(0, 0, 0);
+  return d;
+}
+/**
+ * Floors a date to the start of the day (midnight).
+ * Used to detect sub-day (hour) granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to midnight.
+ */
+export function timeDay(date) {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+/**
+ * Floors a date to the start of the week (Sunday).
+ * Used to distinguish day vs week label granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to the start of the week (Sunday at midnight).
+ */
+export function timeWeek(date) {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  d.setDate(d.getDate() - d.getDay());
+  return d;
+}
+/**
+ * Floors a date to the first of the month.
+ * Used to detect sub-month granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to the 1st of the month at midnight.
+ */
+export function timeMonth(date) {
+  const d = new Date(date);
+  d.setDate(1);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+/**
+ * Floors a date to January 1st of the year.
+ * Used to detect sub-year (month) granularity.
+ *
+ * @param {Date} date - Input date.
+ * @returns {Date} A new Date floored to January 1st at midnight.
+ */
+export function timeYear(date) {
+  const d = new Date(date);
+  d.setMonth(0, 1);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}

package/dist/collection/polyfill/d3/index.js

@@ -0,0 +1,31 @@
+/**
+ * D3 Polyfill - A lightweight drop-in replacement for the d3 library.
+ *
+ * This module re-exports only the d3 functions and types used by the Vega
+ * chart rendering system, implemented without any external dependencies.
+ *
+ * Replaces the following d3 sub-packages:
+ * - d3-selection: select, create
+ * - d3-shape: line, arc, pie
+ * - d3-scale: scaleLinear, scaleTime, scaleBand
+ * - d3-axis: axisBottom, axisLeft, AxisDomain, AxisScale, Axis
+ * - d3-array: min, max, extent, map
+ * - d3-time-format: timeFormat, timeParse
+ * - d3-time: timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+// Selection
+export { select, create, D3SelectionPolyfill } from './d3-selection-polyfill';
+// Shapes
+export { line, arc, pie } from './d3-shape-polyfill';
+// Scales
+export { scaleLinear, scaleTime, scaleBand } from './d3-scale-polyfill';
+// Axes
+export { axisBottom, axisLeft } from './d3-axis-polyfill';
+// Array utilities
+export { min, max, extent, map } from './d3-array-polyfill';
+// Time formatting
+export { timeFormat, timeParse } from './d3-time-format-polyfill';
+// Time intervals
+export { timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear } from './d3-time-polyfill';

package/dist/collection/polyfill/d3/test/d3-array-polyfill.test.js

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/typedef */
+/**
+ * D3 Array Polyfill Tests
+ *
+ * Tests for the d3-array-polyfill module: min(), max(), extent(), and map().
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+import { min, max, extent, map } from '../d3-array-polyfill';
+// ─── Array Tests ────────────────────────────────────────────────────
+describe('D3 Array Polyfill', () => {
+  it('should find min value', () => {
+    expect(min([3, 1, 4, 1, 5])).toBe(1);
+  });
+  it('should find max value', () => {
+    expect(max([3, 1, 4, 1, 5])).toBe(5);
+  });
+  it('should return undefined for empty arrays', () => {
+    expect(min([])).toBeUndefined();
+    expect(max([])).toBeUndefined();
+  });
+  it('should compute extent', () => {
+    expect(extent([3, 1, 4, 1, 5])).toEqual([1, 5]);
+  });
+  it('should compute extent of dates', () => {
+    const d1 = new Date(2020, 0, 1);
+    const d2 = new Date(2022, 0, 1);
+    const d3 = new Date(2021, 0, 1);
+    expect(extent([d1, d2, d3])).toEqual([d1, d2]);
+  });
+  it('should return [undefined, undefined] for empty extent', () => {
+    expect(extent([])).toEqual([undefined, undefined]);
+  });
+  it('should map array elements', () => {
+    const result = map([1, 2, 3], d => d * 2);
+    expect(result).toEqual([2, 4, 6]);
+  });
+  it('should map with transform function (chart data pattern)', () => {
+    const data = [
+      { x: '2021-01-01', y: 10 },
+      { x: '2022-01-01', y: 20 },
+    ];
+    const result = map(data, d => ({ x: new Date(d.x), y: d.y }));
+    expect(result.length).toBe(2);
+    expect(result[0].x instanceof Date).toBe(true);
+  });
+});
+// ─── Additional Array Coverage ──────────────────────────────────────
+describe('D3 Array Polyfill - Additional Coverage', () => {
+  it('should find min with accessor function', () => {
+    // Covers min with accessor (lines 21-22)
+    const data = [{ value: 10 }, { value: 3 }, { value: 7 }];
+    expect(min(data, d => d.value)).toBe(3);
+  });
+  it('should find max with accessor function', () => {
+    // Covers max with accessor (lines 42-43)
+    const data = [{ value: 10 }, { value: 3 }, { value: 7 }];
+    expect(max(data, d => d.value)).toBe(10);
+  });
+  it('should handle NaN values in min with accessor', () => {
+    const data = [{ v: NaN }, { v: 5 }, { v: 2 }];
+    expect(min(data, d => d.v)).toBe(2);
+  });
+  it('should handle NaN values in max with accessor', () => {
+    const data = [{ v: NaN }, { v: 5 }, { v: 2 }];
+    expect(max(data, d => d.v)).toBe(5);
+  });
+  it('should return [undefined, undefined] for extent of values that are all NaN', () => {
+    // Covers extent empty/all-NaN path (line 63)
+    expect(extent([NaN, NaN])).toEqual([undefined, undefined]);
+  });
+});

package/dist/collection/polyfill/d3/test/d3-axis-polyfill.test.js

@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/typedef */
+/**
+ * D3 Axis Polyfill Tests
+ *
+ * Tests for the d3-axis-polyfill module: axisBottom() and axisLeft() generators.
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+import { axisBottom, axisLeft } from '../d3-axis-polyfill';
+import { scaleLinear } from '../d3-scale-polyfill';
+import { select } from '../d3-selection-polyfill';
+// ─── Axis Tests ─────────────────────────────────────────────────────
+describe('D3 Axis Polyfill', () => {
+  it('should render bottom axis into an SVG g element', () => {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const scale = scaleLinear().domain([0, 100]).range([0, 300]);
+    const selection = select(g);
+    axisBottom(scale)(selection);
+    expect(g.querySelector('.domain')).not.toBeNull();
+    expect(g.querySelectorAll('.tick').length).toBeGreaterThan(0);
+  });
+  it('should render left axis into an SVG g element', () => {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const scale = scaleLinear().domain([0, 100]).range([200, 0]);
+    const selection = select(g);
+    axisLeft(scale).ticks(4)(selection);
+    expect(g.querySelector('.domain')).not.toBeNull();
+  });
+  it('should support custom tick format', () => {
+    var _a;
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const scale = scaleLinear().domain([0, 100]).range([0, 300]);
+    const selection = select(g);
+    axisBottom(scale).tickFormat(d => `$${d}`)(selection);
+    const firstTickText = g.querySelector('.tick text');
+    expect((_a = firstTickText === null || firstTickText === void 0 ? void 0 : firstTickText.textContent) === null || _a === void 0 ? void 0 : _a.startsWith('$')).toBe(true);
+  });
+});
+// ─── Additional Axis Coverage ───────────────────────────────────────
+describe('D3 Axis Polyfill - Additional Coverage', () => {
+  it('should fall back to domain() when scale has no ticks method', () => {
+    // Covers getTickValues fallback to domain (lines 155-158)
+    const mockScale = Object.assign((value) => Number(value) * 10, {
+      domain: ((d) => {
+        if (d === undefined)
+          return [0, 50, 100];
+        return mockScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }),
+      range: ((r) => {
+        if (r === undefined)
+          return [0, 300];
+        return mockScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }),
+    });
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    axisBottom(mockScale)(select(g));
+    const ticks = g.querySelectorAll('.tick');
+    expect(ticks.length).toBe(3); // Uses domain values [0, 50, 100]
+  });
+  it('should return empty ticks when scale has no ticks and no domain', () => {
+    // Covers getTickValues return [] fallback (line 158)
+    const mockScale = Object.assign((value) => Number(value), {
+      domain: undefined,
+      range: ((r) => {
+        if (r === undefined)
+          return [0, 300];
+        return mockScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }),
+    });
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    axisBottom(mockScale)(select(g));
+    const ticks = g.querySelectorAll('.tick');
+    expect(ticks.length).toBe(0);
+  });
+  it('should fall back to String() when scale has no tickFormat', () => {
+    var _a, _b;
+    // Covers getFormatter fallback to String (line 173)
+    const mockScale = Object.assign((value) => Number(value) * 3, {
+      domain: ((d) => {
+        if (d === undefined)
+          return [10, 20];
+        return mockScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }),
+      range: ((r) => {
+        if (r === undefined)
+          return [0, 200];
+        return mockScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }),
+    });
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    axisBottom(mockScale)(select(g));
+    const tickTexts = g.querySelectorAll('.tick text');
+    expect((_a = tickTexts[0]) === null || _a === void 0 ? void 0 : _a.textContent).toBe('10');
+    expect((_b = tickTexts[1]) === null || _b === void 0 ? void 0 : _b.textContent).toBe('20');
+  });
+  it('should support chaining ticks() and tickFormat() on axisBottom', () => {
+    var _a, _b;
+    // Covers axisBottom ticks/tickFormat chaining (lines 193-194)
+    const scale = scaleLinear().domain([0, 100]).range([0, 300]);
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const axis = axisBottom(scale)
+      .ticks(3)
+      .tickFormat(d => `${d}%`);
+    axis(select(g));
+    const tickTexts = g.querySelectorAll('.tick text');
+    expect(tickTexts.length).toBeGreaterThan(0);
+    for (let i = 0; i < tickTexts.length; i++) {
+      expect((_b = (_a = tickTexts[i]) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.endsWith('%')).toBe(true);
+    }
+  });
+  it('should support chaining ticks() and tickFormat() on axisLeft', () => {
+    var _a, _b;
+    // Covers axisLeft ticks/tickFormat chaining (lines 226-227)
+    const scale = scaleLinear().domain([0, 100]).range([200, 0]);
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const axis = axisLeft(scale)
+      .ticks(3)
+      .tickFormat(d => `$${d}`);
+    axis(select(g));
+    const tickTexts = g.querySelectorAll('.tick text');
+    expect(tickTexts.length).toBeGreaterThan(0);
+    for (let i = 0; i < tickTexts.length; i++) {
+      expect((_b = (_a = tickTexts[i]) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.startsWith('$')).toBe(true);
+    }
+  });
+});
+// ─── Axis Branch Edge Cases ─────────────────────────────────────────
+describe('D3 Axis Polyfill - Branch Edge Cases', () => {
+  describe('AxisGenerator edge cases', () => {
+    it('should handle null g element gracefully', () => {
+      // Covers if (!g) return branch in render (line 89)
+      const scale = scaleLinear().domain([0, 100]).range([0, 300]);
+      const axis = axisBottom(scale);
+      // Call axis with an empty selection (no node)
+      const emptySelection = select(document.createElement('div')).selectAll('.nonexistent');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      axis(emptySelection);
+      // Should not throw
+    });
+    it('should skip ticks where scale returns undefined', () => {
+      // Covers if (position === undefined) continue branch (line 114)
+      const mockScale = Object.assign((value) => {
+        // Return undefined for some values
+        return value === 'B' ? undefined : Number(value === 'A' ? 0 : 100);
+      }, {
+        domain: ((d) => {
+          if (d === undefined)
+            return ['A', 'B', 'C'];
+          return mockScale;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }),
+        range: ((r) => {
+          if (r === undefined)
+            return [0, 300];
+          return mockScale;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }),
+      });
+      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      axisBottom(mockScale)(select(g));
+      const ticks = g.querySelectorAll('.tick');
+      // Only 'A' and 'C' should have ticks; 'B' returns undefined
+      expect(ticks.length).toBe(2);
+    });
+  });
+});