@evergis/charts 3.1.54-alpha.3 → 3.1.54-alpha.5

package/dist/charts/BarChart/types.d.ts

@@ -119,6 +119,7 @@ export interface BarChartProps extends PropsWithChildren {
     onSelect?: (value: [number, number]) => void;
     onBarClick?: (group: BarChartMarshalledGroup) => void;
     onBarHover?: (group?: BarChartMarshalledGroup) => void;
+    transitionDuration?: number;
 }
 export type BarChartMergedData = (BarChartMarshalledGroup & BarChartLineData & {
     groupName: string;

package/dist/charts/LineChart/types.d.ts

@@ -53,6 +53,7 @@ export interface LineChartProps extends PropsWithChildren {
     dotSnapping?: boolean;
     rightAxis?: number[];
     markers?: BarChartMarker[];
+    transitionDuration?: number;
 }
 export type LineChartDot = {
     radius?: number;

package/dist/charts/PieChart/types.d.ts

@@ -37,6 +37,7 @@ export interface PieChartProps extends PropsWithChildren {
     tooltipClassName?: string;
     renderTooltip?: (data: PieChartDatum[] | PieChartData[]) => ReactNode;
     tooltipStyle?: CSSProperties;
+    transitionDuration?: number;
 }
 export type PieChartData = {
     id?: number | string;

package/dist/charts.esm.js

@@ -900,8 +900,15 @@ const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipCla
     }
 };
 
+const getSliceKey = (item, index) => {
+    if (item.id !== undefined)
+        return String(item.id);
+    if (typeof item.name === 'string' || typeof item.name === 'number')
+        return String(item.name);
+    return String(index);
+};
 const draw$4 = (node, props) => {
-    const { data, padAngle, onClick, outerRadius, startAngle, endAngle, cornerRadius, margin, enableSlicesLabels, formatSliceLabel, slicesLabelsSkipAngle, enableSlicesLabelsName, formatSliceLabelName, borderWidth, borderColor, enableRadialLabels, backgroundColor, radialLabelsLinkHorizontalLength, radialLabelsTextXOffset, formatRadialLabel, radialLabelYOffset, svgElements, formatSliceTitle, radialAngleXOffset, withTooltip, fullChartTooltip, tooltipClassName, tooltipBind, renderTooltip, tooltipStyle, } = props;
+    const { data, padAngle, onClick, outerRadius, startAngle, endAngle, cornerRadius, margin, enableSlicesLabels, formatSliceLabel, slicesLabelsSkipAngle, enableSlicesLabelsName, formatSliceLabelName, borderWidth, borderColor, enableRadialLabels, backgroundColor, radialLabelsLinkHorizontalLength, radialLabelsTextXOffset, formatRadialLabel, radialLabelYOffset, svgElements, formatSliceTitle, radialAngleXOffset, withTooltip, fullChartTooltip, tooltipClassName, tooltipBind, renderTooltip, tooltipStyle, transitionDuration = 300, } = props;
     if (node !== null && data.length) {
         const marginTop = margin ? margin.top : 0;
         const marginRight = margin ? margin.right : 0;
@@ -917,6 +924,18 @@ const draw$4 = (node, props) => {
                 ? marginTop + marginBottom
                 : marginRight + marginLeft)) /
             2;
+        const prevArcMap = new Map();
+        if (transitionDuration > 0) {
+            d3.select(node)
+                .selectAll(`svg .${pieChartclassNames.pieGlobal} .${pieChartclassNames.pieSlice}`)
+                .each((d) => {
+                prevArcMap.set(getSliceKey(d.data, d.index), {
+                    startAngle: d.startAngle,
+                    endAngle: d.endAngle,
+                    color: d.data.color ?? '',
+                });
+            });
+        }
         const svg = appendSvg(node, width, height);
         const global = svg
             .append("g")
@@ -961,17 +980,14 @@ const draw$4 = (node, props) => {
             .data(dataReady)
             .enter()
             .append("path")
-            // @ts-ignore
-            .attr("d", arc);
-        allSlices
             .attr("class", pieChartclassNames.pieSlice)
-            .attr("fill", ({ index }) => data[index].color || "")
             .attr("stroke", borderColor || "")
             .attr("stroke-width", borderWidth || 0)
             .attr("style", onClick ? "cursor: pointer" : "")
             .on("click", 
         // @ts-ignore
-        (_, d) => onClick && onClick(data[d.index]))
+        (_, d) => onClick && onClick(data[d.index]));
+        allSlices
             .append("svg:title")
             .text(d => formatSliceTitle
             ? // @ts-ignore
@@ -979,6 +995,46 @@ const draw$4 = (node, props) => {
             : fullChartTooltip || withTooltip
                 ? ""
                 : `${data[d.index].name || ""} (${format(data[d.index].value)})`);
+        if (transitionDuration > 0 && prevArcMap.size > 0) {
+            allSlices
+                .attr("fill", (d) => {
+                const prev = prevArcMap.get(getSliceKey(d.data, d.index));
+                return prev?.color || data[d.index].color || "";
+            })
+                .attr("d", (d) => {
+                const prev = prevArcMap.get(getSliceKey(d.data, d.index));
+                const midAngle = (d.startAngle + d.endAngle) / 2;
+                // @ts-ignore
+                return arc({
+                    ...d,
+                    startAngle: prev ? prev.startAngle : midAngle,
+                    endAngle: prev ? prev.endAngle : midAngle,
+                });
+            })
+                .transition()
+                .duration(transitionDuration)
+                .attr("fill", ({ index }) => data[index].color || "")
+                .attrTween("d", (d) => {
+                const prev = prevArcMap.get(getSliceKey(d.data, d.index));
+                const midAngle = (d.startAngle + d.endAngle) / 2;
+                const from = {
+                    startAngle: prev ? prev.startAngle : midAngle,
+                    endAngle: prev ? prev.endAngle : midAngle,
+                };
+                const interp = d3.interpolate(from, { startAngle: d.startAngle, endAngle: d.endAngle });
+                return (t) => {
+                    const { startAngle, endAngle } = interp(t);
+                    // @ts-ignore
+                    return arc({ ...d, startAngle, endAngle });
+                };
+            });
+        }
+        else {
+            allSlices
+                // @ts-ignore
+                .attr("d", arc)
+                .attr("fill", ({ index }) => data[index].color || "");
+        }
         if (enableSlicesLabels) {
             const text = global
                 .selectAll("allSlices")
@@ -1827,7 +1883,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
 };
 
 const draw$2 = (node, props) => {
-    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, } = props;
+    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, transitionDuration = 300, } = props;
     if (node !== null && chartData.length) {
         const data = stacked ? stackedData(chartData) : chartData;
         const marginTop = margin ? margin.top : 0;
@@ -1843,6 +1899,14 @@ const draw$2 = (node, props) => {
         const max = typeof props.max === 'number'
             ? props.max
             : d3.max(data, ({ values }) => d3.max(values));
+        const prevStrokes = new Map();
+        if (transitionDuration > 0) {
+            d3.select(node)
+                .selectAll(`svg .${lineChartClassNames.lineChartLinesGlobal} .${lineChartClassNames.lineChartLine}`)
+                .each(function (_, i) {
+                prevStrokes.set(i, d3.select(this).attr('stroke') || '');
+            });
+        }
         const svg = appendSvg(node, width, height || 0);
         const yRange = [
             height - marginTop - marginBottom - (xAxisPadding || 0),
@@ -1981,7 +2045,7 @@ const draw$2 = (node, props) => {
                 .attr('fill', ({ fill }) => fill || 'none')
                 .attr('style', ({ areaStyle }) => areaStyle || '');
         }
-        svg
+        const lineSelection = svg
             .append('g')
             .attr('class', lineChartClassNames.lineChartLinesGlobal)
             .selectAll('path')
@@ -1989,8 +2053,17 @@ const draw$2 = (node, props) => {
             .join('path')
             .attr('class', lineChartClassNames.lineChartLine)
             .attr('d', (d) => line(d.values))
-            .attr('stroke', ({ stroke }) => stroke || 'steelblue')
             .attr('style', ({ style }) => style || '');
+        if (transitionDuration > 0 && prevStrokes.size > 0) {
+            lineSelection
+                .attr('stroke', (_, i) => prevStrokes.get(i) || (data[i]?.stroke || 'steelblue'))
+                .transition()
+                .duration(transitionDuration)
+                .attr('stroke', ({ stroke }) => stroke || 'steelblue');
+        }
+        else {
+            lineSelection.attr('stroke', ({ stroke }) => stroke || 'steelblue');
+        }
         const dots = data.filter(({ dot }) => dot);
         if (dots.length > 0) {
             const dotsGlobal = svg
@@ -2781,7 +2854,7 @@ const getBars = ({ groups, barWidth }) => {
 
 const MIN_BAR_HEIGHT = 2;
 const draw$1 = (node, props) => {
-    const { data, lineData = [], markers = [], barWidth: barWidthProp, barPadding, colors, margin, xAxisPadding, yAxisPadding, drawGridY, drawGridX, customYScale, customXScale, customYAxisLeft, customXAxisBottom, customYAxis, customXAxis, customBars, customize, dynamicTooltipEnable, hideTooltipGroupName, renderTooltip, labelPosition, renderLabel, tooltipY, tooltipBind, stackedLine, curve, formatTooltipValue, formatTooltipName, sectionPadding, minValuesLine, tooltipYDomain, marshalledMap, minValue, maxValue, minDomainValue, maxDomainValue, drawBars, setTooltipPosition, onLabelItem, isBarTooltip, xScaleItemWidth, tooltipRoot, tooltipClassName, onBarClick, onBarHover, } = props;
+    const { data, lineData = [], markers = [], barWidth: barWidthProp, barPadding, colors, margin, xAxisPadding, yAxisPadding, drawGridY, drawGridX, customYScale, customXScale, customYAxisLeft, customXAxisBottom, customYAxis, customXAxis, customBars, customize, dynamicTooltipEnable, hideTooltipGroupName, renderTooltip, labelPosition, renderLabel, tooltipY, tooltipBind, stackedLine, curve, formatTooltipValue, formatTooltipName, sectionPadding, minValuesLine, tooltipYDomain, marshalledMap, minValue, maxValue, minDomainValue, maxDomainValue, drawBars, setTooltipPosition, onLabelItem, isBarTooltip, xScaleItemWidth, tooltipRoot, tooltipClassName, onBarClick, onBarHover, transitionDuration = 300, } = props;
     if (node !== null && data.length) {
         const marginTop = margin?.top ?? 0;
         const marginRight = margin?.right ?? 0;
@@ -2804,6 +2877,20 @@ const draw$1 = (node, props) => {
             ? maxValue
             : Math.max(d3.max(lineData, ({ values }) => d3.max(values)) ||
                 Number.NEGATIVE_INFINITY, barDomain.max);
+        const prevBarFills = new Map();
+        if (transitionDuration > 0) {
+            d3.select(node)
+                .selectAll(`svg .${barChartClassNames.barChartBarGlobal} g`)
+                .each(function (_, groupIdx) {
+                d3.select(this).selectAll('rect')
+                    .each(function (_, rectIdx) {
+                    const fill = this.style.fill;
+                    if (fill) {
+                        prevBarFills.set(`${groupIdx}-${rectIdx}`, fill);
+                    }
+                });
+            });
+        }
         const svg = appendSvg(node, width, height || 0);
         const yTicksCountDefault = 4;
         const labels = data.map((item) => item.groupName);
@@ -2958,6 +3045,24 @@ const draw$1 = (node, props) => {
             });
         }
         customize && customize({ svg, marshalledData, yScale, xScale, lineData });
+        if (transitionDuration > 0 && prevBarFills.size > 0) {
+            d3.select(node)
+                .selectAll(`.${barChartClassNames.barChartBarGlobal} g`)
+                .each(function (_, groupIdx) {
+                d3.select(this).selectAll('rect')
+                    .each(function (_, rectIdx) {
+                    const prevFill = prevBarFills.get(`${groupIdx}-${rectIdx}`);
+                    const currentFill = this.style.fill;
+                    if (prevFill && prevFill !== currentFill) {
+                        d3.select(this)
+                            .style('fill', prevFill)
+                            .transition()
+                            .duration(transitionDuration)
+                            .style('fill', currentFill);
+                    }
+                });
+            });
+        }
     }
 };
 

package/dist/charts.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"charts.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -921,8 +921,15 @@ const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipCla
     }
 };
 
+const getSliceKey = (item, index) => {
+    if (item.id !== undefined)
+        return String(item.id);
+    if (typeof item.name === 'string' || typeof item.name === 'number')
+        return String(item.name);
+    return String(index);
+};
 const draw$4 = (node, props) => {
-    const { data, padAngle, onClick, outerRadius, startAngle, endAngle, cornerRadius, margin, enableSlicesLabels, formatSliceLabel, slicesLabelsSkipAngle, enableSlicesLabelsName, formatSliceLabelName, borderWidth, borderColor, enableRadialLabels, backgroundColor, radialLabelsLinkHorizontalLength, radialLabelsTextXOffset, formatRadialLabel, radialLabelYOffset, svgElements, formatSliceTitle, radialAngleXOffset, withTooltip, fullChartTooltip, tooltipClassName, tooltipBind, renderTooltip, tooltipStyle, } = props;
+    const { data, padAngle, onClick, outerRadius, startAngle, endAngle, cornerRadius, margin, enableSlicesLabels, formatSliceLabel, slicesLabelsSkipAngle, enableSlicesLabelsName, formatSliceLabelName, borderWidth, borderColor, enableRadialLabels, backgroundColor, radialLabelsLinkHorizontalLength, radialLabelsTextXOffset, formatRadialLabel, radialLabelYOffset, svgElements, formatSliceTitle, radialAngleXOffset, withTooltip, fullChartTooltip, tooltipClassName, tooltipBind, renderTooltip, tooltipStyle, transitionDuration = 300, } = props;
     if (node !== null && data.length) {
         const marginTop = margin ? margin.top : 0;
         const marginRight = margin ? margin.right : 0;
@@ -938,6 +945,18 @@ const draw$4 = (node, props) => {
                 ? marginTop + marginBottom
                 : marginRight + marginLeft)) /
             2;
+        const prevArcMap = new Map();
+        if (transitionDuration > 0) {
+            d3__namespace.select(node)
+                .selectAll(`svg .${pieChartclassNames.pieGlobal} .${pieChartclassNames.pieSlice}`)
+                .each((d) => {
+                prevArcMap.set(getSliceKey(d.data, d.index), {
+                    startAngle: d.startAngle,
+                    endAngle: d.endAngle,
+                    color: d.data.color ?? '',
+                });
+            });
+        }
         const svg = appendSvg(node, width, height);
         const global = svg
             .append("g")
@@ -982,17 +1001,14 @@ const draw$4 = (node, props) => {
             .data(dataReady)
             .enter()
             .append("path")
-            // @ts-ignore
-            .attr("d", arc);
-        allSlices
             .attr("class", pieChartclassNames.pieSlice)
-            .attr("fill", ({ index }) => data[index].color || "")
             .attr("stroke", borderColor || "")
             .attr("stroke-width", borderWidth || 0)
             .attr("style", onClick ? "cursor: pointer" : "")
             .on("click", 
         // @ts-ignore
-        (_, d) => onClick && onClick(data[d.index]))
+        (_, d) => onClick && onClick(data[d.index]));
+        allSlices
             .append("svg:title")
             .text(d => formatSliceTitle
             ? // @ts-ignore
@@ -1000,6 +1016,46 @@ const draw$4 = (node, props) => {
             : fullChartTooltip || withTooltip
                 ? ""
                 : `${data[d.index].name || ""} (${format(data[d.index].value)})`);
+        if (transitionDuration > 0 && prevArcMap.size > 0) {
+            allSlices
+                .attr("fill", (d) => {
+                const prev = prevArcMap.get(getSliceKey(d.data, d.index));
+                return prev?.color || data[d.index].color || "";
+            })
+                .attr("d", (d) => {
+                const prev = prevArcMap.get(getSliceKey(d.data, d.index));
+                const midAngle = (d.startAngle + d.endAngle) / 2;
+                // @ts-ignore
+                return arc({
+                    ...d,
+                    startAngle: prev ? prev.startAngle : midAngle,
+                    endAngle: prev ? prev.endAngle : midAngle,
+                });
+            })
+                .transition()
+                .duration(transitionDuration)
+                .attr("fill", ({ index }) => data[index].color || "")
+                .attrTween("d", (d) => {
+                const prev = prevArcMap.get(getSliceKey(d.data, d.index));
+                const midAngle = (d.startAngle + d.endAngle) / 2;
+                const from = {
+                    startAngle: prev ? prev.startAngle : midAngle,
+                    endAngle: prev ? prev.endAngle : midAngle,
+                };
+                const interp = d3__namespace.interpolate(from, { startAngle: d.startAngle, endAngle: d.endAngle });
+                return (t) => {
+                    const { startAngle, endAngle } = interp(t);
+                    // @ts-ignore
+                    return arc({ ...d, startAngle, endAngle });
+                };
+            });
+        }
+        else {
+            allSlices
+                // @ts-ignore
+                .attr("d", arc)
+                .attr("fill", ({ index }) => data[index].color || "");
+        }
         if (enableSlicesLabels) {
             const text = global
                 .selectAll("allSlices")
@@ -1848,7 +1904,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
 };
 
 const draw$2 = (node, props) => {
-    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, } = props;
+    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, transitionDuration = 300, } = props;
     if (node !== null && chartData.length) {
         const data = stacked ? stackedData(chartData) : chartData;
         const marginTop = margin ? margin.top : 0;
@@ -1864,6 +1920,14 @@ const draw$2 = (node, props) => {
         const max = typeof props.max === 'number'
             ? props.max
             : d3__namespace.max(data, ({ values }) => d3__namespace.max(values));
+        const prevStrokes = new Map();
+        if (transitionDuration > 0) {
+            d3__namespace.select(node)
+                .selectAll(`svg .${lineChartClassNames.lineChartLinesGlobal} .${lineChartClassNames.lineChartLine}`)
+                .each(function (_, i) {
+                prevStrokes.set(i, d3__namespace.select(this).attr('stroke') || '');
+            });
+        }
         const svg = appendSvg(node, width, height || 0);
         const yRange = [
             height - marginTop - marginBottom - (xAxisPadding || 0),
@@ -2002,7 +2066,7 @@ const draw$2 = (node, props) => {
                 .attr('fill', ({ fill }) => fill || 'none')
                 .attr('style', ({ areaStyle }) => areaStyle || '');
         }
-        svg
+        const lineSelection = svg
             .append('g')
             .attr('class', lineChartClassNames.lineChartLinesGlobal)
             .selectAll('path')
@@ -2010,8 +2074,17 @@ const draw$2 = (node, props) => {
             .join('path')
             .attr('class', lineChartClassNames.lineChartLine)
             .attr('d', (d) => line(d.values))
-            .attr('stroke', ({ stroke }) => stroke || 'steelblue')
             .attr('style', ({ style }) => style || '');
+        if (transitionDuration > 0 && prevStrokes.size > 0) {
+            lineSelection
+                .attr('stroke', (_, i) => prevStrokes.get(i) || (data[i]?.stroke || 'steelblue'))
+                .transition()
+                .duration(transitionDuration)
+                .attr('stroke', ({ stroke }) => stroke || 'steelblue');
+        }
+        else {
+            lineSelection.attr('stroke', ({ stroke }) => stroke || 'steelblue');
+        }
         const dots = data.filter(({ dot }) => dot);
         if (dots.length > 0) {
             const dotsGlobal = svg
@@ -2802,7 +2875,7 @@ const getBars = ({ groups, barWidth }) => {
 
 const MIN_BAR_HEIGHT = 2;
 const draw$1 = (node, props) => {
-    const { data, lineData = [], markers = [], barWidth: barWidthProp, barPadding, colors, margin, xAxisPadding, yAxisPadding, drawGridY, drawGridX, customYScale, customXScale, customYAxisLeft, customXAxisBottom, customYAxis, customXAxis, customBars, customize, dynamicTooltipEnable, hideTooltipGroupName, renderTooltip, labelPosition, renderLabel, tooltipY, tooltipBind, stackedLine, curve, formatTooltipValue, formatTooltipName, sectionPadding, minValuesLine, tooltipYDomain, marshalledMap, minValue, maxValue, minDomainValue, maxDomainValue, drawBars, setTooltipPosition, onLabelItem, isBarTooltip, xScaleItemWidth, tooltipRoot, tooltipClassName, onBarClick, onBarHover, } = props;
+    const { data, lineData = [], markers = [], barWidth: barWidthProp, barPadding, colors, margin, xAxisPadding, yAxisPadding, drawGridY, drawGridX, customYScale, customXScale, customYAxisLeft, customXAxisBottom, customYAxis, customXAxis, customBars, customize, dynamicTooltipEnable, hideTooltipGroupName, renderTooltip, labelPosition, renderLabel, tooltipY, tooltipBind, stackedLine, curve, formatTooltipValue, formatTooltipName, sectionPadding, minValuesLine, tooltipYDomain, marshalledMap, minValue, maxValue, minDomainValue, maxDomainValue, drawBars, setTooltipPosition, onLabelItem, isBarTooltip, xScaleItemWidth, tooltipRoot, tooltipClassName, onBarClick, onBarHover, transitionDuration = 300, } = props;
     if (node !== null && data.length) {
         const marginTop = margin?.top ?? 0;
         const marginRight = margin?.right ?? 0;
@@ -2825,6 +2898,20 @@ const draw$1 = (node, props) => {
             ? maxValue
             : Math.max(d3__namespace.max(lineData, ({ values }) => d3__namespace.max(values)) ||
                 Number.NEGATIVE_INFINITY, barDomain.max);
+        const prevBarFills = new Map();
+        if (transitionDuration > 0) {
+            d3__namespace.select(node)
+                .selectAll(`svg .${barChartClassNames.barChartBarGlobal} g`)
+                .each(function (_, groupIdx) {
+                d3__namespace.select(this).selectAll('rect')
+                    .each(function (_, rectIdx) {
+                    const fill = this.style.fill;
+                    if (fill) {
+                        prevBarFills.set(`${groupIdx}-${rectIdx}`, fill);
+                    }
+                });
+            });
+        }
         const svg = appendSvg(node, width, height || 0);
         const yTicksCountDefault = 4;
         const labels = data.map((item) => item.groupName);
@@ -2979,6 +3066,24 @@ const draw$1 = (node, props) => {
             });
         }
         customize && customize({ svg, marshalledData, yScale, xScale, lineData });
+        if (transitionDuration > 0 && prevBarFills.size > 0) {
+            d3__namespace.select(node)
+                .selectAll(`.${barChartClassNames.barChartBarGlobal} g`)
+                .each(function (_, groupIdx) {
+                d3__namespace.select(this).selectAll('rect')
+                    .each(function (_, rectIdx) {
+                    const prevFill = prevBarFills.get(`${groupIdx}-${rectIdx}`);
+                    const currentFill = this.style.fill;
+                    if (prevFill && prevFill !== currentFill) {
+                        d3__namespace.select(this)
+                            .style('fill', prevFill)
+                            .transition()
+                            .duration(transitionDuration)
+                            .style('fill', currentFill);
+                    }
+                });
+            });
+        }
     }
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.54-alpha.3",
+  "version": "3.1.54-alpha.5",
   "name": "@evergis/charts",
   "author": "Everpoint",
   "license": "MIT",
@@ -54,5 +54,5 @@
     "react-is": "^19.1.1",
     "styled-components": "5.3.5"
   },
-  "gitHead": "01ef957006b5753b413a5c525ce21df4b3e03a79"
+  "gitHead": "947acaea424b2eebc02e0901b12d169835f88baa"
 }