@kanaries/graphic-walker 0.2.4 → 0.2.6

package/src/interfaces.ts

@@ -0,0 +1,154 @@
+import { StatFuncName } from "visual-insights/build/esm/statistics";
+import { AggFC } from 'cube-core/built/types';
+import { IAnalyticType, IMutField as VIMutField, ISemanticType } from 'visual-insights';
+
+export 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];
+};
+
+export interface IRow {
+    [key: string]: any;
+}
+/**
+ * @deprecated
+ */
+export type SemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
+
+export interface Filters {
+    [key: string]: any[];
+}
+
+export interface IMutField {
+    fid: string;
+    key?: string;
+    name?: string;
+    disable?: boolean;
+    semanticType: ISemanticType;
+    analyticType: IAnalyticType;
+};
+
+export interface IField {
+    /**
+     * fid: key in data record
+     */
+    fid: string;
+    /**
+     * display name for field
+     */
+    name: string;
+    /**
+     * aggregator's name
+     */
+    aggName?: string;
+    semanticType: ISemanticType;
+    analyticType: IAnalyticType;
+    cmp?: (a: any, b: any) => number;
+}
+
+export interface IViewField extends IField {
+    dragId: string;
+    sort?: 'none' | 'ascending' | 'descending';
+}
+
+export interface Measure extends IField {
+    aggregator?: AggFC;
+    minWidth?: number;
+    formatter?: (value: number | undefined) => number | string;
+    [key: string]: any;
+}
+
+export interface DataSet {
+    id: string;
+    name: string;
+    rawFields: IMutField[];
+    dataSource: IRow[];
+}
+
+export interface IFieldNeighbor {
+    key: string;
+    cc: number;
+}
+
+export interface IMeasure {
+    key: string;
+    op: StatFuncName
+}
+
+export interface IDataSet {
+    id: string;
+    name: string;
+    rawFields: IMutField[];
+    dsId: string;
+}
+/**
+ * use as props to create a new dataset(IDataSet).
+ */
+export interface IDataSetInfo {
+    name: string;
+    rawFields: IMutField[];
+    dataSource: IRow[]
+}
+
+export interface IDataSource {
+    id: string;
+    data: IRow[]
+}
+
+export interface IFilterField extends IViewField {
+    rule: IFilterRule | null;
+}
+
+export interface DraggableFieldState {
+    fields: IViewField[];
+    dimensions: IViewField[];
+    measures: IViewField[];
+    rows: IViewField[];
+    columns: IViewField[];
+    color: IViewField[];
+    opacity: IViewField[];
+    size: IViewField[];
+    shape: IViewField[];
+    theta: IViewField[];
+    radius: IViewField[];
+    filters: IFilterField[];
+}
+
+export interface IDraggableStateKey {
+    id: keyof DraggableFieldState;
+    mode: number
+}
+
+export type IFilterRule = {
+    type: 'range';
+    value: readonly [number, number];
+} | {
+    type: 'temporal range';
+    value: readonly [number, number];
+} | {
+    type: 'one of';
+    value: Set<string | number>;
+};
+
+
+export type IStackMode = 'none' | 'stack' | 'normalize';
+
+export interface IVisualConfig {
+    defaultAggregated: boolean;
+    geoms:  string[];        
+    stack: 'none' | 'stack' | 'normalize';
+    showActions: boolean;
+    interactiveScale: boolean;
+    sorted: 'none' | 'ascending' | 'descending';
+    size: {
+        mode: 'auto' | 'fixed';
+        width: number;
+        height: number;
+    }
+}
+
+export interface IVisSpec {
+    readonly visId: string;
+    readonly name?: [string, Record<string, any>?];
+    readonly encodings: DeepReadonly<DraggableFieldState>;
+    readonly config: DeepReadonly<IVisualConfig>;
+}

package/src/locales/en-US.json

