pace-chart-lib 1.0.68 → 1.0.70

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import "./Components/Charts/Core/ChartStyles.scss";
+export { default as ColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/ColumnChart";
+export { default as CustomColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/CustomColumnChart";
+export { default as LayeredColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/LayeredColumnChart";
+export { default as StackColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/StackColumnChart";
+export { default as NormalizedStackColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/NormalizedStackColumnChart";
+export { default as ColumnHistogramChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/ColumnHistogramChart";
+export { default as LineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/LineChart";
+export { default as StackLineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/StackLineChart";
+export { default as NormalizedStackLineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/NormalizedStackLineChart";
+export { default as HorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalBarChart";
+export { default as StackHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/StackHorizontalBarChart";
+export { default as NormalizedStackHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/NormalizedStackHorizontalBarChart";
+export { default as LayeredHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/LayeredHorizontalBarChart";
+export { default as HorizontalHistogramChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalHistogramChart";
+export { default as AreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/AreaChart";
+export { default as StackAreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart";
+export { default as NormalizedStackAreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart";
+export { default as PieChart } from "./Components/Charts/ChartsWithoutAxis/PieFamily/PieChart";
+export { default as DonutChart } from "./Components/Charts/ChartsWithoutAxis/PieFamily/DonutChart";
+export { default as Treemap } from "./Components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart";
+export { default as PieofPie } from "./Components/Charts/ChartsWithoutAxis/PieFamily/PieofPieChart";
+export { default as PyramidChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/PyramidChart";
+export { default as ProgressChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/ProgressChart";
+export { default as Speedometer } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/Speedometer";
+export { default as RadialBarChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/RadialBarChart";
+export { default as WordCloud } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/WordCloud";
+export { default as VennChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/VennChart";
+export { default as SankeyChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/SankeyChart";
+export { default as Maps } from "./Components/Charts/ChartsWithoutAxis/Maps/Maps";
+export { default as OrganizationChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/OrganizationChart";
+export { default as BubbleChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/BubbleChart";
+export { default as ScatterChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/ScatterChart";
+export { default as WaterfallChart } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/WaterfallChart";
+export { default as TornadoChart } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/TornadoChart";
+export { default as DotPlot } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/DotPlot";
+export { CJSColumnChart, CJSStackColumnChart, CJSHorizontalBarChart, CJSStackHorizontalBarChart, CJSLineChart, CJSStackLineChart, CJSAreaChart, CJSStackAreaChart, CJSPieChart, CJSDonutChart, CJSScatterChart, CJSBubbleChart, CJSRadarChart, CJSPolarAreaChart, CJSNormalizedStackColumnChart, CJSNormalizedStackHorizontalBarChart, CJSNormalizedStackLineChart, CJSNormalizedStackAreaChart, ChartJSWrapper, transformToChartJSData, transformToNormalizedChartJSData, mapFormatOptionsToChartJS, hexToRgba, CJS_DEFAULT_COLORS, } from "./Components/Charts/ChartJS/index";

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

@@ -11329,7 +11329,8 @@ const defaultChartFormatOptions = {
     totalHideZeroValues: true,
     totalDisplayUnits: "None",
     editTotalTextToggle: false,
-    editTotalText: "Total"
+    editTotalText: "Total",
+    showTotalLabel: true
   },
   toolTip: {
     toolTipVisibility: true,
@@ -13594,7 +13595,15 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
         const ease = effectsMap[formatOptions.animation.animationEffect];
         const accessors = makeAnnotations.accessors();
         const isLineChartType = chartType === chartTypes.LineChart;
-        if (isLineChartType) {
+        const isDotPlot = chartType === chartTypes.DotPlot;
+        const toTranslate = (d, dx = 0) => {
+          const x2 = accessors.x(d.data);
+          const y2 = accessors.y(d.data);
+          return `translate(${x2 + dx}, ${y2})`;
+        };
+        if (isDotPlot) {
+          annotations.selectAll(".annotation").attr("opacity", 0).attr("transform", (d) => toTranslate(d, -15)).transition().duration(duration).ease(ease).attr("opacity", 1).attr("transform", (d) => toTranslate(d));
+        } else if (isLineChartType) {
           const xRange = xScale.range ? xScale.range() : [0, 1];
           const xRangeMin = Math.min(xRange[0], xRange[1]);
           const xRangeSpan = Math.max(xRange[0], xRange[1]) - xRangeMin;
@@ -14250,38 +14259,49 @@ const dataLabelsPosition = (yCordinate, position, yScale, minValue, prevValue, c
     throw e;
   }
 };
-const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dimensionList) => {
+const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dimensionList, data) => {
   try {
+    const extraDataTableFields = data?.DataTableData ?? [];
     let dataTable = [];
     let dataTableHeight = 20;
     if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
+      const dataTableData = [...seriesData, ...extraDataTableFields];
       formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-      let exactAvailableWidth = yLabel + yTitle;
-      seriesData.forEach((data, i) => {
-        let tempObj = {
-          data: data.data.filter(
-            (data2) => dimensionList.includes(data2.dimension)
-          ),
-          properties: {
-            legend: data.properties.alias,
-            color: data.properties.color,
-            markerColor: data.properties.markerColor,
-            markerShape: data.properties.markerShape,
-            lineStyle: data.properties.lineStyle,
-            height: calculateDataTableObjectHeight(
-              data.properties.alias.includes("~$~") ? data.properties.alias.split("~$~")[1] : data.properties.alias,
-              exactAvailableWidth,
-              formatOptions
-            )
-          }
-        };
-        dataTableHeight += tempObj.properties.height;
-        dataTable.push(tempObj);
+      const isLegendIconVisible = formatOptions.dataTableProperties.disableLegendIcon ? false : true;
+      const widthToSubtract = isLegendIconVisible ? 35 : 0;
+      let exactAvailableWidth = yLabel + yTitle - widthToSubtract;
+      dataTableData.forEach((data2, i) => {
+        if (data2?.properties?.showInDataTable ?? true) {
+          let tempObj = {
+            data: data2.data.filter(
+              (data3) => dimensionList.includes(data3.dimension)
+            ),
+            properties: {
+              legend: data2.properties.alias,
+              color: data2.properties.color,
+              markerColor: data2.properties.markerColor,
+              markerShape: data2.properties.markerShape,
+              lineStyle: data2.properties.lineStyle,
+              height: calculateDataTableObjectHeight(
+                data2.properties.alias.includes("~$~") ? data2.properties.alias.split("~$~")[1] : data2.properties.alias,
+                exactAvailableWidth,
+                formatOptions
+              )
+            }
+          };
+          dataTableHeight += tempObj.properties.height;
+          dataTable.push(tempObj);
+        }
       });
     } else {
       dataTableHeight = 0;
       dataTable = [];
     }
+    if (dataTable.length == 0) {
+      dataTableHeight = 0;
+      dataTable = [];
+      formatOptions.dataTableProperties.dataTable = false;
+    }
     return { dataTable, dataTableHeight };
   } catch (e) {
   }
@@ -14324,7 +14344,7 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
         ).style("text-align", "center").style("vertical-align", "middle").text("");
       }
       let legendsParentTag = temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY + yCordinate).attr("width", margin.left).attr("height", cellHeight2);
-      let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
+      let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "center").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "wrap").style("flex-direction", "row").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
         "border-width",
         getBorderStyle(
           formatOptions,
@@ -14387,7 +14407,7 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
       ).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
         "text-decoration",
         fontStyle.includes("Underline") ? "Underline" : ""
-      ).style("padding-left", `5px`).style("white-space", "normal").style("overflow-wrap", "break-word").style("color", "black").style("width", "100%").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", text).text(text);
+      ).style("padding-left", `5px`).style("white-space", "normal").style("overflow-wrap", "break-word").style("color", "black").style("width", formatOptions.dataTableProperties.disableLegendIcon ? "100%" : "calc(100% - 30px)").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", text).text(text);
     };
     let innerVerticalBorderLineWidth = formatOptions.dataTableInnerBorder.verticalBorderLineWidth;
     let innerHorizontalBorderLineWidth = formatOptions.dataTableInnerBorder.horizontalBorderLineWidth;
@@ -17603,7 +17623,8 @@ const ColumnChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -18189,7 +18210,8 @@ const CustomColumnChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -19312,7 +19334,8 @@ const LayeredColumnChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -19868,7 +19891,8 @@ const StackColumnChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -20607,7 +20631,8 @@ const NormalizedStackColumnChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -22450,7 +22475,8 @@ const LineChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -23024,7 +23050,8 @@ const StackLineChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -23603,7 +23630,8 @@ const NormalisedStackLineChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -27121,7 +27149,8 @@ const AreaChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -27716,7 +27745,8 @@ const StackAreaChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -28314,7 +28344,8 @@ const NormalizedStackAreaChart = ({
       yLabel,
       yTitle,
       seriesData,
-      chartJSON.dimensionList
+      chartJSON.dimensionList,
+      data
     ));
     initSvg$1(
       // for svg creation
@@ -28843,7 +28874,9 @@ const drawTotalValue = (chartFormatOptions, totalValue, chartTitleHeight, chartA
         chartFormatOptions.total.totalDecimalPrecision
       )(totalValue);
       let cords = getTotalValueCords(chartFormatOptions, chartTitleHeight, innerWidth2, innerHeight2);
-      chartAreaTagG.append("g").attr("transform", `translate(${cords.x}, ${cords.y})`).style("user-select", "none").append("text").text(`${chartFormatOptions.total.editTotalTextToggle ? chartFormatOptions.total.editTotalText : "Total"} : ${formatedTotalValue}`).style(
+      chartAreaTagG.append("g").attr("transform", `translate(${cords.x}, ${cords.y})`).style("user-select", "none").append("text").text(
+        chartFormatOptions.total.showTotalLabel !== false ? `${chartFormatOptions.total.editTotalTextToggle ? chartFormatOptions.total.editTotalText : "Total"} : ${formatedTotalValue}` : formatedTotalValue
+      ).style(
         "fill",
         chartFormatOptions.total.totalColor !== commonColors.white ? chartFormatOptions.total.totalColor : "none"
       ).style("font-family", chartFormatOptions.total.totalFontFamily).style("font-size", chartFormatOptions.total.totalFontSize).style("font-style", fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "").style(
@@ -29748,7 +29781,8 @@ const DonutChart = ({
       if (chartFormatOptions.total && chartFormatOptions.total.totalVisibility) {
         let total = pieTotalValue;
         let fontStyle = chartFormatOptions.total.totalFontStyle;
-        chartAreaTagG.append("g").attr("transform", getPiePosition()).attr("pointer-events", "none").attr("text-anchor", "middle").append("text").style(
+        const totalGroup = chartAreaTagG.append("g").attr("transform", getPiePosition()).attr("pointer-events", "none").attr("text-anchor", "middle");
+        totalGroup.append("text").style(
           "fill",
           chartFormatOptions.total.totalColor !== commonColors.white ? chartFormatOptions.total.totalColor : "none"
         ).style("font-family", chartFormatOptions.total.totalFontFamily).style("font-size", chartFormatOptions.total.totalFontSize).style(
@@ -29763,7 +29797,7 @@ const DonutChart = ({
         ).attr("text-anchor", "middle").attr(
           "visibility",
           chartFormatOptions.plotArea.dataLabelValue ? "visible" : "hidden"
-        ).text(chartFormatOptions.total.editTotalText).append("tspan").attr("x", 0).attr("y", "1.3em").attr(
+        ).text(chartFormatOptions.total.showTotalLabel !== false ? chartFormatOptions.total.editTotalText : "").append("tspan").attr("x", 0).attr("y", chartFormatOptions.total.showTotalLabel !== false ? "1.3em" : "0").attr(
           "font-weight",
           fontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : 300
         ).text(
@@ -29773,6 +29807,9 @@ const DonutChart = ({
             chartFormatOptions.total.totalDecimalPrecision
           )(total)
         );
+        if (chartFormatOptions.animation.animationEnabled) {
+          totalGroup.attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+        }
       }
     } catch (error) {
       logError$2(fileName$7, "drawTotalValue", error);
@@ -31424,7 +31461,17 @@ const Speedometer = ({
                   )(d)
                 ).attr("visibility", (d) => d === "" ? "hidden" : "visible");
                 if (chartFormatOptions.animation.animationEnabled) {
-                  lg.selectAll("text").attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+                  const duration = chartFormatOptions.animation.animationDuration;
+                  const ease = effectsMap[chartFormatOptions.animation.animationEffect];
+                  lg.selectAll("text").attr("opacity", 0).attr("transform", function(d, i) {
+                    const factor = range2 / config.majorTicks * i;
+                    const tickAngle = config.minAngle + factor;
+                    return `rotate(${tickAngle}) translate(0, ${config.labelInset - radius + 20})`;
+                  }).transition().duration(duration).ease(ease).attr("opacity", 1).attr("transform", function(d, i) {
+                    const factor = range2 / config.majorTicks * i;
+                    const tickAngle = config.minAngle + factor;
+                    return `rotate(${tickAngle}) translate(0, ${config.labelInset - radius})`;
+                  });
                 }
               }
               if (chartFormatOptions.pointerValue.showPointerValue && seriesData.length === 2) {
@@ -56489,7 +56536,7 @@ const WaterfallChart = ({
         rects = rectsEnter.merge(rects);
         if (formatOptions.plotArea.plotAreaDataLabel == "2" && k2 != 1) {
           const textGroups = barGroups.selectAll("text").data((d) => d);
-          textGroups.enter().append("text").text(
+          const textEnter = textGroups.enter().append("text").text(
             (d) => getNumberWithFormat(
               d[1] - d[0],
               formatOptions.plotArea.plotAreaDisplayUnits,
@@ -56501,10 +56548,12 @@ const WaterfallChart = ({
             (d) => xScale(
               !isAdvancedWaterfall ? d.data.dimension || d.data.legend : d.data.xKey
             ) + xScale.bandwidth() / 2
-          ).attr("y", (d) => d[1] ? yScaleLeft(d[1]) - 15 : 0).style("font-size", "11px").attr("text-anchor", "middle").attr(
+          ).attr("y", yScaleLeft(0) ?? 0).style("font-size", "11px").attr("text-anchor", "middle").attr(
             "visibility",
             (d) => d[1] - d[0] !== 0 && yScaleLeft(d[1]) ? "visible" : "hidden"
           );
+          const finalTexts = shouldAnimate ? textEnter.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : textEnter;
+          finalTexts.attr("y", (d) => d[1] ? yScaleLeft(d[1]) - 15 : 0);
           textGroups.exit().remove();
         }
       }
@@ -56827,14 +56876,6 @@ const TornadoChart = ({
       chartJSON
     ));
     setSVGContainer(margin);
-    ({ dataTable, dataTableHeight } = dataTablePreCalculation(
-      // calculations for data tables
-      formatOptions,
-      yLabel,
-      yTitle,
-      seriesData,
-      chartJSON.dimensionList
-    ));
     initSvg$1(
       // for svg creation
       svg,
@@ -57120,7 +57161,7 @@ const TornadoChart = ({
         customYaxisMaxValue,
         barChart,
         innerWidth2
-      ).customTickValue ?? (dataTableHeight > 0 ? (innerWidth2 - dataTableHeight) / 30 : innerWidth2 / 30)
+      ).customTickValue ?? innerWidth2 / 30
     ).tickPadding(8).tickSizeOuter(0);
   };
   const getChartType = () => {