Merge pull request #91 from Kanaries/v3-research

feat: daily merge
Kanaries · Jul 1, 2022 · 126fd03 · 126fd03
2 parents 6a4b46d + b9e331c
commit 126fd03
Show file tree

Hide file tree

Showing 208 changed files with 19,148 additions and 127 deletions.
diff --git a/buildspec.yml b/buildspec.yml
@@ -0,0 +1,18 @@
+version: 0.2
+
+phases:
+  install:
+    runtime-versions:
+      node: 16.x
+    commands:
+      - echo Install deps
+      - yarn install
+  build:
+    commands:
+      - echo Building...
+      - yarn workspace @kanaries/graphic-walker build
+      - yarn workspace rath-client build2
+  artifacts:
+    files:
+      - 'packages/rath-client/build/*'
+    name: 'rath-on-aws'
diff --git a/packages/graphic-walker/src/Fields/AestheticFields.tsx b/packages/graphic-walker/src/Fields/AestheticFields.tsx
@@ -7,7 +7,7 @@ import { AestheticFieldContainer } from './components'
 
 import OBFieldContainer from './obComponents/obFContainer';
 
-const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size'].includes(f.id));
+const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape'].includes(f.id));
 
 const AestheticFields: React.FC = props => {
     return <div>

diff --git a/packages/graphic-walker/src/Fields/components.tsx b/packages/graphic-walker/src/Fields/components.tsx
@@ -9,7 +9,6 @@ export const AestheticSegment = styled.div`
 
   .aes-header{
     border-bottom: 1px solid #dfe3e8;
-    background-color: #f5f5f5;
     padding: 0.6em;
     h4 {
       font-weight: 400;
@@ -62,7 +61,6 @@ export const FieldListSegment = styled.div`
     /* flex-basis: 100px; */
     width: 100px;
     border-right: 1px solid #dfe3e8;
-    background-color: #f5f5f5;
     flex-shrink: 0;
     h4 {
       margin: 0.6em;
@@ -79,14 +77,14 @@ export const FieldListSegment = styled.div`
 `;
 
 export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`
-  background-color: ${props => props.colType === 'continuous' ? COLORS.measure : COLORS.dimension};
-  color: #fff;
+  background-color: ${props => props.colType === 'continuous' ? COLORS.white : COLORS.black};
+  border-color: ${props => props.colType === 'continuous' ? COLORS.black : COLORS.white};
+  color: ${props => props.colType === 'continuous' ? COLORS.black : COLORS.white};
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-align-items: center;
   -webkit-user-select: none;
   align-items: center;
-  border-color: transparent;
   border-radius: 10px;
   border-style: solid;
   border-width: 1px;
@@ -100,5 +98,11 @@ export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`
   overflow-y: hidden;
   padding: 0 10px;
   user-select: none;
+  /* --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow-color: rgb(6 182 212/0.5);
+  --tw-shadow: var(--tw-shadow-colored);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); */
 `
 
diff --git a/packages/graphic-walker/src/Fields/datasetFields/meaFields.tsx b/packages/graphic-walker/src/Fields/datasetFields/meaFields.tsx
@@ -30,10 +30,13 @@ const MeaFields: React.FC<Props> = props => {
                                     f.fid && !snapshot.isDragging && <select className="float-right" value="" onChange={e => {
                                         if (e.target.value === 'bin') {
                                             vizStore.createBinField('measures', index)
+                                        } else if (e.target.value === 'log10') {
+                                            vizStore.createLogField('measures', index)
                                         }
                                     }}>
                                         <option value=""></option>
                                         <option value="bin">bin</option>
+                                        <option value="log10">log10</option>
                                     </select>
                                 }
                             </FieldPill>

diff --git a/packages/graphic-walker/src/Fields/fieldsContext.tsx b/packages/graphic-walker/src/Fields/fieldsContext.tsx
@@ -46,6 +46,9 @@ export const DRAGGABLE_STATE_KEYS: Array<IDraggableStateKey> = [
     { id: 'color', name: '颜色', mode: 1 },
     { id: 'opacity', name: '透明度', mode: 1 },
     { id: 'size', name: '大小', mode: 1 },
+    { id: 'shape', name: '形状', mode: 1},
+    { id: 'theta', name: '角度', mode: 1 },
+    { id: 'radius', name: '半径', mode: 1 }
 ];
 
 export const AGGREGATOR_LIST = [

diff --git a/packages/graphic-walker/src/Fields/obComponents/obPill.tsx b/packages/graphic-walker/src/Fields/obComponents/obPill.tsx
@@ -20,7 +20,6 @@ const OBPill: React.FC<PillProps> = props => {
     const field = vizStore.draggableFieldState[dkey.id][fIndex];
     return <Pill
         ref={provided.innerRef}
-        // type={f.type}
         colType={field.analyticType === 'dimension' ? 'discrete' : 'continuous'}
         {...provided.draggableProps}
         {...provided.dragHandleProps}

diff --git a/packages/graphic-walker/src/Fields/posFields/index.tsx b/packages/graphic-walker/src/Fields/posFields/index.tsx
@@ -8,13 +8,25 @@ import {
 import { DRAGGABLE_STATE_KEYS } from '../fieldsContext';
 
 import OBFieldContainer from '../obComponents/obFContainer';
+import { useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useGlobalStore } from '../../store';
+
 
-const rowsAndCols = DRAGGABLE_STATE_KEYS.filter(f => f.id === 'columns' || f.id === 'rows');
 const PosFields: React.FC = props => {
+    const { vizStore } = useGlobalStore();
+    const { visualConfig } = vizStore;
+    const { geoms } = visualConfig;
 
+    const channels = useMemo(() => {
+        if (geoms[0] === 'arc') {
+            return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'radius' || f.id === 'theta');
+        }
+        return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'columns' || f.id === 'rows');
+    }, [geoms[0]])
     return <div>
         {
-            rowsAndCols.map(dkey => <FieldListContainer name={dkey.name} key={dkey.id}>
+            channels.map(dkey => <FieldListContainer name={dkey.name} key={dkey.id}>
                 <Droppable droppableId={dkey.id} direction="horizontal">
                     {(provided, snapshot) => (
                         <OBFieldContainer dkey={dkey} provided={provided} />
@@ -25,4 +37,4 @@ const PosFields: React.FC = props => {
     </div>
 }
 
-export default PosFields;
+export default observer(PosFields);
diff --git a/packages/graphic-walker/src/InsightBoard/mainBoard.tsx b/packages/graphic-walker/src/InsightBoard/mainBoard.tsx
@@ -75,16 +75,6 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = props => {
         currentSpace,
         filters
       }).then(({ visSpaces, explainations, valueExp }) => {
-        console.log({
-          porps: {
-            dimensions,
-            measures,
-            dataSource,
-            currentSpace,
-            filters
-          },
-          res: { visSpaces, explainations, valueExp }
-        })
         setRecSpaces(explainations);
         setVisSpaces(visSpaces);
         setValueExp(valueExp);

diff --git a/packages/graphic-walker/src/config.ts b/packages/graphic-walker/src/config.ts
@@ -19,6 +19,10 @@ export const GEMO_TYPES = [
         value: 'point',
         label: '点',
     },
+    {
+        value: 'circle',
+        label: '圆'
+    },
     {
         value: 'tick',
         label: '标记',
@@ -27,10 +31,14 @@ export const GEMO_TYPES = [
         value: 'rect',
         label: '矩形',
     },
+    {
+        value: 'arc',
+        label: '弧形'
+    },
     {
         value: 'boxplot',
         label: '统计箱'
-    }
+    },
 ];
 
 export const CHART_LAYOUT_TYPE = [
@@ -48,6 +56,10 @@ export const COLORS = {
     // tableau style
     // dimension: 'rgb(73, 150, 178)',
     // measure: 'rgb(0, 177, 128)',
-    dimension: 'rgb(86, 170, 208)',
-    measure: 'rgb(232, 149, 72)'
+    // dimension: 'rgb(86, 170, 208)',
+    // measure: 'rgb(232, 149, 72)'
+    dimension: 'rgba(0, 0, 0, 0.9)',
+    measure: 'rgba(10, 0, 0, 0.6)',
+    black: '#141414',
+    white: '#fafafa'
 }
diff --git a/packages/graphic-walker/src/dataSource/utils.ts b/packages/graphic-walker/src/dataSource/utils.ts
@@ -24,7 +24,6 @@ export function transData(dataSource: Record[]): {
     // 这里我们使用了一种非原API设计时期待的用法，即强制指定单变量选择时要全选字段。但我们无法阻止对变量的转换。
     vie.univarSelection('percent', 1);
     const fields = vie.fields;
-    // console.log(fields)
     for (let record of dataSource) {
         const newRecord: Record = {};
         for (let field of fields) {

diff --git a/packages/graphic-walker/src/interfaces.ts b/packages/graphic-walker/src/interfaces.ts
@@ -96,12 +96,17 @@ export interface IDataSource {
     data: IRow[]
 }
 export interface DraggableFieldState {
-    fields: IField[];
-    rows: IField[];
-    columns: IField[];
-    color: IField[];
-    opacity: IField[];
-    size: IField[];
+    fields: IViewField[];
+    dimensions: IViewField[];
+    measures: IViewField[];
+    rows: IViewField[];
+    columns: IViewField[];
+    color: IViewField[];
+    opacity: IViewField[];
+    size: IViewField[];
+    shape: IViewField[];
+    theta: IViewField[];
+    radius: IViewField[];
 }
 
 export interface IDraggableStateKey {

diff --git a/packages/graphic-walker/src/renderer/index.tsx b/packages/graphic-walker/src/renderer/index.tsx
@@ -16,6 +16,9 @@ const ReactiveRenderer: React.FC = props => {
     const columns = toJS(draggableFieldState.columns)
     const color = toJS(draggableFieldState.color)
     const opacity = toJS(draggableFieldState.opacity)
+    const shape = toJS(draggableFieldState.shape)
+    const theta = toJS(draggableFieldState.theta)
+    const radius = toJS(draggableFieldState.radius)
     const sizeChannel = toJS(draggableFieldState.size)
 
     const rowLeftFacetFields = rows.slice(0, -1).filter(f => f.analyticType === 'dimension');
@@ -52,6 +55,9 @@ const ReactiveRenderer: React.FC = props => {
         rows={rows}
         columns={columns}
         color={color[0]}
+        theta={theta[0]}
+        radius={radius[0]}
+        shape={shape[0]}
         opacity={opacity[0]}
         size={sizeChannel[0]}
         onGeomClick={onGeomClick}

diff --git a/packages/graphic-walker/src/store/visualSpecStore.ts b/packages/graphic-walker/src/store/visualSpecStore.ts
@@ -1,11 +1,10 @@
 import { IReactionDisposer, makeAutoObservable, reaction, toJS } from "mobx";
-import { IViewField } from "../interfaces";
+import { DraggableFieldState, IViewField } from "../interfaces";
 import { CommonStore } from "./commonStore";
 import { v4 as uuidv4 } from 'uuid';
 import { Specification } from "visual-insights";
 import { GEMO_TYPES } from "../config";
-import { makeBinField } from "../utils/normalization";
-import { COUNT_FIELD_ID } from "../constants";
+import { makeBinField, makeLogField } from "../utils/normalization";
 
 interface VisualConfig {
     defaultAggregated: boolean;
@@ -21,16 +20,6 @@ interface VisualConfig {
     }
 }
 
-export interface DraggableFieldState {
-    fields: IViewField[];
-    dimensions: IViewField[];
-    measures: IViewField[];
-    rows: IViewField[];
-    columns: IViewField[];
-    color: IViewField[];
-    opacity: IViewField[];
-    size: IViewField[];
-}
 
 export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
     'dimensions',
@@ -44,10 +33,13 @@ const CHANNEL_LIMIT = {
     color: 1,
     opacity: 1,
     size: 1,
+    shape: 1,
+    theta: 1,
+    radius: 1
 }
 
 function getChannelSizeLimit (channel: string): number {
-    if (typeof CHANNEL_LIMIT[channel] === 'undefined') return 0;
+    if (typeof CHANNEL_LIMIT[channel] === 'undefined') return Infinity;
     return CHANNEL_LIMIT[channel];
 }
 
@@ -65,6 +57,10 @@ function geomAdapter (geom: string) {
             return 'area';
         case 'point':
             return 'point';
+        case 'arc':
+            return 'arc';
+        case 'circle':
+            return 'circle';
         case 'heatmap':
             return 'circle'
         case 'rect':
@@ -103,7 +99,10 @@ export class VizSpecStore {
             columns: [],
             color: [],
             opacity: [],
-            size: []
+            size: [],
+            shape: [],
+            radius: [],
+            theta: []
         }
         makeAutoObservable(this);
         // FIXME!!!!!
@@ -183,7 +182,10 @@ export class VizSpecStore {
             columns: [],
             color: [],
             opacity: [],
-            size: []
+            size: [],
+            shape: [],
+            radius: [],
+            theta: []
         }
     }
     public clearState () {
@@ -207,6 +209,11 @@ export class VizSpecStore {
             console.error('unknow key' + configKey)
         }
     }
+    public transformCoord (coord: 'cartesian' | 'polar') {
+        if (coord === 'polar') {
+
+        }
+    }
     public setChartLayout(props: {mode: VisualConfig['size']['mode'], width?: number, height?: number }) {
         const {
             mode = this.visualConfig.size.mode,
@@ -261,6 +268,18 @@ export class VizSpecStore {
         this.draggableFieldState.dimensions.push(binField);
         this.commonStore.currentDataset.dataSource = makeBinField(this.commonStore.currentDataset.dataSource, originField.fid, binField.fid)
     }
+    public createLogField(stateKey: keyof DraggableFieldState, index: number) {
+        const originField = this.draggableFieldState[stateKey][index];
+        const logField: IViewField = {
+            fid: uuidv4(),
+            dragId: uuidv4(),
+            name: `log10(${originField.name})`,
+            semanticType: 'quantitative',
+            analyticType: originField.analyticType
+        }
+        this.draggableFieldState[stateKey].push(logField);
+        this.commonStore.currentDataset.dataSource = makeLogField(this.commonStore.currentDataset.dataSource, originField.fid, logField.fid)
+    }
     public setFieldAggregator (stateKey: keyof DraggableFieldState, index: number, aggName: string) {
         const fields = this.draggableFieldState[stateKey]
         if (fields[index]) {