@kanaries/graphic-walker 0.3.16 → 0.4.0

package/src/computation/serverComputation.ts

@@ -0,0 +1,153 @@
+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,
+    };
+};
+
+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] = 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

@@ -13,11 +13,20 @@ 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]);
+
     return (
         <DataTable
             size={size}
-            metas={toJS(tmpDSRawFields)}
-            data={tmpDataSource}
+            dataset={tempDataset}
+            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}