@unovis/ts 1.3.0-beta.3 → 1.3.0

package/components/donut/config.d.ts

@@ -1,8 +1,8 @@
-import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+import { ComponentConfigInterface } 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);
+    id?: ((d: Datum, i: number, ...any: unknown[]) => string | number);
     /** Value accessor function. Default: `undefined` */
     value: NumericAccessor<Datum>;
     /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
@@ -39,21 +39,4 @@ export interface DonutConfigInterface<Datum> extends ComponentConfigInterface {
     /** Background angle range. When undefined, the value will be taken from `angleRange`. Default: `undefined` */
     backgroundAngleRange?: [number, number];
 }
-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;
-    showEmptySegments: boolean;
-    emptySegmentAngle: number;
-    showBackground: boolean;
-    backgroundAngleRange: any;
-}
+export declare const DonutDefaultConfig: DonutConfigInterface<unknown>;

package/components/donut/config.js

@@ -1,28 +1,7 @@
-import { ComponentConfig } from '../../core/component/config.js';
+import { ComponentDefaultConfig } 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.showEmptySegments = false;
-        this.emptySegmentAngle = 0.5 * Math.PI / 180;
-        this.showBackground = true;
-        this.backgroundAngleRange = undefined;
-    }
-}
+const DonutDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { id: (d, i) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : i; }, value: undefined, angleRange: [0, 2 * Math.PI], padAngle: 0, sortFunction: undefined, cornerRadius: 0, color: undefined, radius: undefined, arcWidth: 20, centralLabel: undefined, centralSubLabel: undefined, centralSubLabelWrap: true, showEmptySegments: false, emptySegmentAngle: 0.5 * Math.PI / 180, showBackground: true, backgroundAngleRange: undefined });
 
