@wavemaker/react-native-echarts 1.0.0-dev.5 → 1.0.0-dev.8

package/geo/tooltip/geo-item-tooltip-presets.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ChartTooltipPreset } from '../../tooltip';
+import type { GeoItemTooltipParams } from './geo-item-tooltip.types';
+export declare function createGeoTooltipPreset(preset: ChartTooltipPreset): (params: GeoItemTooltipParams) => React.ReactElement;
+//# sourceMappingURL=geo-item-tooltip-presets.d.ts.map

package/geo/tooltip/geo-item-tooltip-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geo-item-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/geo-item-tooltip-presets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AA2CrE,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,YAAY,CAYtD"}

package/geo/tooltip/geo-item-tooltip-presets.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function geoCardFromParams(p) {
+    const { name, value, color } = p;
+    return (<TooltipPresetCard minWidth={140} header={{ swatchColor: color, title: name, titleVariant: 'emphasis', marginBottom: 6 }}>
+      <Text style={{ fontSize: 20, fontWeight: '800', color: '#0f172a' }}>{String(value)}</Text>
+      <Text style={{ fontSize: 11, color: '#64748b', marginTop: 4 }}>Value</Text>
+    </TooltipPresetCard>);
+}
+function geoCompactFromParams(p) {
+    const { name, value } = p;
+    return <TooltipPresetCompact emphasis={name} detail={String(value)} wrap={false}/>;
+}
+function geoKpiFromParams(p) {
+    const { name, value, color } = p;
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={140} overline={name} metric={String(value)} caption="Region value"/>);
+}
+function geoStripedFromParams(p) {
+    const { name, value, color } = p;
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: name }} rows={[{ key: 'value', leftLabel: 'value', right: String(value) }]}/>);
+}
+export function createGeoTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => geoCardFromParams(p);
+        case 'compact':
+            return (p) => geoCompactFromParams(p);
+        case 'kpi':
+            return (p) => geoKpiFromParams(p);
+        case 'striped':
+            return (p) => geoStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

package/geo/tooltip/geo-item-tooltip.types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Item tooltip for map / geo (`trigger: 'item'`, `series.type` === `map`).
+ */
+export interface GeoItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    /** Region name (matches map feature / data `name`). */
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface GeoItemTooltipContext {
+    /** Normalized `{ name, value }` rows from chart `data` (for lookup when the event omits value). */
+    regions: Array<{
+        name: string;
+        value: number;
+    }>;
+}
+//# sourceMappingURL=geo-item-tooltip.types.d.ts.map

package/geo/tooltip/geo-item-tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geo-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/geo-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,mGAAmG;IACnG,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjD"}

package/geo/tooltip/geo-item-tooltip.types.js

@@ -0,0 +1,3 @@
+/**
+ * Item tooltip for map / geo (`trigger: 'item'`, `series.type` === `map`).
+ */

package/geo/tooltip/geo-item-tooltip.utils.d.ts

@@ -0,0 +1,14 @@
+import type { GeoItemTooltipContext, GeoItemTooltipParams } from './geo-item-tooltip.types';
+/**
+ * Build geo map item tooltip params from an ECharts `showTip` payload.
+ * Ignores axis-style payloads (`dataByCoordSys`).
+ */
+export declare function geoItemParamsFromShowTip(chart: any, evt: any, ctx: GeoItemTooltipContext, themeSeries: Array<{
+    color: string;
+}>, 
+/** Prefer over region centroid: matches the pointer that drove hover / emphasis. */
+lastZrPointer?: {
+    x: number;
+    y: number;
+} | null): GeoItemTooltipParams | null;
+//# sourceMappingURL=geo-item-tooltip.utils.d.ts.map

package/geo/tooltip/geo-item-tooltip.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geo-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/geo-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AA0I5F;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,GAAG,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,qBAAqB,EAC1B,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACrC,oFAAoF;AACpF,aAAa,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,GAC9C,oBAAoB,GAAG,IAAI,CAqE7B"}

package/geo/tooltip/geo-item-tooltip.utils.js

