@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/lib/execExp.ts

@@ -0,0 +1,147 @@
+import { IExpParamter, IExpression, IField, IRow } from "../interfaces";
+
+interface IDataFrame {
+    [key: string]: any[];
+}
+
+export function execExpression (exp: IExpression, dataFrame: IDataFrame, columns: IField[]): IDataFrame {
+    const { op, params } = exp;
+    const subFrame: IDataFrame = { ...dataFrame };
+    const len = dataFrame[Object.keys(dataFrame)[0]].length;
+    for (let param of params) {
+        switch (param.type) {
+            case 'field':
+                subFrame[param.value] = dataFrame[param.value];
+                break;
+            case 'constant':
+                subFrame[param.value] = new Array(len).fill(param.value);
+                break;
+            case 'expression':
+                let f = execExpression(param.value, dataFrame, columns);
+                Object.keys(f).forEach(key => {
+                    subFrame[key] = f[key];
+                })
+                break;
+            case 'value':
+            default:
+                break;
+        }
+    }
+    switch (op) {
+        case 'one':
+            return one(exp.as, params, subFrame);
+        case 'bin':
+            return bin(exp.as, params, subFrame);
+        case 'log2':
+            return log2(exp.as, params, subFrame);
+        case 'log10':
+            return log10(exp.as, params, subFrame);
+        case 'binCount':
+            return binCount(exp.as, params, subFrame);
+        default:
+            return subFrame;
+    }
+}
+
+function bin(resKey: string, params: IExpParamter[], data: IDataFrame, binSize: number | undefined = 10): IDataFrame {
+    const { value: fieldKey } = params[0];
+    const fieldValues = data[fieldKey] as number[];
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (let i = 0; i < fieldValues.length; i++) {
+        let val = fieldValues[i];
+        if (val > _max) _max = val;
+        if (val < _min) _min = val;
+    }
+    const step = (_max - _min) / binSize;
+    const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)
+    const newValues = fieldValues.map((v: number) => {
+        let bIndex = Math.floor((v - _min) / step);
+        if (bIndex === binSize) bIndex = binSize - 1;
+        return Number(((bIndex * step + _min)).toFixed(beaStep))
+    });
+    return {
+        ...data,
+        [resKey]: newValues,
+    }
+}
+
+function binCount(resKey: string, params: IExpParamter[], data: IDataFrame, binSize: number | undefined = 10): IDataFrame {
+    const { value: fieldKey } = params[0];
+    const fieldValues = data[fieldKey] as number[];
+
+    const valueWithIndices: {val: number; index: number; orderIndex: number }[] = fieldValues.map((v, i) => ({
+        val: v,
+        index: i
+    })).sort((a, b) => a.val - b.val)
+        .map((item, i) => ({
+            val: item.val,
+            index: item.index,
+            orderIndex: i
+        }))
+
+    const groupSize = valueWithIndices.length / binSize;
+
+    const newValues = valueWithIndices.map(item => {
+        let bIndex = Math.floor(item.orderIndex / groupSize);
+        if (bIndex === binSize) bIndex = binSize - 1;
+        return bIndex + 1
+    })
+    return {
+        ...data,
+        [resKey]: newValues,
+    }
+}
+
+function log2(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {
+    const { value } = params[0];
+    const field = data[value];
+    const newField = field.map((v: number) => Math.log2(v));
+    return {
+        ...data,
+        [resKey]: newField,
+    }
+}
+
+function log10(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {
+    const { value: fieldKey } = params[0];
+    const fieldValues = data[fieldKey];
+    const newField = fieldValues.map((v: number) => Math.log10(v));
+    return {
+        ...data,
+        [resKey]: newField,
+    }
+}
+
+function one(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {
+    // const { value: fieldKey } = params[0];
+    if (Object.keys(data).length === 0) return data;
+    const len = data[Object.keys(data)[0]].length;
+    const newField = new Array(len).fill(1);
+    return {
+        ...data,
+        [resKey]: newField,
+    }
+}
+
+export function dataset2DataFrame(dataset: IRow[], columns: IField[]): IDataFrame {
+    const dataFrame: IDataFrame = {};
+    columns.forEach((col) => {
+        dataFrame[col.fid] = dataset.map((row) => row[col.fid]);
+    });
+    return dataFrame;
+}
+
+export function dataframe2Dataset(dataFrame: IDataFrame, columns: IField[]): IRow[] {
+    if (columns.length === 0) return [];
+    const dataset: IRow[] = [];
+    const len = dataFrame[Object.keys(dataFrame)[0]].length;
+    for (let i = 0; i < len; i++) {
+        const row: IRow = {};
+        columns.forEach((col) => {
+            row[col.fid] = dataFrame[col.fid][i];
+        });
+        dataset.push(row);
+    }
+    return dataset;
+}

package/src/lib/interfaces.ts

@@ -0,0 +1,39 @@
+export interface IAggQuery {
+    op: 'aggregate';
+    groupBy: string[];
+    agg: {
+        [field: string]:
+            | 'sum'
+            | 'count'
+            | 'max'
+            | 'min'
+            | 'mean'
+            | 'median'
+            | 'variance'
+            | 'stdev';
+    };
+}
+
+// interface IFilterQuery {
+//     op: 'filter';
+//     filter: string;
+// }
+
+export interface IFoldQuery {
+    op: 'fold';
+    foldBy: string[];
+    newFoldKeyCol: string;
+    newFoldValueCol: string;
+}
+
+export interface IBinQuery {
+    op: 'bin';
+    binBy: string;
+    newBinCol: string;
+    binSize: number;
+}
+
+
+export interface IRawQuery {
+    op: 'raw';
+}

package/src/lib/op/aggregate.ts

@@ -0,0 +1,49 @@
+import { IRow } from "visual-insights";
+import { IAggQuery } from "../interfaces";
+import { sum, mean, median, stdev, variance, max, min, count } from "./stat";
+
+const aggregatorMap = {
+    sum,
+    mean,
+    median,
+    stdev,
+    variance,
+    max,
+    min,
+    count,
+};
+
+const KEY_JOINER = '___';
+
+export function aggregate (data: IRow[], query: IAggQuery): IRow[] {
+    const { groupBy, agg } = query;
+    const ans: Map<string, IRow> = new Map();
+    const groups: Map<string, IRow[]> = new Map();
+    for (let row of data) {
+        const gk = groupBy.map((k) => row[k]).join(KEY_JOINER);
+
+        if (!groups.has(gk)) {
+            groups.set(gk, []);
+        }
+        groups.get(gk)?.push(row);
+    }
+    for (let [gk, subGroup] of groups) {
+        if (subGroup.length === 0) {
+            continue;
+        }
+        let aggRow: IRow = {};
+        for (let k of groupBy) {
+            aggRow[k] = subGroup[0][k];
+        }
+        for (let meaKey in agg) {
+            if (aggRow[meaKey] === undefined) {
+                aggRow[meaKey] = 0;
+            }
+            const values: number[] = subGroup.map((r) => r[meaKey]) ?? [];
+            const aggregator = aggregatorMap[agg[meaKey]] ?? sum;
+            aggRow[meaKey] = aggregator(values);
+        }
+        ans.set(gk, aggRow);
+    }
+    return Array.from(ans.values());
+}

package/src/lib/op/bin.ts

@@ -0,0 +1,25 @@
+import { IRow } from "visual-insights";
+import { IBinQuery } from "../interfaces";
+
+export function bin (dataSource: IRow[], query: IBinQuery): IRow[] {
+    const { binBy, newBinCol, binSize } = query;
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (let i = 0; i < dataSource.length; i++) {
+        let val = dataSource[i][binBy];
+        if (val > _max) _max = val;
+        if (val < _min) _min = val;
+    }
+    const step = (_max - _min) / binSize;
+    // const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)
+    return dataSource.map((r) => {
+        let bIndex = Math.floor((r[binBy] - _min) / step);
+        if (bIndex === binSize) bIndex = binSize - 1;
+        return {
+            ...r,
+            [newBinCol]: [bIndex * step + _min, (bIndex + 1) * step + _min],
+            
+            // [binFid]: Number(((bIndex * step + _min)).toFixed(beaStep)),
+        };
+    });
+}

package/src/lib/op/fold.ts

@@ -0,0 +1,17 @@
+import { IRow } from "visual-insights";
+import { IFoldQuery } from "../interfaces";
+
+export function fold (data: IRow[], query: IFoldQuery): IRow[] {
+    const { foldBy, newFoldKeyCol, newFoldValueCol } = query;
+    const ans: IRow[] = [];
+    for (let row of data) {
+        for (let k of foldBy) {
+            const newRow = { ...row };
+            newRow[newFoldKeyCol] = k;
+            newRow[newFoldValueCol] = row[k];
+            delete newRow[k];
+            ans.push(newRow);
+        }
+    }
+    return ans;
+}

package/src/lib/op/stat.ts

@@ -0,0 +1,46 @@
+export function mean(nums: number[]): number {
+    return nums.reduce((a, b) => a + b, 0) / nums.length;
+}
+
+export function sum(nums: number[]): number {
+    return nums.reduce((a, b) => a + b, 0);
+}
+
+export function median(nums: number[]): number {
+    const sorted = nums.sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 === 0 ? (sorted[mid] + sorted[mid - 1]) / 2 : sorted[mid];
+}
+
+export function variance(nums: number[]): number {
+    const m = mean(nums);
+    return mean(nums.map((x) => (x - m) ** 2));
+}
+
+export function stdev(nums: number[]): number {
+    return Math.sqrt(variance(nums));
+}
+
+export function max(nums: number[]): number {
+    let ans = -Infinity;
+    for (let n of nums) {
+        if (n > ans) {
+            ans = n;
+        }
+    }
+    return ans;
+}
+
+export function min(nums: number[]): number {
+    let ans = Infinity;
+    for (let n of nums) {
+        if (n < ans) {
+            ans = n;
+        }
+    }
+    return ans;
+}
+
+export function count(nums: number[]): number {
+    return nums.length;
+}

package/src/lib/viewQuery.ts

@@ -0,0 +1,23 @@
+import { IRow } from "visual-insights";
+import { IMutField } from "../interfaces";
+import { aggregate } from "./op/aggregate";
+import { fold } from "./op/fold";
+import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";
+import { bin } from "./op/bin";
+
+export type IViewQuery = IAggQuery | IFoldQuery | IBinQuery | IRawQuery;
+
+export function queryView (rawData: IRow[], metas: IMutField[], query: IViewQuery) {
+    switch (query.op) {
+        case 'aggregate':
+            return aggregate(rawData, query);
+        case 'fold':
+            return fold(rawData, query);
+        case 'bin':
+            return bin(rawData, query);
+        case 'raw':
+        default:
+            return rawData;
+    }
+
+}

package/src/locales/en-US.json

@@ -117,7 +117,8 @@
     "main": {
         "tablist": {
             "new": "+ New",
-            "autoTitle": "Chart {{idx}}"
+            "auto_title": "Chart {{idx}}",
+            "chart_name": "Chart Name"
         },
         "tabpanel": {
             "menubar": {
@@ -167,7 +168,9 @@
         "btn": {
             "select_all": "Select All",
             "unselect_all": "Unselect All",
-            "reverse": "Reverse Selection"
+            "reverse": "Reverse Selection",
+            "confirm": "Confirm",
+            "cancel": "Cancel"
         }
     },
     "explain": {
@@ -187,6 +190,8 @@
     "actions": {
         "prev": "Previous",
         "next": "Next",
-        "drop_field": "Drop Field Here"
+        "drop_field": "Drop Field Here",
+        "confirm": "Confirm",
+        "cancel": "Cancel"
     }
 }

package/src/locales/i18n.ts

@@ -3,9 +3,9 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import localeEnUs from './en-US.json';
+import localeJaJp from './ja-JP.json';
 import localeZhCn from './zh-CN.json';
 
-
 const locales: Resource & { 'en-US': any } = {
     'en': {
         translation: localeEnUs,
@@ -19,6 +19,12 @@ const locales: Resource & { 'en-US': any } = {
     'zh-CN': {
         translation: localeZhCn,
     },
+    'ja': {
+        translation: localeJaJp,
+    },
+    'ja-JP': {
+        translation: localeJaJp,
+    }
 } as const;
 
 i18n.use(initReactI18next).use(LanguageDetector).init({

package/src/locales/ja-JP.json

@@ -0,0 +1,197 @@
+{
+    "constant": {
+      "row_count": "行数",
+      "analytic_type": {
+        "dimension": "次元",
+        "measure": "尺度"
+      },
+      "semantic_type": {
+        "nominal": "名義尺度",
+        "ordinal": "順序尺度",
+        "temporal": "時間尺度",
+        "quantitative": "数量尺度"
+      },
+      "mark_type": {
+        "__enum__": "マークタイプ",
+        "auto": "自動",
+        "bar": "バー",
+        "line": "ライン",
+        "area": "エリア",
+        "trail": "トレイル",
+        "point": "散布図",
+        "circle": "円",
+        "tick": "棒線図",
+        "rect": "長方形",
+        "arc": "アーク",
+        "boxplot": "ボックスプロット"
+      },
+      "stack_mode": {
+        "__enum__": "スタックモード",
+        "none": "なし",
+        "stack": "スタック",
+        "normalize": "正規化"
+      },
+      "layout_type": {
+        "__enum__": "レイアウトタイプ",
+        "auto": "自動",
+        "fixed": "固定"
+      },
+      "exploration_mode": {
+        "__enum__": "探索モード",
+        "none": "オフ",
+        "brush": "ブラシ",
+        "point": "ポイント"
+      },
+      "brush_mode": {
+        "__enum__": "ブラシの方向",
+        "default": "両方",
+        "x": "X軸のみ",
+        "y": "Y軸のみ"
+      },
+      "draggable_key": {
+        "fields": "フィールド",
+        "columns": "X軸",
+        "rows": "Y軸",
+        "color": "色",
+        "opacity": "不透明度",
+        "size": "大きさ",
+        "shape": "形状",
+        "theta": "角度",
+        "radius": "半径",
+        "filters": "フィルター"
+      },
+      "aggregator": {
+        "sum": "合計",
+        "mean": "平均",
+        "count": "件数",
+        "median": "中央値",
+        "min": "最小値",
+        "max": "最大値",
+        "q1": "第一四分位数",
+        "q3": "第三四分位数",
+        "stdev": "標準偏差",
+        "variance": "分散"
+      },
+      "filter_type": {
+        "one_of": "1つ以上",
+        "range": "範囲",
+        "temporal_range": "日付範囲"
+      }
+    },
+    "App": {
+      "labels": {
+        "data_interpretation": "データ解釈"
+      },
+      "segments": {
+        "vis": "可視化",
+        "data": "データ"
+      }
+    },
+    "DataSource": {
+      "labels": {
+        "cur_dataset": "現在のデータセット"
+      },
+      "buttons": {
+        "create_dataset": "データセットを作成",
+        "export_as_file": "ファイルとして保存",
+        "import_file": "Graphic Walkerファイルをインポート"
+      },
+      "dialog": {
+        "create_data_source": "新しいデータソース",
+        "data_types": "データソースの種類",
+        "text_file_data": "ローカルファイル",
+        "public_data": "公開データセット",
+        "data_source_type": "データソースの種類：{{sourceType}}",
+        "file": {
+          "open": "開く...",
+          "submit": "提出する",
+          "dataset_name": "データセット名",
+          "choose_file": "データファイルを選択してください",
+          "get_start_desc": "データセットの作成を始めましょう。"
+        },
+        "public": {
+          "submit": "提出する"
+        }
+      }
+    },
+    "main": {
+      "tablist": {
+        "new": "+ 新規作成",
+        "auto_title": "グラフ {{idx}}",
+        "chart_name": "グラフ名"
+      },
+      "tabpanel": {
+        "menubar": {
+          "undo": "元に戻す",
+          "redo": "やり直し"
+        },
+        "settings": {
+          "toggle": {
+            "aggregation": "集計",
+            "stack": "スタック",
+            "axes_resize": "軸のサイズ変更",
+            "debug": "デバッグ"
+          },
+          "sort": "並べ替えの順序",
+          "button": {
+            "ascending": "昇順に並べ替える",
+            "descending": "降順に並べ替える",
+            "transpose": "転置",
+            "export_chart": "エクスポート",
+            "export_chart_as": "{{type}}としてエクスポート"
+          },
+          "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": "選択を反転する",
+        "confirm": "確認",
+        "cancel": "キャンセル"
+      }
+    },
+    "explain": {
+      "lg_than": "より大きい",
+      "sm_than": "より小さい",
+      "expection": "期待値",
+      "unrecognized": "未認識",
+      "score": "スコア",
+      "contains": "を含む",
+      "reason": {
+        "selection_dim_distribution": "次元のヒント",
+        "selection_mea_distribution": "尺度のヒント",
+        "children_major_factor": "主要要因",
+        "children_outlier": "外れ値"
+      }
+    },
+    "actions": {
+      "prev": "前へ",
+      "next": "次へ",
+      "drop_field": "ここにフィールドをドロップ",
+      "confirm": "確認",
+      "cancel": "キャンセル"
+    }
+  }

package/src/locales/zh-CN.json

@@ -117,7 +117,8 @@
     "main": {
         "tablist": {
             "new": "+ 新建",
-            "autoTitle": "图表 {{idx}}"
+            "auto_title": "图表 {{idx}}",
+            "chart_name": "图表名称"
         },
         "tabpanel": {
             "menubar": {
@@ -167,7 +168,9 @@
         "btn": {
             "select_all": "全部选中",
             "unselect_all": "全部取消",
-            "reverse": "选择反向"
+            "reverse": "选择反向",
+            "confirm": "确认",
+            "cancel": "取消"
         }
     },
     "explain": {
@@ -187,6 +190,8 @@
     "actions": {
         "prev": "向前",
         "next": "向后",
-        "drop_field": "拖拽字段至此"
+        "drop_field": "拖拽字段至此",
+        "confirm": "确认",
+        "cencel": "取消"
     }
 }

package/src/main.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { GraphicWalker } from "./index";
 

package/src/models/visSpecHistory.ts

@@ -27,6 +27,14 @@ export class VisSpecWithHistory {
 
     private batchFlag = false;
 
+    public updateLatest(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>) {
+        this.snapshots[this.cursor] = {
+            ...this.snapshots[this.cursor],
+            ...snapshot,
+        }
+    }
+
+
     private commit(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>): void {
         if (this.batchFlag) {
             // batch this commit
@@ -120,6 +128,12 @@ export class VisSpecWithHistory {
         });
     }
 
+    public clone () {
+        const nextVSWH = new VisSpecWithHistory(this.frame);
+        nextVSWH.cursor = this.cursor;
+        return nextVSWH;
+    }
+
     public exportGW (): IVisSpec {
         return {
             ...this.frame