@kanaries/graphic-walker 0.3.6 → 0.3.7

package/dist/interfaces.d.ts

@@ -1,3 +1,5 @@
+import { Config as VgConfig } from 'vega';
+import { Config as VlConfig } from 'vega-lite';
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
@@ -164,6 +166,7 @@ export interface IVisualConfig {
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
+    zeroScale: boolean;
     format: {
         numberFormat?: string;
         timeFormat?: string;
@@ -187,3 +190,4 @@ export declare enum ISegmentKey {
 }
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
+export type VegaGlobalConfig = VgConfig | VlConfig;

package/dist/vis/react-vega.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey, IVisualConfig } from '../interfaces';
+import { IViewField, IRow, IStackMode, VegaGlobalConfig } from '../interfaces';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -7,7 +7,6 @@ export interface IReactVegaHandler {
     downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
-    format: IVisualConfig['format'];
     rows: Readonly<IViewField[]>;
     columns: Readonly<IViewField[]>;
     dataSource: IRow[];
@@ -28,9 +27,7 @@ interface ReactVegaProps {
     width: number;
     height: number;
     onGeomClick?: (values: any, e: any) => void;
-    /** @default "vega" */
-    themeKey?: IThemeKey;
-    dark?: IDarkMode;
+    vegaConfig: VegaGlobalConfig;
 }
 declare const ReactVega: React.ForwardRefExoticComponent<ReactVegaProps & React.RefAttributes<IReactVegaHandler>>;
 export default ReactVega;

package/dist/vis/spec/tooltip.d.ts

@@ -1,4 +1,4 @@
 import { IViewField } from "../../interfaces";
 export declare function addTooltipEncode(encoding: {
     [key: string]: any;
-}, details?: Readonly<IViewField[]>): void;
+}, details?: Readonly<IViewField[]>, defaultAggregated?: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/components/toggle.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Switch } from '@headlessui/react';
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ');
+}
+
+interface ToggleProps {
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    label?: string;
+}
+
+export default function Toggle(props: ToggleProps) {
+    const { enabled, onChange, label } = props;
+
+    return (
+        <Switch.Group as="div" className="flex items-center">
+            <Switch
+                checked={enabled}
+                onChange={onChange}
+                className={classNames(
+                    enabled ? 'bg-indigo-600' : 'bg-gray-200',
+                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+                )}
+            >
+                <span
+                    aria-hidden="true"
+                    className={classNames(
+                        enabled ? 'translate-x-5' : 'translate-x-0',
+                        'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                    )}
+                />
+            </Switch>
+            <Switch.Label as="span" className="ml-3 text-sm">
+                <span className="font-medium text-gray-900">{label}</span>
+            </Switch.Label>
+        </Switch.Group>
+    );
+}

package/src/components/visualConfig/index.tsx

@@ -6,6 +6,8 @@ import { IVisualConfig } from '../../interfaces';
 import PrimaryButton from '../button/primary';
 import DefaultButton from '../button/default';
 import { useTranslation } from 'react-i18next';
+import Toggle from '../toggle';
+import { runInAction } from 'mobx';
 
 const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
@@ -22,6 +24,7 @@ const VisualConfigPanel: React.FC = (props) => {
         timeFormat: visualConfig.format.timeFormat,
         normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
     });
+    const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
 
     return (
         <Modal
@@ -31,8 +34,17 @@ const VisualConfigPanel: React.FC = (props) => {
             }}
         >
             <div>
-                <h2 className='text-lg mb-4'>{t('config.format')}</h2>
-                <p className='text-xs'>Format guides docs: <a target="_blank" className='underline text-blue-500' href="https://github.com/d3/d3-format#locale_format">read here</a></p>
+                <h2 className="text-lg mb-4">{t('config.format')}</h2>
+                <p className="text-xs">
+                    Format guides docs:{' '}
+                    <a
+                        target="_blank"
+                        className="underline text-blue-500"
+                        href="https://github.com/d3/d3-format#locale_format"
+                    >
+                        read here
+                    </a>
+                </p>
                 {formatConfigList.map((fc) => (
                     <div className="my-2" key={fc}>
                         <label className="block text-xs font-medium leading-6 text-gray-900">{t(`config.${fc}`)}</label>
@@ -51,18 +63,30 @@ const VisualConfigPanel: React.FC = (props) => {
                         </div>
                     </div>
                 ))}
-                <div className='mt-4'>
+                <div className="my-2">
+                    <Toggle
+                        label="zero scale"
+                        enabled={zeroScale}
+                        onChange={(en) => {
+                            setZeroScale(en);
+                        }}
+                    />
+                </div>
+                <div className="mt-4">
                     <PrimaryButton
                         text={t('actions.confirm')}
-                        className='mr-2'
+                        className="mr-2"
                         onClick={() => {
-                            vizStore.setVisualConfig('format', format);
-                            commonStore.setShowVisualConfigPanel(false);
+                            runInAction(() => {
+                                vizStore.setVisualConfig('format', format);
+                                vizStore.setVisualConfig('zeroScale', zeroScale);
+                                commonStore.setShowVisualConfigPanel(false);
+                            })
                         }}
                     />
                     <DefaultButton
                         text={t('actions.cancel')}
-                        className='mr-2'
+                        className="mr-2"
                         onClick={() => {
                             commonStore.setShowVisualConfigPanel(false);
                         }}

package/src/interfaces.ts

@@ -1,3 +1,6 @@
+import {Config as VgConfig} from 'vega';
+import {Config as VlConfig} from 'vega-lite';
+
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
@@ -192,6 +195,7 @@ export interface IVisualConfig {
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
+    zeroScale: boolean;
     format: {
         numberFormat?: string;
         timeFormat?: string;
@@ -218,3 +222,5 @@ export enum ISegmentKey {
 
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
+
+export type VegaGlobalConfig = VgConfig | VlConfig;

package/src/renderer/specRenderer.tsx

@@ -4,8 +4,10 @@ import React, { useCallback, forwardRef, useMemo } from 'react';
 
 import { useGlobalStore } from '../store';
 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;
@@ -21,7 +23,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 ) {
     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;
@@ -54,6 +56,34 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         []
     );
     const enableResize = size.mode === 'fixed' && !hasFacet;
+    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])
 
     return (
         <Resizable
@@ -87,7 +117,8 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         >
             {loading && <LoadingLayer />}
             <ReactVega
-                format={format}
+                vegaConfig={vegaConfig}
+                // format={format}
                 layoutMode={size.mode}
                 interactiveScale={interactiveScale}
                 geomType={geoms[0]}
@@ -109,8 +140,6 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 height={size.height - 12 * 4}
                 ref={ref}
                 onGeomClick={handleGeomClick}
-                themeKey={themeKey}
-                dark={dark}
             />
         </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/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,