pace-chart-lib 0.0.6 → 0.0.8

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

@@ -0,0 +1,3 @@
+import { IChartProps } from "../ChartsWithoutAxisTypes.types";
+declare const Speedometer: React.FC<IChartProps>;
+export default Speedometer;

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

@@ -0,0 +1,514 @@
+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);
+    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 &&
+                                data.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 (data.length > 0) {
+                for (let i = 0; i < data.length; i++)
+                    powerGauge.render(setPointerofSpeedometer(data[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;

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

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