@evergis/charts 3.1.53-alpha.1 → 3.1.53

package/dist/charts.esm.js

@@ -6,10 +6,10 @@ import ReactDOMServer from 'react-dom/server';
 import { uniqueId } from 'lodash';
 import { unmountComponentAtNode, render } from 'react-dom';
 
-const Wrapper = styled.div `
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
+const Wrapper = styled.div `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 function useNode() {
@@ -107,10 +107,10 @@ const drawMarkers = ({ svg, markers, width, left, top, count, yScale }) => {
     });
 };
 
-const SwipeScrollContainer = styled.div `
-  width: 100%;
-  overflow: hidden;
-  user-select: none;
+const SwipeScrollContainer = styled.div `
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
 `;
 
 function animate({ duration, timing, draw, }) {
@@ -262,37 +262,37 @@ const getTranslate$1 = ({ anchor, index, translateX, translateY, }) => {
     }
     return `translate(${translateX}px, ${translateY}px)`;
 };
-const Label$2 = styled.div `
-  display: flex;
-  align-items: center;
-  font-size: 12px;
+const Label$2 = styled.div `
+  display: flex;
+  align-items: center;
+  font-size: 12px;
 `;
-const Name$1 = styled.div `
-  text-align: center;
-  max-width: 120px;
+const Name$1 = styled.div `
+  text-align: center;
+  max-width: 120px;
 `;
-const middleBadgeStyles = css `
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(calc(100% + 6px), -50%);
+const middleBadgeStyles = css `
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(calc(100% + 6px), -50%);
 `;
-const DefaultBadge = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: rgb(255, 255, 255);
-  background-color: rgb(144, 197, 61);
-  margin-left: 8px;
+const DefaultBadge = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(144, 197, 61);
+  margin-left: 8px;
 `;
-const MiddleBadge = styled(DefaultBadge) `
-  ${middleBadgeStyles}
+const MiddleBadge = styled(DefaultBadge) `
+  ${middleBadgeStyles}
 `;
