@kanaries/graphic-walker 0.4.0 → 0.4.2

package/src/components/dataTable/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
-import type { IMutField, IRow, DataSet } from '../../interfaces';
+import type { IMutField, IRow, DataSet, IComputationFunction } from '../../interfaces';
 import { useTranslation } from 'react-i18next';
 import LoadingLayer from "../loadingLayer";
 import { useComputationFunc } from "../../renderer/hooks";
@@ -16,6 +16,7 @@ interface DataTableProps {
     /** total count of rows */
     total: number;
     dataset: DataSet;
+    computation?: IComputationFunction;
     onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
     loading?: boolean;
 }
@@ -117,10 +118,11 @@ const getHeaderKey = (f: wrapMutField) => {
 };
 
 const DataTable: React.FC<DataTableProps> = (props) => {
-    const { size = 10, onMetaChange, dataset, total, loading: statLoading } = props;
+    const { size = 10, onMetaChange, dataset, computation, total, loading: statLoading } = props;
     const [pageIndex, setPageIndex] = useState(0);
     const { t } = useTranslation();
-    const computationFuction = useComputationFunc();
+    const defaultComputation = useComputationFunc();
+    const computationFunction = computation ?? defaultComputation;
 
     const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
         return ANALYTIC_TYPE_LIST.map((at) => ({
@@ -149,7 +151,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
         }
         setDataLoading(true);
         const taskId = ++taskIdRef.current;
-        dataReadRawServer(computationFuction, size, pageIndex).then(data => {
+        dataReadRawServer(computationFunction, size, pageIndex).then(data => {
             if (taskId === taskIdRef.current) {
                 setDataLoading(false);
                 setRows(data);
@@ -164,7 +166,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
         return () => {
             taskIdRef.current++;
         };
-    }, [computationFuction, pageIndex, size]);
+    }, [computationFunction, pageIndex, size]);
 
     const loading = statLoading || dataLoading;
 

package/src/components/leafletRenderer/ChoroplethRenderer.tsx

@@ -0,0 +1,293 @@
+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";
+
+
+export interface IChoroplethRendererProps {
+    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 { 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);
+            };
+        }
+    });
+
+    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,170 @@
+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";
+
+
+export interface IPOIRendererProps {
+    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 { 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);
+            };
+        }
+    });
+
+    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;