feat: new version graphic walker

README.md

@@ -41,6 +41,8 @@ Graphic Walker is a lite tableau style visual analysis interface. It is used for
 
 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.
 
+more details can be found in README.md in graphic-walker folder.
+
 ## Examples
 
 + [DataSet: NASA - Kepler](https://www.kaggle.com/nasa/kepler-exoplanet-search-results)

README.zh-CN.md

@@ -33,6 +33,8 @@ Rath中包含一个tableau风格的自助分析工具，它是一个和基于图
 
 这个模块从工程上是独立的，你可以把它单独作为一个分析应用来使用或者作为一个嵌入式的模块（Rath便是这也使用它）。
 
+详细的使用方式详见graphic-walker文件夹下的README.md文件
+
 
 ## 案例
 

packages/frontend/package.json

@@ -47,7 +47,7 @@
     "vega": "^5.19.1",
     "vega-embed": "^6.15.1",
     "vega-lite": "^4.17.0",
-    "visual-insights": "0.6.2",
+    "visual-insights": "0.6.3",
     "web-vitals": "^0.2.4",
     "worker-loader": "^3.0.7",
     "yarn": "^1.19.0"

packages/frontend/src/pages/visualInterface/index.tsx

@@ -2,12 +2,25 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { GraphicWalker } from 'graphic-walker';
 import { useGlobalStore } from '../../store';
+import { useMemo } from 'react';
+import { IMutField } from 'graphic-walker/dist/interfaces';
+import 'graphic-walker/dist/style.css';
 
 const VisualInterface: React.FC = props => {
     const { dataSourceStore } = useGlobalStore();
     // TODO: discuss use clean data from dataSourceStore or cooked data from dataPipeline?
-    const { cleanedData, dimensions, measures } = dataSourceStore;
-    return <GraphicWalker dataSource={cleanedData} dimensions={dimensions} measures={measures} />
+    const { cleanedData, mutFields } = dataSourceStore;
+    const gwRawFields = useMemo<IMutField[]>(() => {
+        return mutFields.map(f => {
+            return {
+                key: f.fid,
+                semanticType: f.semanticType,
+                dataType: '?',
+                analyticType: f.analyticType
+            }
+        })
+    }, [mutFields])
+    return <GraphicWalker dataSource={cleanedData} rawFields={gwRawFields} />
 }
 
 export default observer(VisualInterface);

packages/graphic-walker/README.md

@@ -0,0 +1,33 @@
+# 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.
+
+** 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. **
+
+Main features:
+
++ A grammar of graphics based visual analytic user interface where use can build visualization from low level visual channel encodings. 
++ A Data Explainer which explain some why some patterns occur / what may cause them.
+
+## Usage
+```bash
+cd graphic-waler
+yarn install
+npm run build
+```
+
+In your app:
+```typescript
+import { GraphicWalker } from 'graphic-walker';
+import 'graphic-walker/dist/style.css'
+
+const YourEmbeddingTableauStyleApp: React.FC = props => {
+    const { dataSource, fields } = props;
+
+    return <GraphicWalker
+        dataSource={dataSource}
+        rawFields={fields}
+    />
+}
+
+export default YourEmbeddingTableauStyleApp;
+```

packages/graphic-walker/package.json

@@ -20,16 +20,21 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@fluentui/react": "^8.29.0",
-    "@tableau/tableau-ui": "^3.2.0",
+    "@heroicons/react": "^1.0.4",
+    "autoprefixer": "^10.3.5",
+    "mobx": "^6.3.3",
+    "mobx-react-lite": "^3.2.1",
+    "postcss": "^8.3.7",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "styled-components": "^5.3.0",
+    "tailwindcss": "^2.2.15",
     "vega": "^5.20.2",
     "vega-embed": "^6.18.2",
-    "vega-lite": "^5.1.0"
+    "vega-lite": "^5.1.0",
+    "visual-insights": "0.6.3"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",

packages/graphic-walker/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+}