@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/lines/events/lines-events.directive.ts

@@ -0,0 +1,310 @@
+import { Directive, EventEmitter, inject, Input, Output } from '@angular/core';
+import { least } from 'd3';
+import { Observable, of } from 'rxjs';
+import { ContinuousValue } from '../../core/types/values';
+import {
+  DEFAULT_TOOLTIP_Y_OFFSET,
+  EventAction,
+  EventsDirective,
+  EventType,
+  HoverMoveAction,
+  InputEventAction,
+  MarksHost,
+  UnlistenFunction,
+} from '../../events';
+import { TooltipPosition } from '../../tooltips';
+import { LinesMarkerDatum } from '../config/lines-config';
+import {
+  LINES,
+  LinesComponent,
+  LinesGroupSelection,
+  MarkerSelection,
+} from '../lines.component';
+import { LinesInteractionOutput } from './lines-interaction-output';
+import { LinesTooltipPositioner } from './lines-tooltip-positioner';
+
+export interface LinesHost<
+  Datum,
+  TLinesComponent extends LinesComponent<Datum> = LinesComponent<Datum>,
+> extends MarksHost<LinesInteractionOutput<Datum>, TLinesComponent> {
+  getClosestPointIndex(): number;
+  getClosestLineGroup(): LinesGroupSelection;
+  getOtherLineGroups(): LinesGroupSelection;
+  getClosestMarker(): MarkerSelection;
+  getOtherMarkers(): MarkerSelection;
+}
+
+@Directive({
+  selector: '[vicLinesEvents]',
+})
+export class LinesEventsDirective<
+  Datum,
+  TLinesComponent extends LinesComponent<Datum> = LinesComponent<Datum>,
+>
+  extends EventsDirective<LinesHost<Datum>>
+  implements LinesHost<Datum>
+{
+  @Input()
+  hoverMoveActions:
+    | HoverMoveAction<LinesHost<Datum>, LinesInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  clickActions:
+    | EventAction<LinesHost<Datum>, LinesInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  inputEventActions: InputEventAction<
+    LinesHost<Datum>,
+    LinesInteractionOutput<Datum>
+  >[];
+  @Output() interactionOutput = new EventEmitter<
+    LinesInteractionOutput<Datum>
+  >();
+
+  closestPointIndex: number;
+  actionActive: boolean = false;
+
+  public lines = inject<TLinesComponent>(LINES);
+
+  get marks(): LinesComponent<Datum> {
+    return this.lines;
+  }
+
+  getElements(): Observable<Element[]> {
+    return of([this.lines.chart.svgRef.nativeElement]);
+  }
+
+  getClosestPointIndex(): number {
+    return this.closestPointIndex;
+  }
+
+  getClosestLineGroup(): LinesGroupSelection {
+    return this.marks.lineGroups.filter(
+      ([category]) =>
+        this.marks.config.stroke.color.values[this.getClosestPointIndex()] ===
+        category
+    );
+  }
+
+  getOtherLineGroups(): LinesGroupSelection {
+    return this.marks.lineGroups.filter(
+      ([category]) =>
+        this.marks.config.stroke.color.values[this.getClosestPointIndex()] !==
+        category
+    );
+  }
+
+  getClosestMarker(): MarkerSelection {
+    return this.marks.lineGroups
+      .selectAll<SVGCircleElement, LinesMarkerDatum>('circle')
+      .filter((d) => d.index === this.getClosestPointIndex());
+  }
+
+  getOtherMarkers(): MarkerSelection {
+    return this.marks.lineGroups
+      .selectAll<SVGCircleElement, LinesMarkerDatum>('circle')
+      .filter((d) => d.index !== this.getClosestPointIndex());
+  }
+
+  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);
+        }
+      });
+    }
+  }
+
+  // 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.callPointerEventActions(
+          EventType.HoverMove,
+          this.hoverMoveActions
+        );
+      }
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onLeave(_: PointerEvent, __: Element): void {
+    if (this.isEventAllowed(EventType.HoverMove)) {
+      if (this.actionActive) {
+        this.hoverMoveActions.forEach((action) => action.onEnd(this));
+        this.actionActive = false;
+      }
+      this.resetDirective();
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onClick(event: PointerEvent, __: Element): void {
+    if (this.isEventAllowed(EventType.Click)) {
+      this.setPositionsFromPointer(event);
+      if (this.pointerIsInChartArea()) {
+        this.callPointerEventActions(EventType.Click, this.clickActions);
+      }
+    }
+  }
+
+  onClickRemove(): void {
+    if (this.isEventAllowed(EventType.Click)) {
+      this.clickActions.forEach((action) => action.onEnd(this));
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  onInputEvent(inputValue: unknown): void {
+    if (this.isEventAllowed(EventType.Input)) {
+      if (inputValue === null || inputValue === undefined) {
+        this.inputEventActions.forEach((action) =>
+          action.onEnd(this, inputValue)
+        );
+      } else {
+        this.inputEventActions.forEach((action) =>
+          action.onStart(this, inputValue)
+        );
+      }
+    }
+  }
+
+  pointerIsInChartArea(): boolean {
+    return (
+      this.positionX > this.lines.ranges.x[0] &&
+      this.positionX < this.lines.ranges.x[1] &&
+      this.positionY > this.lines.ranges.y[1] &&
+      this.positionY < this.lines.ranges.y[0]
+    );
+  }
+
+  private callPointerEventActions(
+    type: EventType,
+    actions: EventAction<this>[]
+  ): void {
+    if (!this.isEventAllowed(type)) return;
+
+    this.closestPointIndex = this._getClosestPointIndex();
+
+    const isInside = this.pointerIsInsideShowTooltipRadius(
+      this.closestPointIndex,
+      this.positionX,
+      this.positionY
+    );
+
+    if (isInside) {
+      actions.forEach((action) => action.onStart(this));
+      this.actionActive = true;
+    } else {
+      this.closestPointIndex = null;
+      if (this.actionActive) {
+        actions.forEach((action) => action.onEnd(this));
+        this.actionActive = false;
+      }
+    }
+  }
+
+  protected _getClosestPointIndex(): number {
+    return least(this.lines.config.valueIndices, (i) =>
+      this.getPointerDistanceFromPoint(
+        this.lines.config.x.values[i],
+        this.lines.config.y.values[i],
+        this.positionX,
+        this.positionY
+      )
+    );
+  }
+
+  getPointerDistanceFromPoint(
+    xValue: ContinuousValue,
+    yValue: number,
+    pointerX: number,
+    pointerY: number
+  ): number {
+    return Math.hypot(
+      this.lines.scales.x(xValue) - pointerX,
+      this.lines.scales.y(yValue) - pointerY
+    );
+  }
+
+  pointerIsInsideShowTooltipRadius(
+    closestPointIndex: number,
+    pointerX: number,
+    pointerY: number
+  ): boolean {
+    if (!this.lines.config.pointerDetectionRadius) {
+      return true;
+    } else {
+      const cursorDistanceFromPoint = this.getPointerDistanceFromPoint(
+        this.lines.config.x.values[closestPointIndex],
+        this.lines.config.y.values[closestPointIndex],
+        pointerX,
+        pointerY
+      );
+      return cursorDistanceFromPoint < this.lines.config.pointerDetectionRadius;
+    }
+  }
+
+  setPositionsFromElement(): void {
+    return;
+  }
+
+  getInteractionOutput(type: EventType): LinesInteractionOutput<Datum> {
+    const tooltipData = this.lines.getTooltipData(this.closestPointIndex);
+    const position = new LinesTooltipPositioner({
+      x: tooltipData.anchor.x,
+      y: tooltipData.anchor.y,
+    });
+
+    return {
+      ...tooltipData,
+      defaultPosition: position.fromAnchor({
+        x: 0,
+        y: DEFAULT_TOOLTIP_Y_OFFSET,
+      }),
+      fromAnchor: (offset?: Partial<{ x: number; y: number }>) => {
+        return position.fromAnchor({
+          x: offset?.x ?? 0,
+          y: offset?.y ?? DEFAULT_TOOLTIP_Y_OFFSET,
+        });
+      },
+      customPosition: (positions: TooltipPosition[]) => {
+        return position.customPosition(positions);
+      },
+      type,
+    };
+  }
+
+  emitInteractionOutput(output: LinesInteractionOutput<Datum>): void {
+    this.interactionOutput.emit(output);
+  }
+
+  private resetDirective(): void {
+    this.closestPointIndex = undefined;
+    this.positionX = undefined;
+    this.positionY = undefined;
+  }
+}

package/src/lib/lines/events/lines-interaction-output.ts

@@ -0,0 +1,17 @@
+import { InteractionOutput } from '../../events/interaction-output';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { LinesTooltipDatum } from '../lines.component';
+
+export interface LinesInteractionOutput<Datum>
+  extends LinesTooltipDatum<Datum>, InteractionOutput {
+  /**
+   * 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: (
+    offset?: Partial<{ x: number; y: number }>
+  ) => HtmlTooltipCdkManagedPosition;
+}

package/src/lib/lines/events/lines-tooltip-positioner.ts

@@ -0,0 +1,24 @@
+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 LinesTooltipPositioner extends TooltipPositioner {
+  constructor(private anchor: { x: number; y: number }) {
+    super();
+  }
+
+  fromAnchor(offset: { x: number; y: number }): HtmlTooltipCdkManagedPosition {
+    const positionsWithOffsets = new TooltipPositionBuilder().applyOffsets(
+      DEFAULT_POSITIONS,
+      this.anchor.x + offset.x,
+      this.anchor.y - offset.y
+    );
+    return new HtmlTooltipCdkManagedPosition(positionsWithOffsets);
+  }
+}

package/{lib/lines/index.d.ts → src/lib/lines/index.ts}

@@ -1,11 +1,17 @@
-export * from './config/lines-builder';
-export * from './config/lines-config';
-export * from './config/lines-options';
-export * from './events/actions/lines-click-actions';
-export * from './events/actions/lines-hover-move-actions';
-export * from './events/actions/lines-marker-click-actions';
-export * from './events/lines-events.directive';
-export * from './events/lines-interaction-output';
-export * from './events/lines-tooltip-positioner';
-export * from './lines.component';
-export * from './lines.module';
+export * from './config/area-fills/area-fills';
+export * from './config/area-fills/area-fills-builder';
+export * from './config/area-fills/area-fills-options';
+export * from './config/lines-builder';
+export * from './config/lines-config';
+export * from './config/lines-options';
+export * from './config/stroke/lines-stroke';
+export * from './config/stroke/lines-stroke-builder';
+export * from './config/stroke/lines-stroke-options';
+export * from './events/actions/lines-click-actions';
+export * from './events/actions/lines-hover-move-actions';
+export * from './events/actions/lines-marker-click-actions';
+export * from './events/lines-events.directive';
+export * from './events/lines-interaction-output';
+export * from './events/lines-tooltip-positioner';
+export * from './lines.component';
+export * from './lines.module';

package/src/lib/lines/lines.component.spec.ts

@@ -0,0 +1,95 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { XyChartComponent } from '../charts/xy-chart/xy-chart.component';
+import { VicLinesConfigBuilder } from './config/lines-builder';
+import { LinesComponent } from './lines.component';
+
+describe('LinesComponent', () => {
+  let component: LinesComponent<any>;
+  let fixture: ComponentFixture<LinesComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [LinesComponent],
+      providers: [XyChartComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinesComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('drawMarks()', () => {
+    const duration = 50;
+    beforeEach(() => {
+      spyOn(component, 'setLine');
+      spyOn(component, 'getTransitionDuration').and.returnValue(duration);
+      spyOn(component, 'drawLines');
+      spyOn(component, 'drawPointMarkers');
+      spyOn(component, 'drawLineLabels');
+      component.config = new VicLinesConfigBuilder()
+        .data([])
+        .xDate((dimension) => dimension.valueAccessor(() => null as any))
+        .y((dimension) => dimension.valueAccessor(() => null as any))
+        .stroke((stroke) =>
+          stroke.color((dimension) =>
+            dimension.valueAccessor(() => null as any)
+          )
+        )
+        .getConfig();
+    });
+    it('calls setLine once', () => {
+      component.drawMarks();
+      expect(component.setLine).toHaveBeenCalledTimes(1);
+    });
+    it('calls getTransitionDuration once', () => {
+      component.drawMarks();
+      expect(component.getTransitionDuration).toHaveBeenCalledTimes(1);
+    });
+    it('calls drawLines once and with the correct argument', () => {
+      component.drawMarks();
+      expect(component.drawLines).toHaveBeenCalledOnceWith(duration);
+    });
+    it('calls drawPointMarkers once with the correct argument if config.pointMarkers is truthy', () => {
+      component.config = new VicLinesConfigBuilder()
+        .data([])
+        .xDate((dimension) => dimension.valueAccessor(() => null as any))
+        .y((dimension) => dimension.valueAccessor(() => null as any))
+        .stroke((stroke) =>
+          stroke.color((dimension) =>
+            dimension.valueAccessor(() => null as any)
+          )
+        )
+        .pointMarkers()
+        .getConfig();
+      component.drawMarks();
+      expect(component.drawPointMarkers).toHaveBeenCalledOnceWith(duration);
+    });
+    it('does not call drawPointMarkers once if config.pointMarkers is undefined', () => {
+      component.drawMarks();
+      expect(component.drawPointMarkers).toHaveBeenCalledTimes(0);
+    });
+    it('calls drawLineLabels once if config.labelLines is true', () => {
+      component.config = new VicLinesConfigBuilder()
+        .data([])
+        .xDate((dimension) => dimension.valueAccessor(() => null as any))
+        .y((dimension) => dimension.valueAccessor(() => null as any))
+        .stroke((stroke) =>
+          stroke.color((dimension) =>
+            dimension.valueAccessor(() => null as any)
+          )
+        )
+        .labelLines(true)
+        .getConfig();
+      component.drawMarks();
+      expect(component.drawLineLabels).toHaveBeenCalledTimes(1);
+    });
+    it('does not call drawLineLabels once if config.labelLines is false', () => {
+      component.drawMarks();
+      expect(component.drawLineLabels).toHaveBeenCalledTimes(0);
+    });
+  });
+});