@mathstack/viz 1.1.5 → 2.0.3

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

@@ -0,0 +1,240 @@
+import { Directive, EventEmitter, inject, Input, Output } from '@angular/core';
+import { pointer, select } from 'd3';
+import { map, Observable } from 'rxjs';
+import { BarsInteractionOutput } from '../../bars';
+import { BarsTooltipPositioner } from '../../bars/events/bars-tooltip-positioner';
+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 {
+  StackDatum,
+  STACKED_BARS,
+  StackedBarsComponent,
+} from '../stacked-bars.component';
+
+export interface StackedBarsHost<
+  Datum,
+  TOrdinalValue extends DataValue,
+  TStackedBarsComponent extends StackedBarsComponent<Datum, TOrdinalValue> =
+    StackedBarsComponent<Datum, TOrdinalValue>,
+> extends MarksHost<BarsInteractionOutput<Datum>, TStackedBarsComponent> {
+  getStackDatum(): StackDatum | null;
+}
+
+@Directive({
+  selector: '[vicStackedBarsEvents]',
+})
+export class StackedBarsEventsDirective<
+  Datum,
+  TOrdinalValue extends DataValue,
+  TStackedBarsComponent extends StackedBarsComponent<Datum, TOrdinalValue> =
+    StackedBarsComponent<Datum, TOrdinalValue>,
+> extends EventsDirective<StackedBarsHost<Datum, TOrdinalValue>> {
+  @Input()
+  hoverActions:
+    | EventAction<
+        StackedBarsHost<Datum, TOrdinalValue>,
+        BarsInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  hoverMoveActions:
+    | HoverMoveAction<
+        StackedBarsHost<Datum, TOrdinalValue>,
+        BarsInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  clickActions:
+    | EventAction<
+        StackedBarsHost<Datum, TOrdinalValue>,
+        BarsInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  inputEventActions: InputEventAction<
+    StackedBarsHost<Datum, TOrdinalValue>,
+    BarsInteractionOutput<Datum>
+  >[];
+  @Output() interactionOutput =
+    new EventEmitter<BarsInteractionOutput<Datum> | null>();
+
+  stackDatum: StackDatum | null = null;
+  origin: SVGRectElement;
+
+  public stackedBars = inject<TStackedBarsComponent>(STACKED_BARS);
+
+  get marks(): TStackedBarsComponent {
+    return this.stackedBars;
+  }
+
+  getElements(): Observable<Element[]> {
+    return this.stackedBars.bars$.pipe(map((sel) => sel.nodes()));
+  }
+
+  getStackDatum(): StackDatum | null {
+    return this.stackDatum ?? 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.stackDatum = select(el as SVGRectElement).datum() as StackDatum;
+  }
+
+  setPositionsFromElement(): void {
+    const barRect = this.origin.getBoundingClientRect();
+    this.positionX = barRect.width / 2;
+    this.positionY = barRect.height / 2;
+  }
+
+  override setPositionsFromPointer(event: PointerEvent): void {
+    const [positionX, positionY] = pointer(event);
+    this.positionX =
+      positionX - parseFloat(this.origin.getAttribute('x') || '0');
+    this.positionY =
+      positionY - parseFloat(this.origin.getAttribute('y') || '0');
+  }
+
+  getInteractionOutput(type: EventType): BarsInteractionOutput<Datum> {
+    const datum = this.stackedBars.getSourceDatumFromStackedBarDatum(
+      this.stackDatum
+    );
+    const tooltipData = this.stackedBars.getTooltipData(datum);
+    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.stackDatum = undefined;
+    this.origin = undefined;
+    this.positionX = undefined;
+    this.positionY = undefined;
+  }
+}

package/{lib/stacked-bars/index.d.ts → src/lib/stacked-bars/index.ts}