@@ -0,0 +1,140 @@
+{
+    "constant": {
+        "row_count": "Row count",
+        "analytic_type": {
+            "dimension": "dimension",
+            "measure": "measure"
+        },
+        "mark_type": {
+            "__enum__": "Mark Type",
+            "auto": "Auto",
+            "bar": "Bar",
+            "line": "Line",
+            "area": "Area",
+            "trail": "Trail",
+            "point": "Scatter",
+            "circle": "Circle",
+            "tick": "Tick",
+            "rect": "Rectangle",
+            "arc": "Arc",
+            "boxplot": "Box (Box Plot)"
+        },
+        "stack_mode": {
+            "__enum__": "Stack Mode",
+            "none": "None",
+            "stack": "Stack",
+            "normalize": "Normalize"
+        },
+        "layout_type": {
+            "__enum__": "Layout Mode",
+            "auto": "Auto",
+            "fixed": "Fixed"
+        },
+        "draggable_key": {
+            "fields": "Fields",
+            "columns": "Columns",
+            "rows": "Rows",
+            "color": "Color",
+            "opacity": "Opacity",
+            "size": "Size",
+            "shape": "Shape",
+            "theta": "Angle",
+            "radius": "Radius",
+            "filters": "Filters"
+        },
+        "aggregator": {
+            "sum": "Sum",
+            "mean": "Mean",
+            "count": "Count"
+        },
+        "filter_type": {
+            "one_of": "One-Of",
+            "range": "Range",
+            "temporal_range": "Date Range"
+        }
+    },
+    "App": {
+        "labels": {
+            "data_interpretation": "Interpret Data"
+        }
+    },
+    "DataSource": {
+        "labels": {
+            "cur_dataset": "Current Dataset"
+        },
+        "buttons": {
+            "create_dataset": "Create Dataset",
+            "export_as_file": "Save As File",
+            "import_file": "Import Graphic Walker File"
+        },
+        "dialog": {
+            "create_data_source": "New Data Source",
+            "data_types": "Choose Import Methods",
+            "text_file_data": "Open Local Text File",
+            "public_data": "Use Public Dataset",
+            "data_source_type": "Data Source Type: [{{sourceType}}]",
+            "file": {
+                "open": "Open...",
+                "submit": "Submit",
+                "dataset_name": "Dataset Name"
+            },
+            "public": {
+                "submit": "Submit"
+            }
+        }
+    },
+    "main": {
+        "tablist": {
+            "new": "+ New",
+            "autoTitle": "Chart {{idx}}"
+        },
+        "tabpanel": {
+            "menubar": {
+                "undo": "Undo",
+                "redo": "Redo"
+            },
+            "settings": {
+                "toggle": {
+                    "aggregation": "Aggregation",
+                    "stack": "Stack",
+                    "axes_resize": "Axes Resizing",
+                    "debug": "debugging"
+                },
+                "sort": "Sorting Order",
+                "button": {
+                    "ascending": "Sort in Ascending Order",
+                    "descending": "Sort in Descending Order",
+                    "transpose": "Transpose"
+                },
+                "size": "Resize",
+                "size_setting": {
+                    "width": "Width",
+                    "height": "Height"
+                }
+            },
+            "DatasetFields": {
+                "field_list": "Field List"
+            }
+        }
+    },
+    "filters": {
+        "to_edit": "Edit This Rule",
+        "empty_rule": "! (empty rule)",
+        "editing": "Edit Rule",
+        "form": {
+            "name": "Field",
+            "rule": "Rule"
+        },
+        "header": {
+            "visibility": "Visible",
+            "value": "Label",
+            "count": "Count"
+        },
+        "selected_keys": "{{ count }} items selected",
+        "btn": {
+            "select_all": "Select All",
+            "unselect_all": "Unselect All",
+            "reverse": "Reverse Selection"
+        }
+    }
+}

package/src/locales/i18n.ts

