@mathstack/viz 1.1.4 → 2.0.3

package/src/lib/dots/dots.component.spec.ts

@@ -0,0 +1,143 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { XyChartComponent } from '../charts';
+import { VicDotsConfigBuilder } from './config/dots-builder';
+import { DotsConfig } from './config/dots-config';
+import { DotsComponent } from './dots.component';
+
+type Datum = {
+  rain: number;
+  snow: number;
+  state: string;
+  year: number;
+  other: string;
+};
+
+const testData = [
+  { rain: 50, snow: 2, state: 'AL', year: 2020, other: 'a' },
+  { rain: 54, snow: 1, state: 'AL', year: 2021, other: 'b' },
+  { rain: 66, snow: 82, state: 'AK', year: 2020, other: 'c' },
+  { rain: 45, snow: 53, state: 'AK', year: 2021, other: 'd' },
+  { rain: 24, snow: 18, state: 'AZ', year: 2020, other: 'e' },
+  { rain: 17, snow: 25, state: 'AZ', year: 2021, other: 'f' },
+  { rain: 58, snow: 36, state: 'CA', year: 2020, other: 'g' },
+  { rain: 66, snow: 50, state: 'CA', year: 2021, other: 'h' },
+  { rain: 37, snow: 42, state: 'CO', year: 2020, other: 'i' },
+  { rain: 49, snow: 63, state: 'CO', year: 2021, other: 'j' },
+];
+
+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('DotsComponent', () => {
+  let component: DotsComponent<Datum>;
+  let fixture: ComponentFixture<DotsComponent<Datum>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [DotsComponent],
+      providers: [XyChartComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DotsComponent<Datum>);
+    component = fixture.componentInstance;
+  });
+
+  describe('setChartScalesFromRanges', () => {
+    beforeEach(() => {
+      component.ranges = {
+        x: [1, 2],
+        y: [3, 4],
+      } as any;
+      component.chart = {
+        updateScales: jasmine.createSpy('updatesScales'),
+      } as any;
+      component.config = getNewConfig(testData);
+      spyOn(component.config.x, 'getScaleFromRange').and.returnValue(
+        'xScale' as any
+      );
+      spyOn(component.config.y, 'getScaleFromRange').and.returnValue(
+        'yScale' as any
+      );
+      spyOn(component.config.fill, 'getScale').and.returnValue(
+        'fillScale' as any
+      );
+      spyOn(component.config.radius, 'getScale').and.returnValue(
+        'radiusScale' as any
+      );
+    });
+    it('calls x.getScaleFromRange once', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.config.x.getScaleFromRange).toHaveBeenCalledOnceWith([
+        1, 2,
+      ]);
+    });
+    it('calls y.getScaleFromRange once', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.config.y.getScaleFromRange).toHaveBeenCalledOnceWith([
+        3, 4,
+      ]);
+    });
+    it('calls fill.getScale once', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.config.fill.getScale).toHaveBeenCalledTimes(1);
+    });
+    it('sets scales.fill with the return values from fill.getScale', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.scales.fill).toEqual('fillScale');
+    });
+    it('calls radius.getScale once', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.config.radius.getScale).toHaveBeenCalledTimes(1);
+    });
+    it('sets scales.radius with the return values from radius.getScale', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.scales.radius).toEqual('radiusScale');
+    });
+    it('calls chart.updateScales once', () => {
+      component.setChartScalesFromRanges(false);
+      expect(component.chart.updateScales).toHaveBeenCalledOnceWith({
+        x: 'xScale' as any,
+        y: 'yScale' as any,
+        useTransition: false,
+      });
+    });
+  });
+
+  describe('drawMarks', () => {
+    beforeEach(() => {
+      spyOn(component, 'getTransitionDuration').and.returnValue(100);
+      spyOn(component, 'drawDots');
+      spyOn(component, 'updateDotElements');
+    });
+    it('calls getTransitionDuration once', () => {
+      component.drawMarks();
+      expect(component.getTransitionDuration).toHaveBeenCalledTimes(1);
+    });
+    it('calls drawDots once with the transitionDuration', () => {
+      component.drawMarks();
+      expect(component.drawDots).toHaveBeenCalledOnceWith(100);
+    });
+    it('calls updateDotElements once', () => {
+      component.drawMarks();
+      expect(component.updateDotElements).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/lib/dots/dots.component.ts

@@ -0,0 +1,291 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  InjectionToken,
+  NgZone,
+} from '@angular/core';
+import { select } from 'd3';
+import { Selection } from 'd3-selection';
+import { BehaviorSubject, filter } from 'rxjs';
+import { ChartComponent } from '../charts/chart/chart.component';
+import {
+  XyChartComponent,
+  XyChartScales,
+} from '../charts/xy-chart/xy-chart.component';
+import { DataValue, GenericScale } from '../core';
+import { ValueUtilities } from '../core/utilities/values';
+import { NumberDimension } from '../data-dimensions/continuous-quantitative/number-dimension/number-dimension';
+import { DataDimension } from '../data-dimensions/dimension';
+import { VIC_PRIMARY_MARKS } from '../marks/primary-marks/primary-marks';
+import { VicXyPrimaryMarks } from '../marks/xy-marks/xy-primary-marks/xy-primary-marks';
+import { DotsConfig } from './config/dots-config';
+
+export const DOTS = new InjectionToken<DotsComponent<unknown>>('DotsComponent');
+
+export type DotGroupSelection = Selection<
+  SVGGElement,
+  DotDatum,
+  SVGGElement,
+  unknown
+>;
+export type DotSelection = Selection<
+  SVGCircleElement,
+  DotDatum,
+  SVGGElement,
+  DotDatum
+>;
+export type DotLabelSelection = Selection<
+  SVGTextElement,
+  DotDatum,
+  SVGGElement,
+  DotDatum
+>;
+
+export type DotDatum = {
+  index: number;
+  x: DataValue;
+  y: DataValue;
+  fill: string | number;
+  radius: string | number;
+};
+
+export interface DotsTooltipDatum<Datum> {
+  datum: Datum;
+  values: {
+    x: string;
+    y: string;
+    fill: string | number;
+    radius: string | number;
+  };
+  color: string;
+}
+
+type DotsSvgElement = 'g' | 'dot';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[vic-primary-marks-dots]',
+  template: '',
+  styleUrl: './dots.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: VIC_PRIMARY_MARKS, useExisting: DotsComponent },
+    { provide: DOTS, useExisting: DotsComponent },
+    { provide: ChartComponent, useExisting: XyChartComponent },
+  ],
+  host: {
+    '[class]': 'config.marksClass',
+    '[style.mixed-blend-mode]': 'config.mixBlendMode',
+  },
+})
+export class DotsComponent<Datum> extends VicXyPrimaryMarks<
+  Datum,
+  DotsConfig<Datum>
+> {
+  dotGroups: DotGroupSelection;
+  dots: BehaviorSubject<DotSelection> = new BehaviorSubject(null);
+  dots$ = this.dots.asObservable().pipe(filter((s) => !!s));
+  override scales: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fill: GenericScale<any, any>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    radius: GenericScale<any, any>;
+  } & XyChartScales = {
+    fill: undefined,
+    radius: undefined,
+    x: undefined,
+    y: undefined,
+    useTransition: undefined,
+  };
+  private elRef = inject<ElementRef<SVGGElement>>(ElementRef);
+  private zone = inject(NgZone);
+
+  get class(): Record<DotsSvgElement, string> {
+    return {
+      g: this.config.marksClass + '-group',
+      dot: this.config.marksClass + '-dot',
+    };
+  }
+
+  setChartScalesFromRanges(useTransition: boolean): void {
+    const x = this.config.x.getScaleFromRange(this.ranges.x);
+    const y = this.config.y.getScaleFromRange(this.ranges.y);
+    this.scales.fill = this.config.fill.getScale();
+    this.scales.radius = this.config.radius.getScale();
+    this.zone.run(() => {
+      this.chart.updateScales({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        x: x as unknown as GenericScale<any, any>,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        y: y as unknown as GenericScale<any, any>,
+        useTransition,
+      });
+    });
+  }
+
+  drawMarks(): void {
+    const transitionDuration = this.getTransitionDuration();
+    this.drawDots(transitionDuration);
+    this.updateDotElements();
+  }
+
+  drawDots(transitionDuration: number): void {
+    const t = select(this.chart.svgRef.nativeElement)
+      .transition()
+      .duration(transitionDuration);
+
+    this.dotGroups = select(this.elRef.nativeElement)
+      .selectAll<SVGGElement, DotDatum>(`.${this.class.g}`)
+      .data<DotDatum>(
+        this.config.valueIndices.map((i) => this.getDotDatumFromIndex(i))
+      )
+      .join(
+        (enter) =>
+          enter
+            .append('g')
+            .attr('class', (d) =>
+              `${this.class.g} ${this.config.datumClass(this.config.data[d.index], d.index)}`.trim()
+            )
+            .attr(
+              'transform',
+              (d) => `translate(${this.scales.x(d.x)}, ${this.scales.y(d.y)})`
+            ),
+        (update) =>
+          update
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .transition(t as any)
+            .attr(
+              'transform',
+              (d) => `translate(${this.scales.x(d.x)}, ${this.scales.y(d.y)})`
+            ),
+        (exit) => exit.remove()
+      );
+
+    this.dotGroups
+      .selectAll<SVGCircleElement, DotDatum>(`.${this.class.dot}`)
+      .data<DotDatum>((d) => [d])
+      .join(
+        (enter) =>
+          enter
+            .append('circle')
+            .attr('class', this.class.dot)
+            .attr('r', (d) => this.scales.radius(d.radius))
+            .attr('fill', (d) => this.scales.fill(d.fill))
+            .attr('fill-opacity', this.config.opacity)
+            .attr(
+              'stroke',
+              this.config.stroke ? this.config.stroke.color : 'none'
+            )
+            .attr(
+              'stroke-dasharray',
+              this.config.stroke ? this.config.stroke.dasharray : null
+            )
+            .attr(
+              'stroke-linecap',
+              this.config.stroke ? this.config.stroke.linecap : null
+            )
+            .attr(
+              'stroke-linejoin',
+              this.config.stroke ? this.config.stroke.linejoin : null
+            )
+            .attr(
+              'stroke-opacity',
+              this.config.stroke ? this.config.stroke.opacity : null
+            )
+            .attr(
+              'stroke-width',
+              this.config.stroke ? this.config.stroke.width : null
+            ),
+        (update) =>
+          update
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .transition(t as any)
+            .attr('r', (d) => this.scales.radius(d.radius))
+            .attr('fill', (d) => this.scales.fill(d.fill))
+            .attr(
+              'stroke',
+              this.config.stroke ? this.config.stroke.color : 'none'
+            )
+            .attr(
+              'stroke-dasharray',
+              this.config.stroke ? this.config.stroke.dasharray : null
+            )
+            .attr(
+              'stroke-linecap',
+              this.config.stroke ? this.config.stroke.linecap : null
+            )
+            .attr(
+              'stroke-linejoin',
+              this.config.stroke ? this.config.stroke.linejoin : null
+            )
+            .attr(
+              'stroke-opacity',
+              this.config.stroke ? this.config.stroke.opacity : null
+            )
+            .attr(
+              'stroke-width',
+              this.config.stroke ? this.config.stroke.width : null
+            ),
+        (exit) => exit.remove()
+      );
+  }
+
+  getDotDatumFromIndex(index: number): DotDatum {
+    return {
+      index,
+      x: this.config.x.values[index],
+      y: this.config.y.values[index],
+      fill: this.config.fill.values[index],
+      radius: this.config.radius.values[index],
+    };
+  }
+
+  updateDotElements(): void {
+    const dots = select(this.elRef.nativeElement).selectAll<
+      SVGCircleElement,
+      DotDatum
+    >(`.${this.class.dot}`);
+    this.dots.next(dots);
+  }
+
+  getTooltipData(dotDatum: DotDatum): DotsTooltipDatum<Datum> {
+    const datum = this.config.data[dotDatum.index];
+    const valueFill = this.config.fill.valueAccessor(datum);
+    const tooltipData: DotsTooltipDatum<Datum> = {
+      datum,
+      values: {
+        fill: valueFill,
+        radius: this.config.radius.valueAccessor(datum),
+        x: this.getFormattedValue('x', datum),
+        y: this.getFormattedValue('y', datum),
+      },
+      color: this.scales.fill(valueFill),
+    };
+    return tooltipData;
+  }
+
+  getFormattedValue(dimension: 'x' | 'y', datum: Datum): string {
+    const config = this.config[dimension];
+    if (config.formatFunction) {
+      return ValueUtilities.customFormat(datum, config.formatFunction);
+    } else if (this.isContinuousNumericDimension(config)) {
+      return ValueUtilities.d3Format(
+        config.valueAccessor(datum) as number,
+        config.formatSpecifier
+      );
+    } else {
+      return config.valueAccessor(datum).toString();
+    }
+  }
+
+  isContinuousNumericDimension(
+    dimension: DataDimension<Datum, DataValue>
+  ): dimension is NumberDimension<Datum> {
+    return (
+      'formatSpecifier' in dimension &&
+      typeof dimension.formatSpecifier === 'string'
+    );
+  }
+}