@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/bars/config/labels/bars-labels.ts

@@ -0,0 +1,13 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { BarsLabelsOptions } from './bars-labels-options';
+
+export class BarsLabels<Datum> implements BarsLabelsOptions<Datum> {
+  color: { default: string; withinBarAlternative: string };
+  display: boolean;
+  noValueFunction: (d: Datum) => string;
+  offset: number;
+
+  constructor(options: BarsLabels<Datum>) {
+    safeAssign(this, options);
+  }
+}

package/src/lib/bars/events/actions/bars-click-actions.ts

@@ -0,0 +1,23 @@
+import { DataValue } from '../../../core/types/values';
+import { EventAction, EventType } from '../../../events';
+import { BarsHost } from '../bars-events.directive';
+import { BarsInteractionOutput } from '../bars-interaction-output';
+
+export class BarsClickEmitTooltipDataPauseOtherActions<
+  Datum,
+  TOrdinalValue extends DataValue,
+> implements EventAction<
+  BarsHost<Datum, TOrdinalValue>,
+  BarsInteractionOutput<Datum>
+> {
+  onStart(host: BarsHost<Datum, TOrdinalValue>) {
+    const output = host.getInteractionOutput(EventType.Click);
+    host.disableOtherActions(EventType.Click);
+    host.emitInteractionOutput(output);
+  }
+
+  onEnd(host: BarsHost<Datum, TOrdinalValue>) {
+    host.resumeOtherActions(EventType.Click);
+    host.emitInteractionOutput(null);
+  }
+}

package/src/lib/bars/events/actions/bars-hover-actions.ts

@@ -0,0 +1,43 @@
+import { DataValue } from '../../../core/types/values';
+import { EventAction, EventType } from '../../../events';
+import { BarsHost } from '../bars-events.directive';
+import { BarsInteractionOutput } from '../bars-interaction-output';
+
+export class BarsHoverShowLabels<
+  Datum,
+  TOrdinalValue extends DataValue,
+> implements EventAction<
+  BarsHost<Datum, TOrdinalValue>,
+  BarsInteractionOutput<Datum>
+> {
+  onStart(host: BarsHost<Datum, TOrdinalValue>): void {
+    host.marks.barGroups
+      .filter((d) => d === host.getBarDatum().index)
+      .select('text')
+      .style('display', null);
+  }
+
+  onEnd(host: BarsHost<Datum, TOrdinalValue>): void {
+    host.marks.barGroups
+      .filter((d) => d === host.getBarDatum().index)
+      .select('text')
+      .style('display', 'none');
+  }
+}
+
+export class BarsHoverEmitTooltipData<
+  Datum,
+  TOrdinalValue extends DataValue,
+> implements EventAction<
+  BarsHost<Datum, TOrdinalValue>,
+  BarsInteractionOutput<Datum>
+> {
+  onStart(host: BarsHost<Datum, TOrdinalValue>): void {
+    const output = host.getInteractionOutput(EventType.Hover);
+    host.emitInteractionOutput(output);
+  }
+
+  onEnd(host: BarsHost<Datum, TOrdinalValue>): void {
+    host.emitInteractionOutput(null);
+  }
+}

package/src/lib/bars/events/actions/bars-hover-move-actions.ts

@@ -0,0 +1,21 @@
+import { DataValue } from '../../../core/types/values';
+import { EventType, HoverMoveAction } from '../../../events';
+import { BarsHost } from '../bars-events.directive';
+import { BarsInteractionOutput } from '../bars-interaction-output';
+
+export class BarsHoverMoveEmitTooltipData<
+  Datum,
+  TOrdinalValue extends DataValue,
+> implements HoverMoveAction<
+  BarsHost<Datum, TOrdinalValue>,
+  BarsInteractionOutput<Datum>
+> {
+  onStart(host: BarsHost<Datum, TOrdinalValue>): void {
+    const output = host.getInteractionOutput(EventType.HoverMove);
+    host.emitInteractionOutput(output);
+  }
+
+  onEnd(host: BarsHost<Datum, TOrdinalValue>): void {
+    host.emitInteractionOutput(null);
+  }
+}

package/src/lib/bars/events/bars-events.directive.spec.ts

