@nocobase/plugin-charts 0.9.1-alpha.2

package/src/client/templates/PieTemplate.tsx

@@ -0,0 +1,68 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  appendPadding: 10,
+  angleField: '{{metric}}',
+  colorField: '{{dimension}}',
+  radius: 0.9,
+  label: {
+    type: 'inner',
+    offset: '-30%',
+    content: '{{({percent}) => `${(percent * 100).toFixed(0)}%`}}',
+    style: {
+      fontSize: 14,
+      textAlign: 'center',
+    },
+  },
+  interactions: [{ type: 'element-active' }],
+};
+
+export const pieTemplate = {
+  description: '1 「Time」 or 「Order Noun」 field, 1 「Value」 field',
+  title: 'Pie',
+  type: 'Pie',
+  iconId: 'icon-pie',
+  group: 2,
+  renderComponent: 'G2Plot',
+  defaultChartOptions: chartConfig,
+  configurableProperties: {
+    type: 'void',
+    properties: {
+      dimension: {
+        required: true,
+        type: 'string',
+        title: '{{t("Sector label / Dimensional",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      metric: {
+        required: true,
+        type: 'string',
+        title: '{{t("Sector Angle / Metric",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      jsonConfig: {
+        type: 'void',
+        'x-component': 'div',
+        properties: {
+          template: {
+            required: true,
+            title: '{{t("JSON config",{ns:"charts"})}}',
+            type: 'string',
+            default: JSON5.stringify(chartConfig, null, 2),
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+              autoSize: { minRows: 8, maxRows: 16 },
+            },
+            description: '{{jsonConfigDesc("Pie | G2Plot","https://g2plot.antv.antgroup.com/api/plots/pie")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/RadarTemplate.tsx

@@ -0,0 +1,71 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  xField: '{{dimension}}',
+  yField: '{{metric}}',
+  appendPadding: [0, 10, 0, 10],
+  xAxis: {
+    tickLine: null,
+  },
+  yAxis: {
+    label: false,
+    grid: {
+      alternateColor: 'rgba(0, 0, 0, 0.04)',
+    },
+  },
+  // 开启辅助点
+  point: {
+    size: 2,
+  },
+  area: {},
+};
+
+export const radarTemplate = {
+  description: '1~ 2 「Unordered Noun」 fields, 1 「Numeric」 field',
+  type: 'Radar',
+  title: 'Radar',
+  iconId: 'icon-radar',
+  group: 1,
+  renderComponent: 'G2Plot',
+  defaultChartOptions: chartConfig,
+  configurableProperties: {
+    type: 'void',
+    properties: {
+      dimension: {
+        required: true,
+        type: 'string',
+        title: '{{t("Branch Tags/Dimensions",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      metric: {
+        required: true,
+        type: 'string',
+        title: '{{t("Branch Length/Metrics",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      jsonConfig: {
+        type: 'void',
+        'x-component': 'div',
+        properties: {
+          template: {
+            required: true,
+            title: '{{t("JSON config",{ns:"charts"})}}',
+            type: 'string',
+            default: JSON5.stringify(chartConfig, null, 2),
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+              autoSize: { minRows: 8, maxRows: 16 },
+            },
+            description: '{{jsonConfigDesc("Radar | G2Plot","https://g2plot.antv.antgroup.com/api/plots/radar")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/ScatterTemplate.tsx

@@ -0,0 +1,90 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  appendPadding: 10,
+  xField: '{{metric}}',
+  yField: '{{dimension}}',
+  colorField: '{{category}}',
+  shape: 'circle',
+  size: 4,
+  yAxis: {
+    nice: true,
+    line: {
+      style: {
+        stroke: '#aaa',
+      },
+    },
+  },
+  xAxis: {
+    min: -100,
+    grid: {
+      line: {
+        style: {
+          stroke: '#eee',
+        },
+      },
+    },
+    line: {
+      style: {
+        stroke: '#aaa',
+      },
+    },
+  },
+};
+
+export const scatterTemplate = {
+  description: '1 「Numeric」 field, 0~ 1 「Unordered Noun」 field',
+  type: 'Scatter',
+  title: 'Scatter',
+  iconId: 'icon-scatter',
+  group: 2,
+  renderComponent: 'G2Plot',
+  defaultChartOptions: chartConfig,
+  configurableProperties: {
+    type: 'void',
+    properties: {
+      dimension: {
+        required: true,
+        type: 'string',
+        title: '{{t("Category axis / Dimension",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      metric: {
+        required: true,
+        type: 'string',
+        title: '{{t("Value axis / Metrics",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      category: {
+        type: 'string',
+        title: '{{t("Color legend / Dimensional",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      jsonConfig: {
+        type: 'void',
+        'x-component': 'div',
+        properties: {
+          template: {
+            required: true,
+            title: '{{t("JSON config",{ns:"charts"})}}',
+            type: 'string',
+            default: JSON5.stringify(chartConfig, null, 2),
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+              autoSize: { minRows: 8, maxRows: 16 },
+            },
+            description: '{{jsonConfigDesc("Scatter | G2Plot","https://g2plot.antv.antgroup.com/api/plots/scatter")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/TableTemplate.tsx

@@ -0,0 +1,48 @@
+import JSON5 from 'json5';
+
+const validateJSON = {
+  validator: `{{(value, rule)=> {
+    if (!value) {
+      return '';
+    }
+    try {
+      const val = JSON5.parse(value);
+      if(!isNaN(val)) {
+        return false;
+      }
+      return true;
+    } catch(error) {
+      console.error(error);
+      return false;
+    }
+  }}}`,
+  message: '{{t("Invalid JSON format",{ ns: "charts" })}}',
+};
+
+const chartConfig = {
+  appendPadding: 10,
+  angleField: '{{metric}}',
+  colorField: '{{dimension}}',
+  radius: 0.9,
+  label: {
+    type: 'inner',
+    offset: '-30%',
+    content: '{{({percent}) => `${(percent * 100).toFixed(0)}%`}}',
+    style: {
+      fontSize: 14,
+      textAlign: 'center',
+    },
+  },
+  interactions: [{ type: 'element-active' }],
+};
+export const tableTemplate = {
+  title: '表格展示',
+  type: 'DataSetPreviewTable',
+  group: 2,
+  renderComponent: 'DataSetPreviewTable',
+  defaultChartOptions: chartConfig,
+  configurableProperties: {
+    type: 'void',
+    properties: {},
+  },
+};

package/src/client/templates/index.ts

@@ -0,0 +1,21 @@
+import { pieTemplate } from './PieTemplate';
+import { barTemplate } from './BarTemplate';
+import { columnTemplate } from './ColumnTemplate';
+import { lineTemplate } from './LineTemplate';
+import { areaTemplate } from './AreaTemplate';
+import { tableTemplate } from './TableTemplate';
+import { scatterTemplate } from './ScatterTemplate';
+import { radarTemplate } from './RadarTemplate';
+import { funnelTemplate } from './FunnelTemplate';
+
+export const templates = new Map();
+
+templates.set('Pie', pieTemplate);
+templates.set('Line', lineTemplate);
+templates.set('Area', areaTemplate);
+templates.set('Bar', barTemplate);
+templates.set('Column', columnTemplate);
+templates.set('Scatter', scatterTemplate);
+templates.set('Radar', radarTemplate);
+templates.set('Funnel', funnelTemplate);
+// templates.set('DataSetPreviewTable', tableTemplate);

package/src/client/utils.ts

@@ -0,0 +1,39 @@
+import JSON5 from 'json5';
+import { uid } from '@formily/shared';
+
+const validateArray = (value) => {
+  try {
+    value = JSON5.parse(value);
+  } catch (e) {
+    return 'Please input validate dataset';
+  }
+  if (Array.isArray(value)) {
+    if (
+      value.every((item) => {
+        return typeof item === 'object' && Object.keys(item).length > 1;
+      })
+    )
+      return true;
+  }
+  return 'Please input validate dataset';
+};
+
+const parseDataSetString = (str) => {
+  const dataSetDataArray = JSON5.parse(str);
+  if (Array.isArray(dataSetDataArray)) {
+    if (
+      dataSetDataArray.every((item) => {
+        return typeof item === 'object' && Object.keys(item).length > 1;
+      })
+    )
+      dataSetDataArray.map((item) => {
+        if (!item?.id) {
+          item.id = uid();
+        }
+        return item;
+      });
+  }
+  return dataSetDataArray;
+};
+
+export { validateArray, parseDataSetString };

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

package/src/server/actions/chartsQueries.ts

@@ -0,0 +1,44 @@
+import JSON5 from 'json5';
+import { query } from '../query';
+
+export const getData = async (ctx, next) => {
+  const { filterByTk } = ctx.action.params;
+  const r = ctx.db.getRepository('chartsQueries');
+  const instance = await r.findOne({ filterByTk });
+  const result = await query[instance.type](instance.options, { db: ctx.db, skipError: true });
+  if (typeof result === 'string') {
+    ctx.body = JSON5.parse(result);
+  } else {
+    ctx.body = result;
+  }
+  return next();
+};
+
+export const validate = async (ctx, next) => {
+  const { values } = ctx.action.params;
+  ctx.body = {
+    errorMessage: '',
+  };
+  try {
+    await query.sql(values, { db: ctx.db, validateSQL: true });
+  } catch (error) {
+    ctx.body = {
+      errorMessage: error.message,
+    };
+  }
+  return next();
+};
+
+export const listMetadata = async (ctx, next) => {
+  const r = ctx.db.getRepository('chartsQueries');
+  const items = await r.find({ sort: '-id' });
+  ctx.body = items.map((item) => {
+    return {
+      id: item.id,
+      title: item.title,
+      type: item.type,
+      fields: item.fields,
+    };
+  });
+  return next();
+};

package/src/server/collections/chartsQueries.ts

@@ -0,0 +1,24 @@
+import { defineCollection } from '@nocobase/database';
+
+export default defineCollection({
+  name: 'chartsQueries',
+  fields: [
+    {
+      name: 'title',
+      type: 'string',
+    },
+    {
+      name: 'type',
+      type: 'string',
+    },
+    {
+      name: 'options',
+      type: 'json',
+    },
+    {
+      name: 'fields',
+      type: 'json',
+      defaultValue: [],
+    },
+  ],
+});

package/src/server/index.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

package/src/server/plugin.ts

@@ -0,0 +1,61 @@
+import { InstallOptions, Plugin } from '@nocobase/server';
+import JSON5 from 'json5';
+import { resolve } from 'path';
+import { getData, listMetadata, validate } from './actions/chartsQueries';
+import { query } from './query';
+
+export class ChartsPlugin extends Plugin {
+  syncFields = async (instance, { transaction }) => {
+    const _data = await query[instance.type](instance.options, { db: this.db, transaction, validateSQL: true });
+    let data;
+    if (typeof _data === 'string') {
+      data = JSON5.parse(_data);
+    } else {
+      data = _data;
+    }
+    const d = Array.isArray(data) ? data?.[0] : data;
+    const fields = Object.keys(d || {}).map((f) => {
+      return {
+        name: f,
+      };
+    });
+    instance.set('fields', fields);
+  };
+
+  afterAdd() {}
+
+  beforeLoad() {
+    this.app.db.on('chartsQueries.beforeCreate', this.syncFields);
+    this.app.db.on('chartsQueries.beforeUpdate', this.syncFields);
+  }
+
+  async load() {
+    await this.db.import({
+      directory: resolve(__dirname, 'collections'),
+    });
+
+    this.app.resourcer.registerActionHandlers({
+      'chartsQueries:getData': getData,
+      'chartsQueries:listMetadata': listMetadata,
+      'chartsQueries:validate': validate,
+    });
+
+    this.app.acl.registerSnippet({
+      name: 'pm.charts.queries',
+      actions: ['chartsQueries:*'],
+    });
+
+    this.app.acl.allow('chartsQueries', 'getData', 'loggedIn');
+    this.app.acl.allow('chartsQueries', 'listMetadata', 'loggedIn');
+  }
+
+  async install(options?: InstallOptions) {}
+
+  async afterEnable() {}
+
+  async afterDisable() {}
+
+  async remove() {}
+}
+
+export default ChartsPlugin;

package/src/server/query.ts

@@ -0,0 +1,39 @@
+import { Database } from '@nocobase/database';
+
+export const query = {
+  api: async (options) => {
+    return [];
+  },
+  json: async (options) => {
+    return options.data || [];
+  },
+  sql: async (
+    options,
+    {
+      db,
+      transaction,
+      skipError,
+      validateSQL,
+    }: { db: Database; transaction?: any; skipError?: boolean; validateSQL?: boolean },
+  ) => {
+    try {
+      // 分号截取，只取第一段
+      const sql: string = options.sql.trim().split(';').shift();
+      if (!sql) {
+        throw new Error('SQL is empty');
+      }
+      if (!/^select/i.test(sql) && !/^with([\s\S]+)select([\s\S]+)/i.test(sql)) {
+        throw new Error('Only select query allowed');
+      }
+      const [data] = await db.sequelize.query(sql, { transaction });
+      return data;
+    } catch (error) {
+      if (skipError) {
+        return [];
+      }
+      throw error;
+    }
+  },
+};
+
+export default query;

package/src/server/shared/index.ts

@@ -0,0 +1,2 @@
+const choicesTypeInterfaceArray = ['radioGroup', 'select'];
+export { choicesTypeInterfaceArray };