@mathstack/viz 2.0.3 → 2.2.0

package/src/lib/lines/lines.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { LinesEventsDirective } from './events/lines-events.directive';
-import { LinesComponent } from './lines.component';
-
-@NgModule({
-  imports: [LinesComponent, LinesEventsDirective],
-  exports: [LinesComponent, LinesEventsDirective],
-})
-export class VicLinesModule {}

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

@@ -1,28 +0,0 @@
-<div
-  class="vic-legend-color-scale vic-continuous"
-  [ngClass]="['vic-' + orientation, 'vic-' + valuesSide]"
-  [style.--width]="width + 'px'"
-  [style.--height]="height + 'px'"
-  [style.--border-color]="outlineColor"
-  [style.--value-space]="largerValueSpace + 'px'"
-  [style.left.px]="leftOffset"
->
-  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===
-  'horizontal' && valuesSide === 'top')) {
-  <ng-container *ngTemplateOutlet="valuesDisplay"></ng-container>
-  }
-  <div class="vic-legend-canvas-container">
-    <canvas class="vic-legend-canvas" #canvas></canvas>
-  </div>
-  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation
-  === 'horizontal' && valuesSide === 'bottom')) {
-  <ng-container *ngTemplateOutlet="valuesDisplay"></ng-container>
-  }
-</div>
-
-<ng-template #valuesDisplay>
-  <div class="vic-legend-values-container vic-continuous">
-    <p class="vic-value vic-low">{{ values[0] }}</p>
-    <p class="vic-value vic-high">{{ values[values.length - 1] }}</p>
-  </div>
-</ng-template>

package/src/lib/map-legend/continuous-legend/continuous-legend.component.scss

