@mathstack/viz 2.0.3 → 2.2.0

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/no-bins/no-bins.cy.ts

@@ -1,265 +0,0 @@
-/* eslint-disable @angular-eslint/prefer-standalone */
-import { Component, Input } from '@angular/core';
-import {
-  ChartConfig,
-  GeographiesConfig,
-  VicChartConfigBuilder,
-  VicChartModule,
-  VicGeographiesConfigBuilder,
-  VicGeographiesModule,
-} from '@mathstack/viz';
-import { geoMercator } from 'd3';
-import {
-  FeatureCollection,
-  GeoJsonProperties,
-  MultiPolygon,
-  Polygon,
-} from 'geojson';
-import {
-  stateIncomePopulationYearData,
-  StateIncomePopulationYearDatum,
-} from 'libs/viz/src/lib/testing/data/state-population-income-year-data';
-import { beforeEach, cy, describe, expect, it } from 'local-cypress';
-import * as topojson from 'topojson-client';
-import { GeometryCollection, Objects, Topology } from 'topojson-specification';
-
-const margin = { top: 36, right: 36, bottom: 36, left: 36 };
-const chartHeight = 400;
-const chartWidth = 600;
-const attributeData = stateIncomePopulationYearData
-  .filter((x) => x.year === 2020)
-  .filter((x) => x.state !== 'Puerto Rico');
-
-interface TestMapGeometryProperties extends GeoJsonProperties {
-  name: string;
-  id: string;
-}
-
-interface TestMapObjects extends Objects {
-  country: GeometryCollection<TestMapGeometryProperties>;
-  states: GeometryCollection<TestMapGeometryProperties>;
-}
-
-type TestUsMapTopology = Topology<TestMapObjects>;
-
-// ***********************************************************
-// Geographies component set up
-// ***********************************************************
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-test-geographies',
-  template: `
-    <vic-map-chart [config]="chartConfig">
-      <svg:g
-        vic-primary-marks-geographies
-        svg-elements
-        [config]="geographiesConfig"
-        [vicGeographiesHoverActions]="hoverActions"
-        (vicGeographiesHoverOutput)="updateTooltipForNewOutput($event)"
-      ></svg:g>
-    </vic-map-chart>
-  `,
-  styles: [],
-  imports: [VicChartModule, VicGeographiesModule],
-})
-class TestGeographiesComponent {
-  @Input() geographiesConfig: GeographiesConfig<
-    StateIncomePopulationYearDatum,
-    TestMapGeometryProperties
-  >;
-  chartConfig: ChartConfig = new VicChartConfigBuilder()
-    .margin(margin)
-    .maxWidth(chartWidth)
-    .maxHeight(chartHeight)
-    .scalingStrategy('responsive-width')
-    .getConfig();
-}
-
-const mountGeographiesComponent = (
-  geographiesConfig: GeographiesConfig<
-    StateIncomePopulationYearDatum,
-    TestMapGeometryProperties
-  >
-): void => {
-  cy.mount(TestGeographiesComponent, {
-    componentProperties: {
-      geographiesConfig: geographiesConfig,
-    },
-  });
-};
-
-// ***********************************************************
-// Test dimension
-// ***********************************************************
-describe('the No Bins Attribute Data dimension', () => {
-  let geographiesConfig: GeographiesConfig<
-    StateIncomePopulationYearDatum,
-    TestMapGeometryProperties
-  >;
-  beforeEach(() => {
-    geographiesConfig = undefined;
-  });
-  it('it colors the paths according to the data and the users/the default range', () => {
-    // Note: use colors where only one rbg color channel varies so that it's possible to test data values.
-    cy.fixture('usMap.json').then((response) => {
-      const usMap: TestUsMapTopology = response;
-      const usBoundary = topojson.feature(
-        usMap,
-        usMap.objects.country
-      ) as FeatureCollection<MultiPolygon, TestMapGeometryProperties>;
-      const states = topojson.feature(
-        usMap,
-        usMap.objects.states
-      ) as FeatureCollection<MultiPolygon | Polygon, TestMapGeometryProperties>;
-      geographiesConfig = new VicGeographiesConfigBuilder<
-        StateIncomePopulationYearDatum,
-        TestMapGeometryProperties
-      >()
-        .boundary(usBoundary)
-        .featureIndexAccessor((d) => d.properties.name)
-        .attributeDataLayer((layer) =>
-          layer
-            .data(attributeData)
-            .class((d) => d.name.split(' ').join('-'))
-            .geographies(states.features)
-            .geographyIndexAccessor((d) => d.state)
-            .noBins((dimension) =>
-              dimension
-                .valueAccessor((d) => d.income)
-                .range(['white', '#ff00ff'])
-            )
-        )
-        .getConfig();
-      mountGeographiesComponent(geographiesConfig);
-      const sortedData = attributeData
-        .slice()
-        .sort((a, b) => a.income - b.income);
-      const lowest = sortedData[0].state.replace(/\s/g, '-');
-      const highest = sortedData[sortedData.length - 1].state.replace(
-        /\s/g,
-        '-'
-      );
-      cy.get(`.vic-geographies-group.${lowest} path`).then((path) => {
-        expect(path.attr('fill')).to.eq('rgb(255, 255, 255)');
-      });
-      cy.get(`.vic-geographies-group.${highest} path`).then((path) => {
-        expect(path.attr('fill')).to.eq('rgb(255, 0, 255)');
-      });
-      const colors = [255];
-      sortedData.forEach((d, i) => {
-        const state = d.state.replace(/\s/g, '-');
-        cy.get(`.vic-geographies-group.${state} path`).then((path) => {
-          const color = parseInt(path.attr('fill').split('(')[1].split(',')[1]);
-          expect(color).to.be.lte(colors[i]);
-          colors.push(color);
-        });
-      });
-    });
-  });
-
-  it('it colors undefined, null, and non-quant values with null color', () => {
-    cy.fixture('usMap.json').then((response) => {
-      const usMap: TestUsMapTopology = response;
-      const usBoundary = topojson.feature(
-        usMap,
-        usMap.objects.country
-      ) as FeatureCollection<MultiPolygon, TestMapGeometryProperties>;
-      const states = topojson.feature(
-        usMap,
-        usMap.objects.states
-      ) as FeatureCollection<MultiPolygon | Polygon, TestMapGeometryProperties>;
-      const dataWithFalsyValues = attributeData.map((d) => {
-        if (d.state === 'Texas') {
-          return { ...d, income: null };
-        } else if (d.state === 'California') {
-          return { ...d, income: undefined };
-        } else if (d.state === 'Florida') {
-          return { ...d, income: 'Not a number' as unknown as number };
-        } else {
-          return d;
-        }
-      });
-      const nullColor = 'chartreuse';
-      geographiesConfig = new VicGeographiesConfigBuilder<
-        StateIncomePopulationYearDatum,
-        TestMapGeometryProperties
-      >()
-        .boundary(usBoundary)
-        .featureIndexAccessor((d) => d.properties.name)
-        .attributeDataLayer((layer) =>
-          layer
-            .data(dataWithFalsyValues)
-            .class((d) => d.name.split(' ').join('-'))
-            .geographies(states.features)
-            .geographyIndexAccessor((d) => d.state)
-            .noBins((dimension) =>
-              dimension
-                .valueAccessor((d) => d.income)
-                .range(['white', '#ff00ff'])
-                .nullColor(nullColor)
-            )
-        )
-        .getConfig();
-      mountGeographiesComponent(geographiesConfig);
-      cy.get(`.vic-geographies-group.Florida path`).then((path) => {
-        expect(path.attr('fill')).to.eq(nullColor);
-      });
-      cy.get(`.vic-geographies-group.Texas path`).then((path) => {
-        expect(path.attr('fill')).to.eq(nullColor);
-      });
-      cy.get(`.vic-geographies-group.California path`).then((path) => {
-        expect(path.attr('fill')).to.eq(nullColor);
-      });
-    });
-  });
-
-  it('it colors geographies not in attribute data with the null color', () => {
-    // island territories like American Samoa, Guam, etc. are not in the attribute data but are in the geojson
-    // they wil be drawn with any projection but let's use geoMercator to make them a bit more visible-ish
-    cy.fixture('usMap.json').then((response) => {
-      const usMap: TestUsMapTopology = response;
-      const usBoundary = topojson.feature(
-        usMap,
-        usMap.objects.country
-      ) as FeatureCollection<MultiPolygon, TestMapGeometryProperties>;
-      const states = topojson.feature(
-        usMap,
-        usMap.objects.states
-      ) as FeatureCollection<MultiPolygon | Polygon, TestMapGeometryProperties>;
-      const nullColor = 'chartreuse';
-      geographiesConfig = new VicGeographiesConfigBuilder<
-        StateIncomePopulationYearDatum,
-        TestMapGeometryProperties
-      >()
-        .boundary(usBoundary)
-        .featureIndexAccessor((d) => d.properties.name)
-        .projection(geoMercator())
-        .attributeDataLayer((layer) =>
-          layer
-            .data(attributeData)
-            .class((d) => d.name.split(' ').join('-'))
-            .geographies(states.features)
-            .geographyIndexAccessor((d) => d.state)
-            .noBins((dimension) =>
-              dimension
-                .valueAccessor((d) => d.income)
-                .range(['white', '#ff00ff'])
-                .nullColor(nullColor)
-            )
-        )
-        .getConfig();
-      mountGeographiesComponent(geographiesConfig);
-      const geographiesNotInAttributeData = states.features
-        .filter(
-          (x) =>
-            attributeData.findIndex((d) => d.state === x.properties.name) === -1
-        )
-        .map((x) => x.properties.name.replace(/\s/g, '-'));
-      geographiesNotInAttributeData.forEach((state) => {
-        cy.get(`.vic-geographies-group.${state} path`).then((path) => {
-          expect(path.attr('fill')).to.eq(nullColor);
-        });
-      });
-    });
-  });
-});

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/no-bins/no-bins.spec.ts

