@mathstack/viz 1.1.5 → 2.0.3

package/src/lib/dots/config/dots-builder.ts

@@ -0,0 +1,442 @@
+import { Injectable } from '@angular/core';
+import { safeAssign } from '@mathstack/app-kit';
+import { schemeTableau10 } from 'd3';
+import { DataValue } from '../../core';
+import { DateChartPositionDimensionBuilder } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position-builder';
+import { NumberChartPositionDimensionBuilder } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position-builder';
+import { NumberVisualValueDimensionBuilder } from '../../data-dimensions/continuous-quantitative/number-visual-value/number-visual-value-builder';
+import { OrdinalChartPositionDimensionBuilder } from '../../data-dimensions/ordinal/ordinal-chart-position/ordinal-chart-position-builder';
+import { OrdinalVisualValueDimensionBuilder } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value-builder';
+import { PrimaryMarksBuilder } from '../../marks/primary-marks/config/primary-marks-builder';
+import { StrokeBuilder } from '../../stroke/stroke-builder';
+import { DotsConfig } from './dots-config';
+
+const DEFAULT = {
+  _pointerDetectionRadius: 12,
+  _fill: 'lightgray',
+  _opacity: 1,
+  _radius: 2,
+};
+
+@Injectable()
+export class VicDotsConfigBuilder<
+  Datum,
+  XOrdinalDomain extends DataValue = string,
+  YOrdinalDomain extends DataValue = string,
+> extends PrimaryMarksBuilder<Datum> {
+  private _opacity: number;
+  private _pointerDetectionRadius: number;
+  private fillBuilderCategorical: OrdinalVisualValueDimensionBuilder<
+    Datum,
+    string,
+    string
+  >;
+  private fillBuilderNumber: NumberVisualValueDimensionBuilder<Datum, string>;
+  private fillBuilderConst: OrdinalVisualValueDimensionBuilder<
+    Datum,
+    string,
+    string
+  >;
+  private radiusBuilderCategorical: OrdinalVisualValueDimensionBuilder<
+    Datum,
+    string,
+    number
+  >;
+  private radiusBuilderNumber: NumberVisualValueDimensionBuilder<Datum, number>;
+  private radiusBuilderConst: OrdinalVisualValueDimensionBuilder<
+    Datum,
+    string,
+    number
+  >;
+  private strokeBuilder: StrokeBuilder;
+  private xBuilderNumeric: NumberChartPositionDimensionBuilder<Datum>;
+  private xBuilderDate: DateChartPositionDimensionBuilder<Datum>;
+  private xBuilderOrdinal: OrdinalChartPositionDimensionBuilder<
+    Datum,
+    XOrdinalDomain
+  >;
+  private yBuilderNumeric: NumberChartPositionDimensionBuilder<Datum>;
+  private yBuilderDate: DateChartPositionDimensionBuilder<Datum>;
+  private yBuilderOrdinal: OrdinalChartPositionDimensionBuilder<
+    Datum,
+    YOrdinalDomain
+  >;
+
+  constructor() {
+    super();
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. Sets the appearance of the fill for the dots using a color string.
+   *
+   * If a string is passed, it will be used as the color for all dots.
+   *
+   * @default 'schemeTableau10[0]'
+   */
+  fill(fill: null): this;
+  fill(fill: string): this;
+  fill(fill: string | null): this {
+    if (fill === null) {
+      this.fillBuilderConst = undefined;
+      return this;
+    }
+    this.fillBuilderConst = new OrdinalVisualValueDimensionBuilder();
+    this.fillBuilderConst.valueAccessor(() => '').range([fill]);
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets the appearance of the fill for the dots using a categorical dimension.
+   *
+   */
+  fillCategorical(fill: null): this;
+  fillCategorical(
+    fill: (
+      fill: OrdinalVisualValueDimensionBuilder<Datum, string, string>
+    ) => void
+  ): this;
+  fillCategorical(
+    fill:
+      | ((
+          fill: OrdinalVisualValueDimensionBuilder<Datum, string, string>
+        ) => void)
+      | null
+  ): this {
+    if (fill === null) {
+      this.fillBuilderCategorical = undefined;
+      return this;
+    }
+    this.fillBuilderCategorical = new OrdinalVisualValueDimensionBuilder();
+    fill(this.fillBuilderCategorical);
+    return this;
+  }
+
+  fillNumeric(fill: null): this;
+  fillNumeric(
+    fill: (fill: NumberVisualValueDimensionBuilder<Datum, string>) => void
+  ): this;
+  fillNumeric(
+    fill:
+      | ((fill: NumberVisualValueDimensionBuilder<Datum, string>) => void)
+      | null
+  ): this {
+    if (fill === null) {
+      this.fillBuilderNumber = undefined;
+      return this;
+    }
+    this.initFillBuilderNumber();
+    fill(this.fillBuilderNumber);
+    return this;
+  }
+
+  private initFillBuilderNumber(): void {
+    this.fillBuilderNumber = new NumberVisualValueDimensionBuilder();
+  }
+
+  /**
+   * OPTIONAL. Sets the opacity of the dots.
+   *
+   * @default 1
+   */
+  opacity(opacity: number): this {
+    this._opacity = opacity;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. The size of the radius of the dots
+   *
+   * This is temporarily a constant.
+   *
+   * @default 2
+   */
+  radius(radius: null): this;
+  radius(radius: number): this;
+  radius(radius: number | null): this {
+    if (radius === null) {
+      this.radiusBuilderConst = undefined;
+      return this;
+    }
+    this.radiusBuilderConst = new OrdinalVisualValueDimensionBuilder();
+    this.radiusBuilderConst.range([radius]);
+    return this;
+  }
+
+  radiusCategorical(radius: null): this;
+  radiusCategorical(
+    radius: (
+      radius: OrdinalVisualValueDimensionBuilder<Datum, string, number>
+    ) => void
+  ): this;
+  radiusCategorical(
+    radius:
+      | ((
+          radius: OrdinalVisualValueDimensionBuilder<Datum, string, number>
+        ) => void)
+      | null
+  ): this {
+    if (radius === null) {
+      this.radiusBuilderCategorical = undefined;
+      return this;
+    }
+    this.radiusBuilderCategorical = new OrdinalVisualValueDimensionBuilder();
+    radius(this.radiusBuilderCategorical);
+    return this;
+  }
+
+  radiusNumeric(radius: null): this;
+  radiusNumeric(
+    radius: (radius: NumberVisualValueDimensionBuilder<Datum, number>) => void
+  ): this;
+  radiusNumeric(
+    radius: (
+      radius: NumberVisualValueDimensionBuilder<Datum, number>
+    ) => void | null
+  ): this {
+    if (radius === null) {
+      this.radiusBuilderNumber = undefined;
+      return this;
+    }
+    this.radiusBuilderNumber = new NumberVisualValueDimensionBuilder();
+    radius(this.radiusBuilderNumber);
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets the appearance of the stroke for the dots.
+   */
+  stroke(stroke: null): this;
+  stroke(stroke: (stroke: StrokeBuilder) => void): this;
+  stroke(stroke: ((stroke: StrokeBuilder) => void) | null): this {
+    if (stroke === null) {
+      this.strokeBuilder = undefined;
+      return this;
+    }
+    this.initStrokeBuilder();
+    stroke(this.strokeBuilder);
+    return this;
+  }
+
+  private initStrokeBuilder(): void {
+    this.strokeBuilder = new StrokeBuilder();
+  }
+
+  /**
+   * REQUIRED. A config for the behavior of the chart's x dimension when using numeric data.
+   */
+  xDate(x: null): this;
+  xDate(x: (x: DateChartPositionDimensionBuilder<Datum>) => void): this;
+  xDate(
+    x: ((x: DateChartPositionDimensionBuilder<Datum>) => void) | null
+  ): this {
+    if (x === null) {
+      this.xBuilderDate = undefined;
+      return this;
+    }
+    this.xBuilderDate = new DateChartPositionDimensionBuilder<Datum>();
+    x(this.xBuilderDate);
+    return this;
+  }
+
+  /**
+   * REQUIRED. A config for the behavior of the chart's x dimension when using numeric data.
+   */
+  xNumeric(x: null): this;
+  xNumeric(x: (x: NumberChartPositionDimensionBuilder<Datum>) => void): this;
+  xNumeric(
+    x: ((x: NumberChartPositionDimensionBuilder<Datum>) => void) | null
+  ): this {
+    if (x === null) {
+      this.xBuilderNumeric = undefined;
+      return this;
+    }
+    this.xBuilderNumeric = new NumberChartPositionDimensionBuilder<Datum>();
+    x(this.xBuilderNumeric);
+    return this;
+  }
+
+  /**
+   * REQUIRED. A config for the behavior of the chart's x dimension when using numeric data.
+   */
+  xOrdinal(x: null): this;
+  xOrdinal(
+    x: (x: OrdinalChartPositionDimensionBuilder<Datum, XOrdinalDomain>) => void
+  ): this;
+  xOrdinal(
+    x:
+      | ((
+          x: OrdinalChartPositionDimensionBuilder<Datum, XOrdinalDomain>
+        ) => void)
+      | null
+  ): this {
+    if (x === null) {
+      this.xBuilderDate = undefined;
+      return this;
+    }
+    this.xBuilderOrdinal = new OrdinalChartPositionDimensionBuilder<
+      Datum,
+      XOrdinalDomain
+    >();
+    x(this.xBuilderOrdinal);
+    return this;
+  }
+
+  /**
+   * REQUIRED. A config for the behavior of the chart's x dimension when using numeric data.
+   */
+  yDate(y: null): this;
+  yDate(y: (y: DateChartPositionDimensionBuilder<Datum>) => void): this;
+  yDate(
+    y: ((y: DateChartPositionDimensionBuilder<Datum>) => void) | null
+  ): this {
+    if (y === null) {
+      this.yBuilderDate = undefined;
+      return this;
+    }
+    this.yBuilderDate = new DateChartPositionDimensionBuilder<Datum>();
+    y(this.yBuilderDate);
+    return this;
+  }
+
+  /**
+   * REQUIRED. A config for the behavior of the chart's x dimension when using numeric data.
+   */
+  yNumeric(y: null): this;
+  yNumeric(y: (y: NumberChartPositionDimensionBuilder<Datum>) => void): this;
+  yNumeric(
+    y: ((y: NumberChartPositionDimensionBuilder<Datum>) => void) | null
+  ): this {
+    if (y === null) {
+      this.yBuilderNumeric = undefined;
+      return this;
+    }
+    this.yBuilderNumeric = new NumberChartPositionDimensionBuilder<Datum>();
+    y(this.yBuilderNumeric);
+    return this;
+  }
+
+  /**
+   * REQUIRED. A config for the behavior of the chart's x dimension when using numeric data.
+   */
+  yOrdinal(y: null): this;
+  yOrdinal(
+    y: (y: OrdinalChartPositionDimensionBuilder<Datum, YOrdinalDomain>) => void
+  ): this;
+  yOrdinal(
+    y:
+      | ((
+          y: OrdinalChartPositionDimensionBuilder<Datum, YOrdinalDomain>
+        ) => void)
+      | null
+  ): this {
+    if (y === null) {
+      this.yBuilderOrdinal = undefined;
+      return this;
+    }
+    this.yBuilderOrdinal = new OrdinalChartPositionDimensionBuilder<
+      Datum,
+      YOrdinalDomain
+    >();
+    y(this.yBuilderOrdinal);
+    return this;
+  }
+
+  /**
+   * REQUIRED. Validates and builds the configuration object for the bars that can be passed to BarsComponent.
+   *
+   * The user must call this at the end of the chain of methods to build the configuration object.
+   */
+  getConfig(): DotsConfig<Datum, XOrdinalDomain, YOrdinalDomain> {
+    this.validateBuilder();
+    const fillName = 'Dots Fill';
+    const radiusName = 'Dots Radius';
+    const xName = 'Dots X';
+    const yName = 'Dots Y';
+    const fillBuilder = this.fillBuilderCategorical
+      ? this.fillBuilderCategorical
+      : this.fillBuilderNumber || this.fillBuilderConst;
+    const radiusBuilder = this.radiusBuilderCategorical
+      ? this.radiusBuilderCategorical
+      : this.radiusBuilderNumber || this.radiusBuilderConst;
+    return new DotsConfig<Datum, XOrdinalDomain, YOrdinalDomain>({
+      marksClass: 'vic-dots',
+      data: this._data,
+      datumClass: this._datumClass,
+      fill: fillBuilder._build(fillName),
+      mixBlendMode: this._mixBlendMode,
+      opacity: this._opacity,
+      pointerDetectionRadius: this._pointerDetectionRadius,
+      radius: radiusBuilder._build(radiusName),
+      stroke: this.strokeBuilder?._build(),
+      x: this.xBuilderDate
+        ? this.xBuilderDate._build(xName)
+        : this.xBuilderNumeric
+          ? this.xBuilderNumeric._build(xName)
+          : this.xBuilderOrdinal._build('point', xName),
+      y: this.xBuilderDate
+        ? this.yBuilderDate._build(yName)
+        : this.yBuilderNumeric
+          ? this.yBuilderNumeric._build(yName)
+          : this.yBuilderOrdinal._build('point', yName),
+    });
+  }
+
+  protected override validateBuilder(): void {
+    super.validateBuilder('Lines');
+    const fillBuilders = [
+      this.fillBuilderCategorical,
+      this.fillBuilderNumber,
+      this.fillBuilderConst,
+    ];
+    const numFillBuilders = fillBuilders.filter(
+      (builder) => builder !== undefined
+    ).length;
+    if (numFillBuilders === 0) {
+      this.fillBuilderCategorical = new OrdinalVisualValueDimensionBuilder();
+      this.fillBuilderCategorical.range([schemeTableau10[0]]);
+    }
+    if (numFillBuilders > 1) {
+      throw new Error(
+        `Dots Builder: Only one fill method can be called with a truthy value. Curently ${numFillBuilders} are called.`
+      );
+    }
+    const radiusBuilders = [
+      this.radiusBuilderCategorical,
+      this.radiusBuilderNumber,
+      this.radiusBuilderConst,
+    ];
+    const numRadiusBuilders = radiusBuilders.filter(
+      (builder) => builder !== undefined
+    ).length;
+    if (numRadiusBuilders === 0) {
+      this.radiusBuilderCategorical = new OrdinalVisualValueDimensionBuilder();
+      this.radiusBuilderCategorical.range([2]);
+    }
+    if (numRadiusBuilders > 1) {
+      throw new Error(
+        `Dots Builder: Only one radius method can be called with a truthy value. Curently ${numRadiusBuilders} are called.`
+      );
+    }
+    if (
+      +!!this.xBuilderNumeric +
+        +!!this.xBuilderDate +
+        +!!this.xBuilderOrdinal !==
+      1
+    ) {
+      throw new Error(
+        'Dots Builder: Exactly one X dimension is required. Please use one of `xDate`, `xNumeric`, or `xOrdinal` to set it.'
+      );
+    }
+    if (
+      +!!this.yBuilderNumeric +
+        +!!this.yBuilderDate +
+        +!!this.yBuilderOrdinal !==
+      1
+    ) {
+      throw new Error(
+        'Dots Builder: Exactly one Y dimension is required. Please use one of `yDate`, `yNumeric`, or `yOrdinal` to set it.'
+      );
+    }
+  }
+}

package/src/lib/dots/config/dots-config.spec.ts

@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
+import { NumberVisualValueDimension } from '../../data-dimensions/continuous-quantitative/number-visual-value/number-visual-value';
+import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
+import { VicDotsConfigBuilder } from './dots-builder';
+import { DotsConfig } from './dots-config';
+
+type Datum = { rain: number; snow: number; state: string; year: number };
+const testData = [
+  { rain: 50, snow: 2, state: 'AL', year: 2020 },
+  { rain: 54, snow: 1, state: 'AL', year: 2021 },
+  { rain: 66, snow: 82, state: 'AK', year: 2020 },
+  { rain: 45, snow: 53, state: 'AK', year: 2021 },
+  { rain: 24, snow: 18, state: 'AZ', year: 2020 },
+  { rain: 17, snow: 25, state: 'AZ', year: 2021 },
+  { rain: 58, snow: 36, state: 'CA', year: 2020 },
+  { rain: 66, snow: 50, state: 'CA', year: 2021 },
+  { rain: 37, snow: 42, state: 'CO', year: 2020 },
+  { rain: 49, snow: 63, state: 'CO', year: 2021 },
+];
+
+function getNewConfig(data: Datum[]): DotsConfig<Datum> {
+  return new VicDotsConfigBuilder<Datum>()
+    .data(data)
+    .xNumeric((x) => x.valueAccessor((d) => d.year))
+    .yNumeric((y) => y.valueAccessor((d) => d.rain))
+    .radiusNumeric((radius) =>
+      radius.valueAccessor((d) => d.snow).range([1, 12])
+    )
+    .fillCategorical((fill) =>
+      fill
+        .valueAccessor((d) => d.state)
+        .range(['red', 'blue', 'green', 'yellow', 'purple'])
+    )
+    .getConfig();
+}
+
+describe('DotsConfig', () => {
+  let config: DotsConfig<Datum>;
+
+  describe('init()', () => {
+    beforeEach(() => {
+      spyOn(DotsConfig.prototype as any, 'setDimensionPropertiesFromData');
+      spyOn(DotsConfig.prototype as any, 'setValueIndices');
+      config = getNewConfig(testData);
+    });
+    it('calls setDimensionPropertiesFromData once', () => {
+      expect(
+        (config as any).setDimensionPropertiesFromData
+      ).toHaveBeenCalledTimes(1);
+    });
+    it('calls setValueIndices once', () => {
+      expect((config as any).setValueIndices).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setDimensionPropertiesFromData()', () => {
+    let numChartPositionSpy: jasmine.Spy;
+    beforeEach(() => {
+      spyOn(DotsConfig.prototype as any, 'initPropertiesFromData');
+      numChartPositionSpy = spyOn(
+        NumberChartPositionDimension.prototype as any,
+        'setPropertiesFromData'
+      );
+      spyOn(
+        NumberVisualValueDimension.prototype as any,
+        'setPropertiesFromData'
+      );
+      spyOn(
+        OrdinalVisualValueDimension.prototype as any,
+        'setPropertiesFromData'
+      );
+      config = getNewConfig(testData);
+      (config as any).setDimensionPropertiesFromData();
+    });
+    it('calls x.setPropertiesFromData and y.setPropertiesFromData once each', () => {
+      expect(numChartPositionSpy.calls.allArgs()).toEqual([
+        [testData],
+        [testData, false],
+      ]);
+    });
+    it('calls fill.setPropertiesFromData once', () => {
+      expect(config.fill.setPropertiesFromData).toHaveBeenCalledOnceWith(
+        testData
+      );
+    });
+    it('calls radius.setPropertiesFromData once', () => {
+      expect(config.radius.setPropertiesFromData).toHaveBeenCalledOnceWith(
+        testData
+      );
+    });
+  });
+
+  describe('setValueIndices()', () => {
+    beforeEach(() => {
+      spyOn(DotsConfig.prototype as any, 'initPropertiesFromData');
+    });
+    it('returns the value indices of datums with unique ordinal values', () => {
+      config = getNewConfig(testData);
+      (config as any).setDimensionPropertiesFromData();
+      (config as any).setValueIndices();
+      expect(config.valueIndices).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+    });
+    it('sets valueIndices to the correct array when some values are not valid', () => {
+      const problemData = [
+        { rain: 50, snow: 2, state: 'AL', year: 2020 },
+        { rain: 54, snow: 1, state: 'AL', year: 2021 },
+        { rain: 66, snow: 82, state: 'AK', year: null },
+        { rain: 'im a string' as any, snow: 53, state: 'AK', year: 2021 },
+        { rain: 24, snow: 18, state: 'AZ', year: 2020 },
+        { rain: 17, snow: 25, state: 'AZ', year: 2021 },
+        { rain: 58, snow: 36, state: 'CA', year: 2020 },
+        { rain: 66, snow: 50, state: 'CA', year: 2021 },
+        { rain: 37, snow: 42, state: 'CO', year: 2020 },
+        { rain: 49, snow: 63, state: 'CO', year: 2021 },
+      ] as Datum[];
+      config = getNewConfig(problemData);
+      (config as any).setDimensionPropertiesFromData();
+      (config as any).setValueIndices();
+      expect(config.valueIndices).toEqual([0, 1, 4, 5, 6, 7, 8, 9]);
+    });
+  });
+});

package/src/lib/dots/config/dots-config.ts

@@ -0,0 +1,81 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { range } from 'd3';
+import { DataValue } from '../../core';
+import { DateChartPositionDimension } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position';
+import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
+import { NumberDimension } from '../../data-dimensions/continuous-quantitative/number-dimension/number-dimension';
+import { NumberVisualValueDimension } from '../../data-dimensions/continuous-quantitative/number-visual-value/number-visual-value';
+import { DataDimension } from '../../data-dimensions/dimension';
+import { OrdinalChartPositionDimension } from '../../data-dimensions/ordinal/ordinal-chart-position/ordinal-chart-position';
+import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
+import { XyPrimaryMarksConfig } from '../../marks/xy-marks/xy-primary-marks/xy-primary-marks-config';
+import { Stroke } from '../../stroke/stroke';
+import { DotsOptions } from './dots-options';
+
+export class DotsConfig<
+  Datum,
+  XOrdinalDomain extends DataValue = string,
+  YOrdinalDomain extends DataValue = string,
+>
+  extends XyPrimaryMarksConfig<Datum>
+  implements DotsOptions<Datum, XOrdinalDomain, YOrdinalDomain>
+{
+  fill:
+    | OrdinalVisualValueDimension<Datum, string, string>
+    | NumberVisualValueDimension<Datum, string>;
+  opacity: number;
+  pointerDetectionRadius: number;
+  radius:
+    | OrdinalVisualValueDimension<Datum, string, number>
+    | NumberVisualValueDimension<Datum, number>;
+  stroke: Stroke;
+  x:
+    | NumberChartPositionDimension<Datum>
+    | DateChartPositionDimension<Datum>
+    | OrdinalChartPositionDimension<Datum, XOrdinalDomain>;
+  y:
+    | NumberChartPositionDimension<Datum>
+    | DateChartPositionDimension<Datum>
+    | OrdinalChartPositionDimension<Datum, YOrdinalDomain>;
+
+  constructor(options: DotsOptions<Datum, XOrdinalDomain, YOrdinalDomain>) {
+    super();
+    safeAssign(this, options);
+    this.initPropertiesFromData();
+  }
+
+  protected initPropertiesFromData(): void {
+    this.setDimensionPropertiesFromData();
+    this.setValueIndices();
+  }
+
+  protected setDimensionPropertiesFromData(): void {
+    this.x.setPropertiesFromData(this.data);
+    this.y.setPropertiesFromData(this.data, this.y.dimensionType === 'ordinal');
+    this.fill.setPropertiesFromData(this.data);
+    this.radius.setPropertiesFromData(this.data);
+  }
+
+  protected setValueIndices(): void {
+    this.valueIndices = range(this.data.length).filter(
+      (i) => this.isValidValue('x', i) && this.isValidValue('y', i)
+    );
+  }
+
+  private isValidValue(dimension: 'x' | 'y', i: number): boolean {
+    const config = this[dimension];
+    if (this.isContinuousQuantitativeDimension(config)) {
+      return config.isValidValue(config.values[i]);
+    } else {
+      return true;
+    }
+  }
+
+  isContinuousQuantitativeDimension(
+    dimension: DataDimension<Datum, DataValue>
+  ): dimension is NumberDimension<Datum> {
+    return (
+      dimension.dimensionType === 'number' || dimension.dimensionType === 'date'
+    );
+  }
+}

package/{lib/dots/config/dots-options.d.ts → src/lib/dots/config/dots-options.ts}

@@ -1,17 +1,32 @@
-import { DataValue } from '../../core';
-import { DateChartPositionDimension } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position';
-import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
-import { NumberVisualValueDimension } from '../../data-dimensions/continuous-quantitative/number-visual-value/number-visual-value';
-import { OrdinalChartPositionDimension } from '../../data-dimensions/ordinal/ordinal-chart-position/ordinal-chart-position';
-import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
-import { DataMarksOptions } from '../../marks/config/marks-options';
-import { Stroke } from '../../stroke/stroke';
-export interface DotsOptions<Datum, XOrdinalDomain extends DataValue = string, YOrdinalDomain extends DataValue = string> extends DataMarksOptions<Datum> {
-    fill: OrdinalVisualValueDimension<Datum, string, string> | NumberVisualValueDimension<Datum, string>;
-    opacity: number;
-    pointerDetectionRadius: number;
-    radius: OrdinalVisualValueDimension<Datum, string, number> | NumberVisualValueDimension<Datum, number>;
-    stroke: Stroke;
-    x: NumberChartPositionDimension<Datum> | DateChartPositionDimension<Datum> | OrdinalChartPositionDimension<Datum, XOrdinalDomain>;
-    y: NumberChartPositionDimension<Datum> | DateChartPositionDimension<Datum> | OrdinalChartPositionDimension<Datum, YOrdinalDomain>;
-}
+import { DataValue } from '../../core';
+import { DateChartPositionDimension } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position';
+import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
+import { NumberVisualValueDimension } from '../../data-dimensions/continuous-quantitative/number-visual-value/number-visual-value';
+import { OrdinalChartPositionDimension } from '../../data-dimensions/ordinal/ordinal-chart-position/ordinal-chart-position';
+import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
+import { DataMarksOptions } from '../../marks/config/marks-options';
+import { Stroke } from '../../stroke/stroke';
+
+export interface DotsOptions<
+  Datum,
+  XOrdinalDomain extends DataValue = string,
+  YOrdinalDomain extends DataValue = string,
+> extends DataMarksOptions<Datum> {
+  fill:
+    | OrdinalVisualValueDimension<Datum, string, string>
+    | NumberVisualValueDimension<Datum, string>;
+  opacity: number;
+  pointerDetectionRadius: number;
+  radius:
+    | OrdinalVisualValueDimension<Datum, string, number>
+    | NumberVisualValueDimension<Datum, number>;
+  stroke: Stroke;
+  x:
+    | NumberChartPositionDimension<Datum>
+    | DateChartPositionDimension<Datum>
+    | OrdinalChartPositionDimension<Datum, XOrdinalDomain>;
+  y:
+    | NumberChartPositionDimension<Datum>
+    | DateChartPositionDimension<Datum>
+    | OrdinalChartPositionDimension<Datum, YOrdinalDomain>;
+}