@mathstack/viz 1.1.4 → 2.0.3

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

@@ -0,0 +1,272 @@
+import { Directive, EventEmitter, Input, Output, inject } from '@angular/core';
+import { InternSet, least } from 'd3';
+import { Observable, map } from 'rxjs';
+import { ContinuousValue, DataValue } from '../../core/types/values';
+import { isDate } from '../../core/utilities/type-guards';
+import {
+  DEFAULT_TOOLTIP_Y_OFFSET,
+  EventAction,
+  EventType,
+  EventsDirective,
+  HoverMoveAction,
+  InputEventAction,
+  MarksHost,
+  UnlistenFunction,
+} from '../../events';
+import { TooltipPosition } from '../../tooltips';
+import { STACKED_AREA, StackedAreaComponent } from '../stacked-area.component';
+import { StackedAreaInteractionOutput } from './stacked-area-interaction-output';
+import { StackedAreaTooltipPositioner } from './stacked-area-tooltip-positioner';
+
+export type StackedAreaHost<
+  Datum,
+  TCategoricalValue extends DataValue,
+  TStackedAreaComponent extends StackedAreaComponent<Datum, TCategoricalValue> =
+    StackedAreaComponent<Datum, TCategoricalValue>,
+> = MarksHost<
+  StackedAreaInteractionOutput<Datum, TCategoricalValue>,
+  TStackedAreaComponent
+>;
+
+@Directive({
+  selector: '[vicStackedAreaEvents]',
+})
+export class StackedAreaEventsDirective<
+  Datum,
+  TCategoricalValue extends DataValue,
+  TStackedAreaComponent extends StackedAreaComponent<Datum, TCategoricalValue> =
+    StackedAreaComponent<Datum, TCategoricalValue>,
+>
+  extends EventsDirective<StackedAreaHost<Datum, TCategoricalValue>>
+  implements StackedAreaHost<Datum, TCategoricalValue>
+{
+  @Input()
+  hoverMoveActions:
+    | HoverMoveAction<
+        StackedAreaHost<Datum, TCategoricalValue>,
+        StackedAreaInteractionOutput<Datum, TCategoricalValue>
+      >[]
+    | null;
+  @Input()
+  clickActions:
+    | EventAction<
+        StackedAreaHost<Datum, TCategoricalValue>,
+        StackedAreaInteractionOutput<Datum, TCategoricalValue>
+      >[]
+    | null;
+  @Input()
+  inputEventActions: InputEventAction<
+    StackedAreaHost<Datum, TCategoricalValue>,
+    StackedAreaInteractionOutput<Datum, TCategoricalValue>
+  >[];
+  @Output() interactionOutput = new EventEmitter<StackedAreaInteractionOutput<
+    Datum,
+    TCategoricalValue
+  > | null>();
+
+  closestXIndicies: number[];
+  categoryYMin: number;
+  categoryYMax: number;
+  categoryIndex: number;
+
+  public stackedArea = inject<TStackedAreaComponent>(STACKED_AREA);
+
+  get marks(): StackedAreaComponent<Datum, TCategoricalValue> {
+    return this.stackedArea;
+  }
+
+  getElements(): Observable<Element[]> {
+    return this.stackedArea.stackedAreas$.pipe(map((sel) => sel.nodes()));
+  }
+
+  setupListeners(elements: Element[]): UnlistenFunction[] {
+    if (this.inputEventActions?.length && this.inputEvent$) {
+      this.events.push(EventType.Input);
+    }
+
+    return this.bindEventListeners(
+      elements,
+      this.buildInteractionListeners({
+        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),
+        },
+      })
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onEnter(_: PointerEvent, __: Element): void {
+    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);
+      if (this.pointerIsInChartArea()) {
+        this.setClosestXIndicies();
+        this.setClosestDatumPosition();
+        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.HoverMove)) {
+      this.hoverMoveActions.forEach((action) => action.onEnd(this.asHost()));
+    }
+    this.resetDirective();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onClick(event: PointerEvent, _: Element): void {
+    if (this.isEventAllowed(EventType.Click)) {
+      this.setPositionsFromPointer(event);
+      this.runActions(this.clickActions, (a) => a.onStart(this.asHost()));
+    }
+  }
+
+  onInputEvent(inputValue: unknown): void {
+    if (this.isEventAllowed(EventType.Input)) {
+      if (inputValue === null || inputValue === undefined) {
+        this.inputEventActions.forEach((action) =>
+          action.onEnd(this.asHost(), inputValue)
+        );
+      } else {
+        this.inputEventActions.forEach((action) =>
+          action.onStart(this.asHost(), inputValue)
+        );
+      }
+    }
+  }
+
+  onClickRemove(): void {
+    if (!this.preventAction.click) {
+      this.runActions(this.clickActions, (a) => a.onEnd(this.asHost()));
+      this.resetDirective();
+    }
+  }
+
+  setPositionsFromElement(): void {
+    return;
+  }
+
+  pointerIsInChartArea(): boolean {
+    return (
+      this.positionX > this.stackedArea.ranges.x[0] &&
+      this.positionX < this.stackedArea.ranges.x[1] &&
+      this.positionY > this.stackedArea.ranges.y[1] &&
+      this.positionY < this.stackedArea.ranges.y[0]
+    );
+  }
+
+  setClosestXIndicies(): void {
+    const uniqueXValues = [
+      ...new InternSet<ContinuousValue>(this.stackedArea.config.x.values),
+    ];
+    const closestXValue = least(uniqueXValues, (x) =>
+      Math.abs(this.stackedArea.scales.x(x) - this.positionX)
+    );
+    if (isDate(closestXValue)) {
+      this.closestXIndicies = this.stackedArea.config.valueIndices.filter(
+        (i) =>
+          (this.stackedArea.config.x.values[i] as Date).getTime() ===
+          closestXValue.getTime()
+      );
+    } else {
+      this.closestXIndicies = this.stackedArea.config.valueIndices.filter(
+        (i) => this.stackedArea.config.x.values[i] === closestXValue
+      );
+    }
+  }
+
+  setClosestDatumPosition(): void {
+    const dataAtXValue = this.stackedArea.config.series
+      .flatMap((strat) => strat)
+      .filter((d) => this.closestXIndicies.includes(d.i));
+    const coordinateData = dataAtXValue.map((d) => ({
+      categoryYMin: this.stackedArea.scales.y(d[1]),
+      categoryYMax: this.stackedArea.scales.y(d[0]),
+      i: d.i,
+    }));
+    const closestDatumIndex = coordinateData.findIndex(
+      (d) =>
+        this.positionY >= d.categoryYMin && this.positionY <= d.categoryYMax
+    );
+    let closestDatum;
+    if (closestDatumIndex !== -1) {
+      closestDatum = coordinateData[closestDatumIndex];
+    }
+    this.categoryYMin = closestDatum?.categoryYMin;
+    this.categoryYMax = closestDatum?.categoryYMax;
+    this.categoryIndex = closestDatum ? closestDatumIndex : undefined;
+  }
+
+  getInteractionOutput(
+    type: EventType
+  ): StackedAreaInteractionOutput<Datum, TCategoricalValue> {
+    const tooltipData = this.stackedArea.getTooltipData(
+      this.closestXIndicies,
+      this.categoryYMin,
+      this.categoryYMax,
+      this.categoryIndex
+    );
+    const position = new StackedAreaTooltipPositioner(tooltipData.anchor);
+
+    return {
+      ...tooltipData,
+      defaultPosition: position.fromAnchor('area', {
+        x: 0,
+        y: DEFAULT_TOOLTIP_Y_OFFSET,
+      }),
+      defaultPositionFromArea: position.fromAnchor('area', {
+        x: 0,
+        y: DEFAULT_TOOLTIP_Y_OFFSET,
+      }),
+      defaultPositionFromChart: position.fromAnchor('chart', {
+        x: 0,
+        y: DEFAULT_TOOLTIP_Y_OFFSET,
+      }),
+      fromAnchor: (
+        relativeTo: 'area' | 'chart',
+        offset?: Partial<{ x: number; y: number }>
+      ) => {
+        return position.fromAnchor(relativeTo, {
+          x: offset?.x ?? 0,
+          y: offset?.y ?? DEFAULT_TOOLTIP_Y_OFFSET,
+        });
+      },
+      customPosition: (positions: TooltipPosition[]) => {
+        return position.customPosition(positions);
+      },
+      type,
+    };
+  }
+
+  emitInteractionOutput(
+    output: StackedAreaInteractionOutput<Datum, TCategoricalValue>
+  ): void {
+    this.interactionOutput.emit(output);
+  }
+
+  resetDirective(): void {
+    this.closestXIndicies = [];
+    this.categoryYMin = undefined;
+    this.categoryYMax = undefined;
+    this.categoryIndex = undefined;
+  }
+}