@@ -0,0 +1,220 @@
+function resolveDataIndexInside(data, evt) {
+    if (typeof evt?.dataIndexInside === 'number' && !Number.isNaN(evt.dataIndexInside)) {
+        return evt.dataIndexInside;
+    }
+    if (typeof evt?.dataIndex === 'number' && !Number.isNaN(evt.dataIndex)) {
+        const mapped = typeof data?.indexOfRawIndex === 'function' ? data.indexOfRawIndex(evt.dataIndex) : evt.dataIndex;
+        if (typeof mapped === 'number' && !Number.isNaN(mapped))
+            return mapped;
+    }
+    return null;
+}
+/** Resolve region row index in series data when `showTip` only carries `name`. */
+function resolveRegionDataIndex(data, name, diInside) {
+    if (diInside != null && diInside >= 0)
+        return diInside;
+    if (!data || name === '')
+        return null;
+    try {
+        if (typeof data.indexOfName === 'function') {
+            const i = data.indexOfName(name);
+            if (typeof i === 'number' && i >= 0)
+                return i;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    try {
+        const n = typeof data.count === 'function' ? data.count() : 0;
+        for (let i = 0; i < n; i++) {
+            if (String(data.getName?.(i) ?? '') === name)
+                return i;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return null;
+}
+/**
+ * Pointer from `showTip` / zrender when present (map dispatch often omits `x`/`y`).
+ */
+function pointerFromEvent(evt) {
+    const pairs = [
+        [evt?.x, evt?.y],
+        [evt?.offsetX, evt?.offsetY],
+        [evt?.event?.offsetX, evt?.event?.offsetY],
+        [evt?.event?.zrX, evt?.event?.zrY],
+    ];
+    for (const [x, y] of pairs) {
+        if (typeof x === 'number' && typeof y === 'number' && !Number.isNaN(x) && !Number.isNaN(y)) {
+            return { x, y };
+        }
+    }
+    return null;
+}
+/** Last zrender pointer (chart pixel space); `showTip` for `trigger: 'item'` map often omits x/y. */
+function pointerFromZrLast(last) {
+    if (last == null)
+        return null;
+    const { x, y } = last;
+    if (typeof x === 'number' && typeof y === 'number' && !Number.isNaN(x) && !Number.isNaN(y)) {
+        return { x, y };
+    }
+    return null;
+}
+/** Match ECharts `findPointFromSeries`: series tooltip position or region graphic centroid. */
+function pointerFromMapRegion(chart, seriesIndex, dataIndexInside) {
+    try {
+        const seriesModel = chart.getModel?.().getSeriesByIndex?.(seriesIndex);
+        if (!seriesModel)
+            return null;
+        const data = seriesModel.getData?.();
+        if (!data)
+            return null;
+        if (typeof seriesModel.getTooltipPosition === 'function') {
+            const pt = seriesModel.getTooltipPosition(dataIndexInside);
+            if (Array.isArray(pt) && pt.length >= 2 && Number.isFinite(pt[0]) && Number.isFinite(pt[1])) {
+                return { x: pt[0], y: pt[1] };
+            }
+        }
+        const el = data.getItemGraphicEl?.(dataIndexInside);
+        if (el && typeof el.getBoundingRect === 'function') {
+            const rect = el.getBoundingRect().clone();
+            const transform = el.transform;
+            if (rect && typeof rect.applyTransform === 'function' && transform != null) {
+                rect.applyTransform(transform);
+            }
+            const cx = rect.x + rect.width / 2;
+            const cy = rect.y + rect.height / 2;
+            if (Number.isFinite(cx) && Number.isFinite(cy)) {
+                return { x: cx, y: cy };
+            }
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return null;
+}
+function pointerFromConvertToPixel(chart, seriesIndex, name) {
+    try {
+        if (typeof chart.convertToPixel !== 'function')
+            return null;
+        const pt = chart.convertToPixel({ seriesIndex }, name);
+        if (Array.isArray(pt) && pt.length >= 2 && Number.isFinite(pt[0]) && Number.isFinite(pt[1])) {
+            return { x: pt[0], y: pt[1] };
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return null;
+}
+function pointerFromEventOrCenter(chart, evt) {
+    const w = typeof chart?.getWidth === 'function' ? chart.getWidth() : 0;
+    const h = typeof chart?.getHeight === 'function' ? chart.getHeight() : 0;
+    return { x: w > 0 ? w / 2 : 0, y: h > 0 ? h / 2 : 0 };
+}
+function sliceValueAt(data, diInside) {
+    try {
+        const dim = typeof data.mapDimension === 'function' ? data.mapDimension('value') : null;
+        if (dim != null) {
+            const v = data.get(dim, diInside);
+            const n = Number(v);
+            if (Number.isFinite(n))
+                return n;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    const v0 = data.get?.(0, diInside);
+    const n0 = Number(v0);
+    if (Number.isFinite(n0))
+        return n0;
+    try {
+        const n1 = Number(data.get?.('value', diInside));
+        if (Number.isFinite(n1))
+            return n1;
+    }
+    catch {
+        /* ignore */
+    }
+    return NaN;
+}
+/**
+ * Build geo map item tooltip params from an ECharts `showTip` payload.
+ * Ignores axis-style payloads (`dataByCoordSys`).
+ */
+export function geoItemParamsFromShowTip(chart, evt, ctx, themeSeries, 
+/** Prefer over region centroid: matches the pointer that drove hover / emphasis. */
+lastZrPointer) {
+    if (!chart || !evt)
+        return null;
+    if (Array.isArray(evt.dataByCoordSys) && evt.dataByCoordSys.length > 0)
+        return null;
+    const si = typeof evt.seriesIndex === 'number' ? evt.seriesIndex : 0;
+    const seriesModel = chart.getModel?.().getSeriesByIndex?.(si);
+    const seriesKind = seriesModel?.subType ?? seriesModel?.get?.('type');
+    if (!seriesModel || seriesKind !== 'map')
+        return null;
+    const data = seriesModel.getData?.();
+    if (!data)
+        return null;
+    const diInside = resolveDataIndexInside(data, evt);
+    let name = typeof evt.name === 'string' && evt.name.trim() !== ''
+        ? evt.name.trim()
+        : '';
+    if (name === '' && diInside != null && typeof data.getName === 'function') {
+        name = String(data.getName(diInside) ?? '').trim();
+    }
+    if (name === '')
+        return null;
+    const regionDi = resolveRegionDataIndex(data, name, diInside);
+    const row = ctx.regions.find((r) => r.name === name);
+    let value = row != null ? Number(row.value) : NaN;
+    if (!Number.isFinite(value)) {
+        const fromEvt = typeof evt.value === 'number'
+            ? evt.value
+            : typeof evt.data?.value === 'number'
+                ? evt.data.value
+                : NaN;
+        value =
+            Number.isFinite(fromEvt) ? fromEvt : regionDi != null && regionDi >= 0 ? sliceValueAt(data, regionDi) : NaN;
+    }
+    if (!Number.isFinite(value))
+        value = 0;
+    const pixel = pointerFromZrLast(lastZrPointer) ??
+        pointerFromEvent(evt) ??
+        (regionDi != null && regionDi >= 0 ? pointerFromMapRegion(chart, si, regionDi) : null) ??
+        (regionDi != null && regionDi >= 0 ? pointerFromConvertToPixel(chart, si, name) : null) ??
+        pointerFromEventOrCenter(chart, evt);
+    let color;
+    if (regionDi != null && regionDi >= 0) {
+        try {
+            const style = data.getItemVisual?.(regionDi, 'style');
+            const area = style?.areaColor;
+            const fill = style?.fill;
+            if (typeof area === 'string' && area !== '')
+                color = area;
+            else if (typeof fill === 'string' && fill !== '')
+                color = fill;
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    if (color == null) {
+        const themeLen = Math.max(themeSeries.length, 1);
+        color = themeSeries[0 % themeLen]?.color;
+    }
+    return {
+        pointerX: pixel.x,
+        pointerY: pixel.y,
+        name,
+        value,
+        ...(typeof color === 'string' ? { color } : {}),
+    };
+}

package/geo/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { createDefaultGeoTooltip } from './default-geo-tooltip';
+export { createGeoTooltipPreset } from './geo-item-tooltip-presets';
+export type { GeoItemTooltipContext, GeoItemTooltipParams } from './geo-item-tooltip.types';
+export { geoItemParamsFromShowTip } from './geo-item-tooltip.utils';
+export { useGeoItemTooltip } from './use-geo-item-tooltip';
+export type { UseGeoItemTooltipOptions, UseGeoItemTooltipResult } from './use-geo-item-tooltip';
+//# sourceMappingURL=index.d.ts.map

package/geo/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}

package/geo/tooltip/index.js

@@ -0,0 +1,4 @@
+export { createDefaultGeoTooltip } from './default-geo-tooltip';
+export { createGeoTooltipPreset } from './geo-item-tooltip-presets';
+export { geoItemParamsFromShowTip } from './geo-item-tooltip.utils';
+export { useGeoItemTooltip } from './use-geo-item-tooltip';

package/geo/tooltip/use-geo-item-tooltip.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { GeoItemTooltipContext, GeoItemTooltipParams } from './geo-item-tooltip.types';
+export interface UseGeoItemTooltipOptions {
+    active: boolean;
+    renderTooltip: (params: GeoItemTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<GeoItemTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UseGeoItemTooltipResult {
+    attachGeoItemTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+        getZr?: () => {
+            on: (ev: string, fn: (...args: any[]) => void) => void;
+            off: (ev: string, fn: (...args: any[]) => void) => void;
+        };
+    }) => () => void;
+    renderGeoTooltipOverlay: () => React.ReactNode;
+}
+/** Geo / map region tooltip as React Native UI (`trigger: 'item'`). */
+export declare function useGeoItemTooltip(options: UseGeoItemTooltipOptions): UseGeoItemTooltipResult;
+//# sourceMappingURL=use-geo-item-tooltip.d.ts.map

package/geo/tooltip/use-geo-item-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-geo-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/use-geo-item-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;IACnD,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,6BAA6B,EAAE,CAAC,KAAK,EAAE;QACrC,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;QACvD,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;QACxD,KAAK,CAAC,EAAE,MAAM;YAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;YAAC,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAA;SAAE,CAAC;KACnI,KAAK,MAAM,IAAI,CAAC;IACjB,uBAAuB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAChD;AAED,uEAAuE;AACvE,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,uBAAuB,CAqE5F"}

package/geo/tooltip/use-geo-item-tooltip.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
+import { geoItemParamsFromShowTip } from './geo-item-tooltip.utils';
+/** Geo / map region tooltip as React Native UI (`trigger: 'item'`). */
+export function useGeoItemTooltip(options) {
+    const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
+    const [params, setParams] = useState(null);
+    /** Chart pixel space; same basis as zrender hit-testing / map emphasis. */
+    const lastZrPointerRef = useRef(null);
+    useEffect(() => {
+        if (!active)
+            setParams(null);
+    }, [active]);
+    const attachGeoItemTooltipListeners = useCallback((chart) => {
+        if (!active)
+            return () => { };
+        const zr = typeof chart.getZr === 'function' ? chart.getZr() : null;
+        const onZrMouseMove = (e) => {
+            const x = e?.offsetX;
+            const y = e?.offsetY;
+            if (typeof x === 'number' && typeof y === 'number' && !Number.isNaN(x) && !Number.isNaN(y)) {
+                lastZrPointerRef.current = { x, y };
+            }
+        };
+        const onShowTip = (evt) => {
+            const ctx = contextRef.current;
+            if (!ctx?.regions?.length) {
+                setParams(null);
+                return;
+            }
+            const next = geoItemParamsFromShowTip(chart, evt, ctx, themeSeriesRef.current ?? [], lastZrPointerRef.current);
+            setParams(next);
+        };
+        const onHideTip = () => setParams(null);
+        chart.on('showTip', onShowTip);
+        chart.on('hideTip', onHideTip);
+        if (zr) {
+            zr.on('mousemove', onZrMouseMove);
+        }
+        return () => {
+            chart.off('showTip', onShowTip);
+            chart.off('hideTip', onHideTip);
+            if (zr) {
+                zr.off('mousemove', onZrMouseMove);
+            }
+        };
+    }, [active, contextRef, themeSeriesRef]);
+    const renderGeoTooltipOverlay = useCallback(() => {
+        if (!active || params == null)
+            return null;
+        return (<ChartPointerTooltipOverlay width={width} height={height} pointerX={params.pointerX} pointerY={params.pointerY}>
+        {renderTooltip(params)}
+      </ChartPointerTooltipOverlay>);
+    }, [active, renderTooltip, params, width, height]);
+    return {
+        attachGeoItemTooltipListeners,
+        renderGeoTooltipOverlay,
+    };
+}

package/geo/us-chart.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import usStatesRaw from '../../../data/us-states.json';
+import usStatesRaw from './us-states.json';
 import { GeoChart, GeoMapJsonContext } from './geo-chart';
 /** US states GeoJSON — bundled once for USChart (static import avoids top-level await in Vite builds). */
 const usStatesMapJson = usStatesRaw;