@kanaries/graphic-walker 0.3.6 → 0.3.8

package/src/renderer/specRenderer.tsx

@@ -1,11 +1,13 @@
-import { runInAction, toJS } from 'mobx';
+import { toJS } from 'mobx';
 import { Resizable } from 're-resizable';
-import React, { useCallback, forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
-import { useGlobalStore } from '../store';
+import PivotTable from '../components/pivotTable';
 import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig } from '../interfaces';
 import LoadingLayer from '../components/loadingLayer';
+import { useCurrentMediaTheme } from '../utils/media';
+import { builtInThemes } from '../vis/theme';
 
 interface SpecRendererProps {
     themeKey?: IThemeKey;
@@ -13,15 +15,20 @@ interface SpecRendererProps {
     data: IRow[];
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
-    visualConfig: IVisualConfig;
+    visualConfig: DeepReadonly<IVisualConfig>;
+    onGeomClick?: ((values: any, e: any) => void) | undefined;
+    onChartResize?: ((width: number, height: number) => void) | undefined;
 }
+/**
+ * Sans-store renderer of GraphicWalker.
+ * This is a pure component, which means it will not depend on any global state.
+ */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { themeKey, dark, data, loading, draggableFieldState, visualConfig },
+    { themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
     ref
 ) {
-    const { vizStore, commonStore } = useGlobalStore();
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, zeroScale } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -41,30 +48,59 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         [columns]
     );
 
+    const isPivotTable = geoms[0] === 'table';
+
     const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
 
-    const handleGeomClick = useCallback(
-        (values: any, e: any) => {
-            e.stopPropagation();
-            runInAction(() => {
-                commonStore.showEmbededMenu([e.pageX, e.pageY]);
-                commonStore.setFilters(values);
-            });
-        },
-        []
-    );
-    const enableResize = size.mode === 'fixed' && !hasFacet;
+    const enableResize = size.mode === 'fixed' && !hasFacet && Boolean(onChartResize);
+    const mediaTheme = useCurrentMediaTheme(dark);
+    const themeConfig = builtInThemes[themeKey ?? 'vega']?.[mediaTheme];
+
+    const vegaConfig = useMemo<VegaGlobalConfig>(() => {
+        const config: VegaGlobalConfig = {
+          ...themeConfig,
+        }
+        if (format.normalizedNumberFormat && format.normalizedNumberFormat.length > 0) {
+            // @ts-ignore
+            config.normalizedNumberFormat = format.normalizedNumberFormat;
+        }
+        if (format.numberFormat && format.numberFormat.length > 0) {
+            // @ts-ignore
+            config.numberFormat = format.numberFormat;
+        }
+        if (format.timeFormat && format.timeFormat.length > 0) {
+            // @ts-ignore
+            config.timeFormat = format.timeFormat;
+        }
+        // @ts-ignore
+        if (!config.scale) {
+            // @ts-ignore
+            config.scale = {};
+        }
+        // @ts-ignore
+        config.scale.zero = Boolean(zeroScale)
+        return config;
+      }, [themeConfig, zeroScale, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
+
+    if (isPivotTable) {
+        return (
+            <PivotTable
+                data={data}
+                draggableFieldState={draggableFieldState}
+                visualConfig={visualConfig}
+                loading={loading}
+                themeKey={themeKey}
+                dark={dark}
+            />
+        );
+    }
 
     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,
-                });
+                onChartResize?.(size.width + d.width, size.height + d.height);
             }}
             enable={
                 enableResize
@@ -87,7 +123,8 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         >
             {loading && <LoadingLayer />}
             <ReactVega
-                format={format}
+                vegaConfig={vegaConfig}
+                // format={format}
                 layoutMode={size.mode}
                 interactiveScale={interactiveScale}
                 geomType={geoms[0]}
@@ -108,9 +145,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 width={size.width - 12 * 4}
                 height={size.height - 12 * 4}
                 ref={ref}
-                onGeomClick={handleGeomClick}
-                themeKey={themeKey}
-                dark={dark}
+                onGeomClick={onGeomClick}
             />
         </Resizable>
     );

