@kanaries/graphic-walker 0.2.12 → 0.2.13

package/src/dataSource/table.tsx

@@ -1,171 +1,27 @@
-import React, { useMemo } from "react";
-import styled from "styled-components";
+import React from "react";
 import { observer } from "mobx-react-lite";
-import { IMutField } from "../interfaces";
 import { useGlobalStore } from "../store";
-import { useTranslation } from "react-i18next";
+import DataTable from "../components/dataTable";
+import { toJS } from "mobx";
 
 interface TableProps {
     size?: number;
 }
-const Container = styled.div`
-    overflow-x: auto;
-    table {
-        box-sizing: content-box;
-        border-collapse: collapse;
-        font-size: 12px;
-        thead {
-            th {
-            }
-            th.number {
-                border-top: 3px solid #5cdbd3;
-            }
-            th.text {
-                border-top: 3px solid #69c0ff;
-            }
-        }
-        tbody {
-            td {
-            }
-            td.number {
-                text-align: right;
-            }
-            td.text {
-                text-align: left;
-            }
-        }
-    }
-`;
-const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
-const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
-// function getCellType(field: IMutField): 'number' | 'text' {
-//     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
-// }
-function getHeaderType(field: IMutField): "number" | "text" {
-    return field.analyticType === "dimension" ? "text" : "number";
-}
-
-function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
-}
-
-function getSemanticColors(field: IMutField): string {
-    switch (field.semanticType) {
-        case "nominal":
-            return "bg-indigo-100 text-indigo-800";
-        case "ordinal":
-            return "bg-purple-100 text-purple-800"
-        case "quantitative":
-            return "bg-green-100 text-green-800"
-        case "temporal":
-            return "bg-yellow-100 text-yellow-800"
-        default:
-            return "bg-gray-400";
-    }
-}
 
 const Table: React.FC<TableProps> = (props) => {
     const { size = 10 } = props;
     const { commonStore } = useGlobalStore();
     const { tmpDSRawFields, tmpDataSource } = commonStore;
-    const { t } = useTranslation();
-
-    const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
-        return ANALYTIC_TYPE_LIST.map((at) => ({
-            value: at,
-            label: t(`constant.analytic_type.${at}`),
-        }));
-    }, []);
-
-    const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
-        return SEMANTIC_TYPE_LIST.map((st) => ({
-            value: st,
-            label: t(`constant.semantic_type.${st}`),
-        }));
-    }, []);
 
     return (
-        <Container className="rounded border-gray-200 border">
-            <table className="min-w-full divide-y divide-gray-30">
-                <thead className="bg-gray-50">
-                    <tr className="divide-x divide-gray-200">
-                        {tmpDSRawFields.map((field, fIndex) => (
-                            <th key={field.fid} className={""}>
-                                <div
-                                    className={
-                                        getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
-                                    }
-                                >
-                                    <b>{field.name || field.fid}</b>
-                                    <div>
-                                        <select
-                                            className={
-                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
-                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.analyticType}
-                                            onChange={(e) => {
-                                                commonStore.updateTempFieldAnalyticType(
-                                                    field.fid,
-                                                    e.target.value as IMutField["analyticType"]
-                                                );
-                                            }}
-                                        >
-                                            {analyticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    </div>
-                                    <div>
-                                    <select
-                                            className={
-                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                                getSemanticColors(field)
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.semanticType}
-                                            onChange={(e) => {
-                                                commonStore.updateTempFieldSemanticType(
-                                                    field.fid,
-                                                    e.target.value as IMutField["semanticType"]
-                                                );
-                                            }}
-                                        >
-                                            {semanticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    </div>
-                                </div>
-                            </th>
-                        ))}
-                    </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
-                    {tmpDataSource.slice(0, size).map((record, index) => (
-                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
-                            {tmpDSRawFields.map((field) => (
-                                <td
-                                    key={field.fid + index}
-                                    className={
-                                        getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
-                                    }
-                                >
-                                    {record[field.fid]}
-                                </td>
-                            ))}
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </Container>
+        <DataTable
+            size={size}
+            metas={toJS(tmpDSRawFields)}
+            data={tmpDataSource}
+            onMetaChange={(fid, fIndex, diffMeta) => {
+                commonStore.updateTempDatasetMetas(fid, diffMeta);
+            }}
+        />
     );
 };
 

package/src/interfaces.ts

@@ -178,4 +178,9 @@ export interface IVisSpec {
     readonly name?: [string, Record<string, any>?];
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
+}
+
+export enum ISegmentKey {
+    vis = 'vis',
+    data = 'data'
 }

package/src/locales/en-US.json

@@ -81,6 +81,10 @@
     "App": {
         "labels": {
             "data_interpretation": "Interpret Data"
+        },
+        "segments": {
+            "vis": "Visualization",
+            "data": "Data"
         }
     },
     "DataSource": {
@@ -177,5 +181,9 @@
             "children_major_factor": "major factor",
             "children_outlier": "outlier"
         }
+    },
+    "actions": {
+        "prev": "Previous",
+        "next": "Next"
     }
 }

package/src/locales/zh-CN.json

@@ -81,6 +81,10 @@
     "App": {
         "labels": {
             "data_interpretation": "数据解读"
+        },
+        "segments": {
+            "vis": "可视化",
+            "data": "数据"
         }
     },
     "DataSource": {
@@ -177,5 +181,9 @@
             "children_major_factor": "子节点主要因素",
             "children_outlier": "子节点异常"
         }
+    },
+    "actions": {
+        "prev": "向前",
+        "next": "向后"
     }
 }

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,8 +13,9 @@ export class CommonStore {
     public showDSPanel: boolean = false;
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
-
+    public showDataConfig: boolean = false;
     public filters: Filters = {};
+    public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
         this.datasets = [];
         this.dataSources = [];
@@ -44,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;
     }
@@ -66,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) {