@mathstack/viz 1.1.4 → 2.0.3

package/src/lib/axes/index.ts

@@ -0,0 +1,40 @@
+export * from './base/config/xy-axis-builder';
+export * from './base/config/xy-axis-config';
+export * from './base/config/xy-axis-options';
+export * from './base/xy-axis-base';
+export * from './baseline/axis-baseline';
+export * from './baseline/axis-baseline-builder';
+export * from './baseline/axis-baseline-options';
+export * from './grid/grid-builder';
+export * from './grid/grid-config';
+export * from './grid/grid-options';
+export * from './label/axis-label';
+export * from './label/axis-label-builder';
+export * from './label/axis-label-options';
+export * from './ordinal/ordinal-axis';
+export * from './ordinal/ordinal-axis-config';
+export * from './quantitative/quantitative-axis';
+export * from './quantitative/quantitative-axis-config';
+export * from './ticks/tick-wrap/tick-wrap';
+export * from './ticks/tick-wrap/tick-wrap-builder';
+export * from './ticks/tick-wrap/tick-wrap-options';
+export * from './ticks/ticks';
+export * from './ticks/ticks-builder';
+export * from './ticks/ticks-options';
+export * from './x/x-axis';
+export * from './x/x-axis-config';
+export * from './x-ordinal/x-ordinal-axis-builder';
+export * from './x-ordinal/x-ordinal-axis-config';
+export * from './x-ordinal/x-ordinal-axis.component';
+export * from './x-quantitative/x-quantitative-axis-builder';
+export * from './x-quantitative/x-quantitative-axis-config';
+export * from './x-quantitative/x-quantitative-axis.component';
+export * from './xy-axis.module';
+export * from './y/y-axis';
+export * from './y/y-axis-config';
+export * from './y-ordinal/y-ordinal-axis-builder';
+export * from './y-ordinal/y-ordinal-axis-config';
+export * from './y-ordinal/y-ordinal-axis.component';
+export * from './y-quantitative-axis/y-quantitative-axis-builder';
+export * from './y-quantitative-axis/y-quantitative-axis-config';
+export * from './y-quantitative-axis/y-quantitative-axis.component';

package/src/lib/axes/label/axis-label-builder.ts

