@kanaries/graphic-walker 0.2.11 → 0.2.13

package/src/lib/inferMeta.ts

@@ -0,0 +1,88 @@
+import { IAnalyticType, ISemanticType, UnivariateSummary } from "visual-insights";
+import { IMutField, IRow, IUncertainMutField } from "../interfaces";
+
+const COMMON_TIME_FORMAT: RegExp[] = [
+    /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
+    /^\d{2}\/\d{2}\/\d{4}$/, // MM/DD/YYYY
+    /^\d{2}\/\d{2}\/\d{4}$/, // DD/MM/YYYY
+    /^\d{4}\/\d{2}\/\d{2}$/, // YYYY/MM/DD
+    /^\d{4}\.\d{2}\.\d{2}$/, // YYYY.MM.DD
+    /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/, // YYYY-MM-DD HH:MM:SS
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/ // YYYY-MM-DDTHH:MM:SS (ISO-8601)
+];
+
+/**
+ * check if this array is a date time array based on some common date format
+ * @param data string array
+ * @returns 
+ */
+export function isDateTimeArray(data: string[]): boolean {
+    let isDateTime = true;
+    for (let d of data) {
+        let isDateTimeItem = false;
+        for (let r of COMMON_TIME_FORMAT) {
+            if (r.test(d)) {
+                isDateTimeItem = true;
+                break;
+            }
+        }
+        if (!isDateTimeItem) {
+            isDateTime = false;
+            break;
+        }
+    }
+    return isDateTime;
+}
+
+function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyticType {
+    switch (semanticType) {
+        case 'quantitative':
+            return 'measure';
+        default:
+            return 'dimension';
+    }
+}
+
+/**
+ * 这里目前暂时包一层，是为了解耦具体的推断实现。后续这里要调整推断的逻辑。
+ * 需要讨论这一层是否和交互层有关，如果没有关系，这一层包裹可以不存在这里，而是在visual-insights中。
+ * @param data 原始数据
+ * @param fid 字段id
+ * @returns semantic type 列表
+ */
+export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
+    let st = UnivariateSummary.getFieldType(data, fid);
+    if (st === 'nominal') {
+        if (isDateTimeArray(data.map((row) => row[fid]))) st = 'temporal';
+    } else if (st === 'ordinal') {
+        const valueSet: Set<number> = new Set();
+        let _max = -Infinity;
+        let _min = Infinity;
+        for (let v of valueSet) {
+            _max = Math.max(_max, v);
+            _min = Math.max(_min, v);
+        }
+        if (_max - _min + 1 !== valueSet.size) {
+            st = 'quantitative';
+        }
+    }
+    return st;
+}
+
+export function inferMeta (props: { dataSource: IRow[]; fields: IUncertainMutField[] }): IMutField[] {
+    const { dataSource, fields } = props;
+    const finalFieldMetas: IMutField[] = []
+    for (let field of fields) {
+        let semanticType: ISemanticType = field.semanticType === '?' ? inferSemanticType(dataSource, field.fid) : field.semanticType;
+        let analyticType: IAnalyticType = inferAnalyticTypeFromSemanticType(semanticType);
+
+        finalFieldMetas.push({
+            fid: field.fid,
+            key: field.key ? field.key : field.fid,
+            name: field.name ? field.name : field.fid,
+            analyticType,
+            semanticType,
+        })
+    }
+    return finalFieldMetas
+}

package/src/locales/en-US.json

@@ -5,6 +5,12 @@
             "dimension": "dimension",
             "measure": "measure"
         },
+        "semantic_type": {
+            "nominal": "nominal",
+            "ordinal": "ordinal",
+            "temporal": "temporal",
+            "quantitative": "quantitative"
+        },
         "mark_type": {
             "__enum__": "Mark Type",
             "auto": "Auto",
@@ -75,6 +81,10 @@
     "App": {
         "labels": {
             "data_interpretation": "Interpret Data"
+        },
+        "segments": {
+            "vis": "Visualization",
+            "data": "Data"
         }
     },
     "DataSource": {
@@ -171,5 +181,9 @@
             "children_major_factor": "major factor",
             "children_outlier": "outlier"
         }
+    },
+    "actions": {
+        "prev": "Previous",
+        "next": "Next"
     }
 }

package/src/locales/zh-CN.json

@@ -5,6 +5,12 @@
             "dimension": "维度",
             "measure": "度量"
         },
+        "semantic_type": {
+            "nominal": "类别类型",
+            "ordinal": "有序类型",
+            "temporal": "时间类型",
+            "quantitative": "数值类型"
+        },
         "mark_type": {
             "__enum__": "标记类型",
             "auto": "自动",
@@ -75,6 +81,10 @@
     "App": {
         "labels": {
             "data_interpretation": "数据解读"
+        },
+        "segments": {
+            "vis": "可视化",
+            "data": "数据"
         }
     },
     "DataSource": {
@@ -171,5 +181,9 @@
             "children_major_factor": "子节点主要因素",
             "children_outlier": "子节点异常"
         }
+    },
+    "actions": {
+        "prev": "向前",
+        "next": "向后"
     }
 }

package/src/main.tsx

@@ -9,7 +9,7 @@ inject();
 
 ReactDOM.render(
     <React.StrictMode>
-      <GraphicWalker />
+        <GraphicWalker />
     </React.StrictMode>,
     document.getElementById("root")
 );

package/src/renderer/index.tsx

