@kanaries/graphic-walker 0.4.1 → 0.4.3

package/src/index.tsx

@@ -1,5 +1,5 @@
-import React, { type ForwardedRef, forwardRef } from "react";
-import { DOM } from "@kanaries/react-beautiful-dnd";
+import React, { type ForwardedRef, forwardRef, useState } from "react";
+import { DOMProvider } from "@kanaries/react-beautiful-dnd";
 import { observer } from "mobx-react-lite";
 import App, { IGWProps } from "./App";
 import { StoreWrapper } from "./store/index";
@@ -13,22 +13,24 @@ import "./empty_sheet.css";
 export const GraphicWalker = observer(forwardRef<IGWHandler, IGWProps>((props, ref) => {
     const { storeRef } = props;
 
+    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+
     const handleMount = (shadowRoot: ShadowRoot) => {
-        DOM.setBody(shadowRoot);
-        DOM.setHead(shadowRoot);
+        setShadowRoot(shadowRoot);
     };
     const handleUnmount = () => {
-        DOM.setBody(document.body);
-        DOM.setHead(document.head);
+        setShadowRoot(null);
     };
 
     return (
         <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
             <AppRoot ref={ref as ForwardedRef<IGWHandlerInsider>}>
                 <ShadowDom onMount={handleMount} onUnmount={handleUnmount}>
-                    <FieldsContextWrapper>
-                        <App {...props} />
-                    </FieldsContextWrapper>
+                    <DOMProvider value={{ head: shadowRoot ?? document.head, body: shadowRoot ?? document.body }}>
+                        <FieldsContextWrapper>
+                            <App {...props} />
+                        </FieldsContextWrapper>
+                    </DOMProvider>
                 </ShadowDom>
             </AppRoot>
         </StoreWrapper>

package/src/interfaces.ts

@@ -1,5 +1,7 @@
 import {Config as VgConfig, View} from 'vega';
 import {Config as VlConfig} from 'vega-lite';
+import type { FeatureCollection } from 'geojson';
+import type { feature } from 'topojson-client';
 import type {IViewQuery} from "./lib/viewQuery";
 
 export type DeepReadonly<T extends Record<keyof any, any>> = {
@@ -86,6 +88,8 @@ export interface IExpression {
     as: string;
 }
 
+export type IGeoRole = 'longitude' | 'latitude' | 'none';
+
 export interface IField {
     /**
      * fid: key in data record
@@ -101,6 +105,7 @@ export interface IField {
     aggName?: string;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
+    geoRole?: IGeoRole;
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
     expression?: IExpression;
@@ -183,6 +188,9 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    longitude: IViewField[];
+    latitude: IViewField[];
+    geoId: IViewField[];
     details: IViewField[];
     filters: IFilterField[];
     text: IViewField[];
@@ -209,14 +217,21 @@ export type IFilterRule =
 
 export type IStackMode = 'none' | 'stack' | 'normalize' | 'zero' | 'center';
 
+export type ICoordMode = 'generic' | 'geographic';
+
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];
+    showTableSummary: boolean;
+    /** @default "generic" */
+    coordSystem?: ICoordMode;
     stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
     sorted: ISortMode;
     zeroScale: boolean;
+    /** @default false */
+    scaleIncludeUnmatchedChoropleth?: boolean;
     background?: string;
     format: {
         numberFormat?: string;
@@ -236,6 +251,8 @@ export interface IVisualConfig {
         width: number;
         height: number;
     };
+    geojson?: FeatureCollection;
+    geoKey?: string;
     limit: number;
 }
 
@@ -294,6 +311,7 @@ export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data
         canvas(): HTMLCanvasElement | null;
     }[];
     container(): HTMLDivElement | null;
+    chartType?: string;
 }
 
 interface IExportChart {
@@ -448,3 +466,20 @@ export type IResponse<T> = (
         };
     }
 );
+
+export type Topology = Parameters<typeof feature>[0];
+
+export type IGeographicData = (
+    | {
+        type: 'GeoJSON';
+        data: FeatureCollection;
+    }
+    | {
+        type: 'TopoJSON';
+        data: Topology;
+        /**
+         * default to the first key of `objects` in Topology
+         */
+        objectKey?: string;
+    }
+);

package/src/locales/en-US.json

@@ -39,7 +39,14 @@
             "arc": "Arc",
             "boxplot": "Box (Box Plot)",
             "table": "Table",
-            "text": "Text"
+            "text": "Text",
+            "poi": "POI",
+            "choropleth": "Choropleth"
+        },
+        "coord_system": {
+            "__enum__": "Coordinate System",
+            "generic": "Generic",
+            "geographic": "Geographic"
         },
         "stack_mode": {
             "__enum__": "Stack Mode",
@@ -77,7 +84,10 @@
             "radius": "Radius",
             "filters": "Filters",
             "details": "Details",
-            "text": "Text"
+            "text": "Text",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "geoId": "Geometry ID"
         },
         "aggregator": {
             "sum": "Sum",
@@ -168,6 +178,21 @@
                 "size_setting": {
                     "width": "Width",
                     "height": "Height"
+                },
+                "table": {
+                    "summary": "Show summary"
+                },
+                "geography": "Geography Configuration",
+                "geography_settings": {
+                    "geoKey": "Feature ID",
+                    "format": "Format",
+                    "geojson": "GeoJSON",
+                    "topojson": "TopoJSON",
+                    "objectKey": "Extract Feature Key",
+                    "jsonInputPlaceholder": "Paste {{format}} here",
+                    "href": "{{format}} URL",
+                    "hrefPlaceholder": "Enter {{format}} URL",
+                    "load": "Load"
                 }
             },
             "DatasetFields": {

package/src/locales/ja-JP.json

@@ -39,7 +39,14 @@
             "arc": "アーク",
             "boxplot": "ボックスプロット",
             "table": "表",
-            "text": "本文"
+            "text": "テキスト",
+            "poi": "POI",
+            "choropleth": "コロプレス"
+        },
+        "coord_system": {
+            "__enum__": "座標系",
+            "generic": "ジェネリック",
+            "geographic": "地理"
         },
         "stack_mode": {
             "__enum__": "スタックモード",
@@ -76,7 +83,10 @@
             "theta": "角度",
             "radius": "半径",
             "filters": "フィルター",
-            "text": "本文"
+            "text": "本文",
+            "longitude": "経度",
+            "latitude": "緯度",
+            "geoId": "地理ID"
         },
         "aggregator": {
             "sum": "合計",
@@ -167,6 +177,21 @@
                 "size_setting": {
                     "width": "幅",
                     "height": "高さ"
+                },
+                "table": {
+                    "summary": "サマリを表示"
+                },
+                "geography": "地理情報設定",
+                "geography_settings": {
+                    "geoKey": "フィーチャーID",
+                    "format": "データ形式",
+                    "geojson": "GeoJSON",
+                    "topojson": "TopoJSON",
+                    "objectKey": "Feature のキー",
+                    "jsonInputPlaceholder": "{{format}}をここに貼り付けてください",
+                    "href": "{{format}} URL",
+                    "hrefPlaceholder": "{{format}} URLを入力",
+                    "load": "ロード"
                 }
             },
             "DatasetFields": {

package/src/locales/zh-CN.json

@@ -39,7 +39,14 @@
             "arc": "弧形",
             "boxplot": "统计箱",
             "table": "表格",
-            "text": "文本"
+            "text": "文本",
+            "poi": "兴趣点",
+            "choropleth": "区域图"
+        },
+        "coord_system": {
+            "__enum__": "坐标系统",
+            "generic": "通用",
+            "geographic": "地理"
         },
         "layout_type": {
             "__enum__": "尺寸模式",
@@ -77,7 +84,10 @@
             "radius": "半径",
             "filters": "筛选器",
             "details": "信息",
-            "text": "文本"
+            "text": "文本",
+            "longitude": "经度",
+            "latitude": "纬度",
+            "geoId": "地理 ID"
         },
         "aggregator": {
             "sum": "求和",
@@ -168,6 +178,21 @@
                 "size_setting": {
                     "width": "宽度",
                     "height": "高度"
+                },
+                "table": {
+                    "summary": "显示摘要"
+                },
+                "geography": "地理信息配置",
+                "geography_settings": {
+                    "geoKey": "地理 ID",
+                    "format": "数据格式",
+                    "geojson": "GeoJSON",
+                    "topojson": "TopoJSON",
+                    "objectKey": "提取要素键",
+                    "jsonInputPlaceholder": "在此粘贴 {{format}}",
+                    "href": "{{format}} URL",
+                    "hrefPlaceholder": "输入在线资源地址",
+                    "load": "加载"
                 }
             },
             "DatasetFields": {

package/src/renderer/hooks.ts

@@ -8,7 +8,7 @@ import { dataQueryServer } from '../computation/serverComputation';
 
 export const useComputationFunc = (): IComputationFunction => {
     const { vizStore } = useGlobalStore();
-    return vizStore.computationFuction;
+    return vizStore.computationFunction;
 };
 
 interface UseRendererProps {

package/src/renderer/index.tsx

@@ -8,8 +8,9 @@ import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
 import { useRenderer } from './hooks';
-import { initEncoding } from '../store/visualSpecStore';
+import { initEncoding } from '../utils/save';
 import { useChartIndexControl } from '../utils/chartIndexControl';
+import { LEAFLET_DEFAULT_HEIGHT, LEAFLET_DEFAULT_WIDTH } from '../components/leafletRenderer';
 import { initVisualConfig } from '../utils/save';
 
 interface RendererProps {
@@ -102,6 +103,27 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         [vizStore]
     );
 
+    const isSpatial = viewConfig.coordSystem === 'geographic';
+
+    const sizeRef = useRef(viewConfig.size);
+    sizeRef.current = viewConfig.size;
+
+    useEffect(() => {
+        if (isSpatial) {
+            const prevSizeConfig = sizeRef.current;
+            if (sizeRef.current.width < LEAFLET_DEFAULT_WIDTH || sizeRef.current.height < LEAFLET_DEFAULT_HEIGHT) {
+                vizStore.setChartLayout({
+                    mode: sizeRef.current.mode,
+                    width: Math.max(prevSizeConfig.width, LEAFLET_DEFAULT_WIDTH),
+                    height: Math.max(prevSizeConfig.height, LEAFLET_DEFAULT_HEIGHT),
+                });
+                return () => {
+                    vizStore.setChartLayout(prevSizeConfig);
+                };
+            }
+        }
+    }, [isSpatial, vizStore]);
+
     return (
         <SpecRenderer
             name={chart?.name}
@@ -115,6 +137,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             visualConfig={viewConfig}
             onGeomClick={handleGeomClick}
             onChartResize={handleChartResize}
+            computationFunction={computationFunction}
         />
     );
 });

package/src/renderer/pureRenderer.tsx

@@ -3,6 +3,7 @@ import { unstable_batchedUpdates } from 'react-dom';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { ShadowDom } from '../shadow-dom';
+import LeafletRenderer from '../components/leafletRenderer';
 import { withAppRoot } from '../components/appRoot';
 import type {
     IDarkMode,
@@ -54,7 +55,6 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     const defaultAggregated = visualConfig?.defaultAggregated ?? false;
 
     const [viewData, setViewData] = useState<IRow[]>([]);
-
     const { allFields, viewDimensions, viewMeasures, filters } = useMemo(() => {
         const viewDimensions: IViewField[] = [];
         const viewMeasures: IViewField[] = [];
@@ -86,7 +86,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         limit: limit ?? -1,
         computationFunction: computation,
     });
-
+    console.log(computation)
     // Dependencies that should not trigger effect individually
     const latestFromRef = useRef({ data });
     latestFromRef.current = { data };
@@ -99,20 +99,34 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         }
     }, [waiting]);
 
