pace-chart-lib 1.0.2 → 1.0.3

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

@@ -1,514 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as d3 from "d3";
-import { useEffect, useRef } from "react";
-import { colorThemeTypes, connectorKPIforSpeedometerType, dataLabelPositionType, fontStyleOptions, } from "../../Core/Common.types";
-import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, marginCalculationsForChartsWithoutLegends, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { logError } from "../../../../Services/ErrorLog";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-const Speedometer = ({ data, formatOptions, chartId, }) => {
-    const svgRef = useRef();
-    const seriesData = generalizedChartData(data.ChartData);
-    let chartFormatOptions;
-    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 innerHeight; // Height of the chart excluding margins
-    let innerWidth; // Width of the chart excluding margins
-    let chartAreaTagG;
-    let svg;
-    let radius; // Radius of the pie chart
-    let innerRadius; // Inner radius of the pie chart
-    let gaugeMaxMeasure; // Maximum measure value for the gauge
-    let gaugeMinMeasure; // Minimum measure value for the gauge
-    let colorThemeArray; // Array to hold color themes for the gauge
-    let calculatedTicksValue; // Number of ticks for the gauge
-    let tickValueArray; // Array to hold tick values for the gauge
-    let gaugemap = {}; // Object to hold the gauge functions and configurations
-    let positionTransformString; // String to hold the translation for positioning the gauge
-    const fileName = "Speedometer.tsx";
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        ({ margins, chartTitleHeight, innerHeight, innerWidth } =
-            marginCalculationsForChartsWithoutLegends(chartFormatOptions, height, width));
-        initChartRadius();
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        initSpeedometerData();
-        initColorTheme();
-        setDataLabelsOptions();
-        initSpeedometer();
-    };
-    const initChartRadius = () => {
-        try {
-            let positionDominatorName;
-            if (innerHeight * 0.8 < innerWidth * 0.45) {
-                radius = innerHeight * 0.8;
-                positionDominatorName = "width";
-            }
-            else {
-                radius = innerWidth * 0.45;
-                positionDominatorName = "height";
-            }
-            positionTransformString = centerTranslation(positionDominatorName);
-            innerRadius = Math.min((convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100) *
-                radius, radius);
-        }
-        catch (error) {
-            logError(fileName, "initChartRadius", error);
-        }
-    };
-    function centerTranslation(positionDominatorName) {
-        try {
-            return positionDominatorName == "height"
-                ? `translate(${innerWidth / 2},${innerHeight / 2 + radius / 2})`
-                : `translate(${innerWidth / 2},${height - 60})`;
-        }
-        catch (error) {
-            logError(fileName, "centerTranslation", error);
-            return "";
-        }
-    }
-    const initSpeedometerData = () => {
-        try {
-            let firstMeasureValue = data[0].data[0].value;
-            if (firstMeasureValue < 0) {
-                gaugeMaxMeasure = 0;
-                gaugeMinMeasure = firstMeasureValue;
-            }
-            else {
-                gaugeMaxMeasure = firstMeasureValue;
-                gaugeMinMeasure = 0;
-            }
-            if (chartFormatOptions.customScaling.customScalingtoggle) {
-                calculatedTicksValue = 100;
-            }
-            else {
-                calculatedTicksValue = convertStringToNumber(chartFormatOptions.plotArea.ticks);
-            }
-        }
-        catch (error) {
-            logError(fileName, "initSpeedometerData", error);
-        }
-    };
-    const initColorTheme = () => {
-        try {
-            colorThemeArray = [];
-            let customTicksCount = convertStringToNumber(chartFormatOptions.plotArea.ticks);
-            if (chartFormatOptions.customScaling.customScalingtoggle) {
-                for (let index = 1; index <= customTicksCount; index++) {
-                    let colorCount = chartFormatOptions.customScaling[`share${index}`];
-                    if (colorThemeArray.length < 100) {
-                        for (let innerIndex = 0; innerIndex < colorCount; innerIndex++) {
-                            colorThemeArray.push(chartFormatOptions.customScaling[`division${index}`]);
-                        }
-                    }
-                }
-                if (colorThemeArray.length < 101) {
-                    for (let index = colorThemeArray.length; index < 100; index++) {
-                        colorThemeArray.push("#000000");
-                    }
-                }
-            }
-            else {
-                if ([colorThemeTypes.none, colorThemeTypes.discrete].includes(chartFormatOptions.colorScale.showColor)) {
-                    for (let index = 1; index <= customTicksCount; index++) {
-                        colorThemeArray.push(chartFormatOptions.colorScale["division" + index]);
-                    }
-                }
-                else {
-                    let startColor = chartFormatOptions.colorScale.startColor;
-                    let endColor = chartFormatOptions.colorScale.endColor;
-                    const colorScale = d3
-                        .scaleLinear()
-                        .domain([0, customTicksCount])
-                        .range([startColor, endColor]);
-                    for (let index = 0; index < customTicksCount; index++) {
-                        colorThemeArray.push(colorScale(index));
-                    }
-                }
-            }
-        }
-        catch (error) {
-            logError(fileName, "initColorTheme", error);
-        }
-    };
-    const setTickValues = (maxValue, minValue, ticksCount) => {
-        try {
-            let ticks = [];
-            let absoluteValue = Math.abs(maxValue) - Math.abs(minValue);
-            let divisionFactor = Math.abs(absoluteValue) / ticksCount;
-            let startTickvalue = minValue > 0 ? 0 : minValue;
-            ticks.push(startTickvalue);
-            for (let i = 0; i < ticksCount - 1; i++) {
-                startTickvalue += parseFloat(divisionFactor.toFixed(5));
-                if (startTickvalue.toFixed(5) <= Math.abs(maxValue)) {
-                    ticks.push(startTickvalue);
-                }
-            }
-            ticks.push(ticks.includes(maxValue) ? 0 : maxValue);
-            return ticks;
-        }
-        catch (error) {
-            logError(fileName, "setTickValues", error);
-            return [];
-        }
-    };
-    const setDataLabelsOptions = () => {
-        try {
-            let selectedOption = chartFormatOptions.plotArea.dataLabelsOptions;
-            switch (selectedOption) {
-                case dataLabelPositionType.automatic:
-                    tickValueArray = initTicksValues();
-                    break;
-                case dataLabelPositionType.startOnly:
-                    tickValueArray = [gaugeMinMeasure];
-                    break;
-                case dataLabelPositionType.endOnly:
-                    let tempTicks = Array(calculatedTicksValue).fill("");
-                    tempTicks[calculatedTicksValue] = gaugeMaxMeasure;
-                    tickValueArray = tempTicks;
-                    break;
-                case dataLabelPositionType.startAndEndBoth:
-                    let allTicks = Array(calculatedTicksValue).fill("");
-                    allTicks[calculatedTicksValue] = gaugeMaxMeasure;
-                    allTicks[0] = gaugeMinMeasure;
-                    tickValueArray = allTicks;
-                    break;
-                case dataLabelPositionType.none:
-                    tickValueArray = [];
-                    break;
-            }
-        }
-        catch (error) {
-            logError(fileName, "setDataLabelsOptions", error);
-        }
-    };
-    const initTicksValues = () => {
-        try {
-            let tickValueArray;
-            let customTicksCount = convertStringToNumber(chartFormatOptions.plotArea.ticks);
-            let ticksArray = setTickValues(gaugeMaxMeasure, gaugeMinMeasure, calculatedTicksValue);
-            if (chartFormatOptions.customScaling.customScalingtoggle) {
-                let tempTicks = Array(100).fill("");
-                tempTicks[0] = gaugeMinMeasure;
-                let currentShareValue = 0;
-                for (let index = 1; index <= customTicksCount; index++) {
-                    let shareValue = parseInt(chartFormatOptions.customScaling[`share${index}`]);
-                    currentShareValue += shareValue;
-                    if (currentShareValue >= 100)
-                        break;
-                    tempTicks[currentShareValue] = ticksArray[currentShareValue];
-                }
-                tempTicks[99] = gaugeMaxMeasure;
-                tickValueArray = tempTicks;
-            }
-            else {
-                tickValueArray = ticksArray;
-            }
-            return tickValueArray;
-        }
-        catch (error) {
-            logError(fileName, "initTicksValues", error);
-            return [];
-        }
-    };
-    const initSpeedometer = () => {
-        try {
-            let gauge = function (container, configuration) {
-                try {
-                    let range, r, pointerHeadLength, value, arc, scale, ticks, tickData, pointer, actualTicks;
-                    let config = {
-                        // size: 200,
-                        clipWidth: innerWidth,
-                        clipHeight: innerHeight,
-                        ringInset: 20,
-                        ringWidth: 20,
-                        pointerWidth: 10,
-                        pointerTailLength: 5,
-                        pointerHeadLengthPercent: convertStringToNumber(chartFormatOptions.plotArea.pointerHeadLength) / 10,
-                        minValue: gaugeMinMeasure,
-                        maxValue: gaugeMaxMeasure,
-                        minAngle: -90,
-                        maxAngle: 90,
-                        transitionMs: 0,
-                        majorTicks: calculatedTicksValue,
-                        labelFormat: (d) => getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d),
-                        labelInset: -5,
-                    };
-                    function deg2rad(deg) {
-                        try {
-                            return (deg * Math.PI) / 180;
-                        }
-                        catch (error) {
-                            logError(fileName, "deg2rad", error);
-                            return 0;
-                        }
-                    }
-                    function configure(configuration) {
-                        try {
-                            let prop = undefined;
-                            for (prop in configuration) {
-                                config[prop] = configuration[prop];
-                            }
-                            range = config.maxAngle - config.minAngle;
-                            pointerHeadLength = Math.round(radius * config.pointerHeadLengthPercent);
-                            scale = d3
-                                .scaleLinear()
-                                .range([0, 1])
-                                .domain([config.minValue, config.maxValue]);
-                            arc = d3
-                                .arc()
-                                .innerRadius(innerRadius)
-                                .outerRadius(radius)
-                                .startAngle((d, i) => {
-                                let ratio = (1 / config.majorTicks) * i;
-                                return deg2rad(config.minAngle + ratio * range);
-                            })
-                                .endAngle((d, i) => {
-                                let ratio = (1 / config.majorTicks) * (i + 1);
-                                return deg2rad(config.minAngle + ratio * range);
-                            });
-                        }
-                        catch (error) {
-                            logError(fileName, "configure", error);
-                        }
-                    }
-                    function render(newValue, index) {
-                        try {
-                            if (index === 0) {
-                                let arcs = chartAreaTagG
-                                    .append("g")
-                                    .attr("class", "arc")
-                                    .attr("transform", positionTransformString);
-                                arcs
-                                    .selectAll("path")
-                                    .data(colorThemeArray)
-                                    .enter()
-                                    .append("path")
-                                    .attr("fill", (d) => d)
-                                    .attr("stroke", (d) => d)
-                                    .attr("d", arc);
-                                let max = gaugeMaxMeasure;
-                                let lg = chartAreaTagG
-                                    .append("g")
-                                    .attr("class", "label")
-                                    .attr("transform", positionTransformString);
-                                lg.selectAll("text")
-                                    .data(tickValueArray)
-                                    .enter()
-                                    .append("text")
-                                    .attr("transform", function (d, i) {
-                                    let factor = (range / config.majorTicks) * i;
-                                    let newAngle = config.minAngle + factor;
-                                    return ("rotate(" +
-                                        newAngle +
-                                        ") translate(0," +
-                                        (config.labelInset - radius) +
-                                        ")");
-                                })
-                                    .attr("text-anchor", "middle")
-                                    .attr("font-size", chartFormatOptions.plotArea.dataLabelValueFontSize)
-                                    .attr("fill", chartFormatOptions.plotArea.dataLabelValueColor !==
-                                    "#ffffff"
-                                    ? chartFormatOptions.plotArea.dataLabelValueColor
-                                    : "none")
-                                    .attr("font-style", chartFormatOptions.plotArea.dataLabelValueFontStyle.includes(fontStyleOptions.italic)
-                                    ? fontStyleOptions.italic
-                                    : "")
-                                    .attr("text-decoration", chartFormatOptions.plotArea.dataLabelValueFontStyle.includes(fontStyleOptions.underline)
-                                    ? fontStyleOptions.underline
-                                    : "")
-                                    .attr("font-weight", chartFormatOptions.plotArea.dataLabelValueFontStyle.includes(fontStyleOptions.bold)
-                                    ? fontStyleOptions.bold
-                                    : "")
-                                    .attr("font-family", chartFormatOptions.plotArea.dataLabelValueFontFamily)
-                                    .text((d) => chartFormatOptions.plotArea.dataLabelNumberFormat == ",.0%"
-                                    ? (value = Math.round((d / max) * 100) + "%")
-                                    : getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d))
-                                    .attr("visibility", (d) => (d === "" ? "hidden" : "visible"));
-                            }
-                            if (chartFormatOptions.pointerValue.showPointerValue &&
-                                seriesData.length === 2) {
-                                setPointerValueText(positionTransformString);
-                            }
-                            let lineData = [
-                                [config.pointerWidth / 2, 0],
-                                [0, -pointerHeadLength],
-                                [-(config.pointerWidth / 2), 0],
-                                [0, config.pointerTailLength],
-                                [config.pointerWidth / 2, 0],
-                            ];
-                            let pointerLine = d3.line().curve(d3.curveLinear);
-                            let pg = chartAreaTagG
-                                .append("g")
-                                .data([lineData])
-                                .attr("class", "pointer")
-                                .attr("transform", positionTransformString);
-                            pointer = pg
-                                .append("path")
-                                .attr("d", index > 0 ? pointerLine : null)
-                                .attr("transform", "rotate(" + config.minAngle + ")")
-                                .attr("fill", chartFormatOptions.plotArea.pointerColor)
-                                .on("mousemove", (d, i) => {
-                                showTooltipOnMouseMove([
-                                    {
-                                        key: `${data[index].data[0].legend}`,
-                                        value: chartFormatOptions.plotArea.dataLabelNumberFormat ==
-                                            ",.0%"
-                                            ? Math.round((data[index].data[0].value /
-                                                ticks[ticks.length - 1]) *
-                                                100) + "%"
-                                            : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip
-                                                .toolTipDecimalPrecision)(data[index].data[0].value),
-                                    },
-                                ], chartFormatOptions);
-                            })
-                                .on("mouseout", () => {
-                                hideTooltipOnMouseOut();
-                            });
-                            pointer.selectAll("text").append("text").text(config.maxValue);
-                            update(newValue === undefined ? 0 : newValue);
-                        }
-                        catch (error) {
-                            logError(fileName, "gauge.render", error);
-                        }
-                    }
-                    function update(newValue, newConfiguration) {
-                        try {
-                            if (newConfiguration !== undefined) {
-                                configure(newConfiguration);
-                            }
-                            let ratio = scale(newValue);
-                            let newAngle = config.minAngle + ratio * range;
-                            pointer
-                                .transition()
-                                .duration(config.transitionMs)
-                                .ease(d3.easeElastic)
-                                .attr("transform", "rotate(" + newAngle + ")");
-                        }
-                        catch (error) {
-                            logError(fileName, "gauge.update", error);
-                        }
-                    }
-                    gaugemap.configure = configure;
-                    gaugemap.render = render;
-                    gaugemap.update = update;
-                    configure(configuration);
-                    return gaugemap;
-                }
-                catch (error) {
-                    logError(fileName, "gauge", error);
-                }
-            };
-            let powerGauge = gauge("#power-gauge", {
-                clipWidth: innerWidth,
-                clipHeight: innerHeight,
-                ringWidth: 2.75 *
-                    convertStringToNumber(chartFormatOptions.plotArea.innerRadiusForSpeedometer),
-                ringInset: 20,
-                maxValue: gaugeMaxMeasure,
-                transitionMs: 0,
-            });
-            if (seriesData.length > 0) {
-                for (let i = 0; i < seriesData.length; i++)
-                    powerGauge.render(setPointerofSpeedometer(seriesData[i], i), i);
-            }
-        }
-        catch (error) {
-            logError(fileName, "initSpeedometer", error);
-        }
-    };
-    function setPointerofSpeedometer(chartData, i) {
-        try {
-            let scale = gaugeMaxMeasure;
-            let target = chartData.data[0].value;
-            if ((scale < 0 && target > 0) || (scale > 0 && target < 0)) {
-                return 0;
-            }
-            else if (scale < 0 && target < 0 && scale > target) {
-                return scale;
-            }
-            else if (scale < 0 && target < 0 && scale < target) {
-                return target;
-            }
-            return scale > target ? target : scale;
-        }
-        catch (error) {
-            logError(fileName, "setPointerofSpeedometer", error);
-            return 0;
-        }
-    }
-    function setPointerValueText(positionTransformString) {
-        try {
-            let KPIName = "";
-            if (chartFormatOptions.pointerValue.kpiAlias) {
-                KPIName = chartFormatOptions.pointerValue.kpiAliasText;
-            }
-            else {
-                switch (chartFormatOptions.pointerValue.connectorKPIforSpeedometer) {
-                    case connectorKPIforSpeedometerType.PointerValue:
-                        KPIName = "Pointer Value";
-                        break;
-                    case connectorKPIforSpeedometerType.Absolute:
-                        KPIName = "Absolute Value";
-                        break;
-                    case connectorKPIforSpeedometerType.CAGR:
-                        KPIName = "CAGR";
-                        break;
-                    case connectorKPIforSpeedometerType.PercentageGrowth:
-                        KPIName = "Percentage Growth";
-                        break;
-                }
-            }
-            let valuefontStyle = chartFormatOptions.pointerValue.pointerValueFontStyle;
-            let comparedValue = chartAreaTagG
-                .append("g")
-                .attr("class", "label")
-                .attr("transform", positionTransformString);
-            comparedValue
-                .selectAll("text")
-                .data(["chartData.dataArray[1].maximumMeasure"])
-                .enter()
-                .append("text")
-                .attr("dy", "24")
-                .attr("text-anchor", "middle") //(d,i)=> i === ticks.length ? "end" :
-                .attr("font-size", chartFormatOptions.pointerValue.pointerValueFontSize)
-                .attr("fill", chartFormatOptions.pointerValue.pointerValueColor !== "#ffffff"
-                ? chartFormatOptions.pointerValue.pointerValueColor
-                : "none")
-                .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
-                : "")
-                .attr("font-family", chartFormatOptions.pointerValue.pointerValueFontFamily)
-                .text((d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias || d != 0
-                ? getNumberWithFormatFunction("None", chartFormatOptions.pointerValue.pointerValueNumberFormat, chartFormatOptions.pointerValue.pointerValueDecimalPrecision)(data[1].data[0].value)
-                : chartFormatOptions.pointerValue.pointerValueAliasText}`)
-                .attr("visibility", chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden");
-        }
-        catch (error) {
-            logError(fileName, "setPointerValueText", 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 Speedometer;