@kanaries/graphic-walker 0.4.1 → 0.4.3

package/src/components/leafletRenderer/ChoroplethRenderer.tsx

@@ -0,0 +1,312 @@
+import React, { Fragment, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { CircleMarker, MapContainer, Polygon, Marker, TileLayer, Tooltip } from "react-leaflet";
+import { type Map, divIcon } from "leaflet";
+import type { DeepReadonly, IRow, IViewField, VegaGlobalConfig } from "../../interfaces";
+import type { FeatureCollection, Geometry } from "geojson";
+import { getMeaAggKey } from "../../utils";
+import { useColorScale, useOpacityScale } from "./encodings";
+import { isValidLatLng } from "./POIRenderer";
+import { TooltipContent } from "./tooltip";
+import { useAppRootContext } from "../appRoot";
+
+
+export interface IChoroplethRendererProps {
+    name?: string;
+    data: IRow[];
+    allFields: DeepReadonly<IViewField[]>;
+    features: FeatureCollection | undefined;
+    geoKey: string;
+    defaultAggregated: boolean;
+    geoId: DeepReadonly<IViewField>;
+    color: DeepReadonly<IViewField> | undefined;
+    opacity: DeepReadonly<IViewField> | undefined;
+    text: DeepReadonly<IViewField> | undefined;
+    details: readonly DeepReadonly<IViewField>[];
+    vegaConfig: VegaGlobalConfig;
+    scaleIncludeUnmatchedChoropleth: boolean;
+}
+
+export interface IChoroplethRendererRef {}
+
+const resolveCoords = (featureGeom: Geometry): [lat: number, lng: number][][] => {
+    switch (featureGeom.type) {
+        case 'Polygon': {
+            const coords = featureGeom.coordinates[0];
+            return [coords.map<[lat: number, lng: number]>(c => [c[1], c[0]])];
+        }
+        case 'Point': {
+            const coords = featureGeom.coordinates;
+            return [[[coords[1], coords[0]]]];
+        }
+        case 'GeometryCollection': {
+            const coords = featureGeom.geometries.map<[lat: number, lng: number][][]>(resolveCoords);
+            return coords.flat();
+        }
+        case 'LineString': {
+            const coords = featureGeom.coordinates;
+            return [coords.map<[lat: number, lng: number]>(c => [c[1], c[0]])];
+        }
+        case 'MultiLineString': {
+            const coords = featureGeom.coordinates;
+            return coords.map<[lat: number, lng: number][]>(c => c.map<[lat: number, lng: number]>(c => [c[1], c[0]]));
+        }
+        case 'MultiPoint': {
+            const coords = featureGeom.coordinates;
+            return [coords.map<[lat: number, lng: number]>(c => [c[1], c[0]])];
+        }
+        case 'MultiPolygon': {
+            const coords = featureGeom.coordinates;
+            return coords.map<[lat: number, lng: number][]>(c => c[0].map<[lat: number, lng: number]>(c => [c[1], c[0]]));
+        }
+        default: {
+            return [];
+        }
+    }
+};
+
+const resolveCenter = (coordinates: [lat: number, lng: number][]): [lng: number, lat: number] => {
+    let area = 0;
+    let centroid: [lat: number, lng: number] = [0, 0];
+
+    for (let i = 0; i < coordinates.length - 1; i++) {
+        let [x1, y1] = coordinates[i];
+        let [x2, y2] = coordinates[i + 1];
+
+        let tempArea = x1 * y2 - x2 * y1;
+        area += tempArea;
+
+        centroid[0] += (x1 + x2) * tempArea;
+        centroid[1] += (y1 + y2) * tempArea;
+    }
+
+    area /= 2;
+
+    centroid[0] /= 6 * area;
+    centroid[1] /= 6 * area;
+
+    return centroid;
+};
+
+const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendererProps>(function ChoroplethRenderer (props, ref) {
+    const { name, data, allFields, features, geoKey, defaultAggregated, geoId, color, opacity, text, details, vegaConfig, scaleIncludeUnmatchedChoropleth } = props;
+
+    useImperativeHandle(ref, () => ({}));
+
+    const geoIndices = useMemo(() => {
+        if (geoId) {
+            return data.map(row => row[geoId.fid]);
+        }
+        return [];
+    }, [geoId, data]);
+
+    const [indices, geoShapes] = useMemo<[indices: number[], geoShapes: (FeatureCollection['features'][number] | undefined)[]]>(() => {
+        if (geoIndices.length && geoKey && features) {
+            const indices: number[] = [];
+            const shapes = geoIndices.map((id, i) => {
+                const feature = id ? features.features.find(f => f.properties?.[geoKey] === id) : undefined;
+                if (feature) {
+                    indices.push(i);
+                }
+                return feature;
+            });
+            return [indices, shapes];
+        }
+        return [[], []];
+    }, [geoIndices, features, geoKey]);
+
+    useEffect(() => {
+        if (geoShapes.length > 0) {
+            const notMatched = geoShapes.filter(f => !f);
+            if (notMatched.length) {
+                console.warn(`Failed to render ${notMatched.length.toLocaleString()} items of ${data.length.toLocaleString()} rows due to missing geojson feature.`);
+            }
+        }
+    }, [geoShapes]);
+
+    const lngLat = useMemo<[lat: number, lng: number][][][]>(() => {
+        if (geoShapes.length > 0) {
+            return geoShapes.map<[lat: number, lng: number][][]>(feature => {
+                if (feature) {
+                    return resolveCoords(feature.geometry);
+                }
+                return [];
+            }, []);
+        }
+        return [];
+    }, [geoShapes]);
+
+    const [bounds, center] = useMemo<[bounds: [[n: number, w: number], [s: number, e: number]], center: [lng: number, lat: number]]>(() => {
+        const allLngLat = lngLat.flat(2);
+        if (allLngLat.length > 0) {
+            const [bounds, coords] = allLngLat.reduce<[bounds: [[w: number, n: number], [e: number, s: number]], center: [lat: number, lng: number]]>(([bounds, acc], [lat, lng]) => {
+                if (lng < bounds[0][0]) {
+                    bounds[0][0] = lng;
+                }
+                if (lng > bounds[1][0]) {
+                    bounds[1][0] = lng;
+                }
+                if (lat < bounds[0][1]) {
+                    bounds[0][1] = lat;
+                }
+                if (lat > bounds[1][1]) {
+                    bounds[1][1] = lat;
+                }
+                return [bounds, [acc[0] + lng, acc[1] + lat]];
+            }, [[[-180, -90], [180, 90]], [0, 0]]);
+            return [bounds, [coords[0] / lngLat.length, coords[1] / lngLat.length] as [number, number]];
+        }
+                
+        return [[[-180, -90], [180, 90]], [0, 0]];
+    }, [lngLat]);
+
+    const distribution = useMemo(() => {
+        if (scaleIncludeUnmatchedChoropleth) {
+            return data;
+        }
+        return indices.map(i => data[i]);
+    }, [data, indices, scaleIncludeUnmatchedChoropleth]);
+
+    const opacityScale = useOpacityScale(distribution, opacity, defaultAggregated);
+    const colorScale = useColorScale(distribution, color, defaultAggregated, vegaConfig);
+
+    const tooltipFields = useMemo(() => {
+        return details.concat(
+            [color!, opacity!].filter(Boolean)
+        ).map(f => ({
+            ...f,
+            key: defaultAggregated && f.analyticType === 'measure' && f.aggName ? getMeaAggKey(f.fid, f.aggName) : f.fid,
+        }));
+    }, [defaultAggregated, details, color, opacity]);
+
+    const mapRef = useRef<Map>(null);
+
+    useEffect(() => {
+        const container = mapRef.current?.getContainer();
+        if (container) {
+            const ro = new ResizeObserver(() => {
+                mapRef.current?.invalidateSize();
+            });
+            ro.observe(container);
+            return () => {
+                ro.unobserve(container);
+            };
+        }
+    });
+    
+    const appRef = useAppRootContext();
+
+    useEffect(() => {
+        const ctx = appRef.current;
+        if (ctx) {
+            ctx.exportChart = async (mode) => ({
+                mode,
+                title: name || 'untitled',
+                nCols: 0,
+                nRows: 0,
+                charts: [],
+                container: () => mapRef.current?.getContainer() as HTMLDivElement ?? null,
+                chartType: 'map'
+            })
+        }
+    }, []);
+
+    useEffect(() => {
+        mapRef.current?.flyToBounds(bounds);
+    }, [`${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`]);
+
+    return (
+        <MapContainer center={center} ref={mapRef} zoom={5} bounds={bounds} style={{ width: '100%', height: '100%', zIndex: 1 }}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {lngLat.length > 0 && data.map((row, i) => {
+                const coords = lngLat[i];
+                const opacity = opacityScale(row);
+                const color = colorScale(row);
+                return (
+                    <Fragment key={`${i}-${opacity}-${color}`}>
+                        {coords.map((coord, j) => {
+                            if (coord.length === 0) {
+                                return null;
+                            }
+                            if (coord.length === 1) {
+                                return (
+                                    <CircleMarker
+                                        key={j}
+                                        center={coord[0]}
+                                        radius={3}
+                                        opacity={0.8}
+                                        fillOpacity={opacity}
+                                        fillColor={color}
+                                        color="#0004"
+                                        weight={1}
+                                        stroke
+                                        fill
+                                    >
+                                        {tooltipFields.length > 0 && (
+                                            <Tooltip>
+                                                <header>{data[i][geoId.fid]}</header>
+                                                {tooltipFields.map((f, j) => (
+                                                    <TooltipContent
+                                                        key={j}
+                                                        allFields={allFields}
+                                                        vegaConfig={vegaConfig}
+                                                        field={f}
+                                                        value={row[f.key]}
+                                                    />
+                                                ))}
+                                            </Tooltip>
+                                        )}
+                                    </CircleMarker>
+                                )
+                            }
+                            const center: [lat: number, lng: number] = text && coord.length >= 3 ? resolveCenter(coord) : [NaN, NaN];
+                            return (
+                                <Fragment key={j}>
+                                    <Polygon
+                                        positions={coord}
+                                        pathOptions={{
+                                            fillOpacity: opacity * 0.8,
+                                            fillColor: color,
+                                            color: "#0004",
+                                            weight: 1,
+                                            stroke: true,
+                                            fill: true,
+                                        }}
+                                    >
+                                        <Tooltip>
+                                            <header>{data[i][geoId.fid]}</header>
+                                            {tooltipFields.map((f, j) => (
+                                                <TooltipContent
+                                                    key={j}
+                                                    allFields={allFields}
+                                                    vegaConfig={vegaConfig}
+                                                    field={f}
+                                                    value={row[f.key]}
+                                                />
+                                            ))}
+                                        </Tooltip>
+                                    </Polygon>
+                                    {text && data[i][text.fid] && isValidLatLng(center[0], center[1]) && (
+                                        <Marker
+                                            position={center}
+                                            interactive={false}
+                                            icon={divIcon({
+                                                className: '!bg-transparent !border-none',
+                                                html: `<div style="font-size: 11px; transform: translate(-50%, -50%); opacity: 0.8;">${data[i][text.fid]}</div>`,
+                                            })}
+                                        />
+                                    )}
+                                </Fragment>
+                            );
+                        })}
+                    </Fragment>
+                );
+            })}
+        </MapContainer>
+    );
+});
+
+
+export default ChoroplethRenderer;

package/src/components/leafletRenderer/POIRenderer.tsx

@@ -0,0 +1,189 @@
+import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import { MapContainer, TileLayer, Tooltip, CircleMarker } from "react-leaflet";
+import type { Map } from "leaflet";
+import type { DeepReadonly, IRow, IViewField, VegaGlobalConfig } from "../../interfaces";
+import { getMeaAggKey } from "../../utils";
+import { useColorScale, useOpacityScale, useSizeScale } from "./encodings";
+import { TooltipContent } from "./tooltip";
+import { useAppRootContext } from "../appRoot";
+
+
+export interface IPOIRendererProps {
+    name?: string;
+    data: IRow[];
+    allFields: DeepReadonly<IViewField[]>;
+    defaultAggregated: boolean;
+    latitude: DeepReadonly<IViewField> | undefined;
+    longitude: DeepReadonly<IViewField> | undefined;
+    color: DeepReadonly<IViewField> | undefined;
+    opacity: DeepReadonly<IViewField> | undefined;
+    size: DeepReadonly<IViewField> | undefined;
+    details: readonly DeepReadonly<IViewField>[];
+    vegaConfig: VegaGlobalConfig;
+}
+
+export interface IPOIRendererRef {}
+
+export const isValidLatLng = (latRaw: unknown, lngRaw: unknown) => {
+    const lat = Number(latRaw);
+    const lng = Number(lngRaw);
+    return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
+};
+
+const formatCoerceLatLng = (latRaw: unknown, lngRaw: unknown) => {
+    return `${
+        typeof latRaw === 'number' ? latRaw : JSON.stringify(latRaw)
+    }, ${
+        typeof lngRaw === 'number' ? lngRaw : JSON.stringify(lngRaw)
+    }`;
+};
+
+const debugMaxLen = 20;
+
+const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIRenderer (props, ref) {
+    const { name, data, allFields, latitude, longitude, color, opacity, size, details, defaultAggregated, vegaConfig } = props;
+    
+    const lngLat = useMemo<[lat: number, lng: number][]>(() => {
+        if (longitude && latitude) {
+            return data.map<[lat: number, lng: number]>(row => [Number(row[latitude.fid]), Number(row[longitude.fid])]).filter(v => isValidLatLng(v[0], v[1]));
+        }
+        return [];
+    }, [longitude, latitude, data]);
+
+    const [bounds, center] = useMemo<[bounds: [[n: number, w: number], [s: number, e: number]], center: [lng: number, lat: number]]>(() => {
+        if (lngLat.length > 0) {
+            const [bounds, coords] = lngLat.reduce<[bounds: [[w: number, n: number], [e: number, s: number]], center: [lat: number, lng: number]]>(([bounds, acc], [lat, lng]) => {
+                if (lng < bounds[0][0]) {
+                    bounds[0][0] = lng;
+                }
+                if (lng > bounds[1][0]) {
+                    bounds[1][0] = lng;
+                }
+                if (lat < bounds[0][1]) {
+                    bounds[0][1] = lat;
+                }
+                if (lat > bounds[1][1]) {
+                    bounds[1][1] = lat;
+                }
+                return [bounds, [acc[0] + lng, acc[1] + lat]];
+            }, [[[-180, -90], [180, 90]], [0, 0]]);
+            return [bounds, [coords[0] / lngLat.length, coords[1] / lngLat.length] as [number, number]];
+        }
+                
+        return [[[-180, -90], [180, 90]], [0, 0]];
+    }, [lngLat]);
+
+    const failedLatLngListRef = useRef<[index: number, lng: unknown, lat: unknown][]>([]);
+    failedLatLngListRef.current = [];
+
+    useEffect(() => {
+        if (failedLatLngListRef.current.length > 0) {
+            console.warn(`Failed to render ${failedLatLngListRef.current.length.toLocaleString()} markers of ${data.length.toLocaleString()} rows due to invalid lat/lng.\n--------\n${
+                `${failedLatLngListRef.current.slice(0, debugMaxLen).map(([idx, lng, lat]) =>
+                    `[${idx + 1}] ${formatCoerceLatLng(lat, lng)}`
+                ).join('\n')}`
+                + (failedLatLngListRef.current.length > debugMaxLen ? `\n\t... and ${(failedLatLngListRef.current.length - debugMaxLen).toLocaleString()} more` : '')
+            }\n`);
+        }
+    });
+
+    const mapRef = useRef<Map>(null);
+
+    useEffect(() => {
+        const container = mapRef.current?.getContainer();
+        if (container) {
+            const ro = new ResizeObserver(() => {
+                mapRef.current?.invalidateSize();
+            });
+            ro.observe(container);
+            return () => {
+                ro.unobserve(container);
+            };
+        }
+    });
+
+    const appRef = useAppRootContext();
+
+    useEffect(() => {
+        const ctx = appRef.current;
+        if (ctx) {
+            ctx.exportChart = async (mode) => ({
+                mode,
+                title: name || 'untitled',
+                nCols: 0,
+                nRows: 0,
+                charts: [],
+                container: () => mapRef.current?.getContainer() as HTMLDivElement ?? null,
+                chartType: 'map',
+            })
+        }
+    }, []);
+
+    useEffect(() => {
+        mapRef.current?.flyToBounds(bounds);
+    }, [`${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`]);
+
+    const sizeScale = useSizeScale(data, size, defaultAggregated);
+    const opacityScale = useOpacityScale(data, opacity, defaultAggregated);
+    const colorScale = useColorScale(data, color, defaultAggregated, vegaConfig);
+
+    const tooltipFields = useMemo(() => {
+        return details.concat(
+            [size!, color!, opacity!].filter(Boolean)
+        ).map(f => ({
+            ...f,
+            key: defaultAggregated && f.analyticType === 'measure' && f.aggName ? getMeaAggKey(f.fid, f.aggName) : f.fid,
+        }));
+    }, [defaultAggregated, details, size, color, opacity]);
+    
+    return (
+        <MapContainer center={center} ref={mapRef} zoom={5} bounds={bounds} style={{ width: '100%', height: '100%', zIndex: 1 }}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {Boolean(latitude && longitude) && data.map((row, i) => {
+                const lat = row[latitude!.fid];
+                const lng = row[longitude!.fid];
+                if (!isValidLatLng(lat, lng)) {
+                    failedLatLngListRef.current.push([i, lat, lng]);
+                    return null;
+                }
+                const radius = sizeScale(row);
+                const opacity = opacityScale(row);
+                const color = colorScale(row);
+                return (
+                    <CircleMarker
+                        key={`${i}-${radius}-${opacity}-${color}`}
+                        center={[Number(lat), Number(lng)]}
+                        radius={radius}
+                        opacity={0.8}
+                        fillOpacity={opacity}
+                        fillColor={color}
+                        color="#0004"
+                        weight={1}
+                        stroke
+                        fill
+                    >
+                        {tooltipFields.length > 0 && (
+                            <Tooltip>
+                                {tooltipFields.map((f, j) => (
+                                    <TooltipContent
+                                        key={j}
+                                        allFields={allFields}
+                                        vegaConfig={vegaConfig}
+                                        field={f}
+                                        value={row[f.key]}
+                                    />
+                                ))}
+                            </Tooltip>
+                        )}
+                    </CircleMarker>
+                );
+            })}
+        </MapContainer>
+    );
+});
+
+
+export default POIRenderer;

