@kanaries/graphic-walker 0.2.13 → 0.2.15

package/src/locales/en-US.json

@@ -50,8 +50,8 @@
         },
         "draggable_key": {
             "fields": "Fields",
-            "columns": "Columns",
-            "rows": "Rows",
+            "columns": "X-Axis",
+            "rows": "Y-Axis",
             "color": "Color",
             "opacity": "Opacity",
             "size": "Size",
@@ -105,7 +105,9 @@
             "file": {
                 "open": "Open...",
                 "submit": "Submit",
-                "dataset_name": "Dataset Name"
+                "dataset_name": "Dataset Name",
+                "choose_file": "Choose a Data File",
+                "get_start_desc": "Get started by creating a dataset."
             },
             "public": {
                 "submit": "Submit"
@@ -165,7 +167,9 @@
         "btn": {
             "select_all": "Select All",
             "unselect_all": "Unselect All",
-            "reverse": "Reverse Selection"
+            "reverse": "Reverse Selection",
+            "confirm": "Confirm",
+            "cancel": "Cancel"
         }
     },
     "explain": {
@@ -184,6 +188,8 @@
     },
     "actions": {
         "prev": "Previous",
-        "next": "Next"
+        "next": "Next",
+        "drop_field": "Drop Field Here",
+        "confirm": "Confirm"
     }
 }

package/src/locales/i18n.ts

@@ -3,6 +3,7 @@ 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';
 
 
@@ -19,6 +20,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,195 @@
+{
+    "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": "+ 新規作成",
+        "autoTitle": "グラフ {{idx}}"
+      },
+      "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": "確認"
+    }
+  }

package/src/locales/zh-CN.json

@@ -105,7 +105,9 @@
             "file": {
                 "open": "打开文件...",
                 "submit": "确认",
-                "dataset_name": "数据集名称"
+                "dataset_name": "数据集名称",
+                "choose_file": "选择文件",
+                "get_start_desc": "创建一个数据集以开始分析"
             },
             "public": {
                 "submit": "确认"
@@ -165,7 +167,9 @@
         "btn": {
             "select_all": "全部选中",
             "unselect_all": "全部取消",
-            "reverse": "选择反向"
+            "reverse": "选择反向",
+            "confirm": "确认",
+            "cancel": "取消"
         }
     },
     "explain": {
@@ -184,6 +188,8 @@
     },
     "actions": {
         "prev": "向前",
-        "next": "向后"
+        "next": "向后",
+        "drop_field": "拖拽字段至此",
+        "confirm": "确认"
     }
 }

package/src/main.tsx

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

package/src/renderer/index.tsx

@@ -1,44 +1,50 @@
-import { runInAction, toJS } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { Resizable } from 're-resizable';
-import React, { useState, useCallback, useEffect, useRef, forwardRef } from 'react';
-import { applyFilter } from '../services';
-import { useGlobalStore } from '../store';
-import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
+import { runInAction, toJS } from "mobx";
+import { observer } from "mobx-react-lite";
+import { Resizable } from "re-resizable";
+import React, { useState, useCallback, useEffect, useRef, forwardRef } from "react";
+import { applyFilter } from "../services";
+import { useGlobalStore } from "../store";
+import ReactVega, { IReactVegaHandler } from "../vis/react-vega";
+import { IDarkMode, IThemeKey } from "../interfaces";
 
