@nocobase/plugin-charts 0.9.1-alpha.2

package/src/client/select/CustomSelect.tsx

@@ -0,0 +1,127 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { connect, mapProps, mapReadPretty } from '@formily/react';
+import { isValid } from '@formily/shared';
+import { Icon } from '@nocobase/client';
+import type { SelectProps } from 'antd';
+import { Popover, Select as AntdSelect } from 'antd';
+import React from 'react';
+import { lang } from '../locale';
+import { ReadPretty } from './ReadPretty';
+
+type Props = SelectProps<any, any> & { objectValue?: boolean; onChange?: (v: any) => void; multiple: boolean };
+
+const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
+
+const { Option, OptGroup } = AntdSelect;
+const filterOption = (input, option) => (option?.label ?? '').toLowerCase().includes((input || '').toLowerCase());
+
+const InternalSelect = connect(
+  (props: Props) => {
+    const { ...others } = props;
+    const { options, ...othersProps } = { ...others };
+    const mode = props.mode || props.multiple ? 'multiple' : undefined;
+    const group1 = options.filter((option) => option.group === 2);
+    const group2 = options.filter((option) => option.group === 1);
+    return (
+      <AntdSelect
+        showSearch
+        filterOption={filterOption}
+        allowClear
+        {...othersProps}
+        onChange={(changed) => {
+          props.onChange?.(changed === undefined ? null : changed);
+        }}
+        mode={mode}
+      >
+        <OptGroup label={lang('Basic charts')}>
+          {group1.map((option) => (
+            <Option value={option.key} label={lang(option.title)}>
+              <Popover
+                placement={'right'}
+                zIndex={99999999999}
+                content={() => (
+                  <span>
+                    {lang(option?.description)
+                      ?.split(',')
+                      .map((item) => (
+                        <div>{item}</div>
+                      ))}
+                  </span>
+                )}
+                trigger="hover"
+              >
+                <div
+                  className={css`
+                    display: flex;
+                    gap: 4px;
+                    align-items: center;
+                  `}
+                >
+                  <Icon type={option.iconId} />
+                  <span role="img" aria-label={lang(option.title)}>
+                    {lang(option.title)}
+                  </span>
+                </div>
+              </Popover>
+            </Option>
+          ))}
+        </OptGroup>
+        <OptGroup label={lang('More charts')}>
+          {group2.map((option) => (
+            <Option value={option.key} label={lang(option.title)}>
+              <Popover
+                placement={'right'}
+                zIndex={99999999999}
+                content={() => (
+                  <span>
+                    {lang(option?.description)
+                      ?.split(',')
+                      .map((item) => (
+                        <div>{item}</div>
+                      ))}
+                  </span>
+                )}
+                trigger="hover"
+              >
+                <div
+                  className={css`
+                    display: flex;
+                    gap: 4px;
+                    align-items: center;
+                  `}
+                >
+                  <Icon type={option.iconId} />
+                  <span role="img" aria-label={lang(option.title)}>
+                    {lang(option.title)}
+                  </span>
+                </div>
+              </Popover>
+            </Option>
+          ))}
+        </OptGroup>
+      </AntdSelect>
+    );
+  },
+  mapProps(
+    {
+      dataSource: 'options',
+      loading: true,
+    },
+    (props, field) => {
+      return {
+        ...props,
+        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props?.suffixIcon,
+      };
+    },
+  ),
+  mapReadPretty(ReadPretty),
+);
+
+export const CustomSelect = InternalSelect as unknown as typeof InternalSelect & {
+  ReadPretty: typeof ReadPretty;
+};
+
+CustomSelect.ReadPretty = ReadPretty;
+
+export default CustomSelect;

package/src/client/select/ReadPretty.tsx

@@ -0,0 +1,36 @@
+import { isArrayField } from '@formily/core';
+import { observer, useField } from '@formily/react';
+import { isValid } from '@formily/shared';
+import { Tag } from 'antd';
+import React from 'react';
+import { defaultFieldNames, getCurrentOptions } from './shared';
+import { useCompile } from '@nocobase/client';
+
+type Composed = {
+  Select?: React.FC<any>;
+  Object?: React.FC<any>;
+};
+
+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>
+  );
+});

package/src/client/select/index.md

