@kanaries/graphic-walker 0.2.4 → 0.2.6

package/src/dataSource/dataSelection/csvData.tsx

@@ -0,0 +1,77 @@
+import React, { useRef, useCallback } from 'react';
+import { FileReader } from '@kanaries/web-data-loader';
+import { IRow } from '../../interfaces';
+import Table from '../table';
+import styled from 'styled-components';
+import { useGlobalStore } from '../../store';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+const Container = styled.div`
+    overflow-x: auto;
+`;
+
+interface ICSVData {
+}
+const CSVData: React.FC<ICSVData> = props => {
+    const fileRef = useRef<HTMLInputElement>(null);
+    const { commonStore } = useGlobalStore();
+    const { tmpDSName, tmpDataSource } = commonStore;
+
+    const onSubmitData = useCallback(() => {
+        commonStore.commitTempDS();
+    }, []);
+
+    const { t } = useTranslation('translation', { keyPrefix: 'DataSource.dialog.file' });
+
+    return (
+        <Container>
+            <input
+                style={{ display: 'none' }}
+                type="file"
+                ref={fileRef}
+                onChange={(e) => {
+                    const files = e.target.files;
+                    if (files !== null) {
+                        const file = files[0];
+                        FileReader.csvReader({
+                            file,
+                            config: { type: 'reservoirSampling', size: Infinity },
+                            onLoading: () => {}
+                        }).then((data) => {
+                            commonStore.updateTempDS(data as IRow[]);
+                        });
+                    }
+                }}
+            />
+            <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"
+                    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-yellow-600 rounded-sm hover:bg-yellow-500 text-white font-bold disabled:bg-gray-300"
+                    disabled={tmpDataSource.length === 0}
+                    onClick={() => { onSubmitData(); }}
+                >
+                    {t('submit')}
+                </button>
+            </div>
+            <div className="mt-1 mb-1">
+                <label className="block text-xs text-gray-800">
+                    {t('dataset_name')}
+                </label>
+                <input type="text" placeholder={t('dataset_name')}
+                    value={tmpDSName}
+                    onChange={e => {
+                        commonStore.updateTempName(e.target.value)
+                    }}
+                    className="text-xs p-1 border border-gray-300 outline-none focus:outline-none focus:border-blue-500"
+                />
+            </div>
+            <Table />
+        </Container>
+    );
+}
+
+export default observer(CSVData);

package/src/dataSource/dataSelection/gwFile.tsx

@@ -0,0 +1,38 @@
+import React, { useRef, useCallback } from "react";
+import { FileReader } from "@kanaries/web-data-loader";
+import { IRow } from "../../interfaces";
+import Table from "../table";
+import styled from "styled-components";
+import { useGlobalStore } from "../../store";
+import { observer } from "mobx-react-lite";
+import { useTranslation } from "react-i18next";
+
+const Container = styled.div`
+    overflow-x: auto;
+`;
+
+interface GWFileProps {
+    fileRef: React.RefObject<HTMLInputElement>;
+}
+const GWFile: React.FC<GWFileProps> = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+
+    return (
+        <input
+            style={{ display: "none" }}
+            type="file"
+            ref={props.fileRef}
+            onChange={(e) => {
+                const files = e.target.files;
+                if (files !== null) {
+                    const file = files[0];
+                    file.text().then(res => {
+                        vizStore.importRaw(res)
+                    })
+                }
+            }}
+        />
+    );
+};
+
+export default observer(GWFile);

