@mathstack/viz 2.1.0 → 2.2.0

package/src/lib/grouped-bars/config/grouped-bars-builder.ts

@@ -1,66 +0,0 @@
-import { Injectable } from '@angular/core';
-import { safeAssign } from '@mathstack/app-kit';
-import { VicBarsConfigBuilder } from '../../bars/config/bars-builder';
-import { DataValue } from '../../core/types/values';
-import { GroupedBarsConfig } from './grouped-bars-config';
-
-const DEFAULT = {
-  _intraGroupPadding: 0.05,
-};
-
-/**
- * Builds a configuration object for a GroupedBarsComponent.
- *
- * Must be added to a providers array in or above the component that consumes it if it is injected via the constructor. (e.g. `providers: [VicGroupedBarsBuilder]` in the component decorator)
- *
- * The first generic parameter, Datum, is the type of the data that will be used to create the bars.
- *
- * The second generic parameter, TOrdinalValue, is the type of the ordinal data that will be used to position the bars.
- */
-@Injectable()
-export class VicGroupedBarsConfigBuilder<
-  Datum,
-  TOrdinalValue extends DataValue,
-> extends VicBarsConfigBuilder<Datum, TOrdinalValue> {
-  private _intraGroupPadding: number;
-
-  constructor() {
-    super();
-    safeAssign(this, DEFAULT);
-  }
-
-  /**
-   * OPTIONAL. Set the padding between groups of bars. Passed to d3.scaleBand.padding.
-   *
-   * @default 0.05
-   */
-  intraGroupPadding(padding: number): this {
-    this._intraGroupPadding = padding;
-    return this;
-  }
-
-  /**
-   * REQUIRED. Builds the configuration object for a GroupedBarsComponent.
-   */
-  override getConfig(): GroupedBarsConfig<Datum, TOrdinalValue> {
-    this.validateBuilder('Grouped Bars');
-    return new GroupedBarsConfig(this.dimensions, {
-      marksClass: 'vic-grouped-bars',
-      backgrounds: this.backgroundsBuilder?._build(),
-      color: this.colorDimensionBuilder._build('Color'),
-      customFills: this._customFills,
-      data: this._data,
-      datumClass: this._datumClass,
-      intraGroupPadding: this._intraGroupPadding,
-      labels: this.labelsBuilder?._build(),
-      mixBlendMode: this._mixBlendMode,
-      ordinal: this.ordinalDimensionBuilder._build(
-        'band',
-        this.getOrdinalDimensionName()
-      ),
-      quantitative: this.quantitativeDimensionBuilder._build(
-        this.getQuantitativeDimensionName()
-      ),
-    });
-  }
-}

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

@@ -1,41 +0,0 @@
-import { safeAssign } from '@mathstack/app-kit';
-import { range } from 'd3';
-import { BarsConfig } from '../../bars/config/bars-config';
-import { BarsDimensions } from '../../bars/config/bars-dimensions';
-import { DataValue } from '../../core/types/values';
-import { GroupedBarsOptions } from './grouped-bars-options';
-
-const DEFAULT = {
-  intraGroupPadding: 0.05,
-};
-
-export class GroupedBarsConfig<Datum, TOrdinalValue extends DataValue>
-  extends BarsConfig<Datum, TOrdinalValue>
-  implements GroupedBarsOptions<Datum, TOrdinalValue>
-{
-  intraGroupPadding: number;
-
-  constructor(
-    dimensions: BarsDimensions,
-    options: GroupedBarsOptions<Datum, TOrdinalValue>
-  ) {
-    super(dimensions, options);
-    safeAssign(this, DEFAULT);
-    safeAssign(this, options);
-    this.initPropertiesFromData();
-  }
-
-  override setValueIndices(): void {
-    this.valueIndices = range(this.ordinal.values.length).filter((i) => {
-      return (
-        this.ordinal.domainIncludes(this.ordinal.values[i]) &&
-        this.color.domainIncludes(this.color.values[i])
-      );
-    });
-  }
-
-  override setBarsKeyFunction(): void {
-    this.barsKeyFunction = (i: number): string =>
-      `${this.color.values[i]}-${this.ordinal.values[i]}`;
-  }
-}

package/src/lib/grouped-bars/config/grouped-bars-options.ts

@@ -1,9 +0,0 @@
-import { BarsOptions } from '../../bars/config/bars-options';
-import { DataValue } from '../../core/types/values';
-
-export interface GroupedBarsOptions<
-  Datum,
-  TOrdinalValue extends DataValue,
-> extends BarsOptions<Datum, TOrdinalValue> {
-  intraGroupPadding: number;
-}

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

