pace-chart-lib 0.0.7 → 0.0.8

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

@@ -0,0 +1,395 @@
+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, hideTooltipOnMouseOut, showTooltipOnMouseMove } from "../../Core/CommonFunctions";
+import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
+import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
+const TornadoChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+    // adding variables as per requirement
+    let columnWidth = 0; // coz line chartO
+    const chartType = actualChartTypes.tornadoChart;
+    const svgRef = useRef();
+    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const dimensionList = data.DimensionList;
+    const barChart = true;
+    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 isSensitivityChart = false;
+    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 {
+            createTornadoChart();
+        }
+        catch (error) {
+            logError("Tornadochart", "createTornadoChart", error);
+        }
+    }, [formatOptions]);
+    //#endregion
+    const createTornadoChart = () => {
+        ({ 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);
+        gTag = initChartArea(svg, margin); // creating chart area
+        initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
+        initScale();
+        initAxis();
+        initYaxisBar(formatOptions, gTag, yLabel, innerHeight, innerWidth, yAxisLeft, yAxisRight, xScale, chartJSON.yMaxLeft, chartJSON.dimensionList, chartType, xAxisObj[0], width, dimensionHeightWidthArray, columnWidth);
+        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 formatedDimesionList = [];
+        let firstMeasure = yAxisObj[0].name.actualName;
+        let yMaxLeft = 0;
+        // let yMinLeft = Infinity;
+        let yMaxRight = -Infinity;
+        // let yMinRight = Infinity;
+        seriesData.forEach((series) => {
+            legendList.push(series.legend);
+            series.data.forEach((point) => {
+                if (series.properties.currentMeasure === firstMeasure) {
+                    point.value = -point.value; // Invert value for left axis
+                }
+                allChartData.push(point);
+            });
+            let measuresArray = series.data.map((d) => d.value);
+            if (series.properties.currentMeasure === firstMeasure) {
+                yMaxLeft = Math.min(yMaxLeft, Math.min(...measuresArray));
+            }
+            else {
+                yMaxRight = Math.max(yMaxRight, Math.max(...measuresArray));
+            }
+        });
+        chartJSON.chartData = allChartData;
+        chartJSON.legendList = legendList;
+        chartJSON.yMaxLeft = yMaxLeft;
+        // chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMaxRight = yMaxRight;
+        // chartJSON.yMinRight = yMinRight;
+        // Apply formatted dimensions
+        let xAxisObject = xAxisObj[0];
+        formatedDimesionList =
+            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
+                xAxisObject.dataType === "DATE"
+                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+                : chartJSON.dimensionList;
+        chartJSON.dimensionList.forEach((dim, i) => {
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[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 = () => {
+        columnWidth =
+            (0.51 + (0.61 * (100 - parseFloat(formatOptions.plotArea.plotAreaGapWidth))) / 100) *
+                (innerHeight / filteredDimension.length);
+        let right = false;
+        let left = false;
+        let maxValue;
+        if (chartJSON.yMaxLeft > chartJSON.yMaxRight) {
+            maxValue = chartJSON.yMaxLeft;
+            right = true;
+        }
+        else {
+            maxValue = chartJSON.yMaxRight;
+            left = true;
+        }
+        let adjustedPosition = formatOptions.annotation.annotationVisibility != "5" && formatOptions.annotation.annotationPosition == "1" ? 20 : 0;
+        let scaleFactor = formatOptions.annotation.annotationVisibility != "5" ? ((chartJSON.yMaxLeft / maxValue) !== 1 ? Math.abs(chartJSON.yMaxLeft / maxValue) * 100 < 10 ? 3 : 0 : Math.abs(chartJSON.yMaxRight / maxValue) * 100 < 10 ? 3 : 0) : 0; // scale difference in X scale
+        // rounding the ymin & ymax
+        let yAxisLabelArray = responsiveYaxisLabel(chartJSON.yMaxRight, chartJSON.yMaxLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue, barChart, innerWidth).yAxisLabelArray;
+        chartJSON.yMaxLeft = yAxisLabelArray[0];
+        xScaleForLegends = d3
+            .scaleLinear()
+            .domain([chartJSON.yMaxLeft * (1.2 + (left ? scaleFactor : 0)), chartJSON.yMaxRight * (1.2 + (right ? scaleFactor : 0))])
+            .range([adjustedPosition, innerWidth - adjustedPosition]);
+        xScale = xScaleForLegends;
+        calculatedRange = [0, innerWidth];
+        getXScale();
+    };
+    const getXScale = () => {
+        yScaleLeft = d3.scaleBand()
+            .domain(chartJSON.dimensionList)
+            .range([innerHeight, 0])
+            .padding(0.35);
+    };
+    const initAxis = () => {
+        getXAxis();
+        // if (isPrimaryAxisDrawn) {
+        yAxisLeft = d3.axisLeft(yScaleLeft)
+            .tickSize(formatOptions.plotArea.gridLinesVisibility
+            ? formatOptions.plotArea.gridLinesHorizontal
+                ? -(innerWidth - xScaleForLegends(0))
+                : 0
+            : 0)
+            .tickSizeOuter(0)
+            .tickValues(responsiveXaxisLabel(chartJSON.dimensionList, innerWidth));
+        yAxisRight = d3.axisRight(yScaleLeft)
+            .tickSize(formatOptions.plotArea.gridLinesVisibility
+            ? formatOptions.plotArea.gridLinesHorizontal
+                ? -xScaleForLegends(0)
+                : 0
+            : 0)
+            .tickSizeOuter(0)
+            .tickValues(responsiveXaxisLabel(chartJSON.dimensionList, innerWidth));
+        // }
+    };
+    const getXAxis = () => {
+        xAxis = d3
+            .axisBottom(xScaleForLegends)
+            .tickFormat((d) => getNumberWithFormat(d, formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision, true))
+            .tickSize(formatOptions.plotArea.gridLinesVisibility
+            ? formatOptions.plotArea.gridLinesVertical
+                ? formatOptions.plotArea.ticksHeight == "100"
+                    ? -innerHeight
+                    : -formatOptions.plotArea.ticksHeight * (innerHeight / 100)
+                : 0
+            : 0)
+            .tickValues(responsiveYaxisLabel(chartJSON.yMaxRight, chartJSON.yMaxLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue, barChart, innerWidth).yAxisLabelArray)
+            .ticks(responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue, barChart, innerWidth).customTickValue ??
+            (dataTableHeight > 0
+                ? (innerWidth - dataTableHeight) / 30
+                : innerWidth / 30))
+            .tickSizeOuter(0);
+    };
+    const getChartType = (lineData) => {
+        // let barData = [];
+        // filteredData.forEach(d => {
+        //     d.data.forEach(k => {
+        //         barData.push(k)
+        //     })
+        // })
+        let sensitivityData = [];
+        if (isSensitivityChart) {
+            // barData.forEach((data, i) => {
+            //     data.data.forEach((cdata) => {
+            //         let tempObj = {
+            //             "Dimension": data.Dimension,
+            //             "data": [cdata]
+            //         }
+            //         sensitivityData.push(tempObj);
+            //     })
+            // })
+            // barData = sensitivityData;
+        }
+        let positiveBarColor = formatOptions.plotArea.plotAreaCalculatedHigh;
+        let negativeBarColor = formatOptions.plotArea.plotAreaCalculatedLow;
+        gTag
+            .append("g")
+            .attr("class", "parentGroup")
+            .selectAll("#scaling-svg" + chartId + " .rect")
+            .data(filteredData)
+            .enter()
+            .append("g")
+            //.attr("fill", (d) => d.data[0].color !== "#ffffff" ? d.data[0].color : "none")
+            .attr("class", (d) => isSensitivityChart ? (d.data[0].value > 0 ? "Calculated High(+ve)".replace(/ /g, "-") : "Calculated Low(-ve)".replace(/ /g, "-")) : d.data[0].legend.replace(/ /g, "-"))
+            .selectAll("rect")
+            .data(d => d.data.map(child => ({
+            ...child,
+            parentProperties: d.properties
+        })))
+            .enter()
+            .append("rect")
+            .attr("class", "rect")
+            .attr("y", (d) => d.dimension ? yScaleLeft(d.dimension) : yScaleLeft("defaultEntry"))
+            .attr("x", (d) => xScale(Math.min(0, d.value)))
+            .attr("stroke-dasharray", (d) => d.stackBorderStyle == 2 ? "5,3" : "0")
+            .attr("stroke-width", (d) => d.stackBorderWidth + "px")
+            .attr("stroke", (d) => (d.stackBorderStyle == 0) ? "none" : formatOptions.column.stackBorderVisibility ? d.stackBorderColor : "none")
+            // .style("clip-path", "inset(0px) fill-box")
+            .style("shape-rendering", "crispEdges")
+            .attr("width", (d) => d.value ? Math.abs(xScale(d.value) - xScale(0)) : 0)
+            .attr("height", yScaleLeft.bandwidth())
+            .style("fill", d => isSensitivityChart ? (d.value > 0 ? (positiveBarColor !== "#ffffff" ? positiveBarColor : "none")
+            : (negativeBarColor !== "#ffffff" ? negativeBarColor : "none")) : d.parentProperties.color)
+            .attr("opacity", 1)
+            .on("mousemove", (event, d) => {
+            showTooltipOnMouseMove([
+                { key: "Measure", value: d.legend },
+                { key: "Legend", value: d.dimension, },
+                {
+                    key: "Value", value: (d.value < 0 ? getNumberWithFormat(-d.value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, true) :
+                        getNumberWithFormat(d.value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, true))
+                },
+            ], formatOptions);
+        })
+            .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);
+            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);
+        initXaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, xAxis);
+        commonAnnotations(filteredData, yScaleLeft, xScale, 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, yScaleLeft, columnWidth, isSensitivityChart, barChart);
+    };
+    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 TornadoChart;

package/dist/components/Charts/ChartsWithAxis/MiscellaneousChartFamily/WaterfallChart.d.ts

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