@unovis/ts 1.1.0-beta.3 → 1.1.0-beta.6

package/components/axis/config.d.ts

@@ -44,7 +44,7 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
     /** Font size of the tick text as CSS string. Default: `null` */
     tickTextFontSize?: string | null;
     /** Text alignment for ticks: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `undefined` */
-    tickTextAlign?: TextAlign;
+    tickTextAlign?: TextAlign | string;
     /** The spacing in pixels between the tick and it's label. Default: `8` */
     tickPadding?: number;
 }

package/components/axis/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/axis/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { AxisType } from 'components/axis/types'\nimport { Position } from 'types/position'\nimport { FitMode, TrimMode, TextAlign } from 'types/text'\n\n// We extend partial XY config interface because x and y properties are optional for Axis\nexport interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Axis position: `Position.Top`, `Position.Bottom`, `Position.Right` or `Position.Left`. Default: `undefined` */\n  position?: Position | string;\n  /** Axis type: `AxisType.X` or `AxisType.Y` */\n  type?: AxisType | string;\n  /** Extend the axis domain line to be full width or full height. Default: `true` */\n  fullSize?: boolean;\n  /** Axis label. Default: `undefined` */\n  label?: string;\n  /** Font size of the axis label as CSS string. Default: `null` */\n  labelFontSize?: string | null;\n  /** Distance between the axis and the label in pixels. Default: `8` */\n  labelMargin?: number;\n  /** Sets whether to draw the grid lines or not. Default: `true` */\n  gridLine?: boolean;\n  /** Sets whether to draw the tick lines or not. Default: `true` */\n  tickLine?: boolean;\n  /** Sets whether to draw the domain line or not. Default: `true` */\n  domainLine?: boolean;\n  /** Draw the min and max axis ticks only. Default: `false` */\n  minMaxTicksOnly?: boolean;\n  /** Tick label formatter function. Default: `undefined` */\n  tickFormat?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);\n  /** Explicitly set tick values. Default: `undefined` */\n  tickValues?: number[];\n  /** Set the approximate number of axis ticks (will be passed to D3's axis constructor). Default: `undefined` */\n  numTicks?: number;\n  /** Tick text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */\n  tickTextFitMode?: FitMode | string;\n  /** Maximum number of characters for tick text wrapping. Default: `undefined` */\n  tickTextLength?: number;\n  /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */\n  tickTextWidth?: number;\n  /** Tick text wrapping separator. String or array of strings. Default: `' '` */\n  tickTextSeparator?: string | string[];\n  /** Force word break for ticks when they don't fit. Default: `false` */\n  tickTextForceWordBreak?: boolean;\n  /** Tick text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */\n  tickTextTrimType?: TrimMode | string;\n  /** Font size of the tick text as CSS string. Default: `null` */\n  tickTextFontSize?: string | null;\n  /** Text alignment for ticks: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `undefined` */\n  tickTextAlign?: TextAlign;\n  /** The spacing in pixels between the tick and it's label. Default: `8` */\n  tickPadding?: number;\n}\n\nexport class AxisConfig<Datum> extends XYComponentConfig<Datum> implements AxisConfigInterface<Datum> {\n  position = undefined\n  type = undefined\n  label = undefined\n  labelFontSize = null\n  gridLine = true\n  tickLine = true\n  domainLine = true\n  numTicks = undefined\n  minMaxTicksOnly = false\n  tickTextLength = undefined\n  tickTextWidth = undefined\n  tickTextSeparator = ' '\n  tickTextForceWordBreak = false\n  tickTextTrimType = TrimMode.Middle\n  tickTextFitMode = FitMode.Wrap\n  tickTextFontSize = null\n  tickTextAlign = undefined\n  labelMargin = 8\n  tickFormat = undefined\n  tickValues = undefined\n  fullSize = true\n  tickPadding = 8\n}\n"],"names":[],"mappings":";;;AAuDM,MAAO,UAAkB,SAAQ,iBAAwB,CAAA;AAA/D,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAI,CAAA,IAAA,GAAG,SAAS,CAAA;QAChB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;QACjB,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAe,CAAA,eAAA,GAAG,KAAK,CAAA;QACvB,IAAc,CAAA,cAAA,GAAG,SAAS,CAAA;QAC1B,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAiB,CAAA,iBAAA,GAAG,GAAG,CAAA;QACvB,IAAsB,CAAA,sBAAA,GAAG,KAAK,CAAA;AAC9B,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAA;AAClC,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,CAAC,IAAI,CAAA;QAC9B,IAAgB,CAAA,gBAAA,GAAG,IAAI,CAAA;QACvB,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;QACf,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;KAChB;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/axis/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { AxisType } from 'components/axis/types'\nimport { Position } from 'types/position'\nimport { FitMode, TrimMode, TextAlign } from 'types/text'\n\n// We extend partial XY config interface because x and y properties are optional for Axis\nexport interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Axis position: `Position.Top`, `Position.Bottom`, `Position.Right` or `Position.Left`. Default: `undefined` */\n  position?: Position | string;\n  /** Axis type: `AxisType.X` or `AxisType.Y` */\n  type?: AxisType | string;\n  /** Extend the axis domain line to be full width or full height. Default: `true` */\n  fullSize?: boolean;\n  /** Axis label. Default: `undefined` */\n  label?: string;\n  /** Font size of the axis label as CSS string. Default: `null` */\n  labelFontSize?: string | null;\n  /** Distance between the axis and the label in pixels. Default: `8` */\n  labelMargin?: number;\n  /** Sets whether to draw the grid lines or not. Default: `true` */\n  gridLine?: boolean;\n  /** Sets whether to draw the tick lines or not. Default: `true` */\n  tickLine?: boolean;\n  /** Sets whether to draw the domain line or not. Default: `true` */\n  domainLine?: boolean;\n  /** Draw the min and max axis ticks only. Default: `false` */\n  minMaxTicksOnly?: boolean;\n  /** Tick label formatter function. Default: `undefined` */\n  tickFormat?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);\n  /** Explicitly set tick values. Default: `undefined` */\n  tickValues?: number[];\n  /** Set the approximate number of axis ticks (will be passed to D3's axis constructor). Default: `undefined` */\n  numTicks?: number;\n  /** Tick text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */\n  tickTextFitMode?: FitMode | string;\n  /** Maximum number of characters for tick text wrapping. Default: `undefined` */\n  tickTextLength?: number;\n  /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */\n  tickTextWidth?: number;\n  /** Tick text wrapping separator. String or array of strings. Default: `' '` */\n  tickTextSeparator?: string | string[];\n  /** Force word break for ticks when they don't fit. Default: `false` */\n  tickTextForceWordBreak?: boolean;\n  /** Tick text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */\n  tickTextTrimType?: TrimMode | string;\n  /** Font size of the tick text as CSS string. Default: `null` */\n  tickTextFontSize?: string | null;\n  /** Text alignment for ticks: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `undefined` */\n  tickTextAlign?: TextAlign | string;\n  /** The spacing in pixels between the tick and it's label. Default: `8` */\n  tickPadding?: number;\n}\n\nexport class AxisConfig<Datum> extends XYComponentConfig<Datum> implements AxisConfigInterface<Datum> {\n  position = undefined\n  type = undefined\n  label = undefined\n  labelFontSize = null\n  gridLine = true\n  tickLine = true\n  domainLine = true\n  numTicks = undefined\n  minMaxTicksOnly = false\n  tickTextLength = undefined\n  tickTextWidth = undefined\n  tickTextSeparator = ' '\n  tickTextForceWordBreak = false\n  tickTextTrimType = TrimMode.Middle\n  tickTextFitMode = FitMode.Wrap\n  tickTextFontSize = null\n  tickTextAlign = undefined\n  labelMargin = 8\n  tickFormat = undefined\n  tickValues = undefined\n  fullSize = true\n  tickPadding = 8\n}\n"],"names":[],"mappings":";;;AAuDM,MAAO,UAAkB,SAAQ,iBAAwB,CAAA;AAA/D,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAI,CAAA,IAAA,GAAG,SAAS,CAAA;QAChB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;QACjB,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAe,CAAA,eAAA,GAAG,KAAK,CAAA;QACvB,IAAc,CAAA,cAAA,GAAG,SAAS,CAAA;QAC1B,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAiB,CAAA,iBAAA,GAAG,GAAG,CAAA;QACvB,IAAsB,CAAA,sBAAA,GAAG,KAAK,CAAA;AAC9B,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAA;AAClC,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,CAAC,IAAI,CAAA;QAC9B,IAAgB,CAAA,gBAAA,GAAG,IAAI,CAAA;QACvB,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;QACf,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;KAChB;AAAA;;;;"}

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