package/src/dataSource/dataSelection/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useState } from 'react';
+import CSVData from './csvData';
+import PublicData from './publicData';
+import { useTranslation } from 'react-i18next';
+
+interface IDataSelectionProps {
+
+}
+
+const DataSelection: React.FC = props =>{
+    const [sourceType, setSourceType] = useState<'file' | 'public'>('file');
+    const { t } = useTranslation('translation', { keyPrefix: 'DataSource' });
+
+    return <div className="grid grid-cols-6 text-sm">
+        <div className="col-span-1 bg-gray-100 pl-2 pr-2 pb-2 pt-1 text-xs">
+            <h1 className="cursor-default">
+                {t('dialog.data_types')}
+            </h1>
+            <hr className="mt-1 mb-1" />
+            <div
+                className={
+                    `pb-1 cursor-pointer ${
+                        sourceType === 'file' ? 'underline' : ''
+                    } hover:bg-gray-200 hover:text-purple-600`
+                }
+                onClick={() => { setSourceType('file'); }}
+            >
+                {t('dialog.text_file_data')}
+            </div>
+            <div
+                className={
+                    `pb-1 cursor-pointer ${
+                        sourceType === 'public' ? 'underline' : ''
+                    } hover:bg-gray-200 hover:text-purple-600`
+                }
+                onClick={() => { setSourceType('public'); }}
+            >
+                {t('dialog.public_data')}
+            </div>
+        </div>
+        <div className="col-span-5 pl-2 pr-2">
+            <h1 className="text-base font-semibold">
+                {t('dialog.data_source_type', { sourceType })}
+            </h1>
+            <hr className="mt-1 mb-1" />
+            {
+                sourceType === 'file' && <CSVData />
+            }
+            {
+                sourceType === 'public' && <PublicData />
+            }
+        </div>
+    </div>
+}
+
+export default DataSelection;

package/src/dataSource/dataSelection/publicData.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Table from '../table';
+import { DemoDataAssets, PUBLIC_DATA_LIST } from '../config'
+import { useGlobalStore } from '../../store';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+
+interface IPublicDataProps {
+
+}
+
+const PublicData: React.FC<IPublicDataProps> = props => {
+    const { commonStore } = useGlobalStore();
+    const { tmpDataSource } = commonStore;
+    const { t } = useTranslation('translation', { keyPrefix: 'DataSource.dialog.public' });
+
+    return <div>
+        <div className="h-48 overflow-auto mb-1">
+            {
+                PUBLIC_DATA_LIST.map(data => <div key={data.key}
+                    onClick={() => {
+                        fetch(DemoDataAssets[data.key]).then(res => res.json())
+                        .then(res => {
+                            commonStore.updateTempSTDDS({
+                                dataSource: res.dataSource,
+                                rawFields: res.fields.map(f => ({
+                                    fid: f.fid,
+                                    name: f.name,
+                                    analyticType: f.analyticType,
+                                    semanticType: f.semanticType,
+                                    dataType: f.dataType || '?'
+                                })),
+                                name: data.title
+                            })
+                        })
+                    }}
+                    className="border rounded border-gray-400 p-2 m-2 cursor-pointer hover:bg-gray-50"
+                    >
+                <div>{data.title}</div>
+                {/* <p>{data.title}</p> */}
+            </div>)
+            }
+        </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-yellow-600 rounded-sm hover:bg-yellow-500 text-white font-bold disabled:bg-gray-300"
+            disabled={tmpDataSource.length === 0}
+            onClick={() => { commonStore.commitTempDS() }}
+        >
+            {t('submit')}
+        </button>
+        <hr className="m-1" />
+        <Table />
+    </div>
+}
+
+export default observer(PublicData);

package/src/dataSource/index.tsx