@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Renderer2 } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { select } from 'd3';
+import { of } from 'rxjs';
+import { EventType } from '../../events';
+import { BARS } from '../bars.component';
+import { BarsEventsDirective } from './bars-events.directive';
+
+describe('BarsEventsDirective', () => {
+  let directive: BarsEventsDirective<any, any, any>;
+  let barsStub: any;
+
+  beforeEach(() => {
+    barsStub = {
+      bars$: of(select(document.createElement('rect'))),
+      getSourceDatumFromBarDatum: () => ({ id: 1 }),
+      getTooltipData: (datum: any) => ({ foo: 'bar', datum }),
+    };
+    TestBed.configureTestingModule({
+      providers: [
+        BarsEventsDirective,
+        Renderer2,
+        { provide: BARS, useValue: barsStub },
+      ],
+    });
+    directive = TestBed.inject(BarsEventsDirective);
+    directive.bars = barsStub;
+  });
+
+  it('should get elements from bars$', (done) => {
+    directive.getElements().subscribe((els) => {
+      expect(Array.isArray(els)).toBeTrue();
+      expect(els[0] instanceof Element).toBeTrue();
+      done();
+    });
+  });
+
+  it('should call initFromElement and run hoverActions on onEnter (Hover)', () => {
+    const el = document.createElement('rect');
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.hoverActions = [action];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Hover;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    spyOn(directive, 'setPositionsFromElement');
+    directive.onEnter({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(directive.setPositionsFromElement).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call runActions with hoverMoveActions on onEnter (HoverMove)', () => {
+    const el = document.createElement('rect');
+    const action = { initialize: jasmine.createSpy('initialize') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    directive.onEnter({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(action.initialize).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromPointer and run onStart for each hoverMoveAction on onMove', () => {
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive, 'setPositionsFromPointer');
+    directive.onMove({} as PointerEvent, {} as Element);
+    expect(directive.setPositionsFromPointer).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverAction on onLeave (Hover)', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverActions = [action];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Hover;
+    spyOn(directive as any, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverMoveAction on onLeave (HoverMove)', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive as any, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromElement and run clickActions on onClick if not prevented and has Hover', () => {
+    const el = document.createElement('rect');
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    (directive as any).hasEvent = (type: any) => type === EventType.Hover;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    spyOn(directive, 'setPositionsFromElement');
+    directive.onClick({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(directive.setPositionsFromElement).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromPointer and run clickActions on onClick if not prevented and no Hover', () => {
+    const el = document.createElement('rect');
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    (directive as any).hasEvent = () => false;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    spyOn(directive, 'setPositionsFromPointer');
+    directive.onClick({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(directive.setPositionsFromPointer).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should run onEnd for each clickAction and resetDirective on onClickRemove if not prevented', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    spyOn(directive as any, 'resetDirective');
+    directive.onClickRemove();
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverAction on onLeave (Hover)', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverActions = [action];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Hover;
+    spyOn(directive as any, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverMoveAction on onLeave (HoverMove)', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive as any, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should emit interaction output', () => {
+    spyOn(directive.interactionOutput, 'emit');
+    const output = {
+      origin: {} as any,
+      positionX: 1,
+      positionY: 2,
+      type: EventType.Hover,
+      datum: {},
+      color: 'red',
+      values: { x: '1', y: '2', category: 'red' },
+    };
+    directive.emitInteractionOutput(output as any);
+    expect(directive.interactionOutput.emit).toHaveBeenCalledWith(
+      output as any
+    );
+  });
+});

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

@@ -0,0 +1,235 @@
+import { Directive, EventEmitter, inject, Input, Output } from '@angular/core';
+import { select } from 'd3';
+import { map, Observable } from 'rxjs';
+import { DataValue } from '../../core/types/values';
+import {
+  DEFAULT_TOOLTIP_Y_OFFSET,
+  EventAction,
+  EventsDirective,
+  EventType,
+  HoverMoveAction,
+  InputEventAction,
+  MarksHost,
+  UnlistenFunction,
+} from '../../events';
+import { TooltipPosition } from '../../tooltips';
+import { BarDatum, BARS, BarsComponent } from '../bars.component';
+import { BarsInteractionOutput } from './bars-interaction-output';
+import { BarsTooltipPositioner } from './bars-tooltip-positioner';
+
+export interface BarsHost<
+  Datum,
+  TOrdinalValue extends DataValue,
+  TBarsComponent extends BarsComponent<Datum, TOrdinalValue> = BarsComponent<
+    Datum,
+    TOrdinalValue
+  >,
+> extends MarksHost<BarsInteractionOutput<Datum>, TBarsComponent> {
+  getBarDatum(): BarDatum<TOrdinalValue> | null;
+}
+
+@Directive({
+  selector: '[vicBarsEvents]',
+})
+export class BarsEventsDirective<
+  Datum,
+  TOrdinalValue extends DataValue,
+  TBarsComponent extends BarsComponent<Datum, TOrdinalValue> = BarsComponent<
+    Datum,
+    TOrdinalValue
+  >,
+>
+  extends EventsDirective<BarsHost<Datum, TOrdinalValue>>
+  implements BarsHost<Datum, TOrdinalValue, TBarsComponent>
+{
+  @Input()
+  hoverActions:
+    | EventAction<
+        BarsHost<Datum, TOrdinalValue>,
+        BarsInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  hoverMoveActions:
+    | HoverMoveAction<
+        BarsHost<Datum, TOrdinalValue>,
+        BarsInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  clickActions:
+    | EventAction<
+        BarsHost<Datum, TOrdinalValue>,
+        BarsInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  inputEventActions: InputEventAction<
+    BarsHost<Datum, TOrdinalValue>,
+    BarsInteractionOutput<Datum>
+  >[];
+  @Output() interactionOutput =
+    new EventEmitter<BarsInteractionOutput<Datum> | null>();
+
+  barDatum: BarDatum<TOrdinalValue>;
+  origin: SVGRectElement;
+
+  public bars = inject<TBarsComponent>(BARS);
+
+  get marks(): TBarsComponent {
+    return this.bars;
+  }
+
+  getElements(): Observable<Element[]> {
+    return this.bars.bars$.pipe(map((sel) => sel.nodes()));
+  }
+
+  getBarDatum(): BarDatum<TOrdinalValue> | null {
+    return this.barDatum ?? null;
+  }
+
+  setupListeners(elements: Element[]): UnlistenFunction[] {
+    if (this.inputEventActions?.length && this.inputEvent$) {
+      this.events.push(EventType.Input);
+    }
+
+    return this.bindEventListeners(
+      elements,
+      this.buildInteractionListeners({
+        hover: this.hoverActions?.length && {
+          pointerenter: (e, el) => this.onEnter(e, el),
+          pointerleave: (e, el) => this.onLeave(e, el),
+        },
+        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),
+        },
+      })
+    );
+  }
+
+  onEnter(_: PointerEvent, el: Element): void {
+    this.initFromElement(el);
+    if (this.isEventAllowed(EventType.Hover)) {
+      this.setPositionsFromElement();
+      this.runActions(this.hoverActions, (a) => a.onStart(this.asHost()));
+    } else 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);
+      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.Hover)) {
+      this.hoverActions.forEach((action) => action.onEnd(this.asHost()));
+    } else if (this.isEventAllowed(EventType.HoverMove)) {
+      this.hoverMoveActions.forEach((action) => action.onEnd(this.asHost()));
+    }
+    this.resetDirective();
+  }
+
+  onClick(event: PointerEvent, el: Element): void {
+    this.initFromElement(el);
+    if (!this.preventAction.click) {
+      if (this.hasEvent(EventType.Hover)) {
+        this.setPositionsFromElement();
+      } else {
+        this.setPositionsFromPointer(event);
+      }
+      this.runActions(this.clickActions, (a) => a.onStart(this.asHost()));
+    }
+  }
+
+  onClickRemove(): void {
+    if (!this.preventAction.click) {
+      this.runActions(this.clickActions, (a) => a.onEnd(this.asHost()));
+      this.resetDirective();
+    }
+  }
+
+  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)
+        );
+      }
+    }
+  }
+
+  initFromElement(el: Element): void {
+    this.origin = el as SVGRectElement;
+    this.barDatum = select(
+      el as SVGRectElement
+    ).datum() as BarDatum<TOrdinalValue>;
+  }
+
+  setPositionsFromElement(): void {
+    const barRect = this.origin.getBoundingClientRect();
+    this.positionX = barRect.width / 2;
+    this.positionY = barRect.height / 2;
+  }
+
+  getInteractionOutput(type: EventType): BarsInteractionOutput<Datum> {
+    const datum = this.bars.getSourceDatumFromBarDatum(this.barDatum);
+    const tooltipData = datum ? this.bars.getTooltipData(datum) : undefined;
+    const position = new BarsTooltipPositioner({
+      x: this.positionX,
+      y: this.positionY,
+    });
+
+    return {
+      ...tooltipData,
+      origin: this.origin,
+      anchor: {
+        x: this.positionX,
+        y: this.positionY,
+      },
+      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: BarsInteractionOutput<Datum> | null): void {
+    this.interactionOutput.emit(output);
+  }
+
+  private resetDirective(): void {
+    this.barDatum = undefined;
+    this.origin = undefined;
+    this.positionX = undefined;
+    this.positionY = undefined;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { InteractionOutput } from '../../events/interaction-output';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { BarsTooltipDatum } from '../bars.component';
+
+export interface BarsInteractionOutput<Datum>
+  extends BarsTooltipDatum<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/bars/events/bars-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 BarsTooltipPositioner 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/bars/index.d.ts → src/lib/bars/index.ts}

@@ -1,12 +1,18 @@
-export * from './bars.component';
-export * from './bars.module';
-export * from './config/bars-builder';
-export * from './config/bars-config';
-export * from './config/bars-options';
-export * from './config/labels/bars-labels';
-export * from './config/labels/bars-labels-options';
-export * from './events/actions/bars-click-actions';
-export * from './events/actions/bars-hover-actions';
-export * from './events/actions/bars-hover-move-actions';
-export * from './events/bars-events.directive';
-export * from './events/bars-interaction-output';
+export * from './bars.component';
+export * from './bars.module';
+export * from './config/backgrounds/bars-backgrounds';
+export * from './config/backgrounds/bars-backgrounds-builder';
+export * from './config/backgrounds/bars-backgrounds-options';
+export * from './config/bars-builder';
+export * from './config/bars-config';
+export * from './config/bars-dimensions';
+export * from './config/bars-options';
+export * from './config/labels/bars-labels';
+export * from './config/labels/bars-labels-builder';
+export * from './config/labels/bars-labels-options';
+export * from './events/actions/bars-click-actions';
+export * from './events/actions/bars-hover-actions';
+export * from './events/actions/bars-hover-move-actions';
+export * from './events/bars-events.directive';
+export * from './events/bars-interaction-output';
+export * from './events/bars-tooltip-positioner';