@kanaries/graphic-walker 0.3.15 → 0.4.0

package/src/lib/execExp.ts

@@ -4,7 +4,7 @@ interface IDataFrame {
     [key: string]: any[];
 }
 
-export function execExpression (exp: IExpression, dataFrame: IDataFrame, columns: IField[]): IDataFrame {
+export function execExpression (exp: IExpression, dataFrame: IDataFrame): IDataFrame {
     const { op, params } = exp;
     const subFrame: IDataFrame = { ...dataFrame };
     const len = dataFrame[Object.keys(dataFrame)[0]].length;
@@ -17,7 +17,7 @@ export function execExpression (exp: IExpression, dataFrame: IDataFrame, columns
                 subFrame[param.value] = new Array(len).fill(param.value);
                 break;
             case 'expression':
-                let f = execExpression(param.value, dataFrame, columns);
+                let f = execExpression(param.value, dataFrame);
                 Object.keys(f).forEach(key => {
                     subFrame[key] = f[key];
                 })
@@ -54,11 +54,18 @@ function bin(resKey: string, params: IExpParamter[], data: IDataFrame, binSize:
         if (val < _min) _min = val;
     }
     const step = (_max - _min) / binSize;
-    const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)
+    // prevent (_max - _min) to be 0
+    const safeWidth = Math.min(Number.MAX_SAFE_INTEGER, Math.max(_max - _min, Number.MIN_VALUE));
+    const beaStep = Math.max(-Math.round(Math.log10(safeWidth)) + 2, 0)
+    // toFix() accepts 0-100
+    const safeBeaStep = Math.min(100, Math.max(0, Math.max(Number.isFinite(beaStep) ? beaStep : 0, 0)));
     const newValues = fieldValues.map((v: number) => {
         let bIndex = Math.floor((v - _min) / step);
         if (bIndex === binSize) bIndex = binSize - 1;
-        return Number(((bIndex * step + _min)).toFixed(beaStep))
+        if (Number.isNaN(bIndex)) {
+            bIndex = 0;
+        }
+        return Number(((bIndex * step + _min)).toFixed(safeBeaStep))
     });
     return {
         ...data,
@@ -124,22 +131,24 @@ function one(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFra
     }
 }
 
-export function dataset2DataFrame(dataset: IRow[], columns: IField[]): IDataFrame {
+export function dataset2DataFrame(dataset: IRow[]): IDataFrame {
     const dataFrame: IDataFrame = {};
-    columns.forEach((col) => {
-        dataFrame[col.fid] = dataset.map((row) => row[col.fid]);
+    if (dataset.length === 0) return dataFrame;
+    Object.keys(dataset[0]).forEach((k) => {
+        dataFrame[k] = dataset.map((row) => row[k]);
     });
     return dataFrame;
 }
 
-export function dataframe2Dataset(dataFrame: IDataFrame, columns: IField[]): IRow[] {
-    if (columns.length === 0) return [];
+export function dataframe2Dataset(dataFrame: IDataFrame): IRow[] {
+    const cols = Object.keys(dataFrame);
+    if (cols.length === 0) return [];
     const dataset: IRow[] = [];
     const len = dataFrame[Object.keys(dataFrame)[0]].length;
     for (let i = 0; i < len; i++) {
         const row: IRow = {};
-        columns.forEach((col) => {
-            row[col.fid] = dataFrame[col.fid][i];
+        cols.forEach((k) => {
+            row[k] = dataFrame[k][i];
         });
         dataset.push(row);
     }

package/src/lib/interfaces.ts

@@ -28,4 +28,5 @@ export interface IBinQuery {
 
 export interface IRawQuery {
     op: 'raw';
+    fields: string[];
 }

package/src/lib/op/aggregate.ts

@@ -37,7 +37,7 @@ export function aggregate (data: IRow[], query: IAggQuery): IRow[] {
             aggRow[k] = subGroup[0][k];
         }
         for (let mea of measures) {
-            const aggMeaKey = getMeaAggKey(mea.field, mea.agg);
+            const aggMeaKey = mea.asFieldKey || getMeaAggKey(mea.field, mea.agg);
             if (aggRow[aggMeaKey] === undefined) {
                 aggRow[aggMeaKey] = 0;
             }

package/src/lib/viewQuery.ts

@@ -1,4 +1,4 @@
-import { IField, IRow } from "../interfaces";
+import { IRow } from "../interfaces";
 import { aggregate } from "./op/aggregate";
 import { fold } from "./op/fold";
 import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";
@@ -6,7 +6,7 @@ import { bin } from "./op/bin";
 
 export type IViewQuery = IAggQuery | IFoldQuery | IBinQuery | IRawQuery;
 
-export function queryView (rawData: IRow[], metas: IField[], query: IViewQuery) {
+export function queryView (rawData: IRow[], query: IViewQuery) {
     switch (query.op) {
         case 'aggregate':
             return aggregate(rawData, query);

package/src/locales/en-US.json

@@ -3,7 +3,15 @@
         "format": "Format",
         "numberFormat": "Number format",
         "timeFormat": "Time format",
-        "normalizedNumberFormat": "Normalized number format"
+        "normalizedNumberFormat": "Normalized number format",
+        "background": "Background",        
+        "color":"Color",
+        "independence": "Independence",
+        "x": "x-Axis",
+        "y": "y-Axis",
+        "zeroScale": "Zero Scale",
+        "formatGuidesDocs": "Format guides docs",
+        "readHere": "read here"
     },
     "constant": {
         "row_count": "Row count",
@@ -37,7 +45,8 @@
             "__enum__": "Stack Mode",
             "none": "None",
             "stack": "Stack",
-            "normalize": "Normalize"
+            "normalize": "Normalize",
+            "center": "Center"
         },
         "layout_type": {
             "__enum__": "Layout Mode",
@@ -154,6 +163,7 @@
                     "export_chart_as": "Export as {{type}}",
                     "export_code": "Export Code"
                 },
+                "limit": "Limit",
                 "size": "Resize",
                 "size_setting": {
                     "width": "Width",

package/src/locales/ja-JP.json

@@ -3,7 +3,15 @@
         "format": "形式",
         "numberFormat": "数字の形式",
         "timeFormat": "時間の形式",
-        "normalizedNumberFormat": "正規化された数字の形式"
+        "normalizedNumberFormat": "正規化された数字の形式",
+        "background": "背景",
+        "color":"色",
+        "independence": "独立性",
+        "x": "x軸",
+        "y": "y軸",
+        "zeroScale": "ゼロ目盛",
+        "formatGuidesDocs": "フォーマットガイド",
+        "readHere": "ここを読む"
     },
     "constant": {
         "row_count": "行数",
@@ -37,7 +45,8 @@
             "__enum__": "スタックモード",
             "none": "なし",
             "stack": "スタック",
-            "normalize": "正規化"
+            "normalize": "正規化",
+            "center": "中央"
         },
         "layout_type": {
             "__enum__": "レイアウトタイプ",
@@ -153,6 +162,7 @@
                     "export_chart_as": "{{type}}としてエクスポート",
                     "export_code": "コードをエクスポート"
                 },
+                "limit": "上限",
                 "size": "サイズ変更",
                 "size_setting": {
                     "width": "幅",

package/src/locales/zh-CN.json

@@ -3,7 +3,15 @@
         "format": "格式",
         "numberFormat": "数字格式",
         "timeFormat": "时间格式",
-        "normalizedNumberFormat": "标准化数字格式"
+        "normalizedNumberFormat": "标准化数字格式",
+        "background": "背景",
+        "color":"颜色",
+        "independence": "独立性",
+        "x": "x轴",
+        "y": "y轴",
+        "zeroScale": "零刻度",
+        "formatGuidesDocs": "格式指南",
+        "readHere": "阅读此处"
     },
     "constant": {
         "row_count": "行数",
@@ -54,7 +62,8 @@
             "__enum__": "堆叠模式",
             "none": "关闭",
             "stack": "堆叠",
-            "normalize": "归一化"
+            "normalize": "归一化",
+            "center": "中央"
         },
         "draggable_key": {
             "fields": "字段",
@@ -154,6 +163,7 @@
                     "export_chart_as": "导出 {{type}}",
                     "export_code": "导出代码"
                 },
+                "limit": "上限",
                 "size": "调整尺寸",
                 "size_setting": {
                     "width": "宽度",

package/src/main.tsx

@@ -5,4 +5,4 @@ if (!import.meta.env.DEV) {
     inject();
 }
 
-embedGraphicWalker(document.getElementById('root') as HTMLElement)
+embedGraphicWalker(document.getElementById('root') as HTMLElement, {})

package/src/renderer/hooks.ts

@@ -1,87 +1,151 @@
 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';
+import type { DeepReadonly, IFilterField, IRow, IViewField, IDataQueryWorkflowStep, IComputationFunction } from '../interfaces';
+import { useGlobalStore } from '../store';
 import { useAppRootContext } from '../components/appRoot';
+import { toWorkflow } from '../utils/workflow';
+import { dataQueryClient } from '../computation/clientComputation';
+import { dataQueryServer } from '../computation/serverComputation';
+import { useDebounceValue } from '../hooks';
 
+export const useComputationFunc = (): IComputationFunction => {
+    const { vizStore } = useGlobalStore();
+    return vizStore.computationFuction;
+};
 
 interface UseRendererProps {
-    data: IRow[];
     allFields: Omit<IViewField, 'dragId'>[];
-    viewDimensions: IViewField[];
-    viewMeasures: IViewField[];
+    viewDimensions: Omit<IViewField, 'dragId'>[];
+    viewMeasures: Omit<IViewField, 'dragId'>[];
     filters: readonly DeepReadonly<IFilterField>[];
     defaultAggregated: boolean;
+    sort: 'none' | 'ascending' | 'descending';
+    limit: number;
+    computationFunction: IComputationFunction;
 }
 
 interface UseRendererResult {
     viewData: IRow[];
     loading: boolean;
+    parsed: {
+        workflow: IDataQueryWorkflowStep[];
+    };
 }
 
 export const useRenderer = (props: UseRendererProps): UseRendererResult => {
-    const { data, allFields, viewDimensions, viewMeasures, filters, defaultAggregated } = props;
+    const {
+        allFields,
+        viewDimensions,
+        viewMeasures,
+        filters,
+        defaultAggregated,
+        sort,
+        limit: storeLimit,
+        computationFunction,
+    } = props;
     const [computing, setComputing] = useState(false);
     const taskIdRef = useRef(0);
 
+    const limit = useDebounceValue(storeLimit);
+
+    const workflow = useMemo(() => {
+        return toWorkflow(
+            filters,
+            allFields,
+            viewDimensions,
+            viewMeasures,
+            defaultAggregated,
+            sort,
+            limit > 0 ? limit : undefined
+        );
+    }, [filters, allFields, viewDimensions, viewMeasures, defaultAggregated, sort, limit]);
+
     const [viewData, setViewData] = useState<IRow[]>([]);
+    const [parsedWorkflow, setParsedWorkflow] = useState<IDataQueryWorkflowStep[]>([]);
 
     const appRef = useAppRootContext();
 
+    // useEffect(() => {
+    //     if (computationMode !== 'client') {
+    //         return;
+    //     }
+    //     if (!data) {
+    //         console.warn('useRenderer error: prop `data` is required for "client" mode, but none is found.');
+    //         return;
+    //     }
+    //     if (!allFields) {
+    //         console.warn('useRenderer error: prop `fields` is required for "client" mode, but none is found.');
+    //         return;
+    //     }
+    //     const taskId = ++taskIdRef.current;
+    //     appRef.current?.updateRenderStatus('computing');
+    //     setComputing(true);
+    //     dataQueryClient(data, allFields, workflow).then(data => {
+    //         if (taskId !== taskIdRef.current) {
+    //             return;
+    //         }
+    //         appRef.current?.updateRenderStatus('rendering');
+    //         unstable_batchedUpdates(() => {
+    //             setComputing(false);
+    //             setViewData(data);
+    //             setParsedWorkflow(workflow);
+    //         });
+    //     }).catch((err) => {
+    //         if (taskId !== taskIdRef.current) {
+    //             return;
+    //         }
+    //         appRef.current?.updateRenderStatus('error');
+    //         console.error(err);
+    //         unstable_batchedUpdates(() => {
+    //             setComputing(false);
+    //             setViewData([]);
+    //             setParsedWorkflow([]);
+    //         });
+    //     });
+    //     return () => {
+    //         taskIdRef.current++;
+    //     };
+    // }, [computationMode, data, allFields, workflow]);
+
     useEffect(() => {
         const taskId = ++taskIdRef.current;
         appRef.current?.updateRenderStatus('computing');
         setComputing(true);
-        applyFilter(data, filters)
-            .then((data) => {
-                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
-                    return data;
-                }
-                return transformDataService(data, allFields);
-            })
-            .then((d) => {
-                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
-                    return data;
-                }
-                // 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;
-                }
-                appRef.current?.updateRenderStatus('rendering');
-                unstable_batchedUpdates(() => {
-                    setComputing(false);
-                    setViewData(data);
-                });
-            }).catch((err) => {
-                if (taskId !== taskIdRef.current) {
-                    return;
-                }
-                appRef.current?.updateRenderStatus('error');
-                console.error(err);
-                unstable_batchedUpdates(() => {
-                    setComputing(false);
-                    setViewData([]);
-                });
+        dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined).then(data => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            appRef.current?.updateRenderStatus('rendering');
+            unstable_batchedUpdates(() => {
+                setComputing(false);
+                setViewData(data);
+                setParsedWorkflow(workflow);
             });
-        return () => {
-            taskIdRef.current++;
+        }).catch((err) => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            appRef.current?.updateRenderStatus('error');
+            console.error(err);
+            unstable_batchedUpdates(() => {
+                setComputing(false);
+                setViewData([]);
+                setParsedWorkflow([]);
+            });
+        });
+    }, [computationFunction, workflow]);
+
+    const parseResult = useMemo(() => {
+        return {
+            workflow: parsedWorkflow,
         };
-    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated]);
+    }, [parsedWorkflow]);
 
     return useMemo(() => {
         return {
             viewData,
             loading: computing,
+            parsed: parseResult,
         };
     }, [viewData, computing]);
 };

package/src/renderer/index.tsx

@@ -1,42 +1,58 @@
 import { observer } from 'mobx-react-lite';
 import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, IComputationFunction } from '../interfaces';
+import { useTranslation } from 'react-i18next';
 import SpecRenderer from './specRenderer';
 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 { initEncoding } from '../store/visualSpecStore';
 import { useChartIndexControl } from '../utils/chartIndexControl';
+import { initVisualConfig } from '../utils/save';
 
 interface RendererProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
+    computationFunction: IComputationFunction;
 }
 /**
  * Renderer of GraphicWalker editor.
  * Depending on global store.
  */
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
-    const { themeKey, dark } = props;
+    const { themeKey, dark, computationFunction } = props;
     const { vizStore, commonStore } = useGlobalStore();
-    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState, visList, visIndex } = vizStore;
+    const {
+        allFields,
+        viewFilters,
+        viewDimensions,
+        viewMeasures,
+        visualConfig,
+        draggableFieldState,
+        visList,
+        visIndex,
+        sort,
+        limit,
+    } = vizStore;
     const chart = visList[visIndex];
-    const { currentDataset } = commonStore;
-    const { dataSource } = currentDataset;
+
+    const { i18n } = useTranslation();
 
     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,
+        sort,
+        limit: limit,
+        computationFunction,
     });
 
     // Dependencies that should not trigger effect individually
@@ -64,19 +80,16 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
     useChartIndexControl({
         count: visList.length,
         index: visIndex,
-        onChange: idx => vizStore.selectVisualization(idx),
+        onChange: (idx) => vizStore.selectVisualization(idx),
     });
 
-    const handleGeomClick = useCallback(
-        (values: any, e: any) => {
-            e.stopPropagation();
-            runInAction(() => {
-                commonStore.showEmbededMenu([e.pageX, e.pageY]);
-                commonStore.setFilters(values);
-            });
-        },
-        []
-    );
+    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) => {
@@ -97,6 +110,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             ref={ref}
             themeKey={themeKey}
             dark={dark}
+            locale={i18n.language}
             draggableFieldState={encodings}
             visualConfig={viewConfig}
             onGeomClick={handleGeomClick}

package/src/renderer/pureRenderer.tsx

@@ -4,38 +4,57 @@ import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { ShadowDom } from '../shadow-dom';
 import { withAppRoot } from '../components/appRoot';
-import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
+import type {
+    IDarkMode,
+    IViewField,
+    IRow,
+    IThemeKey,
+    DraggableFieldState,
+    IVisualConfig,
+    IComputationFunction,
+} from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 import SpecRenderer from './specRenderer';
 import { useRenderer } from './hooks';
+import { getComputation } from '../computation/clientComputation';
 
-
-interface IPureRendererProps {
-    name?: string;
-    themeKey?: IThemeKey;
-    dark?: IDarkMode;
-    rawData?: IRow[];
-    visualState: DraggableFieldState;
-    visualConfig: IVisualConfig;
-}
+type IPureRendererProps =
+    | {
+          name?: string;
+          themeKey?: IThemeKey;
+          dark?: IDarkMode;
+          visualState: DraggableFieldState;
+          visualConfig: IVisualConfig;
+          sort?: 'none' | 'ascending' | 'descending';
+          limit?: number;
+          locale?: string;
+      } & (
+          | {
+                type: 'remote',
+                computation: IComputationFunction;
+            }
+          | {
+                type?: 'local'
+                rawData: IRow[];
+            }
+      );
 
 /**
  * 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 {
-        name,
-        themeKey,
-        dark,
-        rawData,
-        visualState,
-        visualConfig,
-    } = props;
+const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer(props, ref) {
+    const { name, themeKey, dark, visualState, visualConfig, type, locale, sort, limit } = props;
+    const computation = useMemo(() => {
+        if (props.type === 'remote') {
+            return props.computation;
+        }
+        return getComputation(props.rawData);
+    }, [props.type, props.type === 'remote' ? props.computation: props.rawData])
     const defaultAggregated = visualConfig?.defaultAggregated ?? false;
 
     const [viewData, setViewData] = useState<IRow[]>([]);
-    
+
     const { allFields, viewDimensions, viewMeasures, filters } = useMemo(() => {
         const viewDimensions: IViewField[] = [];
         const viewMeasures: IViewField[] = [];
@@ -58,12 +77,14 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     }, [visualState]);
 
     const { viewData: data, loading: waiting } = useRenderer({
-        data: rawData ?? [],
         allFields,
         viewDimensions,
         viewMeasures,
         filters,
         defaultAggregated,
+        sort: sort ?? 'none',
+        limit: limit ?? -1,
+        computationFunction: computation,
     });
 
     // Dependencies that should not trigger effect individually
@@ -90,10 +111,11 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
                     dark={dark}
                     draggableFieldState={visualState}
                     visualConfig={visualConfig}
+                    locale={locale ?? 'en-US'}
                 />
             </div>
         </ShadowDom>
     );
 });
 
-export default observer(withAppRoot(PureRenderer));
+export default observer(withAppRoot<IPureRendererProps>(PureRenderer));