@@ -1,7 +1,17 @@
 import { Config } from "../../core/config";
 import { BulletLegendItemInterface } from './types';
 export interface BulletLegendConfigInterface {
-    /** Legend items array BulletLegendItemInterface[]. Default: `[]` */
+    /** Legend items. Array of `BulletLegendItemInterface`:
+     * ```
+     * {
+     *   name: string | number;
+     *   color?: string;
+     *   inactive?: boolean;
+     *   hidden?: boolean;
+     *   pointer?: boolean;
+     * }
+     * ```
+    * Default: `[]` */
     items: BulletLegendItemInterface[];
     /** Apply a specific class to the labels. Default: `''` */
     labelClassName?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items array BulletLegendItemInterface[]. Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet circle size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n}\n\nexport class BulletLegendConfig extends Config implements BulletLegendConfigInterface {\n  items: BulletLegendItemInterface[] = []\n  labelClassName = ''\n  onLegendItemClick = undefined\n  labelFontSize = null\n  labelMaxWidth = null\n  bulletSize = null\n}\n"],"names":[],"mappings":";;AAoBM,MAAO,kBAAmB,SAAQ,MAAM,CAAA;AAA9C,IAAA,WAAA,GAAA;;QACE,IAAK,CAAA,KAAA,GAAgC,EAAE,CAAA;QACvC,IAAc,CAAA,cAAA,GAAG,EAAE,CAAA;QACnB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;KAClB;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items. Array of `BulletLegendItemInterface`:\n   * ```\n   * {\n   *   name: string | number;\n   *   color?: string;\n   *   inactive?: boolean;\n   *   hidden?: boolean;\n   *   pointer?: boolean;\n   * }\n   * ```\n  * Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet circle size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n}\n\nexport class BulletLegendConfig extends Config implements BulletLegendConfigInterface {\n  items: BulletLegendItemInterface[] = []\n  labelClassName = ''\n  onLegendItemClick = undefined\n  labelFontSize = null\n  labelMaxWidth = null\n  bulletSize = null\n}\n"],"names":[],"mappings":";;AA8BM,MAAO,kBAAmB,SAAQ,MAAM,CAAA;AAA9C,IAAA,WAAA,GAAA;;QACE,IAAK,CAAA,KAAA,GAAgC,EAAE,CAAA;QACvC,IAAc,CAAA,cAAA,GAAG,EAAE,CAAA;QACnB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;KAClB;AAAA;;;;"}

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

