pace-chart-lib 1.0.2 → 1.0.4

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

@@ -1,418 +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 { responsiveXaxisLabelForNumericValue } from "../../ChartsWithoutAxis/ChartsWithoutAxisFunctions";
-import { staticLegendShape } from "../../Core/Common.types";
-import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, responsiveYaxisLabel, setChartTitle, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
-import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const ColumnHistogramChart = ({ isDateType, formatOptions, data, }) => {
-    // adding variables as per requirement
-    const chartId = crypto.randomUUID();
-    const columnWidth = 0; // coz line chartO
-    const chartType = actualChartTypes.columnHistogram;
-    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 customXaxisMinValue = parseFloat(formatOptions.xAxisLabel.xAxisMinText);
-    let customXaxisMaxValue = parseFloat(formatOptions.xAxisLabel.xAxisMaxText);
-    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 thresholds;
-    let periods = [];
-    let bins = [];
-    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 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 {
-            createColumnChart();
-        }
-        catch (error) {
-            logError("Columnchart", "createColumnChart", error);
-        }
-    }, [formatOptions]);
-    //#endregion
-    const createColumnChart = () => {
-        ({ 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);
-        binsCalculation();
-        initScale();
-        initAxis();
-        initYaxis(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight);
-        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 = [];
-        const legendList = [];
-        let formatedDimensionList = [];
-        let cumulativeDataPoints = [];
-        let yMaxLeft = -Infinity;
-        let yMinLeft = Infinity;
-        seriesData.forEach((series) => {
-            legendList.push(series.legend);
-            series.data.forEach((point) => {
-                allChartData.push(point);
-                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;
-        filteredData = JSON.parse(JSON.stringify(seriesData));
-        filteredData.forEach((d) => d.data.forEach((j) => cumulativeDataPoints.push(j.value)));
-        let yMin = (customYaxisMinValue || customYaxisMinValue == 0) ? customYaxisMinValue : 0;
-        let yMax = (customYaxisMaxValue || customYaxisMaxValue == 0) ? customYaxisMaxValue : filteredData[0]?.data?.length;
-        chartJSON.yMaxLeft = parseFloat(((yMin + "").length > (yMax + "").length) ? (yMin + "") : (yMax + ""));
-        chartJSON.xMax = d3.max(cumulativeDataPoints);
-        chartJSON.xMin = d3.min(cumulativeDataPoints);
-    };
-    const binsCalculation = () => {
-        switch (formatOptions.bins.binsCalculation) {
-            case "Automatic":
-                thresholds = innerWidth / 50;
-                break;
-            case "Number of Bins":
-                calculatingPeriodsWithBins(false);
-                break;
-            case "Bin Width":
-                calculatingPeriodsWithBins(true);
-        }
-    };
-    const calculatingPeriodsWithBins = (isWithWidth) => {
-        let sortedArray = [];
-        filteredData.forEach((d) => (sortedArray = d.data.sort(function (a, b) {
-            return a.value - b.value;
-        })));
-        let range = chartJSON.xMax - chartJSON.xMin;
-        let tempPeriod;
-        if (isWithWidth) {
-            parseFloat(formatOptions.bins.binsCalculationValue) <= 2 && (formatOptions.bins.binsCalculationValue = "3");
-            tempPeriod = range / parseFloat(formatOptions.bins.binsCalculationValue);
-        }
-        else {
-            parseFloat(formatOptions.bins.binsCalculationValue) <= 1 && (formatOptions.bins.binsCalculationValue = "1"); //minimum bins 1
-            tempPeriod = range / parseFloat(formatOptions.bins.binsCalculationValue);
-        }
-        let currentElement = chartJSON.xMin;
-        if (isWithWidth) {
-            periods = [currentElement];
-            while (currentElement < chartJSON.xMax) {
-                currentElement += tempPeriod;
-                periods.push(currentElement);
-            }
-        }
-        else {
-            periods = [currentElement];
-            while (Math.round(currentElement) < Math.round(chartJSON.xMax)) {
-                currentElement += tempPeriod;
-                periods.push(Math.round(currentElement));
-            }
-        }
-    };
-    const initScale = () => {
-        xScale = d3
-            .scaleLinear()
-            .domain([chartJSON.xMin, chartJSON.xMax])
-            .range([0, innerWidth]);
-        let histogram = d3
-            .bin()
-            .value((d) => d) //  how to extract value from data
-            .domain(xScale.domain())
-            .thresholds((periods && periods.length) || xScale.ticks(thresholds)); //  the numbers of bins
-        filteredData.forEach((d) => {
-            let tempArray = histogram(d.data.map(val => val.value));
-            bins.push(tempArray);
-        });
-        filteredData.forEach((d, i) => bins[i].forEach((j) => {
-            j["name"] = d.properties["legend"];
-            j["color"] = d.properties["color"];
-            j["opacity"] = d.properties["opacity"];
-        })); // Adding additional information from the main data.
-        let cumulativeLength = [];
-        bins.forEach((d) => d.forEach((j) => cumulativeLength.push(j.length)));
-        chartJSON.yMaxLeft = d3.max(cumulativeLength);
-        chartJSON.yMinLeft = d3.min(cumulativeLength);
-        // rounding the ymin & ymax
-        yScaleLeft = d3
-            .scaleLinear()
-            .range([innerHeight, 0])
-            // .domain([0, this.Ymax + 0.2 * this.Ymax])
-            .domain([(customYaxisMinValue || customYaxisMinValue == 0) ? customYaxisMinValue : 0, (customYaxisMaxValue || customYaxisMaxValue == 0) ? customYaxisMaxValue : chartJSON.yMaxLeft + 0.2 * chartJSON.yMaxLeft]);
-    };
-    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(chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue, false, innerWidth).yAxisLabelArray)
-                .ticks(innerHeight / 50)
-                .tickSizeOuter(0);
-        }
-    };
-    const getXAxis = () => {
-        let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
-        let labelArray = responsiveXaxisLabelForNumericValue(chartJSON.xMax, chartJSON.xMin, innerWidth, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerHeight, false).xAxisLabelArray;
-        labelArray.shift();
-        xAxis =
-            (xaxisLabelPosition == 1 ?
-                d3.axisTop(xScale) : d3.axisBottom(xScale))
-                .tickFormat((d) => getNumberWithFormat(d, formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision, false))
-                .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)
-                .tickValues(labelArray)
-                .ticks(innerWidth / 30)
-                .tickSizeOuter(0);
-        formatOptions.bins.binsCalculation === "Automatic"
-            ? xAxis.ticks(thresholds)
-            : xAxis.tickValues(periods).ticks(innerWidth / 50);
-    };
-    const getChartType = (lineData) => {
-        gTag
-            .append("g")
-            .attr("class", "parentGroup")
-            .selectAll("#scaling-svg" + chartId + " .rect")
-            .data(bins)
-            .enter()
-            .append("g")
-            .selectAll("rect")
-            .data((d) => d)
-            .enter()
-            .append("rect")
-            .attr("class", "rect")
-            .attr("stroke", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor)
-            .attr("stroke-width", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness)
-            .attr("stroke-opacity", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity)
-            .attr("x", 1)
-            .attr("transform", function (d) {
-            return ("translate(" + xScale(d.x0) + "," + (yScaleLeft(d.length) > 0 ? yScaleLeft(d.length) : 0) + ")");
-        })
-            .attr("width", function (d) {
-            return xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth) < 0
-                ? 0
-                : xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth);
-        })
-            .attr("height", function (d) {
-            return innerHeight - yScaleLeft(d.length);
-        })
-            .style("fill", (d) => d.color !== "#ffffff" ? d.color : "none")
-            .style("opacity", formatOptions.bins.binsFillOpacity)
-            .style("shape-rendering", "crispEdges")
-            .on("mousemove", (event, d) => {
-            showTooltipOnMouseMove([
-                {
-                    key: formatOptions.xAxisTitle.xAxisTitleText.includes("~$~")
-                        ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1]
-                        : formatOptions.xAxisTitle.xAxisTitleText,
-                    value: `${d["x0"]}-${d["x1"]}`
-                },
-                {
-                    key: formatOptions.yAxisTitle.yAxisTitleText,
-                    value: getNumberWithFormat(formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, false),
-                },
-            ], formatOptions, event);
-        })
-            .on("mouseout", hideTooltipOnMouseOut);
-    };
-    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);
-            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);
-                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);
-                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, filteredDimension);
-        // commonAnnotations(
-        //     seriesData,
-        //     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,
-        //     xScaleForLegends,
-        //     columnWidth
-        // );
-    };
-    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 ColumnHistogramChart;