@kanaries/graphic-walker 0.2.7 → 0.2.8

package/dist/interfaces.d.ts

@@ -112,11 +112,15 @@ export declare type IFilterRule = {
     type: 'one of';
     value: Set<string | number>;
 };
+export declare const EXPLORATION_TYPES: readonly ["none", "brush", "point"];
+export declare const BRUSH_DIRECTIONS: readonly ["default", "x", "y"];
 export declare type IStackMode = 'none' | 'stack' | 'normalize';
+export declare type IExplorationType = (typeof EXPLORATION_TYPES)[number];
+export declare type IBrushDirection = (typeof BRUSH_DIRECTIONS)[number];
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];
-    stack: 'none' | 'stack' | 'normalize';
+    stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
@@ -125,6 +129,11 @@ export interface IVisualConfig {
         width: number;
         height: number;
     };
+    exploration: {
+        mode: IExplorationType;
+        /** works when mode is 'brush' */
+        brushDirection: IBrushDirection;
+    };
 }
 export interface IVisSpec {
     readonly visId: string;

package/dist/store/visualSpecStore.d.ts

@@ -89,6 +89,7 @@ export declare class VizSpecStore {
         width?: number;
         height?: number;
     }): void;
+    setExploration(value: Partial<IVisualConfig['exploration']>): void;
     reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number): void;
     moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number): void;
     removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number): void;

package/dist/utils/save.d.ts

@@ -4,7 +4,9 @@ export declare function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[];
 export declare function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[];
 interface IStoInfo {
     datasets: IDataSet[];
-    specList: IVisSpec[];
+    specList: ({
+        [K in keyof IVisSpec]: K extends 'config' ? Partial<IVisSpec[K]> : IVisSpec[K];
+    })[];
     dataSources: IDataSource[];
 }
 export declare function stringifyGWContent(info: IStoInfo): string;

package/dist/vis/react-vega.d.ts

@@ -19,6 +19,29 @@ interface ReactVegaProps {
     width: number;
     height: number;
     onGeomClick?: (values: any, e: any) => void;
+    selectEncoding: SingleViewProps['selectEncoding'];
+    brushEncoding: SingleViewProps['brushEncoding'];
+}
+interface SingleViewProps {
+    x: IViewField;
+    y: IViewField;
+    color: IViewField;
+    opacity: IViewField;
+    size: IViewField;
+    shape: IViewField;
+    xOffset: IViewField;
+    yOffset: IViewField;
+    row: IViewField;
+    column: IViewField;
+    theta: IViewField;
+    radius: IViewField;
+    defaultAggregated: boolean;
+    stack: IStackMode;
+    geomType: string;
+    enableCrossFilter: boolean;
+    asCrossFilterTrigger: boolean;
+    selectEncoding: 'default' | 'none';
+    brushEncoding: 'x' | 'y' | 'default' | 'none';
 }
 declare const ReactVega: React.FC<ReactVegaProps>;
 export default ReactVega;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/interfaces.ts

@@ -129,13 +129,26 @@ export type IFilterRule = {
     value: Set<string | number>;
 };
 
+export const EXPLORATION_TYPES = [
+    'none',
+    'brush',
+    'point',
+] as const;
+
+export const BRUSH_DIRECTIONS = [
+    'default',
+    'x',
+    'y',
+] as const;
 
 export type IStackMode = 'none' | 'stack' | 'normalize';
+export type IExplorationType = (typeof EXPLORATION_TYPES)[number];
+export type IBrushDirection = (typeof BRUSH_DIRECTIONS)[number];
 
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms:  string[];        
-    stack: 'none' | 'stack' | 'normalize';
+    stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
@@ -144,6 +157,11 @@ export interface IVisualConfig {
         width: number;
         height: number;
     }
+    exploration: {
+        mode: IExplorationType;
+        /** works when mode is 'brush' */
+        brushDirection: IBrushDirection;
+    };
 }
 
 export interface IVisSpec {

package/src/locales/en-US.json

@@ -30,6 +30,18 @@
             "auto": "Auto",
             "fixed": "Fixed"
         },
