@nocobase/plugin-charts 0.9.4-alpha.2 → 0.10.0-alpha.2

package/lib/client/ChartBlockEngine.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface IQueryConfig {
     id: number;
 }
@@ -21,7 +22,7 @@ export declare const useGetDataSet: (chartQueryId: number) => {
 declare const ChartBlockEngine: {
     ({ chartBlockEngineMetaData }: {
         chartBlockEngineMetaData: ChartBlockEngineMetaData;
-    }): JSX.Element;
-    Designer: () => JSX.Element;
+    }): React.JSX.Element;
+    Designer: () => React.JSX.Element;
 };
 export { ChartBlockEngine };

package/lib/client/ChartBlockEngineDesigner.d.ts

@@ -1,3 +1,4 @@
-export declare const jsonConfigDesc: (title: string, link: string) => JSX.Element;
-export declare const ChartBlockEngineDesigner: () => JSX.Element;
-export declare const ChartBlockEngineDesignerInitializer: (props: any) => JSX.Element;
+import React from 'react';
+export declare const jsonConfigDesc: (title: string, link: string) => React.JSX.Element;
+export declare const ChartBlockEngineDesigner: () => React.JSX.Element;
+export declare const ChartBlockEngineDesignerInitializer: (props: any) => React.JSX.Element;

package/lib/client/ChartBlockInitializer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Options: React.MemoExoticComponent<React.FunctionComponent<unknown>>;
-export declare const ChartBlockInitializer: (props: any) => JSX.Element;
+export declare const Options: React.MemoExoticComponent<import("@formily/react").ReactFC<unknown>>;
+export declare const ChartBlockInitializer: (props: any) => React.JSX.Element;

package/lib/client/ChartBlockInitializer.js

@@ -100,6 +100,8 @@ const Options = (0, _react().observer)(props => {
   return _react2().default.createElement(_react().RecursionField, {
     schema: s
   });
+}, {
+  displayName: 'Options'
 });
 exports.Options = Options;
 const ChartBlockInitializer = props => {

package/lib/client/ChartQueryBlockInitializer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface ChartQueryMetadata {
     id: number;
     title: string;
@@ -6,4 +7,4 @@ export interface ChartQueryMetadata {
         name: string;
     }[];
 }
-export declare const ChartQueryBlockInitializer: (props: any) => JSX.Element;
+export declare const ChartQueryBlockInitializer: (props: any) => React.JSX.Element;

package/lib/client/DataSetPreviewTable.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 declare const _default: ({ queryId, fields }: {
     queryId: number;
     fields: any;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/lib/client/hooks/index.js

@@ -28,7 +28,7 @@ const useFieldsById = queryId => {
     const chartQueryList = ctx === null || ctx === void 0 ? void 0 : ctx.data;
     if (chartQueryList && Array.isArray(chartQueryList)) {
       const currentQuery = chartQueryList.find(chartQuery => chartQuery.id === queryId);
-      setFields(currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.fields);
+      setFields((currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.fields) || []);
     }
   }, [queryId]);
   return {

package/lib/client/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import './Icons';
-declare const _default: React.NamedExoticComponent<object>;
-export default _default;
+declare const Charts: React.NamedExoticComponent<object>;
+export default Charts;

package/lib/client/index.js

@@ -65,7 +65,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     }
   }
 });
-var _default = _react().default.memo(props => {
+const Charts = _react().default.memo(props => {
   const api = (0, _client().useAPIClient)();
   const items = (0, _react().useContext)(_client().SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -125,4 +125,6 @@ var _default = _react().default.memo(props => {
     value: items
   }, props.children))));
 });
+Charts.displayName = 'Charts';
+var _default = Charts;
 exports.default = _default;

package/lib/client/select/ReadPretty.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const ReadPretty: React.MemoExoticComponent<React.FunctionComponent<Pick<any, string | number | symbol>>>;
+export declare const ReadPretty: React.MemoExoticComponent<import("@formily/react").ReactFC<Pick<any, string | number | symbol>>>;

package/lib/client/select/ReadPretty.js

@@ -71,5 +71,7 @@ const ReadPretty = (0, _react().observer)(props => {
     color: option[fieldNames.color],
     icon: option.icon
   }, compile(option[fieldNames.label]))));
