@mathstack/viz 1.1.4 → 2.0.3

package/src/lib/quantitative-rules/quantitative-rules.cy.ts

@@ -0,0 +1,549 @@
+/* eslint-disable @angular-eslint/prefer-standalone */
+import { Component, Input } from '@angular/core';
+import {
+  BarsConfig,
+  ChartConfig,
+  LinesConfig,
+  QuantitativeRulesConfig,
+  VicBarsConfigBuilder,
+  VicBarsModule,
+  VicChartConfigBuilder,
+  VicChartModule,
+  VicLinesConfigBuilder,
+  VicLinesModule,
+  VicQuantitativeRulesConfigBuilder,
+  VicQuantitativeRulesModule,
+  VicXOrdinalAxisConfig,
+  VicXOrdinalAxisConfigBuilder,
+  VicXQuantitativeAxisConfig,
+  VicXQuantitativeAxisConfigBuilder,
+  VicXyAxisModule,
+  VicYOrdinalAxisConfig,
+  VicYOrdinalAxisConfigBuilder,
+  VicYQuantitativeAxisConfig,
+  VicYQuantitativeAxisConfigBuilder,
+} from '@mathstack/viz';
+import 'cypress-real-events';
+import { beforeEach, cy, describe, expect, it } from 'local-cypress';
+import {
+  continentPopulationDateYearData,
+  ContinentPopulationDateYearDatum,
+  ContinentPopulationNumYearData,
+  ContinentPopulationNumYearDatum,
+} from '../testing/data/continent-population-year-data';
+import {
+  countryFactsData,
+  CountryFactsDatum,
+} from '../testing/data/country-area-continent';
+
+// 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 = 100;
+
+// ***********************************************************
+// BAR CHARTS
+// ***********************************************************
+
+const barsHorizontalMargin = { top: 36, right: 20, bottom: 4, left: 80 };
+const barsVerticalMargin = { top: 20, right: 20, bottom: 4, left: 40 };
+const barsChartHeight = 400;
+const barsChartWidth = 600;
+
+const groupSelector = '.vic-quantitative-rules-group';
+const ruleSelector = '.vic-quantitative-rules-rule';
+const labelSelector = '.vic-quantitative-rules-label';
+
+// ***********************************************************
+// Horizontal bar chart component set up
+// ***********************************************************
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-test-quantitative-rules-horizontal-bar',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-elements>
+        <svg:g
+          vic-x-quantitative-axis
+          [config]="xQuantitativeAxisConfig"
+        ></svg:g>
+        <svg:g vic-y-ordinal-axis [config]="yOrdinalAxisConfig"></svg:g>
+        <svg:g
+          vic-primary-marks-bars
+          [config]="barsConfig"
+          (vicBarsHoverMoveOutput)="updateTooltipForNewOutput($event)"
+        ></svg:g>
+        <svg:g vic-quantitative-rules [config]="rulesConfig"></svg:g>
+      </ng-container>
+    </vic-xy-chart>
+  `,
+  styles: [],
+  imports: [
+    VicChartModule,
+    VicBarsModule,
+    VicXyAxisModule,
+    VicQuantitativeRulesModule,
+  ],
+})
+class TestQuantitativeRulesHorizontalBarsComponent {
+  @Input() barsConfig: BarsConfig<CountryFactsDatum, string>;
+  @Input() rulesConfig: QuantitativeRulesConfig<number>;
+  @Input() yOrdinalAxisConfig: VicYOrdinalAxisConfig<string>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
+  chartConfig: ChartConfig = new VicChartConfigBuilder()
+    .maxHeight(barsChartHeight)
+    .maxWidth(barsChartWidth)
+    .margin(barsHorizontalMargin)
+    .scalingStrategy('responsive-width')
+    .getConfig();
+}
+
+const mountHorizontalBarsComponent = (
+  rulesConfig: QuantitativeRulesConfig<number>
+): void => {
+  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder()
+    .ticks((ticks) => ticks.format(',.0f'))
+    .getConfig();
+  const yAxisConfig = new VicYOrdinalAxisConfigBuilder().getConfig();
+  const barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+    .data(countryFactsData)
+    .horizontal((bars) =>
+      bars
+        .x((dimension) =>
+          dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+        )
+        .y((dimension) => dimension.valueAccessor((d) => d.country))
+    )
+    .labels((labels) => labels.display(true))
+    .getConfig();
+
+  cy.mount(TestQuantitativeRulesHorizontalBarsComponent, {
+    componentProperties: {
+      barsConfig: barsConfig,
+      rulesConfig: rulesConfig,
+      xQuantitativeAxisConfig: xAxisConfig,
+      yOrdinalAxisConfig: yAxisConfig,
+    },
+  });
+  cy.wait(axisTickTextWaitTime); // axes do not get drawn quickly enough without this - due to pattern of subscribing to chart scales
+};
+
+// ***********************************************************
+// Vertical bar chart component set up
+// ***********************************************************
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-test-quantitative-rules-vertical-bar',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-elements>
+        <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"
+          [vicBarsHoverMoveActions]="hoverAndMoveActions"
+          (vicBarsHoverMoveOutput)="updateTooltipForNewOutput($event)"
+        ></svg:g>
+        <svg:g vic-quantitative-rules [config]="rulesConfig"></svg:g>
+      </ng-container>
+    </vic-xy-chart>
+  `,
+  styles: [],
+  imports: [
+    VicChartModule,
+    VicBarsModule,
+    VicXyAxisModule,
+    VicQuantitativeRulesModule,
+  ],
+})
+class TestVerticalBarsComponent {
+  @Input() barsConfig: BarsConfig<CountryFactsDatum, string>;
+  @Input() rulesConfig: QuantitativeRulesConfig<number>;
+  @Input() xOrdinalAxisConfig: VicXOrdinalAxisConfig<string>;
+  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
+  chartConfig: ChartConfig = new VicChartConfigBuilder()
+    .maxHeight(barsChartHeight)
+    .maxWidth(barsChartWidth)
+    .margin(barsVerticalMargin)
+    .scalingStrategy('responsive-width')
+    .getConfig();
+}
+
+const mountVerticalBarsComponent = (
+  rulesConfig: QuantitativeRulesConfig<number>
+): void => {
+  const xAxisConfig = new VicXOrdinalAxisConfigBuilder().getConfig();
+  const yAxisConfig = new VicYQuantitativeAxisConfigBuilder()
+    .ticks((ticks) => ticks.format('.0f'))
+    .getConfig();
+  const barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+    .data(countryFactsData)
+    .vertical((bars) =>
+      bars
+        .x((dimension) => dimension.valueAccessor((d) => d.country))
+        .y((dimension) =>
+          dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+        )
+    )
+    .labels((labels) => labels.display(true))
+    .getConfig();
+
+  cy.mount(TestVerticalBarsComponent, {
+    componentProperties: {
+      barsConfig: barsConfig,
+      rulesConfig: rulesConfig,
+      xOrdinalAxisConfig: xAxisConfig,
+      yQuantitativeAxisConfig: yAxisConfig,
+    },
+  });
+  cy.wait(axisTickTextWaitTime); // axes do not get drawn quickly enough without this - due to pattern of subscribing to chart scales
+};
+
+const linesMargin = { top: 60, right: 20, bottom: 40, left: 80 };
+const linesChartHeight = 400;
+const linesChartWidth = 600;
+const linesDateData = continentPopulationDateYearData;
+const linesNumericData = ContinentPopulationNumYearData;
+
+// ***********************************************************
+// LINE CHART
+// ***********************************************************
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-test-lines',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-elements>
+        <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"
+          [vicLinesHoverMoveActions]="hoverActions"
+          (vicLinesHoverMoveOutput)="updateTooltipForNewOutput($event)"
+        ></svg:g>
+        <svg:g vic-quantitative-rules [config]="rulesConfig"></svg:g>
+      </ng-container>
+    </vic-xy-chart>
+  `,
+  styles: [],
+  imports: [
+    VicChartModule,
+    VicLinesModule,
+    VicXyAxisModule,
+    VicQuantitativeRulesModule,
+  ],
+})
+class TestLinesComponent<
+  Datum,
+  QuantAxisType extends number | Date,
+  RuleDatum extends number | Date,
+> {
+  @Input() linesConfig: LinesConfig<Datum>;
+  @Input() rulesConfig: QuantitativeRulesConfig<RuleDatum>;
+  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<QuantAxisType>;
+  chartConfig: ChartConfig = new VicChartConfigBuilder()
+    .maxHeight(linesChartHeight)
+    .maxWidth(linesChartWidth)
+    .margin(linesMargin)
+    .scalingStrategy('responsive-width')
+    .getConfig();
+}
+
+function mountDateLinesComponent<RuleDatum extends number | Date>(
+  rulesConfig: QuantitativeRulesConfig<RuleDatum>
+): void {
+  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<Date>()
+    .ticks((ticks) => ticks.format('%Y'))
+    .getConfig();
+  const yAxisConfig =
+    new VicYQuantitativeAxisConfigBuilder<number>().getConfig();
+  const linesConfig =
+    new VicLinesConfigBuilder<ContinentPopulationDateYearDatum>()
+      .data(linesDateData)
+      .xDate((dimension) => dimension.valueAccessor((d) => d.year))
+      .y((dimension) => dimension.valueAccessor((d) => d.population))
+      .stroke((stroke) =>
+        stroke.color((color) => color.valueAccessor((d) => d.continent))
+      )
+      .getConfig();
+  cy.mount(
+    TestLinesComponent<ContinentPopulationDateYearDatum, Date, RuleDatum>,
+    {
+      componentProperties: {
+        linesConfig: linesConfig,
+        rulesConfig: rulesConfig,
+        xQuantitativeAxisConfig: xAxisConfig,
+        yQuantitativeAxisConfig: yAxisConfig,
+      },
+    }
+  );
+  cy.wait(axisTickTextWaitTime); // have to wait for axes to render
+}
+
+function mountNumberLinesComponent(
+  rulesConfig: QuantitativeRulesConfig<number>
+): void {
+  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
+    .ticks((ticks) => ticks.format('.0f'))
+    .getConfig();
+  const yAxisConfig =
+    new VicYQuantitativeAxisConfigBuilder<number>().getConfig();
+  const linesConfig =
+    new VicLinesConfigBuilder<ContinentPopulationNumYearDatum>()
+      .data(linesNumericData)
+      .xNumeric((dimension) =>
+        dimension.valueAccessor((d) => d.year).includeZeroInDomain(false)
+      )
+      .y((dimension) => dimension.valueAccessor((d) => d.population))
+      .stroke((stroke) =>
+        stroke.color((color) => color.valueAccessor((d) => d.continent))
+      )
+      .getConfig();
+  cy.mount(
+    TestLinesComponent<ContinentPopulationNumYearDatum, number, number>,
+    {
+      componentProperties: {
+        linesConfig: linesConfig,
+        rulesConfig: rulesConfig,
+        xQuantitativeAxisConfig: xAxisConfig,
+        yQuantitativeAxisConfig: yAxisConfig,
+      },
+    }
+  );
+  cy.wait(axisTickTextWaitTime); // have to wait for axes to render
+}
+
+// ***********************************************************
+// Creating the correct rules - horizontal bars, vertical rule + labels
+// ***********************************************************
+describe('it creates the correct rules and labels - vertical rules on horizontal bars', () => {
+  let rulesConfig: QuantitativeRulesConfig<number>;
+  beforeEach(() => {
+    rulesConfig = undefined;
+  });
+  it('draws one rule per item in the data array with the specified color string', () => {
+    const ruleData = [200000, 500000];
+    const ruleColor = 'magenta';
+    rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('vertical')
+      .data(ruleData)
+      .color(ruleColor)
+      .getConfig();
+    mountHorizontalBarsComponent(rulesConfig);
+    cy.get(groupSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).each(($rule) => {
+      expect($rule.attr('stroke')).to.equal(ruleColor);
+    });
+  });
+  it('draws one rule per item in the data array using the color function', () => {
+    const ruleData = [200000, 500000];
+    const getColor = (d: number) => (d < 300000 ? 'chartreuse' : 'magenta');
+    rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('vertical')
+      .data(ruleData)
+      .color(getColor)
+      .getConfig();
+    mountHorizontalBarsComponent(rulesConfig);
+    cy.get(ruleSelector).each(($rule, index) => {
+      if (index === 0) {
+        expect($rule.attr('stroke')).to.equal('chartreuse');
+      } else {
+        expect($rule.attr('stroke')).to.equal('magenta');
+      }
+    });
+  });
+  it('draws the user-specified labels - no label color specified, no value specified', () => {
+    const ruleData = [200000, 500000];
+    const getColor = (d: number) => (d < 300000 ? 'chartreuse' : 'magenta');
+    rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('vertical')
+      .data(ruleData)
+      .color(getColor)
+      .labels()
+      .getConfig();
+    mountHorizontalBarsComponent(rulesConfig);
+    cy.get(groupSelector).each(($group, index) => {
+      if (index === 0) {
+        expect($group.find(ruleSelector).attr('stroke')).to.equal('chartreuse');
+        expect($group.find(labelSelector).attr('fill')).to.equal('chartreuse');
+        expect($group.find(labelSelector).text()).to.equal(
+          `${ruleData[index]}`
+        );
+      } else {
+        expect($group.find(ruleSelector).attr('stroke')).to.equal('magenta');
+        expect($group.find(labelSelector).attr('fill')).to.equal('magenta');
+        expect($group.find(labelSelector).text()).to.equal(
+          `${ruleData[index]}`
+        );
+      }
+    });
+  });
+  it('draws the user-specified labels - specified label color and value', () => {
+    const ruleData = [200000, 500000];
+    const getColor = (d: number) => (d < 300000 ? 'chartreuse' : 'magenta');
+    rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('vertical')
+      .data(ruleData)
+      .color(getColor)
+      .labels((labels) =>
+        labels
+          .color((d) => (d < 300000 ? 'green' : 'hotpink'))
+          .value((d) => (d < 300000 ? 'pretty big' : 'really big'))
+      )
+      .getConfig();
+    mountHorizontalBarsComponent(rulesConfig);
+    cy.get(groupSelector).each(($group, index) => {
+      if (index === 0) {
+        expect($group.find(ruleSelector).attr('stroke')).to.equal('chartreuse');
+        expect($group.find(labelSelector).attr('fill')).to.equal('green');
+        expect($group.find(labelSelector).text()).to.equal('pretty big');
+      } else {
+        expect($group.find(ruleSelector).attr('stroke')).to.equal('magenta');
+        expect($group.find(labelSelector).attr('fill')).to.equal('hotpink');
+        expect($group.find(labelSelector).text()).to.equal('really big');
+      }
+    });
+  });
+});
+
+// ***********************************************************
+// Creating the correct rules - vertical bars, horizontal rule + labels
+// ***********************************************************
+describe('it creates the correct rules and labels - horizontal rules on vertical bars', () => {
+  let rulesConfig: QuantitativeRulesConfig<number>;
+  beforeEach(() => {
+    rulesConfig = undefined;
+  });
+  it('draws one rule per item in the data array with the specified color string', () => {
+    const ruleData = [200000, 500000];
+    const getColor = (d: number) => (d < 300000 ? 'chartreuse' : 'magenta');
+    rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('horizontal')
+      .data(ruleData)
+      .color(getColor)
+      .labels((labels) =>
+        labels
+          .color((d) => (d < 300000 ? 'green' : 'hotpink'))
+          .value((d) => (d < 300000 ? 'pretty big' : 'really big'))
+      )
+      .getConfig();
+    mountVerticalBarsComponent(rulesConfig);
+    cy.get(groupSelector).each(($group, index) => {
+      if (index === 0) {
+        expect(
+          $group.find('.vic-quantitative-rules-rule').attr('stroke')
+        ).to.equal('chartreuse');
+        expect($group.find(labelSelector).attr('fill')).to.equal('green');
+        expect($group.find(labelSelector).text()).to.equal('pretty big');
+      } else {
+        expect(
+          $group.find('.vic-quantitative-rules-rule').attr('stroke')
+        ).to.equal('magenta');
+        expect($group.find(labelSelector).attr('fill')).to.equal('hotpink');
+        expect($group.find(labelSelector).text()).to.equal('really big');
+      }
+    });
+  });
+});
+
+// ***********************************************************
+// Creating the correct rules - date line chart
+// ***********************************************************
+describe('it creates the correct rules and labels on a date line chart', () => {
+  it('draws a horizontal line on the chart with the correct color and label value', () => {
+    const ruleData = [1000000000];
+    const ruleColor = 'magenta';
+    const rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('horizontal')
+      .data(ruleData)
+      .color(ruleColor)
+      .labels()
+      .getConfig();
+    mountDateLinesComponent<number>(rulesConfig);
+    cy.get(groupSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).each(($rule) => {
+      expect($rule.attr('stroke')).to.equal(ruleColor);
+    });
+    cy.get(labelSelector).each(($rule, index) => {
+      expect($rule.text()).to.equal(`${ruleData[index]}`);
+    });
+  });
+  it('draws a vertical line on the chart with the correct color and label value', () => {
+    const ruleData = [new Date('2042-01-01')];
+    const ruleColor = 'magenta';
+    const rulesConfig = new VicQuantitativeRulesConfigBuilder<Date>()
+      .orientation('vertical')
+      .data(ruleData)
+      .color(ruleColor)
+      .labels((labels) => labels.value(() => 'no return'))
+      .getConfig();
+    mountDateLinesComponent<Date>(rulesConfig);
+    cy.get(groupSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).each(($rule) => {
+      expect($rule.attr('stroke')).to.equal(ruleColor);
+    });
+    cy.get(labelSelector).each(($rule) => {
+      expect($rule.text()).to.equal('no return');
+    });
+  });
+});
+
+// ***********************************************************
+// Creating the correct rules - number line chart
+// ***********************************************************
+describe('it creates the correct rules and labels on a number line chart', () => {
+  it('draws a horizontal line on the chart with the correct color and label value', () => {
+    const ruleData = [1000000000];
+    const ruleColor = 'magenta';
+    const rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('horizontal')
+      .data(ruleData)
+      .color(ruleColor)
+      .labels()
+      .getConfig();
+    mountNumberLinesComponent(rulesConfig);
+    cy.get(groupSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).each(($rule) => {
+      expect($rule.attr('stroke')).to.equal(ruleColor);
+    });
+    cy.get(labelSelector).each(($rule, index) => {
+      expect($rule.text()).to.equal(`${ruleData[index]}`);
+    });
+  });
+  it('draws a vertical line on the chart with the correct color and label value', () => {
+    const ruleData = [2042];
+    const ruleColor = 'magenta';
+    const rulesConfig = new VicQuantitativeRulesConfigBuilder<number>()
+      .orientation('vertical')
+      .data(ruleData)
+      .color(ruleColor)
+      .labels((labels) => labels.value(() => 'no return'))
+      .getConfig();
+    mountNumberLinesComponent(rulesConfig);
+    cy.get(groupSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).should('have.length', ruleData.length);
+    cy.get(ruleSelector).each(($rule) => {
+      expect($rule.attr('stroke')).to.equal(ruleColor);
+    });
+    cy.get(labelSelector).each(($rule) => {
+      expect($rule.text()).to.equal('no return');
+    });
+  });
+});

package/src/lib/quantitative-rules/quantitative-rules.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { QuantitativeRulesComponent } from './quantitative-rules.component';
+
+@NgModule({
+  imports: [QuantitativeRulesComponent],
+  exports: [QuantitativeRulesComponent],
+})
+export class VicQuantitativeRulesModule {}