@@ -4,7 +4,7 @@ import { BulletLegendItemInterface } from './types';
 import * as s from './style';
 export declare class BulletLegend {
     static selectors: typeof s;
-    div: Selection<HTMLElement, any, HTMLElement, any>;
+    div: Selection<HTMLDivElement, unknown, null, undefined>;
     element: HTMLElement;
     prevConfig: BulletLegendConfig;
     config: BulletLegendConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { color } from 'd3-color'\n\n// Utils\nimport { getColor } from 'utils/color'\n\n// Config\nimport { BulletLegendConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  div: Selection<HTMLElement, any, HTMLElement, any>\n  element: HTMLElement\n  prevConfig: BulletLegendConfig\n  config: BulletLegendConfig\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    // Create SVG element for visualizations\n    this.div = select(this._container)\n      .append('div')\n      .attr('class', s.root)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = new BulletLegendConfig().init(config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n    const legendItems = this.div.selectAll(`.${s.item}`)\n      .data(config.items) as Selection<HTMLDivElement, any, HTMLDivElement, any>\n\n    const legendItemsEnter = legendItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .on('click', this._onItemClick.bind(this))\n\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .style('width', config.bulletSize)\n      .style('height', config.bulletSize)\n\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n    const legendBulletsToUpdate = legendItemsMerged.select(`.${s.bullet}`)\n    legendBulletsToUpdate.style('background-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))\n      .style('border-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))\n    legendBulletsToUpdate.each((d, i, elements) => {\n      if (d.inactive) {\n        const bulletColor = window.getComputedStyle(elements[i] as Element).getPropertyValue('background-color')\n        const transparentColor = color(bulletColor)\n        transparentColor.opacity = 0.4\n        select(elements[i])\n          .style('background-color', transparentColor.toString())\n      }\n    })\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.bullet","s.label","s.clickable","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { color } from 'd3-color'\n\n// Utils\nimport { getColor } from 'utils/color'\n\n// Config\nimport { BulletLegendConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  div: Selection<HTMLDivElement, unknown, null, undefined>\n  element: HTMLElement\n  prevConfig: BulletLegendConfig\n  config: BulletLegendConfig\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    // Create SVG element for visualizations\n    this.div = select(this._container)\n      .append('div')\n      .attr('class', s.root)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = new BulletLegendConfig().init(config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`)\n      .data(config.items)\n\n    const legendItemsEnter = legendItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .on('click', this._onItemClick.bind(this))\n\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .style('width', config.bulletSize)\n      .style('height', config.bulletSize)\n\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n    const legendBulletsToUpdate = legendItemsMerged.select(`.${s.bullet}`)\n    legendBulletsToUpdate.style('background-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))\n      .style('border-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))\n    legendBulletsToUpdate.each((d, i, elements) => {\n      if (d.inactive) {\n        const bulletColor = window.getComputedStyle(elements[i] as Element).getPropertyValue('background-color')\n        const transparentColor = color(bulletColor)\n        transparentColor.opacity = 0.4\n        select(elements[i])\n          .style('background-color', transparentColor.toString())\n      }\n    })\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.bullet","s.label","s.clickable","s"],"mappings":"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"}

package/components/chord-diagram/config.d.ts

@@ -1,8 +1,9 @@
 import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
-import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
-import { CurveType } from "../../types/curve";
-import { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from './types';
+import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
+import { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNodeDatum } from './types';
 export interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfigInterface {
+    /** Link color accessor function. Default: `var(--vis-chord-diagram-link-fill-color)` */
+    linkColor?: ColorAccessor<L>;
     /** Link value accessor function. Default: `l => l.value` */
     linkValue?: NumericAccessor<L>;
     /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */
@@ -10,33 +11,34 @@ export interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends
     /** Node width in pixels. Default: `15` */
     nodeWidth?: number;
     /** Node color accessor function ot constant value. Default: `d => d.color` */
-    nodeColor?: ColorAccessor<ChordNode<N>>;
+    nodeColor?: ColorAccessor<ChordNodeDatum<N>>;
     /** Node label accessor function. Default: `d => d.label ?? d.key` */
-    nodeLabel?: StringAccessor<N>;
+    nodeLabel?: StringAccessor<ChordNodeDatum<N>>;
+    /** Node label color accessor function. Default: `undefined` */
+    nodeLabelColor?: StringAccessor<ChordNodeDatum<N>>;
     /** Node label alignment. Default: `ChordLabelAlignment.Along` */
-    nodeLabelAlignment?: ChordLabelAlignment | string;
+    nodeLabelAlignment?: GenericAccessor<ChordLabelAlignment | string, ChordNodeDatum<N>>;
     /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */
     padAngle?: NumericAccessor<N>;
     /** Corner radius constant value or accessor function. Default: `2` */
     cornerRadius?: NumericAccessor<N>;
     /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */
     angleRange?: [number, number];
-    /** Curve type. Default: `CurveType.CatmullRom` */
-    curveType?: CurveType;
     /** The exponent property of the radius scale. Default: `2` */
     radiusScaleExponent?: number;
 }
 export declare class ChordDiagramConfig<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfig implements ChordDiagramConfigInterface<N, L> {
     duration: number;
+    linkColor: any;
     linkValue: (d: L) => number;
     nodeLevels: any[];
     nodeWidth: number;
-    nodeColor: any;
-    nodeLabel: (d: N) => string;
+    nodeColor: (d: ChordNodeDatum<N>) => string;
+    nodeLabel: (d: ChordNodeDatum<N>) => string;
+    nodeLabelColor: any;
     nodeLabelAlignment: ChordLabelAlignment;
     padAngle: number;
     cornerRadius: number;
     angleRange: [number, number];
-    curveType: CurveType;
     radiusScaleExponent: number;
 }

package/components/chord-diagram/config.js

@@ -1,5 +1,4 @@
 import { ComponentConfig } from '../../core/component/config.js';
-import { CurveType } from '../../types/curve.js';
 import { ChordLabelAlignment } from './types.js';
 
 /* eslint-disable dot-notation */
@@ -7,16 +6,17 @@ class ChordDiagramConfig extends ComponentConfig {
     constructor() {
         super(...arguments);
         this.duration = 800;
+        this.linkColor = undefined;
         this.linkValue = (d) => d['value'];
         this.nodeLevels = [];
         this.nodeWidth = 15;
-        this.nodeColor = undefined;
+        this.nodeColor = (d) => d['color'];
         this.nodeLabel = (d) => { var _a; return (_a = d['label']) !== null && _a !== void 0 ? _a : d['key']; };
+        this.nodeLabelColor = undefined;
         this.nodeLabelAlignment = ChordLabelAlignment.Along;
         this.padAngle = 0.02;
         this.cornerRadius = 2;
         this.angleRange = [0, 2 * Math.PI];
-        this.curveType = CurveType.CatmullRom;
         this.radiusScaleExponent = 2;
     }
 }

package/components/chord-diagram/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/chord-diagram/config.ts"],"sourcesContent":["/* eslint-disable dot-notation */\n\n// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { CurveType } from 'types/curve'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from './types'\n\nexport interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfigInterface {\n  /** Link value accessor function. Default: `l => l.value` */\n  linkValue?: NumericAccessor<L>;\n  /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */\n  nodeLevels?: string[];\n  /** Node width in pixels. Default: `15` */\n  nodeWidth?: number;\n  /** Node color accessor function ot constant value. Default: `d => d.color` */\n  nodeColor?: ColorAccessor<ChordNode<N>>;\n  /** Node label accessor function. Default: `d => d.label ?? d.key` */\n  nodeLabel?: StringAccessor<N>;\n  /** Node label alignment. Default: `ChordLabelAlignment.Along` */\n  nodeLabelAlignment?: ChordLabelAlignment | string;\n  /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */\n  padAngle?: NumericAccessor<N>;\n  /** Corner radius constant value or accessor function. Default: `2` */\n  cornerRadius?: NumericAccessor<N>;\n  /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** Curve type. Default: `CurveType.CatmullRom` */\n  curveType?: CurveType;\n  /** The exponent property of the radius scale. Default: `2` */\n  radiusScaleExponent?: number;\n}\n\nexport class ChordDiagramConfig<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfig implements ChordDiagramConfigInterface<N, L> {\n  duration = 800\n  linkValue = (d: L): number => d['value']\n  nodeLevels = []\n  nodeWidth = 15\n  nodeColor = undefined\n  nodeLabel = (d: N): string => d['label'] ?? d['key']\n  nodeLabelAlignment = ChordLabelAlignment.Along\n  padAngle = 0.02\n  cornerRadius = 2\n  angleRange: [number, number] = [0, 2 * Math.PI]\n  curveType = CurveType.CatmullRom\n  radiusScaleExponent = 2\n}\n"],"names":[],"mappings":";;;;AAAA;AAqCM,MAAO,kBAAuE,SAAQ,eAAe,CAAA;AAA3G,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,CAAC,CAAI,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;QACxC,IAAU,CAAA,UAAA,GAAG,EAAE,CAAA;QACf,IAAS,CAAA,SAAA,GAAG,EAAE,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;AACrB,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAAI,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,CAAC,mCAAI,CAAC,CAAC,KAAK,CAAC,CAAA,EAAA,CAAA;AACpD,QAAA,IAAA,CAAA,kBAAkB,GAAG,mBAAmB,CAAC,KAAK,CAAA;QAC9C,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAU,CAAA,UAAA,GAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,QAAA,IAAA,CAAA,SAAS,GAAG,SAAS,CAAC,UAAU,CAAA;QAChC,IAAmB,CAAA,mBAAA,GAAG,CAAC,CAAA;KACxB;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/chord-diagram/config.ts"],"sourcesContent":["/* eslint-disable dot-notation */\n\n// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNodeDatum } from './types'\n\nexport interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfigInterface {\n  /** Link color accessor function. Default: `var(--vis-chord-diagram-link-fill-color)` */\n  linkColor?: ColorAccessor<L>;\n  /** Link value accessor function. Default: `l => l.value` */\n  linkValue?: NumericAccessor<L>;\n  /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */\n  nodeLevels?: string[];\n  /** Node width in pixels. Default: `15` */\n  nodeWidth?: number;\n  /** Node color accessor function ot constant value. Default: `d => d.color` */\n  nodeColor?: ColorAccessor<ChordNodeDatum<N>>;\n  /** Node label accessor function. Default: `d => d.label ?? d.key` */\n  nodeLabel?: StringAccessor<ChordNodeDatum<N>>;\n  /** Node label color accessor function. Default: `undefined` */\n  nodeLabelColor?: StringAccessor<ChordNodeDatum<N>>;\n  /** Node label alignment. Default: `ChordLabelAlignment.Along` */\n  nodeLabelAlignment?: GenericAccessor<ChordLabelAlignment | string, ChordNodeDatum<N>>;\n  /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */\n  padAngle?: NumericAccessor<N>;\n  /** Corner radius constant value or accessor function. Default: `2` */\n  cornerRadius?: NumericAccessor<N>;\n  /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** The exponent property of the radius scale. Default: `2` */\n  radiusScaleExponent?: number;\n}\n\nexport class ChordDiagramConfig<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfig implements ChordDiagramConfigInterface<N, L> {\n  duration = 800\n  linkColor = undefined\n  linkValue = (d: L): number => d['value']\n  nodeLevels = []\n  nodeWidth = 15\n  nodeColor = (d: ChordNodeDatum<N>): string => d['color']\n  nodeLabel = (d: ChordNodeDatum<N>): string => d['label'] ?? d['key']\n  nodeLabelColor = undefined\n  nodeLabelAlignment = ChordLabelAlignment.Along\n  padAngle = 0.02\n  cornerRadius = 2\n  angleRange: [number, number] = [0, 2 * Math.PI]\n  radiusScaleExponent = 2\n}\n"],"names":[],"mappings":";;;AAAA;AAsCM,MAAO,kBAAuE,SAAQ,eAAe,CAAA;AAA3G,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;QACrB,IAAS,CAAA,SAAA,GAAG,CAAC,CAAI,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;QACxC,IAAU,CAAA,UAAA,GAAG,EAAE,CAAA;QACf,IAAS,CAAA,SAAA,GAAG,EAAE,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,CAAC,CAAoB,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;AACxD,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAAoB,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,CAAC,mCAAI,CAAC,CAAC,KAAK,CAAC,CAAA,EAAA,CAAA;QACpE,IAAc,CAAA,cAAA,GAAG,SAAS,CAAA;AAC1B,QAAA,IAAA,CAAA,kBAAkB,GAAG,mBAAmB,CAAC,KAAK,CAAA;QAC9C,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAU,CAAA,UAAA,GAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;QAC/C,IAAmB,CAAA,mBAAA,GAAG,CAAC,CAAA;KACxB;AAAA;;;;"}

package/components/chord-diagram/index.d.ts

@@ -3,7 +3,7 @@ import { ScalePower } from 'd3-scale';
 import { ComponentCore } from "../../core/component";
 import { GraphDataModel } from "../../data-models/graph";
 import { Spacing } from "../../types/spacing";
-import { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordRibbonPoint } from './types';
+import { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon } from './types';
 import { ChordDiagramConfig, ChordDiagramConfigInterface } from './config';
 import * as s from './style';
 export declare class ChordDiagram<N extends ChordInputNode, L extends ChordInputLink> extends ComponentCore<ChordDiagramData<N, L>, ChordDiagramConfig<N, L>, ChordDiagramConfigInterface<N, L>> {
@@ -15,11 +15,9 @@ export declare class ChordDiagram<N extends ChordInputNode, L extends ChordInput
     labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
     arcGen: import("d3-shape").Arc<any, ChordNode<N>>;
     radiusScale: ScalePower<number, number>;
-    linkAreaGen: import("d3-shape").Area<ChordRibbonPoint>;
     private _nodes;
     private _links;
     private _rootNode;
-    private _hierarchyNodes;
     events: {
         [x: string]: {
             mouseover: (d: ChordNode<N>) => void;
@@ -30,11 +28,6 @@ export declare class ChordDiagram<N extends ChordInputNode, L extends ChordInput
         };
     };
     constructor(config?: ChordDiagramConfigInterface<N, L>);
-    setData(data: {
-        nodes: N[];
-        links?: L[];
-    }): void;
-    setConfig(config: ChordDiagramConfigInterface<N, L>): void;
     get bleed(): Spacing;
     _render(customDuration?: number): void;
     private _getHierarchyNodes;

package/components/chord-diagram/index.js

@@ -1,19 +1,20 @@
 import { nest } from 'd3-collection';
-import { hierarchy, partition } from 'd3-hierarchy';
-import { arc, area } from 'd3-shape';
+import { partition, hierarchy } from 'd3-hierarchy';
+import { arc, line } from 'd3-shape';
 import { scalePow } from 'd3-scale';
 import { max } from 'd3-array';
 import { ComponentCore } from '../../core/component/index.js';
 import { GraphDataModel } from '../../data-models/graph.js';
-import { isNumber, getNumber, groupBy } from '../../utils/data.js';
+import { getValue, getString, isNumber, getNumber, groupBy } from '../../utils/data.js';
+import { estimateStringPixelLength } from '../../utils/text.js';
 import { Curve } from '../../types/curve.js';
 import { ChordLabelAlignment } from './types.js';
 import { ChordDiagramConfig } from './config.js';
 import { createNode, updateNode, removeNode } from './modules/node.js';
-import { createLabel, updateLabel, removeLabel } from './modules/label.js';
+import { LABEL_PADDING, createLabel, updateLabel, removeLabel } from './modules/label.js';
 import { createLink, updateLink, removeLink } from './modules/link.js';
 import * as style from './style.js';
-import { nodes, links, labels, link, node, gLabel, labelExit, hoveredNode, hoveredLink, transparent } from './style.js';
+import { links, nodes, labels, link, node, gLabel, labelExit, hoveredNode, hoveredLink, transparent } from './style.js';
 
 class ChordDiagram extends ComponentCore {
     constructor(config) {
@@ -22,7 +23,6 @@ class ChordDiagram extends ComponentCore {
         this.datamodel = new GraphDataModel();
         this.arcGen = arc();
         this.radiusScale = scalePow();
-        this.linkAreaGen = area();
         this._nodes = [];
         this._links = [];
         this.events = {
@@ -37,26 +37,43 @@ class ChordDiagram extends ComponentCore {
         };
         if (config)
             this.config.init(config);
-        this.linkGroup = this.g.append('g').attr('class', nodes);
-        this.nodeGroup = this.g.append('g').attr('class', links);
+        this.linkGroup = this.g.append('g').attr('class', links);
+        this.nodeGroup = this.g.append('g').attr('class', nodes);
         this.labelGroup = this.g.append('g').attr('class', labels);
     }
-    setData(data) {
-        this.datamodel.data = data;
-        this._hierarchyNodes = this._getHierarchyNodes();
-    }
-    setConfig(config) {
-        super.setConfig(config);
-        this._hierarchyNodes = this._getHierarchyNodes();
-    }
     get bleed() {
-        return { top: 4, bottom: 4, left: 4, right: 4 };
+        const { config } = this;
+        let top = 0;
+        let bottom = 0;
+        let right = 0;
+        let left = 0;
+        const padding = 4 + LABEL_PADDING * 2;
+        this._nodes.forEach(n => {
+            var _a;
+            const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment);
+            if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {
+                const labelWidth = estimateStringPixelLength((_a = getString(n.data, config.nodeLabel)) !== null && _a !== void 0 ? _a : '', 16);
+                const [x, y] = this.arcGen.centroid(n);
+                if (x < 0)
+                    left = Math.max(left, labelWidth);
+                else
+                    right = Math.max(right, labelWidth);
+                if (y < 0)
+                    top = Math.max(top, labelWidth);
+                else
+                    bottom = Math.max(bottom, labelWidth);
+            }
+        });
+        left += padding;
+        right += padding;
+        bottom += padding;
+        top += padding;
+        return { top, bottom, left, right };
     }
     _render(customDuration) {
-        var _a, _b;
         super._render(customDuration);
-        const { config, config: { nodeLabelAlignment, radiusScaleExponent }, radiusScale } = this;
-        const nodes = this._hierarchyNodes;
+        const { config, config: { radiusScaleExponent }, radiusScale } = this;
+        const nodes = this._getHierarchyNodes();
         const duration = isNumber(customDuration) ? customDuration : config.duration;
         this.arcGen
             .startAngle(d => d.x0)
@@ -64,53 +81,54 @@ class ChordDiagram extends ComponentCore {
             .cornerRadius(d => getNumber(d, config.cornerRadius))
             .innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))
             .outerRadius(d => this.radiusScale(d.y1));
-        const curveGen = Curve[config.curveType];
-        if ('alpha' in curveGen)
-            (_b = (_a = curveGen).alpha) === null || _b === void 0 ? void 0 : _b.call(_a, 0.25);
-        this.linkAreaGen
-            .x0(d => d.x0)
-            .x1(d => d.x1)
-            .y0(d => d.y0)
-            .y1(d => d.y1)
-            .curve(curveGen);
-        const hierarchyData = hierarchy(nodes, (d) => d.values);
-        hierarchyData.sum((d) => {
-            var _a;
-            return (_a = d._state) === null || _a === void 0 ? void 0 : _a.value;
-        });
-        let radius = Math.min(this._width, this._height) / 2 - max([this.bleed.top, this.bleed.bottom, this.bleed.left, this.bleed.right]);
-        let labelWidth = nodeLabelAlignment === ChordLabelAlignment.Perpendicular ? radius / (hierarchyData.height + 1) - config.nodeWidth : 0;
-        radius = radius - labelWidth;
+        const linkLineGen = line().curve(Curve.catmullRom.alpha(0.25));
+        const hierarchyData = nodes;
+        const partitionData = partition().size([config.angleRange[1], 1])(hierarchyData);
+        this._calculateRadialPosition(partitionData);
+        const size = Math.min(this._width, this._height);
+        const radius = size / 2 - max([this.bleed.top, this.bleed.bottom, this.bleed.left, this.bleed.right]);
+        const labelWidth = size - radius - config.nodeWidth;
         radiusScale
             .exponent(radiusScaleExponent)
             .range([0, radius]);
-        labelWidth -= labelWidth / (hierarchyData.height + 1);
-        const partitionData = partition().size([config.angleRange[1], 1])(hierarchyData);
-        this._calculateRadialPosition(partitionData);
         const partitionDataWithRoot = partitionData.descendants();
         this._rootNode = partitionDataWithRoot.find(d => d.depth === 0);
         this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0); // Filter out the root node
         this._links = this._getRibbons(partitionData);
         // Create Node and Link state objects
-        this._nodes.forEach(node => { node._state = {}; });
+        this._nodes.forEach((node, i) => {
+            // Add hierarchy data for non leaf nodes
+            if (node.children) {
+                node.data = Object.assign(node.data, {
+                    depth: node.depth,
+                    height: node.height,
+                    value: node.value,
+                    ancestors: node.ancestors().map(d => d.data.key),
+                });
+            }
+            node.x0 = Number.isNaN(node.x0) ? 0 : node.x0;
+            node.x1 = Number.isNaN(node.x1) ? 0 : node.x1;
+            node.uid = `${this.uid}-n${i}`;
+            node._state = {};
+        });
         this._links.forEach(link => { link._state = {}; });
         // Center the view
         this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
         // Links
         const linksSelection = this.linkGroup
             .selectAll(`.${link}`)
-            .data(this._links);
+            .data(this._links, d => String(d.data._id));
         const linksEnter = linksSelection.enter().append('path')
             .attr('class', link)
-            .call(createLink, this.linkAreaGen);
+            .call(createLink, linkLineGen);
         const linksMerged = linksSelection.merge(linksEnter);
-        linksMerged.call(updateLink, this.linkAreaGen, duration);
+        linksMerged.call(updateLink, config, linkLineGen, duration);
         linksSelection.exit()
             .call(removeLink, duration);
         // Nodes
         const nodesSelection = this.nodeGroup
             .selectAll(`.${node}`)
-            .data(this._nodes);
+            .data(this._nodes, d => String(d.uid));
         const nodesEnter = nodesSelection.enter().append('path')
             .attr('class', node)
             .call(createNode, config);
@@ -121,7 +139,7 @@ class ChordDiagram extends ComponentCore {
         // Labels
         const labels = this.labelGroup
             .selectAll(`.${gLabel}`)
-            .data(this._nodes);
+            .data(this._nodes, d => String(d.uid));
         const labelEnter = labels.enter().append('g')
             .attr('class', gLabel)
             .call(createLabel, config, radiusScale);
@@ -139,19 +157,22 @@ class ChordDiagram extends ComponentCore {
             l.source._state.value = (l.source._state.value || 0) + getNumber(l, config.linkValue);
             l.target._state.value = (l.target._state.value || 0) + getNumber(l, config.linkValue);
         });
-        // Todo: replace with d3 group
+        // TODO: Replace with d3-group
         const nestGen = nest();
         config.nodeLevels.forEach(levelAccessor => {
             nestGen.key(d => d[levelAccessor]);
         });
-        return { key: 'root', values: nestGen.entries(nodes) };
+        const root = { key: 'root', values: nestGen.entries(nodes) };
+        const hierarchyNodes = hierarchy(root, d => d.values)
+            .sum((d) => { var _a; return (_a = d._state) === null || _a === void 0 ? void 0 : _a.value; });
+        return hierarchyNodes;
     }
     _getRibbons(partitionData) {
         const { config, datamodel: { links } } = this;
-        const findNode = (nodes, id) => nodes.find(n => n.data.id === id);
+        const findNode = (nodes, id) => nodes.find(n => n.data._id === id);
         const leafNodes = partitionData.leaves();
-        const groupedBySource = groupBy(links, d => d.source.id);
-        const groupedByTarget = groupBy(links, d => d.target.id);
+        const groupedBySource = groupBy(links, d => d.source._id);
+        const groupedByTarget = groupBy(links, d => d.target._id);
         const getNodesInRibbon = (source, target, partitionHeight, nodes = []) => {
             nodes[source.height] = source;
             nodes[partitionHeight * 2 - target.height] = target;
@@ -164,33 +185,33 @@ class ChordDiagram extends ComponentCore {
                 var _a;
                 if (!link._state.points)
                     link._state.points = [];
-                const sourceLeaf = findNode(leafNodes, link.source.id);
-                const targetLeaf = findNode(leafNodes, link.target.id);
+                const sourceLeaf = findNode(leafNodes, link.source._id);
+                const targetLeaf = findNode(leafNodes, link.target._id);
                 const nodesInRibbon = getNodesInRibbon(type === 'out' ? sourceLeaf : targetLeaf, type === 'out' ? targetLeaf : sourceLeaf, partitionData.height);
                 const currNode = nodesInRibbon[depth];
                 const len = currNode.x1 - currNode.x0;
                 const x0 = (_a = currNode._prevX1) !== null && _a !== void 0 ? _a : currNode.x0;
                 const x1 = x0 + len * getNumber(link, config.linkValue) / currNode.value;
                 currNode._prevX1 = x1;
-                const converted = this._convertRadialToCartesian(type === 'out' ? x0 : x1, type === 'out' ? x1 : x0, currNode.y1, 0);
                 const pointIdx = type === 'out' ? depth : partitionData.height * 2 - 1 - depth;
-                link._state.points[pointIdx] = { x0: converted.x0, x1: converted.x1, y0: converted.y0, y1: converted.y1 };
+                link._state.points[pointIdx] = this._convertRadialToCartesian(Math.min(x0, x1), Math.max(x0, x1), currNode.y1, config.nodeWidth);
             });
         };
         leafNodes.forEach(leafNode => {
-            const outLinks = groupedBySource[leafNode.data.id] || [];
-            const inLinks = groupedByTarget[leafNode.data.id] || [];
+            const outLinks = groupedBySource[leafNode.data._id] || [];
+            const inLinks = groupedByTarget[leafNode.data._id] || [];
             for (let depth = 0; depth < partitionData.height; depth += 1) {
                 calculatePoints(outLinks, 'out', depth);
                 calculatePoints(inLinks, 'in', depth);
             }
         });
-        const ribbons = links.map((l) => {
-            const sourceNode = findNode(leafNodes, l.source.id);
-            const targetNode = findNode(leafNodes, l.target.id);
+        const ribbons = links.map(l => {
+            const sourceNode = findNode(leafNodes, l.source._id);
+            const targetNode = findNode(leafNodes, l.target._id);
             return {
                 source: sourceNode,
                 target: targetNode,
+                data: l,
                 points: l._state.points,
                 _state: {},
             };
@@ -198,15 +219,17 @@ class ChordDiagram extends ComponentCore {
         return ribbons;
     }
     _convertRadialToCartesian(x0, x1, y, nodeWidth) {
-        const r0 = this.radiusScale(y) - nodeWidth / 2;
+        const r = Math.max(this.radiusScale(y) - nodeWidth, 0);
         const a0 = x0 - Math.PI / 2;
-        const r1 = this.radiusScale(y) - nodeWidth / 2;
         const a1 = x1 - Math.PI / 2;
         return {
-            x0: r0 * Math.cos(a0),
-            x1: r1 * Math.cos(a1),
-            y0: r0 * Math.sin(a0),
-            y1: r1 * Math.sin(a1),
+            a0,
+            a1,
+            r,
+            x0: r * Math.cos(a0),
+            x1: r * Math.cos(a1),
+            y0: r * Math.sin(a0),
+            y1: r * Math.sin(a1),
         };
     }
     _calculateRadialPosition(hierarchyNode, scalingCoeff = 0.95, nodePadding = 0.02) {
@@ -269,8 +292,10 @@ class ChordDiagram extends ComponentCore {
             this._nodes.forEach(n => { delete n._state.hovered; });
             this._links.forEach(l => { delete l._state.hovered; });
         }
-        this.nodeGroup.selectAll(`.${node}`).classed(hoveredNode, (d) => d._state.hovered);
-        this.linkGroup.selectAll(`.${link}`).classed(hoveredLink, (d) => d._state.hovered);
+        this.nodeGroup.selectAll(`.${node}`)
+            .classed(hoveredNode, d => d._state.hovered);
+        this.linkGroup.selectAll(`.${link}`)
+            .classed(hoveredLink, d => d._state.hovered);
         this.g.classed(transparent, !!links);
     }
 }