pace-chart-lib 1.0.14 → 1.0.15

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) {
@@ -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.14",
+  "version": "1.0.15",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS",
   "license": "MIT",
   "type": "module",

package/dist/Components/Charts/ChartsWithAxis/AreaFamily/AreaChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const AreaChart: React.FC<TChartProps>;
-export default AreaChart;

package/dist/Components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const NormalizedStackAreaChart: React.FC<TChartProps>;
-export default NormalizedStackAreaChart;

package/dist/Components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const StackAreaChart: React.FC<TChartProps>;
-export default StackAreaChart;