@kanaries/graphic-walker 0.3.4 → 0.3.5

package/src/locales/ja-JP.json

@@ -1,197 +1,206 @@
 {
+    "config": {
+        "format": "形式",
+        "numberFormat": "数字の形式",
+        "timeFormat": "時間の形式",
+        "normalizedNumberFormat": "正規化された数字の形式"
+    },
     "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": "日付範囲"
-      }
+        "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": "ボックスプロット",
+            "table": "表",
+            "text": "本文"
+        },
+        "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": "フィルター",
+            "text": "本文"
+        },
+        "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": "データ"
-      }
+        "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": "データセットの作成を始めましょう。"
+        "labels": {
+            "cur_dataset": "現在のデータセット"
+        },
+        "buttons": {
+            "create_dataset": "データセットを作成",
+            "export_as_file": "ファイルとして保存",
+            "import_file": "Graphic Walkerファイルをインポート"
         },
-        "public": {
-          "submit": "提出する"
+        "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": "高さ"
-          }
+        "tablist": {
+            "new": "+ 新規作成",
+            "auto_title": "グラフ {{idx}}",
+            "chart_name": "グラフ名"
         },
-        "DatasetFields": {
-          "field_list": "フィールド一覧"
+        "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": "キャンセル"
-      }
+        "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": "外れ値"
-      }
+        "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": "キャンセル"
+        "prev": "前へ",
+        "next": "次へ",
+        "drop_field": "ここにフィールドをドロップ",
+        "confirm": "確認",
+        "cancel": "キャンセル"
     }
-  }
+}

package/src/locales/zh-CN.json

@@ -1,4 +1,10 @@
 {
+    "config": {
+        "format": "格式",
+        "numberFormat": "数字格式",
+        "timeFormat": "时间格式",
+        "normalizedNumberFormat": "标准化数字格式"
+    },
     "constant": {
         "row_count": "行数",
         "analytic_type": {
@@ -23,7 +29,9 @@
             "tick": "标记",
             "rect": "矩形",
             "arc": "弧形",
-            "boxplot": "统计箱"
+            "boxplot": "统计箱",
+            "table": "表格",
+            "text": "文本"
         },
         "layout_type": {
             "__enum__": "尺寸模式",
@@ -59,7 +67,8 @@
             "theta": "角度",
             "radius": "半径",
             "filters": "筛选器",
-            "details": "信息"
+            "details": "信息",
+            "text": "文本"
         },
         "aggregator": {
             "sum": "求和",

package/src/renderer/index.tsx

@@ -8,6 +8,8 @@ import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
 import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
+import PivotTable from '../components/pivotTable';
+import { getMeaAggKey } from '../utils';
 
 interface RendererProps {
     themeKey?: IThemeKey;
@@ -24,7 +26,6 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
     const [encodings, setEncodings] = useState<DeepReadonly<DraggableFieldState>>(initEncoding);
 
     const [viewData, setViewData] = useState<IRow[]>([]);
-
     useEffect(() => {
         setWaiting(true);
         applyFilter(dataSource, viewFilters)
@@ -37,7 +38,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
                 return applyViewQuery(d, dims.concat(meas), {
                     op: config.defaultAggregated ? 'aggregate' : 'raw',
                     groupBy: dims.map((f) => f.fid),
-                    agg: Object.fromEntries(meas.map((f) => [f.fid, f.aggName as any])),
+                    measures: meas.map((f) => ({ field: f.fid, agg: f.aggName as any, asFieldKey: getMeaAggKey(f.fid, f.aggName!) })),
                 });
             })
             .then((data) => {
@@ -54,6 +55,19 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             });
     }, [dataSource, viewFilters, allFields, viewDimensions, viewMeasures]);
 
+    if (viewConfig.geoms.includes('table')) {
+        return (
+            <PivotTable
+                data={viewData}
+                draggableFieldState={encodings}
+                visualConfig={viewConfig}
+                loading={waiting}
+                themeKey={themeKey}
+                dark={dark}
+            />
+        );
+    }
+
     return (
         <SpecRenderer
             loading={waiting}

package/src/renderer/specRenderer.tsx

@@ -1,4 +1,4 @@
-import { runInAction } from 'mobx';
+import { runInAction, toJS } from 'mobx';
 import { Resizable } from 're-resizable';
 import React, { useCallback, forwardRef, useMemo } from 'react';
 
@@ -21,7 +21,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 ) {
     const { vizStore, commonStore } = useGlobalStore();
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -32,6 +32,8 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
     const radius = draggableFieldState.radius;
     const sizeChannel = draggableFieldState.size;
     const details = draggableFieldState.details;
+    const text = draggableFieldState.text;
+    const format = toJS(_format)
 
     const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
     const colLeftFacetFields = useMemo(
@@ -85,6 +87,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         >
             {loading && <LoadingLayer />}
             <ReactVega
+                format={format}
                 layoutMode={size.mode}
                 interactiveScale={interactiveScale}
                 geomType={geoms[0]}
@@ -100,6 +103,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 opacity={opacity[0]}
                 size={sizeChannel[0]}
                 details={details}
+                text={text[0]}
                 showActions={showActions}
                 width={size.width - 12 * 4}
                 height={size.height - 12 * 4}

package/src/store/commonStore.ts

@@ -14,6 +14,7 @@ export class CommonStore {
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
     public showDataConfig: boolean = false;
     public showCodeExportPanel: boolean = false;
+    public showVisualConfigPanel: boolean = false;
     public filters: Filters = {};
     public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
@@ -64,6 +65,9 @@ export class CommonStore {
     public setShowCodeExportPanel (show: boolean) {
         this.showCodeExportPanel = show;
     }
+    public setShowVisualConfigPanel (show: boolean) {
+        this.showVisualConfigPanel = show;
+    }
     public closeEmbededMenu () {
         this.vizEmbededMenu.show = false;
     }

package/src/store/visualSpecStore.ts

@@ -58,6 +58,7 @@ export function initEncoding(): DraggableFieldState {
         theta: [],
         details: [],
         filters: [],
+        text: [],
     };
 }
 
@@ -74,6 +75,11 @@ export function initVisualConfig(): IVisualConfig {
             width: 320,
             height: 200,
         },
+        format: {
+            numberFormat: undefined,
+            timeFormat: undefined,
+            normalizedNumberFormat: undefined
+        }
     };
 }
 
@@ -368,6 +374,9 @@ export class VizSpecStore {
                 case configKey === "stack": {
                     return (config[configKey] = value);
                 }
+                case configKey === 'format' && typeof value === "object": {
+                    return config[configKey] = value
+                }
                 default: {
                     console.error("unknown key" + configKey);
                 }
@@ -619,6 +628,9 @@ export class VizSpecStore {
             encodings[destinationKey].push(cloneField);
         });
     }
+    public setVizFormatConfig (formatKey: keyof IVisualConfig['format'], value?: string) {
+        this.visualConfig[formatKey] = value
+    }
     public renderSpec(spec: Specification) {
         const tab = this.visList[this.visIndex];
 

package/src/utils/index.ts

@@ -275,4 +275,11 @@ export function makeNumbersBeautiful (nums: number[]): number[] {
 
 export function classNames(...classes: string[]) {
     return classes.filter(Boolean).join(' ')
+}
+
+export function getMeaAggKey (meaKey: string, agg?: string | undefined) {
+    if (!agg) {
+        return meaKey;
+    }
+    return `${meaKey}_${agg}`;
 }