@unovis/ts 1.0.0-alpha.4

package/components/crosshair/style.d.ts

@@ -0,0 +1,4 @@
+export declare const globalStyles: void;
+export declare const root: string;
+export declare const line: string;
+export declare const circle: string;

package/components/crosshair/style.js

@@ -0,0 +1,25 @@
+import { injectGlobal, css } from '@emotion/css';
+
+const globalStyles = injectGlobal `
+  :root {
+    --vis-crosshair-line-stroke: #888;
+    --vis-crosshair-circle-stroke: #fff;
+  }
+`;
+const root = css `
+  label: crosshair-component;
+`;
+const line = css `
+  stroke: var(--vis-crosshair-line-stroke);
+  stroke-opacity: 1;
+  pointer-events: none;
+`;
+const circle = css `
+  stroke: var(--vis-crosshair-circle-stroke);
+  stroke-width: 1;
+  stroke-opacity: 0.75;
+  pointer-events: none;
+`;
+
+export { circle, globalStyles, line, root };
+//# sourceMappingURL=style.js.map

package/components/crosshair/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-crosshair-line-stroke: #888;\n    --vis-crosshair-circle-stroke: #fff;\n  }\n`\n\nexport const root = css`\n  label: crosshair-component;\n`\n\nexport const line = css`\n  stroke: var(--vis-crosshair-line-stroke);\n  stroke-opacity: 1;\n  pointer-events: none;\n`\n\nexport const circle = css`\n  stroke: var(--vis-crosshair-circle-stroke);\n  stroke-width: 1;\n  stroke-opacity: 0.75;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;EAKvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;EAItB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/crosshair/types.d.ts

@@ -0,0 +1,13 @@
+import { NumericAccessor } from "../../types/accessor";
+export declare type CrosshairCircle = {
+    y: number;
+    color: string;
+    opacity?: number;
+    id?: string;
+};
+export declare type CrosshairAccessors<Datum> = {
+    x: NumericAccessor<Datum> | undefined;
+    y: NumericAccessor<Datum>[] | undefined;
+    yStacked: NumericAccessor<Datum>[] | undefined;
+    baseline: NumericAccessor<Datum> | undefined;
+};

package/components/donut/config.d.ts

@@ -0,0 +1,45 @@
+import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+import { ColorAccessor, NumericAccessor } from "../../types/accessor";
+export interface DonutConfigInterface<Datum> extends ComponentConfigInterface {
+    /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
+    id?: ((d: Datum, i?: number, ...any: any[]) => string | number);
+    /** Value accessor function. Default: `undefined` */
+    value: NumericAccessor<Datum>;
+    /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
+    angleRange?: [number, number];
+    /** Pad angle. Default: `0` */
+    padAngle?: number;
+    /** Custom sort function. Default: `undefined` */
+    sortFunction?: (a: Datum, b: Datum) => number;
+    /** Corner Radius. Default: `0` */
+    cornerRadius?: number;
+    /** Color accessor function. Default: `undefined` */
+    color?: ColorAccessor<Datum>;
+    /** Explicitly set the donut outer radius. Default: `undefined` */
+    radius?: number;
+    /** Arc width in pixels. Set to `0` if you want to have a pie chart. Default: `20` */
+    arcWidth?: number;
+    /** Central label accessor function or text. Default: `undefined` */
+    centralLabel?: string;
+    /** Central sub-label accessor function or text. Default: `undefined` */
+    centralSubLabel?: string;
+    /** Enables wrapping for the sub-label. Default: `true` */
+    centralSubLabelWrap?: boolean;
+    /** Draw segment as a thin line when its value is 0. Default: `false` */
+    preventEmptySegments?: boolean;
+}
+export declare class DonutConfig<Datum> extends ComponentConfig implements DonutConfigInterface<Datum> {
+    id: (d: Datum, i: number) => string | number;
+    value: any;
+    angleRange: [number, number];
+    padAngle: number;
+    sortFunction: any;
+    cornerRadius: number;
+    color: any;
+    radius: any;
+    arcWidth: number;
+    centralLabel: any;
+    centralSubLabel: any;
+    centralSubLabelWrap: boolean;
+    preventEmptySegments: boolean;
+}

package/components/donut/config.js

@@ -0,0 +1,25 @@
+import { ComponentConfig } from '../../core/component/config.js';
+
+// Core
+class DonutConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        // eslint-disable-next-line dot-notation
+        this.id = (d, i) => { var _a; return (_a = d['id']) !== null && _a !== void 0 ? _a : i; };
+        this.value = undefined;
+        this.angleRange = [0, 2 * Math.PI];
+        this.padAngle = 0;
+        this.sortFunction = undefined;
+        this.cornerRadius = 0;
+        this.color = undefined;
+        this.radius = undefined;
+        this.arcWidth = 20;
+        this.centralLabel = undefined;
+        this.centralSubLabel = undefined;
+        this.centralSubLabelWrap = true;
+        this.preventEmptySegments = false;
+    }
+}
+
+export { DonutConfig };
+//# sourceMappingURL=config.js.map