package/src/lib/stacked-area/events/stacked-area-interaction-output.ts

@@ -0,0 +1,33 @@
+import { DataValue } from '../../core/types/values';
+import { InteractionOutput } from '../../events/interaction-output';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { StackedAreaTooltipDatum } from '../stacked-area.component';
+
+export interface StackedAreaInteractionAnchor {
+  x: number;
+  yAreaTop: number;
+  yAreaBottom: number;
+  yChartTop: number;
+  yChartBottom: number;
+}
+
+export interface StackedAreaInteractionOutput<
+  Datum,
+  TCategoricalValue extends DataValue,
+> extends InteractionOutput<StackedAreaInteractionAnchor> {
+  data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[];
+  hoveredAreaDatum: StackedAreaTooltipDatum<Datum, TCategoricalValue>;
+  defaultPositionFromArea: HtmlTooltipCdkManagedPosition;
+  defaultPositionFromChart: HtmlTooltipCdkManagedPosition;
+  /**
+   * A method that positions the tooltip with a user specified offset from the tooltip's anchor point.
+   *
+   * @param offset - Optional offset from the anchor's x and y position.
+   * If not provided, defaults to { x: 0, y: 0 }.
+   * If provided, the x value is added to the anchor's x position (moves tooltip right) and the y value is subtracted from the anchor's y position (moves tooltip up).
+   */
+  fromAnchor: (
+    relativeTo: 'area' | 'chart',
+    offset?: Partial<{ x: number; y: number }>
+  ) => HtmlTooltipCdkManagedPosition;
+}

