pace-chart-lib 1.0.4 → 1.0.5

package/dist/Components/Charts/ChartsWithoutAxis/ChartsWithoutAxisTypes.types.d.ts

@@ -32,6 +32,7 @@ export type TVennSeries = {
     "actualValue": number;
 };
 export type TSankeyChartProps = {
+    data: any;
     sankeyLinks: TNodePairs[];
     sankeyNodes: TLegendEntry[];
     chartId: string;

package/dist/pace-chart-lib.es.js

@@ -15388,7 +15388,7 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, markerProp
     const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
       "class",
       chartFormatOptions.toolTip.toolTipTheme === "Light" ? "tooltipParentLight chartTooltip" : "tooltipParentDark chartTooltip"
-    ).style("color", "black").style("background", "rgba(255, 255, 255)").style("border", "0px solid #d4d4d4").style("border-radius", "4px").style("padding", "8px 12px").style("box-shadow", "0px 4px 10px #240808ff").style("transition", "transform 0.1s ease, opacity 0.2s ease");
+    ).style("color", "black").style("background", "rgba(255, 255, 255)").style("border", "0px solid #d4d4d4").style("border-radius", "4px").style("padding", "8px 12px").style("position", "absolute").style("box-shadow", "0px 4px 10px #240808ff").style("transition", "transform 0.1s ease, opacity 0.2s ease");
     const e = event2 || window.event;
     const mouseX = e.pageX;
     const mouseY = e.pageY;
@@ -15902,10 +15902,10 @@ const marginCalculationsForChartsWithoutLegends = (chartFormatOptions, height, w
       "Helvetica"
     ).height : 5;
     let margins = {
-      top: chartFormatOptions.chartTitle.chartTitleVisibility ? chartTitleHeight : 10,
-      bottom: shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme ? 40 : 10,
-      left: 10,
-      right: 10
+      top: chartFormatOptions.chartTitle.chartTitleVisibility ? chartTitleHeight : 20,
+      bottom: shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme ? 40 : 20,
+      left: 20,
+      right: 20
     };
     innerHeight = height - margins.top - margins.bottom;
     innerWidth = width - margins.left - margins.right;
@@ -18554,10 +18554,7 @@ const StackColumnChart = ({
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
     });
-    mergedRects.transition().duration(2e3).ease(cubicOut).attr(
-      "y",
-      (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])
-    ).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
+    mergedRects.transition().duration(2e3).ease(cubicOut).attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
   };