package/src/store/visualSpecStore.ts

@@ -70,6 +70,7 @@ export function initVisualConfig(): IVisualConfig {
         showActions: false,
         interactiveScale: false,
         sorted: "none",
+        zeroScale: true,
         size: {
             mode: "auto",
             width: 320,
@@ -371,14 +372,16 @@ export class VizSpecStore {
                 case configKey === "geoms" && Array.isArray(value):
                 case configKey === "size" && typeof value === "object":
                 case configKey === "sorted":
+                case configKey === "zeroScale":
                 case configKey === "stack": {
                     return (config[configKey] = value);
                 }
                 case configKey === 'format' && typeof value === "object": {
                     return config[configKey] = value
                 }
+
                 default: {
-                    console.error("unknown key" + configKey);
+                    console.error("[unknown key] " + configKey + " You should registered visualConfig at setVisualConfig");
                 }
             }
         });

package/src/vis/react-vega.tsx

@@ -1,16 +1,14 @@
 import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
-import embed, { vega } from 'vega-embed';
+import embed from 'vega-embed';
 import { Subject, Subscription } from 'rxjs'
 import * as op from 'rxjs/operators';
 import type { ScenegraphEvent, View } from 'vega';
 import styled from 'styled-components';
 
-import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey, IVisualConfig } from '../interfaces';
+import { IViewField, IRow, IStackMode, VegaGlobalConfig } from '../interfaces';
 import { useTranslation } from 'react-i18next';
 import { getVegaTimeFormatRules } from './temporalFormat';