@@ -1,76 +0,0 @@
-@use '../../core/styles/spacing';
-
-.vic-legend-canvas {
-  display: block;
-}
-
-.vic-legend-color-scale.vic-horizontal {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  max-width: var(--width);
-
-  .vic-legend-canvas-container {
-    display: flex;
-    flex-direction: column;
-    width: calc(var(--width) - calc(var(--value-space) * 2));
-    height: var(--height);
-    margin-right: var(--value-space);
-    margin-left: var(--value-space);
-  }
-
-  .vic-legend-values-container {
-    padding-top: spacing.grid(1);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .vic-value {
-    width: calc(var(--value-space) * 2);
-    text-align: center;
-  }
-
-  &.vic-top {
-    .vic-legend-values-container {
-      padding-top: 0;
-      padding-bottom: spacing.grid(1);
-    }
-  }
-}
-
-.vic-legend-color-scale.vic-vertical {
-  display: flex;
-  max-height: var(--height);
-
-  .vic-legend-canvas-container {
-    width: var(--width);
-    height: calc(var(--height) - calc(#{grid-2} * 2));
-    margin-top: spacing.grid(2);
-    margin-bottom: spacing.grid(2);
-  }
-
-  .vic-legend-values-container {
-    padding-right: spacing.grid(1);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-
-  &.vic-right {
-    .vic-legend-values-container {
-      padding-right: 0;
-      padding-left: spacing.grid(1);
-      align-items: flex-start;
-    }
-  }
-}
-
-.vic-legend-canvas-container {
-  border: 1px solid var(--border-color);
-}
-
-.vic-value {
-  font-size: 12px;
-}

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

@@ -1,61 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ContinuousLegendComponent } from './continuous-legend.component';
-
-describe('ContinuousLegendComponent', () => {
-  let component: ContinuousLegendComponent<any>;
-  let fixture: ComponentFixture<ContinuousLegendComponent<any>>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ContinuousLegendComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ContinuousLegendComponent);
-    component = fixture.componentInstance;
-  });
-
-  describe('ngOnChanges', () => {
-    beforeEach(() => {
-      spyOn(component, 'setValues');
-      spyOn(component, 'setColors');
-      spyOn(component, 'drawLinearGradient');
-    });
-
-    it('calls setValues once', () => {
-      component.ngOnChanges();
-      expect(component.setValues).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls setColors once', () => {
-      component.ngOnChanges();
-      expect(component.setColors).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls drawLinearGradient once', () => {
-      component.ngOnChanges();
-      expect(component.drawLinearGradient).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('getLeftOffset', () => {
-    beforeEach(() => {
-      component.orientation = 'horizontal';
-      component.largerValueSpace = 100;
-      component.startValueSpace = 50;
-    });
-
-    it('returns the correct value if orientation is horizontal', () => {
-      const result = component.getLeftOffset();
-      expect(result).toEqual(-50);
-    });
-
-    it('returns 0 if orientation is vertical', () => {
-      component.orientation = 'vertical';
-      const result = component.getLeftOffset();
-      expect(result).toEqual(0);
-    });
-  });
-});

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

@@ -1,82 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, OnChanges, ViewChild } from '@angular/core';
-import { scaleLinear } from 'd3';
-import { Orientation } from '../../core/types/layout';
-import { NoBinsAttributeDataDimension } from '../../geographies/config/layers/attribute-data-layer/dimensions/no-bins/no-bins';
-import { MapLegend } from '../map-legend-base';
-
-/**
- * @internal
- */
-@Component({
-  selector: 'vic-continuous-legend',
-  templateUrl: './continuous-legend.component.html',
-  styleUrls: ['./continuous-legend.component.scss'],
-  imports: [CommonModule],
-})
-export class ContinuousLegendComponent<Datum>
-  extends MapLegend<Datum, NoBinsAttributeDataDimension<Datum>>
-  implements OnChanges
-{
-  @ViewChild('canvas', { static: true })
-  canvasRef: ElementRef<HTMLCanvasElement>;
-
-  override ngOnChanges(): void {
-    super.ngOnChanges();
-    this.drawLinearGradient();
-  }
-
-  getValuesFromScale(): number[] {
-    return this.scale.domain();
-  }
-
-  getLeftOffset(): number {
-    if (this.orientation === Orientation.horizontal) {
-      return (this.largerValueSpace - this.startValueSpace) * -1;
-    } else {
-      return 0;
-    }
-  }
-
-  drawLinearGradient(): void {
-    const canvas = this.canvasRef.nativeElement;
-    canvas.style.width = '100%';
-    canvas.style.height = '100%';
-    const ctx = canvas.getContext('2d');
-    if (this.orientation === Orientation.horizontal) {
-      this.drawHorizontalGradient(canvas, ctx);
-    } else {
-      this.drawVerticalGradient(canvas, ctx);
-    }
-  }
-
-  drawHorizontalGradient(
-    canvas: HTMLCanvasElement,
-    ctx: CanvasRenderingContext2D
-  ): void {
-    canvas.height = 1;
-    canvas.width = this.width - this.startValueSpace - this.endValueSpace - 2;
-    const rectScale = scaleLinear<string>()
-      .domain([0, canvas.width])
-      .range(this.colors);
-    for (let i = 0; i < canvas.width; ++i) {
-      ctx.fillStyle = rectScale(i);
-      ctx.fillRect(i, 0, 1, 1);
-    }
-  }
-
-  drawVerticalGradient(
-    canvas: HTMLCanvasElement,
-    ctx: CanvasRenderingContext2D
-  ): void {
-    canvas.height = this.height - 16;
-    canvas.width = 1;
-    const rectScale = scaleLinear<string>()
-      .domain([0, canvas.height])
-      .range(this.colors);
-    for (let i = 0; i < canvas.height; ++i) {
-      ctx.fillStyle = rectScale(i);
-      ctx.fillRect(0, i, 1, 1);
-    }
-  }
-}

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

@@ -1,40 +0,0 @@
-<div
-  class="vic-legend-color-scale vic-discontinuous"
-  [ngClass]="['vic-' + orientation, 'vic-' + valuesSide]"
-  [class.vic-categorical]="config.binType === VicValuesBin.categorical"
-  [style.--border-color]="outlineColor"
-  [style.--width]="width + 'px'"
-  [style.--height]="height + 'px'"
-  [style.--num-colors]="colors.length"
-  [style.--value-space]="largerValueSpace + 'px'"
-  [style.left.px]="leftOffset"
->
-  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===
-  'horizontal' && valuesSide === 'top')) {
-  <ng-container *ngTemplateOutlet="valuesDisplay"></ng-container>
-  }
-  <div class="vic-legend-colors-container">
-    @if (config.binType !== VicValuesBin.categorical) {
-    <div class="vic-legend-color-padding"></div>
-    } @for (color of colors; track $index) {
-    <div
-      class="vic-legend-color vic-discontinuous"
-      [style.background-color]="color"
-      [style.--border-color]="outlineColor"
-    >
-    </div>
-    }
-  </div>
-  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation
-  === 'horizontal' && valuesSide === 'bottom')) {
-  <ng-container *ngTemplateOutlet="valuesDisplay"></ng-container>
-  }
-</div>
-
-<ng-template #valuesDisplay>
-  <div class="vic-legend-values-container vic-discontinous">
-    @for (value of values; track $index) {
-    <p class="vic-value"> {{ value }} </p>
-    }
-  </div>
-</ng-template>

