pace-chart-lib 1.0.13 → 1.0.15

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

@@ -12047,7 +12047,7 @@ function getNumberWithFormat(measureValue, displayUnits, numberFormat, decimalPr
     let decimalValues = decimalPrescision;
     let formatter;
     if (displayUnits === "Auto") {
-      return getAutoNumberWithFormat(measureValue);
+      return getAutoNumberWithFormat$1(measureValue);
     } else if (displayUnits != staticDisplayUnits.none) {
       displayUnits == staticDisplayUnits.thousands ? (Unit = 1e3, displayUnitsPostFix = "K") : null;
       displayUnits == staticDisplayUnits.millions ? (Unit = 1e6, displayUnitsPostFix = "M") : null;
@@ -12096,7 +12096,7 @@ function getNumberWithFormat(measureValue, displayUnits, numberFormat, decimalPr
     throw error;
   }
 }
-function getAutoNumberWithFormat(value2) {
+function getAutoNumberWithFormat$1(value2) {
   if (value2 === null || value2 === void 0 || isNaN(value2)) return "-";
   const absValue = Math.abs(value2);
   if (absValue >= 1e9) {
@@ -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
@@ -15346,16 +15346,29 @@ function isPlainObject(val) {
 }
 function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecision) {
   try {
-    let Unit;
+    let Unit = 1;
     let displayUnitsPostFix = "";
     let decimalValues = decimalPrecision;
     let formatter;
-    return function(d) {
+    return function(value2) {
       try {
-        if (displayUnits != "None") {
-          displayUnits == "Thousands" ? (Unit = 1e3, displayUnitsPostFix = "K") : null;
-          displayUnits == "Millions" ? (Unit = 1e6, displayUnitsPostFix = "M") : null;
-          displayUnits == "Billions" ? (Unit = 1e9, displayUnitsPostFix = "B") : null;
+        let d = value2 ?? 0;
+        if (displayUnits === "Auto") {
+          return getAutoNumberWithFormat(d);
+        }
+        if (displayUnits && displayUnits !== "None") {
+          if (displayUnits === "Thousands") {
+            Unit = 1e3;
+            displayUnitsPostFix = "K";
+          }
+          if (displayUnits === "Millions") {
+            Unit = 1e6;
+            displayUnitsPostFix = "M";
+          }
+          if (displayUnits === "Billions") {
+            Unit = 1e9;
+            displayUnitsPostFix = "B";
+          }
           d = d / Unit;
         }
         switch (numberFormat) {
@@ -15366,7 +15379,7 @@ function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecisio
             formatter = `.${decimalValues}f`;
             return format(formatter)(d) + displayUnitsPostFix;
           case ".2n":
-            formatter = `.${decimalValues == 0 ? 1 : (parseFloat(decimalValues) + 1).toString()}n`;
+            formatter = `.${decimalValues == 0 ? 1 : parseFloat(decimalValues) + 1}n`;
             return format(formatter)(d) + displayUnitsPostFix;
           case ".2$":
             formatter = `,.${decimalValues}f`;
@@ -15401,6 +15414,14 @@ function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecisio
     logError$2(fileName$b, "getNumberWithFormatFunction", error);
   }
 }
+function getAutoNumberWithFormat(value2) {
+  if (value2 === null || value2 === void 0) return "0";
+  let abs2 = Math.abs(value2);
+  if (abs2 >= 1e9) return (value2 / 1e9).toFixed(2) + "B";
+  if (abs2 >= 1e6) return (value2 / 1e6).toFixed(2) + "M";
+  if (abs2 >= 1e3) return (value2 / 1e3).toFixed(2) + "K";
+  return value2.toFixed(2);
+}
 function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
   try {
     const markerColor = prop?.markerColor ?? "blue";
@@ -15969,7 +15990,7 @@ function generalizedChartData(chartData, dimensionList) {
       } else {
         properties = { ...chartProperties, ...item.properties };
       }
-      const normalizedData = dimensionList ? dimensionList.map((dim) => {
+      const normalizedData = dimensionList && dimensionList.length !== 0 ? dimensionList.map((dim) => {
         const found = item.data.find((d) => d.dimension === dim);
         if (found) {
           return { ...found };
@@ -17758,7 +17779,9 @@ const LayeredColumnChart = ({
       chartJSON.yMaxRight,
       isSecondaryAxisDrawn,
       isNormalizedChart,
-      isDateType
+      isDateType,
+      false,
+      chartJSON
     ));
     setSVGContainer(margin);
     ({ dataTable, dataTableHeight } = dataTablePreCalculation(
@@ -19738,7 +19761,7 @@ function responsiveYaxisLabel(Ymax, Ymin, innerHeight2, formatOptions, customYax
         }
       }
     } else {
-      customTickValue = innerHeight2 / 30;
+      customTickValue = innerHeight2 / 60;
     }
     return { yAxisLabelArray, customTickValue };
   } catch (e) {
@@ -20342,7 +20365,7 @@ const ColumnHistogramChart = ({
             )
           );
           getXAxis();
-          drawColumnChart();
+          drawColumnHistogramChart();
         })
       );
       svg2.on("wheel", (event2) => {
@@ -20359,12 +20382,12 @@ const ColumnHistogramChart = ({
           )
         );
         getXAxis();
-        drawColumnChart();
+        drawColumnHistogramChart();
       });
     }
-    drawColumnChart();
+    drawColumnHistogramChart();
   };
-  const drawColumnChart = () => {
+  const drawColumnHistogramChart = () => {
     initXaxis$1(
       gTag,
       chartJSON,
@@ -28213,12 +28236,12 @@ const PyramidChart = ({
 };
 const fileName$3 = "ProgressChart.tsx";
 const ProgressChart = ({
-  data,
+  data: { ChartData },
   formatOptions,
   chartId
 }) => {
   const svgRef = useRef();
-  let seriesData = generalizedChartData(data.ChartData);
+  let seriesData = generalizedChartData(ChartData);
   let chartFormatOptions;
   let width;
   let height;
@@ -28293,22 +28316,22 @@ const ProgressChart = ({
   const initProgressChartData = () => {
     try {
       seriesData = seriesData.sort((a2, b) => b.data[0].value - a2.data[0].value);
-      totalValue = data[0].data[0].value + data[1].data[0].value;
+      totalValue = ChartData[0].data[0].value + ChartData[1].data[0].value;
     } catch (error) {
       logError$2(fileName$3, "initProgressChartData", error);
     }
   };
   const drawProgressChart = () => {
     try {
-      let maxValue = data[0].data[0].value;
-      let progressValue = data[1].data[0].value;
+      let maxValue = ChartData[0].data[0].value;
+      let progressValue = ChartData[1].data[0].value;
       let completeAngle = Math.PI * 2;
       let progressAngle = progressValue / maxValue * Math.PI * 2;
       let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
       const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius).startAngle(0).cornerRadius(
         convertStringToNumber(chartFormatOptions.plotArea.cornerRadius)
       );
-      chartAreaTagG.append("path").attr("class", "secondary-circle").attr("fill", data[0].properties.color).attr(
+      chartAreaTagG.append("path").attr("class", "secondary-circle").attr("fill", ChartData[0].properties.color).attr(
         "fill-opacity",
         chartFormatOptions.plotArea.opacityforProgressScale
       ).attr("d", arc2({ endAngle: completeAngle })).on("mousemove", (d) => {
@@ -28316,7 +28339,7 @@ const ProgressChart = ({
           showTooltipOnMouseMove(
             [
               {
-                key: data[0].properties.alias,
+                key: ChartData[0].properties.alias,
                 value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                   "None",
                   chartFormatOptions.toolTip.toolTipNumberFormatProgress,
@@ -28346,7 +28369,7 @@ const ProgressChart = ({
           );
         }
       }).attr("transform", getTransformString());
-      chartAreaTagG.append("path").attr("class", "progress-circle").attr("fill", data[1].properties.color).attr(
+      chartAreaTagG.append("path").attr("class", "progress-circle").attr("fill", ChartData[1].properties.color).attr(
         "fill-opacity",
         chartFormatOptions.plotArea.opacityforProgressGoal
       ).attr("d", arc2({ endAngle: progressAngle })).on("mousemove", (d) => {
@@ -28354,7 +28377,7 @@ const ProgressChart = ({
           showTooltipOnMouseMove(
             [
               {
-                key: data[1].properties.alias,
+                key: ChartData[1].properties.alias,
                 value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? Math.round(progressValue / maxValue * 100) + "%" : getNumberWithFormatFunction(
                   "None",
                   chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -28362,7 +28385,7 @@ const ProgressChart = ({
                 )(maxValue)
               },
               {
-                key: data[0].properties.alias,
+                key: ChartData[0].properties.alias,
                 value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                   "None",
                   chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -28456,12 +28479,12 @@ const ProgressChart = ({
   ) });
 };
 const Speedometer = ({
-  data,
+  data: { ChartData },
   formatOptions,
   chartId
 }) => {
   const svgRef = useRef();
-  const seriesData = generalizedChartData(data.ChartData);
+  const seriesData = generalizedChartData(ChartData);
   let chartFormatOptions;
   let width;
   let height;
@@ -28532,7 +28555,7 @@ const Speedometer = ({
   }
   const initSpeedometerData = () => {
     try {
-      let firstMeasureValue = data[0].data[0].value;
+      let firstMeasureValue = ChartData[0].data[0].value;
       if (firstMeasureValue < 0) {
         gaugeMaxMeasure = 0;
         gaugeMinMeasure = firstMeasureValue;
@@ -28769,19 +28792,19 @@ const Speedometer = ({
                 showTooltipOnMouseMove(
                   [
                     {
-                      key: `${data[index2].data[0].legend}`,
+                      key: `${ChartData[index2].data[0].legend}`,
                       value: chartFormatOptions.plotArea.dataLabelNumberFormat == ",.0%" ? Math.round(
-                        data[index2].data[0].value / ticks2[ticks2.length - 1] * 100
+                        ChartData[index2].data[0].value / ticks2[ticks2.length - 1] * 100
                       ) + "%" : getNumberWithFormatFunction(
                         "None",
                         chartFormatOptions.toolTip.toolTipNumberFormat,
                         chartFormatOptions.toolTip.toolTipDecimalPrecision
-                      )(data[index2].data[0].value)
+                      )(ChartData[index2].data[0].value)
                     }
                   ],
                   chartFormatOptions,
                   void 0,
-                  d.currentTarget.__data__.data.properties
+                  { markerColor: "blue", markerShape: "circle" }
                 );
               }).on("mouseout", () => {
                 hideTooltipOnMouseOut();
@@ -28915,7 +28938,7 @@ const Speedometer = ({
           "None",
           chartFormatOptions.pointerValue.pointerValueNumberFormat,
           chartFormatOptions.pointerValue.pointerValueDecimalPrecision
-        )(data[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
+        )(ChartData[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
       ).attr(
         "visibility",
         chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
@@ -28938,12 +28961,12 @@ function logError(fileName2, functionName, error) {
   console.error(`[${fileName2}][${functionName}]`, error);
 }
 const RadialBarChart = ({
-  data,
+  data: { ChartData },
   formatOptions,
   chartId
 }) => {
   const svgRef = useRef();
-  const seriesData = generalizedChartData(data.ChartData);
+  const seriesData = generalizedChartData(ChartData);
   let chartFormatOptions;
   let width;
   let height;
@@ -29046,7 +29069,7 @@ const RadialBarChart = ({
           logError("RadialBarChart.tsx", "getOuterRadius", error);
         }
       };
-      let scaleMaxValue = seriesData.length > 1 ? max$2(seriesData, (d) => d.data[0].value) * 1.1 : data[0].data[0].value * 1.1;
+      let scaleMaxValue = seriesData.length > 1 ? max$2(seriesData, (d) => d.data[0].value) * 1.1 : ChartData[0].data[0].value * 1.1;
       let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
       let maxDim = getNumberWithFormatFunction(
         chartFormatOptions.plotArea.plotAreaDisplayUnits,
@@ -29082,7 +29105,7 @@ const RadialBarChart = ({
       const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs;
       let arc2 = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle((d) => scale2(Math.abs(d.data[0].value)));
       let dummyArc = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle(degToRad(360));
-      let radialAxis = svg2.append("g").attr("class", "r axis").selectAll("g").data(data).enter().append("g");
+      let radialAxis = svg2.append("g").attr("class", "r axis").selectAll("g").data(ChartData).enter().append("g");
       if (chartFormatOptions.plotArea.axialGrid) {
         radialAxis.append("circle").attr("r", (d, i) => getOuterRadius(i) + arcPadding).attr("stroke", "#d3d3d3").attr("stroke-width", 1).attr("fill", "none");
       }
@@ -29130,7 +29153,7 @@ const RadialBarChart = ({
         "visibility",
         chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden"
       );
-      let arcs = svg2.attr("class", "data").selectAll("path").data(data).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
+      let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
@@ -29158,7 +29181,7 @@ const RadialBarChart = ({
         (d, i) => chartFormatOptions.plotArea.arcTransition ? i * 200 : 0
       ).duration(chartFormatOptions.plotArea.arcTransition ? 500 : 0).attrTween("d", arcTween);
       if (chartFormatOptions.plotArea.dataLabels) {
-        svg2.selectAll(".arc-label-" + chartId).data(data).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(i) - getInnerRadius(i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
+        svg2.selectAll(".arc-label-" + chartId).data(ChartData).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(i) - getInnerRadius(i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
           (d) => `  ${d.properties.alias} 
            ${chartFormatOptions.plotArea.dataLabelValue ? getNumberWithFormatFunction(
             chartFormatOptions.plotArea.plotAreaDisplayUnits,
@@ -29599,9 +29622,9 @@ function requireD3Cloud() {
 var d3CloudExports = requireD3Cloud();
 const cloud = /* @__PURE__ */ getDefaultExportFromCjs(d3CloudExports);
 const fileName$2 = "WordCloud.tsx";
-const WordCloud = ({ data, formatOptions, chartId }) => {
+const WordCloud = ({ data: { ChartData }, formatOptions, chartId }) => {
   const svgRef = useRef();
-  let seriesData = generalizedChartData(data);
+  let seriesData = generalizedChartData(ChartData);
   let chartFormatOptions;
   let width;
   let height;
@@ -52167,6 +52190,8 @@ const BubbleChart = ({
       tempLegendEntries,
       "alias"
     );
+    let convertedData = convertIncomingData(data);
+    data = convertedData;
     iterateOverChartData();
     ({
       longestMeasure,
@@ -52511,6 +52536,24 @@ const BubbleChart = ({
       logError$2("BubbleChart", "initLegendList", e);
     }
   };
+  const convertIncomingData = (input) => {
+    try {
+      if (!input || !input.ChartData || !input.ChartData[0]) return [];
+      const series = input.ChartData[0];
+      return series.data.map((d) => ({
+        dimension: parseFloat(d.dimension),
+        dimensionName: series.legend ?? "Dimension",
+        measure: d.value,
+        measureName: series.legend ?? "Measure",
+        legendName: series.legend,
+        legendColor: series.properties?.color ?? "#000000",
+        tooltip: ""
+      }));
+    } catch (e) {
+      console.error("BubbleChart - Data conversion failed", e);
+      return [];
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
@@ -54019,7 +54062,7 @@ const TornadoChart = ({
     const allChartData = [];
     const legendList = [];
     let formatedDimensionList = [];
-    let firstMeasure = "";
+    let firstMeasure = seriesData[0]?.properties.currentMeasure;
     let yMaxLeft = 0;
     let yMaxRight = -Infinity;
     seriesData.forEach((series) => {
@@ -54147,7 +54190,7 @@ const TornadoChart = ({
     gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(filteredData).enter().append("g").attr("class", (d) => d.data[0].legend.replace(/ /g, "-")).selectAll("rect").data((d) => d.data.map((child) => ({
       ...child,
       parentProperties: d.properties
-    }))).enter().append("rect").attr("class", "rect").attr("y", (d) => d.dimension ? yScaleLeft(d.dimension) : yScaleLeft("defaultEntry")).attr("x", (d) => xScale(Math.min(0, d.value))).attr("stroke-dasharray", (d) => d.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => d.stackBorderWidth + "px").attr("stroke", (d) => d.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? d.stackBorderColor : "none").style("shape-rendering", "crispEdges").attr("width", (d) => d.value ? Math.abs(xScale(d.value) - xScale(0)) : 0).attr("height", yScaleLeft.bandwidth()).style("fill", (d) => d.parentProperties.color).attr("opacity", 1).on("mousemove", (event2, d) => {
+    }))).enter().append("rect").attr("class", "rect").attr("y", (d) => d.dimension ? yScaleLeft(d.dimension) : yScaleLeft("defaultEntry")).attr("x", (d) => xScale(Math.max(0, d.value))).attr("stroke-dasharray", (d) => d.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => d.stackBorderWidth + "px").attr("stroke", (d) => d.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? d.stackBorderColor : "none").style("shape-rendering", "crispEdges").attr("width", (d) => d.value ? Math.abs(xScale(d.value) - xScale(0)) : 0).attr("height", yScaleLeft.bandwidth()).style("fill", (d) => d.parentProperties.color).attr("opacity", 1).on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
         [
           { key: "Measure", value: d.legend },
@@ -54159,7 +54202,7 @@ const TornadoChart = ({
         ],
         formatOptions,
         void 0,
-        d.currentTarget.__data__.data.properties
+        d.parentProperties
       );
     }).on("mouseout", () => {
       hideTooltipOnMouseOut();

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

@@ -12050,7 +12050,7 @@
       let decimalValues = decimalPrescision;
       let formatter;
       if (displayUnits === "Auto") {
-        return getAutoNumberWithFormat(measureValue);
+        return getAutoNumberWithFormat$1(measureValue);
       } else if (displayUnits != staticDisplayUnits.none) {
         displayUnits == staticDisplayUnits.thousands ? (Unit = 1e3, displayUnitsPostFix = "K") : null;
         displayUnits == staticDisplayUnits.millions ? (Unit = 1e6, displayUnitsPostFix = "M") : null;
@@ -12099,7 +12099,7 @@
       throw error;
     }
   }
-  function getAutoNumberWithFormat(value2) {
+  function getAutoNumberWithFormat$1(value2) {
     if (value2 === null || value2 === void 0 || isNaN(value2)) return "-";
     const absValue = Math.abs(value2);
     if (absValue >= 1e9) {
@@ -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
@@ -15349,16 +15349,29 @@
   }
   function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecision) {
     try {
-      let Unit;
+      let Unit = 1;
       let displayUnitsPostFix = "";
       let decimalValues = decimalPrecision;
       let formatter;
-      return function(d) {
+      return function(value2) {
         try {
-          if (displayUnits != "None") {
-            displayUnits == "Thousands" ? (Unit = 1e3, displayUnitsPostFix = "K") : null;
-            displayUnits == "Millions" ? (Unit = 1e6, displayUnitsPostFix = "M") : null;
-            displayUnits == "Billions" ? (Unit = 1e9, displayUnitsPostFix = "B") : null;
+          let d = value2 ?? 0;
+          if (displayUnits === "Auto") {
+            return getAutoNumberWithFormat(d);
+          }
+          if (displayUnits && displayUnits !== "None") {
+            if (displayUnits === "Thousands") {
+              Unit = 1e3;
+              displayUnitsPostFix = "K";
+            }
+            if (displayUnits === "Millions") {
+              Unit = 1e6;
+              displayUnitsPostFix = "M";
+            }
+            if (displayUnits === "Billions") {
+              Unit = 1e9;
+              displayUnitsPostFix = "B";
+            }
             d = d / Unit;
           }
           switch (numberFormat) {
@@ -15369,7 +15382,7 @@
               formatter = `.${decimalValues}f`;
               return format(formatter)(d) + displayUnitsPostFix;
             case ".2n":
-              formatter = `.${decimalValues == 0 ? 1 : (parseFloat(decimalValues) + 1).toString()}n`;
+              formatter = `.${decimalValues == 0 ? 1 : parseFloat(decimalValues) + 1}n`;
               return format(formatter)(d) + displayUnitsPostFix;
             case ".2$":
               formatter = `,.${decimalValues}f`;
@@ -15404,6 +15417,14 @@
       logError$2(fileName$b, "getNumberWithFormatFunction", error);
     }
   }
+  function getAutoNumberWithFormat(value2) {
+    if (value2 === null || value2 === void 0) return "0";
+    let abs2 = Math.abs(value2);
+    if (abs2 >= 1e9) return (value2 / 1e9).toFixed(2) + "B";
+    if (abs2 >= 1e6) return (value2 / 1e6).toFixed(2) + "M";
+    if (abs2 >= 1e3) return (value2 / 1e3).toFixed(2) + "K";
+    return value2.toFixed(2);
+  }
   function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     try {
       const markerColor = prop?.markerColor ?? "blue";
@@ -15972,7 +15993,7 @@
         } else {
           properties = { ...chartProperties, ...item.properties };
         }
-        const normalizedData = dimensionList ? dimensionList.map((dim) => {
+        const normalizedData = dimensionList && dimensionList.length !== 0 ? dimensionList.map((dim) => {
           const found = item.data.find((d) => d.dimension === dim);
           if (found) {
             return { ...found };
@@ -17761,7 +17782,9 @@
         chartJSON.yMaxRight,
         isSecondaryAxisDrawn,
         isNormalizedChart,
-        isDateType
+        isDateType,
+        false,
+        chartJSON
       ));
       setSVGContainer(margin);
       ({ dataTable, dataTableHeight } = dataTablePreCalculation(
@@ -19741,7 +19764,7 @@
           }
         }
       } else {
-        customTickValue = innerHeight2 / 30;
+        customTickValue = innerHeight2 / 60;
       }
       return { yAxisLabelArray, customTickValue };
     } catch (e) {
@@ -20345,7 +20368,7 @@
               )
             );
             getXAxis();
-            drawColumnChart();
+            drawColumnHistogramChart();
           })
         );
         svg2.on("wheel", (event2) => {
@@ -20362,12 +20385,12 @@
             )
           );
           getXAxis();
-          drawColumnChart();
+          drawColumnHistogramChart();
         });
       }
-      drawColumnChart();
+      drawColumnHistogramChart();
     };
-    const drawColumnChart = () => {
+    const drawColumnHistogramChart = () => {
       initXaxis$1(
         gTag,
         chartJSON,
@@ -28216,12 +28239,12 @@
   };
   const fileName$3 = "ProgressChart.tsx";
   const ProgressChart = ({
-    data,
+    data: { ChartData },
     formatOptions,
     chartId
   }) => {
     const svgRef = require$$0$1.useRef();
-    let seriesData = generalizedChartData(data.ChartData);
+    let seriesData = generalizedChartData(ChartData);
     let chartFormatOptions;
     let width;
     let height;
@@ -28296,22 +28319,22 @@
     const initProgressChartData = () => {
       try {
         seriesData = seriesData.sort((a2, b) => b.data[0].value - a2.data[0].value);
-        totalValue = data[0].data[0].value + data[1].data[0].value;
+        totalValue = ChartData[0].data[0].value + ChartData[1].data[0].value;
       } catch (error) {
         logError$2(fileName$3, "initProgressChartData", error);
       }
     };
     const drawProgressChart = () => {
       try {
-        let maxValue = data[0].data[0].value;
-        let progressValue = data[1].data[0].value;
+        let maxValue = ChartData[0].data[0].value;
+        let progressValue = ChartData[1].data[0].value;
         let completeAngle = Math.PI * 2;
         let progressAngle = progressValue / maxValue * Math.PI * 2;
         let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
         const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius).startAngle(0).cornerRadius(
           convertStringToNumber(chartFormatOptions.plotArea.cornerRadius)
         );
-        chartAreaTagG.append("path").attr("class", "secondary-circle").attr("fill", data[0].properties.color).attr(
+        chartAreaTagG.append("path").attr("class", "secondary-circle").attr("fill", ChartData[0].properties.color).attr(
           "fill-opacity",
           chartFormatOptions.plotArea.opacityforProgressScale
         ).attr("d", arc2({ endAngle: completeAngle })).on("mousemove", (d) => {
@@ -28319,7 +28342,7 @@
             showTooltipOnMouseMove(
               [
                 {
-                  key: data[0].properties.alias,
+                  key: ChartData[0].properties.alias,
                   value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                     "None",
                     chartFormatOptions.toolTip.toolTipNumberFormatProgress,
@@ -28349,7 +28372,7 @@
             );
           }
         }).attr("transform", getTransformString());
-        chartAreaTagG.append("path").attr("class", "progress-circle").attr("fill", data[1].properties.color).attr(
+        chartAreaTagG.append("path").attr("class", "progress-circle").attr("fill", ChartData[1].properties.color).attr(
           "fill-opacity",
           chartFormatOptions.plotArea.opacityforProgressGoal
         ).attr("d", arc2({ endAngle: progressAngle })).on("mousemove", (d) => {
@@ -28357,7 +28380,7 @@
             showTooltipOnMouseMove(
               [
                 {
-                  key: data[1].properties.alias,
+                  key: ChartData[1].properties.alias,
                   value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? Math.round(progressValue / maxValue * 100) + "%" : getNumberWithFormatFunction(
                     "None",
                     chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -28365,7 +28388,7 @@
                   )(maxValue)
                 },
                 {
-                  key: data[0].properties.alias,
+                  key: ChartData[0].properties.alias,
                   value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                     "None",
                     chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -28459,12 +28482,12 @@
     ) });
   };
   const Speedometer = ({
-    data,
+    data: { ChartData },
     formatOptions,
     chartId
   }) => {
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData);
+    const seriesData = generalizedChartData(ChartData);
     let chartFormatOptions;
     let width;
     let height;
@@ -28535,7 +28558,7 @@
     }
     const initSpeedometerData = () => {
       try {
-        let firstMeasureValue = data[0].data[0].value;
+        let firstMeasureValue = ChartData[0].data[0].value;
         if (firstMeasureValue < 0) {
           gaugeMaxMeasure = 0;
           gaugeMinMeasure = firstMeasureValue;
@@ -28772,19 +28795,19 @@
                   showTooltipOnMouseMove(
                     [
                       {
-                        key: `${data[index2].data[0].legend}`,
+                        key: `${ChartData[index2].data[0].legend}`,
                         value: chartFormatOptions.plotArea.dataLabelNumberFormat == ",.0%" ? Math.round(
-                          data[index2].data[0].value / ticks2[ticks2.length - 1] * 100
+                          ChartData[index2].data[0].value / ticks2[ticks2.length - 1] * 100
                         ) + "%" : getNumberWithFormatFunction(
                           "None",
                           chartFormatOptions.toolTip.toolTipNumberFormat,
                           chartFormatOptions.toolTip.toolTipDecimalPrecision
-                        )(data[index2].data[0].value)
+                        )(ChartData[index2].data[0].value)
                       }
                     ],
                     chartFormatOptions,
                     void 0,
-                    d.currentTarget.__data__.data.properties
+                    { markerColor: "blue", markerShape: "circle" }
                   );
                 }).on("mouseout", () => {
                   hideTooltipOnMouseOut();
@@ -28918,7 +28941,7 @@
             "None",
             chartFormatOptions.pointerValue.pointerValueNumberFormat,
             chartFormatOptions.pointerValue.pointerValueDecimalPrecision
-          )(data[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
+          )(ChartData[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
         ).attr(
           "visibility",
           chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
@@ -28941,12 +28964,12 @@
     console.error(`[${fileName2}][${functionName}]`, error);
   }
   const RadialBarChart = ({
-    data,
+    data: { ChartData },
     formatOptions,
     chartId
   }) => {
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData);
+    const seriesData = generalizedChartData(ChartData);
     let chartFormatOptions;
     let width;
     let height;
@@ -29049,7 +29072,7 @@
             logError("RadialBarChart.tsx", "getOuterRadius", error);
           }
         };
-        let scaleMaxValue = seriesData.length > 1 ? max$2(seriesData, (d) => d.data[0].value) * 1.1 : data[0].data[0].value * 1.1;
+        let scaleMaxValue = seriesData.length > 1 ? max$2(seriesData, (d) => d.data[0].value) * 1.1 : ChartData[0].data[0].value * 1.1;
         let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
         let maxDim = getNumberWithFormatFunction(
           chartFormatOptions.plotArea.plotAreaDisplayUnits,
@@ -29085,7 +29108,7 @@
         const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs;
         let arc2 = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle((d) => scale2(Math.abs(d.data[0].value)));
         let dummyArc = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle(degToRad(360));
-        let radialAxis = svg2.append("g").attr("class", "r axis").selectAll("g").data(data).enter().append("g");
+        let radialAxis = svg2.append("g").attr("class", "r axis").selectAll("g").data(ChartData).enter().append("g");
         if (chartFormatOptions.plotArea.axialGrid) {
           radialAxis.append("circle").attr("r", (d, i) => getOuterRadius(i) + arcPadding).attr("stroke", "#d3d3d3").attr("stroke-width", 1).attr("fill", "none");
         }
@@ -29133,7 +29156,7 @@
           "visibility",
           chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden"
         );
-        let arcs = svg2.attr("class", "data").selectAll("path").data(data).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
+        let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
           showTooltipOnMouseMove(
             [
               {
@@ -29161,7 +29184,7 @@
           (d, i) => chartFormatOptions.plotArea.arcTransition ? i * 200 : 0
         ).duration(chartFormatOptions.plotArea.arcTransition ? 500 : 0).attrTween("d", arcTween);
         if (chartFormatOptions.plotArea.dataLabels) {
-          svg2.selectAll(".arc-label-" + chartId).data(data).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(i) - getInnerRadius(i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
+          svg2.selectAll(".arc-label-" + chartId).data(ChartData).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(i) - getInnerRadius(i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
             (d) => `  ${d.properties.alias} 
            ${chartFormatOptions.plotArea.dataLabelValue ? getNumberWithFormatFunction(
               chartFormatOptions.plotArea.plotAreaDisplayUnits,
@@ -29602,9 +29625,9 @@
   var d3CloudExports = requireD3Cloud();
   const cloud = /* @__PURE__ */ getDefaultExportFromCjs(d3CloudExports);
   const fileName$2 = "WordCloud.tsx";
-  const WordCloud = ({ data, formatOptions, chartId }) => {
+  const WordCloud = ({ data: { ChartData }, formatOptions, chartId }) => {
     const svgRef = require$$0$1.useRef();
-    let seriesData = generalizedChartData(data);
+    let seriesData = generalizedChartData(ChartData);
     let chartFormatOptions;
     let width;
     let height;
@@ -52170,6 +52193,8 @@
         tempLegendEntries,
         "alias"
       );
+      let convertedData = convertIncomingData(data);
+      data = convertedData;
       iterateOverChartData();
       ({
         longestMeasure,
@@ -52514,6 +52539,24 @@
         logError$2("BubbleChart", "initLegendList", e);
       }
     };
+    const convertIncomingData = (input) => {
+      try {
+        if (!input || !input.ChartData || !input.ChartData[0]) return [];
+        const series = input.ChartData[0];
+        return series.data.map((d) => ({
+          dimension: parseFloat(d.dimension),
+          dimensionName: series.legend ?? "Dimension",
+          measure: d.value,
+          measureName: series.legend ?? "Measure",
+          legendName: series.legend,
+          legendColor: series.properties?.color ?? "#000000",
+          tooltip: ""
+        }));
+      } catch (e) {
+        console.error("BubbleChart - Data conversion failed", e);
+        return [];
+      }
+    };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
       {
@@ -54022,7 +54065,7 @@
       const allChartData = [];
       const legendList = [];
       let formatedDimensionList = [];
-      let firstMeasure = "";
+      let firstMeasure = seriesData[0]?.properties.currentMeasure;
       let yMaxLeft = 0;
       let yMaxRight = -Infinity;
       seriesData.forEach((series) => {
@@ -54150,7 +54193,7 @@
       gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(filteredData).enter().append("g").attr("class", (d) => d.data[0].legend.replace(/ /g, "-")).selectAll("rect").data((d) => d.data.map((child) => ({
         ...child,
         parentProperties: d.properties
-      }))).enter().append("rect").attr("class", "rect").attr("y", (d) => d.dimension ? yScaleLeft(d.dimension) : yScaleLeft("defaultEntry")).attr("x", (d) => xScale(Math.min(0, d.value))).attr("stroke-dasharray", (d) => d.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => d.stackBorderWidth + "px").attr("stroke", (d) => d.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? d.stackBorderColor : "none").style("shape-rendering", "crispEdges").attr("width", (d) => d.value ? Math.abs(xScale(d.value) - xScale(0)) : 0).attr("height", yScaleLeft.bandwidth()).style("fill", (d) => d.parentProperties.color).attr("opacity", 1).on("mousemove", (event2, d) => {
+      }))).enter().append("rect").attr("class", "rect").attr("y", (d) => d.dimension ? yScaleLeft(d.dimension) : yScaleLeft("defaultEntry")).attr("x", (d) => xScale(Math.max(0, d.value))).attr("stroke-dasharray", (d) => d.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => d.stackBorderWidth + "px").attr("stroke", (d) => d.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? d.stackBorderColor : "none").style("shape-rendering", "crispEdges").attr("width", (d) => d.value ? Math.abs(xScale(d.value) - xScale(0)) : 0).attr("height", yScaleLeft.bandwidth()).style("fill", (d) => d.parentProperties.color).attr("opacity", 1).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             { key: "Measure", value: d.legend },
@@ -54162,7 +54205,7 @@
           ],
           formatOptions,
           void 0,
-          d.currentTarget.__data__.data.properties
+          d.parentProperties
         );
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();

package/package.json

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