@@ -19184,7 +19181,7 @@ const NormalizedStackColumnChart = ({
     }
   };
   const getXScale = () => {
-    xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.3 * parseFloat(formatOptions.plotArea.plotAreaGapWidth) / 100);
+    xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
   };
   const initAxis = () => {
     {
@@ -19393,7 +19390,11 @@ const NormalizedStackColumnChart = ({
       (K2, j) => K2.forEach((d) => {
         d["key"] = K2.key;
         K2["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
-        K2["individualAnnotationVisibility"] = JSON.parse(JSON.stringify(seriesData[j].properties.individualAnnotationVisibility));
+        K2["individualAnnotationVisibility"] = JSON.parse(
+          JSON.stringify(
+            seriesData[j].properties.individualAnnotationVisibility
+          )
+        );
         d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
         d.data["labelColor"] = seriesColor == "2" ? JSON.parse(JSON.stringify(seriesData[j].properties.color)) : seriesData[j].properties.labelColor;
         d["hideZero"] = JSON.parse(
@@ -27236,11 +27237,15 @@ const DonutChart = ({
     try {
       const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius);
       const arcOver = arc$1().innerRadius(innerRadius).outerRadius(radius + 10);
-      chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
+      const parentGroup = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`);
+      const paths = parentGroup.selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
         "fill",
         (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
-      ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
-        select$2(this).transition().duration(100).attr("d", arcOver);
+      ).each(function(d) {
+        const thisPath = d;
+        thisPath._current = { startAngle: 0, endAngle: 0 };
+      }).on("mouseover.arc", function() {
+        select$2(this).transition().duration(150).attr("d", arcOver);
       }).on("mousemove.text", (d) => {
         showTooltipOnMouseMove(
           [
@@ -27262,10 +27267,17 @@ const DonutChart = ({
           ],
           chartFormatOptions
         );
-      }).on("mouseout.text", () => {
-        hideTooltipOnMouseOut();
-      }).on("mouseout.arc", function(d) {
-        select$2(this).transition().duration(100).attr("d", arc2);
+      }).on("mouseout.text", () => hideTooltipOnMouseOut()).on("mouseout.arc", function() {
+        select$2(this).transition().duration(150).attr("d", arc2);
+      });
+      paths.transition().delay((_, i) => i * 100).duration(2e3).attrTween("d", function(d) {
+        const interpolate2 = interpolate$2(
+          { startAngle: 0, endAngle: 0 },
+          d
+        );
+        return function(t) {
+          return arc2(interpolate2(t));
+        };
       });
     } catch (error) {
       logError$2(fileName$7, "drawDonutChart", error);
@@ -33979,11 +33991,12 @@ function Sankey() {
   return sankey;
 }
 const SankeyChart = ({
-  sankeyLinks,
-  sankeyNodes,
   formatOptions,
+  data,
   chartId
 }) => {
+  let sankeyLinks = JSON.parse(JSON.stringify(data.sankeyLinks));
+  let sankeyNodes = JSON.parse(JSON.stringify(data.sankeyNodes));
   const svgRef = useRef();
   let chartFormatOptions;
   let width;
@@ -34392,13 +34405,13 @@ const SankeyChart = ({
                   "text-align",
                   chartFormatOptions.nodes.sankeyChartType === "Left" ? "right" : chartFormatOptions.nodes.sankeyChartType === "Center" ? "center" : "left"
                 ).style("line-height", "20px").attr("title", (d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
-                    return d2.alias ? d2.alias : d2.name;
+                  if (layerWisePercentage.get(d2.name) > 0) {
+                    return d2.alias ? d2.alias.includes("~$~") ? d2.alias.split("~$~")[1] : d2.alias : d2.name.includes("~$~") ? d2.name.split("~$~")[1] : d2.name;
                   }
                   return "";
                 }).text((d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
-                    return d2.alias ? d2.alias : d2.name;
+                  if (layerWisePercentage.get(d2.name) > 0) {
+                    return d2.alias ? d2.alias.includes("~$~") ? d2.alias.split("~$~")[1] : d2.alias : d2.name.includes("~$~") ? d2.name.split("~$~")[1] : d2.name;
                   }
                   return "";
                 });
@@ -34443,7 +34456,7 @@ const SankeyChart = ({
                   "text-align",
                   chartFormatOptions.nodes.sankeyChartType === "Left" ? "right" : chartFormatOptions.nodes.sankeyChartType === "Center" ? "center" : "left"
                 ).style("line-height", "20px").attr("title", (d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
+                  if (layerWisePercentage.get(d2.name) > 0) {
                     return chartFormatOptions.nodes.nodeLabelNumberFormat === ",.0%" ? layerWisePercentage.get(d2.name).toFixed(
                       parseFloat(
                         chartFormatOptions.nodes.nodeLabelDecimalPrecision
@@ -34456,7 +34469,7 @@ const SankeyChart = ({
                   }
                   return "";
                 }).text((d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
+                  if (layerWisePercentage.get(d2.name) > 0) {
                     return chartFormatOptions.nodes.nodeLabelNumberFormat === ",.0%" ? layerWisePercentage.get(d2.name).toFixed(
                       parseFloat(
                         chartFormatOptions.nodes.nodeLabelDecimalPrecision

package/dist/pace-chart-lib.umd.js

@@ -15391,7 +15391,7 @@
       const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
         "class",
         chartFormatOptions.toolTip.toolTipTheme === "Light" ? "tooltipParentLight chartTooltip" : "tooltipParentDark chartTooltip"
-      ).style("color", "black").style("background", "rgba(255, 255, 255)").style("border", "0px solid #d4d4d4").style("border-radius", "4px").style("padding", "8px 12px").style("box-shadow", "0px 4px 10px #240808ff").style("transition", "transform 0.1s ease, opacity 0.2s ease");
+      ).style("color", "black").style("background", "rgba(255, 255, 255)").style("border", "0px solid #d4d4d4").style("border-radius", "4px").style("padding", "8px 12px").style("position", "absolute").style("box-shadow", "0px 4px 10px #240808ff").style("transition", "transform 0.1s ease, opacity 0.2s ease");
       const e = event2 || window.event;
       const mouseX = e.pageX;
       const mouseY = e.pageY;
@@ -15905,10 +15905,10 @@
         "Helvetica"
       ).height : 5;
       let margins = {
-        top: chartFormatOptions.chartTitle.chartTitleVisibility ? chartTitleHeight : 10,
-        bottom: shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme ? 40 : 10,
-        left: 10,
-        right: 10
+        top: chartFormatOptions.chartTitle.chartTitleVisibility ? chartTitleHeight : 20,
+        bottom: shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme ? 40 : 20,
+        left: 20,
+        right: 20
       };
       innerHeight = height - margins.top - margins.bottom;
       innerWidth = width - margins.left - margins.right;
@@ -18557,10 +18557,7 @@
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
       });
-      mergedRects.transition().duration(2e3).ease(cubicOut).attr(
-        "y",
-        (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])
-      ).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
+      mergedRects.transition().duration(2e3).ease(cubicOut).attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
       columnGroups.exit().remove();
       gTag.selectAll(".parentGroup").raise();
     };
@@ -19187,7 +19184,7 @@
       }
     };
     const getXScale = () => {
-      xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.3 * parseFloat(formatOptions.plotArea.plotAreaGapWidth) / 100);
+      xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
     };
     const initAxis = () => {
       {
@@ -19396,7 +19393,11 @@
         (K2, j) => K2.forEach((d) => {
           d["key"] = K2.key;
           K2["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
-          K2["individualAnnotationVisibility"] = JSON.parse(JSON.stringify(seriesData[j].properties.individualAnnotationVisibility));
+          K2["individualAnnotationVisibility"] = JSON.parse(
+            JSON.stringify(
+              seriesData[j].properties.individualAnnotationVisibility
+            )
+          );
           d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
           d.data["labelColor"] = seriesColor == "2" ? JSON.parse(JSON.stringify(seriesData[j].properties.color)) : seriesData[j].properties.labelColor;
           d["hideZero"] = JSON.parse(
@@ -27239,11 +27240,15 @@
       try {
         const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius);
         const arcOver = arc$1().innerRadius(innerRadius).outerRadius(radius + 10);
-        chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
+        const parentGroup = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`);
+        const paths = parentGroup.selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
           "fill",
           (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
-        ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
-          select$2(this).transition().duration(100).attr("d", arcOver);
+        ).each(function(d) {
+          const thisPath = d;
+          thisPath._current = { startAngle: 0, endAngle: 0 };
+        }).on("mouseover.arc", function() {
+          select$2(this).transition().duration(150).attr("d", arcOver);
         }).on("mousemove.text", (d) => {
           showTooltipOnMouseMove(
             [
@@ -27265,10 +27270,17 @@
             ],
             chartFormatOptions
           );
-        }).on("mouseout.text", () => {
-          hideTooltipOnMouseOut();
-        }).on("mouseout.arc", function(d) {
-          select$2(this).transition().duration(100).attr("d", arc2);
+        }).on("mouseout.text", () => hideTooltipOnMouseOut()).on("mouseout.arc", function() {
+          select$2(this).transition().duration(150).attr("d", arc2);
+        });
+        paths.transition().delay((_, i) => i * 100).duration(2e3).attrTween("d", function(d) {
+          const interpolate2 = interpolate$2(
+            { startAngle: 0, endAngle: 0 },
+            d
+          );
+          return function(t) {
+            return arc2(interpolate2(t));
+          };
         });
       } catch (error) {
         logError$2(fileName$7, "drawDonutChart", error);
@@ -33982,11 +33994,12 @@
     return sankey;
   }
   const SankeyChart = ({
-    sankeyLinks,
-    sankeyNodes,
     formatOptions,
+    data,
     chartId
   }) => {
+    let sankeyLinks = JSON.parse(JSON.stringify(data.sankeyLinks));
+    let sankeyNodes = JSON.parse(JSON.stringify(data.sankeyNodes));
     const svgRef = require$$0$1.useRef();
     let chartFormatOptions;
     let width;
@@ -34395,13 +34408,13 @@
                     "text-align",
                     chartFormatOptions.nodes.sankeyChartType === "Left" ? "right" : chartFormatOptions.nodes.sankeyChartType === "Center" ? "center" : "left"
                   ).style("line-height", "20px").attr("title", (d2) => {
-                    if (layerWisePercentage.get(d2.name) > 5) {
-                      return d2.alias ? d2.alias : d2.name;
+                    if (layerWisePercentage.get(d2.name) > 0) {
+                      return d2.alias ? d2.alias.includes("~$~") ? d2.alias.split("~$~")[1] : d2.alias : d2.name.includes("~$~") ? d2.name.split("~$~")[1] : d2.name;
                     }
                     return "";
                   }).text((d2) => {
-                    if (layerWisePercentage.get(d2.name) > 5) {
-                      return d2.alias ? d2.alias : d2.name;
+                    if (layerWisePercentage.get(d2.name) > 0) {
+                      return d2.alias ? d2.alias.includes("~$~") ? d2.alias.split("~$~")[1] : d2.alias : d2.name.includes("~$~") ? d2.name.split("~$~")[1] : d2.name;
                     }
                     return "";
                   });
@@ -34446,7 +34459,7 @@
                     "text-align",
                     chartFormatOptions.nodes.sankeyChartType === "Left" ? "right" : chartFormatOptions.nodes.sankeyChartType === "Center" ? "center" : "left"
                   ).style("line-height", "20px").attr("title", (d2) => {
-                    if (layerWisePercentage.get(d2.name) > 5) {
+                    if (layerWisePercentage.get(d2.name) > 0) {
                       return chartFormatOptions.nodes.nodeLabelNumberFormat === ",.0%" ? layerWisePercentage.get(d2.name).toFixed(
                         parseFloat(
                           chartFormatOptions.nodes.nodeLabelDecimalPrecision
@@ -34459,7 +34472,7 @@
                     }
                     return "";
                   }).text((d2) => {
-                    if (layerWisePercentage.get(d2.name) > 5) {
+                    if (layerWisePercentage.get(d2.name) > 0) {
                       return chartFormatOptions.nodes.nodeLabelNumberFormat === ",.0%" ? layerWisePercentage.get(d2.name).toFixed(
                         parseFloat(
                           chartFormatOptions.nodes.nodeLabelDecimalPrecision

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS",
   "license": "MIT",
   "type": "module",