package/components/donut/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor } from 'types/accessor'\n\nexport interface DonutConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */\n  id?: ((d: Datum, i?: number, ...any) => string | number);\n  /** Value accessor function. Default: `undefined` */\n  value: NumericAccessor<Datum>;\n  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** Pad angle. Default: `0` */\n  padAngle?: number;\n  /** Custom sort function. Default: `undefined` */\n  sortFunction?: (a: Datum, b: Datum) => number;\n  /** Corner Radius. Default: `0` */\n  cornerRadius?: number;\n  /** Color accessor function. Default: `undefined` */\n  color?: ColorAccessor<Datum>;\n  /** Explicitly set the donut outer radius. Default: `undefined` */\n  radius?: number;\n  /** Arc width in pixels. Set to `0` if you want to have a pie chart. Default: `20` */\n  arcWidth?: number;\n  /** Central label accessor function or text. Default: `undefined` */\n  centralLabel?: string;\n  /** Central sub-label accessor function or text. Default: `undefined` */\n  centralSubLabel?: string;\n  /** Enables wrapping for the sub-label. Default: `true` */\n  centralSubLabelWrap?: boolean;\n  /** Draw segment as a thin line when its value is 0. Default: `false` */\n  preventEmptySegments?: boolean;\n}\n\nexport class DonutConfig<Datum> extends ComponentConfig implements DonutConfigInterface<Datum> {\n  // eslint-disable-next-line dot-notation\n  id = (d: Datum, i: number): string | number => d['id'] ?? i\n  value = undefined\n  angleRange: [number, number] = [0, 2 * Math.PI]\n  padAngle = 0\n  sortFunction = undefined\n  cornerRadius = 0\n  color = undefined\n  radius = undefined\n  arcWidth = 20\n  centralLabel = undefined\n  centralSubLabel = undefined\n  centralSubLabelWrap = true\n  preventEmptySegments = false\n}\n"],"names":[],"mappings":";;AAAA;AAmCM,MAAO,WAAmB,SAAQ,eAAe,CAAA;AAAvD,IAAA,WAAA,GAAA;;;AAEE,QAAA,IAAA,CAAA,EAAE,GAAG,CAAC,CAAQ,EAAE,CAAS,KAAsB,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,CAAC,mCAAI,CAAC,CAAA,EAAA,CAAA;QAC3D,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAU,CAAA,UAAA,GAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;QAC/C,IAAQ,CAAA,QAAA,GAAG,CAAC,CAAA;QACZ,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAClB,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAA;QACb,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAe,CAAA,eAAA,GAAG,SAAS,CAAA;QAC3B,IAAmB,CAAA,mBAAA,GAAG,IAAI,CAAA;QAC1B,IAAoB,CAAA,oBAAA,GAAG,KAAK,CAAA;KAC7B;AAAA;;;;"}

package/components/donut/index.d.ts

@@ -0,0 +1,20 @@
+import { Selection } from 'd3-selection';
+import { ComponentCore } from "../../core/component";
+import { SeriesDataModel } from "../../data-models/series";
+import { Spacing } from "../../types/spacing";
+import { DonutArcAnimState } from './types';
+import { DonutConfig, DonutConfigInterface } from './config';
+import * as s from './style';
+export declare class Donut<Datum> extends ComponentCore<Datum[]> {
+    static selectors: typeof s;
+    config: DonutConfig<Datum>;
+    datamodel: SeriesDataModel<Datum>;
+    arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>;
+    centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>;
+    arcGen: import("d3-shape").Arc<any, DonutArcAnimState>;
+    events: {};
+    constructor(config?: DonutConfigInterface<Datum>);
+    get bleed(): Spacing;
+    _render(customDuration?: number): void;
+}

package/components/donut/index.js

@@ -0,0 +1,84 @@
+import { arc, pie } from 'd3-shape';
+import { ComponentCore } from '../../core/component/index.js';
+import { SeriesDataModel } from '../../data-models/series.js';
+import { isNumber, clamp, getNumber } from '../../utils/data.js';
+import { wrapSVGText } from '../../utils/text.js';
+import { VerticalAlign } from '../../types/text.js';
+import { DonutConfig } from './config.js';
+import { createArc, updateArc, removeArc } from './modules/arc.js';
+import * as style from './style.js';
+import { centralLabel, centralSubLabel, segment, segmentExit } from './style.js';
+
+class Donut extends ComponentCore {
+    constructor(config) {
+        super();
+        this.config = new DonutConfig();
+        this.datamodel = new SeriesDataModel();
+        this.arcGen = arc();
+        this.events = {};
+        if (config)
+            this.config.init(config);
+        this.arcGroup = this.g.append('g');
+        this.centralLabel = this.g.append('text')
+            .attr('class', centralLabel);
+        this.centralSubLabel = this.g.append('text')
+            .attr('class', centralSubLabel);
+    }
+    get bleed() {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    _render(customDuration) {
+        var _a, _b, _c, _d;
+        const { config, datamodel, bleed } = this;
+        const data = datamodel.data;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const outerRadius = config.radius || Math.min(this._width - bleed.left - bleed.right, this._height - bleed.top - bleed.bottom) / 2;
+        const innerRadius = config.arcWidth === 0 ? 0 : clamp(outerRadius - config.arcWidth, 0, outerRadius - 1);
+        this.arcGen
+            .startAngle(d => d.startAngle)
+            .endAngle(d => d.endAngle)
+            .innerRadius(d => d.innerRadius)
+            .outerRadius(d => d.outerRadius)
+            .padAngle(config.padAngle)
+            .cornerRadius(d => config.cornerRadius);
+        const pieGen = pie()
+            .startAngle((_a = config.angleRange[0]) !== null && _a !== void 0 ? _a : 0)
+            .endAngle((_b = config.angleRange[1]) !== null && _b !== void 0 ? _b : 2 * Math.PI)
+            .padAngle(config.padAngle)
+            .value((d, i) => getNumber(d, config.value, i) || (config.preventEmptySegments && Number.EPSILON) || 0)
+            .sort(config.sortFunction);
+        this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
+        const arcData = pieGen(data);
+        arcData.forEach(d => {
+            d.innerRadius = innerRadius;
+            d.outerRadius = outerRadius;
+        });
+        // Arc segments
+        const arcsSelection = this.arcGroup
+            .selectAll(`.${segment}`)
+            .data(arcData, (d, i) => config.id(d.data, i));
+        const arcsEnter = arcsSelection.enter().append('path')
+            .attr('class', segment)
+            .call(createArc, config);
+        const arcsMerged = arcsSelection.merge(arcsEnter);
+        arcsMerged.call(updateArc, config, this.arcGen, duration);
+        arcsSelection.exit()
+            .attr('class', segmentExit)
+            .call(removeArc, duration);
+        // Label
+        this.centralLabel
+            .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
+            .attr('dy', config.centralSubLabel ? '-0.55em' : null)
+            .text((_c = config.centralLabel) !== null && _c !== void 0 ? _c : null);
+        this.centralSubLabel
+            .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
+            .attr('dy', config.centralLabel ? '0.55em' : null)
+            .text((_d = config.centralSubLabel) !== null && _d !== void 0 ? _d : null);
+        if (config.centralSubLabelWrap)
+            wrapSVGText(this.centralSubLabel, { width: innerRadius * 1.9, verticalAlign: VerticalAlign.Top });
+    }
+}
+Donut.selectors = style;
+
+export { Donut };
+//# sourceMappingURL=index.js.map

package/components/donut/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { pie, arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Utils\nimport { isNumber, clamp, getNumber } from 'utils/data'\nimport { wrapSVGText } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { VerticalAlign } from 'types/text'\n\n// Local Types\nimport { DonutArcDatum, DonutArcAnimState } from './types'\n\n// Config\nimport { DonutConfig, DonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\n\n// Styles\nimport * as s from './style'\n\nexport class Donut<Datum> extends ComponentCore<Datum[]> {\n  static selectors = s\n  config: DonutConfig<Datum> = new DonutConfig()\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  arcGen = arc<DonutArcAnimState>()\n\n  events = {\n  }\n\n  constructor (config?: DonutConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n    this.arcGroup = this.g.append('g')\n    this.centralLabel = this.g.append('text')\n      .attr('class', s.centralLabel)\n    this.centralSubLabel = this.g.append('text')\n      .attr('class', s.centralSubLabel)\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\n  }\n\n  _render (customDuration?: number): void {\n    const { config, datamodel, bleed } = this\n    const data = datamodel.data\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const outerRadius = config.radius || Math.min(this._width - bleed.left - bleed.right, this._height - bleed.top - bleed.bottom) / 2\n    const innerRadius = config.arcWidth === 0 ? 0 : clamp(outerRadius - config.arcWidth, 0, outerRadius - 1)\n\n    this.arcGen\n      .startAngle(d => d.startAngle)\n      .endAngle(d => d.endAngle)\n      .innerRadius(d => d.innerRadius)\n      .outerRadius(d => d.outerRadius)\n      .padAngle(config.padAngle)\n      .cornerRadius(d => config.cornerRadius)\n\n    const pieGen = pie<Datum>()\n      .startAngle(config.angleRange[0] ?? 0)\n      .endAngle(config.angleRange[1] ?? 2 * Math.PI)\n      .padAngle(config.padAngle)\n      .value((d, i) => getNumber(d, config.value, i) || (config.preventEmptySegments && Number.EPSILON) || 0)\n      .sort(config.sortFunction)\n\n    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n    const arcData = pieGen(data) as DonutArcDatum<Datum>[]\n    arcData.forEach(d => {\n      d.innerRadius = innerRadius\n      d.outerRadius = outerRadius\n    })\n\n    // Arc segments\n    const arcsSelection = this.arcGroup\n      .selectAll(`.${s.segment}`)\n      .data(arcData, (d: DonutArcDatum<Datum>, i) => config.id(d.data, i))\n\n    const arcsEnter = arcsSelection.enter().append('path')\n      .attr('class', s.segment)\n      .call(createArc, config)\n\n    const arcsMerged = arcsSelection.merge(arcsEnter)\n    arcsMerged.call(updateArc, config, this.arcGen, duration)\n\n    arcsSelection.exit()\n      .attr('class', s.segmentExit)\n      .call(removeArc, duration)\n\n    // Label\n    this.centralLabel\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n      .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n      .text(config.centralLabel ?? null)\n\n    this.centralSubLabel\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n      .attr('dy', config.centralLabel ? '0.55em' : null)\n      .text(config.centralSubLabel ?? null)\n\n    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, { width: innerRadius * 1.9, verticalAlign: VerticalAlign.Top })\n  }\n}\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s"],"mappings":";;;;;;;;;;;AA2BM,MAAO,KAAa,SAAQ,aAAsB,CAAA;AAatD,IAAA,WAAA,CAAa,MAAoC,EAAA;AAC/C,QAAA,KAAK,EAAE,CAAA;AAZT,QAAA,IAAA,CAAA,MAAM,GAAuB,IAAI,WAAW,EAAE,CAAA;AAC9C,QAAA,IAAA,CAAA,SAAS,GAA2B,IAAI,eAAe,EAAE,CAAA;QAKzD,IAAM,CAAA,MAAA,GAAG,GAAG,EAAqB,CAAA;QAEjC,IAAM,CAAA,MAAA,GAAG,EACR,CAAA;AAIC,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;AACtC,aAAA,IAAI,CAAC,OAAO,EAAEA,YAAc,CAAC,CAAA;QAChC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,aAAA,IAAI,CAAC,OAAO,EAAEC,eAAiB,CAAC,CAAA;KACpC;AAED,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;KAChD;AAED,IAAA,OAAO,CAAE,cAAuB,EAAA;;QAC9B,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;AACzC,QAAA,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;AAC3B,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;AAE5E,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AAClI,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,CAAA;AAExG,QAAA,IAAI,CAAC,MAAM;aACR,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC;aAC7B,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;aACzB,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;aAC/B,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;AAC/B,aAAA,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;aACzB,YAAY,CAAC,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,CAAA;QAEzC,MAAM,MAAM,GAAG,GAAG,EAAS;aACxB,UAAU,CAAC,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAC;AACrC,aAAA,QAAQ,CAAC,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;AAC7C,aAAA,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;AACzB,aAAA,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,oBAAoB,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AACtG,aAAA,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;QAE5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC,CAAA;AACpF,QAAA,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAA2B,CAAA;AACtD,QAAA,OAAO,CAAC,OAAO,CAAC,CAAC,IAAG;AAClB,YAAA,CAAC,CAAC,WAAW,GAAG,WAAW,CAAA;AAC3B,YAAA,CAAC,CAAC,WAAW,GAAG,WAAW,CAAA;AAC7B,SAAC,CAAC,CAAA;;AAGF,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ;AAChC,aAAA,SAAS,CAAC,CAAI,CAAA,EAAAC,OAAS,EAAE,CAAC;aAC1B,IAAI,CAAC,OAAO,EAAE,CAAC,CAAuB,EAAE,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;QAEtE,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACnD,aAAA,IAAI,CAAC,OAAO,EAAEA,OAAS,CAAC;AACxB,aAAA,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAE1B,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AACjD,QAAA,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEzD,aAAa,CAAC,IAAI,EAAE;AACjB,aAAA,IAAI,CAAC,OAAO,EAAEC,WAAa,CAAC;AAC5B,aAAA,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;;AAG5B,QAAA,IAAI,CAAC,YAAY;AACd,aAAA,IAAI,CAAC,WAAW,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;AACtE,aAAA,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;aACrD,IAAI,CAAC,MAAA,MAAM,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAC,CAAA;AAEpC,QAAA,IAAI,CAAC,eAAe;AACjB,aAAA,IAAI,CAAC,WAAW,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;AACtE,aAAA,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC;aACjD,IAAI,CAAC,MAAA,MAAM,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAC,CAAA;QAEvC,IAAI,MAAM,CAAC,mBAAmB;AAAE,YAAA,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,WAAW,GAAG,GAAG,EAAE,aAAa,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC,CAAA;KAClI;;AApFM,KAAS,CAAA,SAAA,GAAGC,KAAC;;;;"}

package/components/donut/modules/arc.d.ts

@@ -0,0 +1,10 @@
+import { Selection } from 'd3-selection';
+import { Arc } from 'd3-shape';
+import { DonutArcDatum, DonutArcAnimState } from '../types';
+import { DonutConfig } from '../config';
+export interface ArcNode extends SVGElement {
+    _animState?: DonutArcAnimState;
+}
+export declare function createArc<Datum>(selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>, config: DonutConfig<Datum>): void;
+export declare function updateArc<Datum>(selection: Selection<SVGElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>, config: DonutConfig<Datum>, arcGen: Arc<any, DonutArcAnimState>, duration: number): void;
+export declare function removeArc<Datum>(selection: Selection<SVGElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>, duration: number): void;

package/components/donut/modules/arc.js

@@ -0,0 +1,53 @@
+import { interpolate } from 'd3-interpolate';
+import { getColor } from '../../../utils/color.js';
+import { smartTransition } from '../../../utils/d3.js';
+
+function createArc(selection, config) {
+    selection
+        .style('fill', (d, i) => getColor(d.data, config.color, i))
+        .style('stroke', (d, i) => getColor(d.data, config.color, i))
+        .style('opacity', 0)
+        .each((d, i, els) => {
+        const arcNode = els[i];
+        const angleCenter = (d.startAngle + d.endAngle) / 2;
+        const angleHalfWidth = (d.endAngle - d.startAngle) / 2;
+        arcNode._animState = {
+            startAngle: angleCenter - angleHalfWidth,
+            endAngle: angleCenter + angleHalfWidth,
+            innerRadius: d.innerRadius,
+            outerRadius: d.outerRadius,
+        };
+    });
+}
+function updateArc(selection, config, arcGen, duration) {
+    selection
+        .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
+        .style('fill', (d, i) => getColor(d.data, config.color, i))
+        .style('stroke', (d, i) => getColor(d.data, config.color, i));
+    if (duration) {
+        const transition = smartTransition(selection, duration)
+            .style('opacity', 1);
+        transition.attrTween('d', (d, i, els) => {
+            const arcNode = els[i];
+            const nextAnimState = { startAngle: d.startAngle, endAngle: d.endAngle, innerRadius: d.innerRadius, outerRadius: d.outerRadius };
+            const datum = interpolate(arcNode._animState, nextAnimState);
+            return (t) => {
+                arcNode._animState = datum(t);
+                return arcGen(arcNode._animState);
+            };
+        });
+    }
+    else {
+        selection
+            .attr('d', arcGen)
+            .style('opacity', 1);
+    }
+}
+function removeArc(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createArc, removeArc, updateArc };
+//# sourceMappingURL=arc.js.map

package/components/donut/modules/arc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc.js","sources":["../../../../src/components/donut/modules/arc.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { DonutArcDatum, DonutArcAnimState } from '../types'\n\n// Config\nimport { DonutConfig } from '../config'\n\nexport interface ArcNode extends SVGElement {\n  _animState?: DonutArcAnimState;\n}\n\nexport function createArc<Datum> (\n  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>,\n  config: DonutConfig<Datum>\n): void {\n  selection\n    .style('fill', (d, i) => getColor(d.data, config.color, i))\n    .style('stroke', (d, i) => getColor(d.data, config.color, i))\n    .style('opacity', 0)\n    .each((d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const angleCenter = (d.startAngle + d.endAngle) / 2\n      const angleHalfWidth = (d.endAngle - d.startAngle) / 2\n      arcNode._animState = {\n        startAngle: angleCenter - angleHalfWidth,\n        endAngle: angleCenter + angleHalfWidth,\n        innerRadius: d.innerRadius,\n        outerRadius: d.outerRadius,\n      }\n    })\n}\n\nexport function updateArc<Datum> (\n  selection: Selection<SVGElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>,\n  config: DonutConfig<Datum>,\n  arcGen: Arc<any, DonutArcAnimState>,\n  duration: number\n): void {\n  selection\n    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n    .style('fill', (d, i) => getColor(d.data, config.color, i))\n    .style('stroke', (d, i) => getColor(d.data, config.color, i))\n\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', 1) as Transition<SVGElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>\n\n    transition.attrTween('d', (d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const nextAnimState: DonutArcAnimState = { startAngle: d.startAngle, endAngle: d.endAngle, innerRadius: d.innerRadius, outerRadius: d.outerRadius }\n      const datum = interpolate(arcNode._animState, nextAnimState)\n\n      return (t: number): string => {\n        arcNode._animState = datum(t)\n        return arcGen(arcNode._animState as DonutArcDatum<Datum>)\n      }\n    })\n  } else {\n    selection\n      .attr('d', arcGen)\n      .style('opacity', 1)\n  }\n}\n\nexport function removeArc<Datum> (\n  selection: Selection<SVGElement, DonutArcDatum<Datum>, SVGGElement, DonutArcDatum<Datum>[]>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":"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"}

package/components/donut/style.d.ts

@@ -0,0 +1,6 @@
+export declare const root: string;
+export declare const variables: void;
+export declare const segment: string;
+export declare const segmentExit: string;
+export declare const centralLabel: string;
+export declare const centralSubLabel: string;

package/components/donut/style.js

@@ -0,0 +1,53 @@
+import { css, injectGlobal } from '@emotion/css';
+
+const root = css `
+  label: donut-component;
+`;
+const variables = injectGlobal `
+  :root {
+    --vis-donut-central-label-font-size: 16px;
+    --vis-donut-central-label-text-color: #5b5f6d;
+    --vis-donut-central-label-font-family: var(--vis-font-family);
+    --vis-donut-central-label-font-weight: 600;
+
+    --vis-donut-central-sub-label-font-size: 12px;
+    --vis-donut-central-sub-label-text-color: #5b5f6d;
+    --vis-donut-central-sub-label-font-family: var(--vis-font-family);
+    --vis-donut-central-sub-label-font-weight: 500;
+
+    --vis-dark-donut-central-label-text-color: #C2BECE;
+    --vis-dark-donut-central-sub-label-text-color: #C2BECE;
+  }
+
+  body.theme-dark ${`.${root}`} {
+    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);
+    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);
+  }
+`;
+const segment = css `
+  label: segment;
+`;
+const segmentExit = css `
+  label: segment-exit;
+`;
+const centralLabel = css `
+  label: central-label;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  font-size: var(--vis-donut-central-label-font-size);
+  font-family: var(--vis-donut-central-label-font-family);
+  font-weight: var(--vis-donut-central-label-font-weight);
+  fill: var(--vis-donut-central-label-text-color);
+`;
+const centralSubLabel = css `
+  label: central-label;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  font-size: var(--vis-donut-central-sub-label-font-size);
+  font-family: var(--vis-donut-central-sub-label-font-family);
+  font-weight: var(--vis-donut-central-sub-label-font-weight);
+  fill: var(--vis-donut-central-sub-label-text-color);
+`;
+
+export { centralLabel, centralSubLabel, root, segment, segmentExit, variables };
+//# sourceMappingURL=style.js.map

package/components/donut/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    --vis-donut-central-label-font-family: var(--vis-font-family);\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    --vis-donut-central-sub-label-font-family: var(--vis-font-family);\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n  }\n`\n\nexport const segment = css`\n  label: segment;\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family);\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family);\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;AAgBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;EAEzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}