@@ -0,0 +1,38 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
+# Select
+
+## Examples
+
+### 单选
+
+<code src="./demos/demo1.tsx" />
+
+### 多选
+
+<code src="./demos/demo2.tsx" />
+
+### 值为 Object 类型的 Select
+
+<code src="./demos/demo3.tsx" />
+
+## API
+
+基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
+
+- `objectValue` 值为 object 类型
+- `fieldNames` 默认值有区别
+
+```ts
+export const defaultFieldNames = {
+  label: 'label',
+  value: 'value',
+  color: 'color',
+  options: 'children',
+};
+```

package/src/client/select/index.ts

@@ -0,0 +1,2 @@
+export * from './CustomSelect';
+export * from './shared';

package/src/client/select/shared.ts

@@ -0,0 +1,36 @@
+import { castArray } from 'lodash';
+
+export const defaultFieldNames = {
+  label: 'label',
+  value: 'value',
+  color: 'color',
+  options: 'children',
+};
+
+export const getCurrentOptions = (values, dataSource, fieldNames) => {
+  function flatData(data) {
+    let newArr = [];
+    for (let i = 0; i < data.length; i++) {
+      const children = data[i][fieldNames.options];
+      if (Array.isArray(children)) {
+        newArr.push(...flatData(children));
+      }
+      newArr.push({ ...data[i] });
+    }
+    return newArr;
+  }
+  const result = flatData(dataSource);
+  values = castArray(values)
+    .filter((item) => item != null)
+    .map((val) => (typeof val === 'object' ? val[fieldNames.value] : val));
+  const findOptions = (options: any[]) => {
+    if (!options) return [];
+    let current = [];
+    for (const value of values) {
+      const option = options.find((v) => v[fieldNames.value] === value) || { value: value, label: value };
+      current.push(option);
+    }
+    return current;
+  };
+  return findOptions(result);
+};

package/src/client/settings/AddNewQuery.tsx

@@ -0,0 +1,161 @@
+import { DownOutlined, PlusOutlined } from '@ant-design/icons';
+import { createForm } from '@formily/core';
+import { ISchema, useForm } from '@formily/react';
+import { uid } from '@formily/shared';
+import {
+  ActionContext,
+  SchemaComponent,
+  useActionContext,
+  useRecord,
+  useResourceActionContext,
+  useResourceContext,
+} from '@nocobase/client';
+import { Button, Dropdown, Menu } from 'antd';
+import React, { useMemo, useState } from 'react';
+import { useChartQueryMetadataContext } from '../ChartQueryMetadataProvider';
+import { getQueryTypeSchema } from './queryTypes';
+import { lang } from '../locale';
+
+const useCreateAction = () => {
+  const { setVisible } = useActionContext();
+  const form = useForm();
+  const { refresh } = useResourceActionContext();
+  const { resource } = useResourceContext();
+  const ctx = useChartQueryMetadataContext();
+  return {
+    async run() {
+      await form.submit();
+      await resource.create({ values: form.values });
+      setVisible(false);
+      await form.reset();
+      refresh();
+      ctx.refresh();
+    },
+  };
+};
+
+const useUpdateAction = () => {
+  const { setVisible } = useActionContext();
+  const form = useForm();
+  const { refresh } = useResourceActionContext();
+  const { resource, targetKey } = useResourceContext();
+  const { [targetKey]: filterByTk } = useRecord();
+  const ctx = useChartQueryMetadataContext();
+  return {
+    async run() {
+      await form.submit();
+      await resource.update({ filterByTk, values: form.values });
+      setVisible(false);
+      await form.reset();
+      refresh();
+      ctx.refresh();
+    },
+  };
+};
+
+const useCloseAction = () => {
+  const { setVisible } = useActionContext();
+  return {
+    async run() {
+      setVisible(false);
+    },
+  };
+};
+
+const getSchema = (initialValue, { form, isNewRecord }) => {
+  const type = initialValue.type;
+  const schema: ISchema = {
+    type: 'void',
+    name: uid(),
+    'x-component': 'Action.Drawer',
+    'x-decorator': 'Form',
+    'x-decorator-props': {
+      form,
+      // initialValue: JSON.parse(JSON.stringify(initialValue)),
+    },
+    title: isNewRecord ? lang('Add query') : lang('Edit query'),
+    properties: {
+      title: {
+        title: lang('Title'),
+        required: true,
+        'x-component': 'Input',
+        'x-decorator': 'FormItem',
+      },
+      options: getQueryTypeSchema(type),
+      footer: {
+        type: 'void',
+        'x-component': 'Action.Drawer.Footer',
+        properties: {
+          cancel: {
+            'x-component': 'Action',
+            title: lang('Cancel'),
+            'x-component-props': {
+              useAction: '{{ useCloseAction }}',
+            },
+          },
+          submit: {
+            'x-component': 'Action',
+            title: lang('Submit'),
+            'x-component-props': {
+              type: 'primary',
+              useAction: '{{ useSubmitAction }}',
+            },
+          },
+        },
+      },
+    },
+  };
+  return schema;
+};
+
+export const AddNewQuery = () => {
+  const [visible, setVisible] = useState(false);
+  const [schema, setSchema] = useState({});
+  const form = useMemo(() => createForm(), []);
+  const menu = (
+    <Menu
+      onClick={(info) => {
+        setVisible(true);
+        form.setValues({ type: info.key });
+        setSchema(getSchema({ type: info.key }, { form, isNewRecord: true }));
+      }}
+    >
+      <Menu.Item key={'json'}>JSON</Menu.Item>
+      <Menu.Item key={'sql'}>SQL</Menu.Item>
+      <Menu.Item disabled key={'api'}>
+        API
+      </Menu.Item>
+      <Menu.Item disabled>Collection</Menu.Item>
+    </Menu>
+  );
+  return (
+    <ActionContext.Provider 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>
+  );
+};
+
+export const EditQuery = () => {
+  const [visible, setVisible] = useState(false);
+  const record = useRecord();
+  const form = useMemo(() => createForm(), []);
+  const schema = getSchema(record, { form, isNewRecord: false });
+  return (
+    <ActionContext.Provider value={{ visible, setVisible }}>
+      <a
+        onClick={() => {
+          form.setValues(record);
+          setVisible(true);
+        }}
+      >
+        {lang('Edit')}
+      </a>
+      <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useUpdateAction }} />
+    </ActionContext.Provider>
+  );
+};