package/src/components/leafletRenderer/encodings.ts

@@ -0,0 +1,194 @@
+import { useCallback, useMemo } from "react";
+import { scaleLinear, scaleOrdinal } from "d3-scale";
+import type { IRow, IViewField, VegaGlobalConfig } from "../../interfaces";
+import { getMeaAggKey } from "../../utils";
+
+
+export interface Scale<T> {
+    (record: IRow): T;
+}
+
+const DEFAULT_COLOR = "#5B8FF9";
+const DEFAULT_COLOR_STEP_1 = "#EBCCFF";
+const DEFAULT_COLOR_STEP_2 = "#0D1090";
+const DEFAULT_SCHEME_CATEGORY = [
+    "#5B8FF9",
+    "#61DDAA",
+    "#65789B",
+    "#F6BD16",
+    "#7262FD",
+    "#78D3F8",
+    "#9661BC",
+    "#F6903D",
+    "#008685",
+    "#F08BB4",
+];
+
+export const useColorScale = (data: IRow[], field: IViewField | null | undefined, defaultAggregate: boolean, vegaConfig: VegaGlobalConfig): Scale<string> => {
+    const color = (vegaConfig as any).circle?.fill || DEFAULT_COLOR;
+    const fixedScale = useCallback(function ColorScale (row: IRow) {
+        return color;
+    }, [color]);
+    const colorRange = useMemo(() => {
+        if ('scale' in vegaConfig && typeof vegaConfig.scale === 'object' && 'continuous' in vegaConfig.scale) {
+            if (Array.isArray((vegaConfig.scale?.continuous as any).range)) {
+                return ((vegaConfig.scale?.continuous as any).range as string[]).slice(0, 2);
+            }
+        }
+        return [DEFAULT_COLOR_STEP_1, DEFAULT_COLOR_STEP_2];
+    }, [vegaConfig]);
+    const schemeCategory = useMemo(() => {
+        if (Array.isArray(vegaConfig.range?.category)) {
+            return vegaConfig.range!.category as string[];
+        }
+        return DEFAULT_SCHEME_CATEGORY;
+    }, [vegaConfig]);
+    const key = useMemo(() => {
+        if (!field) {
+            return '';
+        }
+        if (defaultAggregate && field.aggName && field.analyticType === 'measure') {
+            return getMeaAggKey(field.fid, field.aggName);
+        }
+        return field.fid;
+    }, [field, defaultAggregate]);
+    const domain = useMemo<[number, number]>(() => {
+        if (!field || field.semanticType === 'nominal') {
+            return [0, 0];
+        }
+        return data.reduce((dom: [number, number], { [key]: cur }) => {
+            if (cur < dom[0]) {
+                dom[0] = cur;
+            }
+            if (cur > dom[1]) {
+                dom[1] = cur;
+            }
+            return dom;
+        }, [Infinity, -Infinity]);
+    }, [data, field, key]);
+    const distributions = useMemo(() => {
+        if (!field || field.semanticType !== 'nominal') {
+            return [];
+        }
+        return [...data.reduce((set: Set<string>, row) => {
+            set.add(row[key]);
+            return set;
+        }, new Set<string>())];
+    }, [data, field, key]);
+    const continuousScale = useMemo(() => {
+        const scale = scaleLinear<string, string>().domain(domain).range(colorRange);
+        return function ColorScale (row: IRow) {
+            return scale(Number(row[key]));
+        };
+    }, [domain, key, colorRange]);
+    const discreteScale = useMemo(() => {
+        const scale = scaleOrdinal<string, string>().domain(distributions).range(schemeCategory);
+        return function ColorScale (row: IRow) {
+            return scale(row[key]);
+        };
+    }, [distributions, schemeCategory]);
+
+    if (!field) {
+        return fixedScale;
+    }
+    if (field.semanticType === 'quantitative' || field.semanticType === 'temporal') {
+        // continuous
+        return continuousScale;
+    }
+    return discreteScale;
+};
+
+const MIN_SIZE = 2;
+const MAX_SIZE = 10;
+const DEFAULT_SIZE = 3;
+
+export const useSizeScale = (data: IRow[], field: IViewField | null | undefined, defaultAggregate: boolean): Scale<number> => {
+    const key = useMemo(() => {
+        if (!field) {
+            return '';
+        }
+        if (defaultAggregate && field.aggName && field.analyticType === 'measure') {
+            return getMeaAggKey(field.fid, field.aggName);
+        }
+        return field.fid;
+    }, [field, defaultAggregate]);
+
+    const [domainMin, domainMax] = useMemo(() => {
+        if (!key) {
+            return [0, 0];
+        }
+        const values = data.map((row) => Number(row[key])).filter((val) => !isNaN(val));
+        if (values.length === 0) {
+            return [0, 0];
+        }
+        return values.slice(1).reduce<[number, number]>((acc, val) => {
+            if (val < acc[0]) {
+                acc[0] = val;
+            }
+            if (val > acc[1]) {
+                acc[1] = val;
+            }
+            return acc;
+        }, [values[0], values[0]]);
+    }, [key, data]);
+    
+    return useCallback(function SizeScale (record: IRow): number {
+        if (!key) {
+            return DEFAULT_SIZE;
+        }
+        const val = Number(record[key]);
+        if (isNaN(val)) {
+            return 0;
+        }
+        const size = (val - domainMin) / (domainMax - domainMin);
+        return MIN_SIZE + Math.sqrt(size) * (MAX_SIZE - MIN_SIZE);
+    }, [key, domainMin, domainMax, defaultAggregate]);
+};
+
+
+const MIN_OPACITY = 0.33;
+const MAX_OPACITY = 1.0;
+const DEFAULT_OPACITY = 1;
+
+export const useOpacityScale = (data: IRow[], field: IViewField | null | undefined, defaultAggregate: boolean): Scale<number> => {
+    const key = useMemo(() => {
+        if (!field) {
+            return '';
+        }
+        if (defaultAggregate && field.aggName && field.analyticType === 'measure') {
+            return getMeaAggKey(field.fid, field.aggName);
+        }
+        return field.fid;
+    }, [field, defaultAggregate]);
+
+    const [domainMin, domainMax] = useMemo(() => {
+        if (!key) {
+            return [0, 0];
+        }
+        const values = data.map((row) => Number(row[key])).filter((val) => !isNaN(val));
+        if (values.length === 0) {
+            return [0, 0];
+        }
+        return values.slice(1).reduce<[number, number]>((acc, val) => {
+            if (val < acc[0]) {
+                acc[0] = val;
+            }
+            if (val > acc[1]) {
+                acc[1] = val;
+            }
+            return acc;
+        }, [values[0], values[0]]);
+    }, [key, data]);
+    
+    return useCallback(function OpacityScale (record: IRow): number {
+        if (!key) {
+            return DEFAULT_OPACITY;
+        }
+        const val = Number(record[key]);
+        if (isNaN(val)) {
+            return 0;
+        }
+        const size = (val - domainMin) / (domainMax - domainMin);
+        return MIN_OPACITY + size * (MAX_OPACITY - MIN_OPACITY);
+    }, [key, domainMin, domainMax, defaultAggregate]);
+};