@mathstack/viz 1.1.5 → 2.0.3

package/{lib/geographies/index.d.ts → src/lib/geographies/index.ts}

@@ -1,32 +1,32 @@
-export * from './config/geographies-builder';
-export * from './config/geographies-config';
-export * from './config/geographies-options';
-export * from './config/layers/attribute-data-layer/attribute-data-layer';
-export * from './config/layers/attribute-data-layer/attribute-data-layer-builder';
-export * from './config/layers/attribute-data-layer/attribute-data-layer-options';
-export * from './config/layers/attribute-data-layer/dimensions/attribute-data-bin-enums';
-export * from './config/layers/attribute-data-layer/dimensions/attribute-data-bin-types';
-export * from './config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins';
-export * from './config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-options';
-export * from './config/layers/attribute-data-layer/dimensions/custom-breaks/custom-breaks-bins';
-export * from './config/layers/attribute-data-layer/dimensions/custom-breaks/custom-breaks-bins-options';
-export * from './config/layers/attribute-data-layer/dimensions/equal-frequencies-bins/equal-frequencies-bins';
-export * from './config/layers/attribute-data-layer/dimensions/equal-frequencies-bins/equal-frequencies-bins-options';
-export * from './config/layers/attribute-data-layer/dimensions/equal-value-ranges-bins/equal-value-ranges-bins';
-export * from './config/layers/attribute-data-layer/dimensions/equal-value-ranges-bins/equal-value-ranges-bins-options';
-export * from './config/layers/attribute-data-layer/dimensions/no-bins/no-bins';
-export * from './config/layers/attribute-data-layer/dimensions/no-bins/no-bins-options';
-export * from './config/layers/geojson-properties-layer/geojson-properties-layer';
-export * from './config/layers/geojson-properties-layer/geojson-properties-layer-builder';
-export * from './config/layers/geojson-properties-layer/geojson-properties-layer-options';
-export * from './config/layers/labels/geographies-labels';
-export * from './config/layers/labels/geographies-labels-builder';
-export * from './config/layers/labels/geographies-labels-options';
-export * from './events/actions/geographies-click-actions';
-export * from './events/actions/geographies-hover-actions';
-export * from './events/actions/geographies-hover-move-actions';
-export * from './events/geographies-events.directive';
-export * from './events/geographies-interaction-output';
-export * from './geographies-feature';
-export * from './geographies.component';
-export * from './geographies.module';
+export * from './config/geographies-builder';
+export * from './config/geographies-config';
+export * from './config/geographies-options';
+export * from './config/layers/attribute-data-layer/attribute-data-layer';
+export * from './config/layers/attribute-data-layer/attribute-data-layer-builder';
+export * from './config/layers/attribute-data-layer/attribute-data-layer-options';
+export * from './config/layers/attribute-data-layer/dimensions/attribute-data-bin-enums';
+export * from './config/layers/attribute-data-layer/dimensions/attribute-data-bin-types';
+export * from './config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins';
+export * from './config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-options';
+export * from './config/layers/attribute-data-layer/dimensions/custom-breaks/custom-breaks-bins';
+export * from './config/layers/attribute-data-layer/dimensions/custom-breaks/custom-breaks-bins-options';
+export * from './config/layers/attribute-data-layer/dimensions/equal-frequencies-bins/equal-frequencies-bins';
+export * from './config/layers/attribute-data-layer/dimensions/equal-frequencies-bins/equal-frequencies-bins-options';
+export * from './config/layers/attribute-data-layer/dimensions/equal-value-ranges-bins/equal-value-ranges-bins';
+export * from './config/layers/attribute-data-layer/dimensions/equal-value-ranges-bins/equal-value-ranges-bins-options';
+export * from './config/layers/attribute-data-layer/dimensions/no-bins/no-bins';
+export * from './config/layers/attribute-data-layer/dimensions/no-bins/no-bins-options';
+export * from './config/layers/geojson-properties-layer/geojson-properties-layer';
+export * from './config/layers/geojson-properties-layer/geojson-properties-layer-builder';
+export * from './config/layers/geojson-properties-layer/geojson-properties-layer-options';
+export * from './config/layers/labels/geographies-labels';
+export * from './config/layers/labels/geographies-labels-builder';
+export * from './config/layers/labels/geographies-labels-options';
+export * from './events/actions/geographies-click-actions';
+export * from './events/actions/geographies-hover-actions';
+export * from './events/actions/geographies-hover-move-actions';
+export * from './events/geographies-events.directive';
+export * from './events/geographies-interaction-output';
+export * from './geographies-feature';
+export * from './geographies.component';
+export * from './geographies.module';

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

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

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

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

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

@@ -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 { 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

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

@@ -0,0 +1,9 @@
+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/{lib/grouped-bars/index.d.ts → src/lib/grouped-bars/index.ts}

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

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

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

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

@@ -0,0 +1,14 @@
+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;
+}