@heartlandone/vega 2.76.0 → 2.77.0

package/dist/collection/helpers/chart/test/input-processors/format-time-positions-input-processor.test.js

@@ -1,5 +1,5 @@
 import { FormatTimePositionsInputProcessor } from '../../input-processors/format-time-positions-input-processor';
-import { timeParse as d3TimeParse } from 'd3';
+import { timeParse as d3TimeParse } from '../../../../polyfill/d3';
 describe('formatTimePositionsInputProcessor', () => {
   const formatTimePositionsInputProcessor = new FormatTimePositionsInputProcessor();
   it('should return expect result when call the process function ', () => {

package/dist/collection/helpers/chart/test/input-processors/sort-positions-input-processor.test.js

@@ -1,5 +1,5 @@
 import { SortPositionsInputProcessor } from '../../input-processors/sort-positions-input-processor';
-import { timeParse as d3TimeParse } from 'd3';
+import { timeParse as d3TimeParse } from '../../../../polyfill/d3';
 describe('sortPositionsInputProcessor', () => {
   const sortPositionsInputProcessor = new SortPositionsInputProcessor();
   it('should return expect result when call the process function ', () => {

package/dist/collection/helpers/chart/test/input-processors/x-axis-input-processor.test.js

@@ -36,4 +36,43 @@ describe('scaleGenerator', () => {
     expect(xAxisInputProcessor['getScale'](stringData, width, 'category').domain()).toEqual(stringData.map((item) => item.x));
     expect(xAxisInputProcessor['getScale'](stringDataNeedSort, width, 'category', 1, (item, nextItem) => 'ABCD'.indexOf(item) - 'ABCD'.indexOf(nextItem)).domain()).toEqual(['A', 'B', 'C', 'D']);
   });
+  it('should fall back to default domains when input data is empty', () => {
+    const width = 200;
+    expect(xAxisInputProcessor['getScale']([], width, 'value').domain()).toEqual([0, 0]);
+    const timeDomain = xAxisInputProcessor['getScale']([], width, 'time', 1).domain();
+    expect(timeDomain[0]).toBeInstanceOf(Date);
+    expect(timeDomain[1]).toBeInstanceOf(Date);
+    expect(Math.abs(timeDomain[1].getTime() - timeDomain[0].getTime())).toBeLessThan(10);
+  });
+  it('should pass correct padding to getScale based on container tagName', () => {
+    const getScaleSpy = jest
+      .spyOn(xAxisInputProcessor, 'getScale')
+      .mockReturnValue({});
+    const previousOutput = {
+      width: 200,
+      height: 100,
+      innerWidth: 200,
+      innerHeight: 100,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    };
+    const dataSource = [];
+    const lineChartInput = {
+      dataSource,
+      container: document.createElement('vega-line-chart'),
+      xAxis: { type: 'value' },
+    };
+    xAxisInputProcessor.process(lineChartInput, previousOutput);
+    expect(getScaleSpy).toHaveBeenLastCalledWith(dataSource, 200, 'value', 1, undefined);
+    const divChartInput = {
+      dataSource,
+      container: document.createElement('div'),
+      xAxis: { type: 'value' },
+    };
+    xAxisInputProcessor.process(divChartInput, previousOutput);
+    expect(getScaleSpy).toHaveBeenLastCalledWith(dataSource, 200, 'value', 0.1, undefined);
+    getScaleSpy.mockRestore();
+  });
 });

package/dist/collection/helpers/chart/test/input-processors/x-axis-label-formatter-input-processor.test.js

@@ -1,5 +1,5 @@
 import { XAxisLabelFormatterInputProcessor } from '../../input-processors/x-axis-label-formatter-input-processor';
-import { scaleTime } from 'd3';
+import { scaleTime } from '../../../../polyfill/d3';
 describe('xAxisLabelFormatterInputProcessor', () => {
   const xAxisLabelFormatterInputProcessor = new XAxisLabelFormatterInputProcessor();
   it('should not override the default scale formatter function when the type is not time or labelFormatter is not empty', () => {
@@ -41,22 +41,69 @@ describe('xAxisLabelFormatterInputProcessor', () => {
   });
   it('should call the expect function when call the time formatter function', () => {
     const mockXAxisLabelFormatterInputProcessor = new XAxisLabelFormatterInputProcessor();
-    const mockSecond = jest.fn();
-    const mockMinute = jest.fn();
-    const mockHour = jest.fn();
-    const mockDay = jest.fn();
-    mockXAxisLabelFormatterInputProcessor['formatMillisecond'] = mockSecond;
-    mockXAxisLabelFormatterInputProcessor['formatSecond'] = mockMinute;
-    mockXAxisLabelFormatterInputProcessor['formatMinute'] = mockHour;
-    mockXAxisLabelFormatterInputProcessor['formatHour'] = mockDay;
-    const testDate = new Date('2023-03-02');
-    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date(testDate.valueOf() - 100));
+    const mockMillisecond = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockSecond = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockMinute = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockHour = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockDay = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockWeek = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockMonth = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    const mockYear = jest.fn((_date) => {
+      void _date;
+      return '';
+    });
+    mockXAxisLabelFormatterInputProcessor['formatMillisecond'] = mockMillisecond;
+    mockXAxisLabelFormatterInputProcessor['formatSecond'] = mockSecond;
+    mockXAxisLabelFormatterInputProcessor['formatMinute'] = mockMinute;
+    mockXAxisLabelFormatterInputProcessor['formatHour'] = mockHour;
+    mockXAxisLabelFormatterInputProcessor['formatDay'] = mockDay;
+    mockXAxisLabelFormatterInputProcessor['formatWeek'] = mockWeek;
+    mockXAxisLabelFormatterInputProcessor['formatMonth'] = mockMonth;
+    mockXAxisLabelFormatterInputProcessor['formatYear'] = mockYear;
+    // millisecond: has ms
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-03-02T00:00:00.100Z'));
+    expect(mockMillisecond).toBeCalledTimes(1);
+    // second: at second boundary but within a minute
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-03-02T00:00:01.000Z'));
     expect(mockSecond).toBeCalledTimes(1);
-    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date(testDate.valueOf() + 59 * 1000));
+    // minute: at minute boundary but within an hour
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-03-02T00:01:00.000Z'));
     expect(mockMinute).toBeCalledTimes(1);
-    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date(testDate.valueOf() + 2 * 60 * 1000));
+    // hour: at hour boundary but within a day
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-03-02T01:00:00.000Z'));
     expect(mockHour).toBeCalledTimes(1);
-    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date(testDate.valueOf() + 60 * 60 * 1000));
+    // day: at day boundary but not week boundary (Thu)
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-03-02T00:00:00.000Z'));
     expect(mockDay).toBeCalledTimes(1);
+    // week: at week boundary (Sun) but not month boundary
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-03-05T00:00:00.000Z'));
+    expect(mockWeek).toBeCalledTimes(1);
+    // month: at month boundary but not year boundary
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-02-01T00:00:00.000Z'));
+    expect(mockMonth).toBeCalledTimes(1);
+    // year: at year boundary
+    mockXAxisLabelFormatterInputProcessor['timeFormatter'](new Date('2023-01-01T00:00:00.000Z'));
+    expect(mockYear).toBeCalledTimes(1);
   });
 });

package/dist/collection/helpers/chart/test/input-processors/y-axis-input-processor.coverage.test.js

@@ -0,0 +1,39 @@
+describe('YAxisInputProcessor - coverage-only branches', () => {
+  it('should fall back when polyfill returns undefined/empty', () => {
+    jest.isolateModules(() => {
+      const createdScales = [];
+      jest.doMock('../../../../polyfill/d3', () => {
+        const scaleLinear = jest.fn(() => {
+          const scale = {
+            domain: jest.fn(function () {
+              return this;
+            }),
+            range: jest.fn(function () {
+              return this;
+            }),
+            // intentionally no ticks()
+          };
+          createdScales.push(scale);
+          return scale;
+        });
+        return {
+          scaleLinear,
+          max: jest.fn(() => undefined),
+          min: jest.fn(() => undefined),
+          extent: jest.fn(() => [undefined, undefined]),
+        };
+      });
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const requiredModule = require('../../input-processors/y-axis-input-processor');
+      const processor = new requiredModule.YAxisInputProcessor();
+      const data = [{ x: 1, y: 0 }];
+      const result = processor['getScale'](data, [200, 0], 4);
+      expect(result.ticks).toBe(4);
+      expect(createdScales.length).toBe(2);
+      expect(createdScales[0].domain).toHaveBeenCalledWith([0, 0]);
+      expect(createdScales[1].domain).toHaveBeenCalledWith([0, 0]);
+      expect(createdScales[1].range).toHaveBeenCalledWith([200, 0]);
+    });
+  });
+});
+export {};

package/dist/collection/helpers/chart/test/input-processors/y-axis-input-processor.test.js

@@ -14,6 +14,20 @@ describe('scaleGenerator', () => {
     ]);
     expect(yAxisInputProcessor['getScale'](numberData, [height, 0], 4).scale.domain()[0]).toEqual(0);
   });
+  it('should expand domain/ticks when tick rounding excludes min/max', () => {
+    // Use values where the generated tick start/stop (based on a rounded step)
+    // does not include the data min/max, forcing both min and max adjustments.
+    const numberData = [
+      { x: 1, y: -125 },
+      { x: 2, y: 210 },
+    ];
+    const height = 200;
+    const result = yAxisInputProcessor['getScale'](numberData, [height, 0], 4);
+    const domain = result.scale.domain();
+    expect(domain[0]).toBeLessThanOrEqual(-125);
+    expect(domain[1]).toBeGreaterThanOrEqual(210);
+    expect(result.ticks).toBeGreaterThan(4);
+  });
   // VD-992
   it('should return the correct min data when call the getScale function', () => {
     const numberData = [

package/dist/collection/helpers/chart/test/renderers/svg-renderer.test.js

@@ -1,5 +1,5 @@
 import { SVGRenderer } from '../../renderers/svg-renderer';
-import { scaleLinear } from 'd3';
+import { scaleLinear } from '../../../../polyfill/d3';
 describe('svg renderer', () => {
   it('should set context layout when run the set layout function', () => {
     const context = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

package/dist/collection/helpers/common/test/wait-for-component-did-render.test.js

@@ -0,0 +1,67 @@
+import { waitForComponentDidRender } from '../index';
+import ChangeManager from '../../change-manager/change-manager';
+import domNodeSubjectFactory from '../../change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalComponentDidRender } from '../../event-manager/event-id/vega-internal-event-id';
+/**
+ * Creates a minimal HTMLStencilElement-compatible HTMLElement for testing.
+ */
+function createComponentRef() {
+  return document.createElement('div');
+}
+describe('waitForComponentDidRender', () => {
+  it('resolves the promise when ChangeManager notifies the subject', async () => {
+    const componentRef = createComponentRef();
+    // Start waiting — do NOT await yet; we need to trigger the notify first.
+    const waitPromise = waitForComponentDidRender(componentRef);
+    // Grab the subject that the function just registered an observer on.
+    const subject = domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender);
+    // Simulate the component firing its "componentDidRender" internal event.
+    ChangeManager.notify(subject, null);
+    // The promise should now be resolved.
+    await expect(waitPromise).resolves.toBeNull();
+  });
+  it('un registers the observer from ChangeManager after the promise resolves', async () => {
+    var _a, _b;
+    const componentRef = createComponentRef();
+    const waitPromise = waitForComponentDidRender(componentRef);
+    const subject = domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender);
+    // Capture the observer count before notification.
+    const observersBefore = ((_a = ChangeManager['pubSubMap'].get(subject)) !== null && _a !== void 0 ? _a : []).length;
+    // Notify once — this should resolve the promise AND unregister the observer.
+    ChangeManager.notify(subject, null);
+    await waitPromise;
+    // After resolving, the observer must have been removed.
+    const observersAfter = ((_b = ChangeManager['pubSubMap'].get(subject)) !== null && _b !== void 0 ? _b : []).length;
+    expect(observersAfter).toBe(observersBefore - 1);
+  });
+  it('resolves with null', async () => {
+    const componentRef = createComponentRef();
+    const waitPromise = waitForComponentDidRender(componentRef);
+    const subject = domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender);
+    ChangeManager.notify(subject, null);
+    const result = await waitPromise;
+    expect(result).toBeNull();
+  });
+  it('registers an observer with ChangeManager before the event fires', async () => {
+    const componentRef = createComponentRef();
+    // Spy on register BEFORE calling the function under test.
+    const registerSpy = jest.spyOn(ChangeManager, 'register');
+    const waitPromise = waitForComponentDidRender(componentRef);
+    expect(registerSpy).toHaveBeenCalledTimes(1);
+    // Clean up — trigger resolve so the promise does not leak.
+    const subject = domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender);
+    ChangeManager.notify(subject, null);
+    await waitPromise;
+    registerSpy.mockRestore();
+  });
+  it('calls ChangeManager.unregister when the observer is notified', async () => {
+    const componentRef = createComponentRef();
+    const unregisterSpy = jest.spyOn(ChangeManager, 'unregister');
+    const waitPromise = waitForComponentDidRender(componentRef);
+    const subject = domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender);
+    ChangeManager.notify(subject, null);
+    await waitPromise;
+    expect(unregisterSpy).toHaveBeenCalledTimes(1);
+    unregisterSpy.mockRestore();
+  });
+});

package/dist/collection/helpers/slimmers/mutation-observer/aria-attributes-value-mapper.js

@@ -105,6 +105,10 @@ export class AriaAttributesValueMapper extends MutationObserverSlimmer {
         finalValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : '';
       }
       try {
+        if (String(finalValue).trim() === '') {
+          target.removeAttribute(ariaAttr);
+          return;
+        }
         const existing = target.getAttribute(ariaAttr);
         if (existing !== finalValue) {
           target.setAttribute(ariaAttr, finalValue);

package/dist/collection/helpers/slimmers/mutation-observer/test/aria-attributes-value-mapper.test.js

@@ -178,7 +178,7 @@ describe('AriaAttributesValueMapper', () => {
     comp.connectedCallback();
     comp.componentDidLoad();
     // should set attribute to empty string when no defaultValue provided
-    expect(button.getAttribute('aria-label')).toBe('');
+    expect(button.getAttribute('aria-label')).toBe(null);
   });
   it('should handle empty mutations array (pass undefined to performMapping)', () => {
     const comp = new MockedComponent();

package/dist/collection/helpers/validator/rules/valid-phone-number-rule.js

@@ -1,4 +1,4 @@
-import { getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js';
+import { getCountryCallingCode, parsePhoneNumber } from '../../../polyfill/libphonenumber';
 import { InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract';
 /**
  * A rule that checks if it's a valid phone number

package/dist/collection/helpers/validator/test/rules/valid-phone-number-rule.test.js

@@ -74,6 +74,16 @@ describe('ValidPhoneNumberRule', () => {
       visible: true,
     })).toEqual(false);
   });
+  test('should return invalid result when parsePhoneNumber throws an exception', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    // Input containing letters causes parsePhoneNumber to throw NOT_A_NUMBER
+    // when extract: false, exercising the catch block in isValidPhoneNumberForCountry
+    // eslint-disable-next-line spellcheck/spell-checker
+    expect(rule.evaluate('abc123')).toEqual({
+      isValid: false,
+      message: `Phone number is not valid`,
+    });
+  });
   test('should return false when the input is empty', () => {
     const rule = new ValidPhoneNumberRule(() => 'US', true);
     expect(rule.canEvaluate('')).toBeFalsy();

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

@@ -0,0 +1,89 @@
+/**
+ * D3 Array Polyfill - Lightweight array utility functions.
+ *
+ * This is a drop-in replacement for d3-array, implementing only the methods
+ * used in the Vega chart rendering system: min, max, extent, and map.
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+/**
+ * Returns the minimum value in the array.
+ * Mimics d3.min().
+ *
+ * @template T
+ * @param {T[]} array - Array of values.
+ * @param {Function} [accessor] - Optional accessor function.
+ * @returns {number | undefined} The minimum value, or undefined for empty arrays.
+ */
+export function min(array, accessor) {
+  let result;
+  for (let i = 0; i < array.length; i++) {
+    const value = accessor ? accessor(array[i], i) : Number(array[i]);
+    if (value != null && !Number.isNaN(value)) {
+      if (result === undefined || value < result) {
+        result = value;
+      }
+    }
+  }
+  return result;
+}
+/**
+ * Returns the maximum value in the array.
+ * Mimics d3.max().
+ *
+ * @template T
+ * @param {T[]} array - Array of values.
+ * @param {Function} [accessor] - Optional accessor function.
+ * @returns {number | undefined} The maximum value, or undefined for empty arrays.
+ */
+export function max(array, accessor) {
+  let result;
+  for (let i = 0; i < array.length; i++) {
+    const value = accessor ? accessor(array[i], i) : Number(array[i]);
+    if (value != null && !Number.isNaN(value)) {
+      if (result === undefined || value > result) {
+        result = value;
+      }
+    }
+  }
+  return result;
+}
+/**
+ * Returns the [min, max] of the array.
+ * Mimics d3.extent().
+ *
+ * @template T
+ * @param {T[]} array - Array of values.
+ * @returns {[T, T] | [undefined, undefined]} Tuple of [min, max], or [undefined, undefined] for empty arrays.
+ */
+export function extent(array) {
+  let minVal;
+  let maxVal;
+  for (const value of array) {
+    if (value != null && value >= value) {
+      if (minVal === undefined || value < minVal) {
+        minVal = value;
+      }
+      if (maxVal === undefined || value > maxVal) {
+        maxVal = value;
+      }
+    }
+  }
+  if (minVal === undefined || maxVal === undefined) {
+    return [undefined, undefined];
+  }
+  return [minVal, maxVal];
+}
+/**
+ * Maps each element of the array through a transform function.
+ * Mimics d3.map() (the array mapping function from d3-array, not the Map collection).
+ *
+ * @template T
+ * @template U
+ * @param {T[]} array - Input array.
+ * @param {Function} mapper - Transform function called with (element, index).
+ * @returns {U[]} New array of transformed values.
+ */
+export function map(array, mapper) {
+  return array.map(mapper);
+}

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

@@ -0,0 +1,195 @@
+/**
+ * D3 Axis Polyfill - Lightweight SVG axis generators.
+ *
+ * This is a drop-in replacement for d3-axis, implementing only the methods
+ * used in the Vega chart rendering system: axisBottom and axisLeft.
+ *
+ * @see VD-5022 - [Zero Dependencies] remove d3 dependency
+ */
+/**
+ * Internal axis generator class.
+ */
+class AxisGenerator {
+  /**
+   * @param {AxisScale} scale - The scale to use for the axis.
+   * @param {string} orientation - 'bottom' for x-axis, 'left' for y-axis.
+   */
+  constructor(scale, orientation) {
+    this._tickCount = 10;
+    this._tickFormatter = null;
+    this._scale = scale;
+    this._orientation = orientation;
+  }
+  /**
+   * Sets the number of ticks.
+   *
+   * @param {number} count - Desired number of ticks.
+   */
+  setTickCount(count) {
+    this._tickCount = count;
+  }
+  /**
+   * Sets a custom tick format function.
+   *
+   * @param {Function} formatter - Function to format tick labels.
+   */
+  setTickFormatter(formatter) {
+    this._tickFormatter = formatter;
+  }
+  /**
+   * Renders the axis into the given SVG <g> selection.
+   * Creates a domain path, tick lines, and tick text labels.
+   *
+   * @param {D3SelectionPolyfill} selection - A D3SelectionPolyfill wrapping an SVG <g> element.
+   */
+  render(selection) {
+    const g = selection.node();
+    if (!g)
+      return;
+    const doc = g.ownerDocument;
+    const tickValues = this.getTickValues();
+    const formatter = this.getFormatter();
+    const offset = 0.5;
+    // Compute band centering offset (d3's center() function)
+    const bandOffset = typeof this._scale.bandwidth === 'function'
+      ? Math.max(0, this._scale.bandwidth() - offset * 2) / 2
+      : 0;
+    const range = this._scale.range();
+    const range0 = +range[0] + offset;
+    const range1 = +range[range.length - 1] + offset;
+    // Create domain path (with outer tick marks, matching d3's tickSizeOuter = 6)
+    const domain = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    domain.setAttribute('class', 'domain');
+    domain.setAttribute('stroke', 'currentColor');
+    if (this._orientation === 'bottom') {
+      domain.setAttribute('d', `M${range0},6V${offset}H${range1}V6`);
+    }
+    else {
+      domain.setAttribute('d', `M-6,${range0}H${offset}V${range1}H-6`);
+    }
+    g.appendChild(domain);
+    // Create ticks
+    for (const tickValue of tickValues) {
+      const position = this._scale(tickValue);
+      if (position === undefined)
+        continue;
+      const finalPosition = position + bandOffset + offset;
+      const tickG = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+      tickG.setAttribute('class', 'tick');
+      tickG.setAttribute('opacity', '1');
+      const tickLine = doc.createElementNS('http://www.w3.org/2000/svg', 'line');
+      tickLine.setAttribute('stroke', 'currentColor');
+      const tickText = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+      tickText.setAttribute('fill', 'currentColor');
+      tickText.textContent = formatter(tickValue);
+      // eslint-disable-next-line spellcheck/spell-checker
+      const verticalOffset = this._orientation === 'bottom' ? '0.71em' : '0.32em';
+      if (this._orientation === 'bottom') {
+        tickG.setAttribute('transform', `translate(${finalPosition},0)`);
+        tickLine.setAttribute('y2', '6');
+        tickText.setAttribute('y', '9');
+        // eslint-disable-next-line spellcheck/spell-checker
+        tickText.setAttribute('dy', verticalOffset);
+      }
+      else {
+        tickG.setAttribute('transform', `translate(0,${finalPosition})`);
+        tickLine.setAttribute('x2', '-6');
+        tickText.setAttribute('x', '-9');
+        // eslint-disable-next-line spellcheck/spell-checker
+        tickText.setAttribute('dy', verticalOffset);
+      }
+      tickG.appendChild(tickLine);
+      tickG.appendChild(tickText);
+      g.appendChild(tickG);
+    }
+    // Set axis group attributes (matching d3)
+    g.setAttribute('fill', 'none');
+    g.setAttribute('font-size', '10');
+    g.setAttribute('font-family', 'sans-serif');
+    g.setAttribute('text-anchor', this._orientation === 'bottom' ? 'middle' : 'end');
+  }
+  /**
+   * Gets tick values from the scale.
+   *
+   * @template Domain
+   * @returns {Domain[]} Array of tick domain values.
+   */
+  getTickValues() {
+    if (this._scale.ticks) {
+      return this._scale.ticks(this._tickCount);
+    }
+    if (this._scale.domain) {
+      return this._scale.domain();
+    }
+    return [];
+  }
+  /**
+   * Gets the tick formatter function.
+   *
+   * @template Domain
+   * @returns {(d: Domain) => string} A function that converts tick values to strings.
+   */
+  getFormatter() {
+    if (this._tickFormatter) {
+      return this._tickFormatter;
+    }
+    if (this._scale.tickFormat) {
+      return this._scale.tickFormat(this._tickCount);
+    }
+    return (d) => String(d);
+  }
+}
+/**
+ * Creates a bottom-oriented axis generator. Mimics d3.axisBottom().
+ *
+ * @template Domain
+ * @param {AxisScale} scale - The scale to use.
+ * @returns {Axis<Domain>} An Axis callable that renders into a <g> element.
+ */
+export function axisBottom(scale) {
+  const generator = new AxisGenerator(scale, 'bottom');
+  /* eslint-disable jsdoc/require-jsdoc */
+  const axisFn = Object.assign(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (selection) => {
+    generator.render(selection);
+  }, {
+    ticks: (count) => {
+      generator.setTickCount(count);
+      return axisFn;
+    },
+    tickFormat: (formatter) => {
+      generator.setTickFormatter(formatter);
+      return axisFn;
+    },
+  });
+  /* eslint-enable jsdoc/require-jsdoc */
+  return axisFn;
+}
+/**
+ * Creates a left-oriented axis generator. Mimics d3.axisLeft().
+ *
+ * @template Domain
+ * @param {AxisScale} scale - The scale to use.
+ * @returns {Axis<Domain>} An Axis callable that renders into a <g> element.
+ */
+export function axisLeft(scale) {
+  const generator = new AxisGenerator(scale, 'left');
+  /* eslint-disable jsdoc/require-jsdoc */
+  const axisFn = Object.assign(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (selection) => {
+    generator.render(selection);
+  }, {
+    ticks: (count) => {
+      generator.setTickCount(count);
+      return axisFn;
+    },
+    tickFormat: (formatter) => {
+      generator.setTickFormatter(formatter);
+      return axisFn;
+    },
+  });
+  /* eslint-enable jsdoc/require-jsdoc */
+  return axisFn;
+}