@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/store/visualSpecStore.ts

@@ -2,12 +2,14 @@ import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } fro
 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, IExpression, IFilterRule, IViewField, IVisSpec, IVisualConfig } 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";
+import { IViewQuery } from "../lib/viewQuery";
 
 function getChannelSizeLimit(channel: string): number {
     if (typeof CHANNEL_LIMIT[channel] === "undefined") return Infinity;
@@ -40,7 +42,7 @@ function geomAdapter(geom: string) {
     }
 }
 
-function initEncoding(): DraggableFieldState {
+export function initEncoding(): DraggableFieldState {
     return {
         dimensions: [],
         measures: [],
@@ -58,7 +60,7 @@ function initEncoding(): DraggableFieldState {
     };
 }
 
-function initVisualConfig(): IVisualConfig {
+export function initVisualConfig(): IVisualConfig {
     return {
         defaultAggregated: true,
         geoms: [GEMO_TYPES[0]!],
@@ -92,6 +94,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 +145,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 +157,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 +167,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 +283,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 +312,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 +324,7 @@ export class VizSpecStore {
         });
     }
     public initMetaState(dataset: DataSet) {
+        const countField = createCountField();
         this.useMutable(({ encodings }) => {
             encodings.fields = dataset.rawFields.map((f) => ({
                 dragId: uuidv4(),
@@ -309,7 +333,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 +354,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 +507,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) {
@@ -677,13 +710,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/dataPrep.ts

@@ -41,4 +41,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/media.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { IDarkMode } from "../interfaces";
 
 export function currentMediaTheme(): "dark" | "light" {
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
@@ -8,19 +9,23 @@ export function currentMediaTheme(): "dark" | "light" {
     }
 }
 
-export function useCurrentMediaTheme(): "dark" | "light" {
-    const [theme, setTheme] = useState<"dark" | "light">(currentMediaTheme());
+export function useCurrentMediaTheme(mode: IDarkMode | undefined = 'media'): "dark" | "light" {
+    const [theme, setTheme] = useState<"dark" | "light">(mode === 'media' ? currentMediaTheme() : mode);
 
     useEffect(() => {
-        const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)") as MediaQueryList | undefined;
-        const listener = (e: MediaQueryListEvent) => {
-            setTheme(e.matches ? "dark" : "light");
-        };
-        mediaQuery?.addEventListener("change", listener);
-        return () => {
-            mediaQuery?.removeEventListener("change", listener);
-        };
-    }, []);
+        if (mode === 'media') {
+            const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)") as MediaQueryList | undefined;
+            const listener = (e: MediaQueryListEvent) => {
+                setTheme(e.matches ? "dark" : "light");
+            };
+            mediaQuery?.addEventListener("change", listener);
+            return () => {
+                mediaQuery?.removeEventListener("change", listener);
+            };
+        } else {
+            setTheme(mode);
+        }
+    }, [mode]);
 
     return theme;
 }

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[];