pace-chart-lib 0.0.12 → 1.0.1

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/StackColumnChart.js

@@ -4,20 +4,19 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const StackColumnChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackColumn;
     const svgRef = useRef();
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
     const isSecondaryAxisDrawn = false;
     let isPrimaryAxisDrawn = true;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -107,7 +106,7 @@ const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpti
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -177,13 +176,11 @@ const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpti
         }
         chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = yMaxLeft;
-        let xAxisObject = xAxisObj[0];
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-            xAxisObject.dataType === "DATE"
+        let formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
         });
         if (formatOptions.plotArea.hideZeroValues) {
             chartJSON.hideZeroValues = true;
@@ -494,7 +491,7 @@ const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpti
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalBarChart.js

@@ -8,8 +8,9 @@ import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOn
 import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxisBar, initXaxisTop, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
 import { staticLegendShape } from "../../Core/Common.types";
-const HorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const HorizontalBarChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chartO
     const chartType = actualChartTypes.horizontalBar;
     const svgRef = useRef();
@@ -102,7 +103,7 @@ const HorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0], barChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType, barChart));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -114,7 +115,7 @@ const HorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
         initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
         initScale();
         initAxis();
-        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, xAxisTop, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, xAxisObj[0], width, dimensionHeightWidthArray, columnWidth);
+        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, xAxisTop, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth);
         if (isSecondaryAxisDrawn) {
             initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop);
         }
@@ -134,7 +135,7 @@ const HorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -161,14 +162,11 @@ const HorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {

package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalHistogramChart.js

@@ -4,12 +4,13 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxisBar, initXaxisTop, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
+import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxisBar, initXaxisTop, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const HorizontalHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const HorizontalHistogramChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chartO
     const chartType = actualChartTypes.horizontalBar;
     const svgRef = useRef();
@@ -102,7 +103,7 @@ const HorizontalHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0], barChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType, barChart));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -114,7 +115,7 @@ const HorizontalHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
         initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
         initScale();
         initAxis();
-        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, xAxisTop, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, xAxisObj[0], width, dimensionHeightWidthArray, columnWidth);
+        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, xAxisTop, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth);
         if (isSecondaryAxisDrawn) {
             initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop);
         }
@@ -134,7 +135,7 @@ const HorizontalHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -161,14 +162,11 @@ const HorizontalHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {

package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/LayeredHorizontalBarChart.js

@@ -4,12 +4,13 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, } from "../ChartsWithAxisFunctions";
+import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const LayeredHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const LayeredHorizontalBarChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chart
     const chartType = actualChartTypes.layeredBarChart;
     const svgRef = useRef();
@@ -104,7 +105,7 @@ const LayeredHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, f
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0], barChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType, barChart));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -117,7 +118,7 @@ const LayeredHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, f
         initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
         initScale();
         initAxis();
-        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, undefined, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, xAxisObj[0], width, dimensionHeightWidthArray, columnWidth);
+        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, undefined, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth);
         horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
         if (formatOptions.dataTableProperties &&
             formatOptions.dataTableProperties.dataTable) {
@@ -134,7 +135,7 @@ const LayeredHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, f
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -154,14 +155,11 @@ const LayeredHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, f
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {

package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/NormalizedStackHorizontalBarChart.js

@@ -8,8 +8,9 @@ import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const NormalizedStackHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const NormalizedStackHorizontalBarChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackBar100;
     const svgRef = useRef();
@@ -101,7 +102,7 @@ const NormalizedStackHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, ch
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0], barChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType, barChart));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -114,7 +115,7 @@ const NormalizedStackHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, ch
         initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
         initScale();
         initAxis();