-const BadgePrefix = styled.div `
-  margin-left: 4px;
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.54);
+const BadgePrefix = styled.div `
+  margin-left: 4px;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.54);
 `;
 
 const radarChartclassNames = {
@@ -307,29 +307,29 @@ const radarChartclassNames = {
     radarLabelBadgePrefix: 'radarLabelBadgePrefix',
     radarCircle: 'radarCircle',
 };
-const SvgWrapper$5 = styled(Wrapper) `
-  .${radarChartclassNames.radarAxis} {
-    path,
-    line,
-    circle {
-      fill: none;
-      stroke-width: 1px;
-      stroke: rgba(149, 149, 149, 0.18);
-    }
-  }
-  .${radarChartclassNames.radarAxisText} {
-    font-size: 12px;
-    fill-opacity: 0.56;
-  }
-  .${radarChartclassNames.radarPolygon} {
-    fill-opacity: 0.06;
-    stroke-width: 2px;
-    fill: rgb(144, 197, 61);
-    stroke: rgb(144, 197, 61);
-  }
-  .${radarChartclassNames.radarCircle} {
-    fill: rgb(144, 197, 61);
-  }
+const SvgWrapper$5 = styled(Wrapper) `
+  .${radarChartclassNames.radarAxis} {
+    path,
+    line,
+    circle {
+      fill: none;
+      stroke-width: 1px;
+      stroke: rgba(149, 149, 149, 0.18);
+    }
+  }
+  .${radarChartclassNames.radarAxisText} {
+    font-size: 12px;
+    fill-opacity: 0.56;
+  }
+  .${radarChartclassNames.radarPolygon} {
+    fill-opacity: 0.06;
+    stroke-width: 2px;
+    fill: rgb(144, 197, 61);
+    stroke: rgb(144, 197, 61);
+  }
+  .${radarChartclassNames.radarCircle} {
+    fill: rgb(144, 197, 61);
+  }
 `;
 
 const getTranslate = ({ anchor, index, translateX, translateY, }) => {
@@ -351,8 +351,8 @@ const LabelContainer$1 = styled.div.attrs(props => ({
     style: {
         transform: getTranslate(props),
     },
-})) `
-  position: absolute;
+})) `
+  position: absolute;
 `;
 
 const degByIndex = (index, count) => {
@@ -616,24 +616,24 @@ const pieChartclassNames = {
     pieTooltipColorBox: 'pieTooltipColorBox',
     pieFullChartTooltipCircle: 'pieFullChartTooltipCircle',
 };
-const SvgWrapper$4 = styled(Wrapper) `
-  .${pieChartclassNames.pieSliceLabel} {
-    fill: #4a4a4a;
-  }
-  
-  .${pieChartclassNames.pieRadialLabel} {
-    position: absolute;
-    max-width: 128px;
-  }
-  
-  .${pieChartclassNames.pieRadialLink} {
-    stroke: #000;
-  }
-  
-  .${pieChartclassNames.pieFullChartTooltipCircle} {
-    fill: transparent;
-    cursor: pointer;
-  }
+const SvgWrapper$4 = styled(Wrapper) `
+  .${pieChartclassNames.pieSliceLabel} {
+    fill: #4a4a4a;
+  }
+  
+  .${pieChartclassNames.pieRadialLabel} {
+    position: absolute;
+    max-width: 128px;
+  }
+  
+  .${pieChartclassNames.pieRadialLink} {
+    stroke: #000;
+  }
+  
+  .${pieChartclassNames.pieFullChartTooltipCircle} {
+    fill: transparent;
+    cursor: pointer;
+  }
 `;
 
 function radiansToDegrees(radians) {
@@ -733,90 +733,90 @@ const drawRadialLabels = ({ arc, enableRadialLabels, global, node, radius, dataR
     }
 };
 
-const TooltipFlex$1 = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  pointer-events: none;
-  white-space: nowrap;
+const TooltipFlex$1 = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+  white-space: nowrap;
 `;
 const LabelFlex = styled(TooltipFlex$1) ``;
-const LabelFlexCenter = styled(LabelFlex) `
-  align-items: center;
+const LabelFlexCenter = styled(LabelFlex) `
+  align-items: center;
 `;
-const TooltipContainer = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  margin-bottom: 8px;
-  padding: 4px 6px;
-  background-color: rgba(48, 69, 79, 1);
-  border-radius: 4px;
-  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
-
-  :before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 100%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 3px 0 3px;
-    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
-  }
+const TooltipContainer = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  margin-bottom: 8px;
+  padding: 4px 6px;
+  background-color: rgba(48, 69, 79, 1);
+  border-radius: 4px;
+  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
+
+  :before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 3px 0 3px;
+    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
+  }
 `;
-const TooltipGroupName = styled.div `
-  font-size: 14px;
-  margin-bottom: 6px;
+const TooltipGroupName = styled.div `
+  font-size: 14px;
+  margin-bottom: 6px;
 `;
-const TooltipItem = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+const TooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 `;
-const ColFlex = styled.div `
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+const ColFlex = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
 `;
-const ColorBox = styled.div `
-  margin-right: 4px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+const ColorBox = styled.div `
+  margin-right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
 `;
-const ColorLine = styled(ColorBox) `
-  height: 2px;
-  border-radius: 0;
+const ColorLine = styled(ColorBox) `
+  height: 2px;
+  border-radius: 0;
 `;
-const Name = styled.div `
-  margin-right: 4px;
+const Name = styled.div `
+  margin-right: 4px;
 `;
-const Value = styled.div `
-  text-align: right;
-  flex-shrink: 0;
-  flex-grow: 1;
+const Value = styled.div `
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 1;
 `;
-const Label$1 = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  font-weight: bold;
-  letter-spacing: 0.52px;
+const Label$1 = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 0.52px;
 `;
