pace-chart-lib 1.0.14 → 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) {
@@ -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();