-
-const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRenderer (props, ref) {
+const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: IThemeKey; dark?: IDarkMode }>(function ReactiveRenderer(
+    { themeKey, dark },
+    ref
+) {
     const { vizStore, commonStore } = useGlobalStore();
     const { draggableFieldState, visualConfig } = vizStore;
     const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
     const { currentDataset } = commonStore;
     const { filters } = draggableFieldState;
 
-    const rows = toJS(draggableFieldState.rows)
-    const columns = toJS(draggableFieldState.columns)
-    const color = toJS(draggableFieldState.color)
-    const opacity = toJS(draggableFieldState.opacity)
-    const shape = toJS(draggableFieldState.shape)
-    const theta = toJS(draggableFieldState.theta)
-    const radius = toJS(draggableFieldState.radius)
-    const sizeChannel = toJS(draggableFieldState.size)
+    const rows = toJS(draggableFieldState.rows);
+    const columns = toJS(draggableFieldState.columns);
+    const color = toJS(draggableFieldState.color);
+    const opacity = toJS(draggableFieldState.opacity);
+    const shape = toJS(draggableFieldState.shape);
+    const theta = toJS(draggableFieldState.theta);
+    const radius = toJS(draggableFieldState.radius);
+    const sizeChannel = toJS(draggableFieldState.size);
 
-    const rowLeftFacetFields = rows.slice(0, -1).filter(f => f.analyticType === 'dimension');
-    const colLeftFacetFields = columns.slice(0, -1).filter(f => f.analyticType === 'dimension');
+    const rowLeftFacetFields = rows.slice(0, -1).filter((f) => f.analyticType === "dimension");
+    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 handleGeomClick = useCallback((values: any, e: any) => {
-        if (shouldTriggerMenu) {
-            e.stopPropagation();
-            runInAction(() => {
-                commonStore.showEmbededMenu([e.pageX, e.pageY])
-                commonStore.setFilters(values);
-            });
-        }
-    }, [shouldTriggerMenu]);
+    const shouldTriggerMenu = exploration.mode === "none";
+
+    const handleGeomClick = useCallback(
+        (values: any, e: any) => {
+            if (shouldTriggerMenu) {
+                e.stopPropagation();
+                runInAction(() => {
+                    commonStore.showEmbededMenu([e.pageX, e.pageY]);
+                    commonStore.setFilters(values);
+                });
+            }
+        },
+        [shouldTriggerMenu]
+    );
 
     // apply filters
     const { dataSource } = currentDataset;
@@ -54,14 +60,14 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRend
         const p = filters.length === 0 ? Promise.resolve(dataSource) : applyFilter(dataSource, filters);
         pendingPromiseRef.current = p;
 
-        p.then(d => {
+        p.then((d) => {
             if (p !== pendingPromiseRef.current) {
                 // This promise is out-of-date
                 return;
             }
 
             setData(d);
-        }).catch(err => {
+        }).catch((err) => {
             console.error(err);
         });
 
@@ -69,44 +75,64 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRend
             pendingPromiseRef.current = null;
         };
     }, [dataSource, filters]);
-
-    return <Resizable className={(size.mode === 'fixed' && !hasFacet) ? "border-blue-400 border-2 overflow-hidden" : ""}
-    style={{ padding: '12px' }}
-    onResizeStop={(e, direction, ref, d) => {
-        vizStore.setChartLayout({
-            mode: 'fixed',
-            width: size.width + d.width,
-            height: size.height + d.height
-        })
-    }}
-    size={{
-        width: size.width + 'px',
-        height: size.height + 'px',
-    }}>
-        <ReactVega
-        layoutMode={size.mode}
-        interactiveScale={interactiveScale}
-        geomType={geoms[0]}
-        defaultAggregate={defaultAggregated}
-        stack={stack}
-        dataSource={data}
-        rows={rows}
-        columns={columns}
-        color={color[0]}
-        theta={theta[0]}
-        radius={radius[0]}
-        shape={shape[0]}
-        opacity={opacity[0]}
-        size={sizeChannel[0]}
-        showActions={showActions}
-        width={size.width - 12 * 4}
-        height={size.height - 12 * 4}
-        ref={ref}
-        brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
-        selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
-        onGeomClick={handleGeomClick}
-    />
-    </Resizable>
+    const enableResize = size.mode === "fixed" && !hasFacet;
+    return (
+        <Resizable
+            className={enableResize ? "border-blue-400 border-2 overflow-hidden" : ""}
+            style={{ padding: "12px" }}
+            onResizeStop={(e, direction, ref, d) => {
+                vizStore.setChartLayout({
+                    mode: "fixed",
+                    width: size.width + d.width,
+                    height: size.height + d.height,
+                });
+            }}
+            enable={
+                enableResize
+                    ? undefined
+                    : {
+                          top: false,
+                          right: false,
+                          bottom: false,
+                          left: false,
+                          topRight: false,
+                          bottomRight: false,
+                          bottomLeft: false,
+                          topLeft: false,
+                      }
+            }
+            size={{
+                width: size.width + "px",
+                height: size.height + "px",
+            }}
+        >
+            <ReactVega
+                layoutMode={size.mode}
+                interactiveScale={interactiveScale}
+                geomType={geoms[0]}
+                defaultAggregate={defaultAggregated}
+                stack={stack}
+                dataSource={data}
+                rows={rows}
+                columns={columns}
+                color={color[0]}
+                theta={theta[0]}
+                radius={radius[0]}
+                shape={shape[0]}
+                opacity={opacity[0]}
+                size={sizeChannel[0]}
+                showActions={showActions}
+                width={size.width - 12 * 4}
+                height={size.height - 12 * 4}
+                ref={ref}
+                brushEncoding={exploration.mode === "brush" ? exploration.brushDirection : "none"}
+                selectEncoding={exploration.mode === "point" ? "default" : "none"}
+                onGeomClick={handleGeomClick}
+                themeKey={themeKey}
+                dark={dark}
+            />
+        </Resizable>
+    );
 });
 
 export default observer(ReactiveRenderer);