package/src/lib/stacked-area/events/stacked-area-tooltip-positioner.ts

@@ -0,0 +1,37 @@
+import { TooltipPositioner } from '../../events/tooltip-positioner';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { TooltipPositionBuilder } from '../../tooltips/html-tooltip/config/position/tooltip-position-builder';
+
+const DEFAULT_POSITIONS = [
+  new TooltipPositionBuilder().fromTopLeft().attachBottomCenter().getPosition(),
+  new TooltipPositionBuilder().fromTopLeft().attachBottomLeft().getPosition(),
+  new TooltipPositionBuilder().fromTopLeft().attachBottomRight().getPosition(),
+];
+
+export class StackedAreaTooltipPositioner extends TooltipPositioner {
+  constructor(
+    private anchor: {
+      x: number;
+      yAreaTop: number;
+      yAreaBottom: number;
+      yChartTop: number;
+      yChartBottom: number;
+    }
+  ) {
+    super();
+  }
+
+  fromAnchor(
+    relativeTo: 'area' | 'chart',
+    offset: { x: number; y: number }
+  ): HtmlTooltipCdkManagedPosition {
+    const positionsWithOffsets = new TooltipPositionBuilder().applyOffsets(
+      DEFAULT_POSITIONS,
+      this.anchor.x + offset.x,
+      relativeTo === 'area'
+        ? this.anchor.yAreaTop - offset.y
+        : this.anchor.yChartTop - offset.y
+    );
+    return new HtmlTooltipCdkManagedPosition(positionsWithOffsets);
+  }
+}

package/{lib/stacked-area/index.d.ts → src/lib/stacked-area/index.ts}

