feat: add background&independence control

packages/graphic-walker/src/components/toggle.tsx

@@ -20,7 +20,7 @@ export default function Toggle(props: ToggleProps) {
                 checked={enabled}
                 onChange={onChange}
                 className={classNames(
-                    enabled ? 'bg-indigo-600' : 'bg-gray-200',
+                    enabled ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-700',
                     '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'
                 )}
             >
@@ -33,7 +33,7 @@ export default function Toggle(props: ToggleProps) {
                 />
             </Switch>
             <Switch.Label as="span" className="ml-3 text-sm">
-                <span className="font-medium text-gray-900">{label}</span>
+                <span className="font-medium">{label}</span>
             </Switch.Label>
         </Switch.Group>
     );

packages/graphic-walker/src/components/visualConfig/index.tsx

@@ -1,13 +1,15 @@
 import { observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useGlobalStore } from '../../store';
+import { NonPositionChannelConfigList,PositionChannelConfigList } from '../../config'; 
+
 import Modal from '../modal';
 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';
+import { runInAction, toJS } from 'mobx';
 
 const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
@@ -24,7 +26,27 @@ const VisualConfigPanel: React.FC = (props) => {
         timeFormat: visualConfig.format.timeFormat,
         normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
     });
+    const [resolve, setResolve] = useState<IVisualConfig['resolve']>({
+        x: visualConfig.resolve.x,
+        y: visualConfig.resolve.y,
+        color: visualConfig.resolve.color,
+        opacity: visualConfig.resolve.opacity,
+        shape: visualConfig.resolve.shape,
+        size: visualConfig.resolve.size,
+    });
     const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