@@ -1,42 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { NoBinsAttributeDataDimension } from './no-bins';
-import { NoBinsAttributeDataDimensionBuilder } from './no-bins-builder';
-
-describe('VicNoBinsAttributeDataDimension', () => {
-  let dimension: NoBinsAttributeDataDimension<any>;
-  beforeEach(() => {
-    dimension = new NoBinsAttributeDataDimensionBuilder<any>()
-      .valueAccessor((d) => d)
-      ._build();
-  });
-
-  describe('setPropertiesFromData', () => {
-    beforeEach(() => {
-      spyOn(dimension as any, 'setDomain');
-    });
-    it('calls setDomain once', () => {
-      dimension.setPropertiesFromData([1, 2, 3, 4, 5, 6, 7, 8, 9]);
-      expect((dimension as any).setDomain).toHaveBeenCalledOnceWith([
-        1, 2, 3, 4, 5, 6, 7, 8, 9,
-      ]);
-    });
-  });
-
-  describe('setDomain', () => {
-    it('sets the domain to the users value if it exists', () => {
-      dimension = new NoBinsAttributeDataDimensionBuilder<any>()
-        .valueAccessor((d) => d)
-        .domain([0, 5])
-        ._build();
-      (dimension as any).setDomain([1, 2, 3, 4, 5, 6, 7, 8, 9]);
-      expect((dimension as any).domain).toEqual([0, 5]);
-    });
-    it('sets the domain to values if there is no user provided domain', () => {
-      dimension = new NoBinsAttributeDataDimensionBuilder<any>()
-        .valueAccessor((d) => d)
-        ._build();
-      (dimension as any).setDomain([1, 2, 3, 4, 5, 6, 7, 8, 9]);
-      expect((dimension as any).domain).toEqual([1, 9]);
-    });
-  });
-});

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/no-bins/no-bins.ts

