Support Undo&Redo in GraphicWalker.

packages/graphic-walker/README.md

@@ -1,7 +1,7 @@
 # Graphic Walker
-Graphic Walker is a lite tableau style visual analysis interface. It is used for cases when users have specific analytic target or user want to analysis further result based on the recommanded results by Rath's auto insights.
+Graphic Walker is a lite tableau style visual analysis interface. It is used for cases when users have specific analytic target or user want to analysis further result based on the recommended results by Rath's auto insights.
 
-** You can also use Graphic Walker as a lite tableau style analysis app independently. It can be used as an independent app or an embeding module. **
+** You can also use Graphic Walker as a lite tableau style analysis app independently. It can be used as an independent app or an embedding module. **
 
 Main features:
 
@@ -45,7 +45,7 @@ npm run dev
 
 ## I18n Support
 
-Graphic Walker now support _English_ (as `"en"` or `"en-US"`) and _Chinese_ (as `"zh"` or `"zh-CN"`) with built-in locale resources. You can simply provide a valid string value (enumerated above) as `props.i18nLang` to set a language or synchronize your global i18n language with the component like the example given as follow.
+GraphicWalker now support _English_ (as `"en"` or `"en-US"`) and _Chinese_ (as `"zh"` or `"zh-CN"`) with built-in locale resources. You can simply provide a valid string value (enumerated above) as `props.i18nLang` to set a language or synchronize your global i18n language with the component like the example given as follow.
 
 ```typescript
 const YourApp = props => {
@@ -63,14 +63,15 @@ const YourApp = props => {
 
 ### Customize I18n
 
-If you need i18n support to cover languages not supported currently, or to totally rewrite the content of any built-in resource(s), you can also provide your resource(s) as `props.i18nResources` to Graphic Walker like this.
+If you need i18n support to cover languages not supported currently, or to totally rewrite the content of any built-in resource(s), you can also provide your resource(s) as `props.i18nResources` to GraphicWalker like this.
 
 ```typescript
 const yourResources = {
     'de-DE': {
+        'key': 'value',
         ...
     },
-    'fr-FE': {
+    'fr-FR': {
         ...
     },
 };
@@ -88,3 +89,5 @@ const YourApp = props => {
     />
 }
 ```
+
+GraphicWalker uses `react-i18next` to support i18n, which is based on `i18next`, so your translation resources should follow [this format](https://www.i18next.com/misc/json-format). You can simply fork and edit `/locales/en-US.json` to start your translation.

packages/graphic-walker/package.json

@@ -31,6 +31,7 @@
     "autoprefixer": "^10.3.5",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",
+    "immer": "^9.0.15",
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
     "postcss": "^8.3.7",

packages/graphic-walker/src/App.tsx

@@ -21,6 +21,7 @@ import { Specification } from 'visual-insights';
 import VisNav from './segments/visNav';
 import { useTranslation } from 'react-i18next';
 import { mergeLocaleRes, setLocaleLanguage } from './locales/i18n';
+import Menubar from './visualSettings/menubar';
 
 
 export interface EditorProps {
@@ -95,6 +96,7 @@ const App: React.FC<EditorProps> = props => {
 				{/* <PureTabs tabs={[{label: 'a', key: 'a'}, {label: 'b', key: 'b'}]} selectedKey='a' onSelected={() => {}} /> */}
 			</div>
 			<Container style={{ marginTop: '0em', borderTop: 'none' }}>
+				<Menubar />
 				<VisualSettings />
 				<div className="grid grid-cols-12 xl:grid-cols-6">
 					<div className="col-span-3 xl:col-span-1">

packages/graphic-walker/src/insightBoard/mainBoard.tsx

@@ -26,7 +26,7 @@ interface SubSpace {
 
 interface InsightMainBoardProps {
   dataSource: IRow[];
-  fields: IField[];
+  fields: Readonly<IField[]>;
   filters?: Filters;
   viewDs: IField[];
   viewMs: IField[];

packages/graphic-walker/src/insightBoard/std2vegaSpec.ts

@@ -17,7 +17,7 @@ export function baseVis(
     measures: string[],
     predicates: IPredicate[] | null,
     aggregatedMeasures: Array<{ op: string; field: string; as: string }>,
-    fields: IField[],
+    fields: Readonly<IField[]>,
     type: IReasonType,
     defaultAggregated?: boolean,
     defaultStack?: boolean

packages/graphic-walker/src/insightBoard/utils.ts

@@ -26,7 +26,7 @@ export function mergeMeasures(measures1: IMeasure[], measures2: IMeasure[]): IMe
     return merged;
 }
 
-export function formatFieldName(fid: string, fields: IField[]) {
+export function formatFieldName(fid: string, fields: Readonly<IField[]>) {
     const target = fields.find(f => f.fid === fid);
     return target ? target.name : fid;
 }

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

@@ -69,6 +69,10 @@
             "autoTitle": "Chart {{idx}}"
         },
         "tabpanel": {
+            "menubar": {
+                "undo": "Undo",
+                "redo": "Redo"
+            },
             "settings": {
                 "toggle": {
                     "aggregation": "Enable Aggregation",

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

@@ -69,6 +69,10 @@
             "autoTitle": "图表 {{idx}}"
         },
         "tabpanel": {
+            "menubar": {
+                "undo": "撤销",
+                "redo": "重做"
+            },
             "settings": {
                 "toggle": {
                     "aggregation": "聚合度量",

packages/graphic-walker/src/segments/visNav.tsx

@@ -24,11 +24,9 @@ const VisNav: React.FC = (props) => {
 
     const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
         if (tabKey === ADD_KEY) {
-            vizStore.saveVisChange();
             vizStore.addVisualization();
             vizStore.initMetaState(currentDataset)
         } else {
-            vizStore.saveVisChange();
             vizStore.selectVisualization(tabIndex);
         }
     }, [currentDataset, vizStore])