pace-chart-lib 0.0.6 → 0.0.8

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

@@ -0,0 +1,553 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+//#region Imports
+import * as d3 from "d3";
+import * as d3Annotation from "d3-svg-annotation";
+import { useEffect, useRef } from "react";
+import { logError } from "../../../../Services/ErrorLog";
+import { legendShape } from "../../Core/Common.types";
+import { legendsWithScroll, 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";
+const StackLineChart = ({ title, width, height, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+    // adding variables as per requirement
+    const barWidth = 0; // coz line chart
+    const chartType = actualChartTypes.stackLine;
+    const svgRef = useRef();
+    const seriesData = data;
+    const barChart = false;
+    const chartsWithXScrollFlag = true;
+    const chartsWithYScrollFlag = false;
+    const isSecondaryAxisDrawn = 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 totalHeight;
+    let totalWidth;
+    let dataTable;
+    let dataTableHeight;
+    let svg;
+    let gTag;
+    let yScaleLeft;
+    let yScaleRight;
+    let xScale;
+    let seriesLabels;
+    let calculatedRange;
+    let seriesLabelWidth;
+    let yAxisLeft;
+    let xAxis;
+    let yAxisRight;
+    let filteredDimension;
+    let filteredData;
+    let scrollPosition = 0;
+    const visibleBars = 2;
+    let stackLineData = [];
+    let stackChartData = [];
+    const isNormalizedChart = false;
+    let chartJSON = {
+        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 {
+            createLineChart();
+        }
+        catch (error) {
+            logError("StackLinechart", "createLineChart", error);
+        }
+    }, []);
+    //#endregion
+    const createLineChart = () => {
+        ({ 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));
+        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);
+        //d3.select(svgRef.current, width, height);
+        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,
+        //   floatingTagG
+        // );
+        horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
+        setDataTable(gTag, dataTable, barWidth, yScaleLeft, xScale, dataTableHeight, yLabel, yTitle, calculatedRange, chartJSON.formattedDimensionListMap, chartId, margin, svg, innerWidth, innerHeight); // data tables to be added later
+        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);
+    };
+    const preProcessChartData = () => {
+        const allChartData = [];
+        const dimensionSet = new Set();
+        const legendList = [];
+        seriesData.forEach((series, index) => {
+            // Prefix legend
+            const prefixedLegend = `${index}~$~${series.properties.legend}`;
+            series.properties.legend = prefixedLegend;
+            legendList.push(prefixedLegend);
+            // Flatten data & collect dimensions
+            for (const point of series.data) {
+                allChartData.push(point);
+                dimensionSet.add(point.dimension);
+            }
+        });
+        // Assign computed values
+        chartJSON.chartData = allChartData;
+        chartJSON.dimensionList = Array.from(dimensionSet);
+        chartJSON.legendList = legendList;
+        // getting unique x values as dimension list
+        filteredData = JSON.parse(JSON.stringify(seriesData));
+        let tempStackLineData = getStackedData(chartJSON.dimensionList, seriesData, isNormalizedChart);
+        // if (formatOptions.scrollChart.scrollX) {
+        if (false) {
+            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
+            filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
+        }
+        else {
+            filteredDimension = chartJSON.dimensionList;
+        }
+        const allStackDataChart = d3
+            .stack()
+            .keys(chartJSON.legendList)
+            .offset(d3.stackOffsetDiverging)(tempStackLineData);
+        createStackLineData();
+        // Compute min and max from stacked data in one loop
+        let yMinLeft = Infinity;
+        let yMaxLeft = -Infinity;
+        for (const series of allStackDataChart) {
+            for (const [start, end] of series) {
+                yMinLeft = Math.min(yMinLeft, start);
+                yMaxLeft = Math.max(yMaxLeft, end);
+            }
+        }
+        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMaxLeft = yMaxLeft;
+        let xAxisObject = xAxisObj[0];
+        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
+            xAxisObject.dataType === "DATE"
+            ? setDateFormats(xAxisObject.name.name, formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList, xAxisObject.name.dataSourceId).map((d) => d[0])
+            : chartJSON.dimensionList;
+        chartJSON.dimensionList.forEach((d, i) => {
+            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+        });
+        if (formatOptions.plotArea.hideZeroValues) {
+            chartJSON.hideZeroValues = true;
+        }
+        // let secondaryAxisMinValue = 0;
+        // let secondaryAxisMaxValue = 0;
+        // if (isSecondaryAxisDrawn) {
+        //   seriesData?.forEach((data) => {
+        //     if (data.properties.axis == "Secondary") {
+        //       // isSecondaryAxisDrawn = true;
+        //       if (
+        //         secondaryAxisMinValue >
+        //         d3.min(data.data, (d: TDataPoint) => d.value)
+        //       ) {
+        //         secondaryAxisMinValue = d3.min(
+        //           data.data,
+        //           (d: TDataPoint) => d.value
+        //         );
+        //       }
+        //       if (
+        //         secondaryAxisMaxValue <
+        //         d3.max(data.data, (d: TDataPoint) => d.value)
+        //       ) {
+        //         secondaryAxisMaxValue = d3.max(
+        //           data.data,
+        //           (d: TDataPoint) => d.value
+        //         );
+        //       }
+        //     }
+        //   });
+        //   chartJSON.yMinRight = secondaryAxisMinValue;
+        //   chartJSON.yMaxRight = secondaryAxisMaxValue;
+        // }
+    };
+    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([
+                customYaxisMinValue !== undefined &&
+                    !Number.isNaN(customYaxisMinValue)
+                    ? customYaxisMinValue
+                    : 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,
+            ]);
+        }
+        if (isSecondaryAxisDrawn) {
+            yScaleRight = d3
+                .scaleLinear()
+                .domain([
+                chartJSON.yMinRight >= 0
+                    ? (secondaryCustomYaxisMinValue ||
+                        secondaryCustomYaxisMinValue == 0) &&
+                        !Number.isNaN(secondaryCustomYaxisMinValue)
+                        ? secondaryCustomYaxisMinValue
+                        : 0
+                    : (secondaryCustomYaxisMinValue ||
+                        secondaryCustomYaxisMinValue == 0) &&
+                        !Number.isNaN(secondaryCustomYaxisMinValue)
+                        ? secondaryCustomYaxisMinValue
+                        : chartJSON.yMinRight * 1.1,
+                chartJSON.yMaxRight <= 0
+                    ? secondaryCustomYaxisMaxValue
+                        ? secondaryCustomYaxisMaxValue
+                        : 0
+                    : secondaryCustomYaxisMaxValue
+                        ? secondaryCustomYaxisMaxValue
+                        : chartJSON.yMaxRight * 1.1,
+            ])
+                .range([
+                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
+                0,
+            ]);
+        }
+        calculatedRange = [0, innerWidth];
+        if (formatOptions.seriesLabel.seriesLabelVisibility) {
+            let labelObj = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, undefined, isSecondaryAxisDrawn, true);
+            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 = () => {
+        xScale = d3
+            .scalePoint()
+            .domain(filteredDimension)
+            .range(calculatedRange)
+            .padding(0.5);
+    };
+    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);
+        }
+    };
+    const getXAxis = () => {
+        xAxis = d3
+            .axisBottom(xScale)
+            .tickSize(formatOptions.plotArea.gridLinesVisibility
+            ? formatOptions.plotArea.gridLinesVeritcal
+                ? formatOptions.plotArea.gridLinesVeritcal
+                    ? -(dataTableHeight > 0
+                        ? innerHeight - dataTableHeight
+                        : innerHeight)
+                    : formatOptions.plotArea.ticksHeight *
+                        ((dataTableHeight > 0
+                            ? innerHeight - dataTableHeight
+                            : innerHeight) /
+                            100) *
+                        (formatOptions.xAxisLabel.xAxisPosition == 1 ? 1 : -1)
+                : 0
+            : 0)
+            .tickSizeOuter(0)
+            .tickValues(responsiveXaxisLabel(filteredDimension, innerWidth));
+    };
+    const getChartType = (lineData) => {
+        // let requiredStackLineData = [...stackChartData];
+        lineData.forEach((lData) => {
+            lData.data.forEach((cData) => {
+                cData.hideZero = lData.properties.hideZeroValues;
+                cData.axis = lData.properties.axis;
+            });
+        });
+        const lineGenerator = d3
+            .line()
+            .x((d) => xScale(d.data.dimension)
+            ? xScale(d.data.dimension)
+            : null)
+            .y((d) => (d[1] > 0 ? yScaleLeft(d[1]) : yScaleLeft(d[0])))
+            // .defined((d) => (d.hideZero ? Boolean(d.value) : true))
+            .curve(getCurveType(formatOptions));
+        // const lines = this.floatingTagG
+        //   .append("g")
+        //   .attr("class", "lines")
+        //   .attr("class", "parentGroup");
+        //Lines
+        // Bind dummy data to ensure a single group is created
+        let lines = gTag.selectAll(".parentGroup").data([stackChartData]);
+        lines = lines
+            .enter()
+            .append("g")
+            .attr("class", "lines parentGroup")
+            .merge(lines);
+        // JOIN: one group per line
+        let lineGroups = lines.selectAll(".line-group").data((d) => d);
+        // ENTER: create group for each new line
+        let lineGroupsEnter = lineGroups
+            .enter()
+            .append("g")
+            .attr("class", (d) => "line-group " + d.key.replace(/ /g, "-"));
+        // .attr("class", (d) => d.key.replace(/ /g, "-"));
+        lineGroupsEnter
+            .attr("hoverId", (d) => d.key.includes("~$~")
+            ? d.key.split("~$~")[1].replace(/ /g, "-")
+            : d.key.replace(/ /g, "-"))
+            .append("path")
+            .attr("class", "line")
+            .attr("fill", "none");
+        // ENTER + UPDATE
+        lineGroupsEnter
+            .merge(lineGroups)
+            .select("path")
+            .attr("d", (d, i) => lineGenerator(d))
+            .attr("stroke", (d) => (d.color !== "#ffffff" ? d.color : "none"))
+            // .style("visibility", (d,i) => (this.individualLegendStyle[i].hideZero && d[i].data[d.key] === 0) ? "hidden" : "visible")
+            .attr("stroke-dasharray", (d, i) => seriesData[i].properties.lineStyle === "dotted"
+            ? "0,3"
+            : seriesData[i].properties.lineStyle === "dashed"
+                ? "20,10,5,5,5,10"
+                : "")
+            .attr("stroke-linecap", (d, i) => seriesData[i].properties.lineStyle === "dotted" ? "round" : "")
+            .attr("stroke-width", (d, i) => seriesData[i].properties.lineStyle !== "None"
+            ? seriesData[i].properties.lineWidth
+            : "0");
+        // EXIT: remove old groups
+        lineGroups.exit().remove();
+        //Markers
+        lineMarkers(lines, lineData, chartType, xScale, yScaleLeft, yScaleRight, null, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue);
+    };
+    const drawLegends = (height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin) => {
+        try {
+            let position = formatOptions.legends.legendPosition;
+            let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
+            let verticalLegendAlignment = formatOptions.legends.legendAlignment;
+            switch (position) {
+                case "None":
+                    break;
+                case "Right":
+                    let heightRight = !formatOptions.plotArea.fitChart
+                        ? height - chartTitleHeight - 20
+                        : height - chartTitleHeight - 10;
+                    legendsWithScroll(svg, seriesData, width - maxLegendDimensions[0] - 30, chartTitleHeight + 5, legendMargin + 25, heightRight, position, verticalLegendAlignment, legendShape.line, formatOptions, chartId);
+                    break;
+                case "Top":
+                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, width - 10, 30, position, horizontalLegendAlignment, legendShape.line, formatOptions, chartId);
+                    break;
+                case "Left":
+                    let heightLeft = !formatOptions.plotArea.fitChart
+                        ? height - chartTitleHeight - 20
+                        : height - chartTitleHeight - 10;
+                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, legendMargin + 25, heightLeft, position, verticalLegendAlignment, legendShape.line, formatOptions, chartId);
+                    break;
+                case "Bottom":
+                    legendsWithScroll(svg, seriesData, 7, height - 25, width - 10, 30, position, horizontalLegendAlignment, legendShape.line, formatOptions, chartId);
+                    break;
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+    };
+    const setSVGContainer = (margin) => {
+        innerWidth = width - margin.left - margin.right;
+        innerHeight = height - margin.bottom - margin.top;
+    };
+    const setDataTable = (gTag, dataTable, barWidth, yScaleLeft, xScale, dataTableHeight, yLabel, yTitle, calculatedRange, formatedDimensionMap, chartId, margin, svg, innerWidth, innerHeight) => {
+        try {
+            if (formatOptions.dataTableProperties &&
+                formatOptions.dataTableProperties.dataTable) {
+                if (formatOptions.xAxisLabel.xAxisPosition != 1)
+                    formatOptions.xAxisLabel.xAxisLabelVisibility = false;
+                addDataTable(formatOptions.plotArea.fitChart, svg, gTag, dataTable, barWidth, yScaleLeft, xScale, undefined, undefined, undefined, dataTableHeight, "Line", formatOptions, yLabel, yTitle, chartJSON.dimensionList, innerWidth, calculatedRange, formatedDimensionMap, chartId, margin, innerHeight);
+            }
+        }
+        catch (error) {
+            // loggerService.logError(error,{componentName :constructor.name,functionName :"setDataTable"});    }
+        }
+    };
+    const horizontalScrollBar = (seriesData, height, svg, margin, innerWidth) => {
+        // if (formatOptions.scrollChart.scrollX) {
+        if (false) {
+            // 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))));
+            createStackLineData();
+            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) / seriesData.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))));
+                createStackLineData();
+                getXAxis();
+                drawLineChart();
+            }));
+            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))));
+                createStackLineData();
+                getXAxis();
+                drawLineChart();
+            });
+        }
+        drawLineChart();
+    };
+    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);
+        stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
+        margin, d3Annotation, [], //this.labelExcludeList,
+        [], //this.individualLabelColor,
+        [], //this.attributes.Id ? formatOptions.plotArea.dataLabelsCoordinates : this.parentReference.objService.tempAnnotationArray
+        formatOptions, chartType, height, width, innerWidth, filteredDimension, innerHeight, chartId, svg, dataTableHeight);
+        let newSeriesLabelArray = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, undefined, isSecondaryAxisDrawn, true).labelArray;
+        // adding series labels ( appending legends at the end of line : by default) in plot area
+        drawSeriesLabels(formatOptions, gTag, newSeriesLabelArray);
+    };
+    const createStackLineData = () => {
+        let stackLineData = getStackedData(filteredDimension, filteredData, isNormalizedChart);
+        // }
+        stackChartData = d3
+            .stack()
+            .keys(chartJSON.legendList)
+            .offset(d3.stackOffsetDiverging)(stackLineData);
+        filteredData.forEach((data, index) => data.data.forEach((axisData, position) => {
+            axisData["0"] = stackChartData[index][position][0];
+            axisData["1"] = stackChartData[index][position][1];
+        }));
+        //Appending Extra key for tooltip color
+        let seriesColor = formatOptions.annotation.annotationSetLabelColor;
+        stackChartData.forEach((K, j) => K.forEach((d) => {
+            d["key"] = K.key;
+            K["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
+            d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
+            d.data["labelColor"] =
+                seriesColor == 2
+                    ? JSON.parse(JSON.stringify(seriesData[j].properties.color))
+                    : seriesData[j].properties.labelColor;
+            d["hideZero"] = JSON.parse(JSON.stringify(seriesData[j].properties.hideZeroValues));
+        }));
+    };
+    return (_jsxs("div", { children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, width: width, height: height })] }));
+};
+export default StackLineChart;

package/dist/components/Charts/ChartsWithAxis/BarFamily/BarChart.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface BarChartProps {
+    title?: string;
+    width?: number;
+    height?: number;
+    data: {
+        label: string;
+        value: number;
+    }[];
+}
+declare const BarChart: React.FC<BarChartProps>;
+export default BarChart;

package/dist/components/Charts/ChartsWithAxis/BarFamily/BarChart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BarChart = ({ title, width = 400, height = 300, data }) => {
+    const barWidth = width / data.length;
+    return (_jsxs("div", { style: { width, height, border: "1px solid #ccc", padding: "10px" }, children: [_jsx("h3", { children: title || "Bar Chart" }), _jsx("svg", { width: width, height: height, children: data.map((item, index) => {
+                    const barHeight = item.value;
+                    return (_jsxs("g", { children: [_jsx("rect", { x: index * barWidth + 10, y: height - barHeight, width: barWidth - 20, height: barHeight, fill: "#0074d9" }), _jsx("text", { x: index * barWidth + barWidth / 2, y: height - 5, fontSize: "10", textAnchor: "middle", children: item.label })] }, index));
+                }) })] }));
+};
+export default BarChart;