@mathstack/viz 1.1.5 → 2.0.3

package/src/lib/testing/stubs/input-event.directive.stub.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { InputEventDirective } from '../../events/input-event.directive';
+
+export class InputEventDirectiveStub extends InputEventDirective {
+  handleNewEvent(event: any): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/lines.component.stub.ts

@@ -0,0 +1,13 @@
+import { Chart } from '../../charts/chart/chart';
+
+export class LinesComponentStub {
+  ranges = {
+    x: [],
+    y: [],
+  };
+  xScale;
+  yScale;
+  markers;
+  lines;
+  chart = new Chart();
+}

package/src/lib/testing/stubs/map-aux-marks.stub.ts

@@ -0,0 +1,10 @@
+import { MarksOptions, VicMapAuxMarks } from '../../marks';
+
+export class MapAuxMarksStub<Datum> extends VicMapAuxMarks<
+  Datum,
+  MarksOptions
+> {
+  drawMarks(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/map-chart.component.stub.ts

@@ -0,0 +1,3 @@
+import { ChartComponentStub } from './chart.component.stub';
+
+export class MapChartComponentStub extends ChartComponentStub {}

package/src/lib/testing/stubs/map-legend-content.stub.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { VicAttributeDataDimensionConfig } from '../../geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-types';
+import { MapLegend } from '../../map-legend/map-legend-base';
+
+export class MapLegendContentStub<Datum> extends MapLegend<
+  Datum,
+  VicAttributeDataDimensionConfig<Datum>
+> {
+  getValuesFromScale(): number[] {
+    return [1, 12];
+  }
+
+  getLeftOffset(values: string[]): number {
+    return 12;
+  }
+}

package/src/lib/testing/stubs/map-legend.component.stub.ts

@@ -0,0 +1,10 @@
+import { VicCategoricalAttributeDataDimensionConfig } from '../../geographies/config/geographies-config';
+
+export class MapLegendComponentStub {
+  attributeDataConfig = new VicCategoricalAttributeDataDimensionConfig();
+
+  constructor() {
+    this.attributeDataConfig.range = ['red', 'blue'];
+    this.attributeDataConfig.domain = ['a', 'b'];
+  }
+}

package/src/lib/testing/stubs/map-primary-marks.stub.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import { MarksOptions } from '../../marks/config/marks-options';
+import { MapPrimaryMarks } from '../../marks/map-marks/map-primary-marks/map-primary-marks';
+
+export class MapPrimaryMarksStub<Datum> extends MapPrimaryMarks<
+  Datum,
+  MarksOptions
+> {
+  override setChartScalesFromRanges(useTransition: boolean): void {
+    return;
+  }
+  drawMarks(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/ordinal-axis.stub.ts

@@ -0,0 +1,18 @@
+import { ordinalAxisMixin } from '../../axes/ordinal/ordinal-axis';
+import { Ticks } from '../../axes/ticks/ticks';
+import { DataValue } from '../../core/types/values';
+import { XyAxisStub } from './xy-axis.stub';
+
+export class OrdinalAxisStub<T extends DataValue> extends ordinalAxisMixin(
+  XyAxisStub
+)<T, Ticks<T>> {
+  setScale(): void {
+    return;
+  }
+  setAxisFunction(): void {
+    return;
+  }
+  setTranslate(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/primary-marks.stub.ts

@@ -0,0 +1,18 @@
+import { DataMarksOptions } from '../../marks/config/marks-options';
+import { PrimaryMarks } from '../../marks/primary-marks/primary-marks';
+
+export class PrimaryMarksStub<Datum> extends PrimaryMarks<
+  Datum,
+  DataMarksOptions<Datum>
+> {
+  override drawMarks(): void {
+    return;
+  }
+  override getTransitionDuration(): number {
+    return 0;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override setChartScalesFromRanges(useTransition: boolean): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/quantitative-axis.stub.ts

@@ -0,0 +1,18 @@
+import { quantitativeAxisMixin } from '../../axes/quantitative/quantitative-axis';
+import { Ticks } from '../../axes/ticks/ticks';
+import { DataValue } from '../../core/types/values';
+import { XyAxisStub } from './xy-axis.stub';
+
+export class QuantitativeAxisStub<
+  T extends DataValue,
+> extends quantitativeAxisMixin(XyAxisStub)<T, Ticks<T>> {
+  setScale(): void {
+    return;
+  }
+  setAxisFunction() {
+    return;
+  }
+  setTranslate(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/services/main.service.stub.ts

@@ -0,0 +1,5 @@
+import { OverlayStub } from '../core/overlay.stub';
+
+export class MainServiceStub {
+  overlayStub = new OverlayStub();
+}

package/src/lib/testing/stubs/services/utilities.service.stub.ts

@@ -0,0 +1,7 @@
+export class UtilitiesServiceStub {
+  objectOnNgChangesChangedNotFirstTime = jasmine.createSpy(
+    'objectOnNgChangesChangedNotFirstTime'
+  );
+  objectOnNgChangesChanged = jasmine.createSpy('objectOnNgChangesChanged');
+  isDate = jasmine.createSpy('isDate');
+}

package/src/lib/testing/stubs/stacked-area.component.stub.ts

@@ -0,0 +1,13 @@
+import { Chart } from '../../charts/chart/chart';
+
+export class StackedAreaComponentStub {
+  ranges = {
+    x: [],
+    y: [],
+  };
+  xScale;
+  yScale;
+  area;
+  areas;
+  chart = new Chart();
+}

package/src/lib/testing/stubs/x-axis.stub.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Ticks } from '../../axes/ticks/ticks';
+import { xAxisMixin } from '../../axes/x/x-axis';
+import { DataValue } from '../../core/types/values';
+import { XyAxisStub } from './xy-axis.stub';
+
+export class XAxisStub<T extends DataValue> extends xAxisMixin(XyAxisStub)<
+  T,
+  Ticks<T>
+> {}

package/src/lib/testing/stubs/xy-axis.class.stub.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { XyAxisElement } from '../../xy-chart-space/xy-axis.class';
+
+export class XyAxisElementStub extends XyAxisElement {
+  setAxisFunction() {
+    return;
+  }
+  initNumTicks(): number {
+    return 10;
+  }
+  subscribeToScale(): void {
+    return;
+  }
+  getAxisFunction(): any {
+    return {};
+  }
+  setTranslate(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/xy-axis.stub.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Observable, of } from 'rxjs';
+import { XyAxis, XyAxisScale } from '../../axes/base/xy-axis-base';
+import { Ticks } from '../../axes/ticks/ticks';
+import { DataValue } from '../../core/types/values';
+
+export class XyAxisStub<
+  T extends DataValue,
+  TicksConfig extends Ticks<T>,
+> extends XyAxis<T, TicksConfig> {
+  getBaselineTranslate(): string | null {
+    return null;
+  }
+
+  createLabel(): void {
+    return;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setTicks(tickFormat: string | ((value: T) => string)): void {
+    return;
+  }
+  setScale(): void {
+    return;
+  }
+  getScale(): Observable<XyAxisScale> {
+    return of({ scale: 'scale', useTransition: false } as any);
+  }
+  setAxisFunction() {
+    return;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setAxis(axisFunction: any): void {
+    return;
+  }
+  initNumTicks(): number {
+    return 10;
+  }
+  getAxisFunction(): any {
+    return {};
+  }
+  setTranslate(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/xy-chart.component.stub.ts

@@ -0,0 +1,5 @@
+import { ChartComponentStub } from './chart.component.stub';
+
+export class XyChartComponentStub extends ChartComponentStub {
+  override transitionDuration: number;
+}

package/src/lib/testing/stubs/xy-data-marks.stub.ts

@@ -0,0 +1,15 @@
+import { PrimaryMarksConfig } from '../../marks/primary-marks/config/primary-marks-config';
+import { VicXyPrimaryMarks } from '../../marks/xy-marks/xy-primary-marks/xy-primary-marks';
+
+export class XyPrimaryMarksStub<Datum> extends VicXyPrimaryMarks<
+  Datum,
+  PrimaryMarksConfig<Datum>
+> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override setChartScalesFromRanges(useTransition: boolean): void {
+    return;
+  }
+  override drawMarks(): void {
+    return;
+  }
+}

package/src/lib/testing/stubs/y-axis.stub.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { XyAxis } from '../../axes/base/xy-axis-base';
+import { Ticks } from '../../axes/ticks/ticks';
+import { yAxisMixin } from '../../axes/y/y-axis';
+import { DataValue } from '../../core/types/values';
+
+export class YAxisStub<
+  T extends DataValue,
+  TicksConfig extends Ticks<T>,
+> extends yAxisMixin(XyAxis)<T, TicksConfig> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setAxis(axisFunction: any): void {
+    return;
+  }
+}

package/src/lib/tooltips/config/tooltip.ts

@@ -0,0 +1,11 @@
+import { safeAssign } from '@mathstack/app-kit';
+
+export class Tooltip {
+  show: boolean;
+  type: 'svg' | 'html';
+
+  constructor(options?: Partial<Tooltip>) {
+    this.show = false;
+    safeAssign(this, options);
+  }
+}

package/src/lib/tooltips/html-tooltip/config/html-tooltip-builder.ts

@@ -0,0 +1,134 @@
+import { ElementRef, Injectable } from '@angular/core';
+import { safeAssign } from '@mathstack/app-kit';
+import { InteractionOutput } from '../../../events/interaction-output';
+import { HtmlTooltipConfig } from './html-tooltip-config';
+import { HtmlTooltipCdkManagedPosition } from './position/tooltip-position';
+import { HtmlTooltipSizeBuilder } from './size/tooltip-size-builder';
+
+const DEFAULT = {
+  _minWidth: 300,
+  _applyEventsDisabledClass: true,
+};
+
+@Injectable()
+export class VicHtmlTooltipConfigBuilder {
+  private _applyEventsDisabledClass: boolean;
+  private sizeBuilder: HtmlTooltipSizeBuilder;
+  private _panelClass: string | string[];
+  private _origin: ElementRef<Element>;
+  private _hasBackdrop: boolean;
+  private _position: HtmlTooltipCdkManagedPosition;
+  private _show: boolean;
+
+  constructor() {
+    safeAssign(this, DEFAULT);
+    this.sizeBuilder = new HtmlTooltipSizeBuilder();
+  }
+
+  /**
+   * OPTIONAL. If set to true, the tooltip will have the class 'events-disabled' that can be used to disable pointer events.
+   * This is useful when the tooltip should not interfere with user interactions, such as when it is used for informational purposes only.
+   *
+   * Default is true, meaning the class will be applied.
+   *
+   * @param apply - Whether to apply the events-disabled class or not.
+   */
+  applyEventsDisabledClass(apply: boolean): this {
+    this._applyEventsDisabledClass = apply;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Will create a Material CDK-provided backdrop if set to true. Clicking on the backdrop will dismiss the backdrop and emit an event.
+   *
+   * @param hasBackdrop - Whether to show a backdrop or not.
+   */
+  hasBackdrop(hasBackdrop: boolean): this {
+    this._hasBackdrop = hasBackdrop;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets CSS classes to apply to the tooltip panel.
+   *
+   * @param panelClass - CSS class name(s) to apply to the tooltip panel.
+   */
+  panelClass(panelClass: string | string[]): this {
+    this._panelClass = panelClass;
+    return this;
+  }
+
+  /**
+   * Sets the origin and position of the tooltip based on the output from a BaseInteractionOutput.
+   *
+   * @param origin - The origin element reference.
+   * @param position - Optional position configuration. If not provided, the default position from the output will be used. Note that the output has several methods to return a position that can be used here.
+   */
+  positionFromOutput(
+    // intentionally using InteractionOutput<unknown> to allow flexibility in the type of output
+    output: InteractionOutput<unknown>,
+    position?: HtmlTooltipCdkManagedPosition
+  ): this {
+    if (output) {
+      this._origin = new ElementRef(output.origin);
+      this._position = position || output?.defaultPosition;
+    }
+    return this;
+  }
+
+  /**
+   * Sets whether the tooltip should be shown or not.
+   *
+   * @param show - Whether to show the tooltip or not.
+   */
+  show(show: boolean): this {
+    this._show = show;
+    return this;
+  }
+
+  size(size: null): this;
+  size(size: (size: HtmlTooltipSizeBuilder) => void): this;
+  size(size: ((size: HtmlTooltipSizeBuilder) => void) | null): this {
+    if (size === null) {
+      this.sizeBuilder = undefined;
+      return this;
+    }
+    this.initSizeBuilder();
+    size(this.sizeBuilder);
+    return this;
+  }
+
+  private initSizeBuilder(): void {
+    this.sizeBuilder = new HtmlTooltipSizeBuilder();
+  }
+
+  getConfig(): HtmlTooltipConfig {
+    this.validateBuilder();
+    return new HtmlTooltipConfig({
+      hasBackdrop: this._hasBackdrop,
+      panelClass: this.getPanelClasses(),
+      origin: this._origin,
+      position: this._position,
+      show: this._show,
+      size: this.sizeBuilder._build(),
+    });
+  }
+
+  private validateBuilder(): void {
+    if (!this.sizeBuilder) {
+      this.initSizeBuilder();
+    }
+    if (this._show && !this._position) {
+      throw new Error('Position must be set using positionFromOutput');
+    }
+  }
+
+  private getPanelClasses(): string[] {
+    const userClasses = this._panelClass ? [this._panelClass].flat() : [];
+    const panelClasses = ['vic-html-tooltip-overlay', ...userClasses].flat();
+    if (this._applyEventsDisabledClass) {
+      panelClasses.push('events-disabled');
+    }
+    return panelClasses;
+  }
+}

package/src/lib/tooltips/html-tooltip/config/html-tooltip-config.ts

@@ -0,0 +1,21 @@
+import { ElementRef } from '@angular/core';
+import { safeAssign } from '@mathstack/app-kit';
+import { Tooltip } from '../../config/tooltip';
+import { HtmlTooltipOptions } from './html-tooltip-options';
+import { HtmlTooltipCdkManagedPosition } from './position/tooltip-position';
+import { HtmlTooltipSize } from './size/tooltip-size';
+
+export class HtmlTooltipConfig extends Tooltip implements HtmlTooltipOptions {
+  override type: 'html';
+  applyEventsDisabledClass: boolean;
+  hasBackdrop: boolean;
+  origin: ElementRef<Element>;
+  panelClass: string[];
+  position: HtmlTooltipCdkManagedPosition;
+  size: HtmlTooltipSize;
+
+  constructor(options: HtmlTooltipOptions) {
+    super();
+    safeAssign(this, options);
+  }
+}

package/{lib/tooltips/html-tooltip/config/html-tooltip-options.d.ts → src/lib/tooltips/html-tooltip/config/html-tooltip-options.ts}

@@ -1,11 +1,12 @@
-import { ElementRef } from '@angular/core';
-import { HtmlTooltipCdkManagedPosition } from './position/tooltip-position';
-import { HtmlTooltipSize } from './size/tooltip-size';
-export interface HtmlTooltipOptions {
-    hasBackdrop: boolean;
-    origin: ElementRef<Element>;
-    panelClass: string | string[];
-    position: HtmlTooltipCdkManagedPosition;
-    size: HtmlTooltipSize;
-    show: boolean;
-}
+import { ElementRef } from '@angular/core';
+import { HtmlTooltipCdkManagedPosition } from './position/tooltip-position';
+import { HtmlTooltipSize } from './size/tooltip-size';
+
+export interface HtmlTooltipOptions {
+  hasBackdrop: boolean;
+  origin: ElementRef<Element>;
+  panelClass: string | string[];
+  position: HtmlTooltipCdkManagedPosition;
+  size: HtmlTooltipSize;
+  show: boolean;
+}

package/src/lib/tooltips/html-tooltip/config/position/tooltip-position-builder.ts

@@ -0,0 +1,191 @@
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { TooltipPosition, TooltipPositionConfig } from './tooltip-position';
+
+// Primarily used internally in the library, though a user could use it to make custom positions
+
+export class TooltipPositionBuilder {
+  private originX?: TooltipPositionConfig['originX'];
+  private originY?: TooltipPositionConfig['originY'];
+  private overlayX: TooltipPositionConfig['overlayX'] = 'center';
+  private overlayY: TooltipPositionConfig['overlayY'] = 'bottom';
+  private currentOffsetX = 0;
+  private currentOffsetY = 0;
+  private additionalConfig: Partial<ConnectedPosition> = {};
+
+  // From methods - set origin
+  fromTopLeft(): this {
+    this.originX = 'start';
+    this.originY = 'top';
+    return this;
+  }
+
+  fromTopCenter(): this {
+    this.originX = 'center';
+    this.originY = 'top';
+    return this;
+  }
+
+  fromTopRight(): this {
+    this.originX = 'end';
+    this.originY = 'top';
+    return this;
+  }
+
+  fromCenterLeft(): this {
+    this.originX = 'start';
+    this.originY = 'center';
+    return this;
+  }
+
+  fromCenter(): this {
+    this.originX = 'center';
+    this.originY = 'center';
+    return this;
+  }
+
+  fromCenterRight(): this {
+    this.originX = 'end';
+    this.originY = 'center';
+    return this;
+  }
+
+  fromBottomLeft(): this {
+    this.originX = 'start';
+    this.originY = 'bottom';
+    return this;
+  }
+
+  fromBottomCenter(): this {
+    this.originX = 'center';
+    this.originY = 'bottom';
+    return this;
+  }
+
+  fromBottomRight(): this {
+    this.originX = 'end';
+    this.originY = 'bottom';
+    return this;
+  }
+
+  // Attach methods - set overlay
+  attachTopLeft(): this {
+    this.overlayX = 'start';
+    this.overlayY = 'top';
+    this.additionalConfig = { panelClass: 'position-top-left' };
+    return this;
+  }
+
+  attachTopCenter(): this {
+    this.overlayX = 'center';
+    this.overlayY = 'top';
+    this.additionalConfig = { panelClass: 'position-top-center' };
+    return this;
+  }
+
+  attachTopRight(): this {
+    this.overlayX = 'end';
+    this.overlayY = 'top';
+    this.additionalConfig = { panelClass: 'position-top-right' };
+    return this;
+  }
+
+  attachCenterLeft(): this {
+    this.overlayX = 'start';
+    this.overlayY = 'center';
+    this.additionalConfig = { panelClass: 'position-center-left' };
+    return this;
+  }
+
+  attachCenter(): this {
+    this.overlayX = 'center';
+    this.overlayY = 'center';
+    this.additionalConfig = { panelClass: 'position-center' };
+    return this;
+  }
+
+  attachCenterRight(): this {
+    this.overlayX = 'end';
+    this.overlayY = 'center';
+    this.additionalConfig = { panelClass: 'position-center-right' };
+    return this;
+  }
+
+  attachBottomLeft(): this {
+    this.overlayX = 'start';
+    this.overlayY = 'bottom';
+    this.additionalConfig = { panelClass: 'position-bottom-left' };
+    return this;
+  }
+
+  attachBottomCenter(): this {
+    this.overlayX = 'center';
+    this.overlayY = 'bottom';
+    this.additionalConfig = { panelClass: 'position-bottom-center' };
+    return this;
+  }
+
+  attachBottomRight(): this {
+    this.overlayX = 'end';
+    this.overlayY = 'bottom';
+    this.additionalConfig = { panelClass: 'position-bottom-right' };
+    return this;
+  }
+
+  // Offset method
+  offset(offsetX: number, offsetY: number): this {
+    this.currentOffsetX = offsetX;
+    this.currentOffsetY = offsetY;
+    return this;
+  }
+
+  // Additional config
+  withConfig(config: Partial<ConnectedPosition>): this {
+    this.additionalConfig = { ...this.additionalConfig, ...config };
+    return this;
+  }
+
+  // Build the position
+  getPosition(): TooltipPosition {
+    if (!this.originX || !this.originY) {
+      throw new Error('Origin position must be set using a from* method');
+    }
+
+    return new TooltipPosition({
+      originX: this.originX,
+      originY: this.originY,
+      overlayX: this.overlayX,
+      overlayY: this.overlayY,
+      offsetX: this.currentOffsetX,
+      offsetY: this.currentOffsetY,
+      ...this.additionalConfig,
+    });
+  }
+
+  // Reset builder for reuse
+  reset(): this {
+    this.originX = undefined;
+    this.originY = undefined;
+    this.overlayX = 'center';
+    this.overlayY = 'bottom';
+    this.currentOffsetX = 0;
+    this.currentOffsetY = 0;
+    this.additionalConfig = {};
+    return this;
+  }
+
+  // Utility method for applying offsets to multiple positions
+  applyOffsets(
+    positions: TooltipPosition[],
+    offsetX: number,
+    offsetY: number
+  ): TooltipPosition[] {
+    return positions.map(
+      (pos) =>
+        new TooltipPosition({
+          ...pos,
+          offsetX: (pos.offsetX || 0) + offsetX,
+          offsetY: (pos.offsetY || 0) + offsetY,
+        })
+    );
+  }
+}