@mathstack/viz 2.1.0 → 2.2.1

package/src/lib/stacked-area/events/stacked-area-events.directive.ts

@@ -1,272 +0,0 @@
-import { Directive, EventEmitter, Input, Output, inject } from '@angular/core';
-import { InternSet, least } from 'd3';
-import { Observable, map } from 'rxjs';
-import { ContinuousValue, DataValue } from '../../core/types/values';
-import { isDate } from '../../core/utilities/type-guards';
-import {
-  DEFAULT_TOOLTIP_Y_OFFSET,
-  EventAction,
-  EventType,
-  EventsDirective,
-  HoverMoveAction,
-  InputEventAction,
-  MarksHost,
-  UnlistenFunction,
-} from '../../events';
-import { TooltipPosition } from '../../tooltips';
-import { STACKED_AREA, StackedAreaComponent } from '../stacked-area.component';
-import { StackedAreaInteractionOutput } from './stacked-area-interaction-output';
-import { StackedAreaTooltipPositioner } from './stacked-area-tooltip-positioner';
-
-export type StackedAreaHost<
-  Datum,
-  TCategoricalValue extends DataValue,
-  TStackedAreaComponent extends StackedAreaComponent<Datum, TCategoricalValue> =
-    StackedAreaComponent<Datum, TCategoricalValue>,
-> = MarksHost<
-  StackedAreaInteractionOutput<Datum, TCategoricalValue>,
-  TStackedAreaComponent
->;
-
-@Directive({
-  selector: '[vicStackedAreaEvents]',
-})
-export class StackedAreaEventsDirective<
-  Datum,
-  TCategoricalValue extends DataValue,
-  TStackedAreaComponent extends StackedAreaComponent<Datum, TCategoricalValue> =
-    StackedAreaComponent<Datum, TCategoricalValue>,
->
-  extends EventsDirective<StackedAreaHost<Datum, TCategoricalValue>>
-  implements StackedAreaHost<Datum, TCategoricalValue>
-{
-  @Input()
-  hoverMoveActions:
-    | HoverMoveAction<
-        StackedAreaHost<Datum, TCategoricalValue>,
-        StackedAreaInteractionOutput<Datum, TCategoricalValue>
-      >[]
-    | null;
-  @Input()
-  clickActions:
-    | EventAction<
-        StackedAreaHost<Datum, TCategoricalValue>,
-        StackedAreaInteractionOutput<Datum, TCategoricalValue>
-      >[]
-    | null;
-  @Input()
-  inputEventActions: InputEventAction<
-    StackedAreaHost<Datum, TCategoricalValue>,
-    StackedAreaInteractionOutput<Datum, TCategoricalValue>
-  >[];
-  @Output() interactionOutput = new EventEmitter<StackedAreaInteractionOutput<
-    Datum,
-    TCategoricalValue
-  > | null>();
-
-  closestXIndicies: number[];
-  categoryYMin: number;
-  categoryYMax: number;
-  categoryIndex: number;
-
-  public stackedArea = inject<TStackedAreaComponent>(STACKED_AREA);
-
-  get marks(): StackedAreaComponent<Datum, TCategoricalValue> {
-    return this.stackedArea;
-  }
-
-  getElements(): Observable<Element[]> {
-    return this.stackedArea.stackedAreas$.pipe(map((sel) => sel.nodes()));
-  }
-
-  setupListeners(elements: Element[]): UnlistenFunction[] {
-    if (this.inputEventActions?.length && this.inputEvent$) {
-      this.events.push(EventType.Input);
-    }
-
-    return this.bindEventListeners(
-      elements,
-      this.buildInteractionListeners({
-        hoverMove: this.hoverMoveActions?.length && {
-          pointerenter: (e, el) => this.onEnter(e, el),
-          pointermove: (e, el) => this.onMove(e, el),
-          pointerleave: (e, el) => this.onLeave(e, el),
-        },
-        click: this.clickActions?.length && {
-          click: (e, el) => this.onClick(e, el),
-        },
-      })
-    );
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onEnter(_: PointerEvent, __: Element): void {
-    if (this.isEventAllowed(EventType.HoverMove)) {
-      this.runActions(this.hoverMoveActions, (a) => {
-        if (a.initialize) {
-          a.initialize(this.asHost());
-        }
-      });
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onMove(event: PointerEvent, _: Element): void {
-    if (this.isEventAllowed(EventType.HoverMove)) {
-      this.setPositionsFromPointer(event);
-      if (this.pointerIsInChartArea()) {
-        this.setClosestXIndicies();
-        this.setClosestDatumPosition();
-        this.hoverMoveActions.forEach((action) =>
-          action.onStart(this.asHost())
-        );
-      }
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onLeave(_: PointerEvent, __: Element): void {
-    if (this.isEventAllowed(EventType.HoverMove)) {
-      this.hoverMoveActions.forEach((action) => action.onEnd(this.asHost()));
-    }
-    this.resetDirective();
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onClick(event: PointerEvent, _: Element): void {
-    if (this.isEventAllowed(EventType.Click)) {
-      this.setPositionsFromPointer(event);
-      this.runActions(this.clickActions, (a) => a.onStart(this.asHost()));
-    }
-  }
-
-  onInputEvent(inputValue: unknown): void {
-    if (this.isEventAllowed(EventType.Input)) {
-      if (inputValue === null || inputValue === undefined) {
-        this.inputEventActions.forEach((action) =>
-          action.onEnd(this.asHost(), inputValue)
-        );
-      } else {
-        this.inputEventActions.forEach((action) =>
-          action.onStart(this.asHost(), inputValue)
-        );
-      }
-    }
-  }
-
-  onClickRemove(): void {
-    if (!this.preventAction.click) {
-      this.runActions(this.clickActions, (a) => a.onEnd(this.asHost()));
-      this.resetDirective();
-    }
-  }
-
-  setPositionsFromElement(): void {
-    return;
-  }
-
-  pointerIsInChartArea(): boolean {
-    return (
-      this.positionX > this.stackedArea.ranges.x[0] &&
-      this.positionX < this.stackedArea.ranges.x[1] &&
-      this.positionY > this.stackedArea.ranges.y[1] &&
-      this.positionY < this.stackedArea.ranges.y[0]
-    );
-  }
-
-  setClosestXIndicies(): void {
-    const uniqueXValues = [
-      ...new InternSet<ContinuousValue>(this.stackedArea.config.x.values),
-    ];
-    const closestXValue = least(uniqueXValues, (x) =>
-      Math.abs(this.stackedArea.scales.x(x) - this.positionX)
-    );
-    if (isDate(closestXValue)) {
-      this.closestXIndicies = this.stackedArea.config.valueIndices.filter(
-        (i) =>
-          (this.stackedArea.config.x.values[i] as Date).getTime() ===
-          closestXValue.getTime()
-      );
-    } else {
-      this.closestXIndicies = this.stackedArea.config.valueIndices.filter(
-        (i) => this.stackedArea.config.x.values[i] === closestXValue
-      );
-    }
-  }
-
-  setClosestDatumPosition(): void {
-    const dataAtXValue = this.stackedArea.config.series
-      .flatMap((strat) => strat)
-      .filter((d) => this.closestXIndicies.includes(d.i));
-    const coordinateData = dataAtXValue.map((d) => ({
-      categoryYMin: this.stackedArea.scales.y(d[1]),
-      categoryYMax: this.stackedArea.scales.y(d[0]),
-      i: d.i,
-    }));
-    const closestDatumIndex = coordinateData.findIndex(
-      (d) =>
-        this.positionY >= d.categoryYMin && this.positionY <= d.categoryYMax
-    );
-    let closestDatum;
-    if (closestDatumIndex !== -1) {
-      closestDatum = coordinateData[closestDatumIndex];
-    }
-    this.categoryYMin = closestDatum?.categoryYMin;
-    this.categoryYMax = closestDatum?.categoryYMax;
-    this.categoryIndex = closestDatum ? closestDatumIndex : undefined;
-  }
-
-  getInteractionOutput(
-    type: EventType
-  ): StackedAreaInteractionOutput<Datum, TCategoricalValue> {
-    const tooltipData = this.stackedArea.getTooltipData(
-      this.closestXIndicies,
-      this.categoryYMin,
-      this.categoryYMax,
-      this.categoryIndex
-    );
-    const position = new StackedAreaTooltipPositioner(tooltipData.anchor);
-
-    return {
-      ...tooltipData,
-      defaultPosition: position.fromAnchor('area', {
-        x: 0,
-        y: DEFAULT_TOOLTIP_Y_OFFSET,
-      }),
-      defaultPositionFromArea: position.fromAnchor('area', {
-        x: 0,
-        y: DEFAULT_TOOLTIP_Y_OFFSET,
-      }),
-      defaultPositionFromChart: position.fromAnchor('chart', {
-        x: 0,
-        y: DEFAULT_TOOLTIP_Y_OFFSET,
-      }),
-      fromAnchor: (
-        relativeTo: 'area' | 'chart',
-        offset?: Partial<{ x: number; y: number }>
-      ) => {
-        return position.fromAnchor(relativeTo, {
-          x: offset?.x ?? 0,
-          y: offset?.y ?? DEFAULT_TOOLTIP_Y_OFFSET,
-        });
-      },
-      customPosition: (positions: TooltipPosition[]) => {
-        return position.customPosition(positions);
-      },
-      type,
-    };
-  }
-
-  emitInteractionOutput(
-    output: StackedAreaInteractionOutput<Datum, TCategoricalValue>
-  ): void {
-    this.interactionOutput.emit(output);
-  }
-
-  resetDirective(): void {
-    this.closestXIndicies = [];
-    this.categoryYMin = undefined;
-    this.categoryYMax = undefined;
-    this.categoryIndex = undefined;
-  }
-}

package/src/lib/stacked-area/events/stacked-area-interaction-output.ts

@@ -1,33 +0,0 @@
-import { DataValue } from '../../core/types/values';
-import { InteractionOutput } from '../../events/interaction-output';
-import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
-import { StackedAreaTooltipDatum } from '../stacked-area.component';
-
-export interface StackedAreaInteractionAnchor {
-  x: number;
-  yAreaTop: number;
-  yAreaBottom: number;
-  yChartTop: number;
-  yChartBottom: number;
-}
-
-export interface StackedAreaInteractionOutput<
-  Datum,
-  TCategoricalValue extends DataValue,
-> extends InteractionOutput<StackedAreaInteractionAnchor> {
-  data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[];
-  hoveredAreaDatum: StackedAreaTooltipDatum<Datum, TCategoricalValue>;
-  defaultPositionFromArea: HtmlTooltipCdkManagedPosition;
-  defaultPositionFromChart: HtmlTooltipCdkManagedPosition;
-  /**
-   * A method that positions the tooltip with a user specified offset from the tooltip's anchor point.
-   *
-   * @param offset - Optional offset from the anchor's x and y position.
-   * If not provided, defaults to { x: 0, y: 0 }.
-   * If provided, the x value is added to the anchor's x position (moves tooltip right) and the y value is subtracted from the anchor's y position (moves tooltip up).
-   */
-  fromAnchor: (
-    relativeTo: 'area' | 'chart',
-    offset?: Partial<{ x: number; y: number }>
-  ) => HtmlTooltipCdkManagedPosition;
-}

package/src/lib/stacked-area/events/stacked-area-tooltip-positioner.ts

@@ -1,37 +0,0 @@
-import { TooltipPositioner } from '../../events/tooltip-positioner';
-import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
-import { TooltipPositionBuilder } from '../../tooltips/html-tooltip/config/position/tooltip-position-builder';
-
-const DEFAULT_POSITIONS = [
-  new TooltipPositionBuilder().fromTopLeft().attachBottomCenter().getPosition(),
-  new TooltipPositionBuilder().fromTopLeft().attachBottomLeft().getPosition(),
-  new TooltipPositionBuilder().fromTopLeft().attachBottomRight().getPosition(),
-];
-
-export class StackedAreaTooltipPositioner extends TooltipPositioner {
-  constructor(
-    private anchor: {
-      x: number;
-      yAreaTop: number;
-      yAreaBottom: number;
-      yChartTop: number;
-      yChartBottom: number;
-    }
-  ) {
-    super();
-  }
-
-  fromAnchor(
-    relativeTo: 'area' | 'chart',
-    offset: { x: number; y: number }
-  ): HtmlTooltipCdkManagedPosition {
-    const positionsWithOffsets = new TooltipPositionBuilder().applyOffsets(
-      DEFAULT_POSITIONS,
-      this.anchor.x + offset.x,
-      relativeTo === 'area'
-        ? this.anchor.yAreaTop - offset.y
-        : this.anchor.yChartTop - offset.y
-    );
-    return new HtmlTooltipCdkManagedPosition(positionsWithOffsets);
-  }
-}

package/src/lib/stacked-area/index.ts

@@ -1,7 +0,0 @@
-export * from './config/stacked-area-builder';
-export * from './config/stacked-area-config';
-export * from './config/stacked-area-options';
-export * from './events/actions/stacked-area-hover-move-actions';
-export * from './events/stacked-area-events.directive';
-export * from './stacked-area.component';
-export * from './stacked-area.module';

package/src/lib/stacked-area/stacked-area.component.spec.ts

@@ -1,41 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { XyChartComponent } from '../charts/xy-chart/xy-chart.component';
-import { VicStackedAreaConfigBuilder } from './config/stacked-area-builder';
-import { StackedAreaComponent } from './stacked-area.component';
-
-type Datum = { date: Date; value: number; category: string };
-
-describe('StackedAreaComponent', () => {
-  let component: StackedAreaComponent<any, string>;
-  let fixture: ComponentFixture<StackedAreaComponent<any, string>>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [StackedAreaComponent],
-      providers: [XyChartComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(StackedAreaComponent<any, string>);
-    component = fixture.componentInstance;
-    component.config = new VicStackedAreaConfigBuilder<Datum, string>()
-      .data([
-        { date: new Date('2020-01-01'), value: 1, category: 'a' },
-        { date: new Date('2020-01-02'), value: 2, category: 'a' },
-        { date: new Date('2020-01-03'), value: 3, category: 'a' },
-        { date: new Date('2020-01-01'), value: 4, category: 'b' },
-        { date: new Date('2020-01-02'), value: 5, category: 'b' },
-        { date: new Date('2020-01-03'), value: 6, category: 'b' },
-      ])
-      .y((dimension) => dimension.valueAccessor((d) => d.value))
-      .xDate((dimension) => dimension.valueAccessor((d) => d.date))
-      .color((dimension) => dimension.valueAccessor((d) => d.category))
-      .getConfig();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/stacked-area/stacked-area.component.ts

@@ -1,241 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  inject,
-  InjectionToken,
-  NgZone,
-} from '@angular/core';
-import { area, select, Selection, Transition } from 'd3';
-import { BehaviorSubject, filter } from 'rxjs';
-import { ChartComponent, XyChartComponent, XyChartScales } from '../charts';
-import { GenericScale } from '../core';
-import { DataValue } from '../core/types/values';
-import { ValueUtilities } from '../core/utilities/values';
-import { VIC_PRIMARY_MARKS } from '../marks/primary-marks/primary-marks';
-import { VicXyPrimaryMarks } from '../marks/xy-marks/xy-primary-marks/xy-primary-marks';
-import {
-  StackedAreaConfig,
-  StackedAreaDatum,
-} from './config/stacked-area-config';
-import { StackedAreaInteractionAnchor } from './events/stacked-area-interaction-output';
-
-// Ideally we would be able to use generic T with the component, but Angular doesn't yet support this, so we use unknown instead
-// https://github.com/angular/angular/issues/46815, https://github.com/angular/angular/pull/47461
-export const STACKED_AREA = new InjectionToken<
-  StackedAreaComponent<unknown, DataValue>
->('StackedAreaComponent');
-
-export interface StackedAreaTooltipDatum<
-  Datum,
-  TCategoricalValue extends DataValue,
-> {
-  datum: Datum;
-  color: string;
-  values: {
-    x: string;
-    y: string;
-    color: TCategoricalValue;
-  };
-}
-
-type StackedAreaSvgElements = 'area';
-
-export type StackedAreaSelection<CategoricalDomain> = Selection<
-  SVGPathElement,
-  StackedAreaDatum<CategoricalDomain>,
-  SVGGElement,
-  unknown
->;
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: '[vic-primary-marks-stacked-area]',
-  template: '',
-  styleUrls: ['./stacked-area.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    { provide: VIC_PRIMARY_MARKS, useExisting: StackedAreaComponent },
-    { provide: STACKED_AREA, useExisting: StackedAreaComponent },
-    { provide: ChartComponent, useExisting: XyChartComponent },
-  ],
-  host: {
-    '[class]': 'config.marksClass',
-  },
-})
-export class StackedAreaComponent<
-  Datum,
-  TCategoricalValue extends DataValue,
-> extends VicXyPrimaryMarks<
-  Datum,
-  StackedAreaConfig<Datum, TCategoricalValue>
-> {
-  area;
-  areas;
-  stackedAreas: BehaviorSubject<StackedAreaSelection<TCategoricalValue>> =
-    new BehaviorSubject(null);
-  stackedAreas$ = this.stackedAreas.asObservable().pipe(filter((s) => !!s));
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  override scales: { color: GenericScale<any, any> } & XyChartScales = {
-    x: undefined,
-    y: undefined,
-    color: undefined,
-    useTransition: undefined,
-  };
-  protected elRef = inject<ElementRef<SVGSVGElement>>(ElementRef);
-  private zone = inject(NgZone);
-
-  get class(): Record<StackedAreaSvgElements, string> {
-    return {
-      area: this.config.marksClass + '-area',
-    };
-  }
-
-  setChartScalesFromRanges(useTransition: boolean): void {
-    const x = this.config.x.getScaleFromRange(this.ranges.x);
-    const y = this.config.y.getScaleFromRange(this.ranges.y);
-    this.scales.color = this.config.color.getScale();
-    this.zone.run(() => {
-      this.chart.updateScales({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        x: x as unknown as GenericScale<any, any>,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        y: y as unknown as GenericScale<any, any>,
-        useTransition,
-      });
-    });
-  }
-
-  drawMarks(): void {
-    const transitionDuration = this.getTransitionDuration();
-    this.setArea();
-    this.drawAreas(transitionDuration);
-    this.updateStackedAreaElements();
-  }
-
-  setArea(): void {
-    this.area = area()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .x(({ i }: any) => this.scales.x(this.config.x.values[i]))
-      .y0(([y1]) => this.scales.y(y1))
-      .y1(([, y2]) => this.scales.y(y2))
-      .curve(this.config.curve);
-  }
-
-  drawAreas(transitionDuration: number): void {
-    const t = select(this.chart.svgRef.nativeElement)
-      .transition()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .duration(transitionDuration) as Transition<SVGSVGElement, any, any, any>;
-
-    this.areas = select(this.elRef.nativeElement)
-      .selectAll(`.${this.class.area}`)
-      .data(this.config.series)
-      .join(
-        (enter) =>
-          enter
-            .append('path')
-            .attr(
-              'class',
-              ([{ i }]) =>
-                `${this.class.area} ${this.config.datumClass(this.config.data[i], i)}`
-            )
-            // .property('key', ([{ i }]) => this.config.color.values[i])
-            .attr('fill', ([{ i }]) =>
-              this.scales.color(this.config.color.values[i])
-            )
-            .attr('d', this.area),
-        (update) =>
-          update.call((update) =>
-            update
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              .transition(t as any)
-              .attr('d', this.area)
-              .attr('fill', ([{ i }]) =>
-                this.scales.color(this.config.color.values[i])
-              )
-          ),
-        (exit) => exit.remove()
-      );
-  }
-
-  getTooltipData(
-    closestXIndicies: number[],
-    categoryYMin: number,
-    categoryYMax: number,
-    categoryIndex: number
-  ): {
-    anchor: StackedAreaInteractionAnchor;
-    data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[];
-    hoveredAreaDatum: StackedAreaTooltipDatum<Datum, TCategoricalValue>;
-    origin: SVGGraphicsElement;
-  } {
-    const data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[] =
-      closestXIndicies.map((i) => {
-        const datum = this.getDatumFromIndex(i);
-        return {
-          datum: datum,
-          values: {
-            x: this.getXyDimensionValue(datum, 'x'),
-            y: this.getXyDimensionValue(datum, 'y'),
-            color: this.config.color.valueAccessor(datum),
-          },
-          color: this.scales.color(this.config.color.valueAccessor(datum)),
-        };
-      });
-    if (this.config.categoricalOrder) {
-      this.sortTooltipDataByCategoricalSortOrder(data);
-      categoryIndex = closestXIndicies.length - categoryIndex;
-    }
-
-    return {
-      data,
-      anchor: {
-        x: this.scales.x(this.config.x.values[closestXIndicies[0]]),
-        yAreaTop: categoryYMin,
-        yAreaBottom: categoryYMax,
-        yChartTop: this.scales.y.range()[0],
-        yChartBottom: this.scales.y.range()[1],
-      },
-      hoveredAreaDatum: data[categoryIndex],
-      origin: this.chart.svgRef.nativeElement,
-    };
-  }
-
-  private getDatumFromIndex(i: number) {
-    return this.config.data.find(
-      (d) =>
-        this.config.x.valueAccessor(d) === this.config.x.values[i] &&
-        this.config.color.valueAccessor(d) === this.config.color.values[i]
-    );
-  }
-
-  private getXyDimensionValue(datum: Datum, dimension: 'x' | 'y'): string {
-    return this.config[dimension].formatFunction
-      ? ValueUtilities.customFormat(
-          datum,
-          this.config[dimension].formatFunction
-        )
-      : ValueUtilities.d3Format(
-          this.config[dimension].valueAccessor(datum),
-          this.config[dimension].formatSpecifier
-        );
-  }
-
-  private sortTooltipDataByCategoricalSortOrder(
-    data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[]
-  ) {
-    if (this.config.categoricalOrder) {
-      data.sort((a, b) => {
-        return (
-          this.config.categoricalOrder.indexOf(a.values.color) -
-          this.config.categoricalOrder.indexOf(b.values.color)
-        );
-      });
-    }
-  }
-
-  updateStackedAreaElements(): void {
-    this.stackedAreas.next(this.areas);
-  }
-}

package/src/lib/stacked-area/stacked-area.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { StackedAreaEventsDirective } from './events/stacked-area-events.directive';
-import { StackedAreaComponent } from './stacked-area.component';
-
-@NgModule({
-  imports: [StackedAreaComponent, StackedAreaEventsDirective],
-  exports: [StackedAreaComponent, StackedAreaEventsDirective],
-})
-export class VicStackedAreaModule {}