+    const [background, setBackground] = useState<string | undefined>(visualConfig.background);
+
+    useEffect(() => {
+        setZeroScale(visualConfig.zeroScale);
+        setBackground(visualConfig.background);
+        setResolve(toJS(visualConfig.resolve));
+        setFormat({
+            numberFormat: visualConfig.format.numberFormat,
+            timeFormat: visualConfig.format.timeFormat,
+            normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
+        });
+    }, [showVisualConfigPanel]);
 
     return (
         <Modal
@@ -36,22 +58,22 @@ const VisualConfigPanel: React.FC = (props) => {
             <div>
                 <h2 className="text-lg mb-4">{t('config.format')}</h2>
                 <p className="text-xs">
-                    Format guides docs:{' '}
+                    {t(`config.formatGuidesDocs`)}:{' '}
                     <a
                         target="_blank"
                         className="underline text-blue-500"
                         href="https://github.com/d3/d3-format#locale_format"
                     >
-                        read here
+                        {t(`config.readHere`)}
                     </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>
+                        <label className="block text-xs font-medium leading-6">{t(`config.${fc}`)}</label>
                         <div className="mt-1">
                             <input
                                 type="text"
-                                className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
                                 value={format[fc] ?? ''}
                                 onChange={(e) => {
                                     setFormat((f) => ({
@@ -63,9 +85,55 @@ const VisualConfigPanel: React.FC = (props) => {
                         </div>
                     </div>
                 ))}
+                <h2 className="text-lg">{t('config.background')}</h2>
+                <div className="my-2">
+                    <label className="block text-xs font-medium leading-6">{t(`config.color`)}</label>
+                    <div className="mt-1">
+                        <input
+                            type="text"
+                            className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
+                            value={background ?? ''}
+                            onChange={(e) => {
+                                setBackground(e.target.value);
+                            }}
+                        />
+                    </div>
+                </div>
+                <h2 className="text-lg">{t('config.independence')}</h2>
+                <div className="my-2">
+                    <div className="flex space-x-6">
+                        {PositionChannelConfigList.map((pc) => (
+                            <Toggle
+                                label={t(`config.${pc}`)}
+                                key={pc}
+                                enabled={resolve[pc] ?? false}
+                                onChange={(e) => {
+                                    setResolve((r) => ({
+                                        ...r,
+                                        [pc]: e,
+                                    }));
+                                }}
+                            />
+                        ))}
+                        {NonPositionChannelConfigList.map((npc) => (
+                            <Toggle
+                                label={t(`constant.draggable_key.${npc}`)}
+                                key={npc}
+                                enabled={resolve[npc] ?? false}
+                                onChange={(e) => {
+                                    setResolve((r) => ({
+                                        ...r,
+                                        [npc]: e,
+                                    }));
+                                }}
+                            />
+                        ))}
+                    </div>
+                </div>
+                <h2 className="text-lg">{t('config.zeroScale')}</h2>
                 <div className="my-2">
                     <Toggle
-                        label="zero scale"
+                        label={t(`config.zeroScale`)}
                         enabled={zeroScale}
                         onChange={(en) => {
                             setZeroScale(en);
@@ -80,8 +148,10 @@ const VisualConfigPanel: React.FC = (props) => {
                             runInAction(() => {
                                 vizStore.setVisualConfig('format', format);
                                 vizStore.setVisualConfig('zeroScale', zeroScale);
+                                vizStore.setVisualConfig('background', background);
+                                vizStore.setVisualConfig('resolve', resolve);
                                 commonStore.setShowVisualConfigPanel(false);
-                            })
+                            });
                         }}
                     />
                     <DefaultButton

packages/graphic-walker/src/config.ts

@@ -1,4 +1,4 @@
-import { DraggableFieldState, IStackMode } from "./interfaces";
+import { DraggableFieldState, IStackMode, IVisualConfig } from "./interfaces";
 
 export const GEMO_TYPES: Readonly<string[]> = [
     'auto',
@@ -57,4 +57,16 @@ export const CHANNEL_LIMIT = {
 export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
     'dimensions',
     'measures',
+]
+
+export const PositionChannelConfigList: Array<keyof IVisualConfig['resolve']> = [
+    'x',
+    'y',
+]
+
+export const NonPositionChannelConfigList: Array<keyof IVisualConfig['resolve']> = [
+    'color',
+    'opacity',
+    'shape',
+    'size'
 ]

packages/graphic-walker/src/interfaces.ts

@@ -202,11 +202,20 @@ export interface IVisualConfig {
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
     zeroScale: boolean;
+    background?: string;
     format: {
         numberFormat?: string;
         timeFormat?: string;
         normalizedNumberFormat?: string;
     };
+    resolve: {
+        x?: boolean;
+        y?: boolean;
+        color?: boolean;
+        opacity?: boolean;
+        shape?: boolean;
+        size?: boolean;
+    };
     size: {
         mode: 'auto' | 'fixed';
         width: number;

packages/graphic-walker/src/locales/en-US.json

@@ -3,7 +3,15 @@
         "format": "Format",
         "numberFormat": "Number format",
         "timeFormat": "Time format",
-        "normalizedNumberFormat": "Normalized number format"
+        "normalizedNumberFormat": "Normalized number format",
+        "background": "Background",        
+        "color":"Color",
+        "independence": "Independence",
+        "x": "x-Axis",
+        "y": "y-Axis",
+        "zeroScale": "Zero Scale",
+        "formatGuidesDocs": "Format guides docs",
+        "readHere": "read here"
     },
     "constant": {
         "row_count": "Row count",

packages/graphic-walker/src/locales/ja-JP.json

@@ -3,7 +3,15 @@
         "format": "形式",
         "numberFormat": "数字の形式",
         "timeFormat": "時間の形式",
-        "normalizedNumberFormat": "正規化された数字の形式"
+        "normalizedNumberFormat": "正規化された数字の形式",
+        "background": "背景",
+        "color":"色",
+        "independence": "独立性",
+        "x": "x軸",
+        "y": "y軸",
+        "zeroScale": "ゼロ目盛",
+        "formatGuidesDocs": "フォーマットガイド",
+        "readHere": "ここを読む"
     },
     "constant": {
         "row_count": "行数",

packages/graphic-walker/src/locales/zh-CN.json

@@ -3,7 +3,15 @@
         "format": "格式",
         "numberFormat": "数字格式",
         "timeFormat": "时间格式",
-        "normalizedNumberFormat": "标准化数字格式"
+        "normalizedNumberFormat": "标准化数字格式",
+        "background": "背景",
+        "color":"颜色",
+        "independence": "独立性",
+        "x": "x轴",
+        "y": "y轴",
+        "zeroScale": "零刻度",
+        "formatGuidesDocs": "格式指南",
+        "readHere": "阅读此处"
     },
     "constant": {
         "row_count": "行数",

packages/graphic-walker/src/renderer/specRenderer.tsx

@@ -29,7 +29,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, zeroScale } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, format: _format, background, zeroScale, resolve } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -41,7 +41,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
     const sizeChannel = draggableFieldState.size;
     const details = draggableFieldState.details;
     const text = draggableFieldState.text;
-    const format = toJS(_format)
+    const format = toJS(_format);
 
     const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
     const colLeftFacetFields = useMemo(
@@ -59,8 +59,9 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 
     const vegaConfig = useMemo<VegaGlobalConfig>(() => {
         const config: VegaGlobalConfig = {
-          ...themeConfig,
-        }
+            ...themeConfig,
+            background: mediaTheme === 'dark' ? '#18181f' : '#ffffff',
+        };
         if (format.normalizedNumberFormat && format.normalizedNumberFormat.length > 0) {
             // @ts-ignore
             config.normalizedNumberFormat = format.normalizedNumberFormat;
@@ -79,9 +80,23 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
             config.scale = {};
         }
         // @ts-ignore
-        config.scale.zero = Boolean(zeroScale)
+        config.scale.zero = Boolean(zeroScale);
+        // @ts-ignore
+        config.resolve = resolve;
+        if (background) {
+            config.background = background;
+        }
+
         return config;
-      }, [themeConfig, zeroScale, format.normalizedNumberFormat, format.numberFormat, format.timeFormat])
+    }, [
+        themeConfig,
+        zeroScale,
+        resolve,
+        background,
+        format.normalizedNumberFormat,
+        format.numberFormat,
+        format.timeFormat,
+    ]);
 
     if (isPivotTable) {
         return (

packages/graphic-walker/src/store/visualSpecStore.ts

@@ -71,6 +71,7 @@ export function initVisualConfig(): IVisualConfig {
         interactiveScale: false,
         sorted: "none",
         zeroScale: true,
+        background: undefined,
         size: {
             mode: "auto",
             width: 320,
@@ -79,8 +80,16 @@ export function initVisualConfig(): IVisualConfig {
         format: {
             numberFormat: undefined,
             timeFormat: undefined,
-            normalizedNumberFormat: undefined
-        }
+            normalizedNumberFormat: undefined,
+        },
+        resolve: {
+            x: false,
+            y: false,
+            color: false,
+            opacity: false,
+            shape: false,
+            size: false,
+        },
     };
 }
 
@@ -205,7 +214,7 @@ export class VizSpecStore {
         if (this.__dangerous_is_inside_useMutable__) {
             throw new Error(
                 "A recursive call of useMutable() is detected, " +
-                    "this is prevented because update will be overwritten by parent execution context."
+                "this is prevented because update will be overwritten by parent execution context."
             );
         }
 
@@ -299,7 +308,7 @@ export class VizSpecStore {
         return state.filters;
     }
 
-
+    
     public addVisualization(defaultName?: string) {
         const name = defaultName || 'Chart ' + (this.visList.length + 1);
         this.visList.push(
@@ -375,11 +384,13 @@ export class VizSpecStore {
                 case configKey === "size" && typeof value === "object":
                 case configKey === "sorted":
                 case configKey === "zeroScale":
+                case configKey === "background":
                 case configKey === "stack": {
                     return (config[configKey] = value);
                 }
-                case configKey === 'format' && typeof value === "object": {
-                    return config[configKey] = value
+                case configKey === "format" && typeof value === "object":
+                case configKey === "resolve" && typeof value === "object": {
+                    return (config[configKey] = value);
                 }
 
                 default: {