package/components/donut/types.d.ts

@@ -0,0 +1,12 @@
+import { PieArcDatum } from 'd3-shape';
+/** Data type for Donut Arc Generator */
+export interface DonutArcDatum<Datum> extends PieArcDatum<Datum> {
+    innerRadius: number;
+    outerRadius: number;
+}
+export declare type DonutArcAnimState = {
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+};

package/components/flow-legend/config.d.ts

@@ -0,0 +1,26 @@
+import { Config } from "../../core/config";
+export interface FlowLegendConfigInterface {
+    /** Custom width of the component.  Default: `undefined` */
+    customWidth?: number;
+    /** Legend items array as string[]. Default: `[]` */
+    items?: string[];
+    /** Color of the flow line. Default: `undefined` */
+    lineColor?: string;
+    /** Color of the flow label. Default: `undefined` */
+    labelColor?: string;
+    /** Font size of flow labels in pixels. Default: `12` */
+    labelFontSize?: number;
+    /** Arrow symbol. Default: `'▶'` */
+    arrowSymbol?: string;
+    /** Callback function for the legend item click. Default: `undefined` */
+    onLegendItemClick?: ((label?: string, i?: number) => void);
+}
+export declare class FlowLegendConfig extends Config implements FlowLegendConfigInterface {
+    customWidth: any;
+    items: any[];
+    labelFontSize: number;
+    arrowSymbol: string;
+    lineColor: any;
+    labelColor: any;
+    onLegendItemClick: any;
+}