+        "exploration_mode": {
+            "__enum__": "Exploration Mode",
+            "none": "Off",
+            "brush": "Brush",
+            "point": "Point"
+        },
+        "brush_mode": {
+            "__enum__": "Brush Direction",
+            "default": "Both",
+            "x": "X-Only",
+            "y": "Y-Only"
+        },
         "draggable_key": {
             "fields": "Fields",
             "columns": "Columns",

package/src/locales/zh-CN.json

@@ -24,6 +24,18 @@
             "auto": "自动",
             "fixed": "固定"
         },
+        "exploration_mode": {
+            "__enum__": "探索交互",
+            "none": "关",
+            "brush": "范围",
+            "point": "目标"
+        },
+        "brush_mode": {
+            "__enum__": "框选方向",
+            "default": "所有",
+            "x": "仅 X 轴",
+            "y": "仅 Y 轴"
+        },
         "stack_mode": {
             "__enum__": "堆叠模式",
             "none": "关闭",

package/src/renderer/index.tsx

@@ -10,7 +10,7 @@ import ReactVega from '../vis/react-vega';
 const ReactiveRenderer: React.FC = props => {
     const { vizStore, commonStore } = useGlobalStore();
     const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
     const { currentDataset } = commonStore;
     const { filters } = draggableFieldState;
 
@@ -27,13 +27,17 @@ const ReactiveRenderer: React.FC = props => {
     const colLeftFacetFields = columns.slice(0, -1).filter(f => f.analyticType === 'dimension');
 
     const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
+
+    const shouldTriggerMenu = exploration.mode === 'none';
     
-    const onGeomClick = useCallback((values: any, e: any) => {
-        runInAction(() => {
-            commonStore.showEmbededMenu([e.pageX, e.pageY])
-            commonStore.setFilters(values);
-        })
-    }, [])
+    const handleGeomClick = useCallback((values: any, e: any) => {
+        if (shouldTriggerMenu) {
+            runInAction(() => {
+                commonStore.showEmbededMenu([e.pageX, e.pageY])
+                commonStore.setFilters(values);
+            });
+        }
+    }, [shouldTriggerMenu]);
 
     // apply filters
     const { dataSource } = currentDataset;
@@ -93,10 +97,12 @@ const ReactiveRenderer: React.FC = props => {
         shape={shape[0]}
         opacity={opacity[0]}
         size={sizeChannel[0]}
-        onGeomClick={onGeomClick}
         showActions={showActions}
         width={size.width - 12 * 4}
         height={size.height - 12 * 4}
+        brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
+        selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
+        onGeomClick={handleGeomClick}
     />
     </Resizable>
 }

package/src/store/visualSpecStore.ts

@@ -2,7 +2,7 @@ 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, IVisualConfig } from "../interfaces";
+import { DataSet, DraggableFieldState, 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";
@@ -69,7 +69,11 @@ function initVisualConfig (): IVisualConfig {
             mode: 'auto',
             width: 320,
             height: 200
-        }
+        },
+        exploration: {
+            mode: 'brush',
+            brushDirection: 'default',
+        },
     }
 }
 
@@ -77,6 +81,16 @@ type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
 
+const forwardVisualConfigs = (backwards: ReturnType<typeof parseGWContent>['specList']): IVisSpec[] => {
+    return backwards.map(content => ({
+        ...content,
+        config: {
+            ...initVisualConfig(),
+            ...content.config,
+        },
+    }));
+};
+
 
 export class VizSpecStore {
     // public fields: IViewField[] = [];
@@ -363,6 +377,16 @@ export class VizSpecStore {
             config.size.height = height;
         });
     }
+    public setExploration(value: Partial<IVisualConfig['exploration']>) {
+        this.useMutable(({ config }) => {
+            if (value.mode) {
+                config.exploration.mode = value.mode;
+            }
+            if (value.brushDirection) {
+                config.exploration.brushDirection = value.brushDirection;
+            }
+        });
+    }
     public reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number) {
         if (MetaFieldKeys.includes(stateKey)) return;
         if (sourceIndex === destinationIndex) return;
@@ -580,7 +604,8 @@ export class VizSpecStore {
         this.commonStore.datasets = content.datasets;
         this.commonStore.dataSources = content.dataSources;
         this.commonStore.dsIndex = Math.max(content.datasets.length - 1, 0);
-        this.visList = parseGWPureSpec(content.specList)
+        // 补上初始化新版本特性
+        this.visList = parseGWPureSpec(forwardVisualConfigs(content.specList));
         this.visIndex = 0;
     }
 }

package/src/utils/save.ts

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