@kanaries/graphic-walker 0.2.14 → 0.2.15

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

@@ -167,7 +167,9 @@
         "btn": {
             "select_all": "全部选中",
             "unselect_all": "全部取消",
-            "reverse": "选择反向"
+            "reverse": "选择反向",
+            "confirm": "确认",
+            "cancel": "取消"
         }
     },
     "explain": {
@@ -187,6 +189,7 @@
     "actions": {
         "prev": "向前",
         "next": "向后",
-        "drop_field": "拖拽字段至此"
+        "drop_field": "拖拽字段至此",
+        "confirm": "确认"
     }
 }

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, { themeKey?: 'vega' | 'g2' }>(function ReactiveRenderer ({ themeKey }, 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, { themeKey?: 'vega' | 'g2
         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,45 +75,64 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: 'vega' | 'g2
             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}
-        themeKey={themeKey}
-    />
-    </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/utils/media.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { IDarkMode } from "../interfaces";
 
 export function currentMediaTheme(): "dark" | "light" {
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
@@ -8,19 +9,23 @@ export function currentMediaTheme(): "dark" | "light" {
     }
 }
 
-export function useCurrentMediaTheme(): "dark" | "light" {
-    const [theme, setTheme] = useState<"dark" | "light">(currentMediaTheme());
+export function useCurrentMediaTheme(mode: IDarkMode | undefined = 'media'): "dark" | "light" {
+    const [theme, setTheme] = useState<"dark" | "light">(mode === 'media' ? currentMediaTheme() : mode);
 
     useEffect(() => {
-        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);
-        };
-    }, []);
+        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/vis/react-vega.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import { autoMark } from '../utils/autoMark';
 import { COUNT_FIELD_ID } from '../constants';
 
-import { IViewField, IRow, IStackMode } from '../interfaces';
+import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } from '../interfaces';
 import { useTranslation } from 'react-i18next';
 import { getVegaTimeFormatRules } from './temporalFormat';
 import { builtInThemes } from './theme';
@@ -49,7 +49,8 @@ interface ReactVegaProps {
   selectEncoding: SingleViewProps['selectEncoding'];
   brushEncoding: SingleViewProps['brushEncoding'];
   /** @default "vega" */
-  themeKey?: 'vega' | 'g2';
+  themeKey?: IThemeKey;
+  dark?: IDarkMode;
 }
 const NULL_FIELD: IViewField = {
   dragId: '',
@@ -104,6 +105,7 @@ interface SingleViewProps {
   asCrossFilterTrigger: boolean;
   selectEncoding: 'default' | 'none';
   brushEncoding: 'x' | 'y' | 'default' | 'none';
+  hideLegend?: boolean;
 }
 
 function availableChannels (geomType: string): Set<string> {
@@ -202,9 +204,16 @@ function getSingleView(props: SingleViewProps) {
     brushEncoding,
     enableCrossFilter,
     asCrossFilterTrigger,
+    hideLegend = false,
   } = props
   const fields: IViewField[] = [x, y, color, opacity, size, shape, row, column, xOffset, yOffset, theta, radius]
   let markType = geomType;
+  let config: any = {};
+  if (hideLegend) {
+    config.legend = {
+      disable: true
+    };
+  }
   if (geomType === 'auto') {
     const types: ISemanticType[] = [];
     if (x !== NULL_FIELD) types.push(x.semanticType)//types.push(getFieldType(x));
@@ -219,6 +228,7 @@ function getSingleView(props: SingleViewProps) {
   channelStack(encoding, stack);
   if (!enableCrossFilter || brushEncoding === 'none' && selectEncoding === 'none') {
     return {
+      config,
       mark: {
         type: markType,
         opacity: 0.96,
@@ -326,6 +336,7 @@ function getSingleView(props: SingleViewProps) {
 
   if (brushEncoding !== 'none') {
     return {
+      config,
       transform: asCrossFilterTrigger ? [] : [
         { filter: { param: BRUSH_SIGNAL_NAME } }
       ],
@@ -346,6 +357,7 @@ function getSingleView(props: SingleViewProps) {
   }
 
   return {
+    config,
     transform: asCrossFilterTrigger ? [] : [
       { filter: { param: POINT_SIGNAL_NAME } }
     ],
@@ -391,12 +403,13 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     selectEncoding,
     brushEncoding,
     themeKey = 'vega',
+    dark = 'media'
   } = props;
   // const container = useRef<HTMLDivElement>(null);
   // const containers = useRef<(HTMLDivElement | null)[]>([]);
   const [viewPlaceholders, setViewPlaceholders] = useState<React.MutableRefObject<HTMLDivElement>[]>([]);
   const { i18n } = useTranslation();
-  const mediaTheme = useCurrentMediaTheme();
+  const mediaTheme = useCurrentMediaTheme(dark);
   const themeConfig = builtInThemes[themeKey]?.[mediaTheme];
   useEffect(() => {
     const clickSub = geomClick$.subscribe(([values, e]) => {
@@ -553,6 +566,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
       for (let i = 0; i < rowRepeatFields.length; i++) {
         for (let j = 0; j < colRepeatFields.length; j++, index++) {
           const sourceId = index;
+          const hasLegend = i === 0 && j === colRepeatFields.length - 1;
           const singleView = getSingleView({
             x: colRepeatFields[j] || NULL_FIELD,
             y: rowRepeatFields[i] || NULL_FIELD,
@@ -573,6 +587,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             brushEncoding,
             enableCrossFilter: crossFilterTriggerIdx !== -1,
             asCrossFilterTrigger: crossFilterTriggerIdx === sourceId,
+            hideLegend: !hasLegend,
           });
           const node = i * colRepeatFields.length + j < viewPlaceholders.length ? viewPlaceholders[i * colRepeatFields.length + j].current : null
           let commonSpec = { ...spec };

package/src/vis/theme.ts

@@ -1,22 +1,30 @@
 const DEFAULT_COLOR = "#5B8FF9";
-
+const DARK_COMMON_DESIGN = {
+    background: "transparent",
+    header: {
+        titleColor: "#d1d5db", // change title color to white
+        labelColor: "#d1d5db", // change label color to white
+    },
+    axis: {
+        gridColor: "#666",
+        domainColor: "#d1d5db", // change axis color to white
+        tickColor: "#d1d5db", // change tick color to white
+        labelColor: "#d1d5db", // change label color to white
+        titleColor: "#d1d5db", // change title color to white
+    },
+    legend: {
+        labelColor: "#d1d5db", // change legend label color to white
+        titleColor: "#d1d5db" // change legend title color to white
+    },
+    view: {
+        stroke: '#666'
+    }
+}
 export const VegaTheme = {
     light: {
         background: "transparent",
     },
-    dark: {
-        background: "transparent",
-        axis: {
-            gridColor: "#666",
-            domainColor: "#d1d5db", // change axis color to white
-            tickColor: "#d1d5db", // change tick color to white
-            labelColor: "#d1d5db", // change label color to white
-        },
-        legend: {
-            labelColor: "#d1d5db", // change legend label color to white
-            titleColor: "#d1d5db" // change legend title color to white
-        },
-    },
+    dark: DARK_COMMON_DESIGN
 } as const;
 
 export const AntVTheme = {
@@ -65,6 +73,7 @@ export const AntVTheme = {
         },
     },
     dark: {
+        ...DARK_COMMON_DESIGN,
         area: { fill: DEFAULT_COLOR },
         bar: { fill: DEFAULT_COLOR },
         circle: { fill: DEFAULT_COLOR },
@@ -76,17 +85,6 @@ export const AntVTheme = {
         errorbar: { stroke: DEFAULT_COLOR },
         errorband: { fill: DEFAULT_COLOR },
         arc: { fill: DEFAULT_COLOR },
-        background: "transparent", // change background color to dark gray
-        axis: {
-            gridColor: "#666",
-            domainColor: "#d1d5db", // change axis color to white
-            tickColor: "#d1d5db", // change tick color to white
-            labelColor: "#d1d5db", // change label color to white
-        },
-        legend: {
-            labelColor: "#d1d5db", // change legend label color to white
-            titleColor: "#d1d5db" // change legend title color to white
-        },
         range: {
             category: [
                 "#5B8FF9",