pace-chart-lib 1.0.1 → 1.0.3

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

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

package/dist/Services/ErrorLog.js

@@ -1,3 +0,0 @@
-export function logError(fileName, funcName, msg) {
-    console.error(fileName, funcName, msg);
-}

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

@@ -1,496 +0,0 @@
-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 { staticLegendShape } from "../../Core/Common.types";
-import { drawLegends, generalizedChartData, lineMarkers, onHoverMarkerForAreaChartFamily, } from "../../Core/CommonFunctions";
-import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getCurveType, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, 
-// initYaxisRight,
-commonAnnotations, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
-import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const AreaChart = ({ isDateType, formatOptions, data, }) => {
-    // adding variables as per requirement
-    const chartId = crypto.randomUUID();
-    const barWidth = 0; // coz line chart
-    const chartType = actualChartTypes.area;
-    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: any;
-    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 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 {
-            createAreaChart();
-        }
-        catch (error) {
-            logError("Linechart", "createLineChart", error);
-        }
-    }, [formatOptions]);
-    //#endregion
-    const createAreaChart = () => {
-        ({ 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, barWidth, yScaleLeft, xScale, undefined, undefined, undefined, dataTableHeight, "Area", 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.areaWithLine);
-    };
-    const preProcessChartData = () => {
-        const allChartData = [];
-        const legendList = [];
-        let formatedDimensionList = [];
-        let yMaxLeft = -Infinity;
-        let yMinLeft = Infinity;
-        let yMaxRight = -Infinity;
-        let yMinRight = Infinity;
-        seriesData.forEach((series) => {
-            legendList.push(series.legend);
-            series.data.forEach((point) => {
-                allChartData.push(point);
-                if (isSecondaryAxisDrawn && series.properties.axis === "Secondary") {
-                    // isSecondaryAxisDrawn = true;
-                    yMaxRight = Math.max(yMaxRight, point.value);
-                    yMinRight = Math.min(yMinRight, point.value);
-                }
-                else {
-                    yMaxLeft = Math.max(yMaxLeft, point.value);
-                    yMinLeft = Math.min(yMinLeft, point.value);
-                }
-            });
-        });
-        chartJSON.chartData = allChartData;
-        chartJSON.legendList = legendList;
-        chartJSON.yMaxLeft = yMaxLeft;
-        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
-        chartJSON.yMaxRight = yMaxRight;
-        chartJSON.yMinRight = yMinRight;
-        // Apply formatted dimensions
-        formatedDimensionList = isDateType
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-            : chartJSON.dimensionList;
-        chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
-        });
-        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;
-        }
-    };
-    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,
-            ]);
-        }
-        // 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);
-            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);
-    };
-    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);
-        }
-        // if (isSecondaryAxisDrawn) {
-        //   yAxisRight = d3
-        //     .axisRight(yScaleRight)
-        //     .tickFormat((d: number) =>
-        //       getNumberWithFormat(
-        //         d,
-        //         formatOptions.secondaryYAxisLabel.secondaryYAxisDisplayUnits,
-        //         formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat,
-        //         formatOptions.secondaryYAxisLabel
-        //           .secondaryYAxisLabelDecimalPrecision
-        //       )
-        //     )
-        //     .tickValues(
-        //       responsiveSecondaryYaxisLabel(
-        //         secondaryCustomYaxisMaxValue
-        //           ? secondaryCustomYaxisMaxValue
-        //           : chartJSON.yMaxRight,
-        //         chartJSON.yMinRight,
-        //         formatOptions,
-        //         chartJSON
-        //       ).secondaryYAxisLabelArray
-        //     )
-        //     .ticks(
-        //       responsiveSecondaryYaxisLabel(
-        //         secondaryCustomYaxisMaxValue
-        //           ? secondaryCustomYaxisMaxValue
-        //           : chartJSON.yMaxRight,
-        //         chartJSON.yMinRight,
-        //         formatOptions,
-        //         chartJSON
-        //       ).secondaryCustomTickValue ?? innerHeight / 30
-        //     )
-        //     .tickSize(
-        //       formatOptions.plotArea.gridLinesVisibility
-        //         ? formatOptions.plotArea.gridLinesHorizontal
-        //           ? -innerWidth
-        //           : 0
-        //         : 0
-        //     )
-        //     .tickSizeOuter(0);
-        // }
-    };
-    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(filteredDimension, innerWidth));
-    };
-    const getChartType = (lineData) => {
-        lineData.forEach((lData) => {
-            lData.data.forEach((cData) => {
-                cData.hideZero = lData.properties.hideZeroValues;
-                cData.axis = lData.properties.axis;
-            });
-        });
-        const areaGenerator = d3
-            .area()
-            .x((d) => xScale(d.dimension)
-            ? xScale(d.dimension)
-            : null)
-            .y0((d) => 
-        // d.axis == "Primary" ?
-        yScaleLeft(0)
-        // : yScaleRight(0)
-        )
-            .y1((d) => 
-        // d.axis == "Primary" ?
-        yScaleLeft(d.value)
-        // : yScaleRight((d as TDataPoint).value)
-        )
-            .defined((d) => (d.hideZero ? Boolean(d.value) : true))
-            .curve(getCurveType(formatOptions));
-        // Bind dummy data to ensure a single group is created
-        let areas = gTag.selectAll(".parentGroup").data([lineData]);
-        let focus = gTag.append("g").attr("class", "focusClass");
-        areas = areas
-            .enter()
-            .append("g")
-            .attr("class", "areas parentGroup")
-            .merge(areas);
-        // JOIN: one group per line
-        let areaGroups = areas.selectAll(".area-group").data((d) => d);
-        // ENTER: create group for each new line
-        let areaGroupsEnter = areaGroups
-            .enter()
-            .append("g")
-            .attr("class", "area-group");
-        // Append path to new groups
-        areaGroupsEnter
-            .attr("hoverId", (d) => d.legend.replace(/ /g, "-"))
-            .append("path")
-            .attr("class", "area")
-            .attr("fill", (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none")
-            .style("fill-opacity", formatOptions.plotArea.fillOpacity);
-        // ENTER + UPDATE
-        areaGroupsEnter
-            .merge(areaGroups)
-            .select("path")
-            .attr("d", (d) => areaGenerator(d.data))
-            .attr("stroke", (d) => d.properties.areaBorderColor !== "#ffffff"
-            ? d.properties.areaBorderColor
-            : "none")
-            .attr("stroke-dasharray", (d) => {
-            switch (d.properties.lineStyle) {
-                case "dotted":
-                    return "0,3";
-                case "dashed":
-                    return "20,10,5,5,5,10";
-                default:
-                    return "";
-            }
-        })
-            .attr("stroke-linecap", (d) => d.properties.lineStyle === "dotted" ? "round" : "")
-            .attr("stroke-width", (d) => d.properties.lineStyle !== "None" &&
-            formatOptions.plotArea.plotAreaHideLineAndMarkers
-            ? d.properties.lineWidth
-            : "0");
-        onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDimension, lineData, xScale, yScaleLeft, chartType);
-        // EXIT: remove old groups
-        areaGroups.exit().remove();
-        //Markers
-        lineMarkers(areas, lineData, chartType, xScale, yScaleLeft, undefined, null, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue, false);
-    };
-    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();
-                drawAreaChart();
-            }));
-            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();
-                drawAreaChart();
-            });
-        }
-        drawAreaChart();
-    };
-    const drawAreaChart = () => {
-        getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
-        commonAnnotations(seriesData, xScale, yScaleLeft, undefined, // 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);
-        let newSeriesLabelArray = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, undefined, isSecondaryAxisDrawn).labelArray;
-        // adding series labels ( appending legends at the end of line : by default) in plot area
-        drawSeriesLabels(formatOptions, gTag, newSeriesLabelArray);
-    };
-    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 AreaChart;

package/dist/components/Charts/ChartsWithAxis/AreaFamily/LineChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TLineChartProps } from "../ChartsWithAxisTypes.types";
-declare const LineChart: React.FC<TLineChartProps>;
-export default LineChart;