+    const { coordSystem = 'generic' } = visualConfig;
+    const isSpatial = coordSystem === 'geographic';
+
     return (
         <ShadowDom>
             <div className="relative">
-                <SpecRenderer
-                    name={name}
-                    loading={waiting}
-                    data={viewData}
-                    ref={ref}
-                    themeKey={themeKey}
-                    dark={dark}
-                    draggableFieldState={visualState}
-                    visualConfig={visualConfig}
-                    locale={locale ?? 'en-US'}
-                />
+                {isSpatial && (
+                    <LeafletRenderer
+                        name={name}
+                        data={data}
+                        draggableFieldState={visualState}
+                        visualConfig={visualConfig}
+                    />
+                )}
+                {isSpatial || (
+                    <SpecRenderer
+                        name={name}
+                        loading={waiting}
+                        data={viewData}
+                        ref={ref}
+                        themeKey={themeKey}
+                        dark={dark}
+                        draggableFieldState={visualState}
+                        visualConfig={visualConfig}
+                        locale={locale ?? 'en-US'}
+                        computationFunction={computation}
+                    />
+                )}
             </div>
         </ShadowDom>
     );

package/src/renderer/specRenderer.tsx

@@ -3,8 +3,9 @@ import { Resizable } from 're-resizable';
 import React, { forwardRef, useMemo } from 'react';
 
 import PivotTable from '../components/pivotTable';
+import LeafletRenderer from '../components/leafletRenderer';
 import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig, IComputationFunction } from '../interfaces';
 import LoadingLayer from '../components/loadingLayer';
 import { useCurrentMediaTheme } from '../utils/media';
 import { builtInThemes } from '../vis/theme';
@@ -20,17 +21,18 @@ interface SpecRendererProps {
     onGeomClick?: ((values: any, e: any) => void) | undefined;
     onChartResize?: ((width: number, height: number) => void) | undefined;
     locale?: string;
+    computationFunction: IComputationFunction;
 }
 /**
  * Sans-store renderer of GraphicWalker.
  * This is a pure component, which means it will not depend on any global state.
  */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale, computationFunction  },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
+    const { geoms, coordSystem = 'generic', interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -108,10 +110,13 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 loading={loading}
                 themeKey={themeKey}
                 dark={dark}
+                computationFunction={computationFunction}
             />
         );
     }
 
+    const isSpatial = coordSystem === 'geographic';
+
     return (
         <Resizable
             className={enableResize ? 'border-blue-400 border-2 overflow-hidden' : ''}
@@ -139,33 +144,44 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
             }}
         >
             {loading && <LoadingLayer />}
-            <ReactVega
-                name={name}
-                vegaConfig={vegaConfig}
-                // format={format}
-                layoutMode={size.mode}
-                interactiveScale={interactiveScale}
-                geomType={geoms[0]}
-                defaultAggregate={defaultAggregated}
-                stack={stack}
-                dataSource={data}
-                rows={rows}
-                columns={columns}
-                color={color[0]}
-                theta={theta[0]}
-                radius={radius[0]}
-                shape={shape[0]}
-                opacity={opacity[0]}
-                size={sizeChannel[0]}
-                details={details}
-                text={text[0]}
-                showActions={showActions}
-                width={size.width - 12 * 4}
-                height={size.height - 12 * 4}
-                ref={ref}
-                onGeomClick={onGeomClick}
-                locale={locale}
-            />
+            {isSpatial && (
+                <LeafletRenderer
+                    name={name}
+                    data={data}
+                    draggableFieldState={draggableFieldState}
+                    visualConfig={visualConfig}
+                    vegaConfig={vegaConfig}
+                />
+            )}
+            {isSpatial || (
+                <ReactVega
+                    name={name}
+                    vegaConfig={vegaConfig}
+                    // format={format}
+                    layoutMode={size.mode}
+                    interactiveScale={interactiveScale}
+                    geomType={geoms[0]}
+                    defaultAggregate={defaultAggregated}
+                    stack={stack}
+                    dataSource={data}
+                    rows={rows}
+                    columns={columns}
+                    color={color[0]}
+                    theta={theta[0]}
+                    radius={radius[0]}
+                    shape={shape[0]}
+                    opacity={opacity[0]}
+                    size={sizeChannel[0]}
+                    details={details}
+                    text={text[0]}
+                    showActions={showActions}
+                    width={size.width - 12 * 4}
+                    height={size.height - 12 * 4}
+                    ref={ref}
+                    onGeomClick={onGeomClick}
+                    locale={locale}
+                />
+            )}
         </Resizable>
     );
 });

package/src/services.ts

@@ -1,5 +1,6 @@
 import { toJS } from 'mobx';
-import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
+import { IRow, IMutField, IViewField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
+import { INestNode } from "./components/pivotTable/inteface";
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -11,6 +12,7 @@ import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from
 import FilterWorker from './workers/filter.worker?worker&inline';
 import TransformDataWorker from './workers/transform.worker?worker&inline';
 import ViewQueryWorker from './workers/viewQuery.worker?worker&inline';
+import BuildMetricTableWorker from './workers/buildMetricTable.worker?worker&inline';
 import SortWorker from './workers/sort.worker?worker&inline';
 
 import { IViewQuery } from './lib/viewQuery';
@@ -105,22 +107,12 @@ interface PreAnalysisParams {
 //     }
 // }
 
-let filterWorker: Worker | null = null;
-let filterWorkerAutoTerminator: NodeJS.Timeout | null = null;
 
 export const applyFilter = async (data: IRow[], filters: readonly IFilterFiledSimple[]): Promise<IRow[]> => {
     if (filters.length === 0) return data;
-    if (filterWorkerAutoTerminator !== null) {
-        clearTimeout(filterWorkerAutoTerminator);
-        filterWorkerAutoTerminator = null;
-    }
-
-    if (filterWorker === null) {
-        filterWorker = new FilterWorker();
-    }
-
+    const worker = new FilterWorker();
     try {
-        const res: IRow[] = await workerService(filterWorker, {
+        const res: IRow[] = await workerService(worker, {
             dataSource: data,
             filters: toJS(filters),
         });
@@ -130,15 +122,7 @@ export const applyFilter = async (data: IRow[], filters: readonly IFilterFiledSi
         // @ts-ignore @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
         throw new Error('Uncaught error in FilterWorker', { cause: error });
     } finally {
-        if (filterWorkerAutoTerminator !== null) {
-            clearTimeout(filterWorkerAutoTerminator);
-        }
-
-        filterWorkerAutoTerminator = setTimeout(() => {
-            filterWorker?.terminate();
-            filterWorker = null;
-            filterWorkerAutoTerminator = null;
-        }, 60_000); // Destroy the worker when no request is received for 60 secs
+        worker.terminate();
     }
 };
 
@@ -171,7 +155,32 @@ export const applyViewQuery = async (data: IRow[], query: IViewQuery): Promise<I
     } finally {
         worker.terminate();
     }
-};
+}
+
+export const buildPivotTableService = async (dimsInRow: IViewField[], 
+        dimsInColumn: IViewField[], 
+        allData: IRow[], 
+        aggData: IRow[], 
+        collapsedKeyList: string[], 
+        showTableSummary: boolean
+    ): Promise<{lt: INestNode, tt: INestNode, metric: (IRow | null)[][]}> => {
+    const worker = new BuildMetricTableWorker();
+    try {
+        const res: {lt: INestNode, tt: INestNode, metric: (IRow | null)[][]} = await workerService(worker, {
+            dimsInRow,
+            dimsInColumn, 
+            allData, 
+            aggData, 
+            collapsedKeyList, 
+            showTableSummary
+        });
+        return res;
+    } catch (error) {
+        throw new Error('Uncaught error in TableBuilderDataWorker', { cause: error });
+    } finally {
+        worker.terminate();
+    }
+}
 
 export const applySort = async (
     data: IRow[],

package/src/shadow-dom.tsx

@@ -36,6 +36,13 @@ export const ShadowDom: React.FC<IShadowDomProps> = function ShadowDom ({ onMoun
         <root.div {...attrs} mode="open" ref={rootRef}>
             <style>{tailwindStyle}</style>
             <style>{style}</style>
+            {/* Leaflet CSS file */}
+            <link
+                rel="stylesheet"
+                href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+                integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+                crossOrigin=""
+            />
             {shadowRoot && (
                 <StyleSheetManager target={shadowRoot}>
                     <ShadowDomContext.Provider value={{ root: shadowRoot }}>