@quillsql/react 2.13.39 → 2.13.41

package/dist/esm/components/Chart/MapChart.js

@@ -0,0 +1,541 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposableMap, Geographies, Geography, useMapContext } from "react-simple-maps";
+import { geoCentroid } from "d3-geo";
+import { scaleLog } from "d3-scale";
+import { useMemo, useRef, useState } from "react";
+import ChartTooltipFrame from "./ChartTooltipFrame";
+import ChartTooltipRow from "./ChartTooltipRow";
+import { valueFormatter } from "../../utils/valueFormatter";
+const statesUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+const countriesUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json";
+const fipsToNames = {
+    '01': { name: 'Alabama', abbreviation: 'AL' },
+    '02': { name: 'Alaska', abbreviation: 'AK' },
+    '04': { name: 'Arizona', abbreviation: 'AZ' },
+    '05': { name: 'Arkansas', abbreviation: 'AR' },
+    '06': { name: 'California', abbreviation: 'CA' },
+    '08': { name: 'Colorado', abbreviation: 'CO' },
+    '09': { name: 'Connecticut', abbreviation: 'CT' },
+    '10': { name: 'Delaware', abbreviation: 'DE' },
+    '12': { name: 'Florida', abbreviation: 'FL' },
+    '13': { name: 'Georgia', abbreviation: 'GA' },
+    '15': { name: 'Hawaii', abbreviation: 'HI' },
+    '16': { name: 'Idaho', abbreviation: 'ID' },
+    '17': { name: 'Illinois', abbreviation: 'IL' },
+    '18': { name: 'Indiana', abbreviation: 'IN' },
+    '19': { name: 'Iowa', abbreviation: 'IA' },
+    '20': { name: 'Kansas', abbreviation: 'KS' },
+    '21': { name: 'Kentucky', abbreviation: 'KY' },
+    '22': { name: 'Louisiana', abbreviation: 'LA' },
+    '23': { name: 'Maine', abbreviation: 'ME' },
+    '24': { name: 'Maryland', abbreviation: 'MD' },
+    '25': { name: 'Massachusetts', abbreviation: 'MA' },
+    '26': { name: 'Michigan', abbreviation: 'MI' },
+    '27': { name: 'Minnesota', abbreviation: 'MN' },
+    '28': { name: 'Mississippi', abbreviation: 'MS' },
+    '29': { name: 'Missouri', abbreviation: 'MO' },
+    '30': { name: 'Montana', abbreviation: 'MT' },
+    '31': { name: 'Nebraska', abbreviation: 'NE' },
+    '32': { name: 'Nevada', abbreviation: 'NV' },
+    '33': { name: 'New Hampshire', abbreviation: 'NH' },
+    '34': { name: 'New Jersey', abbreviation: 'NJ' },
+    '35': { name: 'New Mexico', abbreviation: 'NM' },
+    '36': { name: 'New York', abbreviation: 'NY' },
+    '37': { name: 'North Carolina', abbreviation: 'NC' },
+    '38': { name: 'North Dakota', abbreviation: 'ND' },
+    '39': { name: 'Ohio', abbreviation: 'OH' },
+    '40': { name: 'Oklahoma', abbreviation: 'OK' },
+    '41': { name: 'Oregon', abbreviation: 'OR' },
+    '42': { name: 'Pennsylvania', abbreviation: 'PA' },
+    '44': { name: 'Rhode Island', abbreviation: 'RI' },
+    '45': { name: 'South Carolina', abbreviation: 'SC' },
+    '46': { name: 'South Dakota', abbreviation: 'SD' },
+    '47': { name: 'Tennessee', abbreviation: 'TN' },
+    '48': { name: 'Texas', abbreviation: 'TX' },
+    '49': { name: 'Utah', abbreviation: 'UT' },
+    '50': { name: 'Vermont', abbreviation: 'VT' },
+    '51': { name: 'Virginia', abbreviation: 'VA' },
+    '53': { name: 'Washington', abbreviation: 'WA' },
+    '54': { name: 'West Virginia', abbreviation: 'WV' },
+    '55': { name: 'Wisconsin', abbreviation: 'WI' },
+    '56': { name: 'Wyoming', abbreviation: 'WY' },
+    '72': { name: 'Puerto Rico', abbreviation: 'PR' },
+};
+const isoToNames = {
+    '004': { name: 'Afghanistan', abbreviation: 'AF' },
+    '008': { name: 'Albania', abbreviation: 'AL' },
+    '010': { name: 'Antarctica', abbreviation: 'AQ' },
+    '012': { name: 'Algeria', abbreviation: 'DZ' },
+    '016': { name: 'American Samoa', abbreviation: 'AS' },
+    '020': { name: 'Andorra', abbreviation: 'AD' },
+    '024': { name: 'Angola', abbreviation: 'AO' },
+    '028': { name: 'Antigua and Barbuda', abbreviation: 'AG' },
+    '031': { name: 'Azerbaijan', abbreviation: 'AZ' },
+    '032': { name: 'Argentina', abbreviation: 'AR' },
+    '036': { name: 'Australia', abbreviation: 'AU' },
+    '040': { name: 'Austria', abbreviation: 'AT' },
+    '044': { name: 'Bahamas', abbreviation: 'BS' },
+    '048': { name: 'Bahrain', abbreviation: 'BH' },
+    '050': { name: 'Bangladesh', abbreviation: 'BD' },
+    '051': { name: 'Armenia', abbreviation: 'AM' },
+    '052': { name: 'Barbados', abbreviation: 'BB' },
+    '056': { name: 'Belgium', abbreviation: 'BE' },
+    '060': { name: 'Bermuda', abbreviation: 'BM' },
+    '064': { name: 'Bhutan', abbreviation: 'BT' },
+    '068': { name: 'Bolivia', abbreviation: 'BO' },
+    '070': { name: 'Bosnia and Herzegovina', abbreviation: 'BA' },
+    '072': { name: 'Botswana', abbreviation: 'BW' },
+    '074': { name: 'Bouvet Island', abbreviation: 'BV' },
+    '076': { name: 'Brazil', abbreviation: 'BR' },
+    '084': { name: 'Belize', abbreviation: 'BZ' },
+    '086': { name: 'British Indian Ocean Territory', abbreviation: 'IO' },
+    '090': { name: 'Solomon Islands', abbreviation: 'SB' },
+    '092': { name: 'British Virgin Islands', abbreviation: 'VG' },
+    '096': { name: 'Brunei', abbreviation: 'BN' },
+    '100': { name: 'Bulgaria', abbreviation: 'BG' },
+    '104': { name: 'Myanmar', abbreviation: 'MM' },
+    '108': { name: 'Burundi', abbreviation: 'BI' },
+    '112': { name: 'Belarus', abbreviation: 'BY' },
+    '116': { name: 'Cambodia', abbreviation: 'KH' },
+    '120': { name: 'Cameroon', abbreviation: 'CM' },
+    '124': { name: 'Canada', abbreviation: 'CA' },
+    '132': { name: 'Cape Verde', abbreviation: 'CV' },
+    '136': { name: 'Cayman Islands', abbreviation: 'KY' },
+    '140': { name: 'Central African Republic', abbreviation: 'CF' },
+    '144': { name: 'Sri Lanka', abbreviation: 'LK' },
+    '148': { name: 'Chad', abbreviation: 'TD' },
+    '152': { name: 'Chile', abbreviation: 'CL' },
+    '156': { name: 'China', abbreviation: 'CN' },
+    '158': { name: 'Taiwan', abbreviation: 'TW' },
+    '162': { name: 'Christmas Island', abbreviation: 'CX' },
+    '166': { name: 'Cocos (Keeling) Islands', abbreviation: 'CC' },
+    '170': { name: 'Colombia', abbreviation: 'CO' },
+    '174': { name: 'Comoros', abbreviation: 'KM' },
+    '175': { name: 'Mayotte', abbreviation: 'YT' },
+    '178': { name: 'Republic of the Congo', abbreviation: 'CG' },
+    '180': { name: 'Democratic Republic of the Congo', abbreviation: 'CD' },
+    '184': { name: 'Cook Islands', abbreviation: 'CK' },
+    '188': { name: 'Costa Rica', abbreviation: 'CR' },
+    '191': { name: 'Croatia', abbreviation: 'HR' },
+    '192': { name: 'Cuba', abbreviation: 'CU' },
+    '196': { name: 'Cyprus', abbreviation: 'CY' },
+    '203': { name: 'Czech Republic', abbreviation: 'CZ' },
+    '204': { name: 'Benin', abbreviation: 'BJ' },
+    '208': { name: 'Denmark', abbreviation: 'DK' },
+    '212': { name: 'Dominica', abbreviation: 'DM' },
+    '214': { name: 'Dominican Republic', abbreviation: 'DO' },
+    '218': { name: 'Ecuador', abbreviation: 'EC' },
+    '222': { name: 'El Salvador', abbreviation: 'SV' },
+    '226': { name: 'Equatorial Guinea', abbreviation: 'GQ' },
+    '231': { name: 'Ethiopia', abbreviation: 'ET' },
+    '232': { name: 'Eritrea', abbreviation: 'ER' },
+    '233': { name: 'Estonia', abbreviation: 'EE' },
+    '234': { name: 'Faroe Islands', abbreviation: 'FO' },
+    '238': { name: 'Falkland Islands', abbreviation: 'FK' },
+    '239': { name: 'South Georgia and the South Sandwich Islands', abbreviation: 'GS' },
+    '242': { name: 'Fiji', abbreviation: 'FJ' },
+    '246': { name: 'Finland', abbreviation: 'FI' },
+    '248': { name: 'Åland Islands', abbreviation: 'AX' },
+    '250': { name: 'France', abbreviation: 'FR' },
+    '254': { name: 'French Guiana', abbreviation: 'GF' },
+    '258': { name: 'French Polynesia', abbreviation: 'PF' },
+    '260': { name: 'French Southern and Antarctic Lands', abbreviation: 'TF' },
+    '262': { name: 'Djibouti', abbreviation: 'DJ' },
+    '266': { name: 'Gabon', abbreviation: 'GA' },
+    '268': { name: 'Georgia', abbreviation: 'GE' },
+    '270': { name: 'Gambia', abbreviation: 'GM' },
+    '275': { name: 'Palestine', abbreviation: 'PS' },
+    '276': { name: 'Germany', abbreviation: 'DE' },
+    '288': { name: 'Ghana', abbreviation: 'GH' },
+    '292': { name: 'Gibraltar', abbreviation: 'GI' },
+    '296': { name: 'Kiribati', abbreviation: 'KI' },
+    '300': { name: 'Greece', abbreviation: 'GR' },
+    '304': { name: 'Greenland', abbreviation: 'GL' },
+    '308': { name: 'Grenada', abbreviation: 'GD' },
+    '312': { name: 'Guadeloupe', abbreviation: 'GP' },
+    '316': { name: 'Guam', abbreviation: 'GU' },
+    '320': { name: 'Guatemala', abbreviation: 'GT' },
+    '324': { name: 'Guinea', abbreviation: 'GN' },
+    '328': { name: 'Guyana', abbreviation: 'GY' },
+    '332': { name: 'Haiti', abbreviation: 'HT' },
+    '334': { name: 'Heard Island and McDonald Islands', abbreviation: 'HM' },
+    '336': { name: 'Vatican City', abbreviation: 'VA' },
+    '340': { name: 'Honduras', abbreviation: 'HN' },
+    '344': { name: 'Hong Kong', abbreviation: 'HK' },
+    '348': { name: 'Hungary', abbreviation: 'HU' },
+    '352': { name: 'Iceland', abbreviation: 'IS' },
+    '356': { name: 'India', abbreviation: 'IN' },
+    '360': { name: 'Indonesia', abbreviation: 'ID' },
+    '364': { name: 'Iran', abbreviation: 'IR' },
+    '368': { name: 'Iraq', abbreviation: 'IQ' },
+    '372': { name: 'Ireland', abbreviation: 'IE' },
+    '376': { name: 'Israel', abbreviation: 'IL' },
+    '380': { name: 'Italy', abbreviation: 'IT' },
+    '384': { name: 'Ivory Coast', abbreviation: 'CI' },
+    '388': { name: 'Jamaica', abbreviation: 'JM' },
+    '392': { name: 'Japan', abbreviation: 'JP' },
+    '398': { name: 'Kazakhstan', abbreviation: 'KZ' },
+    '400': { name: 'Jordan', abbreviation: 'JO' },
+    '404': { name: 'Kenya', abbreviation: 'KE' },
+    '408': { name: 'North Korea', abbreviation: 'KP' },
+    '410': { name: 'South Korea', abbreviation: 'KR' },
+    '414': { name: 'Kuwait', abbreviation: 'KW' },
+    '417': { name: 'Kyrgyzstan', abbreviation: 'KG' },
+    '418': { name: 'Laos', abbreviation: 'LA' },
+    '422': { name: 'Lebanon', abbreviation: 'LB' },
+    '426': { name: 'Lesotho', abbreviation: 'LS' },
+    '428': { name: 'Latvia', abbreviation: 'LV' },
+    '430': { name: 'Liberia', abbreviation: 'LR' },
+    '434': { name: 'Libya', abbreviation: 'LY' },
+    '438': { name: 'Liechtenstein', abbreviation: 'LI' },
+    '440': { name: 'Lithuania', abbreviation: 'LT' },
+    '442': { name: 'Luxembourg', abbreviation: 'LU' },
+    '446': { name: 'Macau', abbreviation: 'MO' },
+    '450': { name: 'Madagascar', abbreviation: 'MG' },
+    '454': { name: 'Malawi', abbreviation: 'MW' },
+    '458': { name: 'Malaysia', abbreviation: 'MY' },
+    '462': { name: 'Maldives', abbreviation: 'MV' },
+    '466': { name: 'Mali', abbreviation: 'ML' },
+    '470': { name: 'Malta', abbreviation: 'MT' },
+    '474': { name: 'Martinique', abbreviation: 'MQ' },
+    '478': { name: 'Mauritania', abbreviation: 'MR' },
+    '480': { name: 'Mauritius', abbreviation: 'MU' },
+    '484': { name: 'Mexico', abbreviation: 'MX' },
+    '492': { name: 'Monaco', abbreviation: 'MC' },
+    '496': { name: 'Mongolia', abbreviation: 'MN' },
+    '498': { name: 'Moldova', abbreviation: 'MD' },
+    '499': { name: 'Montenegro', abbreviation: 'ME' },
+    '500': { name: 'Montserrat', abbreviation: 'MS' },
+    '504': { name: 'Morocco', abbreviation: 'MA' },
+    '508': { name: 'Mozambique', abbreviation: 'MZ' },
+    '512': { name: 'Oman', abbreviation: 'OM' },
+    '516': { name: 'Namibia', abbreviation: 'NA' },
+    '520': { name: 'Nauru', abbreviation: 'NR' },
+    '524': { name: 'Nepal', abbreviation: 'NP' },
+    '528': { name: 'Netherlands', abbreviation: 'NL' },
+    '531': { name: 'Curaçao', abbreviation: 'CW' },
+    '533': { name: 'Aruba', abbreviation: 'AW' },
+    '534': { name: 'Sint Maarten', abbreviation: 'SX' },
+    '535': { name: 'Bonaire, Sint Eustatius and Saba', abbreviation: 'BQ' },
+    '540': { name: 'New Caledonia', abbreviation: 'NC' },
+    '548': { name: 'Vanuatu', abbreviation: 'VU' },
+    '554': { name: 'New Zealand', abbreviation: 'NZ' },
+    '558': { name: 'Nicaragua', abbreviation: 'NI' },
+    '562': { name: 'Niger', abbreviation: 'NE' },
+    '566': { name: 'Nigeria', abbreviation: 'NG' },
+    '570': { name: 'Niue', abbreviation: 'NU' },
+    '574': { name: 'Norfolk Island', abbreviation: 'NF' },
+    '578': { name: 'Norway', abbreviation: 'NO' },
+    '580': { name: 'Northern Mariana Islands', abbreviation: 'MP' },
+    '581': { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
+    '583': { name: 'Federated States of Micronesia', abbreviation: 'FM' },
+    '584': { name: 'Marshall Islands', abbreviation: 'MH' },
+    '585': { name: 'Palau', abbreviation: 'PW' },
+    '586': { name: 'Pakistan', abbreviation: 'PK' },
+    '591': { name: 'Panama', abbreviation: 'PA' },
+    '598': { name: 'Papua New Guinea', abbreviation: 'PG' },
+    '600': { name: 'Paraguay', abbreviation: 'PY' },
+    '604': { name: 'Peru', abbreviation: 'PE' },
+    '608': { name: 'Philippines', abbreviation: 'PH' },
+    '612': { name: 'Pitcairn Islands', abbreviation: 'PN' },
+    '616': { name: 'Poland', abbreviation: 'PL' },
+    '620': { name: 'Portugal', abbreviation: 'PT' },
+    '624': { name: 'Guinea-Bissau', abbreviation: 'GW' },
+    '626': { name: 'Timor-Leste', abbreviation: 'TL' },
+    '630': { name: 'Puerto Rico', abbreviation: 'PR' },
+    '634': { name: 'Qatar', abbreviation: 'QA' },
+    '638': { name: 'Réunion', abbreviation: 'RE' },
+    '642': { name: 'Romania', abbreviation: 'RO' },
+    '643': { name: 'Russia', abbreviation: 'RU' },
+    '646': { name: 'Rwanda', abbreviation: 'RW' },
+    '652': { name: 'Saint Barthélemy', abbreviation: 'BL' },
+    '654': { name: 'Saint Helena, Ascension and Tristan da Cunha', abbreviation: 'SH' },
+    '659': { name: 'Saint Kitts and Nevis', abbreviation: 'KN' },
+    '660': { name: 'Anguilla', abbreviation: 'AI' },
+    '662': { name: 'Saint Lucia', abbreviation: 'LC' },
+    '663': { name: 'Saint Martin', abbreviation: 'MF' },
+    '666': { name: 'Saint Pierre and Miquelon', abbreviation: 'PM' },
+    '670': { name: 'Saint Vincent and the Grenadines', abbreviation: 'VC' },
+    '674': { name: 'San Marino', abbreviation: 'SM' },
+    '678': { name: 'São Tomé and Príncipe', abbreviation: 'ST' },
+    '682': { name: 'Saudi Arabia', abbreviation: 'SA' },
+    '686': { name: 'Senegal', abbreviation: 'SN' },
+    '688': { name: 'Serbia', abbreviation: 'RS' },
+    '690': { name: 'Seychelles', abbreviation: 'SC' },
+    '694': { name: 'Sierra Leone', abbreviation: 'SL' },
+    '702': { name: 'Singapore', abbreviation: 'SG' },
+    '703': { name: 'Slovakia', abbreviation: 'SK' },
+    '704': { name: 'Vietnam', abbreviation: 'VN' },
+    '705': { name: 'Slovenia', abbreviation: 'SI' },
+    '706': { name: 'Somalia', abbreviation: 'SO' },
+    '710': { name: 'South Africa', abbreviation: 'ZA' },
+    '716': { name: 'Zimbabwe', abbreviation: 'ZW' },
+    '724': { name: 'Spain', abbreviation: 'ES' },
+    '728': { name: 'South Sudan', abbreviation: 'SS' },
+    '729': { name: 'Sudan', abbreviation: 'SD' },
+    '732': { name: 'Western Sahara', abbreviation: 'EH' },
+    '740': { name: 'Suriname', abbreviation: 'SR' },
+    '744': { name: 'Svalbard and Jan Mayen', abbreviation: 'SJ' },
+    '748': { name: 'Eswatini', abbreviation: 'SZ' },
+    '752': { name: 'Sweden', abbreviation: 'SE' },
+    '756': { name: 'Switzerland', abbreviation: 'CH' },
+    '760': { name: 'Syria', abbreviation: 'SY' },
+    '762': { name: 'Tajikistan', abbreviation: 'TJ' },
+    '764': { name: 'Thailand', abbreviation: 'TH' },
+    '768': { name: 'Togo', abbreviation: 'TG' },
+    '772': { name: 'Tokelau', abbreviation: 'TK' },
+    '776': { name: 'Tonga', abbreviation: 'TO' },
+    '780': { name: 'Trinidad and Tobago', abbreviation: 'TT' },
+    '784': { name: 'United Arab Emirates', abbreviation: 'AE' },
+    '788': { name: 'Tunisia', abbreviation: 'TN' },
+    '792': { name: 'Turkey', abbreviation: 'TR' },
+    '795': { name: 'Turkmenistan', abbreviation: 'TM' },
+    '796': { name: 'Turks and Caicos Islands', abbreviation: 'TC' },
+    '798': { name: 'Tuvalu', abbreviation: 'TV' },
+    '800': { name: 'Uganda', abbreviation: 'UG' },
+    '804': { name: 'Ukraine', abbreviation: 'UA' },
+    '807': { name: 'North Macedonia', abbreviation: 'MK' },
+    '818': { name: 'Egypt', abbreviation: 'EG' },
+    '826': { name: 'United Kingdom', abbreviation: 'GB' },
+    '831': { name: 'Guernsey', abbreviation: 'GG' },
+    '832': { name: 'Jersey', abbreviation: 'JE' },
+    '833': { name: 'Isle of Man', abbreviation: 'IM' },
+    '834': { name: 'Tanzania', abbreviation: 'TZ' },
+    '840': { name: 'United States', abbreviation: 'US' },
+    '850': { name: 'U.S. Virgin Islands', abbreviation: 'VI' },
+    '854': { name: 'Burkina Faso', abbreviation: 'BF' },
+    '858': { name: 'Uruguay', abbreviation: 'UY' },
+    '860': { name: 'Uzbekistan', abbreviation: 'UZ' },
+    '862': { name: 'Venezuela', abbreviation: 'VE' },
+    '876': { name: 'Wallis and Futuna', abbreviation: 'WF' },
+    '882': { name: 'Samoa', abbreviation: 'WS' },
+    '887': { name: 'Yemen', abbreviation: 'YE' },
+    '894': { name: 'Zambia', abbreviation: 'ZM' },
+};
+export function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickChartElement, colors, colorMap, className, containerStyle, }) {
+    const containerRef = useRef(null);
+    const [hoveredState, setHoveredState] = useState(undefined);
+    const [hoveredCoords, setHoveredCoords] = useState(undefined);
+    const mappedData = data.reduce((acc, curr) => {
+        acc[curr[xAxisField]?.toString()] = curr;
+        return acc;
+    }, {});
+    const measureField = yAxisFields[0].field;
+    const colorScale = useMemo(() => {
+        const values = Object.values(mappedData)
+            .map((d) => parseFloat(d[measureField]))
+            .filter((v) => !isNaN(v));
+        const minValue = Math.min(...values);
+        const maxValue = Math.max(...values);
+        // Allows the users to override the color scheme on a per-chart basis.
+        const getCustomColor = (field, gradient) => {
+            let key = 'primary';
+            if (colorMap && colorMap[field]) {
+                if (gradient === 'start')
+                    key = 'primaryGradientStart';
+                if (gradient === 'stop')
+                    key = 'primaryGradientStop';
+                // @ts-ignore
+                return colorMap[field][key];
+            }
+            return undefined; // use the default colors from the theme
+        };
+        const gradientStart = getCustomColor(yAxisFields[0]?.field ?? xAxisField, 'start') ??
+            getCustomColor(yAxisFields[0]?.field ?? xAxisField) ??
+            '#FFFFFF';
+        const gradientStop = getCustomColor(yAxisFields[0]?.field ?? xAxisField, 'stop') ??
+            getCustomColor(yAxisFields[0]?.field ?? xAxisField) ??
+            colors[0];
+        return scaleLog()
+            .domain([minValue, maxValue])
+            .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
+    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors]);
+    const hoveredValue = useMemo(() => {
+        return !hoveredState ? undefined : mappedData[fipsToNames[hoveredState]?.abbreviation ?? '']?.[measureField] ??
+            mappedData[fipsToNames[hoveredState]?.name ?? '']?.[measureField] ??
+            mappedData[fipsToNames[hoveredState]?.abbreviation?.toLowerCase() ?? '']?.[measureField] ??
+            mappedData[fipsToNames[hoveredState]?.name?.toLowerCase() ?? '']?.[measureField];
+    }, [hoveredState, mappedData, measureField]);
+    return (_jsxs("div", { ref: containerRef, className: className, style: {
+            width: "100%",
+            height: "auto",
+            marginTop: '-5%',
+            zIndex: 0,
+            ...containerStyle,
+            position: "relative",
+        }, children: [_jsx(ComposableMap, { projection: "geoAlbersUsa", children: _jsx(MapLayout, { hoveredRegion: hoveredState, setHoveredRegion: setHoveredState, setHoveredCoords: setHoveredCoords, containerRef: containerRef, mappedData: mappedData, measureField: measureField, colorScale: colorScale, onClickChartElement: onClickChartElement, regionNames: fipsToNames, geographyUrl: statesUrl }) }), hoveredCoords && hoveredState && (_jsx("div", { style: {
+                    position: "absolute",
+                    pointerEvents: "none",
+                    left: hoveredCoords[0],
+                    top: hoveredCoords[1],
+                }, children: _jsxs(ChartTooltipFrame, { theme: theme, children: [_jsx("div", { style: {
+                                borderStyle: 'solid',
+                                borderBottomColor: '#E5E7EB',
+                                background: 'white',
+                                borderTop: 'none',
+                                borderLeft: 'none',
+                                borderRight: 'none',
+                                borderBottomWidth: 1,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                paddingLeft: '16px',
+                                paddingRight: '16px',
+                                paddingTop: '8px',
+                                paddingBottom: '8px',
+                            }, children: _jsx("p", { style: {
+                                    textAlign: 'left',
+                                    marginTop: 0,
+                                    marginBottom: 0,
+                                    fontFamily: theme?.fontFamily,
+                                    color: theme?.primaryTextColor,
+                                    fontSize: theme?.fontSizeSmall || '14px',
+                                    fontWeight: theme?.fontWeightBold || '500',
+                                    paddingTop: 2,
+                                    paddingBottom: 2,
+                                }, children: fipsToNames[hoveredState]?.name }) }), _jsx("div", { style: {
+                                paddingRight: '16px',
+                                paddingLeft: '16px',
+                                paddingTop: '8px',
+                                paddingBottom: '8px',
+                            }, children: yAxisFields.map((field) => (_jsx(ChartTooltipRow, { value: valueFormatter({
+                                    fields: [
+                                        ...yAxisFields,
+                                        { field: xAxisField, format: xAxisFormat },
+                                    ],
+                                    field: field.field,
+                                    value: hoveredValue || 0,
+                                }), name: mappedData[hoveredState]?.name, color: colorScale(parseFloat(hoveredValue)) || 'black', theme: theme }, `id-${field}`))) })] }) }))] }));
+}
+export function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickChartElement, colors, colorMap, className, containerStyle, }) {
+    const containerRef = useRef(null);
+    const [hoveredCountry, setHoveredCountry] = useState(undefined);
+    const [hoveredCoords, setHoveredCoords] = useState(undefined);
+    const mappedData = data.reduce((acc, curr) => {
+        acc[curr[xAxisField]?.toString()] = curr;
+        return acc;
+    }, {});
+    const measureField = yAxisFields[0].field;
+    const colorScale = useMemo(() => {
+        const values = Object.values(mappedData)
+            .map((d) => parseFloat(d[measureField]))
+            .filter((v) => !isNaN(v));
+        const minValue = Math.min(...values);
+        const maxValue = Math.max(...values);
+        // Allows the users to override the color scheme on a per-chart basis.
+        const getCustomColor = (field, gradient) => {
+            let key = 'primary';
+            if (colorMap && colorMap[field]) {
+                if (gradient === 'start')
+                    key = 'primaryGradientStart';
+                if (gradient === 'stop')
+                    key = 'primaryGradientStop';
+                // @ts-ignore
+                return colorMap[field][key];
+            }
+            return undefined; // use the default colors from the theme
+        };
+        const gradientStart = getCustomColor(yAxisFields[0]?.field ?? xAxisField, 'start') ??
+            getCustomColor(yAxisFields[0]?.field ?? xAxisField) ??
+            '#FFFFFF';
+        const gradientStop = getCustomColor(yAxisFields[0]?.field ?? xAxisField, 'stop') ??
+            getCustomColor(yAxisFields[0]?.field ?? xAxisField) ??
+            colors[0];
+        return scaleLog()
+            .domain([minValue, maxValue])
+            .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
+    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors]);
+    const hoveredValue = useMemo(() => {
+        return !hoveredCountry ? undefined : mappedData[isoToNames[hoveredCountry]?.abbreviation ?? '']?.[measureField] ??
+            mappedData[isoToNames[hoveredCountry]?.name ?? '']?.[measureField] ??
+            mappedData[isoToNames[hoveredCountry]?.abbreviation?.toLowerCase() ?? '']?.[measureField] ??
+            mappedData[isoToNames[hoveredCountry]?.name?.toLowerCase() ?? '']?.[measureField];
+    }, [hoveredCountry, mappedData, measureField]);
+    return (_jsxs("div", { ref: containerRef, className: className, style: {
+            width: "100%",
+            height: "auto",
+            marginTop: '-5%',
+            marginBottom: '-6.5%',
+            zIndex: 0,
+            ...containerStyle,
+            position: "relative",
+        }, children: [_jsx(ComposableMap, { projection: "geoEqualEarth", children: _jsx(MapLayout, { hoveredRegion: hoveredCountry, setHoveredRegion: setHoveredCountry, setHoveredCoords: setHoveredCoords, containerRef: containerRef, mappedData: mappedData, measureField: measureField, colorScale: colorScale, onClickChartElement: onClickChartElement, geographyUrl: countriesUrl, regionNames: isoToNames }) }), hoveredCoords && hoveredCountry && (_jsx("div", { style: {
+                    position: "absolute",
+                    pointerEvents: "none",
+                    left: hoveredCoords[0],
+                    top: hoveredCoords[1],
+                }, children: _jsxs(ChartTooltipFrame, { theme: theme, children: [_jsx("div", { style: {
+                                borderStyle: 'solid',
+                                borderBottomColor: '#E5E7EB',
+                                background: 'white',
+                                borderTop: 'none',
+                                borderLeft: 'none',
+                                borderRight: 'none',
+                                borderBottomWidth: 1,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                paddingLeft: '16px',
+                                paddingRight: '16px',
+                                paddingTop: '8px',
+                                paddingBottom: '8px',
+                            }, children: _jsx("p", { style: {
+                                    textAlign: 'left',
+                                    marginTop: 0,
+                                    marginBottom: 0,
+                                    fontFamily: theme?.fontFamily,
+                                    color: theme?.primaryTextColor,
+                                    fontSize: theme?.fontSizeSmall || '14px',
+                                    fontWeight: theme?.fontWeightBold || '500',
+                                    paddingTop: 2,
+                                    paddingBottom: 2,
+                                }, children: isoToNames[hoveredCountry]?.name }) }), _jsx("div", { style: {
+                                paddingRight: '16px',
+                                paddingLeft: '16px',
+                                paddingTop: '8px',
+                                paddingBottom: '8px',
+                            }, children: yAxisFields.map((field) => (_jsx(ChartTooltipRow, { value: valueFormatter({
+                                    fields: [
+                                        ...yAxisFields,
+                                        { field: xAxisField, format: xAxisFormat },
+                                    ],
+                                    field: field.field,
+                                    value: hoveredValue || 0,
+                                }), name: field.label, color: colorScale(parseFloat(hoveredValue)) || 'black', theme: theme }, `id-${field}`))) })] }) }))] }));
+}
+function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCoords, containerRef, mappedData, measureField, colorScale, onClickChartElement, regionNames, }) {
+    const { projection } = useMapContext();
+    return (_jsx(Geographies, { geography: geographyUrl, children: ({ geographies }) => geographies.map((geo, index) => {
+            const regionData = mappedData[geo.id] ??
+                mappedData[regionNames[geo.id]?.abbreviation ?? ''] ??
+                mappedData[regionNames[geo.id]?.name ?? ''] ??
+                mappedData[regionNames[geo.id]?.abbreviation?.toLowerCase() ?? ''] ??
+                mappedData[regionNames[geo.id]?.name?.toLowerCase() ?? ''];
+            const value = regionData ? parseFloat(regionData[measureField]) : null;
+            const fill = value != null ? colorScale(value) : "#D6D6DA";
+            return _jsx(Geography, { geography: geo, fill: fill, stroke: "#FFFFFF", strokeWidth: 0.5, onMouseEnter: () => {
+                    const centroid = geoCentroid(geo);
+                    const projected = projection(centroid);
+                    if (projected && containerRef.current) {
+                        const [x, y] = projected;
+                        const svg = containerRef.current.querySelector("svg");
+                        if (svg) {
+                            const svgRect = svg.getBoundingClientRect();
+                            const viewBoxWidth = 800, viewBoxHeight = 600;
+                            const scaleX = svgRect.width / viewBoxWidth;
+                            const scaleY = svgRect.height / viewBoxHeight;
+                            const finalX = x * scaleX;
+                            const finalY = y * scaleY;
+                            setHoveredRegion(geo.id);
+                            setHoveredCoords([finalX, finalY]);
+                        }
+                    }
+                }, onMouseLeave: () => {
+                    if (hoveredRegion === geo.id) {
+                        setHoveredRegion(undefined);
+                    }
+                }, onClick: () => {
+                    if (regionData) {
+                        onClickChartElement?.(regionData);
+                    }
+                } }, geo.id + index.toString());
+        }) }));
+}

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA0BtE,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAsJF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,oBAAoB,EAAE,2BAA2B,EACjD,UAAkB,GACnB,EAAE;IACD,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CA8Wd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe,4FAQzB;IACD,IAAI,EAAE,mBAAmB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,KACf,YAAY,CAAC;IAClB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,iBAAiB,GAClB,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC9C,KAAG,GAAG,CAAC,OAmKP,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA2BtE,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAyKF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,oBAAoB,EAAE,2BAA2B,EACjD,UAAkB,GACnB,EAAE;IACD,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CA6Xd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe,4FAQzB;IACD,IAAI,EAAE,mBAAmB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,KACf,YAAY,CAAC;IAClB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,iBAAiB,GAClB,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC9C,KAAG,GAAG,CAAC,OAoLP,CAAC"}