Skip to content

Commit

Permalink
Merge pull request #128 from AntoineYANG/feature-g_walker-undo_redo-y…
Browse files Browse the repository at this point in the history
…zd-0915

Support Undo&Redo in GraphicWalker.
  • Loading branch information
ObservedObserver authored Sep 19, 2022
2 parents 4102bab + 372d57b commit 905f7e1
Show file tree
Hide file tree
Showing 13 changed files with 594 additions and 198 deletions.
13 changes: 8 additions & 5 deletions packages/graphic-walker/README.md
Original file line number Diff line number Diff line change
@@ -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:

Expand Down Expand Up @@ -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 => {
Expand All @@ -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': {
...
},
};
Expand All @@ -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.
1 change: 1 addition & 0 deletions packages/graphic-walker/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions packages/graphic-walker/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/insightBoard/mainBoard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ interface SubSpace {

interface InsightMainBoardProps {
dataSource: IRow[];
fields: IField[];
fields: Readonly<IField[]>;
filters?: Filters;
viewDs: IField[];
viewMs: IField[];
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/insightBoard/std2vegaSpec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/insightBoard/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 4 additions & 0 deletions packages/graphic-walker/src/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
"autoTitle": "Chart {{idx}}"
},
"tabpanel": {
"menubar": {
"undo": "Undo",
"redo": "Redo"
},
"settings": {
"toggle": {
"aggregation": "Enable Aggregation",
Expand Down
4 changes: 4 additions & 0 deletions packages/graphic-walker/src/locales/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
"autoTitle": "图表 {{idx}}"
},
"tabpanel": {
"menubar": {
"undo": "撤销",
"redo": "重做"
},
"settings": {
"toggle": {
"aggregation": "聚合度量",
Expand Down
2 changes: 0 additions & 2 deletions packages/graphic-walker/src/segments/visNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand Down
Loading

0 comments on commit 905f7e1

Please sign in to comment.