@kanaries/graphic-walker 0.3.16 → 0.4.1

package/src/components/visualConfig/index.tsx

@@ -1,13 +1,15 @@
 import { observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useGlobalStore } from '../../store';
+import { NonPositionChannelConfigList,PositionChannelConfigList } from '../../config'; 
+
 import Modal from '../modal';
 import { IVisualConfig } from '../../interfaces';
 import PrimaryButton from '../button/primary';
 import DefaultButton from '../button/default';
 import { useTranslation } from 'react-i18next';
 import Toggle from '../toggle';
-import { runInAction } from 'mobx';
+import { runInAction, toJS } from 'mobx';
 
 const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
@@ -24,7 +26,27 @@ const VisualConfigPanel: React.FC = (props) => {
         timeFormat: visualConfig.format.timeFormat,
         normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
     });
+    const [resolve, setResolve] = useState<IVisualConfig['resolve']>({
+        x: visualConfig.resolve.x,
+        y: visualConfig.resolve.y,
+        color: visualConfig.resolve.color,
+        opacity: visualConfig.resolve.opacity,
+        shape: visualConfig.resolve.shape,
+        size: visualConfig.resolve.size,
+    });
     const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
+    const [background, setBackground] = useState<string | undefined>(visualConfig.background);
+
+    useEffect(() => {
+        setZeroScale(visualConfig.zeroScale);
+        setBackground(visualConfig.background);
+        setResolve(toJS(visualConfig.resolve));
+        setFormat({
+            numberFormat: visualConfig.format.numberFormat,
+            timeFormat: visualConfig.format.timeFormat,
+            normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
+        });
+    }, [showVisualConfigPanel]);
 
     return (
         <Modal
@@ -36,22 +58,22 @@ const VisualConfigPanel: React.FC = (props) => {
             <div>
                 <h2 className="text-lg mb-4">{t('config.format')}</h2>
                 <p className="text-xs">
-                    Format guides docs:{' '}
+                    {t(`config.formatGuidesDocs`)}:{' '}
                     <a
                         target="_blank"
                         className="underline text-blue-500"
                         href="https://github.com/d3/d3-format#locale_format"
                     >
-                        read here
+                        {t(`config.readHere`)}
                     </a>
                 </p>
                 {formatConfigList.map((fc) => (
                     <div className="my-2" key={fc}>
-                        <label className="block text-xs font-medium leading-6 text-gray-900">{t(`config.${fc}`)}</label>
+                        <label className="block text-xs font-medium leading-6">{t(`config.${fc}`)}</label>
                         <div className="mt-1">
                             <input
                                 type="text"
-                                className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
                                 value={format[fc] ?? ''}
                                 onChange={(e) => {
                                     setFormat((f) => ({
@@ -63,9 +85,55 @@ const VisualConfigPanel: React.FC = (props) => {
                         </div>
                     </div>
                 ))}
+                <h2 className="text-lg">{t('config.background')}</h2>
+                <div className="my-2">
+                    <label className="block text-xs font-medium leading-6">{t(`config.color`)}</label>
+                    <div className="mt-1">
+                        <input
+                            type="text"
+                            className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
+                            value={background ?? ''}
+                            onChange={(e) => {
+                                setBackground(e.target.value);
+                            }}
+                        />
+                    </div>
+                </div>
+                <h2 className="text-lg">{t('config.independence')}</h2>
+                <div className="my-2">
+                    <div className="flex space-x-6">
+                        {PositionChannelConfigList.map((pc) => (
+                            <Toggle
+                                label={t(`config.${pc}`)}
+                                key={pc}
+                                enabled={resolve[pc] ?? false}
+                                onChange={(e) => {
+                                    setResolve((r) => ({
+                                        ...r,
+                                        [pc]: e,
+                                    }));
+                                }}
+                            />
+                        ))}
+                        {NonPositionChannelConfigList.map((npc) => (
+                            <Toggle
+                                label={t(`constant.draggable_key.${npc}`)}
+                                key={npc}
+                                enabled={resolve[npc] ?? false}
+                                onChange={(e) => {
+                                    setResolve((r) => ({
+                                        ...r,
+                                        [npc]: e,
+                                    }));
+                                }}
+                            />
+                        ))}
+                    </div>
+                </div>
+                <h2 className="text-lg">{t('config.zeroScale')}</h2>
                 <div className="my-2">
                     <Toggle
-                        label="zero scale"
+                        label={t(`config.zeroScale`)}
                         enabled={zeroScale}
                         onChange={(en) => {
                             setZeroScale(en);
@@ -80,8 +148,10 @@ const VisualConfigPanel: React.FC = (props) => {
                             runInAction(() => {
                                 vizStore.setVisualConfig('format', format);
                                 vizStore.setVisualConfig('zeroScale', zeroScale);
+                                vizStore.setVisualConfig('background', background);
+                                vizStore.setVisualConfig('resolve', resolve);
                                 commonStore.setShowVisualConfigPanel(false);
-                            })
+                            });
                         }}
                     />
                     <DefaultButton

package/src/computation/clientComputation.ts

@@ -0,0 +1,55 @@
+import type { IDataQueryPayload, IDataQueryWorkflowStep, IFilterFiledSimple, IRow } from "../interfaces";
+import { applyFilter, applySort, applyViewQuery, transformDataService } from "../services";
+
+export const dataQueryClient = async (
+    rawData: IRow[],
+    workflow: IDataQueryWorkflowStep[],
+    offset?: number,
+    limit?: number,
+): Promise<IRow[]> => {
+    let res = rawData;
+    for await (const step of workflow) {
+        switch (step.type) {
+            case 'filter': {
+                res = await applyFilter(res, step.filters.map(filter => {
+                    const res: IFilterFiledSimple = {
+                        fid: filter.fid,
+                        rule: null,
+                    };
+                    if (filter.rule.type === 'one of') {
+                        res.rule = {
+                            type: 'one of',
+                            value: new Set(filter.rule.value),
+                        };
+                    } else {
+                        res.rule = filter.rule;
+                    }
+                    return res;
+                }).filter(Boolean));
+                break;
+            }
+            case 'transform': {
+                res = await transformDataService(res, step.transform);
+                break;
+            }
+            case 'view': {
+                for await (const job of step.query) {
+                    res = await applyViewQuery(res, job);
+                }
+                break;
+            }
+            case 'sort': {
+                res = await applySort(res, step.by, step.sort);
+                break;
+            }
+            default: {
+                // @ts-expect-error - runtime check
+                console.warn(new Error(`Unknown step type: ${step.type}`));
+                break;
+            }
+        }
+    }
+    return res.slice(offset ?? 0, limit ? ((offset ?? 0) + limit) : undefined);
+};
+
+export const getComputation = (rawData: IRow[]) => (payload: IDataQueryPayload) => dataQueryClient(rawData, payload.workflow, payload.offset, payload.limit)

package/src/computation/serverComputation.ts

@@ -0,0 +1,158 @@
+import type {
+    IComputationFunction,
+    IDataQueryPayload,
+    IDataQueryWorkflowStep,
+    IDatasetStats,
+    IFieldStats,
+    IRow,
+} from '../interfaces';
+
+export const datasetStatsServer = async (service: IComputationFunction): Promise<IDatasetStats> => {
+    const res = (await service({
+        workflow: [
+            {
+                type: 'view',
+                query: [
+                    {
+                        op: 'aggregate',
+                        groupBy: [],
+                        measures: [
+                            {
+                                field: '*',
+                                agg: 'count',
+                                asFieldKey: 'count',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    })) as [{ count: number }];
+    return {
+        rowCount: res[0]?.count ?? 0,
+    };
+};
+
+export const dataReadRawServer = async (
+    service: IComputationFunction,
+    pageSize: number,
+    pageOffset = 0
+): Promise<IRow[]> => {
+    const res = await service({
+        workflow: [
+            {
+                type: 'view',
+                query: [
+                    {
+                        op: 'raw',
+                        fields: ['*'],
+                    },
+                ],
+            },
+        ],
+        limit: pageSize,
+        offset: pageOffset * pageSize,
+    });
+    return res;
+};
+
+export const dataQueryServer = async (
+    service: IComputationFunction,
+    workflow: IDataQueryWorkflowStep[],
+    limit?: number,
+): Promise<IRow[]> => {
+    if (
+        workflow.length === 1 &&
+        workflow[0].type === 'view' &&
+        workflow[0].query.length === 1 &&
+        workflow[0].query[0].op === 'raw' &&
+        workflow[0].query[0].fields.length === 0
+    ) {
+        return [];
+    }
+    const res = await service({
+        workflow,
+        limit,
+    });
+    return res;
+};
+
+export const fieldStatServer = async (
+    service: IComputationFunction,
+    field: string,
+    options: { values?: boolean; range?: boolean }
+): Promise<IFieldStats> => {
+    const { values = true, range = true } = options;
+    const COUNT_ID = `count_${field}`;
+    const MIN_ID = `min_${field}`;
+    const MAX_ID = `max_${field}`;
+    const valuesQueryPayload: IDataQueryPayload = {
+        workflow: [
+            {
+                type: 'view',
+                query: [
+                    {
+                        op: 'aggregate',
+                        groupBy: [field],
+                        measures: [
+                            {
+                                field,
+                                agg: 'count',
+                                asFieldKey: COUNT_ID,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+    const valuesRes = values ? await service(valuesQueryPayload) : [];
+    const rangeQueryPayload: IDataQueryPayload = {
+        workflow: [
+            {
+                type: 'view',
+                query: [
+                    {
+                        op: 'aggregate',
+                        groupBy: [],
+                        measures: [
+                            {
+                                field,
+                                agg: 'min',
+                                asFieldKey: MIN_ID,
+                            },
+                            {
+                                field,
+                                agg: 'max',
+                                asFieldKey: MAX_ID,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+    const [
+        rangeRes = {
+            [MIN_ID]: 0,
+            [MAX_ID]: 0,
+        },
+    ] = range
+        ? await service(rangeQueryPayload)
+        : [
+              {
+                  [MIN_ID]: 0,
+                  [MAX_ID]: 0,
+              },
+          ];
+
+    return {
+        values: valuesRes
+            .sort((a, b) => b[COUNT_ID] - a[COUNT_ID])
+            .map((row) => ({
+                value: row[field],
+                count: row[COUNT_ID],
+            })),
+        range: [rangeRes[MIN_ID], rangeRes[MAX_ID]],
+    };
+};

package/src/config.ts

@@ -1,4 +1,4 @@
-import { DraggableFieldState, IStackMode } from "./interfaces";
+import { DraggableFieldState, IStackMode, IVisualConfig } from "./interfaces";
 
 export const GEMO_TYPES: Readonly<string[]> = [
     'auto',
@@ -19,7 +19,8 @@ export const GEMO_TYPES: Readonly<string[]> = [
 export const STACK_MODE: Readonly<IStackMode[]> = [
     'none',
     'stack',
-    'normalize'
+    'normalize',
+    'center'
 ]
 
 export const CHART_LAYOUT_TYPE: Readonly<string[]> = [
@@ -57,4 +58,16 @@ export const CHANNEL_LIMIT = {
 export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
     'dimensions',
     'measures',
+]
+
+export const PositionChannelConfigList: Array<keyof IVisualConfig['resolve']> = [
+    'x',
+    'y',
+]
+
+export const NonPositionChannelConfigList: Array<keyof IVisualConfig['resolve']> = [
+    'color',
+    'opacity',
+    'shape',
+    'size'
 ]

package/src/dataSource/datasetConfig/index.tsx

@@ -1,15 +1,47 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import DatasetTable from "../../components/dataTable";
 import { observer } from "mobx-react-lite";
 import { useGlobalStore } from "../../store";
+import { useComputationFunc } from "../../renderer/hooks";
+import { datasetStatsServer } from "../../computation/serverComputation";
 
-const DatasetConfig: React.FC = (props) => {
-    const { commonStore, vizStore } = useGlobalStore();
+const DatasetConfig: React.FC = () => {
+    const { commonStore } = useGlobalStore();
     const { currentDataset } = commonStore;
-    const { dataSource, rawFields } = currentDataset;
+
+    const computationFunction = useComputationFunc();
+
+    const [count, setCount] = useState(0);
+    const taskIdRef = useRef(0);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        const taskId = ++taskIdRef.current;
+        setLoading(true);
+        datasetStatsServer(computationFunction).then(res => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            setCount(res.rowCount);
+            setLoading(false);
+        }).catch(err => {
+            if (taskId !== taskIdRef.current) {
+                return;
+            }
+            console.error(err);
+            setLoading(false);
+        });
+        return () => {
+            taskIdRef.current++;
+        };
+    }, [computationFunction]);
+
     return (
-        <div>
-            <DatasetTable size={100} data={dataSource} metas={rawFields}
+        <div className="relative">
+            <DatasetTable size={100}
+                total={count}
+                dataset={currentDataset}
+                loading={loading}
                 onMetaChange={(fid, fIndex, diffMeta) => {
                     commonStore.updateCurrentDatasetMetas(fid, diffMeta)
                 }}

package/src/dataSource/table.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useGlobalStore } from "../store";
 import DataTable from "../components/dataTable";
 import { toJS } from "mobx";
+import { getComputation } from "../computation/clientComputation";
 
 interface TableProps {
     size?: number;
@@ -13,11 +14,23 @@ const Table: React.FC<TableProps> = (props) => {
     const { commonStore } = useGlobalStore();
     const { tmpDSRawFields, tmpDataSource } = commonStore;
 
+    const tempDataset = React.useMemo(() => {
+        return {
+            id: "tmp",
+            name: "tmp",
+            dataSource: tmpDataSource,
+            rawFields: toJS(tmpDSRawFields),
+        };
+    }, [tmpDataSource, tmpDSRawFields]);
+9
+    const computation = React.useMemo(() => getComputation(tempDataset.dataSource), [tempDataset])
+
     return (
         <DataTable
             size={size}
-            metas={toJS(tmpDSRawFields)}
-            data={tmpDataSource}
+            dataset={tempDataset}
+            computation={computation}
+            total={tmpDataSource.length}
             onMetaChange={(fid, fIndex, diffMeta) => {
                 commonStore.updateTempDatasetMetas(fid, diffMeta);
             }}

package/src/fields/filterField/filterEditDialog.tsx

@@ -10,27 +10,28 @@ import DefaultButton from "../../components/button/default";
 import PrimaryButton from "../../components/button/primary";
 import DropdownSelect from "../../components/dropdownSelect";
 
-const QuantitativeRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
-    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
+const QuantitativeRuleForm: React.FC<RuleFormProps> = ({ dataset, field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} dataset={dataset} />;
 };
 
-const NominalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
-    return <Tabs field={field} onChange={onChange} tabs={["one of"]} />;
+const NominalRuleForm: React.FC<RuleFormProps> = ({ dataset, field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of"]} dataset={dataset} />;
 };
 
-const OrdinalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
-    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
+const OrdinalRuleForm: React.FC<RuleFormProps> = ({ dataset, field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} dataset={dataset} />;
 };
 
-const TemporalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
-    return <Tabs field={field} onChange={onChange} tabs={["temporal range", "one of"]} />;
+const TemporalRuleForm: React.FC<RuleFormProps> = ({ dataset, field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["temporal range", "one of"]} dataset={dataset} />;
 };
 
 const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
 
 const FilterEditDialog: React.FC = observer(() => {
-    const { vizStore } = useGlobalStore();
+    const { vizStore, commonStore } = useGlobalStore();
     const { editingFilterIdx, draggableFieldState } = vizStore;
+    const { currentDataset } = commonStore;
 
     const { t } = useTranslation("translation", { keyPrefix: "filters" });
 
@@ -113,7 +114,7 @@ const FilterEditDialog: React.FC = observer(() => {
                     selectedKey={uncontrolledField.fid}
                     onSelect={handleSelectFilterField}
                 />
-                <Form field={uncontrolledField} onChange={handleChange} />
+                <Form dataset={currentDataset} field={uncontrolledField} onChange={handleChange} />
                 <div className="mt-4">
                     <PrimaryButton
                         onClick={handleSubmit}