@unovis/ts 1.1.2-beta.9 → 1.2.0-pre.0

package/components/nested-donut/config.js

@@ -20,6 +20,7 @@ class NestedDonutConfig extends ComponentConfig {
         this.segmentLabelColor = undefined;
         this.showBackground = false;
         this.showEmptySegments = false;
+        this.sort = undefined;
         this.value = undefined;
     }
 }

package/components/nested-donut/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/nested-donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'\n\nexport interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** Direction of hierarchy flow from root to leaf.\n   * `NestedDonutDirection.Inwards` starts from the outer most radius and works towards center\n   * `NestedDonutDirection.Outwards` starts from the inner most radius the consecutive layers outward.\n   *  Default: `NestedDonutDirection.Inwards`\n  */\n  direction?: NestedDonutDirection | string;\n  /* Numeric accessor for segment size value. Default: `undefined`. */\n  value?: NumericAccessor<Datum>;\n\n  /** Central label 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  /**\n   * Show donut background. The color is configurable via\n   * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.\n   * Default: `false`\n  */\n  showBackground?: boolean;\n\n  // Layers\n  /** Array of accessor functions to defined the nested groups  */\n  layers: StringAccessor<Datum>[];\n  /* Layer settings */\n  layerSettings?: GenericAccessor<NestedDonutLayerSettings, number>;\n  /* Space between layers */\n  layerPadding?: number;\n\n  // Segments\n  /** Corner Radius. Default: `0` */\n  cornerRadius?: number;\n  /** Angular size for empty segments in radians. Default: `Math.PI / 180` */\n  emptySegmentAngle?: number;\n  /** Hide segment labels when they don't fit. Default: `true` */\n  hideOverflowingSegmentLabels?: boolean;\n  /** Color accessor function for segments. Default: `undefined` */\n  segmentColor?: ColorAccessor<NestedDonutSegment<Datum>>;\n  /** Segment label accessor function. Default `undefined` */\n  segmentLabel?: StringAccessor<NestedDonutSegment<Datum>>;\n  /** Color accessor function for segment labels */\n  segmentLabelColor?: ColorAccessor<NestedDonutSegment<Datum>>;\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}\n\nexport class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {\n  angleRange = [0, 2 * Math.PI] as [number, number]\n  centralLabel = undefined\n  centralSubLabel = undefined\n  centralSubLabelWrap = true\n  cornerRadius = 0\n  direction = NestedDonutDirection.Inwards\n  emptySegmentAngle = Math.PI / 180\n  hideOverflowingSegmentLabels = true\n  layers: StringAccessor<Datum>[]\n  layerPadding = 0\n  layerSettings = undefined\n  segmentColor = undefined\n  segmentLabel = undefined\n  segmentLabelColor = undefined\n  showBackground = false\n  showEmptySegments = false\n  value = undefined\n}\n"],"names":[],"mappings":";;;AAAA;AA2DM,MAAO,iBAAyB,SAAQ,eAAe,CAAA;AAA7D,IAAA,WAAA,GAAA;;QACE,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAqB,CAAA;QACjD,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAe,CAAA,eAAA,GAAG,SAAS,CAAA;QAC3B,IAAmB,CAAA,mBAAA,GAAG,IAAI,CAAA;QAC1B,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;AAChB,QAAA,IAAA,CAAA,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAA;AACxC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAA;QACjC,IAA4B,CAAA,4BAAA,GAAG,IAAI,CAAA;QAEnC,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;QACtB,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAA;QACzB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;KAClB;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/nested-donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'\n\nexport interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** Direction of hierarchy flow from root to leaf.\n   * `NestedDonutDirection.Inwards` starts from the outer most radius and works towards center\n   * `NestedDonutDirection.Outwards` starts from the inner most radius the consecutive layers outward.\n   *  Default: `NestedDonutDirection.Inwards`\n  */\n  direction?: NestedDonutDirection | string;\n  /* Numeric accessor for segment size value. Default: `undefined`. */\n  value?: NumericAccessor<Datum>;\n\n  /** Central label 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  /**\n   * Show donut background. The color is configurable via\n   * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.\n   * Default: `false`\n  */\n  showBackground?: boolean;\n  /** Sort function for segments. Default `undefined` */\n  sort?: (a: NestedDonutSegment<Datum>, b: NestedDonutSegment<Datum>) => number;\n\n  // Layers\n  /** Array of accessor functions to defined the nested groups  */\n  layers: StringAccessor<Datum>[];\n  /* Layer settings */\n  layerSettings?: GenericAccessor<NestedDonutLayerSettings, number>;\n  /* Space between layers */\n  layerPadding?: number;\n\n  // Segments\n  /** Corner Radius. Default: `0` */\n  cornerRadius?: number;\n  /** Angular size for empty segments in radians. Default: `Math.PI / 180` */\n  emptySegmentAngle?: number;\n  /** Hide segment labels when they don't fit. Default: `true` */\n  hideOverflowingSegmentLabels?: boolean;\n  /** Color accessor function for segments. Default: `undefined` */\n  segmentColor?: ColorAccessor<NestedDonutSegment<Datum>>;\n  /** Segment label accessor function. Default `undefined` */\n  segmentLabel?: StringAccessor<NestedDonutSegment<Datum>>;\n  /** Color accessor function for segment labels */\n  segmentLabelColor?: ColorAccessor<NestedDonutSegment<Datum>>;\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}\n\nexport class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {\n  angleRange = [0, 2 * Math.PI] as [number, number]\n  centralLabel = undefined\n  centralSubLabel = undefined\n  centralSubLabelWrap = true\n  cornerRadius = 0\n  direction = NestedDonutDirection.Inwards\n  emptySegmentAngle = Math.PI / 180\n  hideOverflowingSegmentLabels = true\n  layers: StringAccessor<Datum>[]\n  layerPadding = 0\n  layerSettings = undefined\n  segmentColor = undefined\n  segmentLabel = undefined\n  segmentLabelColor = undefined\n  showBackground = false\n  showEmptySegments = false\n  sort = undefined\n  value = undefined\n}\n"],"names":[],"mappings":";;;AAAA;AA6DM,MAAO,iBAAyB,SAAQ,eAAe,CAAA;AAA7D,IAAA,WAAA,GAAA;;QACE,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAqB,CAAA;QACjD,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAe,CAAA,eAAA,GAAG,SAAS,CAAA;QAC3B,IAAmB,CAAA,mBAAA,GAAG,IAAI,CAAA;QAC1B,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;AAChB,QAAA,IAAA,CAAA,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAA;AACxC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAA;QACjC,IAA4B,CAAA,4BAAA,GAAG,IAAI,CAAA;QAEnC,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAY,CAAA,YAAA,GAAG,SAAS,CAAA;QACxB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;QACtB,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAA;QACzB,IAAI,CAAA,IAAA,GAAG,SAAS,CAAA;QAChB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;KAClB;AAAA;;;;"}

package/components/nested-donut/index.d.ts

