@kanaries/graphic-walker 0.3.15 → 0.4.0

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 } from './interfaces';
+import { IRow, IMutField, Specification, IFilterFiledSimple, IExpression } from './interfaces';
 /* eslint import/no-webpack-loader-syntax:0 */
 // @ts-ignore
 // eslint-disable-next-line
@@ -11,6 +11,8 @@ import { IRow, IMutField, IField, IFilterField, Specification } from './interfac
 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 SortWorker from './workers/sort.worker?worker&inline';
+
 import { IViewQuery } from './lib/viewQuery';
 
 // interface WorkerState {
@@ -106,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);
@@ -140,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) {
@@ -154,14 +156,13 @@ export const transformDataService = async (data: IRow[], columns: IField[]): Pro
     } finally {
         worker.terminate();
     }
-}
+};
 
-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;
@@ -170,4 +171,24 @@ export const applyViewQuery = async (data: IRow[], metas: IField[], query: IView
     } finally {
         worker.terminate();
     }
-}
+};
+
+export const applySort = async (
+    data: IRow[],
+    viewMeasures: string[],
+    sort: 'ascending' | 'descending'
+): Promise<IRow[]> => {
+    const worker = new SortWorker();
+    try {
+        const res: IRow[] = await workerService(worker, {
+            data,
+            viewMeasures: viewMeasures.map((x) => toJS(x)),
+            sort,
+        });
+        return res;
+    } catch (err) {
+        throw new Error('Uncaught error in ViewQueryWorker', { cause: err });
+    } finally {
+        worker.terminate();
+    }
+};

package/src/store/commonStore.ts

@@ -147,14 +147,14 @@ export class CommonStore {
         this.initTempDS();
         this.showDSPanel = true;
     }
-    public addAndUseDS(dataset: IDataSetInfo) {
-        const datasetId = this.addDS(dataset);
+    public addAndUseDS(dataset: IDataSetInfo, datasetId?: string | undefined) {
+        const id = this.addDS(dataset, datasetId);
         this.dsIndex = this.datasets.length - 1;
-        return datasetId
+        return id
     }
-    public addDS(dataset: IDataSetInfo) {
+    public addDS(dataset: IDataSetInfo, datasetId?: string | undefined) {
         const timestamp = new Date().getTime();
-        const dataSetId = `dst-${timestamp}`
+        const dataSetId = datasetId || `dst-${timestamp}`
         const dataSourceId = `dse-${timestamp}`;
         this.dataSources.push({
             id: dataSourceId,
@@ -166,12 +166,12 @@ export class CommonStore {
             rawFields: dataset.rawFields,
             dsId: dataSourceId
         })
-        return dataSetId;
+        return dataSourceId;
     }
     public removeDS(datasetId: string) {
         const datasetIndex = this.datasets.findIndex(d => d.id === datasetId);
         if (datasetIndex > -1) {
-            const dataSourceId = this.datasets[datasetIndex].dsId;
+            const dataSourceId = this.datasets[datasetIndex].id;
             const dataSourceIndex = this.dataSources.findIndex(d => d.id === dataSourceId);
             this.dataSources.splice(dataSourceIndex, 1);
             this.datasets.splice(datasetIndex, 1);