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

package/lib/client/ChartBlockEngine.d.ts

@@ -15,9 +15,9 @@ export interface ChartBlockEngineMetaData {
     chart: IChartConfig;
 }
 export declare const useGetDataSet: (chartQueryId: number) => {
-    loading: any;
+    loading: boolean;
     dataSet: any;
-    error: any;
+    error: Error;
 };
 declare const ChartBlockEngine: {
     ({ chartBlockEngineMetaData }: {

package/lib/client/ChartBlockEngine.js

@@ -63,11 +63,6 @@ const ChartRenderComponent = ({
     loading = _useGetDataSet.loading,
     dataSet = _useGetDataSet.dataSet,
     error = _useGetDataSet.error;
-  if (error) {
-    return _react().default.createElement(_react().default.Fragment, null, _react().default.createElement(_antd().Empty, {
-      description: _react().default.createElement("span", null, "May be this chart block's query data has been deleted,please check!")
-    }));
-  }
   const _useState = (0, _react().useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     currentConfig = _useState2[0],
@@ -75,6 +70,11 @@ const ChartRenderComponent = ({
   (0, _react().useEffect)(() => {
     setCurrentConfig(chartConfig);
   }, [JSON.stringify(chartConfig)]);
+  if (error) {
+    return _react().default.createElement(_react().default.Fragment, null, _react().default.createElement(_antd().Empty, {
+      description: _react().default.createElement("span", null, `May be this chart block's query data has been deleted,please check!`)
+    }));
+  }
   if (currentConfig.type !== chartConfig.type) {
     return _react().default.createElement(_react().default.Fragment, null);
   }
@@ -82,8 +82,7 @@ const ChartRenderComponent = ({
     case 'G2Plot':
       {
         var _templates$get2, _chartConfig$category;
-        let finalChartOptions;
-        finalChartOptions = (_templates$get2 = _templates.templates.get(chartType)) === null || _templates$get2 === void 0 ? void 0 : _templates$get2.defaultChartOptions;
+        const finalChartOptions = (_templates$get2 = _templates.templates.get(chartType)) === null || _templates$get2 === void 0 ? void 0 : _templates$get2.defaultChartOptions;
         let template;
         try {
           template = _json().default.parse(chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.template);

package/lib/client/ChartBlockEngineDesigner.js

@@ -25,6 +25,13 @@ function _client() {
   };
   return data;
 }
+function _client2() {
+  const data = require("@nocobase/utils/client");
+  _client2 = function _client2() {
+    return data;
+  };
+  return data;
+}
 function _antd() {
   const data = require("antd");
   _antd = function _antd() {
@@ -129,6 +136,8 @@ const ChartBlockEngineDesignerInitializer = props => {
     query = chartBlockEngineMetaData.query;
   const _useFieldsById = (0, _hooks.useFieldsById)(query.id),
     fields = _useFieldsById.fields;
+  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
+    theme = _useGlobalTheme.theme;
   const dataSource = fields.map(field => {
     return {
       label: field.name,
@@ -138,7 +147,7 @@ const ChartBlockEngineDesignerInitializer = props => {
   return _react2().default.createElement(_client().SchemaSettings.Item, {
     onClick: function () {
       var _onClick = _asyncToGenerator(function* () {
-        (0, _antdV().FormDialog)({
+        (0, _client().FormDialog)({
           okText: compile('{{t("Submit")}}'),
           title: (0, _locale.lang)('Edit chart block'),
           width: 1200,
@@ -147,7 +156,7 @@ const ChartBlockEngineDesignerInitializer = props => {
             maxHeight: '65vh',
             overflow: 'auto'
           }
-        }, form => {
+        }, function Com(form) {
           var _chartBlockEngineMeta, _chartBlockEngineMeta2;
           const _useState = (0, _react2().useState)(null),
             _useState2 = _slicedToArray(_useState, 2),
@@ -251,7 +260,7 @@ const ChartBlockEngineDesignerInitializer = props => {
             queryId: chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta2 = chartBlockEngineMetaData.query) === null || _chartBlockEngineMeta2 === void 0 ? void 0 : _chartBlockEngineMeta2.id,
             fields: fields
           }))))));
-        }).open({
+        }, theme).open({
           initialValues: _objectSpread({}, chart) //reset before chartBlockMetaData
         }).then(values => {
           //patch updates
@@ -270,6 +279,8 @@ const ChartBlockEngineDesignerInitializer = props => {
             }
           });
           dn.refresh();
+        }).catch(err => {
+          (0, _client2().error)(err);
         });
       });
       function onClick() {

package/lib/client/ChartBlockInitializer.js

@@ -102,8 +102,8 @@ const ChartBlockInitializer = props => {
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
   const api = (0, _client().useAPIClient)();
   const compile = (0, _client().useCompile)();
-  const _useChartsTranslation = (0, _locale.useChartsTranslation)(),
-    t = _useChartsTranslation.t;
+  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
+    theme = _useGlobalTheme.theme;
   return _react2().default.createElement(_ChartQueryBlockInitializer.ChartQueryBlockInitializer, _objectSpread(_objectSpread({}, props), {}, {
     componentType: 'Charts',
     onCreateBlockSchema: function () {
@@ -116,7 +116,7 @@ const ChartBlockInitializer = props => {
             value: field.name
           };
         });
-        const values = yield (0, _antdV().FormDialog)({
+        const values = yield (0, _client().FormDialog)({
           okText: compile('{{t("Submit")}}'),
           title: (0, _locale.lang)('Create chart block'),
           width: 1200,
@@ -125,7 +125,7 @@ const ChartBlockInitializer = props => {
             maxHeight: '65vh',
             overflow: 'auto'
           }
-        }, () => {
+        }, function Com() {
           var _chartBlockEngineMeta, _chartBlockEngineMeta2;
           const form = (0, _react().useForm)();
           const _useState5 = (0, _react2().useState)(null),
@@ -231,7 +231,7 @@ const ChartBlockInitializer = props => {
             queryId: chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta2 = chartBlockEngineMetaData.query) === null || _chartBlockEngineMeta2 === void 0 ? void 0 : _chartBlockEngineMeta2.id,
             fields: chartQueryMetadata === null || chartQueryMetadata === void 0 ? void 0 : chartQueryMetadata.fields
           }))))));
-        }).open({
+        }, theme).open({
           initialValues: {}
         });
         if (values) {

package/lib/client/ChartQueryBlockInitializer.js

@@ -73,8 +73,10 @@ const ChartQueryBlockInitializer = props => {
   const apiClient = (0, _client().useAPIClient)();
   const ctx = (0, _ChartQueryMetadataProvider.useChartQueryMetadataContext)();
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
+  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
+    theme = _useGlobalTheme.theme;
   const onAddQuery = (0, _react2().useCallback)(info => {
-    (0, _antdV().FormDialog)({
+    (0, _client().FormDialog)({
       sql: (0, _locale.lang)('Add SQL query'),
       json: (0, _locale.lang)('Add JSON query')
     }[info.key], () => {
@@ -97,7 +99,7 @@ const ChartQueryBlockInitializer = props => {
           }
         }
       }))));
-    }).open({
+    }, theme).open({
       initialValues: {
         type: info.key
       }

package/package.json

@@ -4,7 +4,7 @@
   "displayName.zh-CN": "图表",
   "description": "Out-of-the-box, feature-rich chart plugins.",
   "description.zh-CN": "开箱即用、丰富的报表。",
-  "version": "0.11.0-alpha.1",
+  "version": "0.11.1-alpha.2",
   "main": "./lib/server/index.js",
   "files": [
     "lib",
@@ -26,15 +26,15 @@
     "@formily/core": "2.2.26",
     "@formily/react": "2.2.26",
     "@formily/shared": "2.2.26",
-    "@nocobase/client": "0.11.0-alpha.1",
-    "@nocobase/database": "0.11.0-alpha.1",
-    "@nocobase/server": "0.11.0-alpha.1",
-    "@nocobase/test": "0.11.0-alpha.1",
-    "@nocobase/utils": "0.11.0-alpha.1",
+    "@nocobase/client": "0.11.1-alpha.2",
+    "@nocobase/database": "0.11.1-alpha.2",
+    "@nocobase/server": "0.11.1-alpha.2",
+    "@nocobase/test": "0.11.1-alpha.2",
+    "@nocobase/utils": "0.11.1-alpha.2",
     "antd": "^5.6.4",
     "react": "^18.2.0",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.11.2"
   },
-  "gitHead": "7581b6d3a3a54f09f06a9effb7e3e65328281b2b"
+  "gitHead": "8482aa720ea1c3abbbb9fe1208e73778bd63f1cf"
 }

package/src/client/ChartBlockEngine.tsx

@@ -36,28 +36,27 @@ const ChartRenderComponent = ({
   const chartConfig = chartBlockEngineMetaData.chart;
   const { loading, dataSet, error } = useGetDataSet(chartBlockEngineMetaData.query.id);
 
+  const [currentConfig, setCurrentConfig] = useState<IChartConfig>({} as any);
+
+  useEffect(() => {
+    setCurrentConfig(chartConfig);
+  }, [JSON.stringify(chartConfig)]);
+
   if (error) {
     return (
       <>
-        <Empty description={<span>May be this chart block's query data has been deleted,please check!</span>} />
+        <Empty description={<span>{`May be this chart block's query data has been deleted,please check!`}</span>} />
       </>
     );
   }
 
-  const [currentConfig, setCurrentConfig] = useState<IChartConfig>({} as any);
-
-  useEffect(() => {
-    setCurrentConfig(chartConfig);
-  }, [JSON.stringify(chartConfig)]);
-
   if (currentConfig.type !== chartConfig.type) {
     return <></>;
   }
 
   switch (renderComponent) {
     case 'G2Plot': {
-      let finalChartOptions;
-      finalChartOptions = templates.get(chartType)?.defaultChartOptions;
+      const finalChartOptions = templates.get(chartType)?.defaultChartOptions;
       let template;
       try {
         template = JSON5.parse(chartConfig?.template);
@@ -85,7 +84,9 @@ const ChartRenderComponent = ({
 };
 
 export const useGetDataSet = (chartQueryId: number) => {
-  const { data, loading, error } = useRequest({
+  const { data, loading, error } = useRequest<{
+    data: any;
+  }>({
     url: `/chartsQueries:getData/${chartQueryId}`,
   });
   const dataSet = data?.data;

package/src/client/ChartBlockEngineDesigner.tsx

@@ -1,7 +1,8 @@
-import { FormDialog, FormLayout } from '@formily/antd-v5';
+import { FormLayout } from '@formily/antd-v5';
 import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
 import {
   APIClientProvider,
+  FormDialog,
   GeneralSchemaDesigner,
   SchemaComponent,
   SchemaComponentOptions,
@@ -11,7 +12,9 @@ import {
   useAPIClient,
   useCompile,
   useDesignable,
+  useGlobalTheme,
 } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
 import { Card } from 'antd';
 import JSON5 from 'json5';
 import React, { useContext, useEffect, useState } from 'react';
@@ -81,12 +84,15 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
   const compile = useCompile();
   const { chart, query } = chartBlockEngineMetaData;
   const { fields } = useFieldsById(query.id);
+  const { theme } = useGlobalTheme();
+
   const dataSource = fields.map((field) => {
     return {
       label: field.name,
       value: field.name,
     };
   });
+
   return (
     <SchemaSettings.Item
       onClick={async () => {
@@ -97,7 +103,7 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
             width: 1200,
             bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
           },
-          (form) => {
+          function Com(form) {
             const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
             useEffect(() => {
               const chartBlockEngineMetaData = {
@@ -208,6 +214,7 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
               </APIClientProvider>
             );
           },
+          theme,
         )
           .open({
             initialValues: { ...chart }, //reset before chartBlockMetaData
@@ -229,6 +236,9 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
               },
             });
             dn.refresh();
+          })
+          .catch((err) => {
+            error(err);
           });
       }}
     >

package/src/client/ChartBlockInitializer.tsx

@@ -1,14 +1,16 @@
-import { FormDialog, FormLayout } from '@formily/antd-v5';
+import { FormLayout } from '@formily/antd-v5';
 import { Field } from '@formily/core';
 import { RecursionField, Schema, SchemaOptionsContext, observer, useField, useForm } from '@formily/react';
 import {
   APIClientProvider,
+  FormDialog,
   FormProvider,
   SchemaComponent,
   SchemaComponentOptions,
   css,
   useAPIClient,
   useCompile,
+  useGlobalTheme,
 } from '@nocobase/client';
 import { Card } from 'antd';
 import JSON5 from 'json5';
@@ -17,7 +19,7 @@ import { ChartBlockEngineMetaData } from './ChartBlockEngine';
 import { jsonConfigDesc } from './ChartBlockEngineDesigner';
 import { ChartQueryBlockInitializer, ChartQueryMetadata } from './ChartQueryBlockInitializer';
 import DataSetPreviewTable from './DataSetPreviewTable';
-import { lang, useChartsTranslation } from './locale';
+import { lang } from './locale';
 import { templates } from './templates';
 
 export const Options = observer(
@@ -57,7 +59,8 @@ export const ChartBlockInitializer = (props) => {
   const options = useContext(SchemaOptionsContext);
   const api = useAPIClient();
   const compile = useCompile();
-  const { t } = useChartsTranslation();
+  const { theme } = useGlobalTheme();
+
   return (
     <ChartQueryBlockInitializer
       {...props}
@@ -76,7 +79,7 @@ export const ChartBlockInitializer = (props) => {
             width: 1200,
             bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
           },
-          () => {
+          function Com() {
             const form = useForm<ChartFormInterface>();
             const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
             useEffect(() => {
@@ -192,6 +195,7 @@ export const ChartBlockInitializer = (props) => {
               </APIClientProvider>
             );
           },
+          theme,
         ).open({
           initialValues: {},
         });

package/src/client/ChartQueryBlockInitializer.tsx

@@ -1,12 +1,14 @@
 import { TableOutlined } from '@ant-design/icons';
-import { FormDialog, FormLayout } from '@formily/antd-v5';
+import { FormLayout } from '@formily/antd-v5';
 import { SchemaOptionsContext } from '@formily/react';
 import {
+  FormDialog,
   SchemaComponent,
   SchemaComponentOptions,
   SchemaInitializer,
   SchemaInitializerButtonContext,
   useAPIClient,
+  useGlobalTheme,
 } from '@nocobase/client';
 import { error } from '@nocobase/utils/client';
 import React, { useCallback, useContext, useMemo } from 'react';
@@ -27,6 +29,8 @@ export const ChartQueryBlockInitializer = (props) => {
   const apiClient = useAPIClient();
   const ctx = useChartQueryMetadataContext();
   const options = useContext(SchemaOptionsContext);
+  const { theme } = useGlobalTheme();
+
   const onAddQuery = useCallback(
     (info) => {
       FormDialog(
@@ -58,6 +62,7 @@ export const ChartQueryBlockInitializer = (props) => {
             </div>
           );
         },
+        theme,
       )
         .open({
           initialValues: {

package/src/client/ChartQueryMetadataProvider.tsx

@@ -22,7 +22,9 @@ export const ChartQueryMetadataProvider: React.FC = (props) => {
 
   const location = useLocation();
 
-  const service = useRequest(options, {
+  const service = useRequest<{
+    data: any;
+  }>(options, {
     manual: true,
   });