@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/marks/map-marks/map-aux-marks/map-aux-marks.spec.ts

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { MapChartComponent } from '../../../charts/map-chart/map-chart.component';
+import { MapAuxMarksStub } from '../../../testing/stubs/map-aux-marks.stub';
+import { MapChartComponentStub } from '../../../testing/stubs/map-chart.component.stub';
+
+describe('MapAuxMarksBase abstract class', () => {
+  let abstractClass: MapAuxMarksStub<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        MapAuxMarksStub,
+        {
+          provide: MapChartComponent,
+          useValue: MapChartComponentStub,
+        },
+      ],
+    });
+    abstractClass = TestBed.inject(MapAuxMarksStub);
+  });
+
+  describe('ngOnInit()', () => {
+    beforeEach(() => {
+      spyOn(abstractClass, 'subscribeToAttributeDataProperties');
+    });
+    it('calls subscribeToAttributeDataProperties once', () => {
+      abstractClass.ngOnInit();
+      expect(
+        abstractClass.subscribeToAttributeDataProperties
+      ).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('subscribeToAttributeProperties()', () => {
+    beforeEach(() => {
+      abstractClass.chart = {
+        attributeProperties: new BehaviorSubject<any>({
+          config: undefined,
+          scale: undefined,
+        }),
+      } as any;
+      abstractClass.chart.attributeProperties$ = (
+        abstractClass.chart as any
+      ).attributeProperties.asObservable();
+      spyOn(abstractClass, 'drawMarks');
+    });
+    it('sets attributeDataConfig', () => {
+      abstractClass.subscribeToAttributeDataProperties();
+      (abstractClass.chart as any).attributeProperties.next({
+        scale: 'test scale',
+        config: 'test config',
+      });
+      expect(abstractClass.attributeDataConfig).toEqual('test config' as any);
+    });
+    it('sets attributeDataScale', () => {
+      abstractClass.subscribeToAttributeDataProperties();
+      (abstractClass.chart as any).attributeProperties.next({
+        scale: 'test scale',
+        config: 'test config',
+      });
+      expect(abstractClass.attributeDataScale).toEqual('test scale' as any);
+    });
+    it('calls drawMarks()', () => {
+      abstractClass.subscribeToAttributeDataProperties();
+      (abstractClass.chart as any).attributeProperties.next({
+        scale: 'test scale',
+        config: 'test config',
+      });
+      expect(abstractClass.drawMarks).toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/marks/map-marks/map-aux-marks/map-aux-marks.ts

@@ -0,0 +1,40 @@
+import { DestroyRef, Directive, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs';
+import { MapChartComponent } from '../../../charts';
+import { VicAttributeDataDimensionConfig } from '../../../geographies';
+import { AuxMarks } from '../../aux-marks/aux-marks';
+import { MarksConfig } from '../../config/marks-config';
+
+@Directive()
+export abstract class VicMapAuxMarks<Datum, TMarksConfig extends MarksConfig>
+  extends AuxMarks<Datum, TMarksConfig>
+  implements OnInit
+{
+  attributeDataConfig: VicAttributeDataDimensionConfig<Datum>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attributeDataScale: any;
+  public override chart = inject(MapChartComponent);
+  destroyRef = inject(DestroyRef);
+
+  ngOnInit(): void {
+    this.subscribeToAttributeDataProperties();
+  }
+
+  subscribeToAttributeDataProperties(): void {
+    this.chart.attributeProperties$
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        filter((properties) => !!properties.scale && !!properties.config)
+      )
+      .subscribe((properties) => {
+        this.attributeDataConfig = properties.config;
+        this.attributeDataScale = properties.scale;
+        this.drawMarks();
+      });
+  }
+
+  getTransitionDuration(): number {
+    return this.chart.config.transitionDuration;
+  }
+}

package/src/lib/marks/map-marks/map-primary-marks/map-primary-marks.spec.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { MapChartComponent } from '../../../charts/map-chart/map-chart.component';
+import { MapChartComponentStub } from '../../../testing/stubs/map-chart.component.stub';
+import { MapPrimaryMarksStub } from '../../../testing/stubs/map-primary-marks.stub';
+
+describe('MapPrimaryMarks abstract class', () => {
+  let abstractClass: MapPrimaryMarksStub<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        MapPrimaryMarksStub,
+        {
+          provide: MapChartComponent,
+          useValue: MapChartComponentStub,
+        },
+      ],
+    });
+    abstractClass = TestBed.inject(MapPrimaryMarksStub);
+  });
+
+  describe('ngOnInit()', () => {
+    beforeEach(() => {
+      spyOn(abstractClass, 'subscribeToRanges');
+      spyOn(abstractClass, 'subscribeToAttributeDataProperties');
+    });
+    it('calls subscribeToRanges once', () => {
+      abstractClass.ngOnInit();
+      expect(abstractClass.subscribeToRanges).toHaveBeenCalledTimes(1);
+    });
+    it('calls subscribeToAttributeProperties once', () => {
+      abstractClass.ngOnInit();
+      expect(
+        abstractClass.subscribeToAttributeDataProperties
+      ).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('subscribeToAttributeProperties()', () => {
+    beforeEach(() => {
+      abstractClass.chart = {
+        attributeProperties: new BehaviorSubject<any>({
+          config: undefined,
+          scale: undefined,
+        }),
+      } as any;
+      abstractClass.chart.attributeProperties$ = (
+        abstractClass.chart as any
+      ).attributeProperties.asObservable();
+      spyOn(abstractClass, 'drawMarks');
+    });
+    it('sets attributeDataConfig', () => {
+      abstractClass.subscribeToAttributeDataProperties();
+      (abstractClass.chart as any).attributeProperties.next({
+        scale: 'test scale',
+        config: 'test config',
+      });
+      expect(abstractClass.attributeDataConfig).toEqual('test config' as any);
+    });
+    it('sets attributeDataScale', () => {
+      abstractClass.subscribeToAttributeDataProperties();
+      (abstractClass.chart as any).attributeProperties.next({
+        scale: 'test scale',
+        config: 'test config',
+      });
+      expect(abstractClass.attributeDataScale).toEqual('test scale' as any);
+    });
+    it('calls drawMarks()', () => {
+      abstractClass.subscribeToAttributeDataProperties();
+      (abstractClass.chart as any).attributeProperties.next({
+        scale: 'test scale',
+        config: 'test config',
+      });
+      expect(abstractClass.drawMarks).toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/marks/map-marks/map-primary-marks/map-primary-marks.ts

@@ -0,0 +1,63 @@
+import { Directive, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs';
+import { MapChartComponent } from '../../../charts/map-chart/map-chart.component';
+import { VicAttributeDataDimensionConfig } from '../../../geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-types';
+import { MarksConfig } from '../../config/marks-config';
+import { PrimaryMarks } from '../../primary-marks/primary-marks';
+
+/**
+ * @internal
+ */
+@Directive()
+export abstract class MapPrimaryMarks<
+  Datum,
+  TPrimaryMarksConfig extends MarksConfig,
+>
+  extends PrimaryMarks<Datum, TPrimaryMarksConfig>
+  implements OnInit
+{
+  attributeDataConfig: VicAttributeDataDimensionConfig<Datum>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attributeDataScale: any;
+  public override chart = inject(MapChartComponent);
+
+  ngOnInit(): void {
+    this.subscribeToRanges();
+    this.subscribeToAttributeDataProperties();
+  }
+
+  subscribeToRanges(): void {
+    this.chart.ranges$
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        filter((ranges) => !!ranges)
+      )
+      .subscribe((ranges) => {
+        this.ranges = ranges;
+        if (this.attributeDataScale && this.attributeDataConfig) {
+          this.setChartScalesFromRanges(false);
+          this.drawMarks();
+        } else {
+          this.initFromConfig();
+        }
+      });
+  }
+
+  subscribeToAttributeDataProperties(): void {
+    this.chart.attributeProperties$
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        filter((properties) => !!properties.scale && !!properties.config)
+      )
+      .subscribe((properties) => {
+        this.attributeDataConfig = properties.config;
+        this.attributeDataScale = properties.scale;
+        this.drawMarks();
+      });
+  }
+
+  getTransitionDuration(): number {
+    return this.chart.config.transitionDuration;
+  }
+}

package/src/lib/marks/marks.ts

@@ -0,0 +1,39 @@
+import { Directive, OnChanges, SimpleChanges } from '@angular/core';
+import { NgOnChangesUtilities } from '@mathstack/app-kit';
+import { Chart } from '../charts';
+
+export interface IMarks {
+  chart: Chart;
+  /**
+   * drawMarks method
+   *
+   * All methods that require scales should be called from drawMarks. Methods
+   * called from here should use scale.domain() or scale.range() to obtain those values
+   * rather than this.config.dimension.domain or this.ranges.dimension.
+   *
+   * This method is called when scales emit from ChartComponent.
+   */
+  drawMarks: () => void;
+  /**
+   * getTransitionDuration method
+   *
+   * This method should return the duration of the transition to be used in the marks.
+   */
+  getTransitionDuration: () => number;
+}
+
+@Directive()
+export abstract class Marks implements IMarks, OnChanges {
+  chart: Chart;
+  abstract drawMarks(): void;
+  abstract getTransitionDuration(): number;
+  abstract initFromConfig(): void;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      NgOnChangesUtilities.inputObjectChangedNotFirstTime(changes, 'config')
+    ) {
+      this.initFromConfig();
+    }
+  }
+}

package/src/lib/marks/primary-marks/config/primary-marks-builder.ts

@@ -0,0 +1,75 @@
+import { safeAssign } from '@mathstack/app-kit';
+
+const DEFAULT = {
+  _datumClass: () => '',
+  _mixBlendMode: 'normal',
+};
+
+export abstract class PrimaryMarksBuilder<Datum> {
+  protected _datumClass: (d: Datum) => string;
+  protected _data: Datum[];
+  protected _mixBlendMode: string;
+
+  constructor() {
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. Provides a class on the SVG element that corresponds to a single datum. If a datum creates multiple SVG elements -- for example, a rect and a label, the class will be applied on the parent SVGGElement.
+   *
+   * IF the chart does not have SVG elements that correspond to a single datum, this class will be placed on the SVG element that represents a collection of data, for example, a area in a stacked area chart, or a line in a line chart. In this case the datum passed to the callback function will be the first datum in the collection.
+   *
+   * Note that if the resultant string has spaces in the name, multiple classes will be applied. For example, if the class is 'North Carolina', the element will have the classes 'North' and 'Carolina'.
+   */
+  datumClass(value: null): this;
+  datumClass(value: string): this;
+  datumClass(value: (d: Datum) => string): this;
+  datumClass(value: ((d: Datum) => string) | string | null): this {
+    if (value === null) {
+      this._datumClass = DEFAULT._datumClass;
+      return this;
+    }
+    if (typeof value === 'string') {
+      this._datumClass = () => value;
+      return this;
+    }
+    this._datumClass = value;
+    return this;
+  }
+
+  /**
+   * REQUIRED. Sets the data that will be used to render the marks for this component
+   *
+   * If no dimension domain overrides are provided, **this primary-marks data will also create the domain of the scales used on the entire chart**.
+   *
+   * The objects in the array can be of an type, and if an array of objects, the objects can contain any number of properties, including properties that are extraneous to the chart at hand.
+   */
+  data(data: Datum[]): this {
+    this._data = data;
+    return this;
+  }
+
+  /**
+   * Sets the mix-blend-mode of the marks.
+   *
+   * @default 'normal'
+   */
+  mixBlendMode(mixBlendMode: null): this;
+  mixBlendMode(mixBlendMode: string): this;
+  mixBlendMode(mixBlendMode: string | null): this {
+    if (mixBlendMode === null) {
+      this._mixBlendMode = DEFAULT._mixBlendMode;
+      return this;
+    }
+    this._mixBlendMode = mixBlendMode;
+    return this;
+  }
+
+  protected validateBuilder(componentName: string): void {
+    if (!this._data) {
+      throw new Error(
+        `${componentName} Builder: data is required. Use the 'data' method to set the data.`
+      );
+    }
+  }
+}

package/src/lib/marks/primary-marks/config/primary-marks-config.ts

@@ -0,0 +1,9 @@
+import { DataMarksConfig } from '../../config/marks-config';
+import { DataMarksOptions } from '../../config/marks-options';
+
+export abstract class PrimaryMarksConfig<Datum>
+  extends DataMarksConfig<Datum>
+  implements DataMarksOptions<Datum>
+{
+  protected abstract initPropertiesFromData(): void;
+}

package/src/lib/marks/primary-marks/primary-marks-base.spec.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SimpleChange } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { PrimaryMarksStub } from '../../testing/stubs/primary-marks.stub';
+
+describe('PrimaryMarks abstract class', () => {
+  let abstractClass: PrimaryMarksStub<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PrimaryMarksStub],
+    });
+    abstractClass = TestBed.inject(PrimaryMarksStub);
+  });
+
+  describe('ngOnChanges()', () => {
+    let configChange: any;
+    beforeEach(() => {
+      spyOn(abstractClass, 'initFromConfig');
+      configChange = {
+        config: new SimpleChange({ num: 'one' }, { num: 'two' }, false),
+      };
+    });
+    it('should call initFromConfig once if config changes exist, if not first change, and if curr value is different from prev value', () => {
+      abstractClass.ngOnChanges(configChange);
+      expect(abstractClass.initFromConfig).toHaveBeenCalledTimes(1);
+    });
+    it('should call not call initFromConfig if curr value and prev value are the same', () => {
+      configChange = {
+        config: new SimpleChange({ num: 'one' }, { num: 'one' }, false),
+      };
+      abstractClass.ngOnChanges(configChange);
+      expect(abstractClass.initFromConfig).toHaveBeenCalledTimes(0);
+    });
+    it('should not call initFromConfig if firstChange', () => {
+      configChange = {
+        config: new SimpleChange(1, 1, true),
+      };
+      abstractClass.ngOnChanges(configChange);
+      expect(abstractClass.initFromConfig).toHaveBeenCalledTimes(0);
+    });
+    it('should not call initFromConfig if config changes do not exist', () => {
+      configChange = {};
+      abstractClass.ngOnChanges(configChange);
+      expect(abstractClass.initFromConfig).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('initFromConfig()', () => {
+    beforeEach(() => {
+      spyOn(abstractClass, 'setChartScalesFromRanges');
+      abstractClass.initFromConfig();
+    });
+    it('calls setChartScalesFromRanges()', () => {
+      expect(abstractClass.setChartScalesFromRanges).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/lib/marks/primary-marks/primary-marks.ts

@@ -0,0 +1,43 @@
+import {
+  DestroyRef,
+  Directive,
+  InjectionToken,
+  Input,
+  OnChanges,
+  inject,
+} from '@angular/core';
+import { Ranges } from '../../charts';
+import { DataMarksConfig, MarksConfig } from '../config/marks-config';
+import { Marks } from '../marks';
+
+export const VIC_PRIMARY_MARKS = new InjectionToken<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  PrimaryMarks<unknown, any>
+>('PrimaryMarks');
+
+@Directive()
+export abstract class PrimaryMarks<
+  Datum,
+  TPrimaryMarksConfig extends MarksConfig | DataMarksConfig<Datum>,
+>
+  extends Marks
+  implements Marks, OnChanges
+{
+  @Input() config: TPrimaryMarksConfig;
+  ranges: Ranges;
+  destroyRef = inject(DestroyRef);
+
+  /**
+   * This method sets creates and sets scales on ChartComponent. Any methods that require ranges
+   * to create the scales should be called from this method. Methods called from here should not
+   * require scales.
+   *
+   * This method is called on init, after config-based properties are set, and also on
+   * resize/when ranges change.
+   */
+  abstract setChartScalesFromRanges(useTransition: boolean): void;
+
+  initFromConfig(): void {
+    this.setChartScalesFromRanges(true);
+  }
+}

package/src/lib/marks/xy-marks/xy-aux-marks/xy-aux-marks.ts

@@ -0,0 +1,40 @@
+import { DestroyRef, Directive, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs';
+import { XyChartComponent, XyChartScales } from '../../../charts';
+import { AuxMarks } from '../../aux-marks/aux-marks';
+import { DataMarksConfig, MarksConfig } from '../../config/marks-config';
+import { XyMarks } from '../xy-marks';
+
+@Directive()
+export abstract class XyAuxMarks<
+  Datum,
+  TMarksConfig extends MarksConfig | DataMarksConfig<Datum>,
+>
+  extends AuxMarks<Datum, TMarksConfig>
+  implements OnInit, XyMarks
+{
+  scales: XyChartScales;
+  public override chart = inject(XyChartComponent);
+  public destroyRef = inject(DestroyRef);
+
+  ngOnInit(): void {
+    this.subscribeToScales();
+  }
+
+  subscribeToScales(): void {
+    this.chart.scales$
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        filter((scales) => !!scales.x && !!scales.y)
+      )
+      .subscribe((scales): void => {
+        this.scales = scales;
+        this.drawMarks();
+      });
+  }
+
+  getTransitionDuration(): number {
+    return this.scales.useTransition ? this.chart.config.transitionDuration : 0;
+  }
+}

package/src/lib/marks/xy-marks/xy-marks-config.ts

@@ -0,0 +1,5 @@
+import { DataMarksConfig } from '../config/marks-config';
+
+export abstract class XyMarksConfig<Datum> extends DataMarksConfig<Datum> {
+  valueIndices: number[];
+}

package/src/lib/marks/xy-marks/xy-marks.ts

@@ -0,0 +1,10 @@
+import {
+  XyChartComponent,
+  XyChartScales,
+} from '../../charts/xy-chart/xy-chart.component';
+
+export interface XyMarks {
+  chart: XyChartComponent;
+  scales: XyChartScales;
+  subscribeToScales: () => void;
+}

package/src/lib/marks/xy-marks/xy-primary-marks/xy-primary-marks-config.ts

@@ -0,0 +1,7 @@
+import { PrimaryMarksConfig } from '../../primary-marks/config/primary-marks-config';
+
+export abstract class XyPrimaryMarksConfig<
+  Datum,
+> extends PrimaryMarksConfig<Datum> {
+  valueIndices: number[];
+}