@@ -1,10 +1,10 @@
-export type { BarsInteractionOutput as StackedBarsInteractionOutput } from '../bars';
-export * from './config/stacked-bars-builder';
-export * from './config/stacked-bars-config';
-export * from './config/stacked-bars-options';
-export * from './events/actions/stacked-bars-click-actions';
-export * from './events/actions/stacked-bars-hover-actions';
-export * from './events/actions/stacked-bars-hover-move-actions';
-export * from './events/stacked-bars-events.directive';
-export * from './stacked-bars.component';
-export * from './stacked-bars.module';
+export type { BarsInteractionOutput as StackedBarsInteractionOutput } from '../bars';
+export * from './config/stacked-bars-builder';
+export * from './config/stacked-bars-config';
+export * from './config/stacked-bars-options';
+export * from './events/actions/stacked-bars-click-actions';
+export * from './events/actions/stacked-bars-hover-actions';
+export * from './events/actions/stacked-bars-hover-move-actions';
+export * from './events/stacked-bars-events.directive';
+export * from './stacked-bars.component';
+export * from './stacked-bars.module';

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

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { XyChartComponent } from '../charts/xy-chart/xy-chart.component';
+import { StackedBarsComponent } from './stacked-bars.component';
+
+describe('StackedBarsComponent', () => {
+  let component: StackedBarsComponent<any, string>;
+  let fixture: ComponentFixture<StackedBarsComponent<any, string>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StackedBarsComponent],
+      providers: [XyChartComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StackedBarsComponent<any, string>);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { BaseType, SeriesPoint, Transition, select } from 'd3';
+import { Selection } from 'd3-selection';
+import { BarsComponent } from '../bars/bars.component';
+import { ChartComponent, XyChartComponent } from '../charts';
+import { DataValue } from '../core/types/values';
+import { VIC_PRIMARY_MARKS } from '../marks/primary-marks/primary-marks';
+import { StackedBarsConfig } from './config/stacked-bars-config';
+
+export type StackDatum = SeriesPoint<{ [key: string]: number }> & {
+  i: number;
+};
+
+export type StackedBarGroupSelection = Selection<
+  BaseType | SVGRectElement,
+  StackDatum,
+  SVGGElement | BaseType,
+  StackDatum[]
+>;
+
+// Ideally we would be able to use generic T with the component, but Angular doesn't yet support this, so we use "unknown"
+// https://github.com/angular/angular/issues/46815, https://github.com/angular/angular/pull/47461
+export const STACKED_BARS = new InjectionToken<
+  StackedBarsComponent<unknown, DataValue>
+>('StackedBarsComponent');
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[vic-primary-marks-stacked-bars]',
+  template: '',
+  styleUrls: ['./stacked-bars.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: VIC_PRIMARY_MARKS, useExisting: StackedBarsComponent },
+    { provide: STACKED_BARS, useExisting: StackedBarsComponent },
+    { provide: ChartComponent, useExisting: XyChartComponent },
+  ],
+  host: {
+    '[class]': 'config.marksClass',
+    '[style.mixBlendMode]': 'config.mixBlendMode',
+  },
+})
+export class StackedBarsComponent<
+  Datum,
+  TOrdinalValue extends DataValue,
+> extends BarsComponent<Datum, TOrdinalValue> {
+  @Input() override config: StackedBarsConfig<Datum, TOrdinalValue>;
+  stackedBarGroups: StackedBarGroupSelection;
+
+  override drawBars(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.stackedBarGroups = select(this.elRef.nativeElement)
+      .selectAll<SVGGElement, StackDatum[]>(
+        `.${this.config.marksClass}-category-group`
+      )
+      .data<StackDatum[]>(this.config.stackedData)
+      .join('g')
+      .attr('class', `${this.config.marksClass}-category-group`.trim())
+      .attr('fill', ([{ i }]: StackDatum[]) =>
+        this.scales.color(this.config.color.values[i])
+      )
+      .selectAll(`.${this.class.g}`)
+      .data((d) => d)
+      .join((enter) =>
+        enter
+          .append('g')
+          .attr('class', (d) =>
+            `${this.class.g} ${this.config.datumClass(this.config.data[d.i], d.i)}`.trim()
+          )
+      );
+
+    this.stackedBarGroups
+      .selectAll(`.${this.class.bar}`)
+      .data((d) => [d])
+      .join(
+        (enter) =>
+          enter
+            .append('rect')
+            .attr('class', () => this.class.bar)
+            .attr('x', (d) => this.getStackElementX(d))
+            .attr('y', (d) => this.getStackElementY(d))
+            .attr('width', (d) => this.getStackElementWidth(d))
+            .attr('height', (d) => this.getStackElementHeight(d)),
+        (update) =>
+          update.call((update) =>
+            update
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              .transition(t as any)
+              .attr('x', (d) => this.getStackElementX(d))
+              .attr('y', (d) => this.getStackElementY(d))
+              .attr('width', (d) => this.getStackElementWidth(d))
+              .attr('height', (d) => this.getStackElementHeight(d))
+          ),
+        (exit) =>
+          exit // fancy exit needs to be tested with actual/any data
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .transition(t as any)
+            .delay((_, i) => i * 20)
+            .attr('y', this.scales.y(0))
+            .attr('height', 0)
+            .remove()
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      );
+  }
+
+  getStackElementX(datum: StackDatum): number {
+    if (this.config.dimensions.ordinal === 'x') {
+      return this.scales.x(
+        this.config[this.config.dimensions.x].values[datum.i]
+      );
+    } else {
+      return Math.min(this.scales.x(datum[0]), this.scales.x(datum[1]));
+    }
+  }
+
+  getStackElementY(datum: StackDatum): number {
+    if (this.config.dimensions.ordinal === 'x') {
+      return Math.min(this.scales.y(datum[0]), this.scales.y(datum[1]));
+    } else {
+      return this.scales.y(
+        this.config[this.config.dimensions.y].values[datum.i]
+      );
+    }
+  }
+
+  getStackElementWidth(datum: StackDatum): number {
+    if (this.config.dimensions.ordinal === 'x') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (this.scales.x as any).bandwidth();
+    } else {
+      return Math.abs(this.scales.x(datum[0]) - this.scales.x(datum[1]));
+    }
+  }
+
+  getStackElementHeight(datum: StackDatum): number {
+    if (this.config.dimensions.ordinal === 'x') {
+      return Math.abs(this.scales.y(datum[0]) - this.scales.y(datum[1]));
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (this.scales.y as any).bandwidth();
+    }
+  }
+
+  getSourceDatumFromStackedBarDatum(datum: StackDatum): Datum {
+    return this.config.data[datum.i];
+  }
+}

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { StackedBarsEventsDirective } from './events/stacked-bars-events.directive';
+import { StackedBarsComponent } from './stacked-bars.component';
+
+@NgModule({
+  imports: [StackedBarsComponent, StackedBarsEventsDirective],
+  exports: [StackedBarsComponent, StackedBarsEventsDirective],
+})
+export class VicStackedBarsModule {}

