@nocobase/plugin-data-visualization 0.11.0-alpha.1 → 0.11.1-alpha.2

package/src/client/block/ChartConfigure.tsx

@@ -17,10 +17,9 @@ import {
   useCollectionFilterOptions,
   useDesignable,
 } from '@nocobase/client';
-import { Alert, Button, Card, Col, Modal, Row, Space, Table, Tabs, Typography } from 'antd';
+import { Alert, App, Button, Card, Col, Modal, Row, Space, Table, Tabs, Typography } from 'antd';
 import { cloneDeep, isEqual } from 'lodash';
 import React, { createContext, useContext, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   useChartFields,
   useCollectionOptions,
@@ -32,8 +31,8 @@ import {
   useTransformers,
 } from '../hooks';
 import { useChartsTranslation } from '../locale';
-import { ChartRenderer, ChartRendererProvider, useChartTypes, useCharts } from '../renderer';
-import { createRendererSchema, getField, getSelectedFields } from '../utils';
+import { ChartRenderer, ChartRendererContext, useChartTypes, useCharts, useDefaultChartType } from '../renderer';
+import { createRendererSchema, getField, getSelectedFields, processData } from '../utils';
 import { getConfigSchema, querySchema, transformSchema } from './schemas/configure';
 const { Paragraph, Text } = Typography;
 
@@ -41,6 +40,9 @@ export type ChartConfigCurrent = {
   schema: ISchema;
   field: any;
   collection: string;
+  service: any;
+  initialValues?: any;
+  data: any[];
 };
 
 export type SelectedField = {
@@ -53,8 +55,6 @@ export const ChartConfigContext = createContext<{
   setVisible?: (visible: boolean) => void;
   current?: ChartConfigCurrent;
   setCurrent?: (current: ChartConfigCurrent) => void;
-  data?: any[] | string;
-  setData?: (data: any[] | string) => void;
 }>({
   visible: true,
 });
@@ -68,18 +68,18 @@ export const ChartConfigure: React.FC<{
     },
   ) => void;
 }> & {
-  Renderer: React.FC<{
-    runQuery?: any;
-  }>;
+  Renderer: React.FC;
   Config: React.FC;
   Query: React.FC;
   Transform: React.FC;
   Data: React.FC;
 } = (props) => {
   const { t } = useChartsTranslation();
+  const { service } = useContext(ChartRendererContext);
   const { visible, setVisible, current } = useContext(ChartConfigContext);
-  const { schema, field, collection } = current || {};
+  const { schema, field, collection, initialValues } = current || {};
   const { dn } = useDesignable();
+  const { modal } = App.useApp();
   const { insert } = props;
 
   const charts = useCharts();
@@ -124,53 +124,48 @@ export const ChartConfigure: React.FC<{
     setMeasures(cloneDeep(currentMeasures));
     setDimensions(cloneDeep(currentDimensions));
   };
-  const chartTypes = useChartTypes();
+  const chartType = useDefaultChartType();
   const form = useMemo(
     () => {
-      const chartType = chartTypes[0]?.children?.[0]?.value;
       return createForm({
-        values: { config: { chartType }, ...schema?.['x-decorator-props'], collection, data: '' },
+        values: { config: { chartType }, ...(initialValues || field?.decoratorProps), collection },
         effects: (form) => {
           onFieldChange('config.chartType', () => initChart(true));
-          onFormInit(() => queryReact(form));
+          onFormInit(() => {
+            queryReact(form);
+          });
         },
       });
     },
     // visible, collection added here to re-initialize form when visible, collection change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [schema, visible, collection],
+    [field, visible, collection],
   );
 
-  const runQuery = useRef(null);
-  const RunButton: React.FC = () => {
-    const [loading, setLoading] = React.useState(false);
-    return (
-      <Button
-        type="link"
-        loading={loading}
-        icon={<RightSquareOutlined />}
-        onClick={async () => {
-          const queryField = form.query('query').take() as ObjectField;
-          try {
-            await queryField?.validate();
-          } catch (e) {
-            return;
-          }
+  const RunButton: React.FC = () => (
+    <Button
+      type="link"
+      loading={service?.loading}
+      icon={<RightSquareOutlined />}
+      onClick={async () => {
+        const queryField = form.query('query').take() as ObjectField;
+        try {
+          await queryField?.validate();
+        } catch (e) {
+          return;
+        }
 
-          setLoading(true);
-          try {
-            await runQuery?.current(form.values.query);
-          } catch (e) {
-            console.log(e);
-          }
-          queryReact(form, initChart);
-          setLoading(false);
-        }}
-      >
-        {t('Run query')}
-      </Button>
-    );
-  };
+        try {
+          await service.runAsync(collection, form.values.query);
+        } catch (e) {
+          console.log(e);
+        }
+        queryReact(form, initChart);
+      }}
+    >
+      {t('Run query')}
+    </Button>
+  );
 
   const queryRef = useRef(null);
   const configRef = useRef(null);
@@ -180,6 +175,13 @@ export const ChartConfigure: React.FC<{
       open={visible}
       onOk={() => {
         const { query, config, transform, mode } = form.values;
+        const afterSave = () => {
+          setVisible(false);
+          current.service?.run(collection, query);
+          queryRef.current.scrollTop = 0;
+          configRef.current.scrollTop = 0;
+          service.mutate(undefined);
+        };
         const rendererProps = {
           query,
           config,
@@ -194,18 +196,16 @@ export const ChartConfigure: React.FC<{
           dn.emit('patch', {
             schema,
           });
-          setVisible(false);
-          queryRef.current.scrollTop = 0;
-          configRef.current.scrollTop = 0;
+          afterSave();
           return;
         }
         insert(createRendererSchema(rendererProps), {
-          onSuccess: () => setVisible(false),
+          onSuccess: afterSave,
           wrap: gridRowColWrap,
         });
       }}
       onCancel={() => {
-        Modal.confirm({
+        modal.confirm({
           title: t('Are you sure to cancel?'),
           content: t('You changes are not saved. If you click OK, your changes will be lost.'),
           okButtonProps: {
@@ -215,6 +215,7 @@ export const ChartConfigure: React.FC<{
             setVisible(false);
             queryRef.current.scrollTop = 0;
             configRef.current.scrollTop = 0;
+            service.mutate(undefined);
           },
         });
       }}
@@ -229,7 +230,8 @@ export const ChartConfigure: React.FC<{
             <Card
               style={{
                 height: 'calc(100vh - 300px)',
-                overflow: 'scroll',
+                overflow: 'auto',
+                margin: '12px 0 12px 12px',
               }}
               ref={queryRef}
             >
@@ -254,7 +256,8 @@ export const ChartConfigure: React.FC<{
             <Card
               style={{
                 height: 'calc(100vh - 300px)',
-                overflow: 'scroll',
+                overflow: 'auto',
+                margin: '12px 3px 12px 3px',
               }}
               ref={configRef}
             >
@@ -275,8 +278,12 @@ export const ChartConfigure: React.FC<{
             </Card>
           </Col>
           <Col span={11}>
-            <Card>
-              <ChartConfigure.Renderer runQuery={runQuery} />
+            <Card
+              style={{
+                margin: '12px 12px 12px 0',
+              }}
+            >
+              <ChartConfigure.Renderer />
             </Card>
           </Col>
         </Row>
@@ -287,7 +294,8 @@ export const ChartConfigure: React.FC<{
 
 ChartConfigure.Renderer = function Renderer(props) {
   const { current } = useContext(ChartConfigContext);
-  const { collection } = current || {};
+  const { collection, data } = current || {};
+  const { service } = useContext(ChartRendererContext);
   return (
     <FormConsumer>
       {(form) => {
@@ -296,15 +304,9 @@ ChartConfigure.Renderer = function Renderer(props) {
         const config = cloneDeep(form.values.config);
         const transform = cloneDeep(form.values.transform);
         return (
-          <ChartRendererProvider
-            collection={collection}
-            query={form.values.query}
-            config={config}
-            transform={transform}
-            mode={form.values.mode}
-          >
-            <ChartRenderer configuring={true} {...props} />
-          </ChartRendererProvider>
+          <ChartRendererContext.Provider value={{ collection, config, transform, service, data }}>
+            <ChartRenderer {...props} />
+          </ChartRendererContext.Provider>
         );
       }}
     </FormConsumer>
@@ -313,27 +315,30 @@ ChartConfigure.Renderer = function Renderer(props) {
 
 ChartConfigure.Query = function Query() {
   const { t } = useChartsTranslation();
-  const { t: lang } = useTranslation();
   const fields = useFieldsWithAssociation();
   const useFormatterOptions = useFormatters(fields);
   const collectionOptions = useCollectionOptions();
   const { current, setCurrent } = useContext(ChartConfigContext);
   const { collection } = current || {};
   const fieldOptions = useCollectionFieldsOptions(collection, 1);
-  const compiledFieldOptions = Schema.compile(fieldOptions, { t: lang });
+  const compiledFieldOptions = Schema.compile(fieldOptions, { t });
   const filterOptions = useCollectionFilterOptions(collection);
-  const formCollapse = FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
+
+  const { service } = useContext(ChartRendererContext);
   const onCollectionChange = (value: string) => {
     const { schema, field } = current;
-    const newSchema = { ...schema };
-    newSchema['x-decorator-props'] = { collection: value };
-    newSchema['x-acl-action'] = `${value}:list`;
     setCurrent({
-      schema: newSchema,
+      schema,
       field,
       collection: value,
+      service: current.service,
+      initialValues: {},
+      data: undefined,
     });
+    service.mutate(undefined);
   };
+
+  const formCollapse = FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
   const FromSql = () => (
     <Text code>
       From <span style={{ color: '#1890ff' }}>{current?.collection}</span>
@@ -429,22 +434,38 @@ ChartConfigure.Transform = function Transform() {
 };
 
 ChartConfigure.Data = function Data() {
-  const { data } = useContext(ChartConfigContext);
+  const { t } = useChartsTranslation();
+  const { current } = useContext(ChartConfigContext);
+  const { service } = useContext(ChartRendererContext);
   const fields = useFieldsWithAssociation();
-  return Array.isArray(data) ? (
-    <Table
-      dataSource={data}
-      columns={Object.keys(data[0] || {}).map((col) => {
-        const field = getField(fields, col.split('.'));
-        return {
-          title: field?.label || col,
-          dataIndex: col,
-          key: col,
-        };
-      })}
-      size="small"
-    />
+  const data = processData(fields, service?.data || current?.data || [], { t });
+  const error = service?.error;
+  return !error ? (
+    <div
+      style={{
+        overflowX: 'auto',
+        overflowY: 'hidden',
+      }}
+    >
+      <Table
+        dataSource={data}
+        columns={Object.keys(data[0] || {}).map((col) => {
+          const field = getField(fields, col.split('.'));
+          return {
+            title: field?.label || col,
+            dataIndex: col,
+            key: col,
+          };
+        })}
+        size="small"
+      />
+    </div>
   ) : (
-    <Alert message="Error" type="error" description={data} showIcon />
+    <Alert
+      message="Error"
+      type="error"
+      description={error?.response?.data?.errors?.map?.((error: any) => error.message).join('\n') || error.message}
+      showIcon
+    />
   );
 };

package/src/client/block/schemas/configure.ts

@@ -154,7 +154,7 @@ export const querySchema: ISchema = {
           'x-component-props': {
             options: '{{ collectionOptions }}',
             onChange: '{{ onCollectionChange }}',
-            placeholder: lang('Collection'),
+            placeholder: '{{t("Collection")}}',
           },
         },
       },
@@ -206,11 +206,11 @@ export const querySchema: ISchema = {
                             placeholder: '{{t("Aggregation")}}',
                           },
                           enum: [
-                            { label: lang('Sum'), value: 'sum' },
-                            { label: lang('Count'), value: 'count' },
-                            { label: lang('Avg'), value: 'avg' },
-                            { label: lang('Max'), value: 'max' },
-                            { label: lang('Min'), value: 'min' },
+                            { label: '{{t("Sum")}}', value: 'sum' },
+                            { label: '{{t("Count")}}', value: 'count' },
+                            { label: '{{t("Avg")}}', value: 'avg' },
+                            { label: '{{t("Max")}}', value: 'max' },
+                            { label: '{{t("Min")}}', value: 'min' },
                           ],
                         },
                         alias: {
@@ -287,7 +287,7 @@ export const querySchema: ISchema = {
                       'x-decorator': 'FormItem',
                       'x-decorator-props': {
                         style: {
-                          overflow: 'scroll',
+                          overflow: 'auto',
                         },
                       },
                       'x-component': 'Filter',

package/src/client/index.tsx

@@ -14,7 +14,7 @@ const Chart: React.FC = (props) => {
     children.push({
       key: 'chart-v2',
       type: 'item',
-      title: t('Chart'),
+      title: t('Charts'),
       component: 'ChartV2BlockInitializer',
     });
   }

package/src/client/locale/index.ts

@@ -1,10 +1,9 @@
 import { i18n } from '@nocobase/client';
 import { useTranslation } from 'react-i18next';
-import zhCN from './zh-CN';
 
-export const NAMESPACE = 'charts-v2';
+export const NAMESPACE = 'data-visualization';
 
-i18n.addResources('zh-CN', NAMESPACE, zhCN);
+// i18n.addResources('zh-CN', NAMESPACE, zhCN);
 // i18n.addResources('en-US', NAMESPACE, enUS);
 // i18n.addResources('ja-JP', NAMESPACE, jaJP);
 // i18n.addResources('ru-RU', NAMESPACE, ruRU);

package/src/client/locale/zh-CN.ts

@@ -68,4 +68,5 @@ export default {
   Min: '最小值',
   Max: '最大值',
   'Please select a chart type.': '请选择图表类型',
+  Collection: '数据表',
 };

package/src/client/renderer/ChartLibrary.tsx

@@ -77,7 +77,7 @@ export const useChartTypes = (): {
       const children = Object.entries(l.charts).map(([type, chart]) => ({
         ...chart,
         key: type,
-        label: chart.name,
+        label: lang(chart.name),
         value: type,
       }));
       return [
@@ -90,6 +90,11 @@ export const useChartTypes = (): {
     }, []);
 };
 
+export const useDefaultChartType = () => {
+  const chartTypes = useChartTypes();
+  return chartTypes[0]?.children?.[0]?.value;
+};
+
 export const useToggleChartLibrary = () => {
   const ctx = useContext(ChartLibraryContext);
   return {

package/src/client/renderer/ChartRenderer.tsx

@@ -1,107 +1,34 @@
 import { useField, useFieldSchema } from '@formily/react';
 import {
   GeneralSchemaDesigner,
-  gridRowColWrap,
   SchemaSettings,
+  gridRowColWrap,
   useAPIClient,
   useCollection,
   useDesignable,
-  useRequest,
 } from '@nocobase/client';
-import { Empty, Result, Typography } from 'antd';
-import React, { useContext, useEffect, useState } from 'react';
+import { Empty, Result, Spin, Typography } from 'antd';
+import React, { useContext } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ChartConfigContext } from '../block';
-import { useFieldsWithAssociation, useFieldTransformer } from '../hooks';
+import { useFieldTransformer, useFieldsWithAssociation } from '../hooks';
 import { useChartsTranslation } from '../locale';
-import { createRendererSchema, getField, parseField, processData } from '../utils';
+import { createRendererSchema, getField, processData } from '../utils';
 import { useCharts } from './ChartLibrary';
-import { ChartRendererContext, DimensionProps, MeasureProps, QueryProps } from './ChartRendererProvider';
+import { ChartRendererContext } from './ChartRendererProvider';
 const { Paragraph, Text } = Typography;
 
-export const ChartRenderer: React.FC<{
-  configuring?: boolean;
-  runQuery?: any;
-}> & {
+export const ChartRenderer: React.FC & {
   Designer: React.FC;
 } = (props) => {
   const { t } = useChartsTranslation();
-  const { setData: setQueryData, current } = useContext(ChartConfigContext);
-  const { query, config, collection, transform } = useContext(ChartRendererContext);
-  const { configuring, runQuery } = props;
+  const ctx = useContext(ChartRendererContext);
+  const { config, transform, collection, service, data: _data } = ctx;
+  const fields = useFieldsWithAssociation(collection);
+  const data = processData(fields, service?.data || _data || [], { t });
   const general = config?.general || {};
   const advanced = config?.advanced || {};
-  const schema = useFieldSchema();
-  const currentSchema = schema || current?.schema;
-  const fields = useFieldsWithAssociation(collection);
   const api = useAPIClient();
-  const [data, setData] = useState<any[]>([]);
-  const { runAsync } = useRequest(
-    (query) =>
-      api
-        .request({
-          url: 'charts:query',
-          method: 'POST',
-          data: {
-            uid: currentSchema?.['x-uid'],
-            collection,
-            ...query,
-            dimensions: (query?.dimensions || []).map((item: DimensionProps) => {
-              const dimension = { ...item };
-              if (item.format && !item.alias) {
-                const { alias } = parseField(item.field);
-                dimension.alias = alias;
-              }
-              return dimension;
-            }),
-            measures: (query?.measures || []).map((item: MeasureProps) => {
-              const measure = { ...item };
-              if (item.aggregation && !item.alias) {
-                const { alias } = parseField(item.field);
-                measure.alias = alias;
-              }
-              return measure;
-            }),
-          },
-        })
-        .then((res) => {
-          const data = res?.data?.data || [];
-          return processData(fields, data, { t });
-        }),
-    {
-      manual: true,
-      onSuccess: (data) => {
-        setData(data);
-      },
-      onFinally(params, data, error: any) {
-        if (!configuring) {
-          return;
-        }
-        if (error) {
-          const message = error?.response?.data?.errors?.map?.((error: any) => error.message).join('\n');
-          setQueryData(message || error.message);
-          return;
-        }
-        setQueryData(data);
-      },
-    },
-  );
-
-  useEffect(() => {
-    setData([]);
-    const run = async (query: QueryProps) => {
-      if (
-        query?.measures?.length
-        // || (query?.sql?.fields && query?.sql?.clauses)
-      ) {
-        await runAsync(query);
-      }
-    };
-    if (runQuery) {
-      runQuery.current = run;
-    }
-    run(query);
-  }, [query, runAsync, runQuery]);
 
   const charts = useCharts();
   const chart = charts[config?.chartType];
@@ -137,16 +64,21 @@ export const ChartRenderer: React.FC<{
       <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />
     );
 
-  return data && data.length ? (
-    <C />
-  ) : (
-    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure and run query')} />
-  );
+  if (service.loading) {
+    return <Spin />;
+  }
+
+  if (!(data && data.length)) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure and run query')} />;
+  }
+
+  return <C />;
 };
 
 ChartRenderer.Designer = function Designer() {
   const { t } = useChartsTranslation();
   const { setVisible, setCurrent } = useContext(ChartConfigContext);
+  const { service } = useContext(ChartRendererContext);
   const field = useField();
   const schema = useFieldSchema();
   const { insertAdjacent } = useDesignable();
@@ -156,7 +88,7 @@ ChartRenderer.Designer = function Designer() {
       <SchemaSettings.Item
         key="configure"
         onClick={() => {
-          setCurrent({ schema, field, collection: name });
+          setCurrent({ schema, field, collection: name, service, data: service?.data });
           setVisible(true);
         }}
       >

package/src/client/renderer/ChartRendererProvider.tsx

@@ -1,6 +1,8 @@
 import { css } from '@emotion/css';
-import { MaybeCollectionProvider } from '@nocobase/client';
+import { useFieldSchema } from '@formily/react';
+import { MaybeCollectionProvider, useAPIClient, useRequest } from '@nocobase/client';
 import React, { createContext } from 'react';
+import { parseField } from '../utils';
 
 export type MeasureProps = {
   field: string | string[];
@@ -47,10 +49,62 @@ export type ChartRendererProps = {
   mode?: 'builder' | 'sql';
 };
 
-export const ChartRendererContext = createContext<ChartRendererProps>({} as any);
+export const ChartRendererContext = createContext<{
+  collection: string;
+  config?: {
+    chartType: string;
+    general: any;
+    advanced: any;
+  };
+  transform?: TransformProps[];
+  service: any;
+  data?: any[];
+}>({} as any);
 
 export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
-  const { collection } = props;
+  const { query, config, collection, transform } = props;
+  const schema = useFieldSchema();
+  const api = useAPIClient();
+  const service = useRequest(
+    (collection, query) =>
+      new Promise((resolve, reject) => {
+        if (!(collection && query?.measures?.length)) return resolve(undefined);
+        api
+          .request({
+            url: 'charts:query',
+            method: 'POST',
+            data: {
+              uid: schema?.['x-uid'],
+              collection,
+              ...query,
+              dimensions: (query?.dimensions || []).map((item: DimensionProps) => {
+                const dimension = { ...item };
+                if (item.format && !item.alias) {
+                  const { alias } = parseField(item.field);
+                  dimension.alias = alias;
+                }
+                return dimension;
+              }),
+              measures: (query?.measures || []).map((item: MeasureProps) => {
+                const measure = { ...item };
+                if (item.aggregation && !item.alias) {
+                  const { alias } = parseField(item.field);
+                  measure.alias = alias;
+                }
+                return measure;
+              }),
+            },
+          })
+          .then((res) => {
+            resolve(res?.data?.data);
+          })
+          .catch(reject);
+      }),
+    {
+      defaultParams: [collection, query],
+    },
+  );
+
   return (
     <MaybeCollectionProvider collection={collection}>
       <div
@@ -58,12 +112,11 @@ export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
           .ant-card {
             box-shadow: none;
           }
-          .ant-card-body {
-            padding: 0;
-          }
         `}
       >
-        <ChartRendererContext.Provider value={{ ...props }}>{props.children}</ChartRendererContext.Provider>
+        <ChartRendererContext.Provider value={{ collection, config, transform, service }}>
+          {props.children}
+        </ChartRendererContext.Provider>
       </div>
     </MaybeCollectionProvider>
   );