pace-chart-lib 0.0.6 → 0.0.8

package/dist/components/Charts/ChartsWithoutAxis/Maps/Maps.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IMapsProps } from "../../Core/Common.types";
+declare const Maps: React.FC<IMapsProps>;
+export default Maps;

package/dist/components/Charts/ChartsWithoutAxis/Maps/Maps.js

@@ -0,0 +1,391 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+//#region imports
+import * as d3 from "d3";
+import { useEffect, useRef } from "react";
+import { fontStyleOptions, } from "../../Core/Common.types";
+import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, marginCalculationsForChartsWithoutLegends, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
+import { chartMargins } from "../../Core/DefaultProperties.types";
+import { unitedStates } from "./Cordinates";
+import { logError } from "../../../../Services/ErrorLog";
+//#endregion
+const Maps = ({ data, geoJsonNode, formatOptions, chartId, }) => {
+    //#region Variables
+    const svgRef = useRef(); // Reference to the SVG element
+    let seriesData = generalizedChartData(data); // Data for the word cloud, expected to be an array of objects with properties
+    let chartFormatOptions; // Format options for the chart
+    let width; // svg total width
+    let height; // svg total height
+    let min = Number.MAX_VALUE; // svg total height
+    let max = Number.MIN_VALUE; // 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; // Group element for the chart area
+    let svg; // SVG element for the chart
+    let valueIndex = 0; // Index for the value in the data series
+    let bubbleIndex = 1; // Index for the bubble in the data series
+    let cordinatesData; // Data for the map coordinates, initially undefined
+    let actualNameToGroupedNameMap = new Map(); // Map to hold actual names to grouped names
+    let actualNameToAliasedNameMap = new Map(); // Map to hold aliased names to actual names
+    let nameToDataMap = new Map(); // Map to hold names to data series
+    let valueMin = Number.MAX_VALUE; // Minimum value for the data series
+    let valueMax = Number.MIN_VALUE; // Maximum value for the data series
+    let bubbleMin = Number.MAX_VALUE; // Minimum value for bubble size
+    let bubbleMax = Number.MIN_VALUE; // Max;imum value for bubble size
+    let totalValue = 0; // Total value for the data series
+    let bubbleTotal = 0; // Total value for bubble size
+    let colorScale;
+    let colorScaleForMapsBubble; // Color scale for the bubbles
+    //#endregion
+    useEffect(() => {
+        drawChart();
+    }, [formatOptions, chartId]);
+    const drawChart = () => {
+        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
+        ({ margins, chartTitleHeight, innerHeight, innerWidth } =
+            marginCalculationsForChartsWithoutLegends(chartFormatOptions, height, width));
+        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
+        chartAreaTagG = initChartArea(svg, margins);
+        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
+        dataPreparation(data);
+        readMapsCordinateFile(data);
+        generateDataForMaps();
+        drawMap();
+    };
+    const dataPreparation = (data) => {
+        try {
+            let uniqueValues = new Set();
+            let bubbleUniqueValues = new Set();
+            data.forEach((series) => {
+                series.data.forEach((dataPoint, index) => {
+                    if (index === valueIndex) {
+                        uniqueValues.add(dataPoint.value.toString());
+                        totalValue += dataPoint.value;
+                    }
+                    if (index === bubbleIndex) {
+                        bubbleUniqueValues.add(dataPoint.value.toString());
+                        bubbleTotal += dataPoint.value;
+                    }
+                });
+            });
+            let startColor = chartFormatOptions.colorScaleForMaps &&
+                chartFormatOptions.colorScaleForMaps.startColorForMaps
+                ? chartFormatOptions.colorScaleForMaps.startColorForMaps
+                : "#c1d8f3";
+            let endColor = chartFormatOptions.colorScaleForMaps &&
+                chartFormatOptions.colorScaleForMaps.endColorForMaps
+                ? chartFormatOptions.colorScaleForMaps.endColorForMaps
+                : "#4c6ba5";
+            if (uniqueValues.size === 1) {
+                colorScale = () => startColor; // Single value — one color
+            }
+            else {
+                const interpolator = d3.interpolateLab(startColor, endColor);
+                colorScale = d3
+                    .scaleOrdinal()
+                    .domain(Array.from(uniqueValues))
+                    .range(Array.from(uniqueValues).map((_, i) => interpolator(i / (uniqueValues.size - 1))));
+            }
+            if (bubbleUniqueValues.size === 1) {
+                colorScaleForMapsBubble = () => startColor; // Single value — one color
+            }
+            else {
+                const interpolator = d3.interpolateLab(chartFormatOptions.colorScaleForMapsBubble.startColorForMapsBubble, chartFormatOptions.colorScaleForMapsBubble.endColorForMapsBubble);
+                colorScaleForMapsBubble = d3
+                    .scaleOrdinal()
+                    .domain(Array.from(bubbleUniqueValues))
+                    .range(Array.from(bubbleUniqueValues).map((_, i) => interpolator(i / (bubbleUniqueValues.size - 1))));
+            }
+        }
+        catch (error) {
+            logError("Maps.tsx", "dataPreparation", error);
+        }
+    };
+    const readMapsCordinateFile = (data) => {
+        cordinatesData = unitedStates; // Use the hardcoded cordinates data for the map
+    };
+    const generateDataForMaps = () => {
+        try {
+            seriesData?.forEach((series) => {
+                nameToDataMap.set(series.legend, series);
+            });
+            geoJsonNode.mappings.forEach((mapping) => {
+                actualNameToAliasedNameMap.set(mapping.actualName, mapping.mappedName);
+            });
+            geoJsonNode.groups.forEach((groupObject) => {
+                groupObject.groupedRegions.forEach((region) => {
+                    actualNameToGroupedNameMap.set(region, groupObject.groupName);
+                });
+            });
+            cordinatesData.features.forEach((feature) => {
+                const regionName = feature.properties.name;
+                let name;
+                if (actualNameToAliasedNameMap.has(regionName)) {
+                    const aliasedRegion = actualNameToAliasedNameMap.get(regionName);
+                    feature.properties["displayName"] = aliasedRegion;
+                    name = aliasedRegion;
+                }
+                if (actualNameToGroupedNameMap.has(regionName)) {
+                    const groupedRegion = actualNameToGroupedNameMap.get(regionName);
+                    feature.properties["displayName"] = groupedRegion;
+                    name = groupedRegion;
+                }
+                else {
+                    name = regionName;
+                }
+                if (nameToDataMap.has(name)) {
+                    const dataSeries = nameToDataMap.get(name);
+                    feature.properties["data"] = dataSeries;
+                    let value;
+                    if (dataSeries.data && dataSeries.data[1]) {
+                        value = dataSeries.data[1] ? dataSeries.data[1].value : 0;
+                        bubbleMin = Math.min(bubbleMin, value);
+                        bubbleMax = Math.max(bubbleMax, value);
+                    }
+                    if (dataSeries.data && dataSeries.data[0]) {
+                        value = dataSeries.data[0].value;
+                        min = Math.min(min, value);
+                        max = Math.max(max, value);
+                    }
+                }
+                else {
+                    feature.properties["data"] = undefined; // Default value if no data series found
+                }
+            });
+        }
+        catch (error) {
+            logError("Maps.tsx", "generateDataForMaps", error);
+        }
+    };
+    const drawMap = () => {
+        //#region Drawing the map
+        try {
+            let totalArea = 0;
+            const Projection = d3
+                .geoAlbersUsa()
+                .fitSize([innerWidth, innerHeight], cordinatesData);
+            const pathGenerator = d3.geoPath().projection(Projection);
+            const paths = chartAreaTagG.append("g").attr("class", "paths");
+            paths
+                .selectAll(chartId + " .path-group")
+                .data(cordinatesData.features)
+                .enter()
+                .append("path")
+                .attr("id", (d) => d.properties.name)
+                .attr("fill", (d, i) => getMapColor(d))
+                .attr("stroke", (d) => (d.properties.data ? "unset" : "#CCCCCC"))
+                .attr("fill-opacity", chartFormatOptions.plotArea.opacity)
+                .attr("stroke-width", "0.4px")
+                .attr("d", (d) => {
+                totalArea += pathGenerator.area(d);
+                return pathGenerator(d);
+            })
+                .on("mousemove", (event, d) => {
+                let data = d.properties.data;
+                if (data) {
+                    let keyValueObject = data.data.map((keyValue) => ({
+                        key: keyValue.dimension,
+                        value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(keyValue.value),
+                    }));
+                    showTooltipOnMouseMove([
+                        {
+                            key: "Region",
+                            value: data.properties.alias,
+                        },
+                        ...keyValueObject,
+                    ], chartFormatOptions);
+                }
+            })
+                .on("mouseout", (event, d) => {
+                hideTooltipOnMouseOut();
+            });
+            //#endregion
+            //#region Labels
+            if (chartFormatOptions.plotArea.dataLabels) {
+                const avgArea = totalArea / cordinatesData.features.length;
+                const isLabelVisible = chartFormatOptions.plotArea.dataLabelName;
+                const isValueVisible = chartFormatOptions.plotArea.dataLabelValue;
+                const isSmallArea = (d) => chartFormatOptions.dataLabelOverlappingToggle.dataLabelOverlap &&
+                    d.geometry.type === "Polygon"
+                    ? pathGenerator.area(d) < avgArea * 0.25
+                    : false;
+                paths
+                    .selectAll(".text-container")
+                    .data(cordinatesData.features)
+                    .enter()
+                    .append("foreignObject")
+                    .style("pointer-events", "none")
+                    .attr("class", "text-container")
+                    .attr("x", (d) => {
+                    const centroid = pathGenerator.centroid(d);
+                    return centroid[0] - 50; // Adjust x-position based on text width
+                })
+                    .attr("y", (d) => {
+                    const centroid = pathGenerator.centroid(d);
+                    return isLabelVisible && isValueVisible
+                        ? centroid[1] - 15
+                        : centroid[1] - 10; // Adjust y-position based on text height
+                })
+                    .attr("width", 100)
+                    .attr("height", 40)
+                    .append("xhtml:div")
+                    .html((d) => {
+                    let data = d.properties.data;
+                    if ((isLabelVisible || isValueVisible) && data && !isSmallArea(d)) {
+                        if (isSmallArea(d))
+                            return null;
+                        const name = data?.properties.alias || d.properties.displayName;
+                        const value = chartFormatOptions.plotArea.dataLabelNumberFormat == ",.0%"
+                            ? Math.round((d.properties.data.data[0].value / totalValue) * 100) + "%"
+                            : getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d.properties.data.data[0].value);
+                        let htmlString = "";
+                        if (chartFormatOptions.plotArea.dataLabelName) {
+                            htmlString += `<div style=
+          "text-align:center; 
+          font-family:${d.properties.data.properties.labelFont}; 
+          font-size:${d.properties.data.properties.labelFontSize}px; 
+          font-weight:${d.properties.data.properties.labelFontStyle.includes(fontStyleOptions.bold)
+                                ? fontStyleOptions.bold
+                                : "normal"}; 
+          font-style:${d.properties.data.properties.labelFontStyle.includes(fontStyleOptions.italic)
+                                ? fontStyleOptions.italic
+                                : "normal"}; 
+          text-decoration:${d.properties.data.properties.labelFontStyle.includes(fontStyleOptions.underline)
+                                ? fontStyleOptions.underline
+                                : "none"}; 
+          color:${d.properties.data.properties.labelFontColor};">
+          ${name ?? ""}
+          </div>`;
+                        }
+                        if (chartFormatOptions.plotArea.dataLabelValue) {
+                            htmlString += `<div style=
+          "text-align:center; 
+          font-family:${d.properties.data.properties.valueFont}; font-size:${d.properties.data.properties.valueFontSize}px; 
+          font-weight:${d.properties.data.properties.valueFontStyle.includes(fontStyleOptions.bold)
+                                ? fontStyleOptions.bold
+                                : "normal"}; 
+          font-style:${d.properties.data.properties.valueFontStyle.includes(fontStyleOptions.italic)
+                                ? fontStyleOptions.italic
+                                : "normal"}; 
+          text-decoration:${d.properties.data.properties.valueFontStyle.includes(fontStyleOptions.underline)
+                                ? fontStyleOptions.underline
+                                : "none"}; 
+          color:${d.properties.data.properties.valueFontColor};">
+          ${value ?? ""}
+          </div>`;
+                        }
+                        return htmlString;
+                    }
+                    return null;
+                });
+            }
+            //#endregion
+            // will introduce zoom and pan functionality later
+            // #region Zoom and Pan
+            // const ZOOM_KEY = "myZoomTransform";
+            // // 1. Load saved transform from localStorage (if exists)
+            // let savedTransform = d3.zoomIdentity;
+            // const stored = localStorage.getItem(ZOOM_KEY);
+            // if (stored) {
+            //   try {
+            //     const { x, y, k } = JSON.parse(stored);
+            //     savedTransform = d3.zoomIdentity.translate(x, y).scale(k);
+            //   } catch (e) {
+            //     console.warn("Invalid zoom transform in storage:", e);
+            //   }
+            // }
+            // // 2. Setup zoom behavior
+            // const zoom = d3
+            //   .zoom()
+            //   .scaleExtent([1, 8])
+            //   .on("zoom", (event) => {
+            //     const t = event.transform;
+            //     Paths.attr("transform", t);
+            //     // 3. Save transform to localStorage
+            //     localStorage.setItem(ZOOM_KEY, JSON.stringify(t));
+            //   });
+            // // 4. Call zoom and apply saved transform
+            // svg.call(zoom).call(zoom.transform, savedTransform);
+            //#endregion
+            //#region bubble
+            if (chartFormatOptions.bubbleformatting.showBubble) {
+                let minDim = Math.min(innerWidth, innerHeight);
+                const scaleCircle = d3
+                    .scaleLinear()
+                    .domain([bubbleMin, bubbleMax])
+                    .range([minDim * 0.01, minDim * 0.07]);
+                chartAreaTagG
+                    .selectAll("myCircles")
+                    .data(cordinatesData.features)
+                    .join("circle")
+                    .attr("cx", (d) => pathGenerator.centroid(d)[0])
+                    .attr("cy", (d) => pathGenerator.centroid(d)[1])
+                    .attr("r", (d) => d.properties.data
+                    ? scaleCircle(d.properties.data?.data[1]?.value || 0)
+                    : 0)
+                    // .attr("fill", chartFormatOptions.bubbleformatting && chartFormatOptions.bubbleformatting.BubbleColor)
+                    .attr("fill", (d, i) => chartFormatOptions.colorScaleForMapsBubble.showColorForMapsBubble ==
+                    "2"
+                    ? colorScaleForMapsBubble(d.properties.data
+                        ? d.properties.data.data[bubbleIndex]?.value || 0
+                        : 0)
+                    : chartFormatOptions.bubbleformatting.bubbleColor)
+                    .attr("stroke", chartFormatOptions.bubbleformatting &&
+                    chartFormatOptions.bubbleformatting.bubbleBorderColor)
+                    .attr("stroke-width", chartFormatOptions.bubbleformatting &&
+                    chartFormatOptions.bubbleformatting.bubbleBorderWidth)
+                    .attr("fill-opacity", chartFormatOptions.bubbleformatting &&
+                    convertStringToNumber(chartFormatOptions.bubbleformatting.bubbleOpacity) / 10)
+                    .on("mousemove", function (event, d) {
+                    showTooltipOnMouseMove([
+                        {
+                            key: "Region",
+                            value: d.properties?.data?.propeties?.Alias,
+                        },
+                        {
+                            key: d.properties.data?.data[1]?.dimension,
+                            value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%"
+                                ? Math.round((d.properties.data?.data[1]?.value / bubbleTotal) *
+                                    100) + "%"
+                                : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.properties.data?.data[1]?.value),
+                        },
+                    ], chartFormatOptions);
+                    d3.select(this).style("r", (d.properties.data
+                        ? scaleCircle(d.properties.data?.data[1]?.value || 0)
+                        : 0) * 1.2);
+                })
+                    .on("mouseout", function (event, d) {
+                    hideTooltipOnMouseOut();
+                    d3.select(this).style("r", d.properties.data
+                        ? scaleCircle(d.properties.data?.data[1]?.value || 0)
+                        : 0);
+                });
+            }
+            //#endregion
+        }
+        catch (error) {
+            logError("Maps.tsx", "drawMap", error);
+        }
+    };
+    const getMapColor = (d) => {
+        try {
+            let data = d.properties.data;
+            switch (parseInt(chartFormatOptions.colorScaleForMaps.showColorForMaps)) {
+                case 1:
+                    return data ? data.properties.color : "#E6E6E6";
+                case 2:
+                    return chartFormatOptions.colorScaleForMaps.defaultColor;
+                case 3:
+                    return d.properties.data
+                        ? colorScale(d.properties.data?.data[valueIndex]?.value)
+                        : "#E6E6E6";
+            }
+        }
+        catch (error) {
+            logError("Maps.tsx", "getMapColor", error);
+        }
+    };
+    return (_jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx("svg", { id: chartId, className: "chartSVG", style: { width: "100%", height: "100%" }, ref: svgRef }) }));
+};
+export default Maps;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TBubbleChartProps } from "../../Core/Common.types";
+declare const BubbleChart: React.FC<TBubbleChartProps>;
+export default BubbleChart;