package/src/client/settings/ConfigureFields.tsx

@@ -0,0 +1,18 @@
+import { useRecord } from '@nocobase/client';
+import { Table } from 'antd';
+import React from 'react';
+
+export const ConfigureFields = () => {
+  const record = useRecord();
+  return (
+    <Table
+      columns={[
+        {
+          title: '字段标识',
+          dataIndex: 'name',
+        },
+      ]}
+      dataSource={record.fields || []}
+    />
+  );
+};

package/src/client/settings/QueriesTable.tsx

@@ -0,0 +1,26 @@
+import { SchemaComponent } from '@nocobase/client';
+import { Card } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AddNewQuery, EditQuery } from './AddNewQuery';
+import { ConfigureFields } from './ConfigureFields';
+import {
+  chartsQueriesSchema,
+  useDestroyAllSelectedQueriesAction,
+  useDestroyQueryItemAction,
+} from './schemas/chartsQueries';
+import JSON5 from 'json5';
+
+export const QueriesTable = () => {
+  const [visible, setVisible] = useState(false);
+  const { t } = useTranslation();
+  return (
+    <Card bordered={false}>
+      <SchemaComponent
+        scope={{ JSON5, useDestroyQueryItemAction, useDestroyAllSelectedQueriesAction }}
+        schema={chartsQueriesSchema}
+        components={{ AddNewQuery, EditQuery, ConfigureFields }}
+      />
+    </Card>
+  );
+};

package/src/client/settings/queryTypes.ts

@@ -0,0 +1,64 @@
+import { ISchema } from '@formily/react';
+import cloneDeep from 'lodash/cloneDeep';
+export const json: ISchema = {
+  type: 'object',
+  properties: {
+    data: {
+      title: 'JSON',
+      required: true,
+      'x-component': 'Input.TextArea',
+      'x-validator': { json5: true },
+      'x-component-props': {
+        autoSize: {
+          maxRows: 20,
+          minRows: 10,
+        },
+      },
+      'x-decorator': 'FormItem',
+    },
+  },
+};
+
+export const sql: ISchema = {
+  type: 'object',
+  properties: {
+    sql: {
+      title: 'SQL',
+      required: true,
+      'x-component': 'Input.TextArea',
+      'x-decorator': 'FormItem',
+      'x-validator': {
+        triggerType: 'onBlur',
+        validator: '{{validateSQL}}',
+      },
+      'x-component-props': {
+        autoSize: {
+          maxRows: 20,
+          minRows: 10,
+        },
+      },
+    },
+  },
+};
+
+export const api: ISchema = {
+  type: 'object',
+  properties: {
+    api: {
+      title: 'API',
+      required: true,
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+    },
+  },
+};
+
+const types = {
+  json,
+  sql,
+  api,
+};
+
+export const getQueryTypeSchema = (type) => {
+  return cloneDeep(types[type]);
+};