@@ -1,42 +0,0 @@
-import { safeAssign } from '@mathstack/app-kit';
-import { extent } from 'd3';
-import { BinStrategy } from '../attribute-data-bin-enums';
-import { AttributeDataDimension } from '../attribute-data/attribute-data-dimension';
-import { NoBinsAttributeDataDimensionOptions } from './no-bins-options';
-
-export class NoBinsAttributeDataDimension<Datum> extends AttributeDataDimension<
-  Datum,
-  number
-> {
-  override readonly binType: BinStrategy.none;
-  domain: [number, number];
-  formatSpecifier: string;
-
-  constructor(options: NoBinsAttributeDataDimensionOptions<Datum>) {
-    super('number');
-    this.binType = BinStrategy.none;
-    safeAssign(this, options);
-    if (!this.valueAccessor) {
-      console.error(
-        'Value accessor is required for NoBinsAttributeDataDimension'
-      );
-    }
-  }
-
-  setPropertiesFromData(data: Datum[]): void {
-    const values = data.map(this.valueAccessor);
-    this.setDomain(values);
-  }
-
-  protected setDomain(values: number[]): void {
-    const domainValues = this.domain ?? values;
-    this.domain = extent(domainValues);
-  }
-
-  getScale() {
-    return this.scale()
-      .domain(this.domain)
-      .range(this.range)
-      .unknown(this.nullColor);
-  }
-}