package/components/flow-legend/config.js

@@ -0,0 +1,17 @@
+import { Config } from '../../core/config/index.js';
+
+class FlowLegendConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.customWidth = undefined;
+        this.items = [];
+        this.labelFontSize = 12;
+        this.arrowSymbol = '▶';
+        this.lineColor = undefined;
+        this.labelColor = undefined;
+        this.onLegendItemClick = undefined;
+    }
+}
+
+export { FlowLegendConfig };
+//# sourceMappingURL=config.js.map

package/components/flow-legend/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/flow-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\nexport interface FlowLegendConfigInterface {\n  /** Custom width of the component.  Default: `undefined` */\n  customWidth?: number;\n  /** Legend items array as string[]. Default: `[]` */\n  items?: string[];\n  /** Color of the flow line. Default: `undefined` */\n  lineColor?: string;\n  /** Color of the flow label. Default: `undefined` */\n  labelColor?: string;\n  /** Font size of flow labels in pixels. Default: `12` */\n  labelFontSize?: number;\n  /** Arrow symbol. Default: `'▶'` */\n  arrowSymbol?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((label?: string, i?: number) => void);\n}\n\nexport class FlowLegendConfig extends Config implements FlowLegendConfigInterface {\n  customWidth = undefined\n  items = []\n  labelFontSize = 12\n  arrowSymbol = '▶'\n  lineColor = undefined\n  labelColor = undefined\n  onLegendItemClick = undefined;\n}\n"],"names":[],"mappings":";;AAmBM,MAAO,gBAAiB,SAAQ,MAAM,CAAA;AAA5C,IAAA,WAAA,GAAA;;QACE,IAAW,CAAA,WAAA,GAAG,SAAS,CAAA;QACvB,IAAK,CAAA,KAAA,GAAG,EAAE,CAAA;QACV,IAAa,CAAA,aAAA,GAAG,EAAE,CAAA;QAClB,IAAW,CAAA,WAAA,GAAG,GAAG,CAAA;QACjB,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;QACrB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAC;KAC/B;AAAA;;;;"}

