@nocobase/plugin-charts 0.9.1-alpha.2

package/lib/client/templates/LineTemplate.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lineTemplate = void 0;
+
+function _json() {
+  const data = _interopRequireDefault(require("json5"));
+
+  _json = function _json() {
+    return data;
+  };
+
+  return data;
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const chartConfig = {
+  yField: '{{metric}}',
+  xField: '{{dimension}}',
+  seriesField: '{{category}}',
+  xAxis: {//type: 'time',
+  },
+  yAxis: {// label: {
+    //   formatter: '{{(v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)}}',
+    // },
+  }
+};
+const lineTemplate = {
+  description: '1 「Time」 or 「Order Noun」 field, 1 「Value」 field',
+  type: 'Line',
+  title: 'Line',
+  iconId: 'icon-line',
+  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: _json().default.stringify(chartConfig, null, 2),
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+              autoSize: {
+                minRows: 8,
+                maxRows: 16
+              }
+            },
+            description: '{{jsonConfigDesc("Line | G2Plot","https://g2plot.antv.antgroup.com/api/plots/line")}}',
+            'x-validator': {
+              json5: true
+            }
+          }
+        }
+      }
+    }
+  }
+};
+exports.lineTemplate = lineTemplate;

package/lib/client/templates/PieTemplate.d.ts

@@ -0,0 +1,71 @@
+export declare const pieTemplate: {
+    description: string;
+    title: string;
+    type: string;
+    iconId: string;
+    group: number;
+    renderComponent: string;
+    defaultChartOptions: {
+        appendPadding: number;
+        angleField: string;
+        colorField: string;
+        radius: number;
+        label: {
+            type: string;
+            offset: string;
+            content: string;
+            style: {
+                fontSize: number;
+                textAlign: string;
+            };
+        };
+        interactions: {
+            type: string;
+        }[];
+    };
+    configurableProperties: {
+        type: string;
+        properties: {
+            dimension: {
+                required: boolean;
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            metric: {
+                required: boolean;
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            jsonConfig: {
+                type: string;
+                'x-component': string;
+                properties: {
+                    template: {
+                        required: boolean;
+                        title: string;
+                        type: string;
+                        default: string;
+                        'x-decorator': string;
+                        'x-component': string;
+                        'x-component-props': {
+                            autoSize: {
+                                minRows: number;
+                                maxRows: number;
+                            };
+                        };
+                        description: string;
+                        'x-validator': {
+                            json5: boolean;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/lib/client/templates/PieTemplate.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pieTemplate = void 0;
+
+function _json() {
+  const data = _interopRequireDefault(require("json5"));
+
+  _json = function _json() {
+    return data;
+  };
+
+  return data;
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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'
+  }]
+};
+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: _json().default.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
+            }
+          }
+        }
+      }
+    }
+  }
+};
+exports.pieTemplate = pieTemplate;

package/lib/client/templates/RadarTemplate.d.ts

@@ -0,0 +1,71 @@
+export declare const radarTemplate: {
+    description: string;
+    type: string;
+    title: string;
+    iconId: string;
+    group: number;
+    renderComponent: string;
+    defaultChartOptions: {
+        xField: string;
+        yField: string;
+        appendPadding: number[];
+        xAxis: {
+            tickLine: any;
+        };
+        yAxis: {
+            label: boolean;
+            grid: {
+                alternateColor: string;
+            };
+        };
+        point: {
+            size: number;
+        };
+        area: {};
+    };
+    configurableProperties: {
+        type: string;
+        properties: {
+            dimension: {
+                required: boolean;
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            metric: {
+                required: boolean;
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            jsonConfig: {
+                type: string;
+                'x-component': string;
+                properties: {
+                    template: {
+                        required: boolean;
+                        title: string;
+                        type: string;
+                        default: string;
+                        'x-decorator': string;
+                        'x-component': string;
+                        'x-component-props': {
+                            autoSize: {
+                                minRows: number;
+                                maxRows: number;
+                            };
+                        };
+                        description: string;
+                        'x-validator': {
+                            json5: boolean;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/lib/client/templates/RadarTemplate.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.radarTemplate = void 0;
+
+function _json() {
+  const data = _interopRequireDefault(require("json5"));
+
+  _json = function _json() {
+    return data;
+  };
+
+  return data;
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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: {}
+};
+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: _json().default.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
+            }
+          }
+        }
+      }
+    }
+  }
+};
+exports.radarTemplate = radarTemplate;

package/lib/client/templates/ScatterTemplate.d.ts

@@ -0,0 +1,91 @@
+export declare const scatterTemplate: {
+    description: string;
+    type: string;
+    title: string;
+    iconId: string;
+    group: number;
+    renderComponent: string;
+    defaultChartOptions: {
+        appendPadding: number;
+        xField: string;
+        yField: string;
+        colorField: string;
+        shape: string;
+        size: number;
+        yAxis: {
+            nice: boolean;
+            line: {
+                style: {
+                    stroke: string;
+                };
+            };
+        };
+        xAxis: {
+            min: number;
+            grid: {
+                line: {
+                    style: {
+                        stroke: string;
+                    };
+                };
+            };
+            line: {
+                style: {
+                    stroke: string;
+                };
+            };
+        };
+    };
+    configurableProperties: {
+        type: string;
+        properties: {
+            dimension: {
+                required: boolean;
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            metric: {
+                required: boolean;
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            category: {
+                type: string;
+                title: string;
+                'x-decorator': string;
+                'x-component': string;
+                enum: string;
+            };
+            jsonConfig: {
+                type: string;
+                'x-component': string;
+                properties: {
+                    template: {
+                        required: boolean;
+                        title: string;
+                        type: string;
+                        default: string;
+                        'x-decorator': string;
+                        'x-component': string;
+                        'x-component-props': {
+                            autoSize: {
+                                minRows: number;
+                                maxRows: number;
+                            };
+                        };
+                        description: string;
+                        'x-validator': {
+                            json5: boolean;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/lib/client/templates/ScatterTemplate.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scatterTemplate = void 0;
+
+function _json() {
+  const data = _interopRequireDefault(require("json5"));
+
+  _json = function _json() {
+    return data;
+  };
+
+  return data;
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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'
+      }
+    }
+  }
+};
+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: _json().default.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
+            }
+          }
+        }
+      }
+    }
+  }
+};
+exports.scatterTemplate = scatterTemplate;

package/lib/client/templates/TableTemplate.d.ts

@@ -0,0 +1,28 @@
+export declare const tableTemplate: {
+    title: string;
+    type: string;
+    group: number;
+    renderComponent: string;
+    defaultChartOptions: {
+        appendPadding: number;
+        angleField: string;
+        colorField: string;
+        radius: number;
+        label: {
+            type: string;
+            offset: string;
+            content: string;
+            style: {
+                fontSize: number;
+                textAlign: string;
+            };
+        };
+        interactions: {
+            type: string;
+        }[];
+    };
+    configurableProperties: {
+        type: string;
+        properties: {};
+    };
+};

package/lib/client/templates/TableTemplate.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableTemplate = void 0;
+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'
+  }]
+};
+const tableTemplate = {
+  title: '表格展示',
+  type: 'DataSetPreviewTable',
+  group: 2,
+  renderComponent: 'DataSetPreviewTable',
+  defaultChartOptions: chartConfig,
+  configurableProperties: {
+    type: 'void',
+    properties: {}
+  }
+};
+exports.tableTemplate = tableTemplate;