@@ -1,221 +0,0 @@
-import { Directive, EventEmitter, inject, Input, Output } from '@angular/core';
-import { select } from 'd3';
-import { map, Observable } from 'rxjs';
-import { BarDatum, BARS, BarsHost, BarsInteractionOutput } from '../../bars';
-import { BarsTooltipPositioner } from '../../bars/events/bars-tooltip-positioner';
-import { DataValue } from '../../core';
-import {
-  DEFAULT_TOOLTIP_Y_OFFSET,
-  EventAction,
-  EventsDirective,
-  EventType,
-  HoverMoveAction,
-  InputEventAction,
-  UnlistenFunction,
-} from '../../events';
-import { TooltipPosition } from '../../tooltips';
-import { GroupedBarsComponent } from '../grouped-bars.component';
-
-@Directive({
-  selector: '[vicGroupedBarsEvents]',
-})
-export class GroupedBarsEventsDirective<
-  Datum,
-  TOrdinalValue extends DataValue,
-  TGroupedBarsComponent extends GroupedBarsComponent<Datum, TOrdinalValue> =
-    GroupedBarsComponent<Datum, TOrdinalValue>,
->
-  extends EventsDirective<BarsHost<Datum, TOrdinalValue>>
-  implements BarsHost<Datum, TOrdinalValue>
-{
-  @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<TGroupedBarsComponent>(BARS);
-
-  get marks(): GroupedBarsComponent<Datum, TOrdinalValue> {
-    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/grouped-bars/grouped-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 { GroupedBarsComponent } from './grouped-bars.component';
-
-describe('GroupedBarsComponent', () => {
-  let component: GroupedBarsComponent<any, string>;
-  let fixture: ComponentFixture<GroupedBarsComponent<any, string>>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GroupedBarsComponent],
-      providers: [XyChartComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GroupedBarsComponent<any, string>);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,94 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { scaleBand } from 'd3';
-import { BarDatum, BARS, 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 { GroupedBarsConfig } from './config/grouped-bars-config';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: '[vic-primary-grouped-bars]',
-  template: '',
-  styleUrls: ['./grouped-bars.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    { provide: VIC_PRIMARY_MARKS, useExisting: GroupedBarsComponent },
-    { provide: BARS, useExisting: GroupedBarsComponent },
-    { provide: ChartComponent, useExisting: XyChartComponent },
-  ],
-  host: {
-    '[class]': 'config.marksClass',
-    '[style.mixBlendMode]': 'config.mixBlendMode',
-  },
-})
-export class GroupedBarsComponent<
-  Datum,
-  TOrdinalValue extends DataValue,
-> extends BarsComponent<Datum, TOrdinalValue> {
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('config') override config: GroupedBarsConfig<Datum, TOrdinalValue>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  groupScale: any;
-
-  override drawMarks(): void {
-    this.setGroupScale();
-    super.drawMarks();
-  }
-
-  setGroupScale(): void {
-    if (this.config.dimensions.ordinal === 'x') {
-      this.groupScale = scaleBand(this.config.color.calculatedDomain, [
-        0,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (this.scales.x as any).bandwidth(),
-      ]).padding(this.config.intraGroupPadding);
-    } else {
-      this.groupScale = scaleBand(this.config.color.calculatedDomain, [
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (this.scales.y as any).bandwidth(),
-        0,
-      ]).padding(this.config.intraGroupPadding);
-    }
-  }
-
-  override getBarColor(d: BarDatum<TOrdinalValue>): string {
-    return this.scales.color(d.color);
-  }
-
-  override getBarXOrdinal(d: BarDatum<TOrdinalValue>): number {
-    return this.scales.x(d.ordinal) + this.groupScale(d.color);
-  }
-
-  override getBarY(d: BarDatum<TOrdinalValue>): number {
-    if (this.config.dimensions.ordinal === 'x') {
-      return this.getBarYQuantitative(d);
-    } else {
-      return this.getBarYOrdinal(d);
-    }
-  }
-
-  override getBarYOrdinal(d: BarDatum<TOrdinalValue>): number {
-    return this.scales.y(d.ordinal) + this.groupScale(d.color);
-  }
-
-  override getBarYQuantitative(d: BarDatum<TOrdinalValue>): number {
-    return this.scales.y(d.quantitative);
-  }
-
-  override getBarWidthOrdinal(): number {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (this.groupScale as any).bandwidth();
-  }
-
-  override getBarHeightOrdinal(): number {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (this.groupScale as any).bandwidth();
-  }
-}

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

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { GroupedBarsEventsDirective } from './events/grouped-bars-events.directive';
-import { GroupedBarsComponent } from './grouped-bars.component';
-
-@NgModule({
-  imports: [GroupedBarsComponent, GroupedBarsEventsDirective],
-  exports: [GroupedBarsComponent, GroupedBarsEventsDirective],
-})
-export class VicGroupedBarsModule {}

package/src/lib/grouped-bars/index.ts

@@ -1,10 +0,0 @@
-export type {
-  BarsHost as GroupedBarsHost,
-  BarsInteractionOutput as GroupedBarsInteractionOutput,
-} from '../bars';
-export * from './config/grouped-bars-builder';
-export * from './config/grouped-bars-config';
-export * from './config/grouped-bars-options';
-export * from './events/grouped-bars-events.directive';
-export * from './grouped-bars.component';
-export * from './grouped-bars.module';

package/src/lib/image-download/image-download-config.ts

@@ -1,57 +0,0 @@
-import { safeAssign } from '@mathstack/app-kit';
-import { VicImage } from './image-download-enums';
-import { ImageDownloadOptions } from './image-download-options';
-
-const DEFAULT = {
-  fontEmbedCSS: undefined,
-  backgroundColor: '#fff',
-  quality: 1,
-};
-
-export class VicJpegImageConfig implements ImageDownloadOptions {
-  backgroundColor: string;
-  containerNode: HTMLElement;
-  fileName: string;
-  filter: (domNode: HTMLElement) => boolean;
-  fontEmbedCSS: string;
-  imageType: string;
-  quality: number;
-
-  constructor(options?: Partial<ImageDownloadOptions>) {
-    safeAssign(this, DEFAULT);
-    safeAssign(this, options);
-    this.imageType = VicImage.jpeg;
-  }
-}
-
-export class VicPngImageConfig implements ImageDownloadOptions {
-  backgroundColor: string;
-  containerNode: HTMLElement;
-  fileName: string;
-  filter: (domNode: HTMLElement) => boolean;
-  fontEmbedCSS: string;
-  imageType: string;
-  quality: number;
-
-  constructor(options?: Partial<ImageDownloadOptions>) {
-    safeAssign(this, DEFAULT);
-    safeAssign(this, options);
-    this.imageType = VicImage.png;
-  }
-}
-
-export class VicSvgImageConfig implements ImageDownloadOptions {
-  backgroundColor: string;
-  containerNode: HTMLElement;
-  fileName: string;
-  filter: (domNode: HTMLElement) => boolean;
-  fontEmbedCSS: string;
-  imageType: string;
-  quality: number;
-
-  constructor(options?: Partial<ImageDownloadOptions>) {
-    safeAssign(this, DEFAULT);
-    safeAssign(this, options);
-    this.imageType = VicImage.svg;
-  }
-}

package/src/lib/image-download/image-download-enums.ts

@@ -1,7 +0,0 @@
-export type VicImageType = keyof typeof VicImage;
-
-export enum VicImage {
-  jpeg = 'jpeg',
-  png = 'png',
-  svg = 'svg',
-}

package/src/lib/image-download/image-download-options.ts

@@ -1,14 +0,0 @@
-export interface ImageDownloadOptions {
-  backgroundColor: string;
-  containerNode: HTMLElement;
-  fileName: string;
-  filter: (domNode: HTMLElement) => boolean;
-  /**
-   * Disables external fonts from being read in
-   * Supply with custom css fallback; or set to undefined to read external fonts
-   * (will oftentimes get security errors)
-   */
-  fontEmbedCSS: string;
-  imageType: string;
-  quality: number;
-}

package/src/lib/image-download/image-download.service.ts

@@ -1,70 +0,0 @@
-import { Injectable } from '@angular/core';
-import * as domToImage from 'html-to-image';
-import {
-  VicJpegImageConfig,
-  VicPngImageConfig,
-  VicSvgImageConfig,
-} from './image-download-config';
-import { VicImage } from './image-download-enums';
-
-@Injectable({ providedIn: 'root' })
-export class VicImageDownloadService {
-  domToImage = domToImage;
-
-  /**
-   * @param imageConfig
-   * @returns fontEmbedCSS -- scans stylesheets for font files and base64 encodes them,
-   * reuse this value in imageConfig for subsequent downloads to avoid
-   * re-encoding fonts (slight performance boost)
-   */
-  async downloadImage(
-    imageConfig: VicJpegImageConfig | VicPngImageConfig | VicSvgImageConfig
-  ): Promise<string | void> {
-    let dataUrl;
-    if (imageConfig.fontEmbedCSS === undefined) {
-      imageConfig.fontEmbedCSS = await domToImage.getFontEmbedCSS(
-        imageConfig.containerNode
-      );
-    }
-    const sizedImageConfig = {
-      ...imageConfig,
-      width: imageConfig.containerNode.scrollWidth,
-      height: imageConfig.containerNode.scrollHeight,
-    };
-    switch (imageConfig.imageType) {
-      case VicImage.jpeg:
-        dataUrl = await this.domToImage.toJpeg(
-          imageConfig.containerNode,
-          sizedImageConfig
-        );
-        break;
-      case VicImage.png:
-        dataUrl = await this.domToImage.toPng(
-          imageConfig.containerNode,
-          sizedImageConfig
-        );
-        break;
-      case VicImage.svg:
-        dataUrl = await this.domToImage.toSvg(
-          imageConfig.containerNode,
-          sizedImageConfig
-        );
-        break;
-      default:
-        break;
-    }
-
-    this.createLinkAndClick(
-      dataUrl,
-      `${imageConfig.fileName}.${imageConfig.imageType}`
-    );
-    return imageConfig.fontEmbedCSS;
-  }
-
-  createLinkAndClick(dataUrl: string, fileName: string) {
-    const link = document.createElement('a');
-    link.download = fileName;
-    link.href = dataUrl;
-    link.click();
-  }
-}

package/src/lib/image-download/index.ts

@@ -1,4 +0,0 @@
-export * from './image-download-config';
-export * from './image-download-enums';
-export * from './image-download-options';
-export * from './image-download.service';