@@ -1,7 +1,7 @@
-export * from './config/stacked-area-builder';
-export * from './config/stacked-area-config';
-export * from './config/stacked-area-options';
-export * from './events/actions/stacked-area-hover-move-actions';
-export * from './events/stacked-area-events.directive';
-export * from './stacked-area.component';
-export * from './stacked-area.module';
+export * from './config/stacked-area-builder';
+export * from './config/stacked-area-config';
+export * from './config/stacked-area-options';
+export * from './events/actions/stacked-area-hover-move-actions';
+export * from './events/stacked-area-events.directive';
+export * from './stacked-area.component';
+export * from './stacked-area.module';

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

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { XyChartComponent } from '../charts/xy-chart/xy-chart.component';
+import { VicStackedAreaConfigBuilder } from './config/stacked-area-builder';
+import { StackedAreaComponent } from './stacked-area.component';
+
+type Datum = { date: Date; value: number; category: string };
+
+describe('StackedAreaComponent', () => {
+  let component: StackedAreaComponent<any, string>;
+  let fixture: ComponentFixture<StackedAreaComponent<any, string>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StackedAreaComponent],
+      providers: [XyChartComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StackedAreaComponent<any, string>);
+    component = fixture.componentInstance;
+    component.config = new VicStackedAreaConfigBuilder<Datum, string>()
+      .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' },
+      ])
+      .y((dimension) => dimension.valueAccessor((d) => d.value))
+      .xDate((dimension) => dimension.valueAccessor((d) => d.date))
+      .color((dimension) => dimension.valueAccessor((d) => d.category))
+      .getConfig();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,241 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  InjectionToken,
+  NgZone,
+} from '@angular/core';
+import { area, select, Selection, Transition } from 'd3';
+import { BehaviorSubject, filter } from 'rxjs';
+import { ChartComponent, XyChartComponent, XyChartScales } from '../charts';
+import { GenericScale } from '../core';
+import { DataValue } from '../core/types/values';
+import { ValueUtilities } from '../core/utilities/values';
+import { VIC_PRIMARY_MARKS } from '../marks/primary-marks/primary-marks';
+import { VicXyPrimaryMarks } from '../marks/xy-marks/xy-primary-marks/xy-primary-marks';
+import {
+  StackedAreaConfig,
+  StackedAreaDatum,
+} from './config/stacked-area-config';
+import { StackedAreaInteractionAnchor } from './events/stacked-area-interaction-output';
+
+// Ideally we would be able to use generic T with the component, but Angular doesn't yet support this, so we use unknown instead
+// https://github.com/angular/angular/issues/46815, https://github.com/angular/angular/pull/47461
+export const STACKED_AREA = new InjectionToken<
+  StackedAreaComponent<unknown, DataValue>
+>('StackedAreaComponent');
+
+export interface StackedAreaTooltipDatum<
+  Datum,
+  TCategoricalValue extends DataValue,
+> {
+  datum: Datum;
+  color: string;
+  values: {
+    x: string;
+    y: string;
+    color: TCategoricalValue;
+  };
+}
+
+type StackedAreaSvgElements = 'area';
+
+export type StackedAreaSelection<CategoricalDomain> = Selection<
+  SVGPathElement,
+  StackedAreaDatum<CategoricalDomain>,
+  SVGGElement,
+  unknown
+>;
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[vic-primary-marks-stacked-area]',
+  template: '',
+  styleUrls: ['./stacked-area.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: VIC_PRIMARY_MARKS, useExisting: StackedAreaComponent },
+    { provide: STACKED_AREA, useExisting: StackedAreaComponent },
+    { provide: ChartComponent, useExisting: XyChartComponent },
+  ],
+  host: {
+    '[class]': 'config.marksClass',
+  },
+})
+export class StackedAreaComponent<
+  Datum,
+  TCategoricalValue extends DataValue,
+> extends VicXyPrimaryMarks<
+  Datum,
+  StackedAreaConfig<Datum, TCategoricalValue>
+> {
+  area;
+  areas;
+  stackedAreas: BehaviorSubject<StackedAreaSelection<TCategoricalValue>> =
+    new BehaviorSubject(null);
+  stackedAreas$ = this.stackedAreas.asObservable().pipe(filter((s) => !!s));
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  override scales: { color: GenericScale<any, any> } & XyChartScales = {
+    x: undefined,
+    y: undefined,
+    color: undefined,
+    useTransition: undefined,
+  };
+  protected elRef = inject<ElementRef<SVGSVGElement>>(ElementRef);
+  private zone = inject(NgZone);
+
+  get class(): Record<StackedAreaSvgElements, string> {
+    return {
+      area: this.config.marksClass + '-area',
+    };
+  }
+
+  setChartScalesFromRanges(useTransition: boolean): void {
+    const x = this.config.x.getScaleFromRange(this.ranges.x);
+    const y = this.config.y.getScaleFromRange(this.ranges.y);
+    this.scales.color = this.config.color.getScale();
+    this.zone.run(() => {
+      this.chart.updateScales({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        x: x as unknown as GenericScale<any, any>,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        y: y as unknown as GenericScale<any, any>,
+        useTransition,
+      });
+    });
+  }
+
+  drawMarks(): void {
+    const transitionDuration = this.getTransitionDuration();
+    this.setArea();
+    this.drawAreas(transitionDuration);
+    this.updateStackedAreaElements();
+  }
+
+  setArea(): void {
+    this.area = area()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .x(({ i }: any) => this.scales.x(this.config.x.values[i]))
+      .y0(([y1]) => this.scales.y(y1))
+      .y1(([, y2]) => this.scales.y(y2))
+      .curve(this.config.curve);
+  }
+
+  drawAreas(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.areas = select(this.elRef.nativeElement)
+      .selectAll(`.${this.class.area}`)
+      .data(this.config.series)
+      .join(
+        (enter) =>
+          enter
+            .append('path')
+            .attr(
+              'class',
+              ([{ i }]) =>
+                `${this.class.area} ${this.config.datumClass(this.config.data[i], i)}`
+            )
+            // .property('key', ([{ i }]) => this.config.color.values[i])
+            .attr('fill', ([{ i }]) =>
+              this.scales.color(this.config.color.values[i])
+            )
+            .attr('d', this.area),
+        (update) =>
+          update.call((update) =>
+            update
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              .transition(t as any)
+              .attr('d', this.area)
+              .attr('fill', ([{ i }]) =>
+                this.scales.color(this.config.color.values[i])
+              )
+          ),
+        (exit) => exit.remove()
+      );
+  }
+
+  getTooltipData(
+    closestXIndicies: number[],
+    categoryYMin: number,
+    categoryYMax: number,
+    categoryIndex: number
+  ): {
+    anchor: StackedAreaInteractionAnchor;
+    data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[];
+    hoveredAreaDatum: StackedAreaTooltipDatum<Datum, TCategoricalValue>;
+    origin: SVGGraphicsElement;
+  } {
+    const data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[] =
+      closestXIndicies.map((i) => {
+        const datum = this.getDatumFromIndex(i);
+        return {
+          datum: datum,
+          values: {
+            x: this.getXyDimensionValue(datum, 'x'),
+            y: this.getXyDimensionValue(datum, 'y'),
+            color: this.config.color.valueAccessor(datum),
+          },
+          color: this.scales.color(this.config.color.valueAccessor(datum)),
+        };
+      });
+    if (this.config.categoricalOrder) {
+      this.sortTooltipDataByCategoricalSortOrder(data);
+      categoryIndex = closestXIndicies.length - categoryIndex;
+    }
+
+    return {
+      data,
+      anchor: {
+        x: this.scales.x(this.config.x.values[closestXIndicies[0]]),
+        yAreaTop: categoryYMin,
+        yAreaBottom: categoryYMax,
+        yChartTop: this.scales.y.range()[0],
+        yChartBottom: this.scales.y.range()[1],
+      },
+      hoveredAreaDatum: data[categoryIndex],
+      origin: this.chart.svgRef.nativeElement,
+    };
+  }
+
+  private getDatumFromIndex(i: number) {
+    return this.config.data.find(
+      (d) =>
+        this.config.x.valueAccessor(d) === this.config.x.values[i] &&
+        this.config.color.valueAccessor(d) === this.config.color.values[i]
+    );
+  }
+
+  private getXyDimensionValue(datum: Datum, dimension: 'x' | 'y'): string {
+    return this.config[dimension].formatFunction
+      ? ValueUtilities.customFormat(
+          datum,
+          this.config[dimension].formatFunction
+        )
+      : ValueUtilities.d3Format(
+          this.config[dimension].valueAccessor(datum),
+          this.config[dimension].formatSpecifier
+        );
+  }
+
+  private sortTooltipDataByCategoricalSortOrder(
+    data: StackedAreaTooltipDatum<Datum, TCategoricalValue>[]
+  ) {
+    if (this.config.categoricalOrder) {
+      data.sort((a, b) => {
+        return (
+          this.config.categoricalOrder.indexOf(a.values.color) -
+          this.config.categoricalOrder.indexOf(b.values.color)
+        );
+      });
+    }
+  }
+
+  updateStackedAreaElements(): void {
+    this.stackedAreas.next(this.areas);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { StackedAreaEventsDirective } from './events/stacked-area-events.directive';
+import { StackedAreaComponent } from './stacked-area.component';
+
+@NgModule({
+  imports: [StackedAreaComponent, StackedAreaEventsDirective],
+  exports: [StackedAreaComponent, StackedAreaEventsDirective],
+})
+export class VicStackedAreaModule {}