+}, {
+  displayName: 'ReadPretty'
 });
 exports.ReadPretty = ReadPretty;

package/lib/client/settings/AddNewQuery.d.ts

@@ -1,2 +1,3 @@
-export declare const AddNewQuery: () => JSX.Element;
-export declare const EditQuery: () => JSX.Element;
+import React from 'react';
+export declare const AddNewQuery: () => React.JSX.Element;
+export declare const EditQuery: () => React.JSX.Element;

package/lib/client/settings/AddNewQuery.js

@@ -211,7 +211,7 @@ const AddNewQuery = () => {
   }, "API"), _react2().default.createElement(_antd().Menu.Item, {
     disabled: true
   }, "Collection"));
-  return _react2().default.createElement(_client().ActionContext.Provider, {
+  return _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible,
       setVisible
@@ -241,7 +241,7 @@ const EditQuery = () => {
     form,
     isNewRecord: false
   });
-  return _react2().default.createElement(_client().ActionContext.Provider, {
+  return _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible,
       setVisible

package/lib/client/settings/ConfigureFields.d.ts

@@ -1 +1,2 @@
-export declare const ConfigureFields: () => JSX.Element;
+import React from 'react';
+export declare const ConfigureFields: () => React.JSX.Element;

package/lib/client/settings/QueriesTable.d.ts

@@ -1 +1,2 @@
-export declare const QueriesTable: () => JSX.Element;
+import React from 'react';
+export declare const QueriesTable: () => React.JSX.Element;

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@nocobase/plugin-charts",
-  "version": "0.9.4-alpha.2",
+  "displayName": "charts",
+  "displayName.zh-CN": "图表",
+  "description": "Out-of-the-box, feature-rich chart plugins.",
+  "description.zh-CN": "开箱即用、丰富的报表。",
+  "version": "0.10.0-alpha.2",
   "main": "lib/server/index.js",
   "devDependencies": {
-    "@nocobase/client": "0.9.4-alpha.2",
-    "@nocobase/server": "0.9.4-alpha.2",
-    "@nocobase/test": "0.9.4-alpha.2"
+    "@nocobase/client": "0.10.0-alpha.2",
+    "@nocobase/server": "0.10.0-alpha.2",
+    "@nocobase/test": "0.10.0-alpha.2"
   },
   "dependencies": {
     "json5": "^2.2.3"
   },
-  "gitHead": "2bc19a85bf9425aa220b6c467315c8087f333a7e"
+  "gitHead": "85028ae1733fcbd46ecd5d291dacbdc175f7f073"
 }

package/src/client/ChartBlockInitializer.tsx

@@ -20,24 +20,27 @@ import DataSetPreviewTable from './DataSetPreviewTable';
 import { lang, useChartsTranslation } from './locale';
 import { templates } from './templates';
 
-export const Options = observer((props) => {
-  const form = useForm<ChartFormInterface>();
-  const field = useField<Field>();
-  const [s, setSchema] = useState(new Schema({}));
-  const [chartType, setChartType] = useState(form.values.type);
-  useEffect(() => {
-    // form.clearFormGraph('options.*');
-    setChartType(form?.values?.type);
-    if (chartType !== form?.values?.type) {
-      form.clearFormGraph('options.*');
-    }
-    if (form.values.type) {
-      const template = templates.get(form.values.type);
-      setSchema(new Schema(template.configurableProperties || {}));
-    }
-  }, [form.values.type]);
-  return <RecursionField schema={s} />;
-});
+export const Options = observer(
+  (props) => {
+    const form = useForm<ChartFormInterface>();
+    const field = useField<Field>();
+    const [s, setSchema] = useState(new Schema({}));
+    const [chartType, setChartType] = useState(form.values.type);
+    useEffect(() => {
+      // form.clearFormGraph('options.*');
+      setChartType(form?.values?.type);
+      if (chartType !== form?.values?.type) {
+        form.clearFormGraph('options.*');
+      }
+      if (form.values.type) {
+        const template = templates.get(form.values.type);
+        setSchema(new Schema(template.configurableProperties || {}));
+      }
+    }, [form.values.type]);
+    return <RecursionField schema={s} />;
+  },
+  { displayName: 'Options' },
+);
 
 interface ChartFormInterface {
   type: string;

package/src/client/hooks/index.ts

@@ -8,7 +8,7 @@ const useFieldsById = (queryId: number) => {
     const chartQueryList = ctx?.data;
     if (chartQueryList && Array.isArray(chartQueryList)) {
       const currentQuery = chartQueryList.find((chartQuery) => chartQuery.id === queryId);
-      setFields(currentQuery?.fields);
+      setFields(currentQuery?.fields || []);
     }
   }, [queryId]);
   return {

package/src/client/index.tsx

@@ -39,9 +39,9 @@ registerValidateRules({
   },
 });
 
-export default React.memo((props) => {
+const Charts = React.memo((props) => {
   const api = useAPIClient();
-  const items = useContext(SchemaInitializerContext);
+  const items = useContext<any>(SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
   if (children) {
     const hasChartItem = children.some((child) => child?.component === 'ChartBlockInitializer');
@@ -99,3 +99,6 @@ export default React.memo((props) => {
     </ChartQueryMetadataProvider>
   );
 });
+Charts.displayName = 'Charts';
+
+export default Charts;

package/src/client/select/ReadPretty.tsx

@@ -11,26 +11,29 @@ type Composed = {
   Object?: React.FC<any>;
 };
 
-export const ReadPretty = observer((props: any) => {
-  const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-  const field = useField<any>();
-  const compile = useCompile();
+export const ReadPretty = observer(
+  (props: any) => {
+    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
+    const field = useField<any>();
+    const compile = useCompile();
 
-  if (!isValid(props.value)) {
-    return <div />;
-  }
-  if (isArrayField(field) && field?.value?.length === 0) {
-    return <div />;
-  }
-  const dataSource = field.dataSource || props.options || [];
-  const options = getCurrentOptions(field.value, dataSource, fieldNames);
-  return (
-    <div>
-      {options.map((option, key) => (
-        <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
-          {compile(option[fieldNames.label])}
-        </Tag>
-      ))}
-    </div>
-  );
-});
+    if (!isValid(props.value)) {
+      return <div />;
+    }
+    if (isArrayField(field) && field?.value?.length === 0) {
+      return <div />;
+    }
+    const dataSource = field.dataSource || props.options || [];
+    const options = getCurrentOptions(field.value, dataSource, fieldNames);
+    return (
+      <div>
+        {options.map((option, key) => (
+          <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
+            {compile(option[fieldNames.label])}
+          </Tag>
+        ))}
+      </div>
+    );
+  },
+  { displayName: 'ReadPretty' },
+);

package/src/client/select/index.md

@@ -1,25 +1,18 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
 # Select
 
 ## Examples
 
 ### 单选
 
-<code src="./demos/demo1.tsx" />
+<code src="./demos/demo1.tsx"></code>
 
 ### 多选
 
-<code src="./demos/demo2.tsx" />
+<code src="./demos/demo2.tsx"></code>
 
 ### 值为 Object 类型的 Select
 
-<code src="./demos/demo3.tsx" />
+<code src="./demos/demo3.tsx"></code>
 
 ## API
 

package/src/client/settings/AddNewQuery.tsx

@@ -3,7 +3,7 @@ import { createForm } from '@formily/core';
 import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import {
-  ActionContext,
+  ActionContextProvider,
   SchemaComponent,
   useActionContext,
   useRecord,
@@ -129,14 +129,14 @@ export const AddNewQuery = () => {
     </Menu>
   );
   return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
+    <ActionContextProvider value={{ visible, setVisible }}>
       <Dropdown overlay={menu}>
         <Button icon={<PlusOutlined />} type={'primary'}>
           {lang('Add query')} <DownOutlined />
         </Button>
       </Dropdown>
       <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useCreateAction }} />
-    </ActionContext.Provider>
+    </ActionContextProvider>
   );
 };
 
@@ -146,7 +146,7 @@ export const EditQuery = () => {
   const form = useMemo(() => createForm(), []);
   const schema = getSchema(record, { form, isNewRecord: false });
   return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
+    <ActionContextProvider value={{ visible, setVisible }}>
       <a
         onClick={() => {
           form.setValues(record);
@@ -156,6 +156,6 @@ export const EditQuery = () => {
         {lang('Edit')}
       </a>
       <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useUpdateAction }} />
-    </ActionContext.Provider>
+    </ActionContextProvider>
   );
 };