@@ -32,6 +32,7 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRend
     
     const handleGeomClick = useCallback((values: any, e: any) => {
         if (shouldTriggerMenu) {
+            e.stopPropagation();
             runInAction(() => {
                 commonStore.showEmbededMenu([e.pageX, e.pageY])
                 commonStore.setFilters(values);

package/src/segments/segmentNav.tsx

@@ -0,0 +1,58 @@
+import React, { Fragment, useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import DefaultTab, { ITabOption } from "../components/tabs/defaultTab";
+import { useGlobalStore } from "../store";
+import { ChartBarIcon, ChartPieIcon, CircleStackIcon } from "@heroicons/react/24/outline";
+import { ISegmentKey } from "../interfaces";
+import { useTranslation } from "react-i18next";
+
+
+const ADD_KEY = '_add';
+
+const SegmentNav: React.FC = (props) => {
+    const { vizStore, commonStore } = useGlobalStore();
+    const { visIndex, visList } = vizStore;
+    const { currentDataset, segmentKey } = commonStore;
+    const { t } = useTranslation();
+
+    const tabs: ITabOption[] = [
+        {
+            key: ISegmentKey.data,
+            label: <div className="flex">
+                <CircleStackIcon className="w-4 mr-2" /> {t('App.segments.data')}
+            </div>
+        },
+        {
+            key: ISegmentKey.vis,
+            label: <div className="flex">
+                <ChartPieIcon className="w-4 mr-2" /> {t('App.segments.vis')}
+            </div>
+        }
+    ]
+
+    const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
+        if (tabKey === ADD_KEY) {
+            vizStore.addVisualization();
+            vizStore.initMetaState(currentDataset)
+        } else {
+            vizStore.selectVisualization(tabIndex);
+        }
+    }, [currentDataset, vizStore])
+
+    const editLabelHandler = useCallback((content: string, tabIndex: number) => {
+        vizStore.setVisName(tabIndex, content)
+    }, [])
+
+    return (
+        <DefaultTab
+            selectedKey={segmentKey}
+            tabs={tabs}
+            onEditLabel={editLabelHandler}
+            onSelected={(k) => {
+                commonStore.setSegmentKey(k as ISegmentKey)
+            }}
+        />
+    );
+};
+
+export default observer(SegmentNav);

package/src/segments/visNav.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
-import PureTabs, { ITabOption } from "../components/tabs/pureTab";
+import EditableTabs, { ITabOption } from "../components/tabs/editableTab";
 import { useGlobalStore } from "../store";
 
 
@@ -36,7 +36,7 @@ const VisNav: React.FC = (props) => {
     }, [])
 
     return (
-        <PureTabs
+        <EditableTabs
             selectedKey={visList[visIndex].visId}
             tabs={tabs}
             onEditLabel={editLabelHandler}

package/src/store/commonStore.ts

@@ -1,4 +1,4 @@
-import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow } from '../interfaces';
+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';
@@ -13,17 +13,16 @@ export class CommonStore {
     public showDSPanel: boolean = false;
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
-    public rootContainer: HTMLDivElement | null = null;
-
+    public showDataConfig: boolean = false;
     public filters: Filters = {};
+    public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
         this.datasets = [];
         this.dataSources = [];
         makeAutoObservable(this, {
             dataSources: observable.ref,
             tmpDataSource: observable.ref,
-            filters: observable.ref,
-            rootContainer: false
+            filters: observable.ref
         });
     }
     public get currentDataset (): DataSet {
@@ -46,9 +45,15 @@ export class CommonStore {
             dataSource: []
         }
     }
+    public setSegmentKey (sk: ISegmentKey) {
+        this.segmentKey = sk;
+    }
     public setShowDSPanel (show: boolean) {
         this.showDSPanel = show;
     }
+    public setShowDataConfig (show: boolean) {
+        this.showDataConfig = show;
+    }
     public setShowInsightBoard (show: boolean) {
         this.showInsightBoard = show;
     }
@@ -68,6 +73,25 @@ export class CommonStore {
         this.tmpDSRawFields = fields;
     }
 
+    public updateCurrentDatasetMetas (fid: string, diffMeta: Partial<IMutField>) {
+        const dataset = this.datasets[this.dsIndex];
+        const field = dataset.rawFields.find(f => f.fid === fid);
+        if (field) {
+            for (let mk in diffMeta) {
+                field[mk] = diffMeta[mk];
+            }
+        }
+    }
+
+    public updateTempDatasetMetas (fid: string, diffMeta: Partial<IMutField>) {
+        const field = this.tmpDSRawFields.find(f => f.fid === fid);
+        if (field) {
+            for (let mk in diffMeta) {
+                field[mk] = diffMeta[mk];
+            }
+        }
+    }
+
     public updateTempFieldAnalyticType (fieldKey: string, analyticType: IMutField['analyticType']) {
         const field = this.tmpDSRawFields.find(f => f.fid === fieldKey);
         if (field) {
@@ -75,6 +99,13 @@ export class CommonStore {
         }
     }
 
+    public updateTempFieldSemanticType (fieldKey: string, semanticType: IMutField['semanticType']) {
+        const field = this.tmpDSRawFields.find(f => f.fid === fieldKey);
+        if (field) {
+            field.semanticType = semanticType;
+        }
+    }
+
     public updateTempName (name: string) {
         this.tmpDSName = name;
     }

package/src/store/index.tsx

@@ -31,7 +31,6 @@ export function rebootGWStore() {
 
 interface StoreWrapperProps {
     keepAlive?: boolean;
-    rootContainer?: HTMLDivElement | null;
 }
 export class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps) {
@@ -46,7 +45,6 @@ export class StoreWrapper extends React.Component<StoreWrapperProps> {
         }
     }
     render() {
-        initStore.commonStore.rootContainer = this.props.rootContainer ?? null;
         return <StoreContext.Provider value={initStore}>
             { this.props.children }
         </StoreContext.Provider>