package/src/store/visualSpecStore.ts

@@ -53,6 +53,7 @@ function initEncoding(): DraggableFieldState {
         shape: [],
         radius: [],
         theta: [],
+        details: [],
         filters: [],
     };
 }
@@ -444,6 +445,21 @@ export class VizSpecStore {
             fields.splice(sourceIndex, 1);
         });
     }
+    public replaceField(sourceKey: keyof DraggableFieldState, sourceIndex: number, fid: string) {
+        if (MetaFieldKeys.includes(sourceKey)) return;
+        const enteringField = [
+            ...this.draggableFieldState.dimensions,
+            ...this.draggableFieldState.measures
+        ].find(which => which.fid === fid);
+        if (!enteringField) {
+            return;
+        }
+
+        this.useMutable(({ encodings }) => {
+            const fields = encodings[sourceKey];
+            fields.splice(sourceIndex, 1, toJS(enteringField));
+        });
+    }
     private appendFilter(index: number, data: IViewField) {
         this.useMutable(({ encodings }) => {
             encodings.filters.splice(index, 0, {

package/src/utils/index.ts

@@ -258,3 +258,22 @@ export function extendCountField(
         fields: nextFields,
     };
 }
+
+export function getRange (nums: number[]): [number, number] {
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (let i = 0; i < nums.length; i++) {
+        _min = Math.min(_min, nums[i]);
+        _max = Math.max(_max, nums[i]);
+    }
+    return [_min, _max];
+}
+
+export function makeNumbersBeautiful (nums: number[]): number[] {
+    const [min, max] = getRange(nums);
+    const range = max - min;
+    const step = Math.pow(10, Math.floor(Math.log10(range)));
+    return nums.map((num) => {
+        return Math.round(num / step) * step;
+    })
+}

package/src/utils/media.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { IDarkMode } from "../interfaces";
+
+export function currentMediaTheme(): "dark" | "light" {
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+    } else {
+        return "light";
+    }
+}
+
+export function useCurrentMediaTheme(mode: IDarkMode | undefined = 'media'): "dark" | "light" {
+    const [theme, setTheme] = useState<"dark" | "light">(mode === 'media' ? currentMediaTheme() : mode);
+
+    useEffect(() => {
+        if (mode === 'media') {
+            const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)") as MediaQueryList | undefined;
+            const listener = (e: MediaQueryListEvent) => {
+                setTheme(e.matches ? "dark" : "light");
+            };
+            mediaQuery?.addEventListener("change", listener);
+            return () => {
+                mediaQuery?.removeEventListener("change", listener);
+            };
+        } else {
+            setTheme(mode);
+        }
+    }, [mode]);
+
+    return theme;
+}

package/src/utils/normalization.ts

@@ -140,12 +140,13 @@ export function makeBinField(dataSource: IRow[], fid: string, binFid: string, bi
         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[fid] - _min) / step);
         if (bIndex === binSize) bIndex = binSize - 1;
         return {
             ...r,
-            [binFid]: bIndex * step + _min,
+            [binFid]: Number(((bIndex * step + _min)).toFixed(beaStep)),
         };
     });
 }