@@ -0,0 +1,50 @@
+import i18n, { Resource } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import localeEnUs from './en-US.json';
+import localeZhCn from './zh-CN.json';
+
+
+const locales: Resource & { 'en-US': any } = {
+    'en': {
+        translation: localeEnUs,
+    },
+    'en-US': {
+        translation: localeEnUs,
+    },
+    'zh': {
+        translation: localeZhCn,
+    },
+    'zh-CN': {
+        translation: localeZhCn,
+    },
+} as const;
+
+i18n.use(initReactI18next).use(LanguageDetector).init({
+    fallbackLng: 'en-US',
+    interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+    },
+    resources: locales,
+});
+
+const loadedLangs: string[] = []; // exclude built-in keys to enable rewrite
+
+export const mergeLocaleRes = (resources: { [lang: string]: Resource }) => {
+    for (const lang in resources) {
+        if (Object.prototype.hasOwnProperty.call(resources, lang)) {
+            if (loadedLangs.includes(lang)) {
+                continue;
+            }
+
+            loadedLangs.push(lang);
+            const resource = resources[lang];
+            i18n.addResourceBundle(lang, 'translation', resource, false, true);
+        }
+    }
+};
+
+export const setLocaleLanguage = (lang: string) => {
+    return i18n.changeLanguage(lang);
+};

package/src/locales/zh-CN.json

