pace-chart-lib 1.0.1 → 1.0.3

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

@@ -1,606 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region Imports
-import * as d3 from "d3";
-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, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
-import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const WaterfallChart = ({ isDateType, formatOptions, data, }) => {
-    // adding variables as per requirement
-    const chartId = crypto.randomUUID?.();
-    let columnWidth = 0; // coz line chartO
-    let colorScale;
-    const chartType = actualChartTypes.waterfall;
-    const svgRef = useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
-    const dimensionList = data.DimensionList;
-    const barChart = false;
-    const isSecondaryAxisDrawn = false;
-    const isNormalizedChart = false;
-    let isPrimaryAxisDrawn = true;
-    let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
-    let customYaxisMaxValue = parseFloat(formatOptions.yAxisLabel.yAxisMaxText);
-    let secondaryCustomYaxisMinValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMinText);
-    let secondaryCustomYaxisMaxValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText);
-    let margin;
-    let yLabel;
-    let xLabel;
-    let yTitle;
-    let xTitle;
-    let dimensionHeightWidthArray;
-    let chartTitleHeight;
-    let secondaryAxisTitleWidth;
-    let legendMargin;
-    let secondaryYLabel;
-    let maxNumberForPrimaryAxis;
-    let maxNumberForSecondaryAxis;
-    let innerWidth;
-    let innerHeight;
-    let width;
-    let height;
-    let dataTable;
-    let dataTableHeight;
-    let svg;
-    let gTag;
-    let yScaleLeft;
-    let yScaleRight;
-    let xScale;
-    let xScaleForLegends;
-    let seriesLabels;
-    let calculatedRange;
-    let seriesLabelWidth;
-    let yAxisLeft;
-    let xAxis;
-    let yAxisRight;
-    let filteredDimension;
-    let filteredData = [];
-    let waterFallData = [];
-    let stackTotalData;
-    let scrollPosition = 0;
-    const visibleBars = 2;
-    let chartJSON = {
-        dimensionList: dimensionList,
-        chartType: chartType,
-        chartData: [],
-        formatOptions: formatOptions,
-        legendList: [],
-        secondaryAxisDrawn: false,
-        yMaxLeft: 0,
-        yMaxRight: 0,
-        yMinLeft: 0,
-        yMinRight: 0,
-        hideZeroValues: false,
-        formattedDimensionListMap: new Map(),
-    };
-    //#region UseEffect
-    useEffect(() => {
-        try {
-            createWaterfallChart();
-        }
-        catch (error) {
-            logError("WaterfallChart", "createWaterfallChart", error);
-        }
-    }, [formatOptions]);
-    //#endregion
-    const createWaterfallChart = () => {
-        ({ formatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        preProcessChartData(); // preaparing data related to chart creation
-        // Applies custom Y-axis label formatting and calculates the necessary margin based on axis extremes.
-        ({ maxNumberForPrimaryAxis, maxNumberForSecondaryAxis } = customYscaleLabelFormatting(
-        // for calculating primary/secondary axis max number so that we can calculate margin accordinglt
-        formatOptions, chartJSON.yMinLeft, chartJSON.yMaxLeft, chartJSON.yMinRight, chartJSON.yMaxRight));
-        ({
-            margin,
-            yLabel,
-            xLabel,
-            yTitle,
-            xTitle,
-            dimensionHeightWidthArray,
-            chartTitleHeight,
-            secondaryAxisTitleWidth,
-            legendMargin,
-            secondaryYLabel,
-        } = marginCalculation(
-        // for all margin related calculations
-        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
-        formatOptions, yLabel, yTitle, seriesData, chartJSON.dimensionList));
-        initSvg(
-        // for svg creation
-        svg, width, height, formatOptions);
-        gTag = initChartArea(svg, margin); // creating chart area
-        initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
-        initScale();
-        initAxis();
-        initYaxis(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight);
-        // initYaxisRight(
-        //     gTag,
-        //     formatOptions,
-        //     dataTableHeight,
-        //     secondaryYLabel,
-        //     yAxisRight,
-        //     innerHeight,
-        //     innerWidth
-        // );
-        horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
-        if (formatOptions.dataTableProperties &&
-            formatOptions.dataTableProperties.dataTable) {
-            if (formatOptions.xAxisLabel.xAxisPosition != "1")
-                formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-            addDataTable(formatOptions.plotArea.fitChart, svg, gTag, dataTable, columnWidth, yScaleLeft, xScale, xScaleForLegends, undefined, undefined, dataTableHeight, chartType, formatOptions, yLabel, yTitle, chartJSON.dimensionList, innerWidth, calculatedRange, chartJSON.formattedDimensionListMap, chartId, margin, innerHeight);
-        }
-        setXaxistitle(formatOptions, barChart, svg, margin, xLabel, height, xTitle, chartJSON.chartType, yLabel, innerWidth, innerHeight);
-        yAxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, margin, yTitle, yLabel);
-        yAxistitleRight(svg, isSecondaryAxisDrawn, margin, formatOptions, dataTableHeight, innerHeight, innerWidth, secondaryYLabel, secondaryAxisTitleWidth); // to be added later
-        setChartTitle(svg, formatOptions, width, chartTitleHeight);
-        drawLegends(height, svg, dimensionHeightWidthArray, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, staticLegendShape.rectangle);
-    };
-    const preProcessChartData = () => {
-        const allChartData = [];
-        let formatedDimensionList = [];
-        seriesData.forEach((series) => {
-            series.data.forEach((point) => {
-                allChartData.push(point);
-            });
-        });
-        filteredData = JSON.parse(JSON.stringify(seriesData));
-        if (!formatOptions.plotArea.fitChart) {
-            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-        }
-        else {
-            filteredDimension = chartJSON.dimensionList;
-        }
-        if (formatOptions.plotArea.hideZeroValues) {
-            chartJSON.hideZeroValues = true;
-        }
-        let tempWaterfallChartData = generateWaterFallData();
-        // update data if Up/Down < 1.0 * e-9
-        let tempData = JSON.parse(JSON.stringify(tempWaterfallChartData));
-        tempWaterfallChartData.forEach(data => {
-            if (!data.Dimension && ((data.Up < 1e-9 && data.Up !== 0) || (data.Down < 1e-9 && data.Down !== 0))) {
-                let index = tempData.findIndex(dta => dta.Legend === data.Legend);
-                index !== -1 && tempData.splice(index, 1);
-            }
-        });
-        tempWaterfallChartData = tempData;
-        tempWaterfallChartData.forEach((d) => d.dimension ? chartJSON.legendList.push(d.dimension) : chartJSON.legendList.push(d.legend));
-        waterFallData = d3.stack().keys(["base", "dimensionTotal", "up", "down"])(tempWaterfallChartData);
-        let tempArrayToFindYMax = [];
-        let tempDimensionList = [];
-        waterFallData.forEach(key => {
-            key.key == "base" ? (key["opacity"] = 0) : (key["opacity"] = 1);
-            key.forEach(data => tempArrayToFindYMax.push(data));
-            if (!tempDimensionList.includes(key.dimension) && key.dimensionTotal === 0 && key.total === 0)
-                tempDimensionList.push(key.dimension);
-        });
-        chartJSON.yMaxLeft = d3.max(tempArrayToFindYMax, (d) => d[1]);
-        chartJSON.yMinLeft = d3.min(tempArrayToFindYMax, (d) => d[1]);
-        if (formatOptions.xAxisLabel.hideZeroValues) {
-            if (tempDimensionList.length > 0) {
-                tempDimensionList.forEach(dimension => {
-                    chartJSON.legendList = chartJSON.legendList.filter(dim => dim !== dimension);
-                });
-            }
-            chartJSON.dimensionList = chartJSON.legendList;
-        }
-        // Apply formatted dimensions
-        formatedDimensionList = isDateType
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-            : chartJSON.dimensionList;
-        getFormattedDimensionList(tempWaterfallChartData);
-    };
-    const getFormattedDimensionList = (tempWaterfallChartData) => {
-        try {
-            let tempDimensionList = [];
-            let tempDimensionListWithIndex = [];
-            let tempformatedDimensionList = [];
-            tempWaterfallChartData && tempWaterfallChartData.forEach((d, i) => {
-                if (d.dimension) {
-                    tempDimensionList.push(d.dimension);
-                    tempDimensionListWithIndex.push({ dimension: d.dimension, chartDataIndex: i, selfIndex: tempDimensionListWithIndex.length });
-                }
-            });
-            if (isDateType) {
-                tempformatedDimensionList = setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d);
-            }
-            else {
-                tempformatedDimensionList = tempDimensionList;
-            }
-            let formatedDimensionList = JSON.parse(JSON.stringify(chartJSON.legendList));
-            tempDimensionListWithIndex.forEach((listItem, i) => {
-                formatedDimensionList[listItem.chartDataIndex] = tempformatedDimensionList[listItem.selfIndex];
-            });
-            chartJSON.legendList.forEach((d, i) => {
-                chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
-            });
-        }
-        catch (error) {
-            throw error;
-        }
-    };
-    const initScale = () => {
-        // rounding the ymin & ymax
-        let yAxisLabelArray = responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue).yAxisLabelArray;
-        chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
-        chartJSON.yMinLeft = yAxisLabelArray[0];
-        if (isPrimaryAxisDrawn) {
-            yScaleLeft = d3
-                .scaleLinear()
-                .domain([
-                chartJSON.yMinLeft >= 0 ?
-                    customYaxisMinValue !== undefined &&
-                        !Number.isNaN(customYaxisMinValue)
-                        ? customYaxisMinValue : 0
-                    : chartJSON.yMinLeft < 0
-                        ? chartJSON.yMinLeft * 1.1
-                        : chartJSON.yMinLeft * 0.9,
-                chartJSON.yMaxLeft <= 0
-                    ? 0
-                    : customYaxisMaxValue !== undefined &&
-                        !Number.isNaN(customYaxisMaxValue)
-                        ? customYaxisMaxValue
-                        : chartJSON.yMaxLeft * 1.1,
-            ])
-                .range([
-                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
-                0,
-            ]);
-        }
-        calculatedRange = [0, innerWidth];
-        if (formatOptions.seriesLabel.seriesLabelVisibility) {
-            let labelObj = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, yScaleRight, isSecondaryAxisDrawn);
-            seriesLabels = labelObj.labelArray;
-            formatOptions.seriesLabel.seriesLabelPosition == "Right" &&
-                (seriesLabelWidth = labelObj.heightWidth[0]);
-            formatOptions.seriesLabel.seriesLabelPosition == "Right"
-                ? (calculatedRange = [0, innerWidth - labelObj.heightWidth[0]])
-                : (calculatedRange = [labelObj.heightWidth[0], innerWidth]);
-        }
-        getXScale();
-    };
-    const getXScale = () => {
-        columnWidth =
-            (0.51 + (0.61 * (100 - parseFloat(formatOptions.plotArea.plotAreaGapWidth))) / 100) *
-                (innerWidth / chartJSON.legendList.length);
-        xScale = d3
-            .scaleBand()
-            .domain(chartJSON.legendList)
-            .range(calculatedRange)
-            .padding(0.4);
-    };
-    const initAxis = () => {
-        getXAxis();
-        if (isPrimaryAxisDrawn) {
-            yAxisLeft = d3
-                .axisLeft(yScaleLeft)
-                .tickFormat((d) => getNumberWithFormat(d, formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision))
-                .tickSize(formatOptions.plotArea.gridLinesVisibility
-                ? formatOptions.plotArea.gridLinesHorizontal
-                    ? -innerWidth + (seriesLabelWidth ? seriesLabelWidth : 0)
-                    : 0
-                : 0)
-                .tickValues(responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue).yAxisLabelArray)
-                .ticks(responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue).customTickValue ??
-                (dataTableHeight > 0
-                    ? (innerHeight - dataTableHeight) / 30
-                    : innerHeight / 30))
-                .tickSizeOuter(0);
-        }
-        colorScale = d3.scaleOrdinal().range([
-            "#E25A42",
-            formatOptions.plotArea.totalColor,
-            formatOptions.plotArea.positiveColor,
-            formatOptions.plotArea.negativeColor,
-        ]);
-    };
-    const getXAxis = () => {
-        xAxis = d3
-            .axisBottom(xScale)
-            .tickSize(formatOptions.plotArea.gridLinesVisibility
-            ? formatOptions.plotArea.gridLinesVertical
-                ? formatOptions.plotArea.gridLinesVertical
-                    ? -(dataTableHeight > 0
-                        ? innerHeight - dataTableHeight
-                        : innerHeight)
-                    : parseFloat(formatOptions.plotArea.ticksHeight) *
-                        ((dataTableHeight > 0
-                            ? innerHeight - dataTableHeight
-                            : innerHeight) /
-                            100) *
-                        (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
-                : 0
-            : 0)
-            .tickSizeOuter(0)
-            .tickValues(responsiveXaxisLabel(chartJSON.legendList, innerWidth));
-    };
-    const getChartType = (lineData) => {
-        let totalStackData;
-        waterFallData.forEach((K, j) => K.forEach((d) => (d["key"] = K.key)));
-        if (stackTotalData) {
-            let stackDataLegendList = filteredData.map(name => name.legend);
-            // chartJSON.legendList = stackDataLegendList;
-            totalStackData = d3.stack().keys(stackDataLegendList)(stackTotalData);
-            totalStackData.forEach((d, i) => {
-                totalStackData[i]["color"] = filteredData[i].properties.color;
-            });
-        }
-        totalStackData && totalStackData.forEach(data => {
-            data.forEach(j => {
-                j["Key"] = data.key;
-            });
-        });
-        // Bind dummy data to ensure a single group is created
-        // Step 1: Loop over the two passes (0 and 1)
-        [0, 1].forEach(k => {
-            if (k === 1)
-                waterFallData = totalStackData;
-            if (waterFallData) {
-                // OUTER JOIN: parent group for the full waterfall chart
-                let parentGroup = gTag
-                    .selectAll(`.parentGroup-${k}`)
-                    .data([null]); // dummy single-element array
-                parentGroup = parentGroup
-                    .enter()
-                    .append("g")
-                    .attr("class", `parentGroup parentGroup-${k}`)
-                    .merge(parentGroup);
-                // INNER JOIN: join to each bar stack group
-                let barGroups = parentGroup
-                    .selectAll(`.bar-group-${k}`)
-                    .data(waterFallData);
-                const barGroupsEnter = barGroups
-                    .enter()
-                    .append("g")
-                    .attr("class", `bar-group-${k}`)
-                    .attr("fill", d => d.color ? d.color : colorScale(d.key) !== "#ffffff" ? colorScale(d.key) : "none")
-                    .attr("opacity", d => d.opacity);
-                barGroups = barGroupsEnter.merge(barGroups);
-                // JOIN rects inside each bar group
-                let rects = barGroups
-                    .selectAll("rect")
-                    .data(d => d, d => d.key || d.Key);
-                const rectsEnter = rects
-                    .enter()
-                    .append("rect")
-                    .attr("class", "rect")
-                    .attr("class", d => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-"))
-                    .attr("x", d => xScale(d.data.dimension || d.data.legend))
-                    .attr("y", d => d[1] ? yScaleLeft(d[1]) : 0)
-                    .attr("height", d => d[1] ? (yScaleLeft(d[0]) - yScaleLeft(d[1])) : 0)
-                    .attr("width", xScale.bandwidth())
-                    .attr("visibility", d => k === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible")
-                    .style("shape-rendering", "crispEdges")
-                    .on("mousemove", (event, d) => {
-                    showTooltipOnMouseMove([
-                        {
-                            key: d.key === "dimensionTotal" ? "Dimension" : formatOptions.xAxisTitle.xAxisTitleText,
-                            value: chartJSON.formattedDimensionListMap.get(d.data.dimension),
-                        },
-                        {
-                            key: formatOptions.yAxisTitle.yAxisTitleText,
-                            value: (d.key === "up" ? "+" : d.key === "down" ? "-" : "") +
-                                getNumberWithFormat(d.key === "dimensionTotal" ? d.data.dimensionTotal : d[1] - d[0], formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision),
-                        },
-                        {
-                            key: "Legend",
-                            value: d.Key
-                                ? d.Key.includes("~$~")
-                                    ? d.Key.split("~$~")[1]
-                                    : d.Key
-                                : d.data.legend
-                                    ? d.data.legend.includes("~$~")
-                                        ? d.data.legend.split("~$~")[1]
-                                        : d.data.legend
-                                    : "Total",
-                        },
-                    ], formatOptions);
-                })
-                    .on("mouseout", () => {
-                    hideTooltipOnMouseOut();
-                });
-                rects.exit().remove();
-                rects = rectsEnter.merge(rects);
-                // // LABELS (if enabled)
-                if (formatOptions.plotArea.plotAreaDataLabel == "2" && k != 1) {
-                    const textGroups = barGroups
-                        .selectAll("text")
-                        .data(d => d);
-                    const textEnter = textGroups
-                        .enter()
-                        .append("text")
-                        .text(d => getNumberWithFormat(d[1] - d[0], formatOptions.plotArea.plotAreaDisplayUnits, formatOptions.plotArea.dataLabelNumberFormat, formatOptions.plotArea.dataLabelDecimalPrecision))
-                        .attr("x", d => xScale(d.data.dimension || d.data.legend) + columnWidth / 2)
-                        .attr("y", d => d[1] ? yScaleLeft(d[1]) - 15 : 0)
-                        .style("font-size", "11px")
-                        .attr("text-anchor", "middle")
-                        .attr("visibility", d => (d[1] - d[0]) !== 0 && yScaleLeft(d[1]) ? "visible" : "hidden");
-                    textGroups.exit().remove();
-                }
-            }
-        });
-    };
-    const setSVGContainer = (margin) => {
-        innerWidth = width - margin.left - margin.right;
-        innerHeight = height - margin.bottom - margin.top;
-    };
-    const horizontalScrollBar = (seriesData, height, svg, margin, innerWidth) => {
-        if (!formatOptions.plotArea.fitChart) {
-            // Scrollbar parameters
-            const scrollMax = seriesData[0].data.length - visibleBars;
-            // Scrollbar track & handle
-            const scrollbarY = height - 20;
-            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-            getXScale();
-            filteredData = JSON.parse(JSON.stringify(seriesData));
-            filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-            getXAxis();
-            svg
-                .append("rect")
-                .attr("x", margin.left)
-                .attr("y", scrollbarY)
-                .attr("width", innerWidth)
-                .attr("height", 8)
-                .attr("fill", "#ddd")
-                .attr("rx", 4);
-            const handleWidth = (innerWidth * visibleBars) / chartJSON.dimensionList.length;
-            const handle = svg
-                .append("rect")
-                .attr("x", margin.left)
-                .attr("y", scrollbarY)
-                .attr("width", handleWidth)
-                .attr("height", 8)
-                .attr("fill", "#999")
-                .attr("rx", 4)
-                .style("cursor", "ew-resize")
-                .call(d3.drag().on("drag", (event) => {
-                let x = Math.min(Math.max(event.x, margin.left), margin.left + innerWidth - handleWidth);
-                handle.attr("x", x);
-                scrollPosition = Math.round(((x - margin.left) / (innerWidth - handleWidth)) * scrollMax);
-                filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-                getXScale();
-                filteredData = JSON.parse(JSON.stringify(seriesData));
-                filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-                getXAxis();
-                drawColumnChart();
-            }));
-            svg.on("wheel", (event) => {
-                event.preventDefault();
-                const scrollDelta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
-                    ? event.deltaX
-                    : event.deltaY;
-                scrollPosition += scrollDelta > 0 ? 1 : -1;
-                scrollPosition = Math.max(0, Math.min(scrollPosition, scrollMax));
-                const x = margin.left +
-                    ((innerWidth - handleWidth) * scrollPosition) / scrollMax;
-                handle.attr("x", x);
-                getXScale();
-                filteredData = JSON.parse(JSON.stringify(seriesData));
-                filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-                getXAxis();
-                drawColumnChart();
-            });
-        }
-        drawColumnChart();
-    };
-    const drawColumnChart = () => {
-        getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, chartJSON.legendList);
-        // commonAnnotations(
-        //     seriesData,
-        //     xScale,
-        //     yScaleLeft,
-        //     yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
-        //     margin,
-        //     d3Annotation,
-        //     [], //labelExcludeList,
-        //     [], //individualLabelColor,
-        //     [], //this.attributes.Id ? formatOptions.plotArea.dataLabelsCoordinates : this.parentReference.objService.tempAnnotationArray
-        //     formatOptions,
-        //     chartType,
-        //     height,
-        //     width,
-        //     innerWidth,
-        //     filteredDimension,
-        //     innerHeight,
-        //     chartId,
-        //     svg,
-        //     xScaleForLegends,
-        //     columnWidth
-        // );
-    };
-    const generateWaterFallData = () => {
-        try {
-            if (seriesData.length < 1)
-                return [];
-            if (chartJSON.dimensionList.length < 2)
-                return [];
-            let tempWaterFallData = [];
-            let dataRequiredForWaterfall = []; //JSON.parse(JSON.stringify(chartData));
-            let dataRequiredForStackTotal = []; //JSON.parse(JSON.stringify(chartData));
-            let seriesSlice = "";
-            if (seriesSlice.length > 1) {
-                // seriesSlice.forEach(key => {
-                let tempSliceArr = seriesSlice;
-                seriesData.forEach(entry => {
-                    if (tempSliceArr === entry.properties.currentLegend) {
-                        dataRequiredForWaterfall.push(entry);
-                    }
-                    else {
-                        dataRequiredForStackTotal.push(entry);
-                    }
-                });
-            }
-            if (dataRequiredForWaterfall.length > 0) {
-                filteredData = dataRequiredForWaterfall;
-            }
-            let sum = 0;
-            let tempC = 0;
-            for (let i = 0; i < filteredData.length; ++i) {
-                sum = sum + filteredData[i].data[0].value;
-            }
-            let str = "";
-            for (let j = 1; j < filteredDimension.length; ++j) {
-                let waterFallArr1 = {};
-                waterFallArr1["dimension"] = filteredDimension[j - 1]; //2013
-                waterFallArr1["total"] = sum;
-                waterFallArr1["base"] = 0;
-                waterFallArr1["dimensionTotal"] = sum;
-                waterFallArr1["up"] = 0;
-                waterFallArr1["down"] = 0;
-                tempWaterFallData.push(waterFallArr1);
-                for (let k = 0; k < filteredData.length; ++k) {
-                    let waterFallArr = {};
-                    for (let x = 0; x < k; x++) {
-                        str = str + " ";
-                    }
-                    tempC =
-                        filteredData[k].data[j].value -
-                            filteredData[k].data[j - 1].value;
-                    if (tempC !== 0) {
-                        waterFallArr["legend"] =
-                            str + filteredData[k].properties.legend;
-                        waterFallArr["dimensionTotal"] = 0;
-                        if (tempC < 0) {
-                            waterFallArr["base"] = sum + tempC;
-                            waterFallArr["down"] = -tempC;
-                            waterFallArr["up"] = 0;
-                            waterFallArr["total"] = sum - tempC;
-                        }
-                        else {
-                            waterFallArr["base"] = sum;
-                            waterFallArr["down"] = 0;
-                            waterFallArr["up"] = tempC;
-                            waterFallArr["total"] = sum + tempC;
-                        }
-                        sum = sum + tempC;
-                        tempWaterFallData.push(waterFallArr);
-                    }
-                }
-                // }
-            }
-            //last dimension entry
-            let waterFallArr2 = {};
-            waterFallArr2["dimension"] = filteredDimension[filteredDimension.length - 1];
-            waterFallArr2["dimensionTotal"] = sum;
-            waterFallArr2["base"] = 0;
-            waterFallArr2["total"] = sum;
-            waterFallArr2["up"] = 0;
-            waterFallArr2["down"] = 0;
-            tempWaterFallData.push(waterFallArr2);
-            if (dataRequiredForStackTotal.length > 0) {
-                filteredData = dataRequiredForStackTotal;
-                stackTotalData = getStackedData(filteredDimension, dataRequiredForStackTotal, false);
-            }
-            return tempWaterFallData;
-        }
-        catch (error) {
-            throw error;
-        }
-    };
-    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, style: { width: "100%", height: "100%" } })] }));
-};
-export default WaterfallChart;