@kanaries/graphic-walker 0.4.0 → 0.4.2

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]);
+};

package/src/components/leafletRenderer/geoConfigPanel.tsx

@@ -0,0 +1,197 @@
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { runInAction } from 'mobx';
+import { useGlobalStore } from '../../store';
+import Modal from '../modal';
+import PrimaryButton from '../button/primary';
+import DefaultButton from '../button/default';
+import type { Topology } from '../../interfaces';
+
+const GeoConfigPanel: React.FC = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { showGeoJSONConfigPanel } = commonStore;
+    const { visualConfig } = vizStore;
+    const { geoKey, geojson } = visualConfig;
+    const { t: tGlobal } = useTranslation('translation');
+    const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
+
+    const [dataMode, setDataMode] = useState<'GeoJSON' | 'TopoJSON'>('GeoJSON');
+    const [featureId, setFeatureId] = useState('');
+    const [url, setUrl] = useState('');
+    const [geoJSON, setGeoJSON] = useState('');
+    const [topoJSON, setTopoJSON] = useState('');
+    const [topoJSONKey, setTopoJSONKey] = useState('');
+
+    const defaultTopoJSONKey = useMemo(() => {
+        try {
+            const value = JSON.parse(topoJSON) as Topology;
+            return Object.keys(value.objects)[0] || '';
+        } catch (error) {
+            return '';
+        }
+    }, [topoJSON]);
+
+    useEffect(() => {
+        setFeatureId(geoKey || '');
+    }, [geoKey]);
+
+    useEffect(() => {
+        setGeoJSON(geojson ? JSON.stringify(geojson, null, 2) : '');
+    }, [geojson]);
+
+    return (
+        <Modal
+            show={showGeoJSONConfigPanel}
+            onClose={() => {
+                commonStore.setShowGeoJSONConfigPanel(false);
+            }}
+        >
+            <div>
+                <h2 className="text-lg mb-4">{t('geography')}</h2>
+                <div>
+                    <div className="my-2">
+                        <label className="block text-xs font-medium leading-6 text-gray-900">{t('geography_settings.geoKey')}</label>
+                        <div className="mt-1">
+                            <input
+                                type="text"
+                                className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                value={featureId}
+                                onChange={(e) => {
+                                    setFeatureId(e.target.value);
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div className="my-2">
+                        <label className="block text-xs font-medium leading-6 text-gray-900">{t(`geography_settings.${dataMode.toLowerCase()}`)}</label>
+                        <div className="mt-1 flex flex-col space-y-2">
+                            <div role="radiogroup">
+                                <div className="flex items-center space-x-2">
+                                    <input
+                                        type="radio"
+                                        name="dataMode"
+                                        id="geojson"
+                                        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:bg-gray-800 dark:border-gray-600"
+                                        checked={dataMode === 'GeoJSON'}
+                                        onChange={() => {
+                                            setDataMode('GeoJSON');
+                                        }}
+                                    />
+                                    <label htmlFor="geojson" className="text-xs whitespace-nowrap">
+                                        {t('geography_settings.geojson')}
+                                    </label>
+                                    <input
+                                        type="radio"
+                                        name="dataMode"
+                                        id="topojson"
+                                        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:bg-gray-800 dark:border-gray-600"
+                                        checked={dataMode === 'TopoJSON'}
+                                        onChange={() => {
+                                            setDataMode('TopoJSON');
+                                        }}
+                                    />
+                                    <label htmlFor="topojson" className="text-xs whitespace-nowrap">
+                                        {t('geography_settings.topojson')}
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <label className="text-xs whitespace-nowrap capitalize">
+                                    {t('geography_settings.href', { format: dataMode.toLowerCase() })}
+                                </label>
+                                <input
+                                    type="text"
+                                    className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                    value={url}
+                                    placeholder={t('geography_settings.hrefPlaceholder', { format: dataMode.toLowerCase() })}
+                                    onChange={(e) => {
+                                        setUrl(e.target.value);
+                                    }}
+                                />
+                                <DefaultButton
+                                    text={t('geography_settings.load')}
+                                    className="mr-2"
+                                    onClick={() => {
+                                        if (url) {
+                                            fetch(url)
+                                                .then((res) => res.json())
+                                                .then((json) => {
+                                                    (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(
+                                                        JSON.stringify(json, null, 2)
+                                                    );
+                                                });
+                                        }
+                                    }}
+                                />
+                            </div>
+                            <textarea
+                                className="block w-full h-40 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 resize-none"
+                                value={dataMode === 'GeoJSON' ? geoJSON : topoJSON}
+                                placeholder={t('geography_settings.jsonInputPlaceholder', { format: dataMode.toLowerCase() })}
+                                onChange={(e) => {
+                                    (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(e.target.value);
+                                }}
+                            />
+                            {dataMode === 'TopoJSON' && (
+                                <div className="flex items-center space-x-2">
+                                    <label className="text-xs whitespace-nowrap capitalize">
+                                        {t('geography_settings.objectKey')}
+                                    </label>
+                                    <input
+                                        type="text"
+                                        className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                        value={topoJSONKey}
+                                        placeholder={defaultTopoJSONKey}
+                                        onChange={(e) => {
+                                            setTopoJSONKey(e.target.value);
+                                        }}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-4">
+                    <PrimaryButton
+                        text={tGlobal('actions.confirm')}
+                        className="mr-2"
+                        onClick={() => {
+                            try {
+                                const json = JSON.parse(dataMode === 'GeoJSON' ? geoJSON : topoJSON);
+                                if (dataMode === 'TopoJSON') {
+                                    runInAction(() => {
+                                        vizStore.setGeographicData({
+                                            type: 'TopoJSON',
+                                            data: json,
+                                            objectKey: topoJSONKey || defaultTopoJSONKey,
+                                        }, featureId);
+                                    });
+                                } else {
+                                    runInAction(() => {
+                                        vizStore.setGeographicData({
+                                            type: 'GeoJSON',
+                                            data: json,
+                                        }, featureId);
+                                    });
+                                }
+                                commonStore.setShowGeoJSONConfigPanel(false);
+                            } catch (err) {
+                                console.error(err);
+                            }
+                        }}
+                    />
+                    <DefaultButton
+                        text={tGlobal('actions.cancel')}
+                        className="mr-2"
+                        onClick={() => {
+                            commonStore.setShowGeoJSONConfigPanel(false);
+                        }}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default observer(GeoConfigPanel);

package/src/components/leafletRenderer/index.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, useMemo } from "react";
+import type { DeepReadonly, DraggableFieldState, IRow, IVisualConfig, VegaGlobalConfig } from "../../interfaces";
+import POIRenderer from "./POIRenderer";
+import ChoroplethRenderer from "./ChoroplethRenderer";
+
+
+export interface ILeafletRendererProps {
+    vegaConfig?: VegaGlobalConfig;
+    draggableFieldState: DeepReadonly<DraggableFieldState>;
+    visualConfig: DeepReadonly<IVisualConfig>;
+    data: IRow[];
+}
+
+export interface ILeafletRendererRef {}
+
+export const LEAFLET_DEFAULT_WIDTH = 800;
+export const LEAFLET_DEFAULT_HEIGHT = 600;
+
+const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(function LeafletRenderer (props, ref) {
+    const { draggableFieldState, data, visualConfig, vegaConfig = {} } = props;
+    const { latitude: [lat], longitude: [lng], geoId: [geoId], dimensions, measures, size: [size], color: [color], opacity: [opacity], text: [text], details } = draggableFieldState;
+    const { defaultAggregated, geoms: [markType], geojson, geoKey = '', scaleIncludeUnmatchedChoropleth = false } = visualConfig;
+    const allFields = useMemo(() => [...dimensions, ...measures], [dimensions, measures]);
+    const latField = useMemo(() => allFields.find((f) => f.geoRole === 'latitude'), [allFields]);
+    const lngField = useMemo(() => allFields.find((f) => f.geoRole === 'longitude'), [allFields]);
+    const latitude = useMemo(() => lat ?? latField, [lat, latField]);
+    const longitude = useMemo(() => lng ?? lngField, [lng, lngField]);
+
+    if (markType === 'poi') {
+        return (
+            <POIRenderer
+                data={data}
+                allFields={allFields}
+                defaultAggregated={defaultAggregated}
+                latitude={latitude}
+                longitude={longitude}
+                color={color}
+                opacity={opacity}
+                size={size}
+                details={details}
+                vegaConfig={vegaConfig}
+            />
+        );
+    } else if (markType === 'choropleth') {
+        return (
+            <ChoroplethRenderer
+                data={data}
+                allFields={allFields}
+                features={geojson}
+                geoKey={geoKey}
+                defaultAggregated={defaultAggregated}
+                geoId={geoId}
+                color={color}
+                opacity={opacity}
+                text={text}
+                details={details}
+                vegaConfig={vegaConfig}
+                scaleIncludeUnmatchedChoropleth={scaleIncludeUnmatchedChoropleth}
+            />
+        );
+    }
+
+    return null;
+});
+
+
+export default LeafletRenderer;

package/src/components/leafletRenderer/tooltip.tsx

@@ -0,0 +1,24 @@
+import React, { memo, useMemo } from "react";
+import type { DeepReadonly, IViewField, VegaGlobalConfig } from "../../interfaces";
+import { useDisplayValueFormatter } from "./utils";
+
+
+export interface ITooltipContentProps {
+    allFields: readonly DeepReadonly<IViewField>[];
+    vegaConfig: VegaGlobalConfig;
+    field: DeepReadonly<IViewField>;
+    value: unknown;
+}
+
+export const TooltipContent = memo<ITooltipContentProps>(function TooltipContent ({ allFields, vegaConfig, field, value }) {
+    const { fid, analyticType, aggName } = field;
+    const fieldDisplayLabel = useMemo(() => {
+        const name = allFields.find(f => f.fid === fid)?.name ?? fid;
+        return analyticType === 'measure' && aggName ? `${aggName}(${name})` : name;
+    }, [allFields, fid, analyticType, aggName]);
+    const formatter = useDisplayValueFormatter(field.semanticType, vegaConfig);
+    
+    return (
+        <p>{fieldDisplayLabel}: {formatter(value)}</p>
+    );
+});

package/src/components/leafletRenderer/utils.ts

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+import { timeFormat as tFormat } from "d3-time-format";
+import { format } from "d3-format";
+import type { Config as VlConfig } from 'vega-lite';
+import type { ISemanticType, VegaGlobalConfig } from "../../interfaces";
+
+
+const defaultFormatter = (value: unknown): string => `${value}`;
+
+export const useDisplayValueFormatter = (semanticType: ISemanticType, vegaConfig: VegaGlobalConfig): (value: unknown) => string => {
+    const { timeFormat = "%b %d, %Y", numberFormat } = vegaConfig as Partial<VlConfig>;
+    const timeFormatter = useMemo<(value: unknown) => string>(() => {
+        const tf = tFormat(timeFormat);
+        return (value: unknown) => {
+            if (typeof value !== 'number' && typeof value !== 'string') {
+                return '';
+            }
+            const date = new Date(value);
+            if (isNaN(date.getTime())) {
+                return 'Invalid Date';
+            }
+            return tf(date);
+        };
+    }, [timeFormat]);
+    const numberFormatter = useMemo<(value: unknown) => string>(() => {
+        if (!numberFormat) {
+            return (value: unknown) => {
+                if (typeof value !== 'number') {
+                    return '';
+                }
+                return value.toLocaleString();
+            };
+        }
+        const nf = format(numberFormat);
+        return (value: unknown) => {
+            if (typeof value !== 'number') {
+                return '';
+            }
+            return nf(value);
+        };
+    }, [numberFormat]);
+    const formatter = useMemo(() => {
+        if (semanticType === 'quantitative') {
+            return numberFormatter;
+        } else if (semanticType === 'temporal') {
+            return timeFormatter;
+        } else {
+            return defaultFormatter;
+        }
+    }, [semanticType, numberFormatter, timeFormatter]);
+    return formatter;
+};

package/src/components/limitSetting.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDebounceValueBind } from '../hooks';
 
 export default function LimitSetting(props: { value: number; setValue: (v: number) => void }) {
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
+    const [innerValue, setInnerValue] = useDebounceValueBind(props.value, v => props.setValue(v));
 
     return (
         <div className=" mt-2">
@@ -10,15 +12,15 @@ export default function LimitSetting(props: { value: number; setValue: (v: numbe
                 className="w-full h-2 bg-blue-100 appearance-none"
                 type="range"
                 name="limit"
-                value={props.value > 0 ? props.value : 0}
+                value={innerValue > 0 ? innerValue : 0}
                 min="1"
                 max="50"
-                disabled={props.value < 0}
+                disabled={innerValue < 0}
                 step="1"
                 onChange={(e) => {
                     const v = parseInt(e.target.value);
                     if (!isNaN(v)) {
-                        props.setValue(v);
+                        setInnerValue(v);
                     }
                 }}
             />
@@ -26,12 +28,12 @@ export default function LimitSetting(props: { value: number; setValue: (v: numbe
                 <input
                     type="checkbox"
                     className="h-4 w-4 mr-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                    checked={props.value > 0}
+                    checked={innerValue > 0}
                     onChange={(e) => {
-                        props.setValue(e.target.checked ? 30 : -1);
+                        setInnerValue(e.target.checked ? 30 : -1);
                     }}
                 ></input>
-                {`${t('limit')}${props.value > 0 ? `: ${props.value}` : ''}`}
+                {`${t('limit')}${innerValue > 0 ? `: ${innerValue}` : ''}`}
             </output>
         </div>
     );