-const LabelTop = styled(Label$1) `
-  top: 6px;
+const LabelTop = styled(Label$1) `
+  top: 6px;
 `;
-const LabelBottom = styled(Label$1) `
-  bottom: 6px;
+const LabelBottom = styled(Label$1) `
+  bottom: 6px;
 `;
 
 const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }) => {
@@ -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")
@@ -1205,53 +1261,53 @@ const calendarChartClassNames = {
     ...legendClassNames,
 };
 const headerHeight = "20px";
-const SvgWrapper$3 = styled(Wrapper) `
-  .${calendarChartClassNames.calendarYear} {
-    display: flex;
-    margin-bottom: 16px;
-  }
-
-  .${calendarChartClassNames.calendarYearTitle} {
-    display: inline-flex;
-    align-items: flex-end;
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    font-weight: bold;
-  }
-
-  .${calendarChartClassNames.calendarHeader} {
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    position: relative;
-    display: flex;
-  }
-
-  .${calendarChartClassNames.calendarMonth} {
-    font-size: 14px;
-    bottom: 0;
-    position: absolute;
-  }
-
-  .${calendarChartClassNames.calendarAxis} {
-    display: flex;
-    flex-direction: column;
-    margin-right: 10px;
-  }
-
-  .${calendarChartClassNames.calendarWeekDay} {
-    font-size: 12px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .${calendarChartClassNames.calendarDays} {
-    position: relative;
-  }
-
-  .${calendarChartClassNames.calendarDay} {
-    position: absolute;
-  }
+const SvgWrapper$3 = styled(Wrapper) `
+  .${calendarChartClassNames.calendarYear} {
+    display: flex;
+    margin-bottom: 16px;
+  }
+
+  .${calendarChartClassNames.calendarYearTitle} {
+    display: inline-flex;
+    align-items: flex-end;
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  .${calendarChartClassNames.calendarHeader} {
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    position: relative;
+    display: flex;
+  }
+
+  .${calendarChartClassNames.calendarMonth} {
+    font-size: 14px;
+    bottom: 0;
+    position: absolute;
+  }
+
+  .${calendarChartClassNames.calendarAxis} {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+  }
+
+  .${calendarChartClassNames.calendarWeekDay} {
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${calendarChartClassNames.calendarDays} {
+    position: relative;
+  }
+
+  .${calendarChartClassNames.calendarDay} {
+    position: absolute;
+  }
 `;
 
 const draw$3 = (node, props) => {
@@ -1478,67 +1534,67 @@ const lineChartClassNames = {
     lineChartMouseLabelContainer: "lineChartMouseLabelContainer",
     lineChartMouseLabel: "lineChartMouseLabel",
 };
-const SvgWrapper$2 = styled(Wrapper) `
-  .${lineChartClassNames.lineChartYScaleGlobal},
-  .${lineChartClassNames.lineChartXScaleGlobal},
-  .${lineChartClassNames.lineChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartLinesGlobal} {
-    fill: none;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${lineChartClassNames.lineChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${lineChartClassNames.lineChartGridLineX},
-  .${lineChartClassNames.lineChartGridLineY},
-  .${lineChartClassNames.lineChartMouseLine} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${lineChartClassNames.lineChartMouseLine},
-  .${lineChartClassNames.lineChartMouseCircle} {
-    transition: opacity linear 200ms;
-    pointer-events: none;
-    stroke-width: 1px;
-  }
-
-  .${lineChartClassNames.lineChartDot} {
-    stroke: #fff;
-    stroke-width: 2px;
-  }
-
-  .${lineChartClassNames.lineChartMouseLine} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
+const SvgWrapper$2 = styled(Wrapper) `
+  .${lineChartClassNames.lineChartYScaleGlobal},
+  .${lineChartClassNames.lineChartXScaleGlobal},
+  .${lineChartClassNames.lineChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartLinesGlobal} {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${lineChartClassNames.lineChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${lineChartClassNames.lineChartGridLineX},
+  .${lineChartClassNames.lineChartGridLineY},
+  .${lineChartClassNames.lineChartMouseLine} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${lineChartClassNames.lineChartMouseLine},
+  .${lineChartClassNames.lineChartMouseCircle} {
+    transition: opacity linear 200ms;
+    pointer-events: none;
+    stroke-width: 1px;
+  }
+
+  .${lineChartClassNames.lineChartDot} {
+    stroke: #fff;
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartMouseLine} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
 `;
-const TooltipStyles$2 = createGlobalStyle `
-  .${lineChartClassNames.lineChartMouseLabel} {
-    transition: opacity linear 200ms;
-    z-index: 100;
-
-    .${lineChartClassNames.lineChartLabelFlex} {
-      justify-content: flex-start;
-      align-items: center;
-      pointer-events: none;
-    }
-
-    .${lineChartClassNames.lineChartLabel} {
-      margin: 0 0 0 10px;
-    }
-  }
+const TooltipStyles$2 = createGlobalStyle `
+  .${lineChartClassNames.lineChartMouseLabel} {
+    transition: opacity linear 200ms;
+    z-index: 100;
+
+    .${lineChartClassNames.lineChartLabelFlex} {
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+
+    .${lineChartClassNames.lineChartLabel} {
+      margin: 0 0 0 10px;
+    }
+  }
 `;
 
 const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, drawGridY, }) => {
@@ -1574,17 +1630,17 @@ const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, dr
     }
 };
 
-const LabelContainer = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const LabelContainer = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
-const Label = styled.div `
-  margin-bottom: 4px;
+const Label = styled.div `
+  margin-bottom: 4px;
 `;
 
 const labelClassName = "d3-chart-label";
@@ -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
@@ -2178,66 +2251,66 @@ const barChartClassNames = {
     ...labelClassnames,
     ...barChartLinesClassNames,
 };
-const SvgWrapper$1 = styled(Wrapper) `
-  display: ${({ selectable }) => selectable && "inline-block"};
-  user-select: ${({ selectable }) => selectable && "none"};
-  width: ${({ selectable }) => selectable && "auto"};
-
-  line {
-    stroke-width: 1px;
-    shape-rendering: crispEdges;
-  }
-
-  .${barChartClassNames.barChartGridLineX},
-  .${barChartClassNames.barChartGridLineY} {
-    stroke: rgba(48, 69, 79, 0.06);
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
-
-  .${barChartClassNames.barChartLinesGlobal} {
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${barChartClassNames.barChartLine} {
-    shape-rendering: auto;
-  }
-
-  .${barChartClassNames.barChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${barChartClassNames.barChartSelection} {
-    position: absolute;
-    top: 0;
-    width: 0;
-    background: rgba(0, 170, 255, 0.06);
-    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
-    pointer-events: none;
-  }
+const SvgWrapper$1 = styled(Wrapper) `
+  display: ${({ selectable }) => selectable && "inline-block"};
+  user-select: ${({ selectable }) => selectable && "none"};
+  width: ${({ selectable }) => selectable && "auto"};
+
+  line {
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+  }
+
+  .${barChartClassNames.barChartGridLineX},
+  .${barChartClassNames.barChartGridLineY} {
+    stroke: rgba(48, 69, 79, 0.06);
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
+
+  .${barChartClassNames.barChartLinesGlobal} {
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${barChartClassNames.barChartLine} {
+    shape-rendering: auto;
+  }
+
+  .${barChartClassNames.barChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${barChartClassNames.barChartSelection} {
+    position: absolute;
+    top: 0;
+    width: 0;
+    background: rgba(0, 170, 255, 0.06);
+    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
+    pointer-events: none;
+  }
 `;
-const TooltipStyles$1 = createGlobalStyle `
-  .${barChartClassNames.barChartMouseTooltip} {
-    z-index: 100;
-    transition: all linear 144ms;
-
-    .${barChartClassNames.barChartTooltipItem} {
-      padding: 0.125rem;
-      margin-bottom: 4px;
-
-      :last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
+const TooltipStyles$1 = createGlobalStyle `
+  .${barChartClassNames.barChartMouseTooltip} {
+    z-index: 100;
+    transition: all linear 144ms;
+
+    .${barChartClassNames.barChartTooltipItem} {
+      padding: 0.125rem;
+      margin-bottom: 4px;
+
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
 `;
 
 const useSelection = (node, props) => {
@@ -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);
+                    }
+                });
+            });
+        }
     }
 };
 
@@ -3045,45 +3150,45 @@ const horizontalBarChartClassNames = {
     horizontalBarChartTooltipName: "horizontalBarChartTooltipName",
     horizontalBarChartTooltipValue: "horizontalBarChartTooltipValue",
 };
-const Table = styled.table `
-  width: 100%;
+const Table = styled.table `
+  width: 100%;
 `;
-const LabelCell = styled.div `
-  text-align: right;
+const LabelCell = styled.div `
+  text-align: right;
 `;
-const BarFlex = styled.div `
-  width: 100%;
-  display: flex;
-  height: 1rem;
+const BarFlex = styled.div `
+  width: 100%;
+  display: flex;
+  height: 1rem;
 `;
-const BarsTd = styled.td `
-  width: 100%;
-  position: relative;
-  vertical-align: middle;
+const BarsTd = styled.td `
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
 `;
-const TooltipFlex = styled(TooltipFlex$1) `
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  will-change: left, top;
+const TooltipFlex = styled(TooltipFlex$1) `
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  will-change: left, top;
 `;
-const StackSumContainer = styled.div `
-  position: relative;
+const StackSumContainer = styled.div `
+  position: relative;
 `;
-const StackSum = styled.div `
-  white-space: nowrap;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(0, -50%);
+const StackSum = styled.div `
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(0, -50%);
 `;
-const StackWrapper = styled.div `
-  position: absolute;
-  top: 0;
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
+const StackWrapper = styled.div `
+  position: absolute;
+  top: 0;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
 `;
 
 const Tooltip$1 = ({ renderTooltip, bars, style, className, }) => {
@@ -3135,10 +3240,10 @@ const useStackWrapper = (stackedTooltip) => {
         : ({ children }) => (jsx(Fragment$1, { children: children })), [stackedTooltip]);
 };
 
-const BarStyled = styled.div `
-  position: relative;
-  display: inline-flex;
-  height: 100%;
+const BarStyled = styled.div `
+  position: relative;
+  display: inline-flex;
+  height: 100%;
 `;
 
 const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mouseLeave, pointerEventsNone, isFirstChild, isLastChild, isOnlyChild, }) => {
@@ -3155,23 +3260,23 @@ const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mous
         }, title: formatNativeTitle ? formatNativeTitle(bar) : "", onMouseOver: onMouseMove, onMouseMove: tooltipBind ? onMouseMove : void 0, onMouseOut: onMouseLeave }));
 };
 
-const TickTd = styled.td `
-  position: relative;
+const TickTd = styled.td `
+  position: relative;
 `;
-const Ticks = styled.div `
-  position: relative;
-  height: 1rem;
+const Ticks = styled.div `
+  position: relative;
+  height: 1rem;
 `;
-const Tick = styled.div `
-  white-space: nowrap;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Tick = styled.div `
+  white-space: nowrap;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const hundred = 100;
@@ -3270,29 +3375,29 @@ const bubbleChartClassNames = {
     bubbleChartTooltipFlex: "bubbleChartTooltipFlex",
     bubbleChartTip: "bubbleChartTip",
 };
-const SvgWrapper = styled(Wrapper) `
-  .${bubbleChartClassNames.bubbleChartYAxis},
-  .${bubbleChartClassNames.bubbleChartXAxis},
-  .${bubbleChartClassNames.bubbleChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${bubbleChartClassNames.bubbleChartGridLineX},
-  .${bubbleChartClassNames.bubbleChartGridLineY} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
-    font-size: 10px;
-  }
+const SvgWrapper = styled(Wrapper) `
+  .${bubbleChartClassNames.bubbleChartYAxis},
+  .${bubbleChartClassNames.bubbleChartXAxis},
+  .${bubbleChartClassNames.bubbleChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${bubbleChartClassNames.bubbleChartGridLineX},
+  .${bubbleChartClassNames.bubbleChartGridLineY} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
+    font-size: 10px;
+  }
 `;
-const TooltipStyles = createGlobalStyle `
-  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
-    position: absolute;
-    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
-    pointer-events: none;
-    z-index: 1;
-  }
+const TooltipStyles = createGlobalStyle `
+  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
+    position: absolute;
+    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
+    pointer-events: none;
+    z-index: 1;
+  }
 `;
 
 const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
@@ -3329,14 +3434,14 @@ const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) =
     }
 };
 
-const Tooltip = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const Tooltip = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
 
 const drawTooltip = ({ bubbles, tooltipRoot, tooltipClassName, renderTooltip, }) => {