-export { DonutConfig };
+export { DonutDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/donut/config.js.map

@@ -1 +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  /** When true, the component will display empty segments (the ones that have `0` values) as tiny slices.\n   * Default: `false`\n  */\n  showEmptySegments?: boolean;\n  /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */\n  emptySegmentAngle?: number;\n  /** Show donut background. The color is configurable via\n   * the `--vis-donut-background-color` and `--vis-dark-donut-background-color` CSS variables.\n   * Default: `true`\n  */\n  showBackground?: boolean;\n  /** Background angle range. When undefined, the value will be taken from `angleRange`. Default: `undefined` */\n  backgroundAngleRange?: [number, number];\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  showEmptySegments = false\n  emptySegmentAngle = 0.5 * Math.PI / 180\n  showBackground = true\n  backgroundAngleRange = undefined\n}\n"],"names":[],"mappings":";;AAAA;AA8CM,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,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAA;QACzB,IAAiB,CAAA,iBAAA,GAAG,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAA;QACvC,IAAc,CAAA,cAAA,GAAG,IAAI,CAAA;QACrB,IAAoB,CAAA,oBAAA,GAAG,SAAS,CAAA;KACjC;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentDefaultConfig } 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: unknown[]) => 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  /** When true, the component will display empty segments (the ones that have `0` values) as tiny slices.\n   * Default: `false`\n  */\n  showEmptySegments?: boolean;\n  /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */\n  emptySegmentAngle?: number;\n  /** Show donut background. The color is configurable via\n   * the `--vis-donut-background-color` and `--vis-dark-donut-background-color` CSS variables.\n   * Default: `true`\n  */\n  showBackground?: boolean;\n  /** Background angle range. When undefined, the value will be taken from `angleRange`. Default: `undefined` */\n  backgroundAngleRange?: [number, number];\n}\n\nexport const DonutDefaultConfig: DonutConfigInterface<unknown> = {\n  ...ComponentDefaultConfig,\n  id: (d: unknown, i: number): string | number => (d as { id: string }).id ?? i,\n  value: undefined,\n  angleRange: [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  showEmptySegments: false,\n  emptySegmentAngle: 0.5 * Math.PI / 180,\n  showBackground: true,\n  backgroundAngleRange: undefined,\n}\n"],"names":[],"mappings":";;AAAA;MA8Ca,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,sBAAsB,CACzB,EAAA,EAAA,EAAE,EAAE,CAAC,CAAU,EAAE,CAAS,KAAsB,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,MAAC,CAAoB,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAA,EAAA,EAC7E,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,EAC5B,QAAQ,EAAE,CAAC,EACX,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,EAAE,EACZ,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,SAAS,EAC1B,mBAAmB,EAAE,IAAI,EACzB,iBAAiB,EAAE,KAAK,EACxB,iBAAiB,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,EACtC,cAAc,EAAE,IAAI,EACpB,oBAAoB,EAAE,SAAS,EAAA;;;;"}

package/components/donut/index.d.ts

@@ -3,11 +3,12 @@ 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 { DonutConfigInterface } from './config';
 import * as s from './style';
-export declare class Donut<Datum> extends ComponentCore<Datum[], DonutConfig<Datum>, DonutConfigInterface<Datum>> {
+export declare class Donut<Datum> extends ComponentCore<Datum[], DonutConfigInterface<Datum>> {
     static selectors: typeof s;
-    config: DonutConfig<Datum>;
+    protected _defaultConfig: DonutConfigInterface<Datum>;
+    config: DonutConfigInterface<Datum>;
     datamodel: SeriesDataModel<Datum>;
     arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>;
     arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;

package/components/donut/index.js

@@ -4,7 +4,7 @@ import { SeriesDataModel } from '../../data-models/series.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getNumber, isNumber, clamp } from '../../utils/data.js';
 import { wrapSVGText } from '../../utils/text.js';
-import { DonutConfig } from './config.js';
+import { DonutDefaultConfig } from './config.js';
 import { createArc, updateArc, removeArc } from './modules/arc.js';
 import * as style from './style.js';
 import { centralLabel, centralSubLabel, segment, segmentExit, background } from './style.js';
@@ -12,12 +12,13 @@ import { centralLabel, centralSubLabel, segment, segmentExit, background } from
 class Donut extends ComponentCore {
     constructor(config) {
         super();
-        this.config = new DonutConfig();
+        this._defaultConfig = DonutDefaultConfig;
+        this.config = this._defaultConfig;
         this.datamodel = new SeriesDataModel();
         this.arcGen = arc();
         this.events = {};
         if (config)
-            this.config.init(config);
+            this.setConfig(config);
         this.arcBackground = this.g.append('path');
         this.arcGroup = this.g.append('g');
         this.centralLabel = this.g.append('text')
@@ -53,7 +54,7 @@ class Donut extends ComponentCore {
             .endAngle((_d = (_c = config.angleRange) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 2 * Math.PI)
             .padAngle(config.padAngle)
             .value(d => getNumber(d.datum, config.value, d.index) || 0)
-            .sort(config.sortFunction);
+            .sort((a, b) => config.sortFunction(a.datum, b.datum));
         this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
         const arcData = pieGen(data).map(d => {
             const arc = Object.assign(Object.assign({}, d), { data: d.data.datum, index: d.data.index, innerRadius,

package/components/donut/index.js.map

@@ -1 +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 { smartTransition } from 'utils/d3'\nimport { isNumber, clamp, getNumber } from 'utils/data'\nimport { wrapSVGText } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { DonutArcDatum, DonutArcAnimState, DonutDatum } 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[], DonutConfig<Datum>, DonutConfigInterface<Datum>> {\n  static selectors = s\n  config: DonutConfig<Datum> = new DonutConfig()\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>\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.arcBackground = this.g.append('path')\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\n    // Wrap data to preserve original indices\n    const data: DonutDatum<Datum>[] = datamodel.data\n      .map((d, i) => ({\n        index: i,\n        datum: d,\n      }))\n      .filter(d => config.showEmptySegments || getNumber(d.datum, config.value, d.index))\n\n    const duration = isNumber(customDuration) ? customDuration : config.duration\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(d => d.padAngle)\n      .cornerRadius(config.cornerRadius)\n\n    const pieGen = pie<DonutDatum<Datum>>()\n      .startAngle(config.angleRange?.[0] ?? 0)\n      .endAngle(config.angleRange?.[1] ?? 2 * Math.PI)\n      .padAngle(config.padAngle)\n      .value(d => getNumber(d.datum, config.value, d.index) || 0)\n      .sort(config.sortFunction)\n\n    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    const arcData: DonutArcDatum<Datum>[] = pieGen(data).map(d => {\n      const arc = {\n        ...d,\n        data: d.data.datum,\n        index: d.data.index,\n        innerRadius,\n        outerRadius,\n      }\n\n      if (config.showEmptySegments && d.endAngle - d.startAngle - d.padAngle <= Number.EPSILON) {\n        arc.endAngle = d.startAngle + Math.max(config.emptySegmentAngle, config.padAngle)\n        arc.padAngle = d.padAngle / 2\n      }\n      return arc\n    })\n\n    // Arc segments\n    const arcsSelection = this.arcGroup\n      .selectAll<SVGPathElement, DonutArcDatum<Datum>>(`.${s.segment}`)\n      .data(arcData, (d: DonutArcDatum<Datum>) => config.id(d.data, d.index))\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    arcsMerged.sort((a, b) => b.value - a.value)\n\n    arcsSelection.exit<DonutArcDatum<Datum>>()\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, innerRadius * 1.9)\n\n    // Background\n    this.arcBackground.attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    smartTransition(this.arcBackground, duration)\n      .attr('d', this.arcGen({\n        startAngle: config.backgroundAngleRange?.[0] ?? config.angleRange?.[0] ?? 0,\n        endAngle: config.backgroundAngleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,\n        innerRadius,\n        outerRadius,\n      }))\n  }\n}\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s.background","s"],"mappings":"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"}
+{"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 { smartTransition } from 'utils/d3'\nimport { isNumber, clamp, getNumber } from 'utils/data'\nimport { wrapSVGText } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { DonutArcDatum, DonutArcAnimState, DonutDatum } from './types'\n\n// Config\nimport { DonutDefaultConfig, 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[], DonutConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = DonutDefaultConfig as DonutConfigInterface<Datum>\n  public config: DonutConfigInterface<Datum> = this._defaultConfig\n\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>\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.setConfig(config)\n    this.arcBackground = this.g.append('path')\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\n    // Wrap data to preserve original indices\n    const data: DonutDatum<Datum>[] = datamodel.data\n      .map((d, i) => ({\n        index: i,\n        datum: d,\n      }))\n      .filter(d => config.showEmptySegments || getNumber(d.datum, config.value, d.index))\n\n    const duration = isNumber(customDuration) ? customDuration : config.duration\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(d => d.padAngle)\n      .cornerRadius(config.cornerRadius)\n\n    const pieGen = pie<DonutDatum<Datum>>()\n      .startAngle(config.angleRange?.[0] ?? 0)\n      .endAngle(config.angleRange?.[1] ?? 2 * Math.PI)\n      .padAngle(config.padAngle)\n      .value(d => getNumber(d.datum, config.value, d.index) || 0)\n      .sort((a, b) => config.sortFunction(a.datum, b.datum))\n\n    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    const arcData: DonutArcDatum<Datum>[] = pieGen(data).map(d => {\n      const arc = {\n        ...d,\n        data: d.data.datum,\n        index: d.data.index,\n        innerRadius,\n        outerRadius,\n      }\n\n      if (config.showEmptySegments && d.endAngle - d.startAngle - d.padAngle <= Number.EPSILON) {\n        arc.endAngle = d.startAngle + Math.max(config.emptySegmentAngle, config.padAngle)\n        arc.padAngle = d.padAngle / 2\n      }\n      return arc\n    })\n\n    // Arc segments\n    const arcsSelection = this.arcGroup\n      .selectAll<SVGPathElement, DonutArcDatum<Datum>>(`.${s.segment}`)\n      .data(arcData, (d: DonutArcDatum<Datum>) => config.id(d.data, d.index))\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    arcsMerged.sort((a, b) => b.value - a.value)\n\n    arcsSelection.exit<DonutArcDatum<Datum>>()\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, innerRadius * 1.9)\n\n    // Background\n    this.arcBackground.attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    smartTransition(this.arcBackground, duration)\n      .attr('d', this.arcGen({\n        startAngle: config.backgroundAngleRange?.[0] ?? config.angleRange?.[0] ?? 0,\n        endAngle: config.backgroundAngleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,\n        innerRadius,\n        outerRadius,\n      }))\n  }\n}\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s.background","s"],"mappings":"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"}

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

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

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

@@ -1 +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, unknown>,\n  config: DonutConfig<Datum>\n): void {\n  selection\n    .style('fill', d => getColor(d.data, config.color, d.index))\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        padAngle: d.padAngle,\n      }\n    })\n}\n\nexport function updateArc<Datum> (\n  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,\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 => getColor(d.data, config.color, d.index))\n\n  const setOpacity = (d: DonutArcDatum<Datum>): number => (config.showEmptySegments || d.value) ? 1 : 0\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', setOpacity) as Transition<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>\n\n    transition.attrTween('d', (d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const nextAnimState: DonutArcAnimState = {\n        startAngle: d.startAngle,\n        endAngle: d.endAngle,\n        innerRadius: d.innerRadius,\n        outerRadius: d.outerRadius,\n        padAngle: d.padAngle,\n      }\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', setOpacity)\n  }\n}\n\nexport function removeArc<Datum> (\n  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":"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"}
+{"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 { DonutConfigInterface } from '../config'\n\nexport interface ArcNode extends SVGElement {\n  _animState?: DonutArcAnimState;\n}\n\nexport function createArc<Datum> (\n  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,\n  config: DonutConfigInterface<Datum>\n): void {\n  selection\n    .style('fill', d => getColor(d.data, config.color, d.index))\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        padAngle: d.padAngle,\n      }\n    })\n}\n\nexport function updateArc<Datum> (\n  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,\n  config: DonutConfigInterface<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 => getColor(d.data, config.color, d.index))\n\n  const setOpacity = (d: DonutArcDatum<Datum>): number => (config.showEmptySegments || d.value) ? 1 : 0\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', setOpacity) as Transition<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>\n\n    transition.attrTween('d', (d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const nextAnimState: DonutArcAnimState = {\n        startAngle: d.startAngle,\n        endAngle: d.endAngle,\n        innerRadius: d.innerRadius,\n        outerRadius: d.outerRadius,\n        padAngle: d.padAngle,\n      }\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', setOpacity)\n  }\n}\n\nexport function removeArc<Datum> (\n  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,\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/flow-legend/config.d.ts

@@ -1,4 +1,3 @@
-import { Config } from "../../core/config";
 export interface FlowLegendConfigInterface {
     /** Custom width of the component.  Default: `undefined` */
     customWidth?: number;
@@ -17,13 +16,4 @@ export interface FlowLegendConfigInterface {
     /** 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;
-    lineColor: any;
-    labelColor: any;
-    arrowSymbol: string;
-    arrowColor: any;
-    onLegendItemClick: any;
-}
+export declare const FlowLegendDefaultConfig: FlowLegendConfigInterface;

package/components/flow-legend/config.js

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

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

@@ -1 +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  /** Color of the arrow. Default: `undefined` */\n  arrowColor?: 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  lineColor = undefined\n  labelColor = undefined\n  arrowSymbol = '▶'\n  arrowColor = undefined\n  onLegendItemClick = undefined\n}\n"],"names":[],"mappings":";;AAqBM,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,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;QACrB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAW,CAAA,WAAA,GAAG,GAAG,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;KAC9B;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/flow-legend/config.ts"],"sourcesContent":["export 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  /** Color of the arrow. Default: `undefined` */\n  arrowColor?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((label?: string, i?: number) => void);\n}\n\nexport const FlowLegendDefaultConfig: FlowLegendConfigInterface = {\n  customWidth: undefined,\n  items: [],\n  labelFontSize: 12,\n  lineColor: undefined,\n  labelColor: undefined,\n  arrowSymbol: '▶',\n  arrowColor: undefined,\n  onLegendItemClick: undefined,\n}\n"],"names":[],"mappings":"AAmBa,MAAA,uBAAuB,GAA8B;AAChE,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,aAAa,EAAE,EAAE;AACjB,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,iBAAiB,EAAE,SAAS;;;;;"}

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

@@ -1,13 +1,14 @@
 import { Selection } from 'd3-selection';
-import { FlowLegendConfig, FlowLegendConfigInterface } from './config';
+import { FlowLegendConfigInterface } from './config';
 import { FlowLegendItem } from './types';
 export declare class FlowLegend {
     div: Selection<HTMLDivElement, unknown, null, undefined>;
     element: HTMLElement;
     line: Selection<HTMLDivElement, unknown, null, undefined>;
     labels: Selection<HTMLDivElement, unknown, null, undefined>;
-    prevConfig: FlowLegendConfig;
-    config: FlowLegendConfig;
+    protected _defaultConfig: FlowLegendConfigInterface;
+    config: FlowLegendConfigInterface;
+    prevConfig: FlowLegendConfigInterface;
     protected _container: HTMLElement;
     constructor(element: HTMLElement, config?: FlowLegendConfigInterface);
     update(config: FlowLegendConfigInterface): void;

package/components/flow-legend/index.js

@@ -1,11 +1,14 @@
 import { select } from 'd3-selection';
 import { smartTransition } from '../../utils/d3.js';
-import { FlowLegendConfig } from './config.js';
+import { merge } from '../../utils/data.js';
+import { FlowLegendDefaultConfig } 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._defaultConfig = FlowLegendDefaultConfig;
+        this.config = this._defaultConfig;
         this._container = element;
         this.div = select(this._container).append('div').attr('class', root);
         this.element = this.div.node();
@@ -16,7 +19,7 @@ class FlowLegend {
     }
     update(config) {
         this.prevConfig = this.config;
-        this.config = new FlowLegendConfig().init(config);
+        this.config = merge(this._defaultConfig, config);
         this.render();
     }
     render() {

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

@@ -1 +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<HTMLDivElement, unknown, null, undefined>\n  element: HTMLElement\n  line: Selection<HTMLDivElement, unknown, null, undefined>\n  labels: Selection<HTMLDivElement, unknown, null, undefined>\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 } = this\n    if (!config.items.length) return\n\n    if (config.customWidth) this.div.style('width', `${config.customWidth}px`)\n\n    // Prepare Data\n    const legendData: FlowLegendItem[] = config.items.reduce((acc, label, i) => {\n      acc.push({\n        text: label,\n        index: i,\n        type: FlowLegendItemType.Label,\n      })\n\n      if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {\n        acc.push({\n          text: config.arrowSymbol,\n          index: i,\n          type: FlowLegendItemType.Symbol,\n        })\n      }\n      return acc\n    }, [])\n\n    // Draw\n    const legendItems = this.labels.selectAll<HTMLDivElement, FlowLegendItem>(`.${s.item}`)\n      .data(legendData)\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',\n        d => d.type === FlowLegendItemType.Symbol\n          ? s.arrow(config.arrowColor)\n          : s.label(config.labelFontSize, config.labelColor)\n      )\n      .classed(s.clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    smartTransition(legendItemsMerged, 500)\n      .attr('opacity', 1)\n    legendItemsMerged.select('span').html(d => d.text)\n\n    legendItems.exit().remove()\n\n    this.line\n      .attr('class', s.line(config.lineColor))\n      .style('opacity', config.items.length > 1 ? 1 : 0)\n  }\n\n  _onItemClick (event: MouseEvent, d: FlowLegendItem): void {\n    const { config } = this\n\n    if (config.onLegendItemClick) config.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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"}
+{"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'\nimport { merge } from 'utils/data'\n\n// Config\nimport { FlowLegendDefaultConfig, 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<HTMLDivElement, unknown, null, undefined>\n  element: HTMLElement\n  line: Selection<HTMLDivElement, unknown, null, undefined>\n  labels: Selection<HTMLDivElement, unknown, null, undefined>\n  protected _defaultConfig = FlowLegendDefaultConfig as FlowLegendConfigInterface\n  public config: FlowLegendConfigInterface = this._defaultConfig\n  prevConfig: FlowLegendConfigInterface\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 = merge(this._defaultConfig, config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n    if (!config.items.length) return\n\n    if (config.customWidth) this.div.style('width', `${config.customWidth}px`)\n\n    // Prepare Data\n    const legendData: FlowLegendItem[] = config.items.reduce((acc, label, i) => {\n      acc.push({\n        text: label,\n        index: i,\n        type: FlowLegendItemType.Label,\n      })\n\n      if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {\n        acc.push({\n          text: config.arrowSymbol,\n          index: i,\n          type: FlowLegendItemType.Symbol,\n        })\n      }\n      return acc\n    }, [])\n\n    // Draw\n    const legendItems = this.labels.selectAll<HTMLDivElement, FlowLegendItem>(`.${s.item}`)\n      .data(legendData)\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',\n        d => d.type === FlowLegendItemType.Symbol\n          ? s.arrow(config.arrowColor)\n          : s.label(config.labelFontSize, config.labelColor)\n      )\n      .classed(s.clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    smartTransition(legendItemsMerged, 500)\n      .attr('opacity', 1)\n    legendItemsMerged.select('span').html(d => d.text)\n\n    legendItems.exit().remove()\n\n    this.line\n      .attr('class', s.line(config.lineColor))\n      .style('opacity', config.items.length > 1 ? 1 : 0)\n  }\n\n  _onItemClick (event: MouseEvent, d: FlowLegendItem): void {\n    const { config } = this\n\n    if (config.onLegendItemClick) config.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/free-brush/config.d.ts

@@ -1,5 +1,5 @@
 import { D3BrushEvent } from 'd3-brush';
-import { XYComponentConfigInterface, XYComponentConfig } from "../../core/xy-component/config";
+import { XYComponentConfigInterface } from "../../core/xy-component/config";
 import { FreeBrushMode, FreeBrushSelection } from './types';
 export interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
     /** Brush selection mode. X - horizontal, Y - vertical, XY - both. Default: `FreeBrushMode.X` */
@@ -32,14 +32,4 @@ export interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConf
     /** Automatically hide the brush after selection. Default: `true` */
     autoHide?: boolean;
 }
-export declare class FreeBrushConfig<Datum> extends XYComponentConfig<Datum> implements FreeBrushConfigInterface<Datum> {
-    onBrush: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
-    onBrushStart: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
-    onBrushMove: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
-    onBrushEnd: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
-    handleWidth: number;
-    selection: FreeBrushSelection | null | undefined;
-    selectionMinLength: any;
-    mode: FreeBrushMode;
-    autoHide: boolean;
-}
+export declare const FreeBrushDefaultConfig: FreeBrushConfigInterface<unknown>;

package/components/free-brush/config.js

@@ -1,24 +1,15 @@
-import { XYComponentConfig } from '../../core/xy-component/config.js';
+import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
 import { FreeBrushMode } from './types.js';
 
-class FreeBrushConfig extends XYComponentConfig {
-    constructor() {
-        super(...arguments);
-        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-        this.onBrush = (s, e, userDriven) => { };
-        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-        this.onBrushStart = (s, e, userDriven) => { };
-        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-        this.onBrushMove = (s, e, userDriven) => { };
-        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-        this.onBrushEnd = (s, e, userDriven) => { };
-        this.handleWidth = 1;
-        this.selection = undefined;
-        this.selectionMinLength = undefined;
-        this.mode = FreeBrushMode.X;
-        this.autoHide = true;
-    }
-}
+const FreeBrushDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { 
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+    onBrush: (s, e, userDriven) => { }, 
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+    onBrushStart: (s, e, userDriven) => { }, 
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+    onBrushMove: (s, e, userDriven) => { }, 
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+    onBrushEnd: (s, e, userDriven) => { }, handleWidth: 1, selection: undefined, selectionMinLength: undefined, mode: FreeBrushMode.X, autoHide: true });
 
-export { FreeBrushConfig };
+export { FreeBrushDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/free-brush/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/free-brush/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { FreeBrushMode, FreeBrushSelection } from './types'\n\n// We extend partial XY config interface because x and y properties are optional for FreeBrush\nexport interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Brush selection mode. X - horizontal, Y - vertical, XY - both. Default: `FreeBrushMode.X` */\n  mode?: FreeBrushMode;\n  /** Callback function to be called on any Brush event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrush?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush start event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`\n  */\n  onBrushStart?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush move event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`\n  */\n  onBrushMove?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush end event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean)L void => {}`\n  */\n  onBrushEnd?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Width of the Brush handle. Default: `1` */\n  handleWidth?: number;\n  /** Brush selection in data space, can be used to force set the selection from outside.\n   * In case of two dimensional mode, the selection has the following format: `[[xMin, xMax], [yMin, yMax]]`.\n   * This config property gets updated on internal brush events. Default: `undefined`\n  */\n  selection?: FreeBrushSelection | null | undefined;\n  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */\n  selectionMinLength?: number | [number, number];\n  /** Automatically hide the brush after selection. Default: `true` */\n  autoHide?: boolean;\n}\n\nexport class FreeBrushConfig<Datum> extends XYComponentConfig<Datum> implements FreeBrushConfigInterface<Datum> {\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrush = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushStart = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushMove = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushEnd = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  handleWidth = 1\n  selection: FreeBrushSelection | null | undefined = undefined\n  selectionMinLength = undefined\n  mode: FreeBrushMode = FreeBrushMode.X\n  autoHide = true\n}\n"],"names":[],"mappings":";;;AAuCM,MAAO,eAAuB,SAAQ,iBAAwB,CAAA;AAApE,IAAA,WAAA,GAAA;;;QAEE,IAAO,CAAA,OAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;;QAExG,IAAY,CAAA,YAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;;QAE7G,IAAW,CAAA,WAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;;QAE5G,IAAU,CAAA,UAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;QAC3G,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;QACf,IAAS,CAAA,SAAA,GAA0C,SAAS,CAAA;QAC5D,IAAkB,CAAA,kBAAA,GAAG,SAAS,CAAA;AAC9B,QAAA,IAAA,CAAA,IAAI,GAAkB,aAAa,CAAC,CAAC,CAAA;QACrC,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;KAChB;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/free-brush/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { FreeBrushMode, FreeBrushSelection } from './types'\n\n// We extend partial XY config interface because x and y properties are optional for FreeBrush\nexport interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Brush selection mode. X - horizontal, Y - vertical, XY - both. Default: `FreeBrushMode.X` */\n  mode?: FreeBrushMode;\n  /** Callback function to be called on any Brush event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrush?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush start event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`\n  */\n  onBrushStart?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush move event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`\n  */\n  onBrushMove?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush end event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean)L void => {}`\n  */\n  onBrushEnd?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Width of the Brush handle. Default: `1` */\n  handleWidth?: number;\n  /** Brush selection in data space, can be used to force set the selection from outside.\n   * In case of two dimensional mode, the selection has the following format: `[[xMin, xMax], [yMin, yMax]]`.\n   * This config property gets updated on internal brush events. Default: `undefined`\n  */\n  selection?: FreeBrushSelection | null | undefined;\n  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */\n  selectionMinLength?: number | [number, number];\n  /** Automatically hide the brush after selection. Default: `true` */\n  autoHide?: boolean;\n}\n\nexport const FreeBrushDefaultConfig: FreeBrushConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrush: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushStart: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushMove: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushEnd: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {},\n  handleWidth: 1,\n  selection: undefined,\n  selectionMinLength: undefined,\n  mode: FreeBrushMode.X,\n  autoHide: true,\n}\n"],"names":[],"mappings":";;;AAuCO,MAAM,sBAAsB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC9B,wBAAwB,CAAA,EAAA;;IAE3B,OAAO,EAAE,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAU,GAAG;;IAEvG,YAAY,EAAE,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAU,GAAG;;IAE5G,WAAW,EAAE,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAU,GAAG;;AAE3G,IAAA,UAAU,EAAE,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,QAAa,EAC1G,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,SAAS,EAC7B,IAAI,EAAE,aAAa,CAAC,CAAC,EACrB,QAAQ,EAAE,IAAI;;;;"}

package/components/free-brush/index.d.ts

@@ -1,9 +1,10 @@
 import { XYComponentCore } from "../../core/xy-component";
-import { FreeBrushConfig, FreeBrushConfigInterface } from './config';
+import { FreeBrushConfigInterface } from './config';
 import * as s from './style';
-export declare class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfig<Datum>, FreeBrushConfigInterface<Datum>> {
+export declare class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfigInterface<Datum>> {
     static selectors: typeof s;
-    config: FreeBrushConfig<Datum>;
+    protected _defaultConfig: FreeBrushConfigInterface<Datum>;
+    config: FreeBrushConfigInterface<Datum>;
     private brush;
     private brushBehaviour;
     private _firstRender;

package/components/free-brush/index.js

@@ -1,25 +1,25 @@
 import { brush as brush$1, brushY, brushX } from 'd3-brush';
 import { XYComponentCore } from '../../core/xy-component/index.js';
-import { isNumber, clamp } from '../../utils/data.js';
+import { isNumber, isArray, clamp } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { FreeBrushMode } from './types.js';
-import { FreeBrushConfig } from './config.js';
+import { FreeBrushDefaultConfig } from './config.js';
 import * as style from './style.js';
 import { brush, hide } from './style.js';
 
 class FreeBrush extends XYComponentCore {
     constructor(config) {
         super();
-        this.config = new FreeBrushConfig();
+        this._defaultConfig = FreeBrushDefaultConfig;
+        this.config = this._defaultConfig;
         this._firstRender = true;
         if (config)
-            this.config.init(config);
+            this.setConfig(config);
         this.brush = this.g
             .append('g')
             .attr('class', brush);
     }
     _render(customDuration) {
-        var _a, _b, _c, _d;
         const { config } = this;
         const xScale = this.xScale;
         const yScale = this.yScale;
@@ -54,8 +54,9 @@ class FreeBrush extends XYComponentCore {
         let brushRange;
         switch (config.mode) {
             case FreeBrushMode.XY: {
-                const xSelectionRange = this._dataRangeToPixelRange([(_a = config.selection) === null || _a === void 0 ? void 0 : _a[0][0], (_b = config.selection) === null || _b === void 0 ? void 0 : _b[0][1]], xScale);
-                const ySelectionRange = this._dataRangeToPixelRange([(_c = config.selection) === null || _c === void 0 ? void 0 : _c[1][0], (_d = config.selection) === null || _d === void 0 ? void 0 : _d[1][1]], yScale, true);
+                const selection = config.selection;
+                const xSelectionRange = this._dataRangeToPixelRange([selection === null || selection === void 0 ? void 0 : selection[0][0], selection === null || selection === void 0 ? void 0 : selection[0][1]], xScale);
+                const ySelectionRange = this._dataRangeToPixelRange([selection === null || selection === void 0 ? void 0 : selection[1][0], selection === null || selection === void 0 ? void 0 : selection[1][1]], yScale, true);
                 brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null;
                 break;
             }
@@ -73,7 +74,6 @@ class FreeBrush extends XYComponentCore {
             this._firstRender = false;
     }
     _onBrush(event) {
-        var _a, _b, _c, _d;
         const { config } = this;
         const userDriven = !!(event === null || event === void 0 ? void 0 : event.sourceEvent);
         // Selection from the brush events is in Screen Space (pixels)
@@ -88,8 +88,9 @@ class FreeBrush extends XYComponentCore {
         let selectedDomain;
         switch (config.mode) {
             case FreeBrushMode.XY: {
-                const xSelection = this._pixelRangeToDataRange([s[0][0], s[1][0]], this.xScale, (_b = (_a = config.selectionMinLength) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : config.selectionMinLength);
-                const ySelection = this._pixelRangeToDataRange([s[0][1], s[1][1]], this.yScale, (_d = (_c = config.selectionMinLength) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : config.selectionMinLength, true);
+                const selection = s;
+                const xSelection = this._pixelRangeToDataRange([selection[0][0], selection[1][0]], this.xScale, isArray(config.selectionMinLength) ? config.selectionMinLength[0] : config.selectionMinLength);
+                const ySelection = this._pixelRangeToDataRange([selection[0][1], selection[1][1]], this.yScale, isArray(config.selectionMinLength) ? config.selectionMinLength[1] : config.selectionMinLength, true);
                 selectedDomain = (xSelection && ySelection) ? [
                     [xSelection === null || xSelection === void 0 ? void 0 : xSelection[0], xSelection === null || xSelection === void 0 ? void 0 : xSelection[1]],
                     [ySelection === null || ySelection === void 0 ? void 0 : ySelection[0], ySelection === null || ySelection === void 0 ? void 0 : ySelection[1]],
@@ -97,12 +98,12 @@ class FreeBrush extends XYComponentCore {
                 break;
             }
             case FreeBrushMode.Y: {
-                selectedDomain = this._pixelRangeToDataRange(s, this.yScale, config.selectionMinLength, true);
+                selectedDomain = this._pixelRangeToDataRange(s, this.yScale, isArray(config.selectionMinLength) ? config.selectionMinLength[1] : config.selectionMinLength, true);
                 break;
             }
             case FreeBrushMode.X:
             default: {
-                selectedDomain = this._pixelRangeToDataRange(s, this.xScale, config.selectionMinLength);
+                selectedDomain = this._pixelRangeToDataRange(s, this.xScale, isArray(config.selectionMinLength) ? config.selectionMinLength[0] : config.selectionMinLength);
                 break;
             }
         }