feat: export global configs

Kanaries · Sep 14, 2023 · 410620c · 410620c · vercel · Sep 14, 2023
1 parent b37ed3c
commit 410620c
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 114 deletions.
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
@@ -10,7 +10,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@kanaries/graphic-walker": "0.4.11",
+    "@kanaries/graphic-walker": "0.4.12",
     "@tauri-apps/api": "^1.1.0",
     "react": "^17.x",
     "react-dom": "^17.x"

diff --git a/packages/graphic-walker/package.json b/packages/graphic-walker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

diff --git a/packages/graphic-walker/src/components/visualConfig/index.tsx b/packages/graphic-walker/src/components/visualConfig/index.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import { useGlobalStore } from '../../store';
-import { NonPositionChannelConfigList, PositionChannelConfigList } from '../../config';
+import { GLOBAL_CONFIG } from '../../config';
 
 import Modal from '../modal';
 import { IVisualConfig } from '../../interfaces';
@@ -104,7 +104,7 @@ const VisualConfigPanel: React.FC = (props) => {
                 <label className="block text-xs font-medium leading-6">{t('config.independence')}</label>
                 <div className="my-2">
                     <div className="flex space-x-6">
-                        {PositionChannelConfigList.map((pc) => (
+                        {GLOBAL_CONFIG.POSITION_CHANNEL_CONFIG_LIST.map((pc) => (
                             <Toggle
                                 label={t(`config.${pc}`)}
                                 key={pc}
@@ -117,7 +117,7 @@ const VisualConfigPanel: React.FC = (props) => {
                                 }}
                             />
                         ))}
-                        {NonPositionChannelConfigList.map((npc) => (
+                        {GLOBAL_CONFIG.NON_POSITION_CHANNEL_CONFIG_LIST.map((npc) => (
                             <Toggle
                                 label={t(`constant.draggable_key.${npc}`)}
                                 key={npc}

diff --git a/packages/graphic-walker/src/config.ts b/packages/graphic-walker/src/config.ts
@@ -1,45 +1,17 @@
-import { DraggableFieldState, ICoordMode, IStackMode, IVisualConfig } from "./interfaces";
+import { DraggableFieldState, IAggregator, ICoordMode, IStackMode, IVisualConfig } from './interfaces';
 
-export const GEMO_TYPES: Record<ICoordMode, Readonly<string[]>> = {
-    generic: [
-        'auto',
-        'bar',
-        'line',
-        'area',
-        'trail',
-        'point',
-        'circle',
-        'tick',
-        'rect',
-        'arc',
-        'text',
-        'boxplot',
-        'table',
-    ],
-    geographic: [
-        'poi',
-        'choropleth',
-    ],
-} as const;
+const GEMO_TYPES: Record<ICoordMode, string[]> = {
+    generic: ['auto', 'bar', 'line', 'area', 'trail', 'point', 'circle', 'tick', 'rect', 'arc', 'text', 'boxplot', 'table'],
+    geographic: ['poi', 'choropleth'],
+};
 
-export const COORD_TYPES: Readonly<ICoordMode[]> = [
-    'generic',
-    'geographic',
-];
+const COORD_TYPES: ICoordMode[] = ['generic', 'geographic'];
 
-export const STACK_MODE: Readonly<IStackMode[]> = [
-    'none',
-    'stack',
-    'normalize',
-    'center'
-]
+const STACK_MODE: IStackMode[] = ['none', 'stack', 'normalize', 'center'];
 
-export const CHART_LAYOUT_TYPE: Readonly<string[]> = [
-    'auto',
-    'fixed',
-] as const;
+const CHART_LAYOUT_TYPE: ('auto' | 'fixed')[] = ['auto', 'fixed'];
 
-export const COLORS = {
+const COLORS = {
     // tableau style
     // dimension: 'rgb(73, 150, 178)',
     // measure: 'rgb(0, 177, 128)',
@@ -48,12 +20,10 @@ export const COLORS = {
     dimension: 'rgba(0, 0, 0, 0.9)',
     measure: 'rgba(10, 0, 0, 0.6)',
     black: '#141414',
-    white: '#fafafa'
-}
-
-export const MAX_HISTORY_SIZE = 20;
+    white: '#fafafa',
+};
 
-export const CHANNEL_LIMIT = {
+const CHANNEL_LIMIT = {
     rows: Infinity,
     columns: Infinity,
     color: 1,
@@ -64,21 +34,30 @@ export const CHANNEL_LIMIT = {
     radius: 1,
     details: Infinity,
     text: 1,
-}
+};
+
+const META_FIELD_KEYS: Array<keyof DraggableFieldState> = ['dimensions', 'measures'];
 
-export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
-    'dimensions',
-    'measures',
-]
+const POSITION_CHANNEL_CONFIG_LIST: Array<keyof IVisualConfig['resolve']> = ['x', 'y'];
 
-export const PositionChannelConfigList: Array<keyof IVisualConfig['resolve']> = [
-    'x',
-    'y',
-]
+const NON_POSITION_CHANNEL_CONFIG_LIST: Array<keyof IVisualConfig['resolve']> = ['color', 'opacity', 'shape', 'size'];
 
-export const NonPositionChannelConfigList: Array<keyof IVisualConfig['resolve']> = [
-    'color',
-    'opacity',
-    'shape',
-    'size'
-]
+const AGGREGATOR_LIST: IAggregator[] = ['sum', 'mean', 'median', 'count', 'min', 'max', 'variance', 'stdev'];
+
+export const GLOBAL_CONFIG = {
+    AGGREGATOR_LIST,
+    CHART_LAYOUT_TYPE,
+    COLORS,
+    COORD_TYPES,
+    GEMO_TYPES,
+    MAX_HISTORY_SIZE: 20,
+    STACK_MODE,
+    META_FIELD_KEYS,
+    CHANNEL_LIMIT,
+    POSITION_CHANNEL_CONFIG_LIST,
+    NON_POSITION_CHANNEL_CONFIG_LIST,
+};
+
+export function getGlobalConfig() {
+    return GLOBAL_CONFIG;
+}
diff --git a/packages/graphic-walker/src/fields/components.tsx b/packages/graphic-walker/src/fields/components.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useTranslation } from 'react-i18next';
-import { COLORS } from "../config";
+import { GLOBAL_CONFIG } from "../config";
 
 export const FieldListContainer: React.FC<{ name: string }> = (props) => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
@@ -108,9 +108,9 @@ export const FilterFieldSegment = styled.div`
 `
 
 export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`
-  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};
+  background-color: ${props => props.colType === 'continuous' ? GLOBAL_CONFIG.COLORS.white : GLOBAL_CONFIG.COLORS.black};
+  border-color: ${props => props.colType === 'continuous' ? GLOBAL_CONFIG.COLORS.black : GLOBAL_CONFIG.COLORS.white};
+  color: ${props => props.colType === 'continuous' ? GLOBAL_CONFIG.COLORS.black : GLOBAL_CONFIG.COLORS.white};
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-align-items: center;

diff --git a/packages/graphic-walker/src/fields/encodeFields/singleEncodeEditor.tsx b/packages/graphic-walker/src/fields/encodeFields/singleEncodeEditor.tsx
@@ -7,7 +7,7 @@ import { ChevronUpDownIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import { COUNT_FIELD_ID } from '../../constants';
 import DropdownContext from '../../components/dropdownContext';
-import { AGGREGATOR_LIST } from '../fieldsContext';
+import { GLOBAL_CONFIG } from '../../config';
 import { Draggable, DroppableStateSnapshot } from '@kanaries/react-beautiful-dnd';
 import styled from 'styled-components';
 
@@ -29,7 +29,7 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
     const { t } = useTranslation();
 
     const aggregationOptions = useMemo(() => {
-        return AGGREGATOR_LIST.map((op) => ({
+        return GLOBAL_CONFIG.AGGREGATOR_LIST.map((op) => ({
             value: op,
             label: t(`constant.aggregator.${op}`),
         }));

diff --git a/packages/graphic-walker/src/fields/fieldsContext.tsx b/packages/graphic-walker/src/fields/fieldsContext.tsx
@@ -55,14 +55,3 @@ export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
     { id: 'details', mode: 1 },
     { id: 'text', mode: 1 },
 ] as const;
-
-export const AGGREGATOR_LIST: Readonly<string[]> = [
-    'sum',
-    'mean',
-    'median',
-    'count',
-    'min',
-    'max',
-    'variance',
-    'stdev'
-] as const;
diff --git a/packages/graphic-walker/src/fields/obComponents/obPill.tsx b/packages/graphic-walker/src/fields/obComponents/obPill.tsx
@@ -7,7 +7,7 @@ import { COUNT_FIELD_ID } from "../../constants";
 import { IDraggableStateKey } from "../../interfaces";
 import { useGlobalStore } from "../../store";
 import { Pill } from "../components";
-import { AGGREGATOR_LIST } from "../fieldsContext";
+import { GLOBAL_CONFIG } from "../../config";
 import DropdownContext from "../../components/dropdownContext";
 
 interface PillProps {
@@ -23,7 +23,7 @@ const OBPill: React.FC<PillProps> = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "constant.aggregator" });
 
     const aggregationOptions = useMemo(() => {
-        return AGGREGATOR_LIST.map((op) => ({
+        return GLOBAL_CONFIG.AGGREGATOR_LIST.map((op) => ({
             value: op,
             label: t(op),
         }));

diff --git a/packages/graphic-walker/src/index.tsx b/packages/graphic-walker/src/index.tsx
@@ -41,4 +41,6 @@ export { default as PureRenderer } from './renderer/pureRenderer';
 export { embedGraphicWalker } from './vanilla';
 export type { IGWProps };
 export { ISegmentKey, ColorSchemes } from './interfaces';
-export { resolveSpecFromStoInfo } from './utils/save';
+export { resolveSpecFromStoInfo } from './utils/save';
+export { getGlobalConfig } from './config';
+export type { IGlobalStore } from './store/index';
diff --git a/packages/graphic-walker/src/models/visSpecHistory.ts b/packages/graphic-walker/src/models/visSpecHistory.ts
@@ -1,5 +1,5 @@
 import { toJS } from "mobx";
-import { MAX_HISTORY_SIZE } from "../config";
+import { GLOBAL_CONFIG } from "../config";
 import { DeepReadonly, DraggableFieldState, IVisSpec, IVisualConfig } from "../interfaces";
 
 export class VisSpecWithHistory {
@@ -56,7 +56,7 @@ export class VisSpecWithHistory {
             }),
         ];
 
-        if (this.snapshots.length > MAX_HISTORY_SIZE) {
+        if (this.snapshots.length > GLOBAL_CONFIG.MAX_HISTORY_SIZE) {
             this.snapshots.splice(0, 1);
         }
 

diff --git a/packages/graphic-walker/src/store/visualSpecStore.ts b/packages/graphic-walker/src/store/visualSpecStore.ts
@@ -16,10 +16,10 @@ import {
     IVisualConfig,
     Specification,
     IComputationFunction,
-    IGeoUrl,
+    IGeoUrl
 } from '../interfaces';
-import { CHANNEL_LIMIT, MetaFieldKeys } from '../config';
 import { DATE_TIME_DRILL_LEVELS, DATE_TIME_FEATURE_LEVELS } from "../constants";
+import { GLOBAL_CONFIG } from '../config';
 import { VisSpecWithHistory } from '../models/visSpecHistory';
 import {
     IStoInfo,
@@ -39,8 +39,8 @@ import { nanoid } from 'nanoid';
 import { toWorkflow } from '../utils/workflow';
 
 function getChannelSizeLimit(channel: string): number {
-    if (typeof CHANNEL_LIMIT[channel] === 'undefined') return Infinity;
-    return CHANNEL_LIMIT[channel];
+    if (typeof GLOBAL_CONFIG.CHANNEL_LIMIT[channel] === 'undefined') return Infinity;
+    return GLOBAL_CONFIG.CHANNEL_LIMIT[channel];
 }
 
 function uniqueId(): string {
@@ -283,7 +283,7 @@ export class VizSpecStore {
         const { filters, ...state } = toJS(draggableFieldState);
         const fields: IViewField[] = [];
         (Object.keys(state) as (keyof DraggableFieldState)[])
-            .filter((dkey) => !MetaFieldKeys.includes(dkey))
+            .filter((dkey) => !GLOBAL_CONFIG.META_FIELD_KEYS.includes(dkey))
             .forEach((dkey) => {
                 fields.push(...state[dkey].filter((f) => f.analyticType === 'dimension'));
             });
@@ -297,7 +297,7 @@ export class VizSpecStore {
         const { filters, ...state } = toJS(draggableFieldState);
         const fields: IViewField[] = [];
         (Object.keys(state) as (keyof DraggableFieldState)[])
-            .filter((dkey) => !MetaFieldKeys.includes(dkey))
+            .filter((dkey) => !GLOBAL_CONFIG.META_FIELD_KEYS.includes(dkey))
             .forEach((dkey) => {
                 fields.push(...state[dkey].filter((f) => f.analyticType === 'measure'));
             });
@@ -377,7 +377,7 @@ export class VizSpecStore {
     public clearState() {
         this.useMutable(({ encodings }) => {
             for (let key in encodings) {
-                if (!MetaFieldKeys.includes(key as keyof DraggableFieldState)) {
+                if (!GLOBAL_CONFIG.META_FIELD_KEYS.includes(key as keyof DraggableFieldState)) {
                     encodings[key] = [];
                 }
             }
@@ -425,7 +425,7 @@ export class VizSpecStore {
         });
     }
     public reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number) {
-        if (MetaFieldKeys.includes(stateKey)) return;
+        if (GLOBAL_CONFIG.META_FIELD_KEYS.includes(stateKey)) return;
         if (sourceIndex === destinationIndex) return;
 
         this.useMutable(({ encodings }) => {
@@ -444,7 +444,7 @@ export class VizSpecStore {
         this.useMutable(({ encodings }) => {
             let movingField: IViewField;
             // 来源是不是metafield，是->clone；不是->直接删掉
-            if (MetaFieldKeys.includes(sourceKey)) {
+            if (GLOBAL_CONFIG.META_FIELD_KEYS.includes(sourceKey)) {
                 // use a different dragId
                 movingField = {
                     ...toJS(encodings[sourceKey][sourceIndex]), // toJS will NOT shallow copy a object here
@@ -454,8 +454,8 @@ export class VizSpecStore {
                 [movingField] = encodings[sourceKey].splice(sourceIndex, 1);
             }
             // 目的地是metafields的情况，只有在来源也是metafields时，会执行字段类型转化操作
-            if (MetaFieldKeys.includes(destinationKey)) {
-                if (!MetaFieldKeys.includes(sourceKey)) return;
+            if (GLOBAL_CONFIG.META_FIELD_KEYS.includes(destinationKey)) {
+                if (!GLOBAL_CONFIG.META_FIELD_KEYS.includes(sourceKey)) return;
                 encodings[sourceKey].splice(sourceIndex, 1);
                 movingField.analyticType = destinationKey === 'dimensions' ? 'dimension' : 'measure';
             }
@@ -466,15 +466,15 @@ export class VizSpecStore {
         });
     }
     public removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number) {
-        if (MetaFieldKeys.includes(sourceKey)) return;
+        if (GLOBAL_CONFIG.META_FIELD_KEYS.includes(sourceKey)) return;
 
         this.useMutable(({ encodings }) => {
             const fields = encodings[sourceKey];
             fields.splice(sourceIndex, 1);
         });
     }
     public replaceField(sourceKey: keyof DraggableFieldState, sourceIndex: number, fid: string) {
-        if (MetaFieldKeys.includes(sourceKey)) return;
+        if (GLOBAL_CONFIG.META_FIELD_KEYS.includes(sourceKey)) return;
         const enteringField = [...this.draggableFieldState.dimensions, ...this.draggableFieldState.measures].find((which) => which.fid === fid);
         if (!enteringField) {
             return;
@@ -666,7 +666,7 @@ export class VizSpecStore {
         });
     }
     public appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined, overrideAttr?: Record<string, any>) {
-        if (MetaFieldKeys.includes(destinationKey)) return;
+        if (GLOBAL_CONFIG.META_FIELD_KEYS.includes(destinationKey)) return;
         if (typeof field === 'undefined') return;
         if (destinationKey === 'filters') {
             return;
@@ -692,7 +692,7 @@ export class VizSpecStore {
         if (!tab) return;
         const fields = tab.encodings.dimensions.concat(tab.encodings.measures);
         const countField = fields.find((f) => f.fid === COUNT_FIELD_ID);
-        const renderVLFacet = (vlFacet) => {
+        const renderVLFacet = (vlFacet: any) => {
             if (vlFacet.facet) {
                 this.appendField('rows', fields.find((f) => f.fid === vlFacet.facet.field) || countField, { analyticType: 'dimension' });
             }
@@ -703,8 +703,8 @@ export class VizSpecStore {
                 this.appendField('columns', fields.find((f) => f.fid === vlFacet.column.field) || countField, { analyticType: 'dimension' });
             }
         };
-        const isValidAggregate = (aggName) => aggName && ['sum', 'count', 'max', 'min', 'mean', 'median', 'variance', 'stdev'].includes(aggName);
-        const renderVLSpec = (vlSpec) => {
+        const isValidAggregate = (aggName: string) => aggName && (GLOBAL_CONFIG.AGGREGATOR_LIST as string[]).includes(aggName);
+        const renderVLSpec = (vlSpec: any) => {
             if (typeof vlSpec.mark === 'string') {
                 this.setVisualConfig('geoms', [geomAdapter(vlSpec.mark)]);
             } else {