package/src/lib/geographies/config/layers/geographies-layer/geographies-layer-builder.ts

@@ -1,116 +0,0 @@
-import { safeAssign } from '@mathstack/app-kit';
-import { Geometry } from 'geojson';
-import { StrokeBuilder } from '../../../../stroke/stroke-builder';
-import { GeographiesFeature } from '../../../geographies-feature';
-import { GeographiesLabelsBuilder } from '../labels/geographies-labels-builder';
-
-const DEFAULT = {
-  _class: () => '',
-  _mixBlendMode: 'normal',
-  _strokeColor: 'dimgray',
-  _strokeWidth: '1',
-};
-
-export abstract class GeographiesLayerBuilder<
-  TProperties,
-  TGeometry extends Geometry,
-> {
-  protected _class: (d: TProperties) => string;
-  protected _enableEventActions: boolean;
-  protected _geographies: Array<GeographiesFeature<TProperties, TGeometry>>;
-  protected labelsBuilder: GeographiesLabelsBuilder<TProperties, TGeometry>;
-  protected _mixBlendMode: string;
-  protected strokeBuilder: StrokeBuilder;
-
-  constructor() {
-    safeAssign(this, DEFAULT);
-  }
-
-  /**
-   * OPTIONAL. Provides a class on the SVG element that correspends 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'.
-   */
-  class(value: null): this;
-  class(value: string): this;
-  class(value: (d: TProperties) => string): this;
-  class(value: ((d: TProperties) => string) | string | null): this {
-    if (value === null) {
-      this._class = DEFAULT._class;
-      return this;
-    }
-    if (typeof value === 'string') {
-      this._class = () => value;
-      return this;
-    }
-    this._class = value;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. Determines whether the layer can use viz event actions.
-   *
-   * If true, the event listener that corresponds to the provided directive will be placed on that layer's paths.
-   *
-   * @default true for Attribute Data layer
-   * @default false for Geojson Properties layers
-   */
-  enableEventActions(value: boolean): this {
-    this._enableEventActions = value;
-    return this;
-  }
-
-  /**
-   * REQUIRED. GeoJSON features that define the geographies to be drawn.
-   */
-  geographies(value: Array<GeographiesFeature<TProperties, TGeometry>>): this {
-    this._geographies = value;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. Creates a configuration object for labels that will be drawn on the geographies.
-   */
-  labels(labels: null): this;
-  labels(
-    labels: (labels: GeographiesLabelsBuilder<TProperties, TGeometry>) => void
-  ): this;
-  labels(
-    labels:
-      | ((labels: GeographiesLabelsBuilder<TProperties, TGeometry>) => void)
-      | null
-  ): this {
-    if (labels === null) {
-      this.labelsBuilder = undefined;
-      return this;
-    }
-    this.labelsBuilder = new GeographiesLabelsBuilder();
-    labels(this.labelsBuilder);
-    return this;
-  }
-
-  /**
-   * Sets the mix-blend-mode of the marks.
-   *
-   * @default 'normal'
-   */
-  mixBlendMode(mixBlendMode: string): this {
-    this._mixBlendMode = mixBlendMode;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. Sets the appearance of the stroke for the geographies in the layer.
-   */
-  stroke(setProperties?: (stroke: StrokeBuilder) => void): this {
-    this.initStrokeBuilder();
-    setProperties?.(this.strokeBuilder);
-    return this;
-  }
-
-  protected initStrokeBuilder(): void {
-    this.strokeBuilder = new StrokeBuilder();
-  }
-}

package/src/lib/geographies/config/layers/geographies-layer/geographies-layer-options.ts

@@ -1,20 +0,0 @@
-import { Geometry } from 'geojson';
-import { Stroke } from '../../../../stroke/stroke';
-import { GeographiesFeature } from '../../../geographies-feature';
-import { GeographiesLabels } from '../labels/geographies-labels';
-
-/**
- * Base configuration object for geographies that can be used with or without attribute data.
- *
- * The generic parameters are the same as those in VicGeographiesConfig.
- */
-export interface GeographiesLayerOptions<
-  TProperties,
-  TGeometry extends Geometry,
-> {
-  enableEventActions: boolean;
-  featureClass: (d: TProperties) => string;
-  labels: GeographiesLabels<TProperties, TGeometry>;
-  geographies: Array<GeographiesFeature<TProperties, TGeometry>>;
-  stroke: Stroke;
-}

package/src/lib/geographies/config/layers/geographies-layer/geographies-layer.ts

@@ -1,104 +0,0 @@
-import * as CSSType from 'csstype';
-import { Geometry } from 'geojson';
-import { ColorUtilities } from '../../../../core/utilities/colors';
-import { Stroke } from '../../../../stroke/stroke';
-import { GeographiesFeature } from '../../../geographies-feature';
-import { GeographiesLabels } from '../labels/geographies-labels';
-import {
-  GeographiesLabelsColorOptions,
-  GeographiesLabelsFontWeightOptions,
-} from '../labels/geographies-labels-options';
-import { GeographiesLayerOptions } from './geographies-layer-options';
-
-export interface GeographiesTooltipDatum<Datum> {
-  attributeValue?: string;
-  color: string;
-  datum?: Datum;
-  geography: string;
-}
-
-export abstract class GeographiesLayer<
-  Datum,
-  TProperties,
-  TGeometry extends Geometry,
-> implements GeographiesLayerOptions<TProperties, TGeometry> {
-  enableEventActions: boolean;
-  featureClass: (d: TProperties) => string;
-  featureIndexAccessor: (
-    d: GeographiesFeature<TProperties, TGeometry>
-  ) => string;
-  geographies: Array<GeographiesFeature<TProperties, TGeometry>>;
-  id: number;
-  labels: GeographiesLabels<TProperties, TGeometry>;
-  stroke: Stroke;
-
-  setFeatureIndexAccessor(
-    accessor: (d: GeographiesFeature<TProperties, TGeometry>) => string
-  ): void {
-    this.featureIndexAccessor = accessor;
-  }
-
-  abstract getFill(feature: GeographiesFeature<TProperties, TGeometry>): string;
-
-  abstract getTooltipData(
-    path: SVGPathElement
-  ): GeographiesTooltipDatum<Datum | undefined>;
-
-  getLabelColor(
-    feature: GeographiesFeature<TProperties, TGeometry>
-  ): CSSType.Property.Fill {
-    const pathColor = this.getFill(feature);
-    if (typeof this.labels.color === 'string') {
-      return this.labels.color;
-    }
-
-    if (pathColor.startsWith('url')) {
-      return this.labels.color.pattern ?? this.labels.color.default;
-    }
-
-    return ColorUtilities.getHigherContrastColorForBackground(
-      pathColor,
-      this.labels.color.default,
-      this.labels.color.contrastAlternative
-    );
-  }
-
-  getLabelFontWeight(
-    feature: GeographiesFeature<TProperties, TGeometry>
-  ): CSSType.Property.FontWeight {
-    const pathColor = this.getFill(feature);
-
-    if (!this.isContrastFontWeightOptions(this.labels.fontWeight)) {
-      return this.labels.fontWeight;
-    }
-
-    if (pathColor.startsWith('url')) {
-      return this.labels.fontWeight.pattern ?? this.labels.fontWeight.default;
-    }
-
-    if (this.isContrastColorOptions(this.labels.color)) {
-      const labelColor = ColorUtilities.getHigherContrastColorForBackground(
-        pathColor,
-        this.labels.color.default,
-        this.labels.color.contrastAlternative
-      );
-      return labelColor === this.labels.color.default
-        ? this.labels.fontWeight.default
-        : this.labels.fontWeight.contrastAlternative;
-    }
-
-    return this.labels.fontWeight.default;
-  }
-
-  isContrastColorOptions(
-    options: GeographiesLabelsColorOptions | CSSType.Property.Fill
-  ): options is GeographiesLabelsColorOptions {
-    return typeof options === 'object' && options !== null;
-  }
-
-  isContrastFontWeightOptions(
-    options: GeographiesLabelsFontWeightOptions | CSSType.Property.FontWeight
-  ): options is GeographiesLabelsFontWeightOptions {
-    return typeof options === 'object' && options !== null;
-  }
-}