@@ -8,8 +8,8 @@ import * as s from './style';
 export declare class NestedDonut<Datum> extends ComponentCore<Datum[], NestedDonutConfig<Datum>, NestedDonutConfigInterface<Datum>> {
     static selectors: typeof s;
     static cssVariables: {
-        nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
         nestedDonutFontFamily: "--vis-nested-donut-font-family";
+        nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
         nestedDonutCentralLabelFontSize: "--vis-nested-donut-central-label-font-size";
         nestedDonutCentralLabelFontWeight: "--vis-nested-donut-central-label-font-weight";
         nestedDonutCentralLabelTextColor: "--vis-nested-donut-central-label-text-color";
@@ -20,6 +20,7 @@ export declare class NestedDonut<Datum> extends ComponentCore<Datum[], NestedDon
         nestedDonutSegmentStrokeColor: "--vis-nested-donut-segment-stroke-color";
         nestedDonutSegmentLabelTextColorLight: "--vis-nested-donut-segment-label-text-color-light";
         nestedDonutSegmentLabelTextColorDark: "--vis-nested-donut-segment-label-text-color-dark";
+        nestedDonutSegmentLabelFontSize: "--vis-nested-donut-segment-label-font-size";
         darkNestedDonutBackgroundColor: "--vis-dark-nested-donut-background-color";
         darkNestedDonutCentralLabelTextColor: "--vis-dark-nested-donut-central-label-text-color";
         darkNestedDonutCentralSublabelTextColor: "--vis-dark-nested-donut-central-sublabel-text-color";

package/components/nested-donut/index.js

@@ -8,7 +8,7 @@ import { VerticalAlign } from '../../types/text.js';
 import { getHexValue, getColor } from '../../utils/color.js';
 import { smartTransition } from '../../utils/d3.js';
 import { isNumber, getString, getNumber, isNumberWithinRange, merge, getValue } from '../../utils/data.js';
-import { getCSSVariableValueInPixels } from '../../utils/misc.js';
+import { getPixelValue } from '../../utils/misc.js';
 import { cssvar } from '../../utils/style.js';
 import { wrapSVGText } from '../../utils/text.js';
 import { NestedDonutSegmentLabelAlignment, NestedDonutDirection } from './types.js';
@@ -65,8 +65,8 @@ class NestedDonut extends ComponentCore {
             return this.arcGen({
                 x0: (_b = (_a = config.angleRange) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0,
                 x1: (_d = (_c = config.angleRange) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 2 * Math.PI,
-                y0: d._innerRadius + 1,
-                y1: d._outerRadius - 1,
+                y0: d._innerRadius,
+                y1: d._outerRadius,
             });
         });
         smartTransition(backgrounds.exit(), duration)
@@ -124,45 +124,53 @@ class NestedDonut extends ComponentCore {
         const rootNode = config.value !== undefined
             ? hierarchy(nestedData).sum(index => typeof index === 'number' && getNumber(data[index], config.value, index))
             : hierarchy(nestedData).count();
-        const partitionData = partition().size([config.angleRange[1], 1])(rootNode.sort((a, b) => a.value - b.value));
-        partitionData.eachBefore(node => {
-            var _a, _b, _c, _d, _e, _f;
-            const key = node.data[0];
-            const values = ((_a = (node.data[1])) === null || _a === void 0 ? void 0 : _a.length) ? node.data[1].map(index => data[index]) : [];
-            node.data = { key, values, root: (_c = (_b = node.parent) === null || _b === void 0 ? void 0 : _b.data.root) !== null && _c !== void 0 ? _c : key };
+        const partitionData = partition().size([config.angleRange[1], 1])(rootNode);
+        partitionData
+            .each(node => {
+            var _a, _b, _c;
+            node.data = {
+                key: node.data[0],
+                values: ((_a = (node.data[1])) === null || _a === void 0 ? void 0 : _a.length) ? node.data[1].map((index) => data[index]) : [],
+                root: (_c = (_b = node.parent) === null || _b === void 0 ? void 0 : _b.data.root) !== null && _c !== void 0 ? _c : node.data[0],
+            };
+            node._id = `root${partitionData.path(node).map(d => d.data.key).join('->')}`;
             if (isNumberWithinRange(node.depth - 1, [0, layers.length - 1])) {
-                node._id = this.uid.replace(/-.*/gm, `-${key}${node.depth}`);
                 node._layer = layers[node.depth - 1];
                 node.y0 = node._layer._innerRadius;
                 node.y1 = node._layer._outerRadius;
             }
-            if (node.children) {
-                const colors = this.colorScale
-                    .domain([-1, node.children.length])
-                    .range([getHexValue((_d = node._state) === null || _d === void 0 ? void 0 : _d.fill, this.element), '#fff']);
-                const positions = pie()
-                    .startAngle(node.parent ? node.x0 : (_e = config.angleRange) === null || _e === void 0 ? void 0 : _e[0])
-                    .endAngle(node.parent ? node.x1 : (_f = config.angleRange) === null || _f === void 0 ? void 0 : _f[1])
-                    .value(d => config.showEmptySegments && d.value === 0 ? config.emptySegmentAngle : (d.x1 - d.x0))(node.children);
-                node.children.forEach((child, i) => {
-                    var _a;
-                    child._index = i;
-                    child.x0 = positions[i].startAngle;
-                    child.x1 = positions[i].endAngle;
-                    child._state = {
-                        fill: (_a = getColor(child, config.segmentColor, positions[i].index, child.depth !== 1)) !== null && _a !== void 0 ? _a : colors(positions[i].index),
-                    };
-                });
-            }
+        })
+            .eachAfter(node => { var _a; return (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(ch => node.data.values.push(...ch.data.values)); })
+            .eachBefore(node => {
+            var _a, _b, _c;
+            if (!node.children || node.depth === rootNode.height - 1)
+                return;
+            const colors = this.colorScale
+                .domain([-1, node.children.length])
+                .range([getHexValue((_a = node._state) === null || _a === void 0 ? void 0 : _a.fill, this.element), '#fff']);
+            const positions = pie()
+                .startAngle(node.parent ? node.x0 : (_b = config.angleRange) === null || _b === void 0 ? void 0 : _b[0])
+                .endAngle(node.parent ? node.x1 : (_c = config.angleRange) === null || _c === void 0 ? void 0 : _c[1])
+                .value(d => config.showEmptySegments && d.value === 0
+                ? config.emptySegmentAngle
+                : (d.x1 - d.x0))
+                .sort(config.sort)(node.children);
+            node.children.forEach((child, i) => {
+                var _a;
+                child._index = i;
+                child.x0 = positions[i].startAngle;
+                child.x1 = positions[i].endAngle;
+                child._state = {
+                    fill: (_a = getColor(child, config.segmentColor, positions[i].index, child.depth !== 1)) !== null && _a !== void 0 ? _a : colors(positions[i].index),
+                };
+            });
         });
-        partitionData.eachAfter(node => { var _a; return (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(child => { var _a, _b; return (_a = node.data.values) === null || _a === void 0 ? void 0 : _a.push(...(_b = child.data) === null || _b === void 0 ? void 0 : _b.values); }); });
         const segments = partitionData.descendants().filter(d => { var _a; return ((_a = d.parent) === null || _a === void 0 ? void 0 : _a.value) && d.data.key; });
         return segments;
     }
     _getLayerSettings() {
         const { direction, layers, layerPadding, layerSettings } = this.config;
-        const strokeWidth = getCSSVariableValueInPixels(cssvar(variables.nestedDonutSegmentStrokeWidth), this.element);
-        const outerRadius = (Math.min(this._width, this._height) - strokeWidth) / 2;
+        const outerRadius = Math.min(this._width, this._height) / 2;
         const defaultLayerSettings = {
             backgroundColor: cssvar(variables.nestedDonutBackgroundColor),
             labelAlignment: NestedDonutSegmentLabelAlignment.Perpendicular,
@@ -172,7 +180,11 @@ class NestedDonut extends ComponentCore {
             const layerId = direction === NestedDonutDirection.Outwards ? i : arr.length;
             const layerConfig = merge(defaultLayerSettings, getValue(layerId, layerSettings));
             const radius = arr.length ? arr[0]._innerRadius - layerPadding : outerRadius;
-            arr.unshift(Object.assign(Object.assign({}, layerConfig), { _id: layerId, _outerRadius: radius, _innerRadius: radius - layerConfig.width }));
+            const layerWidth = getPixelValue(layerConfig.width);
+            if (layerWidth === null) {
+                console.warn(`Unovis | Nested Donut: Could not parse width ${layerConfig.width}. Setting to default.`);
+            }
+            arr.unshift(Object.assign(Object.assign({}, layerConfig), { _id: layerId, _outerRadius: radius, _innerRadius: radius - (layerWidth !== null && layerWidth !== void 0 ? layerWidth : defaultLayerSettings.width) }));
             return arr;
         }, new Array());
         return direction === NestedDonutDirection.Inwards ? layerItems.reverse() : layerItems;

package/components/nested-donut/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/nested-donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { arc, pie } from 'd3-shape'\nimport { hierarchy, partition } from 'd3-hierarchy'\nimport { scaleLinear, ScaleLinear } from 'd3-scale'\nimport { group } from 'd3-array'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Types\nimport { VerticalAlign } from 'types/text'\n\n// Utils\nimport { getColor, getHexValue } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString, getValue, isNumber, isNumberWithinRange, merge } from 'utils/data'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\nimport { cssvar } from 'utils/style'\nimport { wrapSVGText } from 'utils/text'\n\n// Local Types\nimport { NestedDonutDirection, NestedDonutSegment, NestedDonutLayer, NestedDonutSegmentLabelAlignment } from './types'\n\n// Config\nimport { NestedDonutConfig, NestedDonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\nimport { createLabel, updateLabel, removeLabel } from './modules/label'\n\n// Styles\nimport * as s from './style'\n\nexport class NestedDonut<Datum> extends ComponentCore<\nDatum[],\nNestedDonutConfig<Datum>,\nNestedDonutConfigInterface<Datum>\n> {\n  static selectors = s\n  static cssVariables = s.variables\n  config: NestedDonutConfig<Datum> = new NestedDonutConfig()\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGGElement, 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\n  arcGen = arc<Partial<NestedDonutSegment<Datum>>>()\n  colorScale: ScaleLinear<string, string> = scaleLinear()\n\n  events = { }\n\n  constructor (config?: NestedDonutConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n    this.arcBackground = this.g.append('g')\n    this.arcGroup = this.g.append('g')\n      .attr('class', s.segmentsGroup)\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  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const layers = this._getLayerSettings()\n    const data = this._getHierarchyData(layers)\n\n    this.arcGen\n      .startAngle(d => d.x0)\n      .endAngle(d => d.x1)\n      .innerRadius(d => d.y0)\n      .outerRadius(d => d.y1)\n      .cornerRadius(config.cornerRadius)\n\n    this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Layer backgrounds\n    const backgrounds = this.arcBackground\n      .selectAll<SVGPathElement, NestedDonutLayer>(`.${s.background}`)\n      .data(layers, d => d._id)\n\n    const backgroundsEnter = backgrounds.enter().append('path')\n      .attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n\n    const backgroundsMerged = backgrounds.merge(backgroundsEnter)\n      .style('transition', `fill ${duration}ms`)\n      .style('fill', d => d.backgroundColor)\n\n    smartTransition(backgroundsMerged, duration)\n      .attr('d', d => this.arcGen({\n        x0: config.angleRange?.[0] ?? 0,\n        x1: config.angleRange?.[1] ?? 2 * Math.PI,\n        y0: d._innerRadius + 1,\n        y1: d._outerRadius - 1,\n      }))\n\n    smartTransition(backgrounds.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n\n    // Segments\n    const segments = this.arcGroup.selectAll<SVGGElement, NestedDonutSegment<Datum>>(`${s.segment}`)\n      .data(data, d => d._id)\n\n    const segmentsEnter = segments.enter()\n      .append('g')\n      .attr('class', s.segment)\n\n    segments.merge(segmentsEnter)\n    smartTransition(segments.exit(), duration)\n      .attr('class', s.segmentExit)\n      .style('opacity', 0)\n      .remove()\n\n    // Segment arcs\n    const arcs = this.arcGroup\n      .selectAll<SVGPathElement, NestedDonutSegment<Datum>>(`.${s.segmentArc}`)\n      .data(data, d => d._id)\n\n    const arcsEnter = segmentsEnter.append('path')\n      .attr('class', s.segmentArc)\n      .call(createArc, config)\n\n    arcs.merge(arcsEnter)\n      .call(updateArc, config, this.arcGen, duration)\n\n    arcs.exit<NestedDonutSegment<Datum>>()\n      .attr('class', s.segmentExit)\n      .call(removeArc, duration)\n\n    // Segment labels\n    const labels = this.arcGroup\n      .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)\n      .data(data, d => d._id)\n\n    const labelsEnter = segmentsEnter.append('text')\n      .attr('class', s.segmentLabel)\n      .call(createLabel, this.arcGen)\n\n    labels.merge(labelsEnter)\n      .call(updateLabel, config, this.arcGen, duration)\n\n    labels.exit<NestedDonutSegment<Datum>>()\n      .call(removeLabel, duration)\n\n    // Chart labels\n    this.centralLabel\n      .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n      .text(config.centralLabel ?? null)\n\n    this.centralSubLabel\n      .attr('dy', config.centralLabel ? '0.55em' : null)\n      .text(config.centralSubLabel ?? null)\n\n    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, layers[0]._innerRadius * 1.9, VerticalAlign.Top)\n  }\n\n  private _getHierarchyData (layers: NestedDonutLayer[]): NestedDonutSegment<Datum>[] {\n    const { config, datamodel: { data } } = this\n\n    const layerAccessors = config.layers?.map(layerAccessor => (i: number) => getString(data[i], layerAccessor, i))\n    const nestedData = group(data.keys(), ...layerAccessors as [(i: number) => string])\n    const rootNode = config.value !== undefined\n      ? hierarchy(nestedData).sum(index => typeof index === 'number' && getNumber(data[index], config.value, index))\n      : hierarchy(nestedData).count()\n\n    const partitionData = partition().size([config.angleRange[1], 1])(rootNode.sort((a, b) => a.value - b.value)) as NestedDonutSegment<Datum>\n\n    partitionData.eachBefore(node => {\n      const key = node.data[0] as string\n      const values = (node.data[1])?.length ? node.data[1].map(index => data[index]) : []\n      node.data = { key, values, root: node.parent?.data.root ?? key }\n\n      if (isNumberWithinRange(node.depth - 1, [0, layers.length - 1])) {\n        node._id = this.uid.replace(/-.*/gm, `-${key}${node.depth}`)\n        node._layer = layers[node.depth - 1]\n        node.y0 = node._layer._innerRadius\n        node.y1 = node._layer._outerRadius\n      }\n\n      if (node.children) {\n        const colors = this.colorScale\n          .domain([-1, node.children.length])\n          .range([getHexValue(node._state?.fill, this.element), '#fff'])\n\n        const positions = pie<NestedDonutSegment<Datum>>()\n          .startAngle(node.parent ? node.x0 : config.angleRange?.[0])\n          .endAngle(node.parent ? node.x1 : config.angleRange?.[1])\n          .value(d => config.showEmptySegments && d.value === 0 ? config.emptySegmentAngle : (d.x1 - d.x0))(node.children)\n\n        node.children.forEach((child, i) => {\n          child._index = i\n          child.x0 = positions[i].startAngle\n          child.x1 = positions[i].endAngle\n          child._state = {\n            fill:\n              getColor(child, config.segmentColor, positions[i].index, child.depth !== 1) ??\n              colors(positions[i].index),\n          }\n        })\n      }\n    })\n    partitionData.eachAfter(node => node.children?.forEach(child => node.data.values?.push(...child.data?.values)))\n    const segments = partitionData.descendants().filter(d => d.parent?.value && d.data.key)\n    return segments\n  }\n\n  private _getLayerSettings (): NestedDonutLayer[] {\n    const { direction, layers, layerPadding, layerSettings } = this.config\n\n    const strokeWidth = getCSSVariableValueInPixels(cssvar(s.variables.nestedDonutSegmentStrokeWidth), this.element)\n    const outerRadius = (Math.min(this._width, this._height) - strokeWidth) / 2\n\n    const defaultLayerSettings = {\n      backgroundColor: cssvar(s.variables.nestedDonutBackgroundColor),\n      labelAlignment: NestedDonutSegmentLabelAlignment.Perpendicular,\n      width: outerRadius * 0.75 / layers.length,\n    }\n\n    const layerItems = layers.reduceRight((arr, _, i) => {\n      const layerId = direction === NestedDonutDirection.Outwards ? i : arr.length\n      const layerConfig = merge(defaultLayerSettings, getValue(layerId, layerSettings))\n      const radius = arr.length ? arr[0]._innerRadius - layerPadding : outerRadius\n      arr.unshift({\n        ...layerConfig,\n        _id: layerId,\n        _outerRadius: radius,\n        _innerRadius: radius - layerConfig.width,\n      })\n      return arr\n    }, new Array<NestedDonutLayer>())\n\n    return direction === NestedDonutDirection.Inwards ? layerItems.reverse() : layerItems\n  }\n}\n"],"names":["s.segmentsGroup","s.centralLabel","s.centralSubLabel","s.background","s.segment","s.segmentExit","s.segmentArc","s.segmentLabel","s.variables","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/nested-donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { arc, pie } from 'd3-shape'\nimport { hierarchy, partition } from 'd3-hierarchy'\nimport { scaleLinear, ScaleLinear } from 'd3-scale'\nimport { group } from 'd3-array'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Types\nimport { VerticalAlign } from 'types/text'\n\n// Utils\nimport { getColor, getHexValue } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString, getValue, isNumber, isNumberWithinRange, merge } from 'utils/data'\nimport { getPixelValue } from 'utils/misc'\nimport { cssvar } from 'utils/style'\nimport { wrapSVGText } from 'utils/text'\n\n// Local Types\nimport { NestedDonutDirection, NestedDonutSegment, NestedDonutLayer, NestedDonutSegmentLabelAlignment } from './types'\n\n// Config\nimport { NestedDonutConfig, NestedDonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\nimport { createLabel, updateLabel, removeLabel } from './modules/label'\n\n// Styles\nimport * as s from './style'\n\nexport class NestedDonut<Datum> extends ComponentCore<\nDatum[],\nNestedDonutConfig<Datum>,\nNestedDonutConfigInterface<Datum>\n> {\n  static selectors = s\n  static cssVariables = s.variables\n  config: NestedDonutConfig<Datum> = new NestedDonutConfig()\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGGElement, 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\n  arcGen = arc<Partial<NestedDonutSegment<Datum>>>()\n  colorScale: ScaleLinear<string, string> = scaleLinear()\n\n  events = { }\n\n  constructor (config?: NestedDonutConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n    this.arcBackground = this.g.append('g')\n    this.arcGroup = this.g.append('g')\n      .attr('class', s.segmentsGroup)\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  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const layers = this._getLayerSettings()\n    const data = this._getHierarchyData(layers)\n\n    this.arcGen\n      .startAngle(d => d.x0)\n      .endAngle(d => d.x1)\n      .innerRadius(d => d.y0)\n      .outerRadius(d => d.y1)\n      .cornerRadius(config.cornerRadius)\n\n    this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Layer backgrounds\n    const backgrounds = this.arcBackground\n      .selectAll<SVGPathElement, NestedDonutLayer>(`.${s.background}`)\n      .data(layers, d => d._id)\n\n    const backgroundsEnter = backgrounds.enter().append('path')\n      .attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n\n    const backgroundsMerged = backgrounds.merge(backgroundsEnter)\n      .style('transition', `fill ${duration}ms`)\n      .style('fill', d => d.backgroundColor)\n\n    smartTransition(backgroundsMerged, duration)\n      .attr('d', d => this.arcGen({\n        x0: config.angleRange?.[0] ?? 0,\n        x1: config.angleRange?.[1] ?? 2 * Math.PI,\n        y0: d._innerRadius,\n        y1: d._outerRadius,\n      }))\n\n    smartTransition(backgrounds.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n\n    // Segments\n    const segments = this.arcGroup.selectAll<SVGGElement, NestedDonutSegment<Datum>>(`${s.segment}`)\n      .data(data, d => d._id)\n\n    const segmentsEnter = segments.enter()\n      .append('g')\n      .attr('class', s.segment)\n\n    segments.merge(segmentsEnter)\n    smartTransition(segments.exit(), duration)\n      .attr('class', s.segmentExit)\n      .style('opacity', 0)\n      .remove()\n\n    // Segment arcs\n    const arcs = this.arcGroup\n      .selectAll<SVGPathElement, NestedDonutSegment<Datum>>(`.${s.segmentArc}`)\n      .data(data, d => d._id)\n\n    const arcsEnter = segmentsEnter.append('path')\n      .attr('class', s.segmentArc)\n      .call(createArc, config)\n\n    arcs.merge(arcsEnter)\n      .call(updateArc, config, this.arcGen, duration)\n\n    arcs.exit<NestedDonutSegment<Datum>>()\n      .attr('class', s.segmentExit)\n      .call(removeArc, duration)\n\n    // Segment labels\n    const labels = this.arcGroup\n      .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)\n      .data(data, d => d._id)\n\n    const labelsEnter = segmentsEnter.append('text')\n      .attr('class', s.segmentLabel)\n      .call(createLabel, this.arcGen)\n\n    labels.merge(labelsEnter)\n      .call(updateLabel, config, this.arcGen, duration)\n\n    labels.exit<NestedDonutSegment<Datum>>()\n      .call(removeLabel, duration)\n\n    // Chart labels\n    this.centralLabel\n      .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n      .text(config.centralLabel ?? null)\n\n    this.centralSubLabel\n      .attr('dy', config.centralLabel ? '0.55em' : null)\n      .text(config.centralSubLabel ?? null)\n\n    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, layers[0]._innerRadius * 1.9, VerticalAlign.Top)\n  }\n\n  private _getHierarchyData (layers: NestedDonutLayer[]): NestedDonutSegment<Datum>[] {\n    const { config, datamodel: { data } } = this\n\n    const layerAccessors = config.layers?.map(layerAccessor => (i: number) => getString(data[i], layerAccessor, i))\n    const nestedData = group(data.keys(), ...layerAccessors as [(i: number) => string])\n\n    const rootNode = config.value !== undefined\n      ? hierarchy(nestedData).sum(index => typeof index === 'number' && getNumber(data[index], config.value, index))\n      : hierarchy(nestedData).count()\n\n    const partitionData = partition().size([config.angleRange[1], 1])(rootNode) as NestedDonutSegment<Datum>\n\n    partitionData\n      .each(node => {\n        node.data = {\n          key: node.data[0] as string,\n          values: (node.data[1])?.length ? node.data[1].map((index: number) => data[index]) : [],\n          root: node.parent?.data.root ?? node.data[0],\n        }\n        node._id = `root${partitionData.path(node).map(d => d.data.key).join('->')}`\n        if (isNumberWithinRange(node.depth - 1, [0, layers.length - 1])) {\n          node._layer = layers[node.depth - 1]\n          node.y0 = node._layer._innerRadius\n          node.y1 = node._layer._outerRadius\n        }\n      })\n      .eachAfter(node => node.children?.forEach(ch => node.data.values.push(...ch.data.values)))\n      .eachBefore(node => {\n        if (!node.children || node.depth === rootNode.height - 1) return\n\n        const colors = this.colorScale\n          .domain([-1, node.children.length])\n          .range([getHexValue(node._state?.fill, this.element), '#fff'])\n\n        const positions = pie<NestedDonutSegment<Datum>>()\n          .startAngle(node.parent ? node.x0 : config.angleRange?.[0])\n          .endAngle(node.parent ? node.x1 : config.angleRange?.[1])\n          .value(d => config.showEmptySegments && d.value === 0\n            ? config.emptySegmentAngle\n            : (d.x1 - d.x0))\n          .sort(config.sort)(node.children)\n\n        node.children.forEach((child, i) => {\n          child._index = i\n          child.x0 = positions[i].startAngle\n          child.x1 = positions[i].endAngle\n          child._state = {\n            fill:\n              getColor(child, config.segmentColor, positions[i].index, child.depth !== 1) ??\n              colors(positions[i].index),\n          }\n        })\n      })\n\n    const segments = partitionData.descendants().filter(d => d.parent?.value && d.data.key)\n    return segments\n  }\n\n  private _getLayerSettings (): NestedDonutLayer[] {\n    const { direction, layers, layerPadding, layerSettings } = this.config\n\n    const outerRadius = Math.min(this._width, this._height) / 2\n\n    const defaultLayerSettings = {\n      backgroundColor: cssvar(s.variables.nestedDonutBackgroundColor),\n      labelAlignment: NestedDonutSegmentLabelAlignment.Perpendicular,\n      width: outerRadius * 0.75 / layers.length,\n    }\n    const layerItems = layers.reduceRight((arr, _, i) => {\n      const layerId = direction === NestedDonutDirection.Outwards ? i : arr.length\n      const layerConfig = merge(defaultLayerSettings, getValue(layerId, layerSettings))\n      const radius = arr.length ? arr[0]._innerRadius - layerPadding : outerRadius\n      const layerWidth = getPixelValue(layerConfig.width)\n      if (layerWidth === null) {\n        console.warn(`Unovis | Nested Donut: Could not parse width ${layerConfig.width}. Setting to default.`)\n      }\n      arr.unshift({\n        ...layerConfig,\n        _id: layerId,\n        _outerRadius: radius,\n        _innerRadius: radius - (layerWidth ?? defaultLayerSettings.width),\n      })\n      return arr\n    }, new Array<NestedDonutLayer>())\n\n    return direction === NestedDonutDirection.Inwards ? layerItems.reverse() : layerItems\n  }\n}\n"],"names":["s.segmentsGroup","s.centralLabel","s.centralSubLabel","s.background","s.segment","s.segmentExit","s.segmentArc","s.segmentLabel","s.variables","s"],"mappings":"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"}

package/components/nested-donut/modules/label.js

@@ -1,9 +1,9 @@
 import { select } from 'd3-selection';
 import { color } from 'd3-color';
-import { UNOVIS_TEXT_DEFAULT } from '../../../styles/index.js';
 import { getColor, hexToBrightness } from '../../../utils/color.js';
 import { smartTransition } from '../../../utils/d3.js';
 import { getString } from '../../../utils/data.js';
+import { getCSSVariableValueInPixels } from '../../../utils/misc.js';
 import { cssvar } from '../../../utils/style.js';
 import { wrapSVGText } from '../../../utils/text.js';
 import { NestedDonutSegmentLabelAlignment } from '../types.js';
@@ -31,7 +31,7 @@ function getLabelTransform(d, arcGen) {
 function getLabelBounds(d) {
     const arcWidth = d.y1 - d.y0;
     const arcLength = d._layer._innerRadius * (d.x1 - d.x0);
-    const bandwidth = Math.max(Math.abs(Math.cos(d.x0 + (d.x1 - d.x0) / 2 - Math.PI / 2) * d._layer.width), arcWidth);
+    const bandwidth = Math.max(Math.abs(Math.cos(d.x0 + (d.x1 - d.x0) / 2 - Math.PI / 2) * arcWidth), arcWidth);
     switch (d._layer.labelAlignment) {
         case NestedDonutSegmentLabelAlignment.Perpendicular:
             return { width: arcWidth, height: arcLength };
@@ -55,10 +55,15 @@ function updateLabel(selection, config, arcGen, duration) {
         .each((d, i, els) => {
         const bounds = getLabelBounds(d);
         const label = select(els[i]).call(wrapSVGText, bounds.width);
-        const offset = label.selectChildren().size() - 1;
         const { width, height } = label.node().getBBox();
-        label.attr('dy', -offset * UNOVIS_TEXT_DEFAULT.fontSize + (2 * offset))
-            .attr('visibility', config.hideOverflowingSegmentLabels && (width > bounds.width || height > bounds.height) && 'hidden');
+        if (config.hideOverflowingSegmentLabels && (width > bounds.width || height > bounds.height) && 'hidden') {
+            label.attr('visibility', 'hidden');
+        }
+        else {
+            const fontSize = getCSSVariableValueInPixels(cssvar(variables.nestedDonutSegmentLabelFontSize), els[i]);
+            const len = label.selectChildren().size() - 1;
+            label.attr('dy', -fontSize / 2 * len);
+        }
     });
     smartTransition(selection, duration)
         .attr('transform', d => getLabelTransform(d, arcGen))

package/components/nested-donut/modules/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../../../src/components/nested-donut/modules/label.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { color } from 'd3-color'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { UNOVIS_TEXT_DEFAULT } from 'styles'\nimport { getColor, hexToBrightness } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getString } from 'utils/data'\nimport { cssvar } from 'utils/style'\nimport { wrapSVGText } from 'utils/text'\n\n// Config\nimport { NestedDonutConfig } from '../config'\n\n// Local Types\nimport { NestedDonutSegment, NestedDonutSegmentLabelAlignment } from '../types'\n\n// Styles\nimport { variables } from '../style'\n\nfunction getLabelFillColor<Datum> (\n  d: NestedDonutSegment<Datum>,\n  config: NestedDonutConfig<Datum>\n): string {\n  const c = getColor(d, config.segmentColor) ?? d._state.fill\n  const colorParsed = color(c)\n  const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0\n  return cssvar(brightness > 0.65 ? variables.nestedDonutSegmentLabelTextColorLight : variables.nestedDonutSegmentLabelTextColorDark)\n}\n\nfunction getLabelTransform<Datum> (\n  d: NestedDonutSegment<Datum>,\n  arcGen: Arc<unknown, NestedDonutSegment<Datum>>\n): string {\n  const translate = `translate(${arcGen.centroid(d)})`\n  const degree = 180 / Math.PI * (arcGen.startAngle()(d) + arcGen.endAngle()(d)) / 2 - 90\n  switch (d._layer.labelAlignment) {\n    case NestedDonutSegmentLabelAlignment.Along:\n      return `${translate} rotate(${degree + 90})`\n    case NestedDonutSegmentLabelAlignment.Perpendicular:\n      return `${translate} rotate(${degree > 90 ? degree - 180 : degree})`\n    default:\n      return `${translate}`\n  }\n}\n\nfunction getLabelBounds<Datum> (\n  d: NestedDonutSegment<Datum>\n): { width: number; height: number } {\n  const arcWidth = d.y1 - d.y0\n  const arcLength = d._layer._innerRadius * (d.x1 - d.x0)\n  const bandwidth = Math.max(Math.abs(Math.cos(d.x0 + (d.x1 - d.x0) / 2 - Math.PI / 2) * d._layer.width), arcWidth)\n  switch (d._layer.labelAlignment) {\n    case NestedDonutSegmentLabelAlignment.Perpendicular:\n      return { width: arcWidth, height: arcLength }\n    case NestedDonutSegmentLabelAlignment.Along:\n      return { width: arcLength, height: arcWidth }\n    case NestedDonutSegmentLabelAlignment.Straight:\n      return { width: bandwidth, height: bandwidth }\n  }\n}\n\nexport function createLabel<Datum> (\n  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  arcGen: Arc<unknown, NestedDonutSegment<Datum>>\n): void {\n  selection\n    .attr('transform', d => getLabelTransform(d, arcGen))\n    .style('visibility', null)\n    .style('opacity', 0)\n}\n\n\nexport function updateLabel<Datum> (\n  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  config: NestedDonutConfig<Datum>,\n  arcGen: Arc<unknown, NestedDonutSegment<Datum>>,\n  duration: number\n): void {\n  selection\n    .text(d => getString(d, config.segmentLabel) ?? d.data.key)\n    .style('transition', `fill ${duration}ms`)\n    .style('fill', d => getColor(d, config.segmentLabelColor) ?? getLabelFillColor(d, config))\n    .each((d, i, els) => {\n      const bounds = getLabelBounds(d)\n      const label = select(els[i]).call(wrapSVGText, bounds.width)\n      const offset = label.selectChildren().size() - 1\n      const { width, height } = label.node().getBBox()\n\n      label.attr('dy', -offset * UNOVIS_TEXT_DEFAULT.fontSize + (2 * offset))\n        .attr('visibility', config.hideOverflowingSegmentLabels && (width > bounds.width || height > bounds.height) && 'hidden')\n    })\n\n  smartTransition(selection, duration)\n    .attr('transform', d => getLabelTransform(d, arcGen))\n    .style('opacity', 1)\n}\n\nexport function removeLabel<Datum> (\n  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA,SAAS,iBAAiB,CACxB,CAA4B,EAC5B,MAAgC,EAAA;;AAEhC,IAAA,MAAM,CAAC,GAAG,CAAA,EAAA,GAAA,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;AAC3D,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;AAC5B,IAAA,MAAM,UAAU,GAAG,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;AACvE,IAAA,OAAO,MAAM,CAAC,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,qCAAqC,GAAG,SAAS,CAAC,oCAAoC,CAAC,CAAA;AACrI,CAAC;AAED,SAAS,iBAAiB,CACxB,CAA4B,EAC5B,MAA+C,EAAA;IAE/C,MAAM,SAAS,GAAG,CAAA,UAAA,EAAa,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA,CAAA,CAAG,CAAA;AACpD,IAAA,MAAM,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AACvF,IAAA,QAAQ,CAAC,CAAC,MAAM,CAAC,cAAc;QAC7B,KAAK,gCAAgC,CAAC,KAAK;AACzC,YAAA,OAAO,GAAG,SAAS,CAAA,QAAA,EAAW,MAAM,GAAG,EAAE,GAAG,CAAA;QAC9C,KAAK,gCAAgC,CAAC,aAAa;AACjD,YAAA,OAAO,GAAG,SAAS,CAAA,QAAA,EAAW,MAAM,GAAG,EAAE,GAAG,MAAM,GAAG,GAAG,GAAG,MAAM,GAAG,CAAA;AACtE,QAAA;YACE,OAAO,CAAA,EAAG,SAAS,CAAA,CAAE,CAAA;AACxB,KAAA;AACH,CAAC;AAED,SAAS,cAAc,CACrB,CAA4B,EAAA;IAE5B,MAAM,QAAQ,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAA;AAC5B,IAAA,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;IACvD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAA;AACjH,IAAA,QAAQ,CAAC,CAAC,MAAM,CAAC,cAAc;QAC7B,KAAK,gCAAgC,CAAC,aAAa;YACjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAA;QAC/C,KAAK,gCAAgC,CAAC,KAAK;YACzC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAA;QAC/C,KAAK,gCAAgC,CAAC,QAAQ;YAC5C,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAA;AACjD,KAAA;AACH,CAAC;AAEe,SAAA,WAAW,CACzB,SAAqF,EACrF,MAA+C,EAAA;IAE/C,SAAS;AACN,SAAA,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACpD,SAAA,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC;AACzB,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AACxB,CAAC;AAGK,SAAU,WAAW,CACzB,SAAqF,EACrF,MAAgC,EAChC,MAA+C,EAC/C,QAAgB,EAAA;IAEhB,SAAS;SACN,IAAI,CAAC,CAAC,cAAI,OAAA,CAAA,EAAA,GAAA,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA,EAAA,CAAC;AAC1D,SAAA,KAAK,CAAC,YAAY,EAAE,CAAQ,KAAA,EAAA,QAAQ,IAAI,CAAC;SACzC,KAAK,CAAC,MAAM,EAAE,CAAC,IAAG,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA,EAAA,CAAC;SACzF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AAClB,QAAA,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;AAChC,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;QAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;AAChD,QAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,CAAA;AAEhD,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,mBAAmB,CAAC,QAAQ,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;aACpE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,4BAA4B,KAAK,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,CAAA;AAC5H,KAAC,CAAC,CAAA;AAEJ,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACpD,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AACxB,CAAC;AAEe,SAAA,WAAW,CACzB,SAAqF,EACrF,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnB,SAAA,MAAM,EAAE,CAAA;AACb;;;;"}
+{"version":3,"file":"label.js","sources":["../../../../src/components/nested-donut/modules/label.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { color } from 'd3-color'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor, hexToBrightness } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getString } from 'utils/data'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\nimport { cssvar } from 'utils/style'\nimport { wrapSVGText } from 'utils/text'\n\n// Config\nimport { NestedDonutConfig } from '../config'\n\n// Local Types\nimport { NestedDonutSegment, NestedDonutSegmentLabelAlignment } from '../types'\n\n// Styles\nimport { variables } from '../style'\n\nfunction getLabelFillColor<Datum> (\n  d: NestedDonutSegment<Datum>,\n  config: NestedDonutConfig<Datum>\n): string {\n  const c = getColor(d, config.segmentColor) ?? d._state.fill\n  const colorParsed = color(c)\n  const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0\n  return cssvar(brightness > 0.65 ? variables.nestedDonutSegmentLabelTextColorLight : variables.nestedDonutSegmentLabelTextColorDark)\n}\n\nfunction getLabelTransform<Datum> (\n  d: NestedDonutSegment<Datum>,\n  arcGen: Arc<unknown, NestedDonutSegment<Datum>>\n): string {\n  const translate = `translate(${arcGen.centroid(d)})`\n  const degree = 180 / Math.PI * (arcGen.startAngle()(d) + arcGen.endAngle()(d)) / 2 - 90\n  switch (d._layer.labelAlignment) {\n    case NestedDonutSegmentLabelAlignment.Along:\n      return `${translate} rotate(${degree + 90})`\n    case NestedDonutSegmentLabelAlignment.Perpendicular:\n      return `${translate} rotate(${degree > 90 ? degree - 180 : degree})`\n    default:\n      return `${translate}`\n  }\n}\n\nfunction getLabelBounds<Datum> (\n  d: NestedDonutSegment<Datum>\n): { width: number; height: number } {\n  const arcWidth = d.y1 - d.y0\n  const arcLength = d._layer._innerRadius * (d.x1 - d.x0)\n  const bandwidth = Math.max(Math.abs(Math.cos(d.x0 + (d.x1 - d.x0) / 2 - Math.PI / 2) * arcWidth), arcWidth)\n  switch (d._layer.labelAlignment) {\n    case NestedDonutSegmentLabelAlignment.Perpendicular:\n      return { width: arcWidth, height: arcLength }\n    case NestedDonutSegmentLabelAlignment.Along:\n      return { width: arcLength, height: arcWidth }\n    case NestedDonutSegmentLabelAlignment.Straight:\n      return { width: bandwidth, height: bandwidth }\n  }\n}\n\nexport function createLabel<Datum> (\n  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  arcGen: Arc<unknown, NestedDonutSegment<Datum>>\n): void {\n  selection\n    .attr('transform', d => getLabelTransform(d, arcGen))\n    .style('visibility', null)\n    .style('opacity', 0)\n}\n\n\nexport function updateLabel<Datum> (\n  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  config: NestedDonutConfig<Datum>,\n  arcGen: Arc<unknown, NestedDonutSegment<Datum>>,\n  duration: number\n): void {\n  selection\n    .text(d => getString(d, config.segmentLabel) ?? d.data.key)\n    .style('transition', `fill ${duration}ms`)\n    .style('fill', d => getColor(d, config.segmentLabelColor) ?? getLabelFillColor(d, config))\n    .each((d, i, els) => {\n      const bounds = getLabelBounds(d)\n      const label = select(els[i]).call(wrapSVGText, bounds.width)\n\n      const { width, height } = label.node().getBBox()\n\n      if (config.hideOverflowingSegmentLabels && (width > bounds.width || height > bounds.height) && 'hidden') {\n        label.attr('visibility', 'hidden')\n      } else {\n        const fontSize = getCSSVariableValueInPixels(cssvar(variables.nestedDonutSegmentLabelFontSize), els[i])\n        const len = label.selectChildren().size() - 1\n        label.attr('dy', -fontSize / 2 * len)\n      }\n    })\n\n  smartTransition(selection, duration)\n    .attr('transform', d => getLabelTransform(d, arcGen))\n    .style('opacity', 1)\n}\n\nexport function removeLabel<Datum> (\n  selection: Selection<SVGTextElement, NestedDonutSegment<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/nested-donut/style.d.ts

@@ -1,8 +1,8 @@
 export declare const root: string;
 export declare const segmentsGroup: string;
 export declare const variables: {
-    nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
     nestedDonutFontFamily: "--vis-nested-donut-font-family";
+    nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
     nestedDonutCentralLabelFontSize: "--vis-nested-donut-central-label-font-size";
     nestedDonutCentralLabelFontWeight: "--vis-nested-donut-central-label-font-weight";
     nestedDonutCentralLabelTextColor: "--vis-nested-donut-central-label-text-color";
@@ -13,6 +13,7 @@ export declare const variables: {
     nestedDonutSegmentStrokeColor: "--vis-nested-donut-segment-stroke-color";
     nestedDonutSegmentLabelTextColorLight: "--vis-nested-donut-segment-label-text-color-light";
     nestedDonutSegmentLabelTextColorDark: "--vis-nested-donut-segment-label-text-color-dark";
+    nestedDonutSegmentLabelFontSize: "--vis-nested-donut-segment-label-font-size";
     darkNestedDonutBackgroundColor: "--vis-dark-nested-donut-background-color";
     darkNestedDonutCentralLabelTextColor: "--vis-dark-nested-donut-central-label-text-color";
     darkNestedDonutCentralSublabelTextColor: "--vis-dark-nested-donut-central-sublabel-text-color";

package/components/nested-donut/style.js

@@ -2,9 +2,10 @@ import { css } from '@emotion/css';
 import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 
 const cssVarDefaults = {
-    '--vis-nested-donut-background-color': '#E7E9F3',
     // Undefined by default to allow proper fallback to var(--vis-font-family)
     '--vis-nested-donut-font-family': undefined,
+    // Background
+    '--vis-nested-donut-background-color': '#E7E9F3',
     // Central label
     '--vis-nested-donut-central-label-font-size': '16px',
     '--vis-nested-donut-central-label-font-weight': 600,
@@ -15,9 +16,10 @@ const cssVarDefaults = {
     '--vis-nested-donut-central-sublabel-text-color': '#5b5f6d',
     // Segments
     '--vis-nested-donut-segment-stroke-width': '1px',
-    '--vis-nested-donut-segment-stroke-color': undefined,
+    '--vis-nested-donut-segment-stroke-color': 'var(--vis-nested-donut-background-color)',
     '--vis-nested-donut-segment-label-text-color-light': '#5b5f6d',
     '--vis-nested-donut-segment-label-text-color-dark': '#fff',
+    '--vis-nested-donut-segment-label-font-size': '1em',
     /* Dark theme */
     '--vis-dark-nested-donut-background-color': '#18160C',
     '--vis-dark-nested-donut-central-label-text-color': '#fff',
@@ -34,6 +36,8 @@ injectGlobalCssVariables(cssVarDefaults, root);
 const background = css `
   label: background;
   fill: var(--vis-nested-donut-background-color);
+  stroke-width: var(--vis-nested-donut-segment-stroke-width);
+  stroke: var(--vis-nested-donut-segment-stroke-color);
 `;
 const segment = css `
   label: segment;
@@ -44,13 +48,14 @@ const segmentExit = css `
 const segmentArc = css `
   label: segment-arc;
   stroke-width: var(--vis-nested-donut-segment-stroke-width);
-  stroke: var(--vis-nested-donut-segment-stroke-color, var(--vis-donut-background-color));
+  stroke: var(--vis-nested-donut-segment-stroke-color);
 `;
 const segmentLabel = css `
   label: segment-label;
   text-anchor: middle;
   dominant-baseline: middle;
   user-select: none;
+  font-size: var(--vis-nested-donut-segment-label-font-size);
 `;
 const centralLabel = css `
   label: central-label;

package/components/nested-donut/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/nested-donut/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-nested-donut-background-color': '#E7E9F3',\n  // Undefined by default to allow proper fallback to var(--vis-font-family)\n  '--vis-nested-donut-font-family': undefined,\n\n  // Central label\n  '--vis-nested-donut-central-label-font-size': '16px',\n  '--vis-nested-donut-central-label-font-weight': 600,\n  '--vis-nested-donut-central-label-text-color': '#5b5f6d',\n\n  // Central sub-label\n  '--vis-nested-donut-central-sublabel-font-size': '12px;',\n  '--vis-nested-donut-central-sublabel-font-weight': 500,\n  '--vis-nested-donut-central-sublabel-text-color': '#5b5f6d',\n\n  // Segments\n  '--vis-nested-donut-segment-stroke-width': '1px',\n  '--vis-nested-donut-segment-stroke-color': undefined,\n  '--vis-nested-donut-segment-label-text-color-light': '#5b5f6d',\n  '--vis-nested-donut-segment-label-text-color-dark': '#fff',\n\n  /* Dark theme */\n  '--vis-dark-nested-donut-background-color': '#18160C',\n  '--vis-dark-nested-donut-central-label-text-color': '#fff',\n  '--vis-dark-nested-donut-central-sublabel-text-color': '#fff',\n}\n\nexport const root = css`\n  label: nested-donut-component;\n`\n\nexport const segmentsGroup = css`\n  label: nested-donut-segments-group;\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = css`\n  label: background;\n  fill: var(--vis-nested-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n `\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const segmentArc = css`\n  label: segment-arc;\n  stroke-width: var(--vis-nested-donut-segment-stroke-width);\n  stroke: var(--vis-nested-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentLabel = css`\n  label: segment-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  user-select: none;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-nested-donut-central-label-font-size);\n  font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-nested-donut-central-label-font-weight);\n  fill: var(--vis-nested-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-sub-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-nested-donut-central-sublabel-font-size);\n  font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));\n  font-weight: var(--vis-nested-donut-central-sublabel-font-weight);\n  fill: var(--vis-nested-donut-central-sublabel-text-color);\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,qCAAqC,EAAE,SAAS;;AAEhD,IAAA,gCAAgC,EAAE,SAAS;;AAG3C,IAAA,4CAA4C,EAAE,MAAM;AACpD,IAAA,8CAA8C,EAAE,GAAG;AACnD,IAAA,6CAA6C,EAAE,SAAS;;AAGxD,IAAA,+CAA+C,EAAE,OAAO;AACxD,IAAA,iDAAiD,EAAE,GAAG;AACtD,IAAA,gDAAgD,EAAE,SAAS;;AAG3D,IAAA,yCAAyC,EAAE,KAAK;AAChD,IAAA,yCAAyC,EAAE,SAAS;AACpD,IAAA,mDAAmD,EAAE,SAAS;AAC9D,IAAA,kDAAkD,EAAE,MAAM;;AAG1D,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,qDAAqD,EAAE,MAAM;CAC9D,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;GAExB;AAEK,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;EAK9B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/nested-donut/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  // Undefined by default to allow proper fallback to var(--vis-font-family)\n  '--vis-nested-donut-font-family': undefined,\n\n  // Background\n  '--vis-nested-donut-background-color': '#E7E9F3',\n\n  // Central label\n  '--vis-nested-donut-central-label-font-size': '16px',\n  '--vis-nested-donut-central-label-font-weight': 600,\n  '--vis-nested-donut-central-label-text-color': '#5b5f6d',\n\n  // Central sub-label\n  '--vis-nested-donut-central-sublabel-font-size': '12px;',\n  '--vis-nested-donut-central-sublabel-font-weight': 500,\n  '--vis-nested-donut-central-sublabel-text-color': '#5b5f6d',\n\n  // Segments\n  '--vis-nested-donut-segment-stroke-width': '1px',\n  '--vis-nested-donut-segment-stroke-color': 'var(--vis-nested-donut-background-color)',\n  '--vis-nested-donut-segment-label-text-color-light': '#5b5f6d',\n  '--vis-nested-donut-segment-label-text-color-dark': '#fff',\n  '--vis-nested-donut-segment-label-font-size': '1em',\n\n  /* Dark theme */\n  '--vis-dark-nested-donut-background-color': '#18160C',\n  '--vis-dark-nested-donut-central-label-text-color': '#fff',\n  '--vis-dark-nested-donut-central-sublabel-text-color': '#fff',\n}\n\nexport const root = css`\n  label: nested-donut-component;\n`\n\nexport const segmentsGroup = css`\n  label: nested-donut-segments-group;\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = css`\n  label: background;\n  fill: var(--vis-nested-donut-background-color);\n  stroke-width: var(--vis-nested-donut-segment-stroke-width);\n  stroke: var(--vis-nested-donut-segment-stroke-color);\n`\n\nexport const segment = css`\n  label: segment;\n `\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const segmentArc = css`\n  label: segment-arc;\n  stroke-width: var(--vis-nested-donut-segment-stroke-width);\n  stroke: var(--vis-nested-donut-segment-stroke-color);\n`\n\nexport const segmentLabel = css`\n  label: segment-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-nested-donut-segment-label-font-size);\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-nested-donut-central-label-font-size);\n  font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-nested-donut-central-label-font-weight);\n  fill: var(--vis-nested-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-sub-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-nested-donut-central-sublabel-font-size);\n  font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));\n  font-weight: var(--vis-nested-donut-central-sublabel-font-weight);\n  fill: var(--vis-nested-donut-central-sublabel-text-color);\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;;AAErB,IAAA,gCAAgC,EAAE,SAAS;;AAG3C,IAAA,qCAAqC,EAAE,SAAS;;AAGhD,IAAA,4CAA4C,EAAE,MAAM;AACpD,IAAA,8CAA8C,EAAE,GAAG;AACnD,IAAA,6CAA6C,EAAE,SAAS;;AAGxD,IAAA,+CAA+C,EAAE,OAAO;AACxD,IAAA,iDAAiD,EAAE,GAAG;AACtD,IAAA,gDAAgD,EAAE,SAAS;;AAG3D,IAAA,yCAAyC,EAAE,KAAK;AAChD,IAAA,yCAAyC,EAAE,0CAA0C;AACrF,IAAA,mDAAmD,EAAE,SAAS;AAC9D,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,4CAA4C,EAAE,KAAK;;AAGnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,qDAAqD,EAAE,MAAM;CAC9D,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;GAExB;AAEK,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;EAM9B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}

package/components/nested-donut/types.d.ts

@@ -2,7 +2,7 @@ import { HierarchyRectangularNode } from 'd3-hierarchy';
 export declare type NestedDonutSegmentDatum<Datum> = {
     key: string;
     root: string;
-    values?: Datum[];
+    values: Datum[];
 };
 export declare type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {
     _id: string;
@@ -24,7 +24,7 @@ export declare enum NestedDonutSegmentLabelAlignment {
 export declare type NestedDonutLayerSettings = {
     backgroundColor?: string;
     labelAlignment?: NestedDonutSegmentLabelAlignment;
-    width?: number;
+    width?: number | string;
 };
 export declare type NestedDonutLayer = NestedDonutLayerSettings & {
     _id: number;

package/components/nested-donut/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/nested-donut/types.ts"],"sourcesContent":["import { HierarchyRectangularNode } from 'd3-hierarchy'\n\nexport type NestedDonutSegmentDatum<Datum> = {\n  key: string;\n  root: string;\n  values?: Datum[];\n}\n\nexport type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {\n  _id: string;\n  _layer: NestedDonutLayer;\n  _index?: number;\n  _state?: {\n    fill?: string;\n  };\n}\n\nexport enum NestedDonutDirection {\n  Inwards = 'inwards',\n  Outwards = 'outwards',\n}\n\nexport enum NestedDonutSegmentLabelAlignment {\n  Along = 'along',\n  Perpendicular = 'perpendicular',\n  Straight = 'straight',\n}\n\nexport type NestedDonutLayerSettings = {\n  backgroundColor?: string;\n  labelAlignment?: NestedDonutSegmentLabelAlignment;\n  width?: number;\n}\n\nexport type NestedDonutLayer = NestedDonutLayerSettings & {\n  _id: number;\n  _innerRadius: number;\n  _outerRadius: number;\n}\n\n"],"names":[],"mappings":"IAiBY,qBAGX;AAHD,CAAA,UAAY,oBAAoB,EAAA;AAC9B,IAAA,oBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,oBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,GAG/B,EAAA,CAAA,CAAA,CAAA;IAEW,iCAIX;AAJD,CAAA,UAAY,gCAAgC,EAAA;AAC1C,IAAA,gCAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,gCAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AAC/B,IAAA,gCAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAJW,gCAAgC,KAAhC,gCAAgC,GAI3C,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/nested-donut/types.ts"],"sourcesContent":["import { HierarchyRectangularNode } from 'd3-hierarchy'\n\nexport type NestedDonutSegmentDatum<Datum> = {\n  key: string;\n  root: string;\n  values: Datum[];\n}\n\nexport type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {\n  _id: string;\n  _layer: NestedDonutLayer;\n  _index?: number;\n  _state?: {\n    fill?: string;\n  };\n}\n\nexport enum NestedDonutDirection {\n  Inwards = 'inwards',\n  Outwards = 'outwards',\n}\n\nexport enum NestedDonutSegmentLabelAlignment {\n  Along = 'along',\n  Perpendicular = 'perpendicular',\n  Straight = 'straight',\n}\n\nexport type NestedDonutLayerSettings = {\n  backgroundColor?: string;\n  labelAlignment?: NestedDonutSegmentLabelAlignment;\n  width?: number | string;\n}\n\nexport type NestedDonutLayer = NestedDonutLayerSettings & {\n  _id: number;\n  _innerRadius: number;\n  _outerRadius: number;\n}\n\n"],"names":[],"mappings":"IAiBY,qBAGX;AAHD,CAAA,UAAY,oBAAoB,EAAA;AAC9B,IAAA,oBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,oBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,GAG/B,EAAA,CAAA,CAAA,CAAA;IAEW,iCAIX;AAJD,CAAA,UAAY,gCAAgC,EAAA;AAC1C,IAAA,gCAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,gCAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AAC/B,IAAA,gCAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAJW,gCAAgC,KAAhC,gCAAgC,GAI3C,EAAA,CAAA,CAAA;;;;"}

package/components/scatter/config.d.ts

@@ -30,6 +30,10 @@ export interface ScatterConfigInterface<Datum> extends XYComponentConfigInterfac
     labelTextBrightnessRatio?: number;
     /** Label position. Default: `Position.Bottom` */
     labelPosition?: GenericAccessor<Position | string, Datum>;
+    /** Point stroke color. Default: `undefined` */
+    strokeColor?: ColorAccessor<Datum>;
+    /** Point stroke width. Default: `undefined` */
+    strokeWidth?: NumericAccessor<Datum>;
 }
 export declare class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {
     size: number;
@@ -41,4 +45,6 @@ export declare class ScatterConfig<Datum> extends XYComponentConfig<Datum> imple
     labelPosition: Position;
     cursor: any;
     labelTextBrightnessRatio: number;
+    strokeColor: ScatterConfigInterface<Datum>['strokeColor'];
+    strokeWidth: ScatterConfigInterface<Datum>['strokeWidth'];
 }

package/components/scatter/config.js

@@ -16,6 +16,8 @@ class ScatterConfig extends XYComponentConfig {
         this.labelPosition = Position.Bottom;
         this.cursor = null;
         this.labelTextBrightnessRatio = 0.65;
+        this.strokeColor = undefined;
+        this.strokeWidth = undefined;
     }
 }
 

package/components/scatter/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/scatter/config.ts"],"sourcesContent":["import { ScalePower } from 'd3-scale'\n// Core\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { Scale, ContinuousScale } from 'types/scale'\nimport { SymbolType } from 'types/symbol'\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\n\nexport interface ScatterConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n  /**\n   * Size of the scatter plot marker (e.g. diameter if `SymbolType.Circle` is used for `shape`) in pixels.\n   * Can be a constant value or an accessor function. But if `sizeRange` is set, then the values will be treated\n   * as an input to `sizeScale`, and the resulting size will be different.\n   * Default: `10`\n  */\n  size?: NumericAccessor<Datum>;\n  /** Size scale to be used if the `sizeRange` was set. Default: `Scale.scaleSqrt()` */\n  sizeScale?: ContinuousScale;\n  /** Size range in the format of `[number, number]` to rescale the input values. Default: `undefined` */\n  sizeRange?: [number, number];\n  /** Shape of the scatter point. Accessor function or constant value: `SymbolType.Circle`, `SymbolType.Cross`, `SymbolType.Diamond`, `SymbolType.Square`,\n   * `SymbolType.Star`, `SymbolType.Triangle` or `SymbolType.Wye`.\n   * Default: `SymbolType.Circle` */\n  shape?: ((d: Datum, i?: number, ...any) => (SymbolType | string)) | SymbolType | string;\n  /** Label accessor function or string. Default: `undefined` */\n  label?: StringAccessor<Datum>;\n  /** Label color. Default: `undefined` */\n  labelColor?: ColorAccessor<Datum>;\n  /** Optional point cursor. Default: `null` */\n  cursor?: StringAccessor<Datum>;\n  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n  labelTextBrightnessRatio?: number;\n  /** Label position. Default: `Position.Bottom` */\n  labelPosition?: GenericAccessor<Position | string, Datum>;\n}\n\nexport class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {\n  size = 10\n  sizeScale: ScalePower<number, number> = Scale.scaleSqrt()\n  sizeRange = undefined\n  shape = SymbolType.Circle\n  label = undefined\n  labelColor = undefined\n  labelPosition = Position.Bottom\n  cursor = null\n  labelTextBrightnessRatio = 0.65\n}\n"],"names":[],"mappings":";;;;;AACA;AAqCM,MAAO,aAAqB,SAAQ,iBAAwB,CAAA;AAAlE,IAAA,WAAA,GAAA;;QACE,IAAI,CAAA,IAAA,GAAG,EAAE,CAAA;AACT,QAAA,IAAA,CAAA,SAAS,GAA+B,KAAK,CAAC,SAAS,EAAE,CAAA;QACzD,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;AACrB,QAAA,IAAA,CAAA,KAAK,GAAG,UAAU,CAAC,MAAM,CAAA;QACzB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;AACtB,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAA;QAC/B,IAAM,CAAA,MAAA,GAAG,IAAI,CAAA;QACb,IAAwB,CAAA,wBAAA,GAAG,IAAI,CAAA;KAChC;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/scatter/config.ts"],"sourcesContent":["import { ScalePower } from 'd3-scale'\n// Core\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { Scale, ContinuousScale } from 'types/scale'\nimport { SymbolType } from 'types/symbol'\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\n\nexport interface ScatterConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n  /**\n   * Size of the scatter plot marker (e.g. diameter if `SymbolType.Circle` is used for `shape`) in pixels.\n   * Can be a constant value or an accessor function. But if `sizeRange` is set, then the values will be treated\n   * as an input to `sizeScale`, and the resulting size will be different.\n   * Default: `10`\n  */\n  size?: NumericAccessor<Datum>;\n  /** Size scale to be used if the `sizeRange` was set. Default: `Scale.scaleSqrt()` */\n  sizeScale?: ContinuousScale;\n  /** Size range in the format of `[number, number]` to rescale the input values. Default: `undefined` */\n  sizeRange?: [number, number];\n  /** Shape of the scatter point. Accessor function or constant value: `SymbolType.Circle`, `SymbolType.Cross`, `SymbolType.Diamond`, `SymbolType.Square`,\n   * `SymbolType.Star`, `SymbolType.Triangle` or `SymbolType.Wye`.\n   * Default: `SymbolType.Circle` */\n  shape?: ((d: Datum, i?: number, ...any) => (SymbolType | string)) | SymbolType | string;\n  /** Label accessor function or string. Default: `undefined` */\n  label?: StringAccessor<Datum>;\n  /** Label color. Default: `undefined` */\n  labelColor?: ColorAccessor<Datum>;\n  /** Optional point cursor. Default: `null` */\n  cursor?: StringAccessor<Datum>;\n  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n  labelTextBrightnessRatio?: number;\n  /** Label position. Default: `Position.Bottom` */\n  labelPosition?: GenericAccessor<Position | string, Datum>;\n  /** Point stroke color. Default: `undefined` */\n  strokeColor?: ColorAccessor<Datum>;\n  /** Point stroke width. Default: `undefined` */\n  strokeWidth?: NumericAccessor<Datum>;\n}\n\nexport class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {\n  size = 10\n  sizeScale: ScalePower<number, number> = Scale.scaleSqrt()\n  sizeRange = undefined\n  shape = SymbolType.Circle\n  label = undefined\n  labelColor = undefined\n  labelPosition = Position.Bottom\n  cursor = null\n  labelTextBrightnessRatio = 0.65\n  strokeColor: ScatterConfigInterface<Datum>['strokeColor'] = undefined\n  strokeWidth: ScatterConfigInterface<Datum>['strokeWidth'] = undefined\n}\n"],"names":[],"mappings":";;;;;AACA;AAyCM,MAAO,aAAqB,SAAQ,iBAAwB,CAAA;AAAlE,IAAA,WAAA,GAAA;;QACE,IAAI,CAAA,IAAA,GAAG,EAAE,CAAA;AACT,QAAA,IAAA,CAAA,SAAS,GAA+B,KAAK,CAAC,SAAS,EAAE,CAAA;QACzD,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;AACrB,QAAA,IAAA,CAAA,KAAK,GAAG,UAAU,CAAC,MAAM,CAAA;QACzB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;AACtB,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAA;QAC/B,IAAM,CAAA,MAAA,GAAG,IAAI,CAAA;QACb,IAAwB,CAAA,wBAAA,GAAG,IAAI,CAAA;QAC/B,IAAW,CAAA,WAAA,GAAiD,SAAS,CAAA;QACrE,IAAW,CAAA,WAAA,GAAiD,SAAS,CAAA;KACtE;AAAA;;;;"}

package/components/scatter/index.js

@@ -134,6 +134,8 @@ class Scatter extends XYComponentCore {
                             yValue: yValue,
                             sizePx: pointSizeScaled,
                             color: getColor(d, config.color, j),
+                            strokeColor: getColor(d, config.strokeColor, j, true),
+                            strokeWidthPx: getNumber(d, config.strokeWidth, j),
                             shape: getString(d, config.shape, j),
                             label: getString(d, config.label, j),
                             labelColor: getValue(d, config.labelColor, j),