-        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, undefined, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, xAxisObj[0], width, dimensionHeightWidthArray, columnWidth);
+        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, undefined, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth);
         horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
         if (formatOptions.dataTableProperties &&
             formatOptions.dataTableProperties.dataTable) {
@@ -168,13 +169,11 @@ const NormalizedStackHorizontalBarChart = ({ title, data, yAxisObj, xAxisObj, ch
         }
         chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = 1;
-        let xAxisObject = xAxisObj[0];
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-            xAxisObject.dataType === "DATE"
+        let formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
         });
         if (formatOptions.plotArea.hideZeroValues) {
             chartJSON.hideZeroValues = true;

package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/StackHorizontalBarChart.js

@@ -8,7 +8,7 @@ import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOn
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
 import { staticLegendShape } from "../../Core/Common.types";
-const StackHorizontalChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const StackHorizontalChart = ({ isDateType, formatOptions, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
     // adding variables as per requirement
     let columnWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackBar;
@@ -171,12 +171,12 @@ const StackHorizontalChart = ({ title, data, yAxisObj, xAxisObj, chartId, format
         chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = yMaxLeft;
         let xAxisObject = xAxisObj[0];
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
+        let formatedDimensionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
             xAxisObject.dataType === "DATE"
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
         });
         if (formatOptions.plotArea.hideZeroValues) {
             chartJSON.hideZeroValues = true;

package/dist/components/Charts/ChartsWithAxis/LineFamily/LineChart.js

@@ -8,8 +8,9 @@ import { staticLegendShape, staticLineStyle, } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, lineMarkers } from "../../Core/CommonFunctions";
 import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getCurveType, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, initYaxisRight, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const LineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const LineChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const barWidth = 0; // coz line chart
     const chartType = actualChartTypes.line;
     const svgRef = useRef();
@@ -101,7 +102,7 @@ const LineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -133,7 +134,7 @@ const LineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -160,14 +161,11 @@ const LineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {
@@ -438,7 +436,7 @@ const LineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         commonAnnotations(seriesData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

package/dist/components/Charts/ChartsWithAxis/LineFamily/NormalizedStackLineChart.js

@@ -4,20 +4,19 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, lineMarkers } from "../../Core/CommonFunctions";
 import { addDataTable, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getCurveType, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const NormalisedStackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const NormalisedStackLineChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const barWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackLine100;
     const svgRef = useRef();
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
     const isSecondaryAxisDrawn = false;
     let isPrimaryAxisDrawn = true;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -113,7 +112,7 @@ const NormalisedStackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -198,13 +197,11 @@ const NormalisedStackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
         chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = 1; // as per your original override
         // Format dimensions
-        const xAxisObject = xAxisObj[0];
-        const formatedDimesionList = (xAxisObject.groupBy === "NA" || xAxisObject.groupBy === undefined) &&
-            xAxisObject.dataType === "DATE"
+        const formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         // Assign formatted dimension list map (cleanest one-liner)
-        chartJSON.formattedDimensionListMap = new Map(chartJSON.dimensionList.map((d, i) => [d, formatedDimesionList[i]]));
+        chartJSON.formattedDimensionListMap = new Map(chartJSON.dimensionList.map((d, i) => [d, formatedDimensionList[i]]));
         // let secondaryAxisMinValue = 0;
         // let secondaryAxisMaxValue = 0;
         // if (isSecondaryAxisDrawn) {
@@ -474,7 +471,7 @@ const NormalisedStackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

package/dist/components/Charts/ChartsWithAxis/LineFamily/StackLineChart.js

@@ -4,20 +4,19 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, lineMarkers } from "../../Core/CommonFunctions";
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getCurveType, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const StackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const StackLineChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const barWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackLine;
     const svgRef = useRef();
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
     const isSecondaryAxisDrawn = false;
     let isPrimaryAxisDrawn = true;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -107,7 +106,7 @@ const StackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -186,13 +185,11 @@ const StackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
         }
         chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = yMaxLeft;
-        let xAxisObject = xAxisObj[0];
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-            xAxisObject.dataType === "DATE"
+        let formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
         });
         if (formatOptions.plotArea.hideZeroValues) {
             chartJSON.hideZeroValues = true;
@@ -470,7 +467,7 @@ const StackLineChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

package/dist/components/Charts/ChartsWithAxis/MiscellaneousChartFamily/TornadoChart.js

@@ -8,8 +8,9 @@ import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove } from "../../Core/CommonFunctions";
 import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const TornadoChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const TornadoChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chartO
     const chartType = actualChartTypes.tornadoChart;
     const svgRef = useRef();
@@ -102,7 +103,7 @@ const TornadoChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -114,7 +115,7 @@ const TornadoChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
         initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
         initScale();
         initAxis();
-        initYaxisBar(formatOptions, gTag, yLabel, innerHeight, innerWidth, yAxisLeft, yAxisRight, xScale, chartJSON.yMaxLeft, chartJSON.dimensionList, chartType, xAxisObj[0], width, dimensionHeightWidthArray, columnWidth);
+        initYaxisBar(formatOptions, gTag, yLabel, innerHeight, innerWidth, yAxisLeft, yAxisRight, xScale, chartJSON.yMaxLeft, chartJSON.dimensionList, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth);
         horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
         if (formatOptions.dataTableProperties &&
             formatOptions.dataTableProperties.dataTable) {
@@ -131,8 +132,8 @@ const TornadoChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
-        let firstMeasure = yAxisObj[0].name.actualName;
+        let formatedDimensionList = [];
+        let firstMeasure = "";
         let yMaxLeft = 0;
         // let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -160,14 +161,11 @@ const TornadoChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
         chartJSON.yMaxRight = yMaxRight;
         // chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {