@kanaries/graphic-walker 0.3.7 → 0.3.8

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export declare const ShadowDomContext: React.Context<{
     root: ShadowRoot | null;
 }>;
 export declare const GraphicWalker: React.FC<IGWProps>;
+export { default as PureRenderer } from './renderer/pureRenderer';

package/dist/renderer/hooks.d.ts

@@ -0,0 +1,15 @@
+import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
+interface UseRendererProps {
+    data: IRow[];
+    allFields: Omit<IViewField, 'dragId'>[];
+    viewDimensions: IViewField[];
+    viewMeasures: IViewField[];
+    filters: readonly DeepReadonly<IFilterField>[];
+    defaultAggregated: boolean;
+}
+interface UseRendererResult {
+    viewData: IRow[];
+    loading: boolean;
+}
+export declare const useRenderer: (props: UseRendererProps) => UseRendererResult;
+export {};

package/dist/renderer/pureRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IDarkMode, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
+import type { IReactVegaHandler } from '../vis/react-vega';
+interface IPureRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    rawData?: IRow[];
+    visualState: DraggableFieldState;
+    visualConfig: IVisualConfig;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IPureRendererProps & React.RefAttributes<IReactVegaHandler>, "key" | keyof IPureRendererProps> & React.RefAttributes<IReactVegaHandler>>>;
+export default _default;

package/dist/renderer/specRenderer.d.ts

@@ -7,7 +7,13 @@ interface SpecRendererProps {
     data: IRow[];
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
-    visualConfig: IVisualConfig;
+    visualConfig: DeepReadonly<IVisualConfig>;
+    onGeomClick?: ((values: any, e: any) => void) | undefined;
+    onChartResize?: ((width: number, height: number) => void) | undefined;
 }
+/**
+ * Sans-store renderer of GraphicWalker.
+ * This is a pure component, which means it will not depend on any global state.
+ */
 declare const SpecRenderer: React.ForwardRefExoticComponent<SpecRendererProps & React.RefAttributes<IReactVegaHandler>>;
 export default SpecRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/components/pivotTable/index.tsx

@@ -39,7 +39,7 @@ interface PivotTableProps {
     data: IRow[];
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
-    visualConfig: IVisualConfig;
+    visualConfig: DeepReadonly<IVisualConfig>;
 }
 const PivotTable: React.FC<PivotTableProps> = (props) => {
     const { data, draggableFieldState } = props;

package/src/fields/aestheticFields.tsx

@@ -15,6 +15,8 @@ const AestheticFields: React.FC = props => {
 
     const channels = useMemo(() => {
         switch (geoms[0]) {
+            case 'bar':
+            case 'tick':
             case 'arc':
             case 'line':
             case 'area':

package/src/index.tsx

@@ -49,3 +49,5 @@ export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
         </StoreWrapper>
     );
 });
+
+export { default as PureRenderer } from './renderer/pureRenderer';

package/src/renderer/hooks.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
+import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import { getMeaAggKey } from '../utils';
+
+
+interface UseRendererProps {
+    data: IRow[];
+    allFields: Omit<IViewField, 'dragId'>[];
+    viewDimensions: IViewField[];
+    viewMeasures: IViewField[];
+    filters: readonly DeepReadonly<IFilterField>[];
+    defaultAggregated: boolean;
+}
+
+interface UseRendererResult {
+    viewData: IRow[];
+    loading: boolean;
+}
+
+export const useRenderer = (props: UseRendererProps): UseRendererResult => {
+    const { data, allFields, viewDimensions, viewMeasures, filters, defaultAggregated } = props;
+    const [computing, setComputing] = useState(false);
+    const taskIdRef = useRef(0);
+
+    const [viewData, setViewData] = useState<IRow[]>([]);
+
+    useEffect(() => {
+        const taskId = ++taskIdRef.current;
+        setComputing(true);
+        applyFilter(data, filters)
+            .then((data) => transformDataService(data, allFields))
+            .then((d) => {
+                // setViewData(d);
+                const dims = viewDimensions;
+                const meas = viewMeasures;
+                return applyViewQuery(d, dims.concat(meas), {
+                    op: defaultAggregated ? 'aggregate' : 'raw',
+                    groupBy: dims.map((f) => f.fid),
+                    measures: meas.map((f) => ({ field: f.fid, agg: f.aggName as any, asFieldKey: getMeaAggKey(f.fid, f.aggName!) })),
+                });
+            })
+            .then(data => {
+                if (taskId !== taskIdRef.current) {
+                    return;
+                }
+                unstable_batchedUpdates(() => {
+                    setComputing(false);
+                    setViewData(data);
+                });
+            }).catch((err) => {
+                if (taskId !== taskIdRef.current) {
+                    return;
+                }
+                console.error(err);
+                unstable_batchedUpdates(() => {
+                    setComputing(false);
+                    setViewData([]);
+                });
+            });
+        return () => {
+            taskIdRef.current++;
+        };
+    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated]);
+
+    return useMemo(() => {
+        return {
+            viewData,
+            loading: computing,
+        };
+    }, [viewData, computing]);
+};

package/src/renderer/index.tsx

@@ -1,72 +1,85 @@
 import { observer } from 'mobx-react-lite';
-import React, { useState, useEffect, forwardRef } from 'react';
-import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
 import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
 import SpecRenderer from './specRenderer';
-import { toJS } from 'mobx';
+import { runInAction, toJS } from 'mobx';
 import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
+import { useRenderer } from './hooks';
 import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
-import PivotTable from '../components/pivotTable';
-import { getMeaAggKey } from '../utils';
 
 interface RendererProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
 }
+/**
+ * Renderer of GraphicWalker editor.
+ * Depending on global store.
+ */
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
     const { themeKey, dark } = props;
-    const [waiting, setWaiting] = useState<boolean>(false);
     const { vizStore, commonStore } = useGlobalStore();
-    const { allFields, viewFilters, viewDimensions, viewMeasures } = vizStore;
+    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState } = vizStore;
     const { currentDataset } = commonStore;
     const { dataSource } = currentDataset;
+
     const [viewConfig, setViewConfig] = useState<IVisualConfig>(initVisualConfig);
     const [encodings, setEncodings] = useState<DeepReadonly<DraggableFieldState>>(initEncoding);
-
     const [viewData, setViewData] = useState<IRow[]>([]);
+
+    const { viewData: data, loading: waiting } = useRenderer({
+        data: dataSource,
+        allFields,
+        viewDimensions,
+        viewMeasures,
+        filters: viewFilters,
+        defaultAggregated: visualConfig.defaultAggregated,
+    });
+
+    // Dependencies that should not trigger effect individually
+    const latestFromRef = useRef({
+        data,
+        draggableFieldState: toJS(draggableFieldState),
+        visualConfig: toJS(visualConfig),
+    });
+    latestFromRef.current = {
+        data,
+        draggableFieldState: toJS(draggableFieldState),
+        visualConfig: toJS(visualConfig),
+    };
+
     useEffect(() => {
-        setWaiting(true);
-        applyFilter(dataSource, viewFilters)
-            .then((data) => transformDataService(data, allFields))
-            .then((d) => {
-                // setViewData(d);
-                const dims = viewDimensions;
-                const meas = viewMeasures;
-                const config = toJS(vizStore.visualConfig);
-                return applyViewQuery(d, dims.concat(meas), {
-                    op: config.defaultAggregated ? 'aggregate' : 'raw',
-                    groupBy: dims.map((f) => f.fid),
-                    measures: meas.map((f) => ({ field: f.fid, agg: f.aggName as any, asFieldKey: getMeaAggKey(f.fid, f.aggName!) })),
-                });
-            })
-            .then((data) => {
-                unstable_batchedUpdates(() => {
-                    setViewData(data);
-                    setWaiting(false);
-                    setEncodings(toJS(vizStore.draggableFieldState));
-                    setViewConfig(toJS(vizStore.visualConfig));
-                });
-            })
-            .catch((err) => {
-                console.error(err);
-                setWaiting(false);
+        if (waiting === false) {
+            unstable_batchedUpdates(() => {
+                setViewData(latestFromRef.current.data);
+                setEncodings(latestFromRef.current.draggableFieldState);
+                setViewConfig(latestFromRef.current.visualConfig);
             });
-    }, [dataSource, viewFilters, allFields, viewDimensions, viewMeasures]);
+        }
+    }, [waiting, vizStore]);
 
-    if (viewConfig.geoms.includes('table')) {
-        return (
-            <PivotTable
-                data={viewData}
-                draggableFieldState={encodings}
-                visualConfig={viewConfig}
-                loading={waiting}
-                themeKey={themeKey}
-                dark={dark}
-            />
-        );
-    }
+    const handleGeomClick = useCallback(
+        (values: any, e: any) => {
+            e.stopPropagation();
+            runInAction(() => {
+                commonStore.showEmbededMenu([e.pageX, e.pageY]);
+                commonStore.setFilters(values);
+            });
+        },
+        []
+    );
+
+    const handleChartResize = useCallback(
+        (width: number, height: number) => {
+            vizStore.setChartLayout({
+                mode: 'fixed',
+                width,
+                height,
+            });
+        },
+        [vizStore]
+    );
 
     return (
         <SpecRenderer
@@ -77,6 +90,8 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             dark={dark}
             draggableFieldState={encodings}
             visualConfig={viewConfig}
+            onGeomClick={handleGeomClick}
+            onChartResize={handleChartResize}
         />
     );
 });

package/src/renderer/pureRenderer.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, forwardRef, useMemo, useRef } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
+import type { IReactVegaHandler } from '../vis/react-vega';
+import SpecRenderer from './specRenderer';
+import { useRenderer } from './hooks';
+
+
+interface IPureRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    rawData?: IRow[];
+    visualState: DraggableFieldState;
+    visualConfig: IVisualConfig;
+}
+
+/**
+ * Render a readonly chart with given visualization schema.
+ * This is a pure component, which means it will not depend on any global state.
+ */
+const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer (props, ref) {
+    const {
+        themeKey,
+        dark,
+        rawData,
+        visualState,
+        visualConfig,
+    } = props;
+    const defaultAggregated = visualConfig?.defaultAggregated ?? false;
+
+    const [viewData, setViewData] = useState<IRow[]>([]);
+    
+    const { allFields, viewDimensions, viewMeasures, filters } = useMemo(() => {
+        const viewDimensions: IViewField[] = [];
+        const viewMeasures: IViewField[] = [];
+
+        const { dimensions, measures, filters, ...state } = toJS(visualState);
+        const allFields = [...dimensions, ...measures];
+
+        const dKeys = Object.keys(state) as (keyof DraggableFieldState)[];
+        for (const dKey of dKeys) {
+            for (const f of state[dKey]) {
+                if (f.analyticType === 'dimension') {
+                    viewDimensions.push(f);
+                } else if (f.analyticType === 'measure') {
+                    viewMeasures.push(f);
+                }
+            }
+        }
+
+        return { allFields, viewDimensions, viewMeasures, filters };
+    }, [visualState]);
+
+    const { viewData: data, loading: waiting } = useRenderer({
+        data: rawData ?? [],
+        allFields,
+        viewDimensions,
+        viewMeasures,
+        filters,
+        defaultAggregated,
+    });
+
+    // Dependencies that should not trigger effect individually
+    const latestFromRef = useRef({ data });
+    latestFromRef.current = { data };
+
+    useEffect(() => {
+        if (waiting === false) {
+            unstable_batchedUpdates(() => {
+                setViewData(latestFromRef.current.data);
+            });
+        }
+    }, [waiting]);
+
+    return (
+        <SpecRenderer
+            loading={waiting}
+            data={viewData}
+            ref={ref}
+            themeKey={themeKey}
+            dark={dark}
+            draggableFieldState={visualState}
+            visualConfig={visualConfig}
+        />
+    );
+});
+
+export default observer(PureRenderer);

package/src/renderer/specRenderer.tsx

@@ -1,8 +1,8 @@
-import { runInAction, toJS } from 'mobx';
+import { toJS } from 'mobx';
 import { Resizable } from 're-resizable';
-import React, { useCallback, forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
-import { useGlobalStore } from '../store';
+import PivotTable from '../components/pivotTable';
 import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
 import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig } from '../interfaces';
 import LoadingLayer from '../components/loadingLayer';
