@mathstack/viz 1.1.5 → 2.0.3

package/src/lib/map-legend/map-legend-base.spec.ts

@@ -0,0 +1,190 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ValueUtilities } from '../core/utilities/values';
+import { CategoricalBinsAttributeDataDimension } from '../geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins';
+import { CategoricalBinsBuilder } from '../geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-builder';
+import { CategoricalBinsOptions } from '../geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-options';
+import { EqualValueRangesBinsBuilder } from '../geographies/config/layers/attribute-data-layer/dimensions/equal-value-ranges-bins/equal-value-ranges-bins-builder';
+import { MapLegendContentStub } from '../testing/stubs/map-legend-content.stub';
+
+describe('the MapLegendContent abstract class', () => {
+  let directive: MapLegendContentStub<any>;
+
+  beforeEach(() => {
+    directive = new MapLegendContentStub();
+  });
+
+  describe('ngOnChanges', () => {
+    beforeEach(() => {
+      spyOn(directive, 'setValues');
+      spyOn(directive, 'setColors');
+    });
+    it('calls setValues once', () => {
+      directive.ngOnChanges();
+      expect(directive.setValues).toHaveBeenCalledTimes(1);
+    });
+    it('calls setColors once', () => {
+      directive.ngOnChanges();
+      expect(directive.setColors).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setValues', () => {
+    beforeEach(() => {
+      spyOn(directive, 'setCategoricalValues');
+      spyOn(directive, 'setQuantitativeValues');
+    });
+    it('calls setCategoricalValues once if binType is categorical', () => {
+      directive.config = new CategoricalBinsBuilder<string>()
+        .valueAccessor((d) => d)
+        ._build();
+      directive.setValues();
+      expect(directive.setCategoricalValues).toHaveBeenCalledTimes(1);
+    });
+    it('calls setQuantitativeValues once if binType is not categorical', () => {
+      directive.config = new EqualValueRangesBinsBuilder<number>()
+        .valueAccessor((d) => d)
+        ._build();
+      directive.setValues();
+      expect(directive.setQuantitativeValues).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setQuantitativeValues', () => {
+    let formatSpy: jasmine.Spy;
+    beforeEach(() => {
+      spyOn(directive, 'getValuesFromScale').and.returnValue([0.01, 0.02]);
+      spyOn(directive, 'setQuantitativeValueSpaces');
+      formatSpy = spyOn(ValueUtilities, 'd3Format').and.callThrough();
+      directive.orientation = 'horizontal';
+      directive.config = new EqualValueRangesBinsBuilder<number>()
+        .valueAccessor((d) => d)
+        .formatSpecifier('.0%')
+        ._build();
+    });
+    it('calls getValuesFromScale once', () => {
+      directive.setQuantitativeValues();
+      expect(directive.getValuesFromScale).toHaveBeenCalledTimes(1);
+    });
+    it('calls setQuantitativeValueSpaces once with the correct values if orientation is horizontal', () => {
+      directive.setQuantitativeValues();
+      expect(directive.setQuantitativeValueSpaces).toHaveBeenCalledWith([
+        '1%',
+        '2%',
+      ]);
+    });
+    it('calls d3Format once with the correct values if orientation is horizontal', () => {
+      directive.setQuantitativeValues();
+      expect(formatSpy.calls.allArgs()).toEqual([
+        [0.01, '.0%'],
+        [0.02, '.0%'],
+      ]);
+    });
+    it('calls d3Format once with the correct values if orientation is vertical', () => {
+      directive.orientation = 'vertical';
+      directive.setQuantitativeValues();
+      expect(formatSpy.calls.allArgs()).toEqual([
+        [0.02, '.0%'],
+        [0.01, '.0%'],
+      ]);
+    });
+    it('sets values to the correct values - orientation is horizontal', () => {
+      directive.setQuantitativeValues();
+      expect(directive.values).toEqual(['1%', '2%']);
+    });
+    it('sets values to the correct values - orientation is vertical', () => {
+      directive.orientation = 'vertical';
+      directive.setQuantitativeValues();
+      expect(directive.values).toEqual(['2%', '1%']);
+    });
+  });
+
+  describe('setCategoricalValues', () => {
+    beforeEach(() => {
+      spyOn(directive, 'getValuesFromScale').and.returnValue(['a', 'b'] as any);
+      spyOn(directive, 'setCategoricalValueSpaces');
+      directive.orientation = 'horizontal';
+    });
+    it('calls getValuesFromScale once', () => {
+      directive.setCategoricalValues();
+      expect(directive.getValuesFromScale).toHaveBeenCalledTimes(1);
+    });
+    it('calls setCategoricalValueSpaces once', () => {
+      directive.setCategoricalValues();
+      expect(directive.setCategoricalValueSpaces).toHaveBeenCalledTimes(1);
+    });
+    it('sets values to the correct values - orientation is horizontal', () => {
+      directive.setCategoricalValues();
+      expect(directive.values).toEqual(['a', 'b']);
+    });
+    it('sets values to the correct values - orientation is vertical', () => {
+      directive.orientation = 'vertical';
+      directive.setCategoricalValues();
+      expect(directive.values).toEqual(['b', 'a']);
+    });
+  });
+
+  describe('setColors', () => {
+    beforeEach(() => {
+      directive.config = new CategoricalBinsAttributeDataDimension(
+        {} as CategoricalBinsOptions<any>
+      );
+      (directive.config as any).domain = ['a', 'b'];
+      directive.config.range = ['red', 'blue'];
+    });
+    it('should set colors to scale.range if orientation is not vertical', () => {
+      directive.orientation = 'horizontal';
+      directive.setColors();
+      expect(directive.colors).toEqual(['red', 'blue']);
+    });
+
+    it('should reverse colors if orientation is vertical', () => {
+      directive.orientation = 'vertical';
+      directive.setColors();
+      expect(directive.colors).toEqual(['blue', 'red']);
+    });
+  });
+
+  describe('setQuantitativeValueSpaces', () => {
+    beforeEach(() => {
+      spyOn(directive, 'getLeftOffset').and.returnValue(10);
+      directive.setQuantitativeValueSpaces(['101', '2002']);
+    });
+    it('sets startValueSpace to the correct value', () => {
+      expect(directive.startValueSpace).toEqual(12);
+    });
+
+    it('sets endValueSpace to the correct value', () => {
+      expect(directive.endValueSpace).toEqual(16);
+    });
+
+    it('sets largerValueSpace to the correct value', () => {
+      expect(directive.largerValueSpace).toEqual(16);
+    });
+
+    it('calls leftOffset with the correct value', () => {
+      expect(directive.getLeftOffset).toHaveBeenCalledOnceWith(['101', '2002']);
+    });
+
+    it('sets leftOffset to the correct value', () => {
+      expect(directive.leftOffset).toEqual(10);
+    });
+  });
+
+  describe('setCategoricalValueSpaces', () => {
+    beforeEach(() => {
+      directive.setCategoricalValueSpaces();
+    });
+    it('should set startValueSpace to 0', () => {
+      expect(directive.startValueSpace).toEqual(0);
+    });
+    it('should set endValueSpace to 0', () => {
+      expect(directive.endValueSpace).toEqual(0);
+    });
+    it('should set largerValueSpace to 0', () => {
+      expect(directive.largerValueSpace).toEqual(0);
+    });
+    it('should set leftOffset to 0', () => {
+      expect(directive.leftOffset).toEqual(0);
+    });
+  });
+});

package/src/lib/map-legend/map-legend-base.ts

@@ -0,0 +1,99 @@
+import { Directive, Input, OnChanges, OnInit } from '@angular/core';
+import { Orientation, Side } from '../core/types/layout';
+import { ValueUtilities } from '../core/utilities/values';
+import { BinStrategy } from '../geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-enums';
+import { VicAttributeDataDimensionConfig } from '../geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-types';
+import { CalculatedBinsAttributeDataDimension } from '../geographies/config/layers/attribute-data-layer/dimensions/calculated-bins/calculated-bins';
+
+@Directive()
+export abstract class MapLegend<
+  Datum,
+  AttributeDimensionConfig extends VicAttributeDataDimensionConfig<Datum>,
+>
+  implements OnChanges, OnInit
+{
+  @Input() width: number;
+  @Input() height: number;
+  @Input() orientation: keyof typeof Orientation;
+  @Input() valuesSide: keyof typeof Side;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() scale: any;
+  @Input() config: AttributeDimensionConfig;
+  @Input() outlineColor: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  values: any[];
+  colors: string[];
+  startValueSpace: number;
+  endValueSpace: number;
+  largerValueSpace: number;
+  leftOffset: number;
+  VicValuesBin: typeof BinStrategy;
+
+  abstract getValuesFromScale(): string[] | number[];
+  abstract getLeftOffset(values?: string[]): number;
+
+  ngOnChanges(): void {
+    this.setValues();
+    this.setColors();
+  }
+
+  ngOnInit(): void {
+    this.VicValuesBin = BinStrategy;
+  }
+
+  setValues(): void {
+    if (this.config.binType !== BinStrategy.categorical) {
+      this.setQuantitativeValues();
+    } else {
+      this.setCategoricalValues();
+    }
+  }
+
+  setQuantitativeValues(): void {
+    let values = this.getValuesFromScale() as number[];
+    if (this.orientation === Orientation.vertical) {
+      values = values.slice().reverse();
+    }
+    this.values = values.map((d) =>
+      ValueUtilities.d3Format(
+        d,
+        (this.config as CalculatedBinsAttributeDataDimension<Datum>)
+          .formatSpecifier
+      )
+    );
+    this.setQuantitativeValueSpaces(this.values);
+  }
+
+  setCategoricalValues(): void {
+    let values = this.getValuesFromScale() as string[];
+    if (this.orientation === Orientation.vertical) {
+      values = values.slice().reverse();
+    }
+    this.setCategoricalValueSpaces();
+    this.values = values;
+  }
+
+  setColors(): void {
+    this.colors = this.config.range;
+    if (this.orientation === Orientation.vertical) {
+      this.colors = this.colors.slice().reverse();
+    }
+  }
+
+  setQuantitativeValueSpaces(values: string[]): void {
+    this.startValueSpace = values[0].length * 4;
+    this.endValueSpace = values[values.length - 1].length * 4;
+    this.largerValueSpace =
+      this.startValueSpace > this.endValueSpace
+        ? this.startValueSpace
+        : this.endValueSpace;
+    this.leftOffset = this.getLeftOffset(values);
+  }
+
+  setCategoricalValueSpaces(): void {
+    this.startValueSpace = 0;
+    this.endValueSpace = 0;
+    this.largerValueSpace = 0;
+    this.leftOffset = 0;
+  }
+}

package/src/lib/map-legend/map-legend.component.html

@@ -0,0 +1,24 @@
+<ng-content select="[title]"></ng-content>
+@if (chart.attributeProperties$ | async; as attributeProperties) { @if
+(attributeProperties.config) { @if (attributeProperties.config.binType ===
+VicValuesBin.none) {
+<vic-continuous-legend
+  [width]="width"
+  [height]="height"
+  [valuesSide]="valuesSide"
+  [scale]="attributeProperties.scale"
+  [config]="attributeProperties.config"
+  [outlineColor]="outlineColor"
+  [orientation]="orientation"
+></vic-continuous-legend>
+} @else {
+<vic-discontinuous-legend
+  [width]="width"
+  [height]="height"
+  [valuesSide]="valuesSide"
+  [scale]="attributeProperties.scale"
+  [config]="attributeProperties.config"
+  [outlineColor]="outlineColor"
+  [orientation]="orientation"
+></vic-discontinuous-legend>
+} } }

package/src/lib/map-legend/map-legend.component.spec.ts

@@ -0,0 +1,125 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MapChartComponent } from '../charts/map-chart/map-chart.component';
+
+import { MapLegendComponent } from './map-legend.component';
+
+describe('MapLegendComponent', () => {
+  let component: MapLegendComponent<any>;
+  let fixture: ComponentFixture<MapLegendComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MapLegendComponent],
+      providers: [MapChartComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapLegendComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('ngOnInit', () => {
+    beforeEach(() => {
+      spyOn(component, 'setOrientation');
+      spyOn(component, 'setValuesSide');
+    });
+    it('calls setOrientation once', () => {
+      component.ngOnInit();
+      expect(component.setOrientation).toHaveBeenCalledTimes(1);
+    });
+    it('calls setValuesSide once', () => {
+      component.ngOnInit();
+      expect(component.setValuesSide).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setOrientation', () => {
+    it('sets orientation to horizontal if width is greater than height', () => {
+      component.width = 100;
+      component.height = 50;
+      component.setOrientation();
+      expect(component.orientation).toEqual('horizontal');
+    });
+
+    it('sets orientation to vertical if width is not greater than height', () => {
+      component.width = 100;
+      component.height = 200;
+      component.setOrientation();
+      expect(component.orientation).toEqual('vertical');
+    });
+  });
+
+  describe('setValuesSide', () => {
+    beforeEach(() => {
+      spyOn(console, 'warn');
+    });
+
+    describe('if orientation is horizontal', () => {
+      beforeEach(() => {
+        component.orientation = 'horizontal';
+      });
+      describe('valuesSide is left', () => {
+        it('sets valuesSide to bottom', () => {
+          component.valuesSide = 'left';
+          component.setValuesSide();
+          expect(component.valuesSide).toEqual('bottom');
+        });
+
+        it('calls console.warn', () => {
+          component.valuesSide = 'left';
+          component.setValuesSide();
+          expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      describe('valuesSide is right', () => {
+        it('sets valuesSide to bottom', () => {
+          component.valuesSide = 'left';
+          component.setValuesSide();
+          expect(component.valuesSide).toEqual('bottom');
+        });
+
+        it('calls console.warn', () => {
+          component.valuesSide = 'left';
+          component.setValuesSide();
+          expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+
+    describe('if orientation is vertical', () => {
+      beforeEach(() => {
+        component.orientation = 'vertical';
+      });
+      describe('valuesSide is top', () => {
+        it('sets valuesSide to left', () => {
+          component.valuesSide = 'top';
+          component.setValuesSide();
+          expect(component.valuesSide).toEqual('left');
+        });
+
+        it('calls console.warn', () => {
+          component.valuesSide = 'top';
+          component.setValuesSide();
+          expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      describe('valuesSide is bottom', () => {
+        it('sets valuesSide to left', () => {
+          component.valuesSide = 'bottom';
+          component.setValuesSide();
+          expect(component.valuesSide).toEqual('left');
+        });
+
+        it('calls console.warn', () => {
+          component.valuesSide = 'bottom';
+          component.setValuesSide();
+          expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+  });
+});

package/src/lib/map-legend/map-legend.component.ts

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  DestroyRef,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+  inject,
+} from '@angular/core';
+import { MapChartComponent } from '../charts/map-chart/map-chart.component';
+import { Orientation, Side } from '../core/types/layout';
+import { BinStrategy } from '../geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-enums';
+import { ContinuousLegendComponent } from './continuous-legend/continuous-legend.component';
+import { DiscontinuousLegendComponent } from './discontinuous-legend/discontinuous-legend.component';
+
+export enum VicLegendType {
+  categorical = 'categorical',
+  ordinal = 'ordinal',
+  quantitative = 'quantitative',
+}
+
+@Component({
+  selector: 'vic-map-legend',
+  templateUrl: './map-legend.component.html',
+  styleUrls: ['./map-legend.component.scss'],
+  imports: [
+    CommonModule,
+    ContinuousLegendComponent,
+    DiscontinuousLegendComponent,
+  ],
+})
+export class MapLegendComponent<Datum> implements OnInit {
+  @Input() width: number;
+  @Input() height: number;
+  @Input() valuesSide: keyof typeof Side;
+  @Input() outlineColor: string;
+  @ViewChild('canvas', { static: true })
+  VicValuesBin: typeof BinStrategy;
+  canvasRef: ElementRef<HTMLCanvasElement>;
+  legendType: keyof typeof VicLegendType;
+  orientation: keyof typeof Orientation;
+  chart = inject(MapChartComponent<Datum>);
+  destroyRef = inject(DestroyRef);
+
+  ngOnInit(): void {
+    this.VicValuesBin = BinStrategy; // for some reason this doesn't get assigned if it's assigned in the class properties above
+    this.setOrientation();
+    this.setValuesSide();
+  }
+
+  setOrientation(): void {
+    this.orientation =
+      this.width > this.height ? Orientation.horizontal : Orientation.vertical;
+  }
+
+  setValuesSide(): void {
+    if (this.orientation === Orientation.horizontal) {
+      if (this.valuesSide === Side.left || this.valuesSide === Side.right) {
+        this.valuesSide = undefined;
+        console.warn(
+          "valuesSide must be set to 'top' or 'bottom' for a map-legend with a horizontal aspect ratio"
+        );
+      }
+      if (!this.valuesSide) {
+        this.valuesSide = Side.bottom;
+      }
+    } else {
+      if (this.valuesSide === Side.top || this.valuesSide === Side.bottom) {
+        this.valuesSide = undefined;
+        console.warn(
+          "valuesSide must be set to 'left' or 'right' for a map-legend with a vertical aspect ratio"
+        );
+      }
+      if (!this.valuesSide) {
+        this.valuesSide = Side.left;
+      }
+    }
+  }
+}

package/src/lib/map-legend/map-legend.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { MapLegendComponent } from './map-legend.component';
+
+@NgModule({
+  imports: [MapLegendComponent],
+  exports: [MapLegendComponent],
+})
+export class VicMapLegendModule {}

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

@@ -0,0 +1,18 @@
+import { Directive, Input, OnChanges } from '@angular/core';
+import { DataMarksConfig, MarksConfig } from '../config/marks-config';
+import { Marks } from '../marks';
+
+@Directive()
+export abstract class AuxMarks<
+  Datum,
+  TMarksConfig extends MarksConfig | DataMarksConfig<Datum>,
+>
+  extends Marks
+  implements Marks, OnChanges
+{
+  @Input() config: TMarksConfig;
+
+  initFromConfig(): void {
+    this.drawMarks();
+  }
+}

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

@@ -0,0 +1,25 @@
+import { safeAssign } from '@mathstack/app-kit';
+
+const DEFAULT = {
+  _class: () => '',
+  _mixBlendMode: 'normal',
+};
+
+export abstract class VicAuxMarksBuilder<Datum> {
+  protected _mixBlendMode: string;
+  protected _class: (d: Datum) => string;
+
+  constructor() {
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * Sets the mix-blend-mode of the marks.
+   *
+   * @default 'normal'
+   */
+  mixBlendMode(mixBlendMode: string): this {
+    this._mixBlendMode = mixBlendMode;
+    return this;
+  }
+}

package/{lib/marks/aux-marks/config/aux-marks-config.d.ts → src/lib/marks/aux-marks/config/aux-marks-config.ts}

@@ -1,4 +1,6 @@
-import { MarksConfig } from '../../config/marks-config';
-import { MarksOptions } from '../../config/marks-options';
-export declare abstract class AuxMarksConfig extends MarksConfig implements MarksOptions {
-}
+import { MarksConfig } from '../../config/marks-config';
+import { MarksOptions } from '../../config/marks-options';
+
+export abstract class AuxMarksConfig
+  extends MarksConfig
+  implements MarksOptions {}

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

@@ -0,0 +1,14 @@
+import { DataMarksOptions, MarksOptions } from './marks-options';
+
+export abstract class MarksConfig implements MarksOptions {
+  readonly marksClass: string;
+  readonly mixBlendMode: string;
+}
+
+export abstract class DataMarksConfig<Datum>
+  extends MarksConfig
+  implements DataMarksOptions<Datum>
+{
+  readonly data: Datum[];
+  readonly datumClass: (d: Datum, i: number) => string;
+}

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

@@ -0,0 +1,9 @@
+export interface MarksOptions {
+  mixBlendMode: string;
+  marksClass: string;
+}
+
+export interface DataMarksOptions<Datum> extends MarksOptions {
+  data: Datum[];
+  datumClass: (d: Datum, i: number) => string;
+}

package/{lib/marks/index.d.ts → src/lib/marks/index.ts}

@@ -1,15 +1,15 @@
-export * from './aux-marks/aux-marks';
-export * from './aux-marks/config/aux-marks-builder';
-export * from './aux-marks/config/aux-marks-config';
-export * from './config/marks-config';
-export * from './config/marks-options';
-export * from './map-marks/map-aux-marks/map-aux-marks';
-export * from './map-marks/map-primary-marks/map-primary-marks';
-export * from './primary-marks/config/primary-marks-builder';
-export * from './primary-marks/config/primary-marks-config';
-export * from './primary-marks/primary-marks';
-export * from './xy-marks/xy-aux-marks/xy-aux-marks';
-export * from './xy-marks/xy-marks';
-export * from './xy-marks/xy-marks-config';
-export * from './xy-marks/xy-primary-marks/xy-primary-marks';
-export * from './xy-marks/xy-primary-marks/xy-primary-marks-config';
+export * from './aux-marks/aux-marks';
+export * from './aux-marks/config/aux-marks-builder';
+export * from './aux-marks/config/aux-marks-config';
+export * from './config/marks-config';
+export * from './config/marks-options';
+export * from './map-marks/map-aux-marks/map-aux-marks';
+export * from './map-marks/map-primary-marks/map-primary-marks';
+export * from './primary-marks/config/primary-marks-builder';
+export * from './primary-marks/config/primary-marks-config';
+export * from './primary-marks/primary-marks';
+export * from './xy-marks/xy-aux-marks/xy-aux-marks';
+export * from './xy-marks/xy-marks';
+export * from './xy-marks/xy-marks-config';
+export * from './xy-marks/xy-primary-marks/xy-primary-marks';
+export * from './xy-marks/xy-primary-marks/xy-primary-marks-config';