@@ -0,0 +1,140 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { SvgTextWrapBuilder } from '../../svg-text-wrap/svg-text-wrap-builder';
+import { AxisLabel } from './axis-label';
+
+const DEFAULT = {
+  _offset: { x: 0, y: 0 },
+  _position: 'middle',
+};
+
+export class AxisLabelBuilder {
+  protected _anchor: 'start' | 'middle' | 'end';
+  protected _offset: {
+    x: number;
+    y: number;
+  };
+  protected _position: 'start' | 'middle' | 'end';
+  protected _text: string;
+  protected textWrapBuilder: SvgTextWrapBuilder;
+  protected textWrapFunction: (wrap: SvgTextWrapBuilder) => void;
+
+  constructor() {
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. The [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor) for the axis label.
+   *
+   * If not provided or if called with null, the anchor will be determined by the position.
+   *
+   * @default specific to the position
+   */
+  anchor(value: 'start' | 'middle' | 'end' | null): this {
+    if (value === null) {
+      this._anchor = undefined;
+      return this;
+    }
+    this._anchor = value;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. The offset for the axis label from the position that would otherwise be created. Allows for fine-tuning the position of the label.
+   *
+   * Positive y values will move the label down, positive x values will move the label to the right.
+   *
+   * If not provided or if called with null, labels parallel to the axis will be placed at the far extent of the margin. Labels perpendicular to the axis will be placed at the axis line. The latter will likely need an offset.
+   *
+   * @default { x: 0, y: 0 }
+   */
+  offset(offset: null): this;
+  offset(offset: { x?: number; y?: number }): this;
+  offset(offset: { x?: number; y?: number } | null): this {
+    if (offset === null) {
+      this._offset = DEFAULT._offset;
+      return this;
+    }
+    this._offset = {
+      x: offset.x || 0,
+      y: offset.y || 0,
+    };
+    return this;
+  }
+
+  /**
+   * OPTIONAL. The position of the axis label relative to the axis.
+   *
+   * If the axis is horizontal, the options are 'start' is left, 'middle' is center, and 'end' is right.
+   *
+   * If the axis is vertical, the options are 'start' is top, 'middle' is center, and 'end' is bottom.
+   *
+   * @default 'middle'
+   */
+  position(value: 'start' | 'middle' | 'end'): this {
+    this._position = value;
+    return this;
+  }
+
+  /**
+   * The text for the axis label.
+   */
+  text(value: string): this {
+    this._text = value;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Specifies properties for wrapping the text of the label.
+   *
+   * To unset the wrap, call with null.
+   */
+  wrap(wrap: null): this;
+  wrap(wrap: (wrap: SvgTextWrapBuilder) => void): this;
+  wrap(wrap: ((wrap: SvgTextWrapBuilder) => void) | null): this {
+    if (wrap === null) {
+      this.textWrapFunction = undefined;
+      return this;
+    }
+    this.textWrapFunction = wrap;
+    return this;
+  }
+
+  /**
+   * @internal Not meant to be called by consumers of the library.
+   */
+  _build(dimension: 'x' | 'y'): AxisLabel {
+    if (this.textWrapFunction) this.createTextWrapBuilder(dimension);
+    return new AxisLabel({
+      anchor: this.getAnchorForDimension(dimension),
+      position: this._position,
+      offset: this._offset,
+      text: this._text,
+      wrap: this.textWrapBuilder?.build(),
+    });
+  }
+
+  private createTextWrapBuilder(dimension: 'x' | 'y'): void {
+    this.textWrapBuilder = new SvgTextWrapBuilder();
+    const isRotatedYLabel = dimension === 'y' && this._position === 'middle';
+    // set defaults but let user override setting defaults before calling wrap function
+    if (isRotatedYLabel) {
+      this.textWrapBuilder.maintainXPosition(false);
+      this.textWrapBuilder.maintainYPosition(true);
+    }
+    this.textWrapFunction(this.textWrapBuilder);
+  }
+
+  private getAnchorForDimension(
+    dimension: 'x' | 'y'
+  ): 'start' | 'middle' | 'end' {
+    if (this._anchor) return this._anchor;
+    switch (this._position) {
+      case 'start':
+        return dimension === 'x' ? 'start' : 'end';
+      case 'middle':
+        return 'middle';
+      case 'end':
+        return 'end';
+    }
+  }
+}

package/src/lib/axes/label/axis-label-options.ts

@@ -0,0 +1,12 @@
+import { SvgTextWrap } from '../../svg-text-wrap';
+
+export interface AxisLabelOptions {
+  anchor: 'start' | 'middle' | 'end';
+  offset: {
+    x: number;
+    y: number;
+  };
+  position: 'start' | 'middle' | 'end';
+  text: string;
+  wrap: SvgTextWrap;
+}

package/src/lib/axes/label/axis-label.ts

@@ -0,0 +1,18 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { SvgTextWrap } from '../../svg-text-wrap';
+import { AxisLabelOptions } from './axis-label-options';
+
+export class AxisLabel implements AxisLabelOptions {
+  anchor: 'start' | 'middle' | 'end';
+  offset: {
+    x: number;
+    y: number;
+  };
+  position: 'start' | 'middle' | 'end';
+  text: string;
+  wrap: SvgTextWrap;
+
+  constructor(options: AxisLabelOptions) {
+    safeAssign(this, options);
+  }
+}

package/src/lib/axes/label/axis-labels.cy.ts

@@ -0,0 +1,303 @@
+/* eslint-disable @angular-eslint/prefer-standalone */
+import { Component, Input } from '@angular/core';
+import {
+  ChartConfig,
+  LinesConfig,
+  VicChartConfigBuilder,
+  VicChartModule,
+  VicLinesConfigBuilder,
+  VicLinesModule,
+  VicXQuantitativeAxisConfig,
+  VicXQuantitativeAxisConfigBuilder,
+  VicXyAxisModule,
+  VicXyBackgroundModule,
+  VicYQuantitativeAxisConfig,
+  VicYQuantitativeAxisConfigBuilder,
+} from '@mathstack/viz';
+import { beforeEach, cy, describe, expect, it } from 'local-cypress';
+import {
+  ContinentPopulationNumYearData,
+  ContinentPopulationNumYearDatum,
+} from '../../testing/data/continent-population-year-data';
+
+// Cypress will get the tick elements before d3 has set the text value of the elements,
+// because d3 creates the elements and sets the text value in a transition).
+// This wait time is necessary to ensure that the text value of the tick elements has been set by d3.
+const axisTickTextWaitTime = 1000;
+
+const margin = { top: 60, right: 20, bottom: 40, left: 80 };
+const chartHeight = 400;
+const chartWidth = 600;
+const data = ContinentPopulationNumYearData;
+@Component({
+  selector: 'vic-test-axis-labels',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-elements>
+        <svg:g vic-xy-background></svg:g>
+        <svg:g
+          vic-x-quantitative-axis
+          [config]="xQuantitativeAxisConfig"
+        ></svg:g>
+        <svg:g
+          vic-y-quantitative-axis
+          [config]="yQuantitativeAxisConfig"
+        ></svg:g>
+        <svg:g vic-primary-marks-lines [config]="linesConfig"></svg:g>
+      </ng-container>
+    </vic-xy-chart>
+  `,
+  styles: [],
+  imports: [
+    VicChartModule,
+    VicLinesModule,
+    VicXyAxisModule,
+    VicXyBackgroundModule,
+  ],
+})
+class TestAxisLabelsComponent<Datum> {
+  @Input() linesConfig: LinesConfig<Datum>;
+  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
+  chartConfig: ChartConfig = new VicChartConfigBuilder()
+    .maxHeight(chartHeight)
+    .maxWidth(chartWidth)
+    .margin(margin)
+    .scalingStrategy('responsive-width')
+    .getConfig();
+}
+
+function mountAxisLabelsComponent(
+  xAxisConfig: VicXQuantitativeAxisConfig<number>,
+  yAxisConfig: VicYQuantitativeAxisConfig<number>
+): void {
+  const linesConfig =
+    new VicLinesConfigBuilder<ContinentPopulationNumYearDatum>()
+      .data(data)
+      .xNumeric((dimension) =>
+        dimension.valueAccessor((d) => d.year).includeZeroInDomain(false)
+      )
+      .y((y) => y.valueAccessor((d) => d.population))
+      .stroke((stroke) =>
+        stroke.color((color) => color.valueAccessor((d) => d.continent))
+      )
+      .getConfig();
+
+  cy.mount(TestAxisLabelsComponent<ContinentPopulationNumYearDatum>, {
+    componentProperties: {
+      linesConfig: linesConfig,
+      xQuantitativeAxisConfig: xAxisConfig,
+      yQuantitativeAxisConfig: yAxisConfig,
+    },
+  });
+}
+
+// ***********************************************************
+// Test that axis labels are visible when various basic config values are used - no custom offsets
+// ***********************************************************
+describe('It creates axis labels that are visible when default values are used', () => {
+  beforeEach(() => {
+    const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f'))
+      .label((label) => label.text('Year'))
+      .getConfig();
+    const yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
+      .label((label) => label.text('Population'))
+      .ticks((ticks) => ticks.format('.2s'))
+      .getConfig();
+    mountAxisLabelsComponent(xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+  });
+  it('should have visible x and y axis labels that are centered on axes', () => {
+    cy.get('.vic-axis-x-quantitative .vic-axis-label').should(
+      'have.text',
+      'Year'
+    );
+    cy.get('.vic-axis-y-quantitative .vic-axis-label').should(
+      'have.text',
+      'Population'
+    );
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBBox();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .vic-axis-label').then(
+        (xAxisLabel) => {
+          const textRect = xAxisLabel[0].getBoundingClientRect();
+          expect(
+            textRect.left + (textRect.right - textRect.left) / 2
+          ).to.be.closeTo(margin.left + chartRect.width / 2, 4);
+        }
+      );
+      cy.get<SVGTextElement>('.vic-axis-y-quantitative .vic-axis-label').then(
+        (yAxisLabel) => {
+          const textRect = yAxisLabel[0].getBoundingClientRect();
+          expect(
+            textRect.top + (textRect.bottom - textRect.top) / 2
+          ).to.be.closeTo(margin.top + chartRect.height / 2, 4);
+        }
+      );
+    });
+  });
+});
+
+describe('It creates axis labels that correctly positioned when positions are start', () => {
+  beforeEach(() => {
+    const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f'))
+      .label((label) => label.text('Year').position('start'))
+      .getConfig();
+    const yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
+      .label((label) => label.text('Population').position('start'))
+      .ticks((ticks) => ticks.format('.2s'))
+      .getConfig();
+    mountAxisLabelsComponent(xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+  });
+  it('should have visible x and y axis labels that are at the leading edge of axes', () => {
+    cy.get<SVGGElement>('.vic-xy-background').then(() => {
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .vic-axis-label').then(
+        (xAxisLabel) => {
+          const textRect = xAxisLabel[0].getBoundingClientRect();
+          expect(textRect.left).to.be.closeTo(margin.left, 4);
+        }
+      );
+      cy.get<SVGTextElement>('.vic-axis-y-quantitative .vic-axis-label').then(
+        (yAxisLabel) => {
+          const textRect = yAxisLabel[0].getBoundingClientRect();
+          expect(textRect.bottom).to.be.closeTo(margin.top, 4);
+        }
+      );
+    });
+  });
+});
+
+describe('It creates axis labels that are correctly positioned when positions are end', () => {
+  beforeEach(() => {
+    const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f'))
+      .label((label) => label.text('Year').position('end'))
+      .getConfig();
+    const yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
+      .label((label) => label.text('Population').position('end'))
+      .ticks((ticks) => ticks.format('.2s'))
+      .getConfig();
+    mountAxisLabelsComponent(xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+  });
+  it('should have visible x and y axis labels that are at the trailing edge of axes', () => {
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .vic-axis-label').then(
+        (xAxisLabel) => {
+          const textRect = xAxisLabel[0].getBoundingClientRect();
+          expect(textRect.right).to.be.closeTo(chartRect.right, 4);
+        }
+      );
+      cy.get<SVGTextElement>('.vic-axis-y-quantitative .vic-axis-label').then(
+        (yAxisLabel) => {
+          const textRect = yAxisLabel[0].getBoundingClientRect();
+          expect(textRect.bottom).to.be.closeTo(chartRect.bottom, 4);
+        }
+      );
+    });
+  });
+});
+
+// ***********************************************************
+// Test that axis labels correctly wrap - brittle tests but better than nothing
+// ***********************************************************
+describe('It creates axis labels that are visible when default values are used', () => {
+  const wrapWidth = 160;
+  beforeEach(() => {
+    const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f'))
+      .label((label) =>
+        label
+          .text('Years in which Mathematica operated')
+          .wrap((wrap) => wrap.width(wrapWidth))
+      )
+      .getConfig();
+    const yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
+      .label((label) =>
+        label
+          .text(
+            'Number of spectacular components tests Mathematica has written as part of frontend work'
+          )
+          .wrap((wrap) => wrap.width(wrapWidth))
+      )
+      .ticks((ticks) => ticks.format('.2s'))
+      .getConfig();
+    mountAxisLabelsComponent(xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+  });
+  it('should have visible x and y axis labels that are correctly wrapped and centered on axes', () => {
+    // Ensure that there are multiple tspan elements created for each label.
+    cy.get('.vic-axis-x-quantitative .vic-axis-label tspan').should(
+      'have.length',
+      2
+    );
+    cy.get('.vic-axis-y-quantitative .vic-axis-label tspan').should(
+      'have.length',
+      3
+    );
+
+    // Ensure each line is offset vertically.
+    cy.get('.vic-axis-x-quantitative .vic-axis-label tspan').then((spans) => {
+      const dyValues = Array.from(spans).map((span) => span.getAttribute('dy'));
+      expect(new Set(dyValues).size).to.equal(2);
+    });
+    cy.get('.vic-axis-y-quantitative .vic-axis-label tspan').then((spans) => {
+      const dyValues = Array.from(spans).map((span) => span.getAttribute('dy'));
+      expect(new Set(dyValues).size).to.equal(3);
+    });
+
+    // dy values are evenly spaced
+    cy.get('.vic-axis-y-quantitative .vic-axis-label tspan').then((spans) => {
+      const dyValues = Array.from(spans).map((span) => span.getAttribute('dy'));
+      const differences = dyValues.reduce((acc, val, i) => {
+        if (i === 0) return acc;
+        const diff =
+          parseFloat(val || '0') - parseFloat(dyValues[i - 1] || '0');
+        const diffRoundedToPointOne = Math.round(diff * 10) / 10;
+        acc.push(diffRoundedToPointOne);
+        return acc;
+      }, []);
+      expect(new Set(differences).size).to.equal(1);
+    });
+
+    // Ensure that the overall width of the label is less than or equal to the wrap width.
+    cy.get('.vic-axis-x-quantitative .vic-axis-label')
+      .invoke('width')
+      .should('be.lte', wrapWidth);
+    cy.get('.vic-axis-y-quantitative .vic-axis-label')
+      .invoke('width')
+      .should('be.lte', wrapWidth);
+
+    // Ensure that the label text is split across multiple lines.
+    cy.get('.vic-axis-x-quantitative .vic-axis-label tspan').each(($span) => {
+      expect($span.text().length).to.be.greaterThan(0);
+    });
+    cy.get('.vic-axis-y-quantitative .vic-axis-label tspan').each(($span) => {
+      expect($span.text().length).to.be.greaterThan(0);
+    });
+
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBBox();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .vic-axis-label').then(
+        (xAxisLabel) => {
+          const textRect = xAxisLabel[0].getBoundingClientRect();
+          expect(
+            textRect.left + (textRect.right - textRect.left) / 2
+          ).to.be.closeTo(margin.left + chartRect.width / 2, 4);
+        }
+      );
+      cy.get<SVGTextElement>('.vic-axis-y-quantitative .vic-axis-label').then(
+        (yAxisLabel) => {
+          const textRect = yAxisLabel[0].getBoundingClientRect();
+          expect(
+            textRect.top + (textRect.bottom - textRect.top) / 2
+          ).to.be.closeTo(margin.top + chartRect.height / 2, 4);
+        }
+      );
+    });
+  });
+});

package/src/lib/axes/ordinal/ordinal-axis-config.ts

@@ -0,0 +1,31 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { AbstractConstructor } from '../../core/common-behaviors/constructor';
+import { DataValue } from '../../core/types/values';
+import { XyAxisConfig } from '../base/config/xy-axis-config';
+import { XyAxisBaseOptions } from '../base/config/xy-axis-options';
+import { Ticks } from '../ticks/ticks';
+import { TicksOptions } from '../ticks/ticks-options';
+
+export interface VicOrdinalAxisOptions<
+  Tick extends DataValue,
+> extends XyAxisBaseOptions {
+  ticks: TicksOptions<Tick>;
+}
+
+export function mixinOrdinalAxisConfig<
+  Tick extends DataValue,
+  T extends AbstractConstructor<XyAxisConfig<Tick, Ticks<Tick>>>,
+>(Base: T) {
+  abstract class Mixin extends Base implements VicOrdinalAxisOptions<Tick> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(...args: any[]) {
+      super(...args);
+      safeAssign(this, args[0]);
+    }
+  }
+  return Mixin;
+}
+
+export abstract class VicOrdinalAxisConfig<
+  Tick extends DataValue,
+> extends mixinOrdinalAxisConfig(XyAxisConfig)<Tick, Ticks<Tick>> {}

package/src/lib/axes/ordinal/ordinal-axis.spec.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { XyChartComponent } from '@mathstack/viz';
+import { OrdinalAxisStub } from '../../testing/stubs/ordinal-axis.stub';
+
+describe('the OrdinalAxis mixin', () => {
+  let abstractClass: OrdinalAxisStub<string>;
+  const mockElementRef = {
+    nativeElement: {
+      querySelector: jasmine.createSpy('querySelector'),
+      style: {},
+    },
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        OrdinalAxisStub,
+        XyChartComponent,
+        { provide: ElementRef, useValue: mockElementRef },
+      ],
+    });
+    abstractClass = TestBed.inject(OrdinalAxisStub);
+  });
+
+  it('should be created', () => {
+    expect(abstractClass).toBeTruthy();
+  });
+});

package/src/lib/axes/ordinal/ordinal-axis.ts

@@ -0,0 +1,26 @@
+import { format, utcFormat } from 'd3';
+import { AbstractConstructor } from '../../core/common-behaviors/constructor';
+import { DataValue } from '../../core/types/values';
+import { XyAxis } from '../base/xy-axis-base';
+import { Ticks } from '../ticks/ticks';
+import { VicOrdinalAxisConfig as OrdinalAxisConfig } from './ordinal-axis-config';
+
+export function ordinalAxisMixin<
+  Tick extends DataValue,
+  T extends AbstractConstructor<XyAxis<Tick, Ticks<Tick>>>,
+>(Base: T) {
+  abstract class Mixin extends Base {
+    override config: OrdinalAxisConfig<Tick>;
+
+    setTicks(tickFormat: string | ((value: Tick) => string)): void {
+      this.axis.tickFormat((d) => {
+        const formatter = d instanceof Date ? utcFormat : format;
+        return typeof tickFormat === 'function'
+          ? tickFormat(d)
+          : formatter(tickFormat)(d);
+      });
+    }
+  }
+
+  return Mixin;
+}

package/src/lib/axes/quantitative/quantitative-axis-config.ts

@@ -0,0 +1,39 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { AbstractConstructor } from '../../core/common-behaviors/constructor';
+import { ContinuousValue } from '../../core/types/values';
+import { XyAxisConfig } from '../base/config/xy-axis-config';
+import { XyAxisBaseOptions } from '../base/config/xy-axis-options';
+import { QuantitativeTicks } from '../ticks/ticks';
+import { QuantitativeTicksOptions } from '../ticks/ticks-options';
+
+export interface VicQuantitativeAxisOptions<
+  Tick extends ContinuousValue,
+> extends XyAxisBaseOptions {
+  ticks: QuantitativeTicksOptions<Tick>;
+}
+
+export function mixinQuantitativeAxisConfig<
+  Tick extends ContinuousValue,
+  T extends AbstractConstructor<XyAxisConfig<Tick, QuantitativeTicks<Tick>>>,
+>(Base: T) {
+  abstract class Mixin
+    extends Base
+    implements VicQuantitativeAxisOptions<Tick>
+  {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(...args: any[]) {
+      super(...args);
+      if (args.length > 0) {
+        safeAssign(this, args[0]);
+      }
+    }
+  }
+  return Mixin;
+}
+
+export abstract class VicQuantitativeAxisConfig<
+  Tick extends ContinuousValue,
+> extends mixinQuantitativeAxisConfig(XyAxisConfig)<
+  Tick,
+  QuantitativeTicks<Tick>
+> {}