@mathstack/viz 1.1.5 → 2.1.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+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/{lib/map-legend/index.d.ts → src/lib/map-legend/index.ts}

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