@mathstack/viz 2.1.0 → 2.2.0

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

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

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

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

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

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

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

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

@@ -1,24 +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 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/src/lib/bars/index.ts

@@ -1,18 +0,0 @@
-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';