@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/stacked-area/config/stacked-area-builder.ts

@@ -0,0 +1,264 @@
+import { Injectable } from '@angular/core';
+import { safeAssign } from '@mathstack/app-kit';
+import {
+  CurveFactory,
+  curveLinear,
+  InternMap,
+  Series,
+  stackOffsetNone,
+  stackOrderNone,
+} from 'd3';
+import { ContinuousValue, DataValue } from '../../core/types/values';
+import { DateChartPositionDimensionBuilder } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position-builder';
+import { NumberChartPositionDimensionBuilder } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position-builder';
+import { OrdinalVisualValueDimensionBuilder } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value-builder';
+import { PrimaryMarksBuilder } from '../../marks/primary-marks/config/primary-marks-builder';
+import { StackedAreaConfig } from './stacked-area-config';
+
+const DEFAULT = {
+  _curve: curveLinear,
+  _stackOrder: stackOrderNone,
+  _stackOffset: stackOffsetNone,
+};
+
+/**
+ * Builds a configuration object for a StackedAreaComponent.
+ *
+ * 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: [VicStackedAreaBuilder]` in the component decorator)
+ *
+ * The first generic parameter, Datum, is the type of the data that will be used to create the stacked area chart.
+ *
+ * The second generic parameter, TCategoricalValue, is the type of the categorical data that will be used to stack the areas.
+ */
+@Injectable()
+export class VicStackedAreaConfigBuilder<
+  Datum,
+  CategoricalDomain extends DataValue,
+> extends PrimaryMarksBuilder<Datum> {
+  private colorDimensionBuilder: OrdinalVisualValueDimensionBuilder<
+    Datum,
+    CategoricalDomain,
+    string
+  >;
+  private _categoricalOrder: CategoricalDomain[];
+  private _curve: CurveFactory;
+  private _stackOrder: (
+    series: Series<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >
+  ) => Iterable<number>;
+  private _stackOffset: (
+    series: Series<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >[],
+    order: number[]
+  ) => void;
+  private xDimensionBuilder:
+    | NumberChartPositionDimensionBuilder<Datum>
+    | DateChartPositionDimensionBuilder<Datum>;
+  private yDimensionBuilder: NumberChartPositionDimensionBuilder<Datum>;
+
+  constructor() {
+    super();
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * REQUIRED. Sets the categorical dimension for the stacked area chart.
+   */
+  color(
+    color: (
+      color: OrdinalVisualValueDimensionBuilder<
+        Datum,
+        CategoricalDomain,
+        string
+      >
+    ) => void
+  ): this {
+    this.colorDimensionBuilder = new OrdinalVisualValueDimensionBuilder<
+      Datum,
+      CategoricalDomain,
+      string
+    >();
+    color(this.colorDimensionBuilder);
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Allows user to provide a custom order for the categories of data / the stack.
+   *
+   * If not provided, the order will be determined by d3.
+   */
+  categoricalOrder(value: CategoricalDomain[]): this {
+    if (value === null) {
+      this._categoricalOrder = undefined;
+      return this;
+    }
+    this._categoricalOrder = value;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets the curve factory for the line.
+   *
+   * @default curveLinear
+   */
+  curve(value: null): this;
+  curve(value: CurveFactory): this;
+  curve(value: CurveFactory | null): this {
+    if (value === null) {
+      this._curve = DEFAULT._curve;
+      return this;
+    }
+    this._curve = value;
+    return this;
+  }
+
+  /**
+   * OPTIONAL: Sets the order of the stack.
+   *
+   * @default stackOrderNone
+   */
+  stackOrder(stackOrder: null): this;
+  stackOrder(
+    stackOrder: (
+      series: Series<
+        [ContinuousValue, InternMap<CategoricalDomain, number>],
+        CategoricalDomain
+      >
+    ) => Iterable<number>
+  ): this;
+  stackOrder(
+    stackOrder:
+      | ((
+          series: Series<
+            [ContinuousValue, InternMap<CategoricalDomain, number>],
+            CategoricalDomain
+          >
+        ) => Iterable<number>)
+      | null
+  ): this {
+    if (stackOrder === null) {
+      this._stackOrder = DEFAULT._stackOrder;
+      return this;
+    }
+    this._stackOrder = stackOrder;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets the offset of the stack.
+   *
+   * @default stackOffsetNone
+   */
+  stackOffset(stackOffset: null): this;
+  stackOffset(
+    stackOffset: (
+      series: Series<
+        [ContinuousValue, InternMap<CategoricalDomain, number>],
+        CategoricalDomain
+      >[],
+      order: number[]
+    ) => void
+  ): this;
+  stackOffset(
+    stackOffset:
+      | ((
+          series: Series<
+            [ContinuousValue, InternMap<CategoricalDomain, number>],
+            CategoricalDomain
+          >[],
+          order: number[]
+        ) => void)
+      | null
+  ): this {
+    if (stackOffset === null) {
+      this._stackOffset = DEFAULT._stackOffset;
+      return this;
+    }
+    this._stackOffset = stackOffset;
+    return this;
+  }
+
+  /**
+   * REQUIRED. Sets the x dimension for the stacked area chart when using Date data.
+   */
+  xDate(x: null): this;
+  xDate(x: (x: DateChartPositionDimensionBuilder<Datum>) => void): this;
+  xDate(
+    x: ((x: DateChartPositionDimensionBuilder<Datum>) => void) | null
+  ): this {
+    if (x === null) return this;
+    this.xDimensionBuilder = new DateChartPositionDimensionBuilder<Datum>();
+    x(this.xDimensionBuilder);
+    return this;
+  }
+
+  /**
+   * REQUIRED. Sets the x dimension for the stacked area chart when using numeric data.
+   */
+  xNumeric(x: null): this;
+  xNumeric(x: (x: NumberChartPositionDimensionBuilder<Datum>) => void): this;
+  xNumeric(
+    x: ((x: NumberChartPositionDimensionBuilder<Datum>) => void) | null
+  ): this {
+    // do not reset the xDimensionBuilder if null is passed. if xNumeric is not called, then xDate will be called
+    // allow for
+    // .xNumber((x) => condition ? x.stuff() : null)
+    // .xDate((x) => !condition ? x.stuff() : null)
+    if (x === null) return this;
+    this.xDimensionBuilder = new NumberChartPositionDimensionBuilder<Datum>();
+    x(this.xDimensionBuilder);
+    return this;
+  }
+
+  /**
+   * REQUIRED. Sets the y dimension for the stacked area chart.
+   */
+  y(y: (y: NumberChartPositionDimensionBuilder<Datum>) => void): this {
+    this.yDimensionBuilder = new NumberChartPositionDimensionBuilder<Datum>();
+    y(this.yDimensionBuilder);
+    return this;
+  }
+
+  /**
+   * REQUIRED. Builds the configuration object for the stacked area chart.
+   */
+  getConfig(): StackedAreaConfig<Datum, CategoricalDomain> {
+    this.validateBuilder();
+    return new StackedAreaConfig({
+      marksClass: 'vic-stacked-area',
+      color: this.colorDimensionBuilder._build('Color'),
+      categoricalOrder: this._categoricalOrder,
+      curve: this._curve,
+      data: this._data,
+      datumClass: this._datumClass,
+      mixBlendMode: this._mixBlendMode,
+      stackOrder: this._stackOrder,
+      stackOffset: this._stackOffset,
+      x: this.xDimensionBuilder._build('X'),
+      y: this.yDimensionBuilder._build('Y'),
+    });
+  }
+
+  protected override validateBuilder(): void {
+    super.validateBuilder('Stacked Area');
+    if (!this.colorDimensionBuilder) {
+      throw new Error(
+        'Stacked Area Builder: Color dimension must be created. Please use method `color` to set the categorical dimension.'
+      );
+    }
+    if (!this.xDimensionBuilder) {
+      throw new Error(
+        'Stacked Area Builder: X dimension must be created. Please use method `xNumeric` or `xDate` to set the x dimension.'
+      );
+    }
+    if (!this.yDimensionBuilder) {
+      throw new Error(
+        'Stacked Area Builder: Y dimension must be created. Please use method `y` to set the y dimension.'
+      );
+    }
+  }
+}

package/src/lib/stacked-area/config/stacked-area-config.spec.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DateChartPositionDimension } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position';
+import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
+import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
+import { VicStackedAreaConfigBuilder } from './stacked-area-builder';
+import { StackedAreaConfig } from './stacked-area-config';
+
+type Datum = { date: Date; value: number; category: string };
+const data = [
+  { date: new Date('2020-01-01'), value: 1, category: 'a' },
+  { date: new Date('2020-01-02'), value: 2, category: 'a' },
+  { date: new Date('2020-01-03'), value: 3, category: 'a' },
+  { date: new Date('2020-01-01'), value: 4, category: 'b' },
+  { date: new Date('2020-01-02'), value: 5, category: 'b' },
+  { date: new Date('2020-01-03'), value: 6, category: 'b' },
+];
+function createConfig(): StackedAreaConfig<Datum, string> {
+  return new VicStackedAreaConfigBuilder<Datum, string>()
+    .data(data)
+    .xDate((dimension) => dimension.valueAccessor((d) => d.date))
+    .y((dimension) => dimension.valueAccessor((d) => d.value))
+    .color((dimension) => dimension.valueAccessor((d) => d.category))
+    .getConfig();
+}
+
+describe('StackedAreaConfig', () => {
+  let config: StackedAreaConfig<Datum, string>;
+  beforeEach(() => {
+    config = undefined;
+  });
+  describe('initPropertiesFromData()', () => {
+    beforeEach(() => {
+      spyOn(
+        StackedAreaConfig.prototype as any,
+        'setDimensionPropertiesFromData'
+      );
+      spyOn(StackedAreaConfig.prototype as any, 'setValueIndicies');
+      spyOn(StackedAreaConfig.prototype as any, 'setSeries');
+      spyOn(
+        StackedAreaConfig.prototype as any,
+        'initQuantitativeDomainFromStack'
+      );
+      config = createConfig();
+    });
+    it('calls setDimensionPropertiesFromData once', () => {
+      expect(
+        (config as any).setDimensionPropertiesFromData
+      ).toHaveBeenCalledTimes(1);
+    });
+    it('calls setValueIndicies once', () => {
+      expect((config as any).setValueIndicies).toHaveBeenCalledTimes(1);
+    });
+    it('calls setSeries once', () => {
+      expect((config as any).setSeries).toHaveBeenCalledTimes(1);
+    });
+    it('calls initQuantitativeDomainFromStack once', () => {
+      expect(
+        (config as any).initQuantitativeDomainFromStack
+      ).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setDimensionPropertiesFromData()', () => {
+    beforeEach(() => {
+      spyOn(StackedAreaConfig.prototype as any, 'initPropertiesFromData');
+      spyOn(DateChartPositionDimension.prototype, 'setPropertiesFromData');
+      spyOn(NumberChartPositionDimension.prototype, 'setPropertiesFromData');
+      spyOn(OrdinalVisualValueDimension.prototype, 'setPropertiesFromData');
+      config = createConfig();
+      (config as any).setDimensionPropertiesFromData();
+    });
+    it('calls x.setPropertiesFromData once', () => {
+      expect(config.x.setPropertiesFromData).toHaveBeenCalledTimes(1);
+    });
+    it('calls y.setPropertiesFromData once', () => {
+      expect(config.y.setPropertiesFromData).toHaveBeenCalledTimes(1);
+    });
+    it('calls categorical.setPropertiesFromData once', () => {
+      expect(config.color.setPropertiesFromData).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setValueIndicies()', () => {
+    beforeEach(() => {
+      spyOn(StackedAreaConfig.prototype as any, 'initPropertiesFromData');
+    });
+    it('sets valueIndicies to an array of length 6', () => {
+      config = createConfig();
+      (config as any).setDimensionPropertiesFromData();
+      (config as any).setValueIndicies();
+      expect(config.valueIndices).toEqual([0, 1, 2, 3, 4, 5]);
+    });
+    it('sets valueIndicies to an array of length 3 if categorical domain is limited by user', () => {
+      config = new VicStackedAreaConfigBuilder<Datum, string>()
+        .data(data)
+        .xDate((dimension) => dimension.valueAccessor((d) => d.date))
+        .y((dimension) => dimension.valueAccessor((d) => d.value))
+        .color((dimension) =>
+          dimension.valueAccessor((d) => d.category).domain(['a'])
+        )
+        .getConfig();
+      (config as any).setDimensionPropertiesFromData();
+      (config as any).setValueIndicies();
+      expect(config.valueIndices).toEqual([0, 1, 2]);
+    });
+  });
+});

package/src/lib/stacked-area/config/stacked-area-config.ts

@@ -0,0 +1,109 @@
+import { safeAssign } from '@mathstack/app-kit';
+import {
+  CurveFactory,
+  extent,
+  InternMap,
+  range,
+  rollup,
+  Series,
+  SeriesPoint,
+  stack,
+} from 'd3';
+import { ContinuousValue, DataValue } from '../../core/types/values';
+import { DateChartPositionDimension } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position';
+import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
+import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
+import { DataMarksOptions } from '../../marks/config/marks-options';
+import { XyPrimaryMarksConfig } from '../../marks/xy-marks/xy-primary-marks/xy-primary-marks-config';
+import { StackedAreaOptions } from './stacked-area-options';
+
+export type StackedAreaDatum<CategoricalDomain> = (SeriesPoint<
+  [ContinuousValue, InternMap<CategoricalDomain, number>]
+> & {
+  i: number;
+})[];
+
+export class StackedAreaConfig<Datum, CategoricalDomain extends DataValue>
+  extends XyPrimaryMarksConfig<Datum>
+  implements DataMarksOptions<Datum>
+{
+  color: OrdinalVisualValueDimension<Datum, CategoricalDomain, string>;
+  categoricalOrder: CategoricalDomain[];
+  curve: CurveFactory;
+  stackOrder: (
+    series: Series<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >
+  ) => Iterable<number>;
+  stackOffset: (
+    series: Series<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >[],
+    order: number[]
+  ) => void;
+  x: DateChartPositionDimension<Datum> | NumberChartPositionDimension<Datum>;
+  y: NumberChartPositionDimension<Datum>;
+  series: StackedAreaDatum<CategoricalDomain>[];
+
+  constructor(options: StackedAreaOptions<Datum, CategoricalDomain>) {
+    super();
+    safeAssign(this, options);
+    this.initPropertiesFromData();
+  }
+
+  protected initPropertiesFromData(): void {
+    this.setDimensionPropertiesFromData();
+    this.setValueIndicies();
+    this.setSeries();
+    this.initQuantitativeDomainFromStack();
+  }
+
+  private setDimensionPropertiesFromData(): void {
+    this.x.setPropertiesFromData(this.data);
+    this.y.setPropertiesFromData(this.data);
+    this.color.setPropertiesFromData(this.data);
+  }
+
+  private setValueIndicies(): void {
+    this.valueIndices = range(this.x.values.length).filter((i) =>
+      this.color.domainIncludes(this.color.values[i])
+    );
+  }
+
+  private setSeries(): void {
+    const rolledUpData = rollup(
+      this.valueIndices,
+      ([i]) => i,
+      (i) => this.x.values[i],
+      (i) => this.color.values[i]
+    );
+
+    const keys = this.categoricalOrder
+      ? this.categoricalOrder.slice().reverse()
+      : this.color.calculatedDomain;
+
+    this.series = stack<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >()
+      .keys(keys)
+      .value(([, I], category) => this.y.values[I.get(category)])
+      .order(this.stackOrder)
+      .offset(this.stackOffset)(Array.from(rolledUpData))
+      .map((s) =>
+        s.map((d) =>
+          Object.assign(d, {
+            i: d.data[1].get(s.key),
+          })
+        )
+      );
+  }
+
+  private initQuantitativeDomainFromStack(): void {
+    if (this.y.domain === undefined) {
+      this.y.setDomain(extent(this.series.flat(2)));
+    }
+  }
+}

package/src/lib/stacked-area/config/stacked-area-options.ts

@@ -0,0 +1,28 @@
+import { CurveFactory, InternMap, Series } from 'd3';
+import { ContinuousValue, DataValue } from '../../core/types/values';
+import { DateChartPositionDimension } from '../../data-dimensions/continuous-quantitative/date-chart-position/date-chart-position';
+import { NumberChartPositionDimension } from '../../data-dimensions/continuous-quantitative/number-chart-position/number-chart-position';
+import { OrdinalVisualValueDimension } from '../../data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value';
+import { DataMarksOptions } from '../../marks/config/marks-options';
+
+export interface StackedAreaOptions<Datum, CategoricalDomain extends DataValue>
+  extends DataMarksOptions<Datum>, DataMarksOptions<Datum> {
+  color: OrdinalVisualValueDimension<Datum, CategoricalDomain, string>;
+  categoricalOrder: CategoricalDomain[];
+  curve: CurveFactory;
+  stackOrder: (
+    series: Series<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >
+  ) => Iterable<number>;
+  stackOffset: (
+    series: Series<
+      [ContinuousValue, InternMap<CategoricalDomain, number>],
+      CategoricalDomain
+    >[],
+    order: number[]
+  ) => void;
+  x: DateChartPositionDimension<Datum> | NumberChartPositionDimension<Datum>;
+  y: NumberChartPositionDimension<Datum>;
+}

package/src/lib/stacked-area/events/actions/stacked-area-hover-move-actions.ts

@@ -0,0 +1,17 @@
+import { DataValue } from '../../../core/types/values';
+import { EventType, HoverMoveAction } from '../../../events';
+import { StackedAreaHost } from '../stacked-area-events.directive';
+
+export class StackedAreaHoverMoveEmitTooltipData<
+  Datum,
+  TCategoricalValue extends DataValue,
+> implements HoverMoveAction<StackedAreaHost<Datum, TCategoricalValue>> {
+  onStart(host: StackedAreaHost<Datum, TCategoricalValue>): void {
+    const tooltipData = host.getInteractionOutput(EventType.HoverMove);
+    host.emitInteractionOutput(tooltipData);
+  }
+
+  onEnd(host: StackedAreaHost<Datum, TCategoricalValue>): void {
+    host.emitInteractionOutput(null);
+  }
+}

package/src/lib/stacked-area/events/stacked-area-events.directive.spec.ts

@@ -0,0 +1,168 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Renderer2 } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { selectAll } from 'd3';
+import { of } from 'rxjs';
+import { EventType } from '../../events';
+import { STACKED_AREA } from '../stacked-area.component';
+import { StackedAreaEventsDirective } from './stacked-area-events.directive';
+
+describe('StackedAreaEventsDirective', () => {
+  let directive: StackedAreaEventsDirective<any, any, any>;
+  let stackedAreaStub: any;
+
+  beforeEach(() => {
+    stackedAreaStub = {
+      stackedAreas$: of(selectAll([document.createElement('path')])),
+      config: {
+        x: { values: [1, 2, 3] },
+        valueIndices: [0, 1, 2],
+        series: [
+          [
+            { i: 0, 0: 0, 1: 10 },
+            { i: 1, 0: 10, 1: 20 },
+            { i: 2, 0: 20, 1: 30 },
+          ],
+        ],
+      },
+      scales: {
+        x: (v: any) => v,
+        y: (v: any) => v,
+      },
+      ranges: { x: [0, 100], y: [100, 0] },
+      getTooltipData: () => ({ foo: 'bar' }),
+      chart: {
+        svgRef: { nativeElement: { getBBox: () => ({ height: 100 }) } },
+      },
+    };
+    TestBed.configureTestingModule({
+      providers: [
+        StackedAreaEventsDirective,
+        Renderer2,
+        { provide: STACKED_AREA, useValue: stackedAreaStub },
+      ],
+    });
+    directive = TestBed.inject(StackedAreaEventsDirective);
+    directive.stackedArea = stackedAreaStub;
+  });
+
+  it('should get elements from stackedAreas$', (done) => {
+    directive.getElements().subscribe((els: any) => {
+      expect(Array.isArray(els)).toBeTrue();
+      expect(els[0] instanceof Element).toBeTrue();
+      done();
+    });
+  });
+
+  it('should call runActions with hoverMoveActions on onEnter', () => {
+    const action = { initialize: jasmine.createSpy('initialize') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    directive.onEnter({} as PointerEvent, {} as Element);
+    expect(action.initialize).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromPointer, setClosestXIndicies, setClosestDatumPosition, and run onStart for each hoverMoveAction on onMove', () => {
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive, 'setPositionsFromPointer');
+    spyOn(directive, 'pointerIsInChartArea').and.returnValue(true);
+    spyOn(directive, 'setClosestXIndicies').and.callThrough();
+    spyOn(directive, 'setClosestDatumPosition').and.callThrough();
+    directive.closestXIndicies = [0];
+    directive.positionX = 1;
+    directive.positionY = 5;
+    directive.onMove({} as PointerEvent, {} as Element);
+    expect(directive.setPositionsFromPointer).toHaveBeenCalled();
+    expect(directive.setClosestXIndicies).toHaveBeenCalled();
+    expect(directive.setClosestDatumPosition).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverMoveAction on onLeave', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect(directive.resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromPointer and run clickActions on onClick', () => {
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.clickActions = [action];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Click;
+    spyOn(directive, 'setPositionsFromPointer');
+    directive.onClick({} as PointerEvent, {} as Element);
+    expect(directive.setPositionsFromPointer).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call onStart/onEnd for inputEventActions on onInputEvent', () => {
+    const onStart = jasmine.createSpy('onStart');
+    const onEnd = jasmine.createSpy('onEnd');
+    directive.inputEventActions = [{ onStart, onEnd } as any];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Input;
+    directive.onInputEvent('foo');
+    expect(onStart).toHaveBeenCalledWith(directive, 'foo');
+    directive.onInputEvent(null);
+    expect(onEnd).toHaveBeenCalledWith(directive, null);
+  });
+
+  it('should run onEnd for each clickAction and resetDirective on onClickRemove if not prevented', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    spyOn(directive, 'resetDirective');
+    directive.onClickRemove();
+    expect(action.onEnd).toHaveBeenCalled();
+    expect(directive.resetDirective).toHaveBeenCalled();
+  });
+
+  it('should return true if pointer is in chart area', () => {
+    directive.positionX = 50;
+    directive.positionY = 50;
+    expect(directive.pointerIsInChartArea()).toBeTrue();
+  });
+
+  it('should return false if pointer is outside chart area', () => {
+    directive.positionX = -10;
+    directive.positionY = 50;
+    expect(directive.pointerIsInChartArea()).toBeFalse();
+  });
+
+  it('should set closestXIndicies for number x values', () => {
+    directive.stackedArea.config.x.values = [1, 2, 3];
+    directive.stackedArea.config.valueIndices = [0, 1, 2];
+    directive.stackedArea.scales.x = (v: any) => v;
+    directive.positionX = 2;
+    directive.setClosestXIndicies();
+    expect(directive.closestXIndicies).toContain(1);
+  });
+
+  it('should emit interaction output', () => {
+    spyOn(directive.interactionOutput, 'emit');
+    const output = {
+      data: [],
+      positionX: 1,
+      hoveredAreaTop: 10,
+      hoveredAreaBottom: 0,
+      hoveredDatum: {} as any,
+      type: EventType.HoverMove,
+    };
+    directive.emitInteractionOutput(output as any);
+    expect(directive.interactionOutput.emit).toHaveBeenCalledWith(
+      output as any
+    );
+  });
+});