@kanaries/graphic-walker 0.3.16 → 0.4.1

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",

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__": "レイアウトタイプ",

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": "字段",

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,44 +1,63 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
-import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
-import { applyFilter, applySort, 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 { useDebounceValue } from '../hooks';
+import { toWorkflow } from '../utils/workflow';
+import { dataQueryServer } from '../computation/serverComputation';
+
+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,
         sort,
-        limit: storeLimit,
+        limit,
+        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();
 
@@ -46,72 +65,41 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
         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 (limit > 0 && sort !== 'none' && viewMeasures.length > 0) {
-                    return applySort(data, viewMeasures, sort);
-                }
-                return data;
-            })
-            .then((data) => {
-                if (limit > 0) {
-                    return data.slice(0, limit);
-                }
-                return data;
-            })
-            .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);
+            });
+        }).catch((err) => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            appRef.current?.updateRenderStatus('error');
+            console.error(err);
+            unstable_batchedUpdates(() => {
+                setComputing(false);
+                setViewData([]);
+                setParsedWorkflow([]);
             });
-        return () => {
-            taskIdRef.current++;
+        });
+    }, [computationFunction, workflow]);
+
+    const parseResult = useMemo(() => {
+        return {
+            workflow: parsedWorkflow,
         };
-    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated, limit]);
+    }, [parsedWorkflow]);
 
     return useMemo(() => {
         return {
             viewData,
             loading: computing,
+            parsed: parseResult,
         };
     }, [viewData, computing]);
 };

package/src/renderer/index.tsx

@@ -1,25 +1,28 @@
 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,
@@ -34,15 +37,14 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         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,
@@ -50,6 +52,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         defaultAggregated: visualConfig.defaultAggregated,
         sort,
         limit: limit,
+        computationFunction,
     });
 
     // Dependencies that should not trigger effect individually
@@ -107,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,28 +4,53 @@ 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;
-    sort?: 'none' | 'ascending' | 'descending';
-    limit?: number;
-}
+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, sort, limit } = props;
+    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[]>([]);
@@ -52,7 +77,6 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     }, [visualState]);
 
     const { viewData: data, loading: waiting } = useRenderer({
-        data: rawData ?? [],
         allFields,
         viewDimensions,
         viewMeasures,
@@ -60,6 +84,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         defaultAggregated,
         sort: sort ?? 'none',
         limit: limit ?? -1,
+        computationFunction: computation,
     });
 
     // Dependencies that should not trigger effect individually
@@ -86,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));

package/src/renderer/specRenderer.tsx

@@ -19,17 +19,18 @@ interface SpecRendererProps {
     visualConfig: DeepReadonly<IVisualConfig>;
     onGeomClick?: ((values: any, e: any) => void) | undefined;
     onChartResize?: ((width: number, height: number) => void) | undefined;
+    locale?: string;
 }
 /**
  * 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 },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, zeroScale } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -41,7 +42,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
     const sizeChannel = draggableFieldState.size;
     const details = draggableFieldState.details;
     const text = draggableFieldState.text;
-    const format = toJS(_format)
+    const format = toJS(_format);
 
     const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
     const colLeftFacetFields = useMemo(
@@ -59,8 +60,9 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 
     const vegaConfig = useMemo<VegaGlobalConfig>(() => {
         const config: VegaGlobalConfig = {
-          ...themeConfig,
-        }
+            ...themeConfig,
+            background: mediaTheme === 'dark' ? '#18181f' : '#ffffff',
+        };
         if (format.normalizedNumberFormat && format.normalizedNumberFormat.length > 0) {
             // @ts-ignore
             config.normalizedNumberFormat = format.normalizedNumberFormat;
@@ -79,9 +81,23 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
             config.scale = {};
         }
         // @ts-ignore
-        config.scale.zero = Boolean(zeroScale)
+        config.scale.zero = Boolean(zeroScale);
+        // @ts-ignore
+        config.resolve = resolve;
+        if (background) {
+            config.background = background;
+        }
+
         return config;
-      }, [themeConfig, zeroScale, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
+    }, [
+        themeConfig,
+        zeroScale,
+        resolve,
+        background,
+        format.normalizedNumberFormat,
+        format.numberFormat,
+        format.timeFormat,
+    ]);
 
     if (isPivotTable) {
         return (
@@ -148,6 +164,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 height={size.height - 12 * 4}
                 ref={ref}
                 onGeomClick={onGeomClick}
+                locale={locale}
             />
         </Resizable>
     );

package/src/services.ts

@@ -1,5 +1,5 @@
 import { toJS } from 'mobx';
-import { IRow, IMutField, IField, IFilterField, Specification, IViewField } from './interfaces';
+import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -108,7 +108,7 @@ interface PreAnalysisParams {
 let filterWorker: Worker | null = null;
 let filterWorkerAutoTerminator: NodeJS.Timeout | null = null;
 
-export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]): Promise<IRow[]> => {
+export const applyFilter = async (data: IRow[], filters: readonly IFilterFiledSimple[]): Promise<IRow[]> => {
     if (filters.length === 0) return data;
     if (filterWorkerAutoTerminator !== null) {
         clearTimeout(filterWorkerAutoTerminator);
@@ -142,13 +142,13 @@ export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]
     }
 };
 
-export const transformDataService = async (data: IRow[], columns: IField[]): Promise<IRow[]> => {
-    if (columns.length === 0 || data.length === 0) return data;
+export const transformDataService = async (data: IRow[], trans: { key: string, expression: IExpression }[]): Promise<IRow[]> => {
+    if (data.length === 0) return data;
     const worker = new TransformDataWorker();
     try {
         const res: IRow[] = await workerService(worker, {
             dataSource: data,
-            columns: toJS(columns),
+            trans,
         });
         return res;
     } catch (error) {
@@ -158,12 +158,11 @@ export const transformDataService = async (data: IRow[], columns: IField[]): Pro
     }
 };
 
-export const applyViewQuery = async (data: IRow[], metas: IField[], query: IViewQuery): Promise<IRow[]> => {
+export const applyViewQuery = async (data: IRow[], query: IViewQuery): Promise<IRow[]> => {
     const worker = new ViewQueryWorker();
     try {
         const res: IRow[] = await workerService(worker, {
             dataSource: data,
-            metas: toJS(metas),
             query: toJS(query),
         });
         return res;
@@ -176,7 +175,7 @@ export const applyViewQuery = async (data: IRow[], metas: IField[], query: IView
 
 export const applySort = async (
     data: IRow[],
-    viewMeasures: IField[],
+    viewMeasures: string[],
     sort: 'ascending' | 'descending'
 ): Promise<IRow[]> => {
     const worker = new SortWorker();