@kanaries/graphic-walker 0.2.11 → 0.2.13

package/src/components/dataTable/pagination.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+interface PaginationProps {
+    from: number;
+    to: number;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+}
+export default function Pagination(props: PaginationProps) {
+    const { from , to, total, onNext, onPrev } = props;
+    const { t } = useTranslation();
+    return (
+        <nav
+            className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+            aria-label="Pagination"
+        >
+            <div className="hidden sm:block">
+                <p className="text-sm text-gray-700">
+                    Showing <span className="font-medium">{from}</span> to <span className="font-medium">{to}</span> of{" "}
+                    <span className="font-medium">{total}</span> results
+                </p>
+            </div>
+            <div className="flex flex-1 justify-between sm:justify-end">
+                <button
+                    onClick={() => {
+                        onPrev();
+                    }}
+                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                >
+                    {t('actions.prev')}
+                </button>
+                <button
+                    onClick={() => {
+                        onNext()
+                    }}
+                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                >
+                    {t('actions.next')}
+                </button>
+            </div>
+        </nav>
+    );
+}

package/src/components/tabs/defaultTab.tsx

@@ -0,0 +1,43 @@
+import React, { ReactElement } from "react";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export interface ITabOption {
+    label: string | ReactElement;
+    key: string;
+}
+interface DefaultProps {
+    tabs: ITabOption[];
+    selectedKey: string;
+    onSelected: (selectedKey: string, index: number) => void;
+    allowEdit?: boolean;
+    onEditLabel?: (label: string, index: number) => void;
+}
+export default function Default(props: DefaultProps) {
+    const { tabs, selectedKey, onSelected } = props;
+
+    return (
+        <div className="border-b border-gray-200 mb-2" >
+            <nav className="-mb-px flex space-x-8" role="tablist" aria-label="Tabs">
+                {tabs.map((tab, tabIndex) => (
+                    <span
+                        role="tab"
+                        tabIndex={0}
+                        onClick={() => {
+                            onSelected(tab.key, tabIndex)
+                        }}
+                        key={tab.key}
+                        className={classNames(
+                            tab.key === selectedKey
+                            ? 'border-indigo-500 text-indigo-600'
+                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm'
+                        )}
+                    >{tab.label}</span>
+                ))}
+            </nav>
+        </div>
+    );
+}

package/src/components/tabs/{pureTab.tsx → editableTab.tsx}

@@ -11,14 +11,14 @@ export interface ITabOption {
     key: string;
     options?: Record<string, any>;
 }
-interface PureTabsProps {
+interface EditableTabsProps {
     tabs: ITabOption[];
     selectedKey: string;
     onSelected: (selectedKey: string, index: number) => void;
     allowEdit?: boolean;
     onEditLabel?: (label: string, index: number) => void;
 }
-export default function PureTabs(props: PureTabsProps) {
+export default function EditableTabs(props: EditableTabsProps) {
     const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
     const [editList, setEditList] = useState<boolean[]>([]);
     const { t } = useTranslation();
@@ -66,7 +66,7 @@ export default function PureTabs(props: PureTabsProps) {
                             tab.key === selectedKey
                                 ? "text-black bg-gray-100"
                                 : "text-gray-500 hover:text-gray-700",
-                            "whitespace-nowrap border-gray-200 py-1 px-2 border-t border-r border-b pr-6 text-sm cursor-pointer"
+                            "whitespace-nowrap border-gray-200 py-1 px-2 border-r border-t border-b pr-6 text-sm cursor-pointer"
                         )}
                     />
                 ))}

package/src/dataSource/dataSelection/csvData.tsx

