@mathstack/viz 2.0.3 → 2.2.0

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

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

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

@@ -1,25 +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 { 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

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

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

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

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

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

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

@@ -1,103 +0,0 @@
-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/src/lib/stroke/stroke-options.ts

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

package/src/lib/stroke/stroke.ts

@@ -1,12 +0,0 @@
-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/src/lib/svg-text-wrap/index.ts

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