@@ -0,0 +1,140 @@
+{
+    "constant": {
+        "row_count": "行数",
+        "analytic_type": {
+            "dimension": "维度",
+            "measure": "度量"
+        },
+        "mark_type": {
+            "__enum__": "标记类型",
+            "auto": "自动",
+            "bar": "条形",
+            "line": "折线",
+            "area": "面积",
+            "trail": "痕迹",
+            "point": "散点",
+            "circle": "圆",
+            "tick": "标记",
+            "rect": "矩形",
+            "arc": "弧形",
+            "boxplot": "统计箱"
+        },
+        "layout_type": {
+            "__enum__": "尺寸模式",
+            "auto": "自动",
+            "fixed": "固定"
+        },
+        "stack_mode": {
+            "__enum__": "堆叠模式",
+            "none": "关闭",
+            "stack": "堆叠",
+            "normalize": "归一化"
+        },
+        "draggable_key": {
+            "fields": "字段",
+            "columns": "列",
+            "rows": "行",
+            "color": "颜色",
+            "opacity": "透明度",
+            "size": "大小",
+            "shape": "形状",
+            "theta": "角度",
+            "radius": "半径",
+            "filters": "筛选器"
+        },
+        "aggregator": {
+            "sum": "求和",
+            "mean": "平均值",
+            "count": "计数"
+        },
+        "filter_type": {
+            "one_of": "按值筛选",
+            "range": "按范围筛选",
+            "temporal_range": "按日期范围筛选"
+        }
+    },
+    "App": {
+        "labels": {
+            "data_interpretation": "数据解读"
+        }
+    },
+    "DataSource": {
+        "labels": {
+            "cur_dataset": "当前数据集"
+        },
+        "buttons": {
+            "create_dataset": "创建数据集",
+            "export_as_file": "保存到文件",
+            "import_file": "导入文件"
+        },
+        "dialog": {
+            "create_data_source": "创建数据源",
+            "data_types": "选择类型",
+            "text_file_data": "从文件中导入",
+            "public_data": "公共数据集",
+            "data_source_type": "数据源类型：[{{sourceType}}]",
+            "file": {
+                "open": "打开文件...",
+                "submit": "确认",
+                "dataset_name": "数据集名称"
+            },
+            "public": {
+                "submit": "确认"
+            }
+        }
+    },
+    "main": {
+        "tablist": {
+            "new": "+ 新建",
+            "autoTitle": "图表 {{idx}}"
+        },
+        "tabpanel": {
+            "menubar": {
+                "undo": "撤销",
+                "redo": "重做"
+            },
+            "settings": {
+                "toggle": {
+                    "aggregation": "聚合度量",
+                    "stack": "开启堆叠",
+                    "axes_resize": "坐标系缩放",
+                    "debug": "图表调试"
+                },
+                "sort": "排序",
+                "button": {
+                    "ascending": "升序排序",
+                    "descending": "降序排序",
+                    "transpose": "转置"
+                },
+                "size": "调整尺寸",
+                "size_setting": {
+                    "width": "宽度",
+                    "height": "高度"
+                }
+            },
+            "DatasetFields": {
+                "field_list": "字段列表"
+            }
+        }
+    },
+    "filters": {
+        "to_edit": "编辑这条规则",
+        "empty_rule": "! (空的规则)",
+        "editing": "编辑规则",
+        "form": {
+            "name": "字段",
+            "rule": "规则"
+        },
+        "header": {
+            "visibility": "可见",
+            "value": "标签",
+            "count": "计数"
+        },
+        "selected_keys": "{{ count }} 个标签已选择",
+        "btn": {
+            "select_all": "全部选中",
+            "unselect_all": "全部取消",
+            "reverse": "选择反向"
+        }
+    }
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { GraphicWalker } from './index'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <GraphicWalker />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

package/src/models/visSpecHistory.ts

@@ -0,0 +1,129 @@
+import { toJS } from "mobx";
+import { MAX_HISTORY_SIZE } from "../config";
+import { DeepReadonly, DraggableFieldState, IVisSpec, IVisualConfig } from "../interfaces";
+
+export class VisSpecWithHistory {
+
+    readonly visId: IVisSpec['visId'];
+    private snapshots: Pick<IVisSpec, 'name' | 'encodings' | 'config'>[];
+    private cursor: number;
+
+    constructor(data: IVisSpec) {
+        this.visId = data.visId;
+        this.snapshots = [{
+            name: data.name,
+            encodings: data.encodings,
+            config: data.config,
+        }];
+        this.cursor = 0;
+    }
+
+    private get frame(): Readonly<IVisSpec> {
+        return {
+            visId: this.visId,
+            ...this.snapshots[this.cursor]!,
+        };
+    }
+
+    private batchFlag = false;
+
+    private commit(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>): void {
+        if (this.batchFlag) {
+            // batch this commit
+            this.snapshots[this.cursor] = toJS({
+                ...this.frame,
+                ...snapshot,
+            });
+
+            return;
+        }
+
+        this.batchFlag = true;
+
+        this.snapshots = [
+            ...this.snapshots.slice(0, this.cursor + 1),
+            toJS({
+                ...this.frame,
+                ...snapshot,
+            }),
+        ];
+
+        if (this.snapshots.length > MAX_HISTORY_SIZE) {
+            this.snapshots.splice(0, 1);
+        }
+
+        this.cursor = this.snapshots.length - 1;
+
+        requestAnimationFrame(() => this.batchFlag = false);
+    }
+
+    public get canUndo() {
+        return this.cursor > 0;
+    }
+
+    public undo(): boolean {
+        if (this.cursor === 0) {
+            return false;
+        }
+
+        this.cursor -= 1;
+
+        return true;
+    }
+
+    public get canRedo() {
+        return this.cursor < this.snapshots.length - 1;
+    }
+
+    public redo(): boolean {
+        if (this.cursor === this.snapshots.length - 1) {
+            return false;
+        }
+
+        this.cursor += 1;
+
+        return true;
+    }
+
+    public rebase() {
+        this.snapshots = [this.snapshots[this.cursor]];
+        this.cursor = 0;
+    }
+
+    get name() {
+        return this.frame.name;
+    }
+
+    set name(name: IVisSpec['name']) {
+        this.commit({
+            name,
+        });
+    }
+
+    get encodings(): DeepReadonly<DraggableFieldState> {
+        return this.frame.encodings;
+    }
+
+    set encodings(encodings: IVisSpec['encodings']) {
+        this.commit({
+            encodings,
+        });
+    }
+
+    get config(): DeepReadonly<IVisualConfig> {
+        return this.frame.config;
+    }
+
+    set config(config: IVisSpec['config']) {
+        this.commit({
+            config,
+        });
+    }
+
+    public exportGW (): IVisSpec {
+        return {
+            ...this.frame
+        }
+    }
+
+}