-import { builtInThemes } from './theme';
-import { useCurrentMediaTheme } from '../utils/media';
-import { SingleViewProps, getSingleView } from './spec/view';
+import { getSingleView } from './spec/view';
 import { NULL_FIELD } from './spec/field';
 
 const CanvaContainer = styled.div<{rowSize: number; colSize: number;}>`
@@ -27,7 +25,6 @@ export interface IReactVegaHandler {
   downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
-  format: IVisualConfig['format'];
   rows: Readonly<IViewField[]>;
   columns: Readonly<IViewField[]>;
   dataSource: IRow[];
@@ -48,9 +45,7 @@ interface ReactVegaProps {
   width: number;
   height: number;
   onGeomClick?: (values: any, e: any) => void
-  /** @default "vega" */
-  themeKey?: IThemeKey;
-  dark?: IDarkMode;
+  vegaConfig: VegaGlobalConfig;
 }
 
 const click$ = new Subject<ScenegraphEvent>();
@@ -98,30 +93,31 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     width,
     height,
     details = [],
-    themeKey = 'vega',
-    dark = 'media',
-    format
+    // themeKey = 'vega',
+    // dark = 'media',
+    vegaConfig,
+    // format
   } = props;
   const [viewPlaceholders, setViewPlaceholders] = useState<React.MutableRefObject<HTMLDivElement>[]>([]);
   const { i18n } = useTranslation();
-  const mediaTheme = useCurrentMediaTheme(dark);
-  const themeConfig = builtInThemes[themeKey]?.[mediaTheme];
+  // const mediaTheme = useCurrentMediaTheme(dark);
+  // const themeConfig = builtInThemes[themeKey]?.[mediaTheme];
 
-  const vegaConfig = useMemo(() => {
-    const config: any = {
-      ...themeConfig,
-    }
-    if (format.normalizedNumberFormat && format.normalizedNumberFormat.length > 0) {
-      config.normalizedNumberFormat = format.normalizedNumberFormat;
-    }
-    if (format.numberFormat && format.numberFormat.length > 0) {
-      config.numberFormat = format.numberFormat;
-    }
-    if (format.timeFormat && format.timeFormat.length > 0) {
-      config.timeFormat = format.timeFormat;
-    }
-    return config;
-  }, [themeConfig, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
+  // const vegaConfig = useMemo(() => {
+  //   const config: any = {
+  //     ...themeConfig,
+  //   }
+  //   if (format.normalizedNumberFormat && format.normalizedNumberFormat.length > 0) {
+  //     config.normalizedNumberFormat = format.normalizedNumberFormat;
+  //   }
+  //   if (format.numberFormat && format.numberFormat.length > 0) {
+  //     config.numberFormat = format.numberFormat;
+  //   }
+  //   if (format.timeFormat && format.timeFormat.length > 0) {
+  //     config.timeFormat = format.timeFormat;
+  //   }
+  //   return config;
+  // }, [themeConfig, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
 
   useEffect(() => {
     const clickSub = geomClick$.subscribe(([values, e]) => {

package/src/vis/spec/mark.ts

@@ -7,7 +7,7 @@ import { ISemanticType } from "../../interfaces";
  */
 export function autoMark(semanticTypeList: ISemanticType[]): string {
     if (semanticTypeList.length < 2) {
-        if (semanticTypeList[0] === "temporal") return "tick";
+        if (semanticTypeList[0] === "temporal" || semanticTypeList[0] === 'quantitative') return "tick";
         return "bar";
     }
     const couter: Map<ISemanticType, number> = new Map();

package/src/vis/spec/tooltip.ts

@@ -1,6 +1,7 @@
 import { IViewField } from "../../interfaces";
+import { getMeaAggKey } from "../../utils";
 
-export function addTooltipEncode (encoding: {[key: string]: any}, details: Readonly<IViewField[]> = []) {
+export function addTooltipEncode (encoding: {[key: string]: any}, details: Readonly<IViewField[]> = [], defaultAggregated = false) {
     const encs = Object.keys(encoding).filter(ck => ck !== 'tooltip').map(ck => {
         return {
             field: encoding[ck].field,
@@ -8,8 +9,8 @@ export function addTooltipEncode (encoding: {[key: string]: any}, details: Reado
             title: encoding[ck].title
         }
     }).concat(details.map(f => ({
-        field: f.fid,
-        title: f.name,
+        field: defaultAggregated ? getMeaAggKey(f.fid, f.aggName) : f.fid,
+        title: defaultAggregated && f.aggName ? `${f.aggName}(${f.name})` : f.name,
         type: f.semanticType
     })))
     encoding.tooltip = encs

package/src/vis/spec/view.ts

@@ -64,10 +64,10 @@ export function getSingleView(props: SingleViewProps) {
         details,
         text
     });
-    addTooltipEncode(encoding, details)
     if (defaultAggregated) {
         channelAggregate(encoding, fields);
     }
+    addTooltipEncode(encoding, details, defaultAggregated);
     channelStack(encoding, stack);
     const mark = {
         type: markType,

package/dist/utils/autoMark.d.ts

@@ -1,7 +0,0 @@
-import { ISemanticType } from "../interfaces";
-/**
- *
- * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来
- * @returns geom(mark) type
- */
-export declare function autoMark(semanticTypeList: ISemanticType[]): string;

package/src/utils/autoMark.ts

@@ -1,30 +0,0 @@
-import { ISemanticType } from "../interfaces";
-
-/**
- *
- * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来
- * @returns geom(mark) type
- */
-export function autoMark(semanticTypeList: ISemanticType[]): string {
-    if (semanticTypeList.length < 2) {
-        if (semanticTypeList[0] === "temporal") return "tick";
-        return "bar";
-    }
-    const couter: Map<ISemanticType, number> = new Map();
-    (["nominal", "ordinal", "quantitative", "temporal"] as ISemanticType[]).forEach((s) => {
-        couter.set(s, 0);
-    });
-    for (let st of semanticTypeList) {
-        couter.set(st, couter.get(st)! + 1);
-    }
-    if (couter.get("nominal") === 1 || couter.get("ordinal") === 1) {
-        return "bar";
-    }
-    if (couter.get("temporal") === 1 && couter.get("quantitative") === 1) {
-        return "line";
-    }
-    if (couter.get("quantitative") === 2) {
-        return "point";
-    }
-    return "point";
-}