@kanaries/graphic-walker 0.2.11 → 0.2.12

package/src/index.tsx

@@ -3,7 +3,7 @@ import { StyleSheetManager } from 'styled-components';
 import root from 'react-shadow';
 import { DOM } from '@kanaries/react-beautiful-dnd';
 import { observer } from 'mobx-react-lite';
-import App, { EditorProps } from './App';
+import App, { IGWProps } from './App';
 import { StoreWrapper } from './store/index';
 import { FieldsContextWrapper } from './fields/fieldsContext';
 
@@ -14,10 +14,9 @@ import style from './index.css?inline';
 
 export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
 
-export const GraphicWalker: React.FC<EditorProps> = observer(props => {
+export const GraphicWalker: React.FC<IGWProps> = observer(props => {
     const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
     const rootRef = useRef<HTMLDivElement>(null);
-    const fixContainer = props.fixContainer ?? false;
 
     useEffect(() => {
         if (rootRef.current) {
@@ -38,7 +37,7 @@ export const GraphicWalker: React.FC<EditorProps> = observer(props => {
             <style>{style}</style>
             {shadowRoot && (
                 <StyleSheetManager target={shadowRoot}>
-                    <StoreWrapper keepAlive={props.keepAlive} rootContainer={fixContainer ? rootRef.current : null}>
+                    <StoreWrapper keepAlive={props.keepAlive}>
                         <FieldsContextWrapper>
                             <ShadowDomContext.Provider value={{ root: shadowRoot }}>
                                 <App {...props} />

package/src/interfaces.ts

@@ -27,6 +27,15 @@ export interface IMutField {
     analyticType: IAnalyticType;
 };
 
+export interface IUncertainMutField {
+    fid: string;
+    key?: string;
+    name?: string;
+    disable?: boolean;
+    semanticType: ISemanticType | '?';
+    analyticType: IAnalyticType | '?';
+}
+
 export interface IField {
     /**
      * fid: key in data record

package/src/lib/inferMeta.ts

@@ -0,0 +1,88 @@
+import { IAnalyticType, ISemanticType, UnivariateSummary } from "visual-insights";
+import { IMutField, IRow, IUncertainMutField } from "../interfaces";
+
+const COMMON_TIME_FORMAT: RegExp[] = [
+    /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
+    /^\d{2}\/\d{2}\/\d{4}$/, // MM/DD/YYYY
+    /^\d{2}\/\d{2}\/\d{4}$/, // DD/MM/YYYY
+    /^\d{4}\/\d{2}\/\d{2}$/, // YYYY/MM/DD
+    /^\d{4}\.\d{2}\.\d{2}$/, // YYYY.MM.DD
+    /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/, // YYYY-MM-DD HH:MM:SS
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/ // YYYY-MM-DDTHH:MM:SS (ISO-8601)
+];
+
+/**
+ * check if this array is a date time array based on some common date format
+ * @param data string array
+ * @returns 
+ */
+export function isDateTimeArray(data: string[]): boolean {
+    let isDateTime = true;
+    for (let d of data) {
+        let isDateTimeItem = false;
+        for (let r of COMMON_TIME_FORMAT) {
+            if (r.test(d)) {
+                isDateTimeItem = true;
+                break;
+            }
+        }
+        if (!isDateTimeItem) {
+            isDateTime = false;
+            break;
+        }
+    }
+    return isDateTime;
+}
+
+function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyticType {
+    switch (semanticType) {
+        case 'quantitative':
+            return 'measure';
+        default:
+            return 'dimension';
+    }
+}
+
+/**
+ * 这里目前暂时包一层，是为了解耦具体的推断实现。后续这里要调整推断的逻辑。
+ * 需要讨论这一层是否和交互层有关，如果没有关系，这一层包裹可以不存在这里，而是在visual-insights中。
+ * @param data 原始数据
+ * @param fid 字段id
+ * @returns semantic type 列表
+ */
+export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
+    let st = UnivariateSummary.getFieldType(data, fid);
+    if (st === 'nominal') {
+        if (isDateTimeArray(data.map((row) => row[fid]))) st = 'temporal';
+    } else if (st === 'ordinal') {
+        const valueSet: Set<number> = new Set();
+        let _max = -Infinity;
+        let _min = Infinity;
+        for (let v of valueSet) {
+            _max = Math.max(_max, v);
+            _min = Math.max(_min, v);
+        }
+        if (_max - _min + 1 !== valueSet.size) {
+            st = 'quantitative';
+        }
+    }
+    return st;
+}
+
+export function inferMeta (props: { dataSource: IRow[]; fields: IUncertainMutField[] }): IMutField[] {
+    const { dataSource, fields } = props;
+    const finalFieldMetas: IMutField[] = []
+    for (let field of fields) {
+        let semanticType: ISemanticType = field.semanticType === '?' ? inferSemanticType(dataSource, field.fid) : field.semanticType;
+        let analyticType: IAnalyticType = inferAnalyticTypeFromSemanticType(semanticType);
+
+        finalFieldMetas.push({
+            fid: field.fid,
+            key: field.key ? field.key : field.fid,
+            name: field.name ? field.name : field.fid,
+            analyticType,
+            semanticType,
+        })
+    }
+    return finalFieldMetas
+}

package/src/locales/en-US.json

@@ -5,6 +5,12 @@
             "dimension": "dimension",
             "measure": "measure"
         },
+        "semantic_type": {
+            "nominal": "nominal",
+            "ordinal": "ordinal",
+            "temporal": "temporal",
+            "quantitative": "quantitative"
+        },
         "mark_type": {
             "__enum__": "Mark Type",
             "auto": "Auto",

package/src/locales/zh-CN.json

@@ -5,6 +5,12 @@
             "dimension": "维度",
             "measure": "度量"
         },
+        "semantic_type": {
+            "nominal": "类别类型",
+            "ordinal": "有序类型",
+            "temporal": "时间类型",
+            "quantitative": "数值类型"
+        },
         "mark_type": {
             "__enum__": "标记类型",
             "auto": "自动",

package/src/main.tsx

@@ -9,7 +9,7 @@ inject();
 
 ReactDOM.render(
     <React.StrictMode>
-      <GraphicWalker />
+        <GraphicWalker />
     </React.StrictMode>,
     document.getElementById("root")
 );

package/src/store/commonStore.ts

@@ -13,7 +13,6 @@ export class CommonStore {
     public showDSPanel: boolean = false;
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
-    public rootContainer: HTMLDivElement | null = null;
 
     public filters: Filters = {};
     constructor () {
@@ -22,8 +21,7 @@ export class CommonStore {
         makeAutoObservable(this, {
             dataSources: observable.ref,
             tmpDataSource: observable.ref,
-            filters: observable.ref,
-            rootContainer: false
+            filters: observable.ref
         });
     }
     public get currentDataset (): DataSet {
@@ -75,6 +73,13 @@ export class CommonStore {
         }
     }
 
+    public updateTempFieldSemanticType (fieldKey: string, semanticType: IMutField['semanticType']) {
+        const field = this.tmpDSRawFields.find(f => f.fid === fieldKey);
+        if (field) {
+            field.semanticType = semanticType;
+        }
+    }
+
     public updateTempName (name: string) {
         this.tmpDSName = name;
     }

package/src/store/index.tsx

@@ -31,7 +31,6 @@ export function rebootGWStore() {
 
 interface StoreWrapperProps {
     keepAlive?: boolean;
-    rootContainer?: HTMLDivElement | null;
 }
 export class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps) {
@@ -46,7 +45,6 @@ export class StoreWrapper extends React.Component<StoreWrapperProps> {
         }
     }
     render() {
-        initStore.commonStore.rootContainer = this.props.rootContainer ?? null;
         return <StoreContext.Provider value={initStore}>
             { this.props.children }
         </StoreContext.Provider>