@kanaries/graphic-walker 0.2.15 → 0.2.17

package/src/store/commonStore.ts

@@ -1,7 +1,6 @@
 import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 import { makeAutoObservable, observable, toJS } from 'mobx';
 import { transData } from '../dataSource/utils';
-import { extendCountField } from '../utils';
 
 export class CommonStore {
     public datasets: IDataSet[] = [];
@@ -14,6 +13,7 @@ export class CommonStore {
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
     public showDataConfig: boolean = false;
+    public showCodeExportPanel: boolean = false;
     public filters: Filters = {};
     public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
@@ -30,12 +30,12 @@ export class CommonStore {
         if (this.datasets.length > 0) {
             const dataSourceId = this.datasets[datasetIndex].dsId;
             const dataSource = this.dataSources.find(d => d.id === dataSourceId);
-            const rawFields = toJS(this.datasets[datasetIndex].rawFields)
-            const base = extendCountField((dataSource ? dataSource.data : []), rawFields)
+            const rawFields = toJS(this.datasets[datasetIndex].rawFields)//.concat(createCountField())
+            // const base = extendCountField((dataSource ? dataSource.data : []), rawFields)
             return {
                 ...this.datasets[datasetIndex],
-                dataSource: base.dataSource,
-                rawFields: base.fields
+                dataSource: dataSource?.data ?? [],
+                rawFields
             }
         }
         return {
@@ -61,6 +61,9 @@ export class CommonStore {
         this.vizEmbededMenu.show = true;
         this.vizEmbededMenu.position = position;
     }
+    public setShowCodeExportPanel (show: boolean) {
+        this.showCodeExportPanel = show;
+    }
     public closeEmbededMenu () {
         this.vizEmbededMenu.show = false;
     }
@@ -112,11 +115,13 @@ export class CommonStore {
 
     public updateTempDS (rawData: IRow[]) {
         const result = transData(rawData);
-        // TODO: need fix web-data-loader issue #2
-        this.tmpDataSource = result.dataSource.slice(0, -1);
+        this.tmpDataSource = result.dataSource;
         this.tmpDSRawFields = result.fields;
     }
-
+    /**
+     * update temp dataset (standard) with dataset info
+     * @param dataset 
+     */
     public updateTempSTDDS (dataset: IDataSetInfo) {
         this.tmpDataSource = dataset.dataSource;
         this.tmpDSRawFields = dataset.rawFields;
@@ -176,7 +181,7 @@ export class CommonStore {
     }
     public createPlaceholderDS() {
         this.addDS({
-            name: '新数据源',
+            name: 'new dataset',
             dataSource: [],
             rawFields: []
         })

package/src/store/index.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { CommonStore } from './commonStore'
 import { VizSpecStore } from './visualSpecStore'
 
-interface GlobalStore {
+export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
@@ -10,12 +10,12 @@ interface GlobalStore {
 const commonStore = new CommonStore();
 const vizStore = new VizSpecStore(commonStore);
 
-const initStore: GlobalStore = {
+const initStore: IGlobalStore = {
     commonStore,
     vizStore
 }
 
-const StoreContext = React.createContext<GlobalStore>(null!);
+const StoreContext = React.createContext<IGlobalStore>(null!);
 
 export function destroyGWStore() {
     initStore.commonStore.destroy();
@@ -31,16 +31,23 @@ export function rebootGWStore() {
 
 interface StoreWrapperProps {
     keepAlive?: boolean;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 export class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps) {
         super(props)
+        if (props.storeRef) {
+            props.storeRef.current = initStore;
+        }
         if (props.keepAlive) {
             rebootGWStore();
         }
     }
     componentWillUnmount() {
         if (!this.props.keepAlive) {
+            if (this.props.storeRef) {
+                this.props.storeRef.current = null;
+            }
             destroyGWStore();
         }
     }

package/src/store/visualSpecStore.ts

@@ -1,13 +1,12 @@
 import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from "mobx";
 import produce from "immer";
 import { v4 as uuidv4 } from "uuid";
-import { Specification } from "visual-insights";
-import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig } from "../interfaces";
+import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig, Specification } from "../interfaces";
 import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from "../config";
-import { makeBinField, makeLogField } from "../utils/normalization";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
-import { dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
+import { IStoInfo, dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
 import { CommonStore } from "./commonStore";
+import { createCountField } from "../utils";
 
 function getChannelSizeLimit(channel: string): number {
     if (typeof CHANNEL_LIMIT[channel] === "undefined") return Infinity;
@@ -40,7 +39,7 @@ function geomAdapter(geom: string) {
     }
 }
 
-function initEncoding(): DraggableFieldState {
+export function initEncoding(): DraggableFieldState {
     return {
         dimensions: [],
         measures: [],
@@ -58,7 +57,7 @@ function initEncoding(): DraggableFieldState {
     };
 }
 
-function initVisualConfig(): IVisualConfig {
+export function initVisualConfig(): IVisualConfig {
     return {
         defaultAggregated: true,
         geoms: [GEMO_TYPES[0]!],
@@ -92,6 +91,10 @@ const forwardVisualConfigs = (backwards: ReturnType<typeof parseGWContent>["spec
     }));
 };
 
+function isDraggableStateEmpty(state: DeepReadonly<DraggableFieldState>): boolean {
+    return Object.values(state).every((value) => value.length === 0);
+}
+
 export class VizSpecStore {
     // public fields: IViewField[] = [];
     private commonStore: CommonStore;
@@ -139,7 +142,7 @@ export class VizSpecStore {
         this.visualConfig = initVisualConfig();
         this.visList.push(
             new VisSpecWithHistory({
-                name: ["main.tablist.autoTitle", { idx: 1 }],
+                name: 'Chart 1',
                 visId: uuidv4(),
                 config: this.visualConfig,
                 encodings: this.draggableFieldState,
@@ -151,13 +154,6 @@ export class VizSpecStore {
             reactions: false,
         });
         this.reactions.push(
-            reaction(
-                () => commonStore.currentDataset,
-                (dataset) => {
-                    // this.initState();
-                    this.initMetaState(dataset);
-                }
-            ),
             reaction(
                 () => this.visList[this.visIndex],
                 (frame) => {
@@ -168,6 +164,15 @@ export class VizSpecStore {
                     this.canUndo = frame.canUndo;
                     this.canRedo = frame.canRedo;
                 }
+            ),
+            reaction(
+                () => commonStore.currentDataset,
+                (dataset) => {
+                    // this.initState();
+                    if (isDraggableStateEmpty(this.draggableFieldState) && dataset.dataSource.length > 0 && dataset.rawFields.length > 0) {
+                        this.initMetaState(dataset);
+                    }
+                }
             )
         );
     }
@@ -275,10 +280,24 @@ export class VizSpecStore {
             });
         return fields;
     }
-    public addVisualization() {
+    public get allFields(): IViewField[] {
+        const { draggableFieldState } = this;
+        const dimensions = toJS(draggableFieldState.dimensions);
+        const measures = toJS(draggableFieldState.measures);
+        return [...dimensions, ...measures];
+    }
+    public get viewFilters() {
+        const { draggableFieldState } = this;
+        const state = toJS(draggableFieldState);
+        return state.filters;
+    }
+
+
+    public addVisualization(defaultName?: string) {
+        const name = defaultName || 'Chart ' + (this.visList.length + 1);
         this.visList.push(
             new VisSpecWithHistory({
-                name: ["main.tablist.autoTitle", { idx: this.visList.length + 1 }],
+                name,
                 visId: uuidv4(),
                 config: initVisualConfig(),
                 encodings: initEncoding(),
@@ -290,9 +309,10 @@ export class VizSpecStore {
         this.visIndex = visIndex;
     }
     public setVisName(visIndex: number, name: string) {
-        this.useMutable(() => {
-            this.visList[visIndex].name = [name];
-        });
+        this.visList[visIndex] = this.visList[visIndex].clone();
+        this.visList[visIndex].updateLatest({
+            name
+        })
     }
     public initState() {
         this.useMutable((tab) => {
@@ -301,6 +321,7 @@ export class VizSpecStore {
         });
     }
     public initMetaState(dataset: DataSet) {
+        const countField = createCountField();
         this.useMutable(({ encodings }) => {
             encodings.fields = dataset.rawFields.map((f) => ({
                 dragId: uuidv4(),
@@ -309,7 +330,8 @@ export class VizSpecStore {
                 aggName: f.analyticType === "measure" ? "sum" : undefined,
                 analyticType: f.analyticType,
                 semanticType: f.semanticType,
-            }));
+            }))//.concat(countField);
+            encodings.fields.push(countField);
             encodings.dimensions = dataset.rawFields
                 .filter((f) => f.analyticType === "dimension")
                 .map((f) => ({
@@ -329,17 +351,10 @@ export class VizSpecStore {
                     semanticType: f.semanticType,
                     aggName: "sum",
                 }));
+            encodings.measures.push(countField);
         });
 
         this.freezeHistory();
-        // this.draggableFieldState.measures.push({
-        //     dragId: uuidv4(),
-        //     fid: COUNT_FIELD_ID,
-        //     name: '记录数',
-        //     analyticType: 'measure',
-        //     semanticType: 'quantitative',
-        //     aggName: 'count'
-        // })
     }
     public clearState() {
         this.useMutable(({ encodings }) => {
@@ -489,44 +504,59 @@ export class VizSpecStore {
             encodings.rows = fieldsInCup as typeof encodings.rows; // assume this as writable
         });
     }
-    public createBinField(stateKey: keyof DraggableFieldState, index: number) {
+    public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount') {
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
+            const newVarKey = uuidv4();
             const binField: IViewField = {
-                fid: uuidv4(),
-                dragId: uuidv4(),
-                name: `bin(${originField.name})`,
+                fid: newVarKey,
+                dragId: newVarKey,
+                name: `${binType}(${originField.name})`,
                 semanticType: "ordinal",
                 analyticType: "dimension",
+                computed: true,
+                expressoion: {
+                    op: binType,
+                    as: newVarKey,
+                    params: [
+                        {
+                            type: 'field',
+                            value: originField.fid
+                        }
+                    ]
+                }
             };
             encodings.dimensions.push(binField);
-            this.commonStore.currentDataset.dataSource = makeBinField(
-                this.commonStore.currentDataset.dataSource,
-                originField.fid,
-                binField.fid
-            );
         });
     }
-    public createLogField(stateKey: keyof DraggableFieldState, index: number) {
+    public createLogField(stateKey: keyof DraggableFieldState, index: number, scaleType: 'log10' | 'log2') {
         if (stateKey === "filters") {
             return;
         }
 
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
+            const newVarKey = uuidv4();
             const logField: IViewField = {
-                fid: uuidv4(),
-                dragId: uuidv4(),
-                name: `log10(${originField.name})`,
+                fid: newVarKey,
+                dragId: newVarKey,
+                name: `${scaleType}(${originField.name})`,
                 semanticType: "quantitative",
                 analyticType: originField.analyticType,
+                aggName: 'sum',
+                computed: true,
+                expressoion: {
+                    op: scaleType,
+                    as: newVarKey,
+                    params: [
+                        {
+                            type: 'field',
+                            value: originField.fid
+                        }
+                    ]
+                }
             };
             encodings[stateKey].push(logField);
-            this.commonStore.currentDataset.dataSource = makeLogField(
-                this.commonStore.currentDataset.dataSource,
-                originField.fid,
-                logField.fid
-            );
         });
     }
     public setFieldAggregator(stateKey: keyof DraggableFieldState, index: number, aggName: string) {
@@ -616,6 +646,7 @@ export class VizSpecStore {
             // thi
             // const [xField, yField, ] = spec.position;
             this.clearState();
+            this.setVisualConfig('defaultAggregated', Boolean(spec.aggregate));
             if ((spec.geomType?.length ?? 0) > 0) {
                 this.setVisualConfig(
                     "geoms",
@@ -677,13 +708,19 @@ export class VizSpecStore {
             specList: pureVisList,
         });
     }
+    public exportViewSpec() {
+        const pureVisList = dumpsGWPureSpec(this.visList);
+        return pureVisList
+    }
+    public importStoInfo (stoInfo: IStoInfo) {
+        this.visList = parseGWPureSpec(forwardVisualConfigs(stoInfo.specList));
+        this.visIndex = 0;
+        this.commonStore.datasets = stoInfo.datasets;
+        this.commonStore.dataSources = stoInfo.dataSources;
+        this.commonStore.dsIndex = Math.max(stoInfo.datasets.length - 1, 0);
+    }
     public importRaw(raw: string) {
         const content = parseGWContent(raw);
-        this.commonStore.datasets = content.datasets;
-        this.commonStore.dataSources = content.dataSources;
-        this.commonStore.dsIndex = Math.max(content.datasets.length - 1, 0);
-        // 补上初始化新版本特性
-        this.visList = parseGWPureSpec(forwardVisualConfigs(content.specList));
-        this.visIndex = 0;
+        this.importStoInfo(content);
     }
 }

package/src/utils/autoMark.ts

@@ -1,4 +1,4 @@
-import { ISemanticType } from "visual-insights";
+import { ISemanticType } from "../interfaces";
 
 /**
  *

package/src/utils/dataPrep.ts

@@ -1,5 +1,4 @@
-import { IRow } from "visual-insights";
-import { IMutField } from "../interfaces";
+import { IMutField, IRow } from "../interfaces";
 
 function updateRowKeys(data: IRow[], keyEncodeList: {from: string; to: string}[]): IRow[] {
     return data.map((row) => {
@@ -41,4 +40,28 @@ export function guardDataKeys (data: IRow[], metas: IMutField[]): {
         safeData,
         safeMetas
     }
+}
+
+const SPLITOR = '__'
+export function flatNestKeys (object: any): string[] {
+    const keys = Object.keys(object);
+    let flatColKeys: string[] = [];
+    for (let key of keys) {
+        if (typeof object[key] === 'object') {
+            const subKeys = flatNestKeys(object[key]);
+            flatColKeys = flatColKeys.concat(subKeys.map(k => `${key}${SPLITOR}${k}`));
+        } else {
+            flatColKeys.push(key)
+        }
+    }
+    return flatColKeys;
+}
+
+export function getValueByKeyPath (object: any, keyPath: string): any {
+    const keys = keyPath.split(SPLITOR);
+    let value = object;
+    for (let key of keys) {
+        value = value[key];
+    }
+    return value;
 }

package/src/utils/index.ts

@@ -1,6 +1,6 @@
 import i18next from "i18next";
 import { COUNT_FIELD_ID } from "../constants";
-import { IRow, Filters, IMutField } from "../interfaces";
+import { IRow, Filters, IMutField, IViewField } from "../interfaces";
 interface NRReturns {
     normalizedData: IRow[];
     maxMeasures: IRow;
@@ -236,26 +236,21 @@ export function applyFilters(dataSource: IRow[], filters: Filters): IRow[] {
     });
 }
 
-export function extendCountField(
-    dataSource: IRow[],
-    fields: IMutField[]
-): {
-    dataSource: IRow[];
-    fields: IMutField[];
-} {
-    const nextData = dataSource.map((r) => ({
-        ...r,
-        [COUNT_FIELD_ID]: 1,
-    }));
-    const nextFields = fields.concat({
+export function createCountField(): IViewField {
+    return {
+        // viewId: "",
+        dragId: COUNT_FIELD_ID,
         fid: COUNT_FIELD_ID,
         name: i18next.t("constant.row_count"),
         analyticType: "measure",
         semanticType: "quantitative",
-    });
-    return {
-        dataSource: nextData,
-        fields: nextFields,
+        aggName: 'sum',
+        computed: true,
+        expressoion: {
+            op: 'one',
+            params: [],
+            as: COUNT_FIELD_ID,
+        }
     };
 }
 
@@ -276,4 +271,8 @@ export function makeNumbersBeautiful (nums: number[]): number[] {
     return nums.map((num) => {
         return Math.round(num / step) * step;
     })
+}
+
+export function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
 }

package/src/utils/normalization.ts

@@ -146,7 +146,9 @@ export function makeBinField(dataSource: IRow[], fid: string, binFid: string, bi
         if (bIndex === binSize) bIndex = binSize - 1;
         return {
             ...r,
-            [binFid]: Number(((bIndex * step + _min)).toFixed(beaStep)),
+            [binFid]: [bIndex * step + _min, (bIndex + 1) * step + _min],
+            
+            // [binFid]: Number(((bIndex * step + _min)).toFixed(beaStep)),
         };
     });
 }

package/src/utils/save.ts

@@ -9,10 +9,9 @@ export function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[] {
     return list.map((l) => new VisSpecWithHistory(l));
 }
 
-interface IStoInfo {
+export interface IStoInfo {
     datasets: IDataSet[];
     specList: {
-        /** 由于 gw 内部实现暂时未锁版本，这里获取到的信息可能会与当前实例内容有偏差，需要用初始值合入 */
         [K in keyof IVisSpec]: K extends "config" ? Partial<IVisSpec[K]> : IVisSpec[K];
     }[];
     dataSources: IDataSource[];