pace-chart-lib 1.0.68 → 1.0.70

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

@@ -11332,7 +11332,8 @@
       totalHideZeroValues: true,
       totalDisplayUnits: "None",
       editTotalTextToggle: false,
-      editTotalText: "Total"
+      editTotalText: "Total",
+      showTotalLabel: true
     },
     toolTip: {
       toolTipVisibility: true,
@@ -13597,7 +13598,15 @@
           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;
@@ -14253,38 +14262,49 @@
       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) {
     }
@@ -14327,7 +14347,7 @@
           ).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,
@@ -14390,7 +14410,7 @@
         ).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;
@@ -17606,7 +17626,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -18192,7 +18213,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -19315,7 +19337,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -19871,7 +19894,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -20610,7 +20634,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -22453,7 +22478,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -23027,7 +23053,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -23606,7 +23633,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -27124,7 +27152,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -27719,7 +27748,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -28317,7 +28347,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -28846,7 +28877,9 @@
           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(
@@ -29751,7 +29784,8 @@
         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(
@@ -29766,7 +29800,7 @@
           ).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(
@@ -29776,6 +29810,9 @@
               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);
@@ -31427,7 +31464,17 @@
                     )(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) {
@@ -56492,7 +56539,7 @@
           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,
@@ -56504,10 +56551,12 @@
               (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();
           }
         }
@@ -56830,14 +56879,6 @@
         chartJSON
       ));
       setSVGContainer(margin);
-      ({ dataTable, dataTableHeight } = dataTablePreCalculation(
-        // calculations for data tables
-        formatOptions,
-        yLabel,
-        yTitle,
-        seriesData,
-        chartJSON.dimensionList
-      ));
       initSvg$1(
         // for svg creation
         svg,
@@ -57123,7 +57164,7 @@
           customYaxisMaxValue,
           barChart,
           innerWidth2
-        ).customTickValue ?? (dataTableHeight > 0 ? (innerWidth2 - dataTableHeight) / 30 : innerWidth2 / 30)
+        ).customTickValue ?? innerWidth2 / 30
       ).tickPadding(8).tickSizeOuter(0);
     };
     const getChartType = () => {

package/package.json

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