pace-chart-lib 1.0.1 → 1.0.3

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

@@ -1,313 +0,0 @@
-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.ChartData); // 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;
-            seriesData.forEach((d) => {
-                pieTotalValue += d.data[0].value;
-            });
-        }
-        catch (error) {
-            logError("RadialBarChart.tsx", "loopOverChartData", error);
-        }
-    };
-    const initRadialBarChart = () => {
-        try {
-            let scaleMaxValue = seriesData.length > 1
-                ? d3.max(seriesData, (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 = seriesData.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 = seriesData.map((d, i) => d.data[0].legend);
-            let sumofmeasure = seriesData.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;