@@ -15,13 +15,18 @@ interface SpecRendererProps {
     data: IRow[];
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
-    visualConfig: IVisualConfig;
+    visualConfig: DeepReadonly<IVisualConfig>;
+    onGeomClick?: ((values: any, e: any) => void) | undefined;
+    onChartResize?: ((width: number, height: number) => void) | undefined;
 }
+/**
+ * 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 (
-    { themeKey, dark, data, loading, draggableFieldState, visualConfig },
+    { themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
     ref
 ) {
-    const { vizStore, commonStore } = useGlobalStore();
     // const { draggableFieldState, visualConfig } = vizStore;
     const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, zeroScale } = visualConfig;
 
@@ -43,19 +48,11 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         [columns]
     );
 
+    const isPivotTable = geoms[0] === 'table';
+
     const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
 
-    const handleGeomClick = useCallback(
-        (values: any, e: any) => {
-            e.stopPropagation();
-            runInAction(() => {
-                commonStore.showEmbededMenu([e.pageX, e.pageY]);
-                commonStore.setFilters(values);
-            });
-        },
-        []
-    );
-    const enableResize = size.mode === 'fixed' && !hasFacet;
+    const enableResize = size.mode === 'fixed' && !hasFacet && Boolean(onChartResize);
     const mediaTheme = useCurrentMediaTheme(dark);
     const themeConfig = builtInThemes[themeKey ?? 'vega']?.[mediaTheme];
 
@@ -85,16 +82,25 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         return config;
       }, [themeConfig, zeroScale, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
 
+    if (isPivotTable) {
+        return (
+            <PivotTable
+                data={data}
+                draggableFieldState={draggableFieldState}
+                visualConfig={visualConfig}
+                loading={loading}
+                themeKey={themeKey}
+                dark={dark}
+            />
+        );
+    }
+
     return (
         <Resizable
             className={enableResize ? 'border-blue-400 border-2 overflow-hidden' : ''}
             style={{ padding: '12px' }}
             onResizeStop={(e, direction, ref, d) => {
-                vizStore.setChartLayout({
-                    mode: 'fixed',
-                    width: size.width + d.width,
-                    height: size.height + d.height,
-                });
+                onChartResize?.(size.width + d.width, size.height + d.height);
             }}
             enable={
                 enableResize
@@ -139,7 +145,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 width={size.width - 12 * 4}
                 height={size.height - 12 * 4}
                 ref={ref}
-                onGeomClick={handleGeomClick}
+                onGeomClick={onGeomClick}
             />
         </Resizable>
     );

package/src/vis/spec/mark.ts

@@ -7,7 +7,7 @@ import { ISemanticType } from "../../interfaces";
  */
 export function autoMark(semanticTypeList: ISemanticType[]): string {
     if (semanticTypeList.length < 2) {
-        if (semanticTypeList[0] === "temporal") return "tick";
+        if (semanticTypeList[0] === "temporal" || semanticTypeList[0] === 'quantitative') return "tick";
         return "bar";
     }
     const couter: Map<ISemanticType, number> = new Map();

package/dist/utils/autoMark.d.ts

@@ -1,7 +0,0 @@
-import { ISemanticType } from "../interfaces";
-/**
- *
- * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来
- * @returns geom(mark) type
- */
-export declare function autoMark(semanticTypeList: ISemanticType[]): string;

package/src/utils/autoMark.ts

@@ -1,30 +0,0 @@
-import { ISemanticType } from "../interfaces";
-
-/**
- *
- * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来
- * @returns geom(mark) type
- */
-export function autoMark(semanticTypeList: ISemanticType[]): string {
-    if (semanticTypeList.length < 2) {
-        if (semanticTypeList[0] === "temporal") return "tick";
-        return "bar";
-    }
-    const couter: Map<ISemanticType, number> = new Map();
-    (["nominal", "ordinal", "quantitative", "temporal"] as ISemanticType[]).forEach((s) => {
-        couter.set(s, 0);
-    });
-    for (let st of semanticTypeList) {
-        couter.set(st, couter.get(st)! + 1);
-    }
-    if (couter.get("nominal") === 1 || couter.get("ordinal") === 1) {
-        return "bar";
-    }
-    if (couter.get("temporal") === 1 && couter.get("quantitative") === 1) {
-        return "line";
-    }
-    if (couter.get("quantitative") === 2) {
-        return "point";
-    }
-    return "point";
-}