@mathstack/viz 2.1.0 → 2.2.0

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

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

@@ -1,99 +0,0 @@
-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

@@ -1,24 +0,0 @@
-<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

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

@@ -1,80 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/src/lib/marks/aux-marks/config/aux-marks-config.ts

@@ -1,6 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/src/lib/marks/index.ts

@@ -1,15 +0,0 @@
-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';