pace-chart-lib 0.0.6 → 0.0.8

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/RadialBarChart.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Additional Features for future implementation:,
+// 1) Custom end Angle
+// 2) Custom arc end radius
+// 3) Data Labels outside the arc
+//#region imports
+import * as d3 from "d3";
+import { useEffect, useRef } from "react";
+import { fontStyleOptions, } from "../../Core/Common.types";
+import { calculateLegendsMaxPossibleWidth, convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initLegendListWithTotalValueAllowance, initSvg, marginCalculationsForChartsWithoutAxis, preCalculateTextDimensions, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
+import { chartMargins } from "../../Core/DefaultProperties.types";
+//#endregion
+// Dummy logError function for demonstration
+function logError(fileName, functionName, error) {
+    console.error(`[${fileName}][${functionName}]`, error);
+}
+const RadialBarChart = ({ data, formatOptions, chartId, }) => {
+    const svgRef = useRef(); // Reference to the SVG element
+    const seriesData = generalizedChartData(data); // Input data for the chart, expected to be in TSeries format
+    let chartFormatOptions; // Data for the pie chart, expected to be in TSeries format
+    let width; // svg total width
+    let height; // svg total height
+    let chartTitleHeight = 40; // Height of the chart title
+    let margins = chartMargins; // Margins for the chart
+    let maxLegendDimensions = [0, 0]; // to calculate margins [width, height]
+    let innerHeight; // Height of the chart excluding margins
+    let innerWidth; // Width of the chart excluding margins
+    let radius; // Radius of the pie chart
+    let chartAreaTagG;
+    let svg;
+    let pieTotalValue; // Required for % calculations also appeding total to svg
+    let legendListWidth; // Width of the legend list
+    useEffect(() => {
+        drawChart();
+    }, [formatOptions]);
+    const drawChart = () => {
+        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
+        loopOverChartData();
+        ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } =
+            marginCalculationsForChartsWithoutAxis(chartFormatOptions, width, height, maxLegendDimensions, margins));
+        maxLegendDimensions = calculateLegendsMaxPossibleWidth(chartFormatOptions, seriesData);
+        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
+        chartAreaTagG = initChartArea(svg, margins);
+        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
+        initLegendListWithTotalValueAllowance(chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins);
+        initRadialBarChart();
+    };
+    const loopOverChartData = () => {
+        try {
+            pieTotalValue = 0;
+            data.forEach((d) => {
+                pieTotalValue += d.data[0].value;
+            });
+        }
+        catch (error) {
+            logError("RadialBarChart.tsx", "loopOverChartData", error);
+        }
+    };
+    const initRadialBarChart = () => {
+        try {
+            let scaleMaxValue = data.length > 1
+                ? d3.max(data, (d) => d.data[0].value) * 1.1
+                : data[0].data[0].value * 1.1;
+            let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
+            let maxDim = getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.axialAxisDataLabelNumberFormat, chartFormatOptions.plotArea.axialAxisDataLabelDecimalPrecision)(scaleMaxValue);
+            let maxWidth = chartFormatOptions.plotArea.axialAxis
+                ? preCalculateTextDimensions(maxDim, convertStringToNumber(chartFormatOptions.plotArea.axialAxisDataLabelFontSize), chartFormatOptions.plotArea.axialAxisDataLabelFontFamily).width + 10
+                : 20;
+            const chartRadius = Math.min(innerHeight * 0.5, innerWidth * 0.5) - maxWidth;
+            let svg = chartAreaTagG
+                .append("g")
+                .attr("transform", getPiePosition())
+                .attr("width", innerWidth)
+                .attr("height", innerHeight);
+            const piConstant = Math.PI, arcMinRadius = data.length > 1 ? 10 : 70, arcPadding = convertStringToNumber(chartFormatOptions.plotArea.arcPadding), numTicks = convertStringToNumber(chartFormatOptions.plotArea.axialTicks);
+            let scale = d3
+                .scaleLinear()
+                .domain([0, scaleMaxValue])
+                .range([0, degToRad(360)]);
+            let tempTicks = scale.ticks(numTicks);
+            if (tempTicks[tempTicks.length - 1] == scaleMaxValue) {
+                tempTicks.pop(); // remove the last tick if it equals the max value which will ovelap with 0 value
+            }
+            let ticks = tempTicks;
+            let keys = data.map((d, i) => d.data[0].legend);
+            let sumofmeasure = data.reduce((accumulator, currentValue) => accumulator + currentValue.data[0].value, 0);
+            const numArcs = keys.length;
+            const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs;
+            let arc = d3
+                .arc()
+                .innerRadius((d, i) => getInnerRadius(i))
+                .outerRadius((d, i) => getOuterRadius(i))
+                .startAngle(0)
+                .endAngle((d) => scale(Math.abs(d.data[0].value)));
+            // .cornerRadius(chartFormatOptions.plotArea.cornerRadius); // Future implementation
+            let dummyArc = d3
+                .arc()
+                .innerRadius((d, i) => getInnerRadius(i))
+                .outerRadius((d, i) => getOuterRadius(i))
+                .startAngle(0)
+                .endAngle(degToRad(360));
+            // Radial axis
+            let radialAxis = svg
+                .append("g")
+                .attr("class", "r axis")
+                .selectAll("g")
+                .data(data)
+                .enter()
+                .append("g");
+            if (chartFormatOptions.plotArea.axialGrid) {
+                radialAxis
+                    .append("circle")
+                    .attr("r", (d, i) => getOuterRadius(i) + arcPadding)
+                    .attr("stroke", "#d3d3d3")
+                    .attr("stroke-width", 1)
+                    .attr("fill", "none");
+            }
+            // Axial axis
+            let axialAxis = svg
+                .append("g")
+                .attr("class", "a axis")
+                .selectAll("g")
+                .data(ticks)
+                .enter()
+                .append("g")
+                .attr("transform", (d) => "rotate(" + (radTodeg(scale(d)) - 90) + ")");
+            if (chartFormatOptions.plotArea.axialGrid) {
+                axialAxis
+                    .append("line")
+                    .attr("x2", chartRadius)
+                    .attr("stroke", "#a9a9a9")
+                    .attr("stroke-width", 1);
+            }
+            axialAxis
+                .append("text")
+                .attr("x", chartRadius + 10)
+                .attr("class", "text-xs text-gray-600")
+                .style("text-anchor", (d) => scale(d) >= piConstant && scale(d) < 2 * piConstant ? "end" : null)
+                .attr("transform", (d) => "rotate(" +
+                (90 - radTodeg(scale(d))) +
+                "," +
+                (chartRadius + 10) +
+                ",0)")
+                .text((d) => getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.axialAxisDataLabelNumberFormat, chartFormatOptions.plotArea.axialAxisDataLabelDecimalPrecision)(d))
+                .attr("fill", chartFormatOptions.plotArea.axialAxisDataLabelColor !== "#ffffff"
+                ? chartFormatOptions.plotArea.axialAxisDataLabelColor
+                : "none")
+                .style("font-size", chartFormatOptions.plotArea.axialAxisDataLabelFontSize)
+                .style("font-family", chartFormatOptions.plotArea.axialAxisDataLabelFontFamily)
+                .attr("font-style", chartFormatOptions.plotArea.axialAxisDataLabelFontStyle.includes(fontStyleOptions.italic)
+                ? fontStyleOptions.italic
+                : "")
+                .attr("text-decoration", chartFormatOptions.plotArea.axialAxisDataLabelFontStyle.includes(fontStyleOptions.underline)
+                ? fontStyleOptions.underline
+                : "")
+                .attr("font-weight", chartFormatOptions.plotArea.axialAxisDataLabelFontStyle.includes(fontStyleOptions.bold)
+                ? fontStyleOptions.bold
+                : "")
+                .attr("visibility", chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden");
+            // Data arcs
+            let arcs = svg
+                .attr("class", "data")
+                .selectAll("path")
+                .data(data)
+                .enter()
+                .append("path")
+                .attr("class", "parentGroup")
+                .attr("hoverId", (d) => d.data[0].legend)
+                .style("fill", (d, i) => d.properties.color)
+                .on("mousemove", (event, d) => {
+                showTooltipOnMouseMove([
+                    {
+                        key: chartFormatOptions.yAxisTitle.yAxisTitleText,
+                        value: chartFormatOptions.toolTip.toolTipNumberFormatProgress ==
+                            ",.0%"
+                            ? (Math.abs(d.data[0].value / sumofmeasure) * 100).toFixed(convertStringToNumber(chartFormatOptions.toolTip.toolTipDecimalPrecision)) + "%"
+                            : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormatProgress, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.data[0].value),
+                    },
+                    { key: "Legend", value: d.properties.alias },
+                ], chartFormatOptions);
+            })
+                .on("mouseout", () => {
+                hideTooltipOnMouseOut();
+            });
+            arcs
+                .transition()
+                .delay((d, i) => chartFormatOptions.plotArea.arcTransition ? i * 200 : 0)
+                .duration(chartFormatOptions.plotArea.arcTransition ? 500 : 0)
+                .attrTween("d", arcTween);
+            // Adding data labels along the arcs
+            if (chartFormatOptions.plotArea.dataLabels) {
+                svg
+                    .selectAll(".arc-label-" + chartId)
+                    .data(data)
+                    .enter()
+                    .append("text")
+                    .attr("class", "arc-label-" + chartId)
+                    .attr("class", "parentGroup")
+                    .attr("text-anchor", "start")
+                    .attr("dy", (d, i) => (getOuterRadius(i) - getInnerRadius(i)) / 1.75)
+                    .append("textPath")
+                    .attr("xlink:href", (d, i) => `#arc-path-${i}-` + chartId)
+                    .style("startOffset", "50%") // Center the text
+                    .attr("hoverId", (d) => d.legend.replaceAll(" ", "-")) // Center the text
+                    .text((d) => `\u00A0\u00A0${d.properties.alias} 
+          \u00A0${chartFormatOptions.plotArea.dataLabelValue
+                    ? getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d.data[0].value)
+                    : ""}`)
+                    .attr("fill", chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff"
+                    ? chartFormatOptions.plotArea.dataLabelValueColor
+                    : "none")
+                    .style("font-size", chartFormatOptions.plotArea.dataLabelValueFontSize)
+                    .style("font-family", chartFormatOptions.plotArea.dataLabelValueFontFamily)
+                    .attr("font-style", valuefontStyle.includes(fontStyleOptions.italic)
+                    ? fontStyleOptions.italic
+                    : "")
+                    .attr("text-decoration", valuefontStyle.includes(fontStyleOptions.underline)
+                    ? fontStyleOptions.underline
+                    : "")
+                    .attr("font-weight", valuefontStyle.includes(fontStyleOptions.bold)
+                    ? fontStyleOptions.bold
+                    : "")
+                    .on("mousemove", (mouseEvent, d) => {
+                    showTooltipOnMouseMove([
+                        {
+                            key: chartFormatOptions.yAxisTitle.yAxisTitleText,
+                            value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.data[0].value),
+                        },
+                        { key: "Legend", value: d.properties.alias },
+                    ], chartFormatOptions);
+                })
+                    .on("mouseout", () => {
+                    hideTooltipOnMouseOut();
+                });
+                // Create invisible paths for text to follow
+                arcs.each((d, i) => {
+                    svg
+                        .append("path")
+                        .attr("id", `arc-path-${i}-` + chartId)
+                        .attr("d", dummyArc(d, i)) // Draw the arc path
+                        .style("fill", "none")
+                        .style("stroke", "none");
+                });
+            }
+            function arcTween(d, i) {
+                try {
+                    let interpolate = d3.interpolate({ endAngle: 0 }, { endAngle: scale(Math.abs(d.data[0].value)) });
+                    return (t) => arc({
+                        ...d,
+                        endAngle: interpolate(t),
+                    }, i);
+                }
+                catch (error) {
+                    logError("RadialBarChart.tsx", "arcTween", error);
+                }
+            }
+            function radTodeg(angle) {
+                try {
+                    return (angle * 180) / piConstant;
+                }
+                catch (error) {
+                    logError("RadialBarChart.tsx", "radTodeg", error);
+                }
+            }
+            function degToRad(deg) {
+                try {
+                    return (deg * Math.PI) / 180;
+                }
+                catch (error) {
+                    logError("RadialBarChart.tsx", "degToRad", error);
+                }
+            }
+            function getInnerRadius(index) {
+                try {
+                    return (arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding));
+                }
+                catch (error) {
+                    logError("RadialBarChart.tsx", "getInnerRadius", error);
+                }
+            }
+            function getOuterRadius(index) {
+                try {
+                    return getInnerRadius(index) + arcWidth;
+                }
+                catch (error) {
+                    logError("RadialBarChart.tsx", "getOuterRadius", error);
+                }
+            }
+        }
+        catch (error) {
+            logError("RadialBarChart.tsx", "initRadialBarChart", error);
+        }
+    };
+    const getPiePosition = () => {
+        try {
+            return `translate(${innerWidth / 2},${innerHeight / 2})`;
+        }
+        catch (error) {
+            logError("RadialBarChart.tsx", "getPiePosition", error);
+        }
+    };
+    // return (
+    //   <div style={{ width: "100%", height: "100%" }}>
+    //     <svg
+    //       className="chartSVG"
+    //       style={{ width: "100%", height: "100%" }}
+    //       ref={svgRef}
+    //     ></svg>
+    //   </div>
+    // );
+    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 RadialBarChart;

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/SankeyChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TSankeyChartProps } from "../ChartsWithoutAxisTypes.types";
+declare const SankeyChart: React.FC<TSankeyChartProps>;
+export default SankeyChart;