@mathstack/viz 2.0.3 → 2.2.0

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

@@ -1,143 +0,0 @@
-/* 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

@@ -1,291 +0,0 @@
-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'
-    );
-  }
-}