@mathstack/viz 1.1.4 → 2.0.3

package/src/lib/axes/base/xy-axis-domain-lines.cy.ts

@@ -0,0 +1,511 @@
+/* eslint-disable @angular-eslint/prefer-standalone */
+import { Component, Input, signal } from '@angular/core';
+import {
+  BarsConfig,
+  LinesConfig,
+  VicBarsConfigBuilder,
+  VicBarsModule,
+  VicChartConfigBuilder,
+  VicChartModule,
+  VicLinesConfigBuilder,
+  VicLinesModule,
+  VicXOrdinalAxisConfig,
+  VicXOrdinalAxisConfigBuilder,
+  VicXQuantitativeAxisConfig,
+  VicXQuantitativeAxisConfigBuilder,
+  VicXyAxisModule,
+  VicXyBackgroundModule,
+  VicYOrdinalAxisConfig,
+  VicYOrdinalAxisConfigBuilder,
+  VicYQuantitativeAxisConfig,
+  VicYQuantitativeAxisConfigBuilder,
+} from '@mathstack/viz';
+import { beforeEach, cy, describe, expect, it } from 'local-cypress';
+import {
+  ContinentPopulationNumYearData,
+  ContinentPopulationNumYearDatum,
+} from '../../testing/data/continent-population-year-data';
+
+const axisTickTextWaitTime = 2000;
+
+const margin = { top: 60, right: 20, bottom: 40, left: 80 };
+const chartHeight = 400;
+const chartWidth = 600;
+const data = ContinentPopulationNumYearData;
+
+@Component({
+  selector: 'vic-test-zero-axis-lines',
+  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 TestZeroAxisLinesComponent<Datum> {
+  @Input() linesConfig: LinesConfig<Datum>;
+  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
+  chartConfig = new VicChartConfigBuilder()
+    .margin(margin)
+    .maxHeight(chartHeight)
+    .maxWidth(chartWidth)
+    .getConfig();
+}
+
+function mountZeroAxisLinesComponent(
+  data: ContinentPopulationNumYearDatum[],
+  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(TestZeroAxisLinesComponent<ContinentPopulationNumYearDatum>, {
+    componentProperties: {
+      linesConfig: linesConfig,
+      xQuantitativeAxisConfig: xAxisConfig,
+      yQuantitativeAxisConfig: yAxisConfig,
+    },
+  });
+}
+
+// ***********************************************************
+// Test the positioning of the domain lines on the x and y axes - line chart
+// ***********************************************************
+describe('Domain lines positioning, two quant dimensions', () => {
+  let xAxisConfig: VicXQuantitativeAxisConfig<number>;
+  let yAxisConfig: VicYQuantitativeAxisConfig<number>;
+  beforeEach(() => {
+    xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f'))
+      .getConfig();
+    yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.2s'))
+      .getConfig();
+  });
+  it('should have visible x and y domains at the edges of the charts when data is all positive', () => {
+    mountZeroAxisLinesComponent(data, xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.top).to.be.closeTo(chartRect.bottom, 2);
+        }
+      );
+      cy.get<SVGTextElement>('.vic-axis-y-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.right).to.be.closeTo(chartRect.left, 2);
+        }
+      );
+    });
+  });
+  it('should have an x domain at the height of the 0 tick on the y-axis when there are positive and negative values', () => {
+    mountZeroAxisLinesComponent(
+      data.map((d) => ({ ...d, population: d.population - 1000000000 })),
+      xAxisConfig,
+      yAxisConfig
+    );
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-axis-y-quantitative .tick')
+      .filter(':contains("0.0")')
+      .then((tick) => {
+        const line = tick.find('line');
+        const lineRect = line[0].getBoundingClientRect();
+        cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+          (domain) => {
+            const domainRect = domain[0].getBoundingClientRect();
+            expect(domainRect.top).to.be.closeTo(lineRect.top, 2);
+          }
+        );
+      });
+  });
+});
+
+@Component({
+  selector: 'vic-test-zero-axis-lines-with-changes',
+  template: `
+    <button (click)="changeData()" class="change-data-button"
+      >Change data</button
+    >
+    <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 TestZeroAxisLinesWithChangesComponent {
+  chartConfig = new VicChartConfigBuilder()
+    .margin(margin)
+    .maxHeight(chartHeight)
+    .maxWidth(chartWidth)
+    .getConfig();
+  data = signal(data);
+  linesConfig = signal(this.getLinesConfig());
+  xQuantitativeAxisConfig = signal(this.getXAxisConfig());
+  yQuantitativeAxisConfig = signal(this.getYAxisConfig());
+  useNegativeValues = false;
+
+  getLinesConfig(): LinesConfig<ContinentPopulationNumYearDatum> {
+    return new VicLinesConfigBuilder<ContinentPopulationNumYearDatum>()
+      .data(this.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();
+  }
+
+  getXAxisConfig(): VicXQuantitativeAxisConfig<number> {
+    return new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f'))
+      .getConfig();
+  }
+
+  getYAxisConfig(): VicYQuantitativeAxisConfig<number> {
+    return new VicYQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.2s'))
+      .getConfig();
+  }
+
+  changeData(): void {
+    this.useNegativeValues = !this.useNegativeValues;
+    const add = this.useNegativeValues ? -1000000000 : 1000000000;
+    this.data.update((d) =>
+      d.map((datum) => ({
+        ...datum,
+        population: datum.population + add,
+      }))
+    );
+    this.linesConfig.set(this.getLinesConfig());
+    this.xQuantitativeAxisConfig.set(this.getXAxisConfig());
+    this.yQuantitativeAxisConfig.set(this.getYAxisConfig());
+  }
+}
+
+// ***********************************************************
+// Test the positioning of the zero domain line when it transitions from the
+//  edge to the middle of the chart and back again - Line Chart
+// ***********************************************************
+describe('Domain lines positioning with change - two quant dimensions', () => {
+  it('should have visible x domains at the edge of the chart when data is all positive and at the 0 tick when the data has pos and negative values -- and it should transition between the two as the data updates', () => {
+    cy.mount(TestZeroAxisLinesWithChangesComponent);
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.top).to.be.closeTo(chartRect.bottom, 2);
+        }
+      );
+    });
+    cy.get('button.change-data-button').click();
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-axis-y-quantitative .tick')
+      .filter(':contains("0.0")')
+      .then((tick) => {
+        const line = tick.find('line');
+        const lineRect = line[0].getBoundingClientRect();
+        cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+          (domain) => {
+            const domainRect = domain[0].getBoundingClientRect();
+            expect(domainRect.top).to.be.closeTo(lineRect.top, 2);
+          }
+        );
+      });
+    cy.get('button.change-data-button').click();
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.top).to.be.closeTo(chartRect.bottom, 2);
+        }
+      );
+    });
+    cy.get('button.change-data-button').click();
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-axis-y-quantitative .tick')
+      .filter(':contains("0.0")')
+      .then((tick) => {
+        const line = tick.find('line');
+        const lineRect = line[0].getBoundingClientRect();
+        cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+          (domain) => {
+            const domainRect = domain[0].getBoundingClientRect();
+            expect(domainRect.top).to.be.closeTo(lineRect.top, 2);
+          }
+        );
+      });
+  });
+});
+
+@Component({
+  selector: 'vic-test-zero-axis-horizontal-bars',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-elements>
+        <svg:g vic-xy-background></svg:g>
+        <svg:g vic-primary-marks-bars [config]="barsConfig"></svg:g>
+        <svg:g
+          vic-x-quantitative-axis
+          [config]="xQuantitativeAxisConfig"
+        ></svg:g>
+        <svg:g vic-y-ordinal-axis [config]="yOrdinalAxisConfig"></svg:g>
+      </ng-container>
+    </vic-xy-chart>
+  `,
+  styles: [],
+  imports: [
+    VicChartModule,
+    VicBarsModule,
+    VicXyAxisModule,
+    VicXyBackgroundModule,
+  ],
+})
+class TestZeroAxisHorizontalBarsComponent<Datum> {
+  @Input() barsConfig: BarsConfig<Datum, string>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
+  @Input() yOrdinalAxisConfig: VicYOrdinalAxisConfig<string>;
+  chartConfig = new VicChartConfigBuilder()
+    .margin(margin)
+    .maxHeight(chartHeight)
+    .maxWidth(chartWidth)
+    .getConfig();
+}
+
+function mountZeroAxisHorizontalBarsComponent(
+  data: ContinentPopulationNumYearDatum[],
+  xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>,
+  yOrdinalAxisConfig: VicYOrdinalAxisConfig<string>
+): void {
+  const barsConfig = new VicBarsConfigBuilder<
+    ContinentPopulationNumYearDatum,
+    string
+  >()
+    .data(data)
+    .horizontal((bars) =>
+      bars
+        .x((x) => x.valueAccessor((d) => d.population))
+        .y((y) => y.valueAccessor((d) => d.continent))
+    )
+    .getConfig();
+  cy.mount(
+    TestZeroAxisHorizontalBarsComponent<ContinentPopulationNumYearDatum>,
+    {
+      componentProperties: {
+        barsConfig,
+        xQuantitativeAxisConfig,
+        yOrdinalAxisConfig,
+      },
+    }
+  );
+}
+
+// ***********************************************************
+// Test the positioning of the domain lines on the x and y axes - bar chart - horizontal
+// ***********************************************************
+describe('Domain lines positioning, one quant, one ordinal dimension - horizontal bar chart', () => {
+  let xAxisConfig: VicXQuantitativeAxisConfig<number>;
+  let yAxisConfig: VicYOrdinalAxisConfig<string>;
+  let dataForYear = data.filter((d) => d.year === 2024);
+  beforeEach(() => {
+    xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f').count(5))
+      .getConfig();
+    yAxisConfig = new VicYOrdinalAxisConfigBuilder<string>().getConfig();
+  });
+  it('should have visible x domain at the bottom of the chart and no y domain when data is all positive', () => {
+    mountZeroAxisHorizontalBarsComponent(dataForYear, xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.top).to.be.closeTo(chartRect.bottom, 2);
+        }
+      );
+      cy.get('.vic-axis-y-ordinal .domain').should('not.exist');
+    });
+  });
+  it('should have visible y domain at bottom of chart and an x domain in the middle of the chart when data is pos and neg', () => {
+    dataForYear = dataForYear.map((d) => ({
+      ...d,
+      population: d.population - 1000000000,
+    }));
+    mountZeroAxisHorizontalBarsComponent(dataForYear, xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-x-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.top).to.be.closeTo(chartRect.bottom, 2);
+        }
+      );
+    });
+    cy.get<SVGGElement>('.vic-axis-x-quantitative .tick')
+      .filter(':contains("0")')
+      .then((tick) => {
+        const line = tick.find('line');
+        const lineRect = line[0].getBoundingClientRect();
+        cy.get<SVGTextElement>('.vic-axis-y-ordinal .domain').then((domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.left).to.be.closeTo(lineRect.left, 2);
+        });
+      });
+  });
+});
+
+@Component({
+  selector: 'vic-test-zero-axis-vertical-bars',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-elements>
+        <svg:g vic-xy-background></svg:g>
+        <svg:g vic-x-ordinal-axis [config]="xOrdinalAxisConfig"></svg:g>
+        <svg:g
+          vic-y-quantitative-axis
+          [config]="yQuantitativeAxisConfig"
+        ></svg:g>
+        <svg:g vic-primary-marks-bars [config]="barsConfig"></svg:g>
+      </ng-container>
+    </vic-xy-chart>
+  `,
+  styles: [],
+  imports: [
+    VicChartModule,
+    VicBarsModule,
+    VicXyAxisModule,
+    VicXyBackgroundModule,
+  ],
+})
+class TestZeroAxisVerticalBarsComponent<Datum> {
+  @Input() barsConfig: BarsConfig<Datum, string>;
+  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
+  @Input() xOrdinalAxisConfig: VicXOrdinalAxisConfig<string>;
+  chartConfig = new VicChartConfigBuilder()
+    .margin(margin)
+    .maxHeight(chartHeight)
+    .maxWidth(chartWidth)
+    .getConfig();
+}
+
+function mountZeroAxisVerticalBarsComponent(
+  data: ContinentPopulationNumYearDatum[],
+  xOrdinalAxisConfig: VicXOrdinalAxisConfig<string>,
+  yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>
+): void {
+  const barsConfig = new VicBarsConfigBuilder<
+    ContinentPopulationNumYearDatum,
+    string
+  >()
+    .data(data)
+    .vertical((bars) =>
+      bars
+        .x((x) => x.valueAccessor((d) => d.continent))
+        .y((y) => y.valueAccessor((d) => d.population))
+    )
+    .getConfig();
+
+  cy.mount(TestZeroAxisVerticalBarsComponent<ContinentPopulationNumYearDatum>, {
+    componentProperties: {
+      barsConfig,
+      yQuantitativeAxisConfig,
+      xOrdinalAxisConfig,
+    },
+  });
+}
+
+// ***********************************************************
+// Test the positioning of the domain lines on the x and y axes - bar chart - vertical
+// ***********************************************************
+describe('Domain lines positioning, one quant, one ordinal dimension - vertical bar chart', () => {
+  let xAxisConfig: VicXOrdinalAxisConfig<string>;
+  let yAxisConfig: VicYQuantitativeAxisConfig<number>;
+  let dataForYear = data.filter((d) => d.year === 2024);
+  beforeEach(() => {
+    xAxisConfig = new VicXOrdinalAxisConfigBuilder<string>().getConfig();
+    yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
+      .ticks((ticks) => ticks.format('.0f').count(5))
+      .getConfig();
+  });
+  it('should have visible y domain at left of chart and a x domain in the middle of the chart when data is pos and neg - vertical bar chart', () => {
+    dataForYear = dataForYear.map((d) => ({
+      ...d,
+      population: d.population - 1000000000,
+    }));
+    mountZeroAxisVerticalBarsComponent(dataForYear, xAxisConfig, yAxisConfig);
+    cy.wait(axisTickTextWaitTime);
+    cy.get<SVGGElement>('.vic-xy-background').then((chartBackground) => {
+      const chartRect = chartBackground[0].getBoundingClientRect();
+      cy.get<SVGTextElement>('.vic-axis-y-quantitative .domain').then(
+        (domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.right).to.be.closeTo(chartRect.left, 2);
+        }
+      );
+    });
+    cy.get<SVGGElement>('.vic-axis-y-quantitative .tick')
+      .filter(':contains("0")')
+      .then((tick) => {
+        const line = tick.find('line');
+        const lineRect = line[0].getBoundingClientRect();
+        cy.get<SVGTextElement>('.vic-axis-x-ordinal .domain').then((domain) => {
+          const domainRect = domain[0].getBoundingClientRect();
+          expect(domainRect.top).to.be.closeTo(lineRect.top, 2);
+        });
+      });
+  });
+});

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

@@ -0,0 +1,77 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { AxisBaseline } from './axis-baseline';
+
+const DEFAULT = {
+  _zeroBaseline: {
+    display: true,
+    dasharray: '2, 2',
+  },
+};
+
+export class AxisBaselineBuilder {
+  private _display: boolean;
+  private _zeroBaseline: {
+    display: boolean;
+    dasharray: string;
+  };
+
+  constructor() {
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. Determines whether the axis baseline will be displayed.
+   *
+   * @param value - `true` to display the axis baseline, `false` to remove the axis baseline.
+   *
+   * If not called, the default value is `true`.
+   */
+  display(value: boolean = true): this {
+    this._display = value;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Specifies properties for the axis baseline when there are positive and negative values on the perpendicular axis.
+   *
+   * @param value - { display: boolean; stroke: StrokeBuilder }
+   *
+   * If display is `true`, the axis baseline will be relocated to the zero tick mark of the perpendicular axis. This line will still be displayed even if the axis baseline at the edge of the chart is removed.
+   *
+   * If display is `false`, the axis baseline will be removed.
+   *
+   * If stroke is `null`, the axis baseline will be displayed as a dashed line.
+   */
+  zeroBaseline(
+    value: Partial<{
+      dasharray: string;
+      display: boolean;
+    }>
+  ): this;
+  zeroBaseline(value: null): this;
+  zeroBaseline(
+    value?: Partial<{
+      dasharray: string;
+      display: boolean;
+    }> | null
+  ): this {
+    this._zeroBaseline = DEFAULT._zeroBaseline;
+    if (value === null) {
+      return this;
+    }
+    this._zeroBaseline.display = value.display ?? true;
+    this._zeroBaseline.dasharray =
+      value.dasharray ?? DEFAULT._zeroBaseline.dasharray;
+    return this;
+  }
+
+  _build(dimension: 'ordinal' | 'quantitative'): AxisBaseline {
+    if (this._display === undefined) {
+      this._display = dimension === 'ordinal' ? false : true;
+    }
+    return new AxisBaseline({
+      display: this._display,
+      zeroBaseline: this._zeroBaseline,
+    });
+  }
+}

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

@@ -0,0 +1,4 @@
+export interface AxisBaselineOptions {
+  display: boolean;
+  zeroBaseline: { display: boolean; dasharray: string };
+}

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

@@ -0,0 +1,11 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { AxisBaselineOptions } from './axis-baseline-options';
+
+export class AxisBaseline implements AxisBaselineOptions {
+  readonly display: boolean;
+  readonly zeroBaseline: { display: boolean; dasharray: string };
+
+  constructor(options: AxisBaselineOptions) {
+    safeAssign(this, options);
+  }
+}

package/src/lib/axes/grid/grid-builder.ts

@@ -0,0 +1,74 @@
+import { StrokeBuilder } from '../../stroke/stroke-builder';
+import { Grid } from './grid-config';
+
+export class GridBuilder {
+  private _filter: (i: number) => boolean;
+  private strokeBuilder: StrokeBuilder;
+
+  /**
+   * OPTIONAL. Determines whether or not to display grid lines. Must specify a function
+   *  that takes the index of the grid line and returns a boolean.
+   *
+   * Default: `(i) => i > 0`, but can be overriden to display all grid lines.
+   */
+  filter(filter: ((i: number) => boolean) | null) {
+    if (filter === null) {
+      this._filter = undefined;
+      return this;
+    }
+    this._filter = filter;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. A config for the behavior of the grid line stroke.
+   *
+   * Default color: '#cccccc'
+   * Default width: 1px
+   */
+  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().width(1).color('#cccccc');
+  }
+
+  /**
+   * @internal
+   * This function is for internal use only and should never be called by the user.
+   */
+  _build(axis: 'x' | 'y', dimension: 'quantitative' | 'ordinal'): Grid {
+    this.validateBuilder();
+    return new Grid({
+      axis: axis,
+      filter: this.getFilterForDimension(dimension),
+      stroke: this.strokeBuilder._build(),
+    });
+  }
+
+  private validateBuilder(): void {
+    if (this.strokeBuilder === undefined) {
+      this.initStrokeBuilder();
+    }
+  }
+
+  private getFilterForDimension(
+    dimension: 'quantitative' | 'ordinal'
+  ): (i: number) => boolean {
+    if (this._filter) return this._filter;
+    if (dimension === 'quantitative') {
+      return (i) => i > 0;
+    } else {
+      return () => true;
+    }
+  }
+}

package/src/lib/axes/grid/grid-config.ts

@@ -0,0 +1,13 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { Stroke } from '../../stroke';
+import { GridOptions } from './grid-options';
+
+export class Grid implements GridOptions {
+  axis: 'x' | 'y';
+  filter: (i: number) => boolean;
+  stroke: Stroke;
+
+  constructor(options: GridOptions) {
+    safeAssign(this, options);
+  }
+}

package/src/lib/axes/grid/grid-options.ts

@@ -0,0 +1,7 @@
+import { Stroke } from '../../stroke';
+
+export interface GridOptions {
+  axis: 'x' | 'y';
+  filter: (i: number) => boolean;
+  stroke: Stroke;
+}