package/components/flow-legend/index.d.ts

@@ -0,0 +1,16 @@
+import { Selection } from 'd3-selection';
+import { FlowLegendConfig, FlowLegendConfigInterface } from './config';
+import { FlowLegendItem } from './types';
+export declare class FlowLegend {
+    div: Selection<HTMLElement, any, HTMLElement, any>;
+    element: HTMLElement;
+    line: Selection<HTMLElement, any, HTMLElement, any>;
+    labels: Selection<HTMLElement, any, HTMLElement, any>;
+    prevConfig: FlowLegendConfig;
+    config: FlowLegendConfig;
+    protected _container: HTMLElement;
+    constructor(element: HTMLElement, config?: FlowLegendConfigInterface);
+    update(config: FlowLegendConfigInterface): void;
+    render(): void;
+    _onItemClick(event: MouseEvent, d: FlowLegendItem): void;
+}

package/components/flow-legend/index.js

@@ -0,0 +1,73 @@
+import { select } from 'd3-selection';
+import { smartTransition } from '../../utils/d3.js';
+import { FlowLegendConfig } from './config.js';
+import { FlowLegendItemType } from './types.js';
+import { root, labels, item, arrow, label, clickable, line } from './style.js';
+
+class FlowLegend {
+    constructor(element, config) {
+        this._container = element;
+        this.div = select(this._container).append('div').attr('class', root);
+        this.element = this.div.node();
+        this.line = this.div.append('div');
+        this.labels = this.div.append('div').attr('class', labels);
+        if (config)
+            this.update(config);
+    }
+    update(config) {
+        this.prevConfig = this.config;
+        this.config = new FlowLegendConfig().init(config);
+        this.render();
+    }
+    render() {
+        const { config: { items, lineColor, labelFontSize, labelColor, arrowSymbol, customWidth, onLegendItemClick } } = this;
+        if (!items.length)
+            return;
+        if (customWidth)
+            this.div.style('width', `${customWidth}px`);
+        // Prepare Data
+        const legendData = items.reduce((acc, label, i) => {
+            acc.push({
+                text: label,
+                index: i,
+                type: FlowLegendItemType.Label,
+            });
+            if (arrowSymbol && (acc.length !== items.length * 2 - 1)) {
+                acc.push({
+                    text: arrowSymbol,
+                    index: i,
+                    type: FlowLegendItemType.Symbol,
+                });
+            }
+            return acc;
+        }, []);
+        // Draw
+        const legendItems = this.labels.selectAll(`.${item}`)
+            .data(legendData);
+        const legendItemsEnter = legendItems.enter()
+            .append('div')
+            .attr('class', item)
+            .attr('opacity', 0);
+        legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)
+            .on('click', this._onItemClick.bind(this));
+        legendItemsEnter.append('span')
+            .attr('class', d => d.type === FlowLegendItemType.Symbol ? arrow(lineColor) : label(labelFontSize, labelColor))
+            .classed(clickable, d => d.type === FlowLegendItemType.Label && !!onLegendItemClick);
+        const legendItemsMerged = legendItemsEnter.merge(legendItems);
+        smartTransition(legendItemsMerged, 500)
+            .attr('opacity', 1);
+        legendItemsMerged.select('span').text(d => d.text);
+        legendItems.exit().remove();
+        this.line
+            .attr('class', line(lineColor))
+            .style('opacity', items.length > 1 ? 1 : 0);
+    }
+    _onItemClick(event, d) {
+        const { config: { onLegendItemClick } } = this;
+        if (onLegendItemClick)
+            onLegendItemClick(d.text, d.index);
+    }
+}
+
+export { FlowLegend };
+//# sourceMappingURL=index.js.map