@@ -6,6 +6,8 @@ import styled from "styled-components";
 import { useGlobalStore } from "../../store";
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
+import DefaultButton from "../../components/button/default";
+import PrimaryButton from "../../components/button/primary";
 
 const Container = styled.div`
     overflow-x: auto;
@@ -44,25 +46,21 @@ const CSVData: React.FC<ICSVData> = (props) => {
                 }}
             />
             <div className="mt-1 mb-1">
-                <button
-                    className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm cursor-pointer hover:bg-gray-200"
+                <DefaultButton
                     onClick={() => {
                         if (fileRef.current) {
                             fileRef.current.click();
                         }
                     }}
-                >
-                    {t("open")}
-                </button>
-                <button
-                    className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 bg-black rounded-sm hover:bg-gray-500 text-white font-bold disabled:bg-gray-300"
+                    text={t("open")}
+                />
+                <PrimaryButton
+                    text={t("submit")}
                     disabled={tmpDataSource.length === 0}
                     onClick={() => {
                         onSubmitData();
                     }}
-                >
-                    {t("submit")}
-                </button>
+                />
             </div>
             <div className="my-2">
                 <label className="block text-xs text-gray-800 mb-1 font-bold">{t("dataset_name")}</label>

package/src/dataSource/dataSelection/index.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import CSVData from "./csvData";
 import PublicData from "./publicData";
 import { useTranslation } from "react-i18next";
-import PureTabs from "../../components/tabs/pureTab";
+import PureTabs from "../../components/tabs/editableTab";
 
 const DataSelection: React.FC = (props) => {
     const [sourceType, setSourceType] = useState<"file" | "public">("file");

package/src/dataSource/dataSelection/publicData.tsx

@@ -4,6 +4,7 @@ import { DemoDataAssets, PUBLIC_DATA_LIST } from '../config'
 import { useGlobalStore } from '../../store';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
+import PrimaryButton from '../../components/button/primary';
 
 
 interface IPublicDataProps {
@@ -43,12 +44,11 @@ const PublicData: React.FC<IPublicDataProps> = props => {
             }
         </div>
         <hr className="m-1" />
-        <button className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 bg-black rounded-sm hover:bg-gray-500 text-white font-bold disabled:bg-gray-300"
+        <PrimaryButton
             disabled={tmpDataSource.length === 0}
             onClick={() => { commonStore.commitTempDS() }}
-        >
-            {t('submit')}
-        </button>
+            text={t('submit')}
+        />
         <hr className="m-1" />
         <Table />
     </div>

package/src/dataSource/datasetConfig/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DatasetTable from "../../components/dataTable";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+
+const DatasetConfig: React.FC = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { currentDataset } = commonStore;
+    const { dataSource, rawFields } = currentDataset;
+    return (
+        <div>
+            <DatasetTable size={100} data={dataSource} metas={rawFields}
+                onMetaChange={(fid, fIndex, diffMeta) => {
+                    commonStore.updateCurrentDatasetMetas(fid, diffMeta)
+                }}
+            />
+        </div>
+    );
+};
+
+export default observer(DatasetConfig);

package/src/dataSource/index.tsx

@@ -8,6 +8,7 @@ import { useGlobalStore } from '../store';
 import { download } from '../utils/save';
 import GwFile from './dataSelection/gwFile';
 import DataSelection from './dataSelection';
+import DefaultButton from '../components/button/default';
 
 interface DSSegmentProps {
     preWorkDone: boolean;
@@ -39,28 +40,25 @@ const DataSourceSegment: React.FC<DSSegmentProps> = props => {
             ))}
         </select>
 
-        <button className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-200"
+        <DefaultButton
+            text={t('DataSource.buttons.create_dataset')}
             onClick={() => { commonStore.startDSBuildingTask() }}
-        >
-            {t('DataSource.buttons.create_dataset')}
-        </button>
-        <button className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-200"
+        />
+        <DefaultButton
+            text={t('DataSource.buttons.export_as_file')}
             onClick={() => {
                 const res = vizStore.exportAsRaw();
                 download(res, 'graphic-walker-notebook.json', 'text/plain')
             }}
-        >
-            {t('DataSource.buttons.export_as_file')}
-        </button>
-        <button className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-200"
+        />
+        <DefaultButton
+            text={t('DataSource.buttons.import_file')}
             onClick={() => {
                 if (gwFileRef.current) {
                     gwFileRef.current.click();
                 }
             }}
-        >
-            {t('DataSource.buttons.import_file')}
-        </button>
+        />
         {showDSPanel && (
             <Modal
                 title={t('DataSource.dialog.create_data_source')}

package/src/dataSource/table.tsx

@@ -1,158 +1,27 @@
-import React, { useMemo } from "react";
-import styled from "styled-components";
+import React from "react";
 import { observer } from "mobx-react-lite";
-import { IMutField } from "../interfaces";
 import { useGlobalStore } from "../store";
-import { useTranslation } from "react-i18next";
+import DataTable from "../components/dataTable";
+import { toJS } from "mobx";
 
 interface TableProps {
     size?: number;
 }
-const Container = styled.div`
-    overflow-x: auto;
-    table {
-        box-sizing: content-box;
-        border-collapse: collapse;
-        font-size: 12px;
-        thead {
-            th {
-            }
-            th.number {
-                border-top: 3px solid #5cdbd3;
-            }
-            th.text {
-                border-top: 3px solid #69c0ff;
-            }
-        }
-        tbody {
-            td {
-            }
-            td.number {
-                text-align: right;
-            }
-            td.text {
-                text-align: left;
-            }
-        }
-    }
-`;
-const TYPE_LIST = [
-    {
-        value: "dimension",
-        label: "维度",
-    },
-    {
-        value: "measure",
-        label: "度量",
-    },
-];
-// function getCellType(field: IMutField): 'number' | 'text' {
-//     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
-// }
-function getHeaderType(field: IMutField): "number" | "text" {
-    return field.analyticType === "dimension" ? "text" : "number";
-}
-
-function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
-}
-
-function getSemanticColors(field: IMutField): string {
-    switch (field.semanticType) {
-        case "nominal":
-            return "bg-indigo-100 text-indigo-800";
-        case "ordinal":
-            return "bg-purple-100 text-purple-800"
-        case "quantitative":
-            return "bg-green-100 text-green-800"
-        case "temporal":
-            return "bg-yellow-100 text-yellow-800"
-        default:
-            return "bg-gray-400";
-    }
-}
 
 const Table: React.FC<TableProps> = (props) => {
     const { size = 10 } = props;
     const { commonStore } = useGlobalStore();
     const { tmpDSRawFields, tmpDataSource } = commonStore;
-    const { t } = useTranslation();
-
-    const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
-        return TYPE_LIST.map((at) => ({
-            value: at.value,
-            label: t(`constant.analytic_type.${at.value}`),
-        }));
-    }, []);
 
     return (
-        <Container className="rounded border-gray-200 border">
-            <table className="min-w-full divide-y divide-gray-30">
-                <thead className="bg-gray-50">
-                    <tr className="divide-x divide-gray-200">
-                        {tmpDSRawFields.map((field, fIndex) => (
-                            <th key={field.fid} className={""}>
-                                <div
-                                    className={
-                                        getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
-                                    }
-                                >
-                                    <b>{field.name || field.fid}</b>
-                                    <div>
-                                        <select
-                                            className={
-                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
-                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.analyticType}
-                                            onChange={(e) => {
-                                                commonStore.updateTempFieldAnalyticType(
-                                                    field.fid,
-                                                    e.target.value as IMutField["analyticType"]
-                                                );
-                                            }}
-                                        >
-                                            {analyticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    </div>
-                                    <div
-                                        className={
-                                            "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                            getSemanticColors(field)
-                                        }
-                                    >
-                                        {field.semanticType}
-                                    </div>
-                                </div>
-                            </th>
-                        ))}
-                    </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
-                    {tmpDataSource.slice(0, size).map((record, index) => (
-                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
-                            {tmpDSRawFields.map((field) => (
-                                <td
-                                    key={field.fid + index}
-                                    className={
-                                        getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
-                                    }
-                                >
-                                    {record[field.fid]}
-                                </td>
-                            ))}
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </Container>
+        <DataTable
+            size={size}
+            metas={toJS(tmpDSRawFields)}
+            data={tmpDataSource}
+            onMetaChange={(fid, fIndex, diffMeta) => {
+                commonStore.updateTempDatasetMetas(fid, diffMeta);
+            }}
+        />
     );
 };
 

package/src/dataSource/utils.ts

@@ -1,47 +1,42 @@
-import { IRow, IMutField } from '../interfaces';
-import { Insight } from 'visual-insights';
+import { IRow, IMutField } from "../interfaces";
+import { inferMeta } from "../lib/inferMeta";
+import { guardDataKeys } from "../utils/dataPrep";
 
 export function transData(dataSource: IRow[]): {
     dataSource: IRow[];
-    fields: IMutField[]
+    fields: IMutField[];
 } {
-    if (dataSource.length === 0) return {
-        dataSource: [],
-        fields: []
-    };
-    let ans: IRow[] = [];
+    if (dataSource.length === 0) {
+        return {
+            dataSource: [],
+            fields: [],
+        };
+    }
     const keys = Object.keys(dataSource[0]);
-    // TODO: 冗余设计，单变量统计被进行了多次重复计算。另外对于这种不完整的分析任务，不建议使用VIEngine。
-    const vie = new Insight.VIEngine();
-    vie.setData(dataSource)
-        .setFields(keys.map(k => ({
+    const metas = inferMeta({
+        dataSource,
+        fields: keys.map((k) => ({
+            fid: k,
             key: k,
-            analyticType: '?',
-            dataType: '?',
-            semanticType: '?'
-        })))
-    // TODO: 结合上面的TODO，讨论，VIEngine是否要提供不需要进行univarSelection就提供summary的接口。
-    // 这里我们使用了一种非原API设计时期待的用法，即强制指定单变量选择时要全选字段。但我们无法阻止对变量的转换。
-    vie.univarSelection('percent', 1);
-    const fields = vie.fields;
-    for (let record of dataSource) {
+            analyticType: "?",
+            semanticType: "?",
+        })),
+    });
+    const { safeData, safeMetas } = guardDataKeys(dataSource, metas);
+    const finalData: IRow[] = [];
+    for (let record of safeData) {
         const newRecord: IRow = {};
-        for (let field of fields) {
-            if (field.dataType === 'number' || field.dataType === 'integer') {
-                newRecord[field.key] = Number(record[field.key])
+        for (let field of safeMetas) {
+            if (field.semanticType === "quantitative") {
+                newRecord[field.fid] = Number(record[field.fid]);
             } else {
-                newRecord[field.key] = record[field.key]
+                newRecord[field.fid] = record[field.fid];
             }
         }
-        ans.push(newRecord);
+        finalData.push(newRecord);
     }
     return {
-        dataSource: ans,
-        fields: fields.map(f => ({
-            fid: f.key,
-            analyticType: f.analyticType,
-            dataType: f.dataType,
-            semanticType: f.semanticType
-        }))
-    }
-}
+        dataSource: finalData,
+        fields: safeMetas
+    };
+}

package/src/fields/datasetFields/dimFields.tsx

@@ -4,22 +4,18 @@ import { observer } from 'mobx-react-lite';
 import { useGlobalStore } from '../../store';
 import DataTypeIcon from '../../components/dataTypeIcon';
 import { FieldPill } from './fieldPill';
-import { fixDraggableOffset } from '../../pitch/dnd-offset';
 
 interface Props {
     provided: DroppableProvided;
 }
 const DimFields: React.FC<Props> = props => {
     const { provided } = props;
-    const { vizStore, commonStore } = useGlobalStore();
+    const { vizStore } = useGlobalStore();
     const dimensions = vizStore.draggableFieldState.dimensions;
     return <div {...provided.droppableProps} ref={provided.innerRef}>
         {dimensions.map((f, index) => (
             <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                 {(provided, snapshot) => {
-                    if (snapshot.isDragging && provided.draggableProps.style) {
-                        fixDraggableOffset(provided, commonStore.rootContainer)
-                    }
           
                     return (
                         <>

package/src/fields/datasetFields/meaFields.tsx

@@ -4,22 +4,18 @@ import { observer } from 'mobx-react-lite';
 import { useGlobalStore } from '../../store';
 import DataTypeIcon from '../../components/dataTypeIcon';
 import { FieldPill } from './fieldPill';
-import { fixDraggableOffset } from '../../pitch/dnd-offset';
 
 interface Props {
     provided: DroppableProvided;
 }
 const MeaFields: React.FC<Props> = props => {
     const { provided } = props;
-    const { vizStore, commonStore } = useGlobalStore();
+    const { vizStore } = useGlobalStore();
     const measures = vizStore.draggableFieldState.measures;
     return <div {...provided.droppableProps} ref={provided.innerRef}>
         {measures.map((f, index) => (
             <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                 {(provided, snapshot) => {
-                    if (snapshot.isDragging && provided.draggableProps.style) {
-                        fixDraggableOffset(provided, commonStore.rootContainer)
-                    }
                     return (
                         <>
                             <FieldPill

package/src/fields/obComponents/obFContainer.tsx

@@ -8,7 +8,6 @@ import {
 } from "@kanaries/react-beautiful-dnd";
 import { IDraggableStateKey } from '../../interfaces';
 import OBPill from './obPill';
-import { fixDraggableOffset } from '../../pitch/dnd-offset';
 
 interface FieldContainerProps {
     provided: DroppableProvided
@@ -19,7 +18,7 @@ interface FieldContainerProps {
 }
 const OBFieldContainer: React.FC<FieldContainerProps> = props => {
     const { provided, dkey } = props;
-    const { vizStore, commonStore } = useGlobalStore();
+    const { vizStore} = useGlobalStore();
     const { draggableFieldState } = vizStore;
     return <FieldsContainer
         {...provided.droppableProps}
@@ -29,9 +28,6 @@ const OBFieldContainer: React.FC<FieldContainerProps> = props => {
         {draggableFieldState[dkey.id].map((f, index) => (
             <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                 {(provided, snapshot) => {
-                    if (snapshot.isDragging && provided.draggableProps.style) {
-                        fixDraggableOffset(provided, commonStore.rootContainer)
-                    }
                     return (
                         <OBPill dkey={dkey} fIndex={index} provided={provided} />
                     );

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
@@ -169,4 +178,9 @@ export interface IVisSpec {
     readonly name?: [string, Record<string, any>?];
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
+}
+
+export enum ISegmentKey {
+    vis = 'vis',
+    data = 'data'
 }