pace-chart-lib 1.0.12 → 1.0.14

package/dist/Components/Charts/Core/CommonFunctions.d.ts

@@ -90,7 +90,7 @@ export declare function getNumberWithFormatFunction(displayUnits: any, numberFor
  * @param chartFormatOptions -> rightpane format options;
  * @param event -> optional mouse event to track mouse;
  */
-export declare function showTooltipOnMouseMove(elements: any, chartFormatOptions: TDefaultChartFormatOptionsType, event?: MouseEvent, markerProp?: any): void;
+export declare function showTooltipOnMouseMove(elements: any, chartFormatOptions: TDefaultChartFormatOptionsType, event?: MouseEvent, prop?: any): void;
 export declare function hideTooltipOnMouseOut(): void;
 /**
  * Adds chart title to svg
@@ -205,7 +205,7 @@ export declare const marginCalculationsForChartsWithoutAxis: (chartFormatOptions
  * @param chartId - The unique identifier for the chart.
  * @param margins - The margins for the chart area.
  */
-export declare const initLegendListWithTotalValueAllowance: (chartFormatOptions: TDefaultChartFormatOptionsType, svg: d3.Selection<SVGGElement, any, any, any>, seriesData: TSeries[], width: number, height: number, legendListWidth: number, chartTitleHeight: number, chartId: string, margins: TChartMargins, shouldAllowTotalValueMargin?: boolean) => void;
+export declare const initLegendListWithTotalValueAllowance: (chartFormatOptions: TDefaultChartFormatOptionsType, svg: d3.Selection<SVGGElement, any, any, any>, seriesData: TSeries[], width: number, height: number, legendListWidth: number, chartTitleHeight: number, chartId: string, margins: TChartMargins, staticLegendShape: string, shouldAllowTotalValueMargin?: boolean) => void;
 /**
  * Calculates the maximum possible width and height for the legends based on the longest legend string.
  * @param chartFormatOptions - The format options for the chart.

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

@@ -14486,7 +14486,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
             height: 15,
             width: 15
           },
-          color: d.data.labelColor,
+          color: labelType !== "6" ? d.data.labelColor : d.properties.labelColor,
           type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
           height,
           width
@@ -15401,10 +15401,10 @@ function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecisio
     logError$2(fileName$b, "getNumberWithFormatFunction", error);
   }
 }
-function showTooltipOnMouseMove(elements, chartFormatOptions, event2, markerProp) {
+function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
   try {
-    const markerColor = markerProp?.markerColor ?? "blue";
-    const markerShape = markerProp?.markerShape.toLowerCase() ?? "circle";
+    const markerColor = prop?.markerColor ?? "blue";
+    const markerShape = prop?.markerShape.toLowerCase() ?? "circle";
     selectAll(".chartTooltip").style("visibility", "hidden");
     const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
       "class",
@@ -15592,7 +15592,7 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
         {
           if ((legendShape || customLegendShape) == staticLegendShape.circle) {
             getCircleShape(d, innerdiv);
-          } else if ((legendShape || customLegendShape) == staticLegendShape.circle) {
+          } else if ((legendShape || customLegendShape) == staticLegendShape.hollowCircle) {
             getHollowCircleShape(d, innerdiv);
           } else if ((legendShape || customLegendShape) == staticLegendShape.line) {
             getLineShape(d, innerdiv, chartFormatOptions);
@@ -15638,7 +15638,7 @@ function getCircleShape(d, innerDiv) {
 }
 function getHollowCircleShape(d, innerDiv) {
   try {
-    innerDiv.append("div").style("height", "12px").style("width", "12px").style("border-radius", "50%").style("border", `3px solid ${d.properties.Color}`);
+    innerDiv.append("div").style("height", "12px").style("width", "12px").style("border-radius", "50%").style("border", `3px solid ${d.properties.Color ?? d.properties.color}`);
   } catch (error) {
     logError$2(fileName$b, "getHollowCircleShape", error);
   }
@@ -15824,7 +15824,7 @@ const marginCalculationsForChartsWithoutAxis = (chartFormatOptions, width, heigh
     logError$2(fileName$b, "marginCalculationsForChartsWithoutAxis", error);
   }
 };
-const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, shouldAllowTotalValueMargin = true) => {
+const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, staticLegendShape2, shouldAllowTotalValueMargin = true) => {
   try {
     let position = chartFormatOptions.legends.legendPosition;
     let totalPosition = chartFormatOptions.total.totalPosition;
@@ -15845,7 +15845,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           height - chartTitleHeight - 10 - (shouldTotalValueAdjustment ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.end ? 10 : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start ? 20 : 0 : 0),
           position,
           verticalLegendAlignment,
-          staticLegendShape.circle,
+          staticLegendShape2,
           chartFormatOptions,
           chartId
         );
@@ -15860,7 +15860,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           30,
           position,
           horizontalLegendAlignment,
-          staticLegendShape.circle,
+          staticLegendShape2,
           chartFormatOptions,
           chartId
         );
@@ -15875,7 +15875,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           height - chartTitleHeight - 10 - (shouldTotalValueAdjustment ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.start ? 10 : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start ? 20 : 0 : 0),
           position,
           verticalLegendAlignment,
-          staticLegendShape.circle,
+          staticLegendShape2,
           chartFormatOptions,
           chartId
         );
@@ -15890,7 +15890,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           30,
           position,
           horizontalLegendAlignment,
-          staticLegendShape.circle,
+          staticLegendShape2,
           chartFormatOptions,
           chartId
         );
@@ -26572,7 +26572,8 @@ const PieChart = ({ data, formatOptions, chartId }) => {
       legendListWidth,
       chartTitleHeight,
       chartId,
-      margins
+      margins,
+      staticLegendShape.circle
     );
     initPieChartData();
     drawPieChart();
@@ -26933,6 +26934,7 @@ const DonutChart = ({
       chartTitleHeight,
       chartId,
       margins,
+      staticLegendShape.hollowCircle,
       false
     );
     initPieChartData();
@@ -26953,7 +26955,7 @@ const DonutChart = ({
   };
   const defineChartRadius = () => {
     try {
-      radius = Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5);
+      radius = Math.min(innerHeight2 * 0.4, innerWidth2 * 0.4);
       outsideDataLabelFlag ? radius = radius * 0.9 : null;
       innerRadius = Math.min(
         convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100 * radius,
@@ -27833,7 +27835,8 @@ const PieofPie = ({
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.circle
       );
     } catch (error) {
       logError$2(fileName$5, "initLegendList", error);
@@ -27906,6 +27909,7 @@ const PyramidChart = ({
       chartTitleHeight,
       chartId,
       margins,
+      staticLegendShape.rectangle,
       false
     );
     initPyramidData();
@@ -28261,7 +28265,8 @@ const ProgressChart = ({
       legendListWidth,
       chartTitleHeight,
       chartId,
-      margins
+      margins,
+      staticLegendShape.hollowCircle
     );
     initProgressChartData();
     drawProgressChart();
@@ -28983,7 +28988,8 @@ const RadialBarChart = ({
       legendListWidth,
       chartTitleHeight,
       chartId,
-      margins
+      margins,
+      staticLegendShape.hollowCircle
     );
     initRadialBarChart();
   };
@@ -33918,7 +33924,7 @@ const SankeyChart = ({
             showTooltipOnMouseMove(
               [
                 {
-                  key: d.name,
+                  key: d.name.split("~$~")[1],
                   value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%" ? layerWisePercentage.get(d.name) + "%" : getNumberWithFormatFunction(
                     "None",
                     chartFormatOptions.toolTip.toolTipNumberFormat,
@@ -33928,7 +33934,7 @@ const SankeyChart = ({
               ],
               chartFormatOptions,
               void 0,
-              d.currentTarget.__data__.data.properties
+              { markerShape: "square", markerColor: d.color }
             );
           }
           chartAreaTagG.selectAll(".sankey-nodes").style("fill-opacity", 0.1).style("stroke", "none");
@@ -52498,7 +52504,8 @@ const BubbleChart = ({
         maxLegendDimensions[0],
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.circle
       );
     } catch (e) {
       logError$2("BubbleChart", "initLegendList", e);
@@ -53553,12 +53560,12 @@ const WaterfallChart = ({
         barGroups = barGroupsEnter.merge(barGroups);
         let rects = barGroups.selectAll("rect").data((d) => d, (d) => d.key || d.Key);
         const rectsEnter = rects.enter().append("rect").attr("class", "rect").attr("class", (d) => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-")).attr("x", (d) => xScale(d.data.dimension || d.data.legend)).attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("height", (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0).attr("width", xScale.bandwidth()).attr("visibility", (d) => k2 === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible").style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+          const markerInfo = {
+            markerShape: "square",
+            markerColor: d.key === "dimensionTotal" ? formatOptions.plotArea.totalColor : d.key === "down" ? formatOptions.plotArea.negativeColor : formatOptions.plotArea.positiveColor
+          };
           showTooltipOnMouseMove(
             [
-              {
-                key: d.key === "dimensionTotal" ? "Dimension" : formatOptions.xAxisTitle.xAxisTitleText,
-                value: chartJSON.formattedDimensionListMap.get(d.data.dimension)
-              },
               {
                 key: formatOptions.yAxisTitle.yAxisTitleText,
                 value: (d.key === "up" ? "+" : d.key === "down" ? "-" : "") + getNumberWithFormat(
@@ -53575,7 +53582,7 @@ const WaterfallChart = ({
             ],
             formatOptions,
             void 0,
-            d.currentTarget.__data__.data.properties
+            markerInfo
           );
         }).on("mouseout", () => {
           hideTooltipOnMouseOut();

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

@@ -14489,7 +14489,7 @@
               height: 15,
               width: 15
             },
-            color: d.data.labelColor,
+            color: labelType !== "6" ? d.data.labelColor : d.properties.labelColor,
             type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
             height,
             width
@@ -15404,10 +15404,10 @@
       logError$2(fileName$b, "getNumberWithFormatFunction", error);
     }
   }
-  function showTooltipOnMouseMove(elements, chartFormatOptions, event2, markerProp) {
+  function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     try {
-      const markerColor = markerProp?.markerColor ?? "blue";
-      const markerShape = markerProp?.markerShape.toLowerCase() ?? "circle";
+      const markerColor = prop?.markerColor ?? "blue";
+      const markerShape = prop?.markerShape.toLowerCase() ?? "circle";
       selectAll(".chartTooltip").style("visibility", "hidden");
       const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
         "class",
@@ -15595,7 +15595,7 @@
           {
             if ((legendShape || customLegendShape) == staticLegendShape.circle) {
               getCircleShape(d, innerdiv);
-            } else if ((legendShape || customLegendShape) == staticLegendShape.circle) {
+            } else if ((legendShape || customLegendShape) == staticLegendShape.hollowCircle) {
               getHollowCircleShape(d, innerdiv);
             } else if ((legendShape || customLegendShape) == staticLegendShape.line) {
               getLineShape(d, innerdiv, chartFormatOptions);
@@ -15641,7 +15641,7 @@
   }
   function getHollowCircleShape(d, innerDiv) {
     try {
-      innerDiv.append("div").style("height", "12px").style("width", "12px").style("border-radius", "50%").style("border", `3px solid ${d.properties.Color}`);
+      innerDiv.append("div").style("height", "12px").style("width", "12px").style("border-radius", "50%").style("border", `3px solid ${d.properties.Color ?? d.properties.color}`);
     } catch (error) {
       logError$2(fileName$b, "getHollowCircleShape", error);
     }
@@ -15827,7 +15827,7 @@
       logError$2(fileName$b, "marginCalculationsForChartsWithoutAxis", error);
     }
   };
-  const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, shouldAllowTotalValueMargin = true) => {
+  const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, staticLegendShape2, shouldAllowTotalValueMargin = true) => {
     try {
       let position = chartFormatOptions.legends.legendPosition;
       let totalPosition = chartFormatOptions.total.totalPosition;
@@ -15848,7 +15848,7 @@
             height - chartTitleHeight - 10 - (shouldTotalValueAdjustment ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.end ? 10 : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start ? 20 : 0 : 0),
             position,
             verticalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -15863,7 +15863,7 @@
             30,
             position,
             horizontalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -15878,7 +15878,7 @@
             height - chartTitleHeight - 10 - (shouldTotalValueAdjustment ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.start ? 10 : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start ? 20 : 0 : 0),
             position,
             verticalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -15893,7 +15893,7 @@
             30,
             position,
             horizontalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -26575,7 +26575,8 @@
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.circle
       );
       initPieChartData();
       drawPieChart();
@@ -26936,6 +26937,7 @@
         chartTitleHeight,
         chartId,
         margins,
+        staticLegendShape.hollowCircle,
         false
       );
       initPieChartData();
@@ -26956,7 +26958,7 @@
     };
     const defineChartRadius = () => {
       try {
-        radius = Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5);
+        radius = Math.min(innerHeight2 * 0.4, innerWidth2 * 0.4);
         outsideDataLabelFlag ? radius = radius * 0.9 : null;
         innerRadius = Math.min(
           convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100 * radius,
@@ -27836,7 +27838,8 @@
           legendListWidth,
           chartTitleHeight,
           chartId,
-          margins
+          margins,
+          staticLegendShape.circle
         );
       } catch (error) {
         logError$2(fileName$5, "initLegendList", error);
@@ -27909,6 +27912,7 @@
         chartTitleHeight,
         chartId,
         margins,
+        staticLegendShape.rectangle,
         false
       );
       initPyramidData();
@@ -28264,7 +28268,8 @@
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.hollowCircle
       );
       initProgressChartData();
       drawProgressChart();
@@ -28986,7 +28991,8 @@
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.hollowCircle
       );
       initRadialBarChart();
     };
@@ -33921,7 +33927,7 @@
               showTooltipOnMouseMove(
                 [
                   {
-                    key: d.name,
+                    key: d.name.split("~$~")[1],
                     value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%" ? layerWisePercentage.get(d.name) + "%" : getNumberWithFormatFunction(
                       "None",
                       chartFormatOptions.toolTip.toolTipNumberFormat,
@@ -33931,7 +33937,7 @@
                 ],
                 chartFormatOptions,
                 void 0,
-                d.currentTarget.__data__.data.properties
+                { markerShape: "square", markerColor: d.color }
               );
             }
             chartAreaTagG.selectAll(".sankey-nodes").style("fill-opacity", 0.1).style("stroke", "none");
@@ -52501,7 +52507,8 @@
           maxLegendDimensions[0],
           chartTitleHeight,
           chartId,
-          margins
+          margins,
+          staticLegendShape.circle
         );
       } catch (e) {
         logError$2("BubbleChart", "initLegendList", e);
@@ -53556,12 +53563,12 @@
           barGroups = barGroupsEnter.merge(barGroups);
           let rects = barGroups.selectAll("rect").data((d) => d, (d) => d.key || d.Key);
           const rectsEnter = rects.enter().append("rect").attr("class", "rect").attr("class", (d) => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-")).attr("x", (d) => xScale(d.data.dimension || d.data.legend)).attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("height", (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0).attr("width", xScale.bandwidth()).attr("visibility", (d) => k2 === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible").style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+            const markerInfo = {
+              markerShape: "square",
+              markerColor: d.key === "dimensionTotal" ? formatOptions.plotArea.totalColor : d.key === "down" ? formatOptions.plotArea.negativeColor : formatOptions.plotArea.positiveColor
+            };
             showTooltipOnMouseMove(
               [
-                {
-                  key: d.key === "dimensionTotal" ? "Dimension" : formatOptions.xAxisTitle.xAxisTitleText,
-                  value: chartJSON.formattedDimensionListMap.get(d.data.dimension)
-                },
                 {
                   key: formatOptions.yAxisTitle.yAxisTitleText,
                   value: (d.key === "up" ? "+" : d.key === "down" ? "-" : "") + getNumberWithFormat(
@@ -53578,7 +53585,7 @@
               ],
               formatOptions,
               void 0,
-              d.currentTarget.__data__.data.properties
+              markerInfo
             );
           }).on("mouseout", () => {
             hideTooltipOnMouseOut();

package/package.json

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