package/src/lib/stroke/base/stroke-base-options.ts

@@ -0,0 +1,7 @@
+export interface StrokeBaseOptions {
+  linecap: string;
+  linejoin: string;
+  opacity: number;
+  width: number;
+  dasharray: string;
+}

package/src/lib/stroke/base/stroke-base.ts

@@ -0,0 +1,9 @@
+import { StrokeBaseOptions } from './stroke-base-options';
+
+export abstract class StrokeBase implements StrokeBaseOptions {
+  readonly linecap: string;
+  readonly linejoin: string;
+  readonly opacity: number;
+  readonly width: number;
+  readonly dasharray: string;
+}

package/src/lib/stroke/index.ts

@@ -0,0 +1,5 @@
+export * from './base/stroke-base';
+export * from './base/stroke-base-options';
+export * from './stroke';
+export * from './stroke-builder';
+export * from './stroke-options';

package/src/lib/stroke/stroke-builder.ts

@@ -0,0 +1,103 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { Stroke } from './stroke';
+
+const DEFAULT = {
+  _dasharray: 'none',
+  _linecap: 'round',
+  _linejoin: 'round',
+  _opacity: 1,
+  _width: 2,
+};
+
+export class StrokeBuilder {
+  private _color: string;
+  private _dasharray: string;
+  private _linecap: string;
+  private _linejoin: string;
+  private _opacity: number;
+  private _width: number;
+
+  constructor() {
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. A value for the line's [stroke]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke}
+   *  attribute.
+   *
+   * @default '#000'
+   */
+  color(color: string): this {
+    this._color = color;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. A value for the line's [stroke-dasharray]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray}
+   *  attribute.
+   *
+   * @default 'round'
+   */
+  dasharray(dasharray: string): this {
+    this._dasharray = dasharray;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. A value for the line's [stroke-linecap]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap}
+   *  attribute.
+   *
+   * @default 'round'
+   */
+  linecap(linecap: string): this {
+    this._linecap = linecap;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. A value for the line's [stroke-linejoin]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin}
+   *  attribute.
+   *
+   * @default 'round'
+   */
+  linejoin(linejoin: string): this {
+    this._linejoin = linejoin;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. A value for the line's [stroke-opacity]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-opacity}
+   *  attribute.
+   *
+   * @default 1
+   */
+  opacity(opacity: number): this {
+    this._opacity = opacity;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. A value for the line's [stroke-width]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width}
+   *  attribute, in px.
+   *
+   * @default 2
+   */
+  width(width: number): this {
+    this._width = width;
+    return this;
+  }
+
+  /**
+   * @internal This function is for internal use only and should never be called by the user.
+   */
+  _build(): Stroke {
+    return new Stroke({
+      color: this._color,
+      dasharray: this._dasharray,
+      linecap: this._linecap,
+      linejoin: this._linejoin,
+      opacity: this._opacity,
+      width: this._width,
+    });
+  }
+}

package/{lib/stroke/stroke-options.d.ts → src/lib/stroke/stroke-options.ts}

@@ -1,4 +1,5 @@
-import { StrokeBaseOptions } from './base/stroke-base-options';
-export interface StrokeOptions extends StrokeBaseOptions {
-    color: string;
-}
+import { StrokeBaseOptions } from './base/stroke-base-options';
+
+export interface StrokeOptions extends StrokeBaseOptions {
+  color: string;
+}

package/src/lib/stroke/stroke.ts

@@ -0,0 +1,12 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { StrokeBase } from './base/stroke-base';
+import { StrokeOptions } from './stroke-options';
+
+export class Stroke extends StrokeBase implements StrokeOptions {
+  readonly color: string;
+
+  constructor(options: Partial<StrokeOptions>) {
+    super();
+    safeAssign(this, options);
+  }
+}

package/{lib/svg-text-wrap/index.d.ts → src/lib/svg-text-wrap/index.ts}

@@ -1,2 +1,3 @@
-export * from './svg-text-wrap';
-export * from './svg-text-wrap-options';
+export * from './svg-text-wrap';
+export * from './svg-text-wrap-builder';
+export * from './svg-text-wrap-options';