pace-chart-lib 1.0.2 → 1.0.3

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

@@ -1,391 +0,0 @@
-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;