@@ -0,0 +1,78 @@
+import React, { useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { CheckCircleIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useTranslation } from 'react-i18next';
+import { Container } from '../components/container';
+import Modal from '../components/modal';
+import { useGlobalStore } from '../store';
+import { download } from '../utils/save';
+import GwFile from './dataSelection/gwFile';
+import DataSelection from './dataSelection';
+
+interface DSSegmentProps {
+    preWorkDone: boolean;
+}
+
+const DataSourceSegment: React.FC<DSSegmentProps> = props => {
+    const { preWorkDone } = props;
+    const { commonStore, vizStore } = useGlobalStore();
+    const gwFileRef = useRef<HTMLInputElement>(null);
+    const { t } = useTranslation();
+
+    const { currentDataset, datasets, showDSPanel } = commonStore;
+
+    return <Container className="flex flex-row items-stretch">
+        <GwFile fileRef={gwFileRef} />
+        {!preWorkDone && <div className="animate-spin inline-block mr-2 ml-2 w-4 h-4 rounded-full border-t-2 border-l-2 border-blue-500"></div>}
+        <label className="text-xs mr-1 whitespace-nowrap self-center h-4">
+            {t('DataSource.labels.cur_dataset')}
+        </label>
+        <select
+            className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2"
+            value={currentDataset.id}
+            onChange={(e) => { commonStore.useDS(e.target.value); }}
+        >
+            {datasets.map((ds) => (
+                <option value={ds.id} key={ds.id}>
+                    {ds.name}
+                </option>
+            ))}
+        </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"
+            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"
+            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"
+            onClick={() => {
+                if (gwFileRef.current) {
+                    gwFileRef.current.click();
+                }
+            }}
+        >
+            {t('DataSource.buttons.import_file')}
+        </button>
+        {showDSPanel && (
+            <Modal
+                title={t('DataSource.dialog.create_data_source')}
+                onClose={() => { commonStore.setShowDSPanel(false) }}
+            >
+                <DataSelection />
+                {/* <DataSourcePanel /> */}
+            </Modal>
+        )}
+        { preWorkDone && <CheckCircleIcon className="text-green-500 w-5 inline-block ml-2" /> }
+        { !preWorkDone && <ArrowPathIcon className="text-yellow-500 w-5 inline-block ml-2" />}
+    </Container>
+}
+
+export default observer(DataSourceSegment);

package/src/dataSource/pannel.tsx

@@ -0,0 +1,71 @@
+import React, { useRef, useCallback } from 'react';
+import { FileReader } from '@kanaries/web-data-loader';
+import { IRow } from '../interfaces';
+import Table from './table';
+import styled from 'styled-components';
+import { useGlobalStore } from '../store';
+import { observer } from 'mobx-react-lite';
+
+const Container = styled.div`
+    overflow-x: auto;
+`;
+
+interface DSPanelProps {
+}
+const DataSourcePanel: React.FC<DSPanelProps> = props => {
+    const fileRef = useRef<HTMLInputElement>(null);
+    const { commonStore } = useGlobalStore();
+    const { tmpDSName, tmpDataSource } = commonStore;
+
+    const onSubmitData = useCallback(() => {
+        commonStore.commitTempDS();
+    }, [])
+    return (
+        <Container>
+            <input
+                style={{ display: 'none' }}
+                type="file"
+                ref={fileRef}
+                onChange={(e) => {
+                    const files = e.target.files;
+                    if (files !== null) {
+                        const file = files[0];
+                        FileReader.csvReader({
+                            file,
+                            config: { type: 'reservoirSampling', size: Infinity },
+                            onLoading: () => {}
+                        }).then((data) => {
+                            commonStore.updateTempDS(data as IRow[]);
+                        });
+                    }
+                }}
+            />
+            <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"
+                    onClick={() => { if (fileRef.current) { fileRef.current.click(); }}}
+                >
+                    上传数据
+                </button>
+                <button className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 bg-yellow-600 rounded-sm hover:bg-yellow-500 text-white font-bold disabled:bg-gray-300"
+                    disabled={tmpDataSource.length === 0}
+                    onClick={() => { onSubmitData(); }}
+                >
+                    确认
+                </button>
+            </div>
+            <div className="mt-1 mb-1">
+                <label className="block text-xs text-gray-800">数据集名称</label>
+                <input type="text" placeholder="数据集名称"
+                    value={tmpDSName}
+                    onChange={e => {
+                        commonStore.updateTempName(e.target.value)
+                    }}
+                    className="text-xs p-1 border border-gray-300 outline-none focus:outline-none focus:border-blue-500"
+                />
+            </div>
+            <Table />
+        </Container>
+    );
+}
+
+export default observer(DataSourcePanel);

package/src/dataSource/table.tsx

@@ -0,0 +1,125 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { observer } from 'mobx-react-lite';
+import { IMutField } from '../interfaces';
+import { useGlobalStore } from '../store';
+import { useTranslation } from 'react-i18next';
+
+interface TableProps {
+    size?: number;
+}
+const Container = styled.div`
+    overflow-x: auto;
+    table {
+        box-sizing: content-box;
+        font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        border-collapse: collapse;
+        font-size: 12px;
+        thead {
+            th {
+                text-align: left;
+                border: 1px solid #f5f5f5;
+                padding: 12px;
+                background-color: #f7f7f7;
+                margin: 2px;
+                white-space: nowrap;
+            }
+            th.number {
+                border-top: 3px solid #5cdbd3;
+            }
+            th.text {
+                border-top: 3px solid #69c0ff;
+            }
+        }
+        tbody {
+            td {
+                border: 1px solid #f5f5f5;
+                padding: 4px 12px;
+                color: #434343;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            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';
+}
+
+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>
+            <table>
+                <thead>
+                    <tr>
+                        {tmpDSRawFields.map((field, fIndex) => (
+                            <th key={field.fid} className={getHeaderType(field)}>
+                                <b>{field.name || field.fid}</b>
+                                <div>
+                                    <select
+                                        className="border-b border-gray-300 hover:bg-gray-100 hover:border-gray-600"
+                                        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>
+
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {tmpDataSource.slice(0, size).map((record, index) => (
+                        <tr key={index}>
+                            {tmpDSRawFields.map((field) => (
+                                <td
+                                    key={field.fid + index}
+                                    // className={getCellType(field)}
+                                >
+                                    {record[field.fid]}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </Container>
+    );
+}
+
+export default observer(Table);

package/src/dataSource/utils.ts

@@ -0,0 +1,47 @@
+import { IRow, IMutField } from '../interfaces';
+import { Insight } from 'visual-insights';
+
+export function transData(dataSource: IRow[]): {
+    dataSource: IRow[];
+    fields: IMutField[]
+} {
+    if (dataSource.length === 0) return {
+        dataSource: [],
+        fields: []
+    };
+    let ans: IRow[] = [];
+    const keys = Object.keys(dataSource[0]);
+    // TODO: 冗余设计，单变量统计被进行了多次重复计算。另外对于这种不完整的分析任务，不建议使用VIEngine。
+    const vie = new Insight.VIEngine();
+    vie.setData(dataSource)
+        .setFields(keys.map(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) {
+        const newRecord: IRow = {};
+        for (let field of fields) {
+            if (field.dataType === 'number' || field.dataType === 'integer') {
+                newRecord[field.key] = Number(record[field.key])
+            } else {
+                newRecord[field.key] = record[field.key]
+            }
+        }
+        ans.push(newRecord);
+    }
+    return {
+        dataSource: ans,
+        fields: fields.map(f => ({
+            fid: f.key,
+            analyticType: f.analyticType,
+            dataType: f.dataType,
+            semanticType: f.semanticType
+        }))
+    }
+}

package/src/fields/aestheticFields.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Droppable } from "react-beautiful-dnd";
+import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
+import { AestheticFieldContainer } from './components'
+import OBFieldContainer from './obComponents/obFContainer';
+
+const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape'].includes(f.id));
+
+const AestheticFields: React.FC = props => {
+    return <div>
+        {
+            aestheticFields.map(dkey => <AestheticFieldContainer name={dkey.id} key={dkey.id}>
+                <Droppable droppableId={dkey.id} direction="horizontal">
+                    {(provided, snapshot) => (
+                        <OBFieldContainer dkey={dkey} provided={provided} />
+                    )}
+                </Droppable>
+            </AestheticFieldContainer>)
+        }
+    </div>
+}
+
+export default AestheticFields;