package/src/lib/map-legend/discontinuous-legend/discontinuous-legend.component.scss

@@ -1,141 +0,0 @@
-@use 'sass:math';
-@use '../../core/styles/spacing';
-
-.vic-legend-color-scale.vic-horizontal {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .vic-legend-colors-container {
-    display: grid;
-    grid-template-columns:
-      minmax(var(--value-space), 0.5fr) repeat(
-        var(--num-colors),
-        minmax(calc(#{var(--value-space)} * 2), 1fr)
-      )
-      minmax(var(--value-space), 0.5fr);
-    max-width: var(--width);
-    height: var(--height);
-
-    .vic-legend-color {
-      height: 100%;
-      border-top: 1px solid var(--border-color);
-      border-bottom: 1px solid var(--border-color);
-      border-left: 1px solid var(--border-color);
-
-      &:last-child {
-        border-right: 1px solid var(--border-color);
-      }
-    }
-  }
-
-  .vic-legend-values-container {
-    padding-top: spacing.grid(1);
-    display: grid;
-    grid-template-columns: repeat(
-      calc(var(--num-colors) + 1),
-      minmax(calc(var(--value-space) * 2), 1fr)
-    );
-    max-width: var(--width);
-    justify-items: center;
-  }
-
-  &.vic-top {
-    .vic-legend-values-container {
-      padding-top: 0;
-      padding-bottom: spacing.grid(1);
-    }
-  }
-
-  &.vic-categorical {
-    .vic-legend-colors-container {
-      column-gap: spacing.grid(2);
-      grid-template-columns: repeat(calc(var(--num-colors)), 1fr);
-    }
-
-    .vic-legend-values-container {
-      column-gap: spacing.grid(2);
-      grid-template-columns: repeat(calc(var(--num-colors)), 1fr);
-    }
-
-    .vic-value {
-      text-align: center;
-    }
-  }
-}
-
-.vic-legend-color-scale.vic-categorical {
-  .vic-legend-color {
-    border: 1px solid var(--border-color);
-  }
-}
-
-.vic-legend-color-scale.vic-vertical {
-  display: flex;
-  height: var(--height);
-
-  .vic-legend-colors-container {
-    display: grid;
-    grid-template-columns: var(--width);
-    grid-template-rows:
-      0.5fr repeat(var(--num-colors), 1fr)
-      0.5fr;
-    height: 100%;
-
-    .vic-legend-color {
-      width: 100%;
-      border-top: 1px solid var(--border-color);
-      border-left: 1px solid var(--border-color);
-      border-right: 1px solid var(--border-color);
-
-      &:last-child {
-        border-bottom: 1px solid var(--border-color);
-      }
-    }
-  }
-
-  .vic-legend-values-container {
-    padding-right: spacing.grid(1);
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(calc(var(--num-colors) + 1), 1fr);
-    align-items: center;
-    justify-items: end;
-    height: 100%;
-  }
-
-  &.vic-right {
-    .vic-legend-values-container {
-      padding-right: 0;
-      padding-left: spacing.grid(1);
-      justify-items: start;
-    }
-  }
-
-  &.vic-categorical {
-    .vic-legend-colors-container {
-      grid-template-rows: repeat(var(--num-colors), 1fr);
-      row-gap: spacing.grid(2);
-    }
-
-    .vic-legend-values-container {
-      grid-template-rows: repeat(var(--num-colors), 1fr);
-      row-gap: spacing.grid(2);
-    }
-
-    .vic-value {
-      text-align: right;
-    }
-
-    &.vic-right {
-      .vic-value {
-        text-align: left;
-      }
-    }
-  }
-}
-
-.vic-value {
-  font-size: 12px;
-  line-height: 1;
-}

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

@@ -1,75 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { scaleQuantize } from 'd3';
-import { BinStrategy } from '../../geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-enums';
-import { CategoricalBinsAttributeDataDimension } from '../../geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins';
-import { CategoricalBinsOptions } from '../../geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-options';
-import { DiscontinuousLegendComponent } from './discontinuous-legend.component';
-
-describe('DiscontinuousLegendComponent', () => {
-  let component: DiscontinuousLegendComponent<any>;
-  let fixture: ComponentFixture<DiscontinuousLegendComponent<any>>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DiscontinuousLegendComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DiscontinuousLegendComponent);
-    component = fixture.componentInstance;
-  });
-
-  describe('getValuesFromScale', () => {
-    beforeEach(() => {
-      component.config = new CategoricalBinsAttributeDataDimension<any>({
-        domain: ['one', 'two', 'three'],
-      } as CategoricalBinsOptions<any>);
-      spyOn(component.config, 'getDomain').and.returnValue('domain' as any);
-    });
-    it('integration: should return this.config.domain if binType == categorical', () => {
-      expect(component.getValuesFromScale()).toEqual('domain' as any);
-    });
-    it('integration: should return breakValues if binType == customBreaks', () => {
-      component.config = {
-        binType: BinStrategy.customBreaks,
-        breakValues: [1, 2, 3],
-      } as any;
-      expect(component.getValuesFromScale()).toEqual([1, 2, 3] as any);
-    });
-    it('integration: should return custom values based on scale if binType not specified', () => {
-      component.config = {} as any;
-      component.config.range = ['white', 'gray', 'black'];
-      component.scale = scaleQuantize([0, 99], ['white', 'gray', 'black']);
-      expect(component.getValuesFromScale()).toEqual([0, 33, 66, 99]);
-    });
-  });
-
-  describe('getLeftOffset', () => {
-    beforeEach(() => {
-      component.width = 200;
-      component.largerValueSpace = 40;
-      component.startValueSpace = 20;
-      component.orientation = 'horizontal';
-    });
-
-    describe('if orientation is horizontal', () => {
-      it('integration: returns the correct value if colorHalfWidth is larger than largerValueSpace', () => {
-        const result = component.getLeftOffset(['1', '2']);
-        expect(result).toEqual(-30);
-      });
-
-      it('integration: returns the correct value if colorHalfWidth is smaller than largerValueSpace', () => {
-        const result = component.getLeftOffset(['1', '2', '3', '4']);
-        expect(result).toEqual(-20);
-      });
-    });
-
-    it('returns 0 if orientation is vertical', () => {
-      component.orientation = 'vertical';
-      const result = component.getLeftOffset(['1', '2']);
-      expect(result).toEqual(0);
-    });
-  });
-});

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