package/components/flow-legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/flow-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\n\n// Config\nimport { FlowLegendConfig, FlowLegendConfigInterface } from './config'\n\n// Local Types\nimport { FlowLegendItem, FlowLegendItemType } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class FlowLegend {\n  div: Selection<HTMLElement, any, HTMLElement, any>\n  element: HTMLElement\n  line: Selection<HTMLElement, any, HTMLElement, any>\n  labels: Selection<HTMLElement, any, HTMLElement, any>\n  prevConfig: FlowLegendConfig\n  config: FlowLegendConfig\n  protected _container: HTMLElement\n\n  constructor (element: HTMLElement, config?: FlowLegendConfigInterface) {\n    this._container = element\n\n    this.div = select(this._container).append('div').attr('class', s.root)\n    this.element = this.div.node()\n\n    this.line = this.div.append('div')\n    this.labels = this.div.append('div').attr('class', s.labels)\n\n    if (config) this.update(config)\n  }\n\n  update (config: FlowLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = new FlowLegendConfig().init(config)\n    this.render()\n  }\n\n  render (): void {\n    const { config: { items, lineColor, labelFontSize, labelColor, arrowSymbol, customWidth, onLegendItemClick } } = this\n    if (!items.length) return\n\n    if (customWidth) this.div.style('width', `${customWidth}px`)\n\n    // Prepare Data\n    const legendData: FlowLegendItem[] = items.reduce((acc, label, i) => {\n      acc.push({\n        text: label,\n        index: i,\n        type: FlowLegendItemType.Label,\n      })\n\n      if (arrowSymbol && (acc.length !== items.length * 2 - 1)) {\n        acc.push({\n          text: arrowSymbol,\n          index: i,\n          type: FlowLegendItemType.Symbol,\n        })\n      }\n      return acc\n    }, [])\n\n    // Draw\n    const legendItems = this.labels.selectAll(`.${s.item}`)\n      .data(legendData) as Selection<HTMLDivElement, FlowLegendItem, HTMLDivElement, FlowLegendItem>\n\n    const legendItemsEnter = legendItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .attr('opacity', 0)\n\n    legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)\n      .on('click', this._onItemClick.bind(this))\n\n    legendItemsEnter.append('span')\n      .attr('class', d => d.type === FlowLegendItemType.Symbol ? s.arrow(lineColor) : s.label(labelFontSize, labelColor))\n      .classed(s.clickable, d => d.type === FlowLegendItemType.Label && !!onLegendItemClick)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    smartTransition(legendItemsMerged, 500)\n      .attr('opacity', 1)\n    legendItemsMerged.select('span').text(d => d.text)\n\n    legendItems.exit().remove()\n\n    this.line\n      .attr('class', s.line(lineColor))\n      .style('opacity', items.length > 1 ? 1 : 0)\n  }\n\n  _onItemClick (event: MouseEvent, d: FlowLegendItem): void {\n    const { config: { onLegendItemClick } } = this\n\n    if (onLegendItemClick) onLegendItemClick(d.text, d.index)\n  }\n}\n"],"names":["s.root","s.labels","s.item","s.arrow","s.label","s.clickable","s.line"],"mappings":"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"}

package/components/flow-legend/style.d.ts

@@ -0,0 +1,8 @@
+export declare const root: string;
+export declare const globalStyles: void;
+export declare const line: (lineColor: string) => string;
+export declare const labels: string;
+export declare const item: string;
+export declare const clickable: string;
+export declare const label: (labelFontSize: number, labelColor: string) => string;
+export declare const arrow: (lineColor: string) => string;