@@ -1,57 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { Orientation } from '../../core/types/layout';
-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 { NoBinsAttributeDataDimension } from '../../geographies/config/layers/attribute-data-layer/dimensions/no-bins/no-bins';
-import { MapLegend } from '../map-legend-base';
-
-export type DiscontinuousAttributeDataDimensionConfig<Datum> = Exclude<
-  VicAttributeDataDimensionConfig<Datum>,
-  NoBinsAttributeDataDimension<Datum>
->;
-
-@Component({
-  selector: 'vic-discontinuous-legend',
-  templateUrl: './discontinuous-legend.component.html',
-  styleUrls: ['./discontinuous-legend.component.scss'],
-  imports: [CommonModule],
-})
-export class DiscontinuousLegendComponent<Datum> extends MapLegend<
-  Datum,
-  DiscontinuousAttributeDataDimensionConfig<Datum>
-> {
-  getValuesFromScale(): string[] | number[] {
-    if (this.config.binType === BinStrategy.categorical) {
-      return this.config.getDomain();
-    } else {
-      return this.getQuantitativeValuesFromScale();
-    }
-  }
-
-  getQuantitativeValuesFromScale(): number[] {
-    const binColors = this.config.range;
-    const values =
-      this.config.binType === BinStrategy.customBreaks
-        ? this.config.breakValues
-        : [
-            ...new Set(
-              binColors.map((colors) => this.scale.invertExtent(colors)).flat()
-            ),
-          ];
-    return values;
-  }
-
-  getLeftOffset(values: string[]): number {
-    if (this.orientation === Orientation.horizontal) {
-      const colorHalfWidth = this.width / (values.length * 2);
-      if (colorHalfWidth > this.largerValueSpace) {
-        return (colorHalfWidth - this.startValueSpace) * -1;
-      } else {
-        return (this.largerValueSpace - this.startValueSpace) * -1;
-      }
-    } else {
-      return 0;
-    }
-  }
-}

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

@@ -1,2 +0,0 @@
-export * from './map-legend.component';
-export * from './map-legend.module';