@nocobase/plugin-data-visualization 0.10.1-alpha.1

package/lib/client/block/schemas/configure.js

@@ -0,0 +1,492 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformSchema = exports.querySchema = exports.getConfigSchema = void 0;
+function _shared() {
+  const data = require("@formily/shared");
+  _shared = function _shared() {
+    return data;
+  };
+  return data;
+}
+var _locale = require("../../locale");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const getArraySchema = (fields = {}, extra = {}) => _objectSpread(_objectSpread({
+  type: 'array',
+  'x-decorator': 'FormItem',
+  'x-component': 'ArrayItems'
+}, extra), {}, {
+  items: {
+    type: 'object',
+    properties: {
+      space: {
+        type: 'void',
+        'x-component': 'Space',
+        properties: _objectSpread(_objectSpread({
+          sort: {
+            type: 'void',
+            'x-decorator': 'FormItem',
+            'x-component': 'ArrayItems.SortHandle'
+          }
+        }, fields), {}, {
+          remove: {
+            type: 'void',
+            'x-decorator': 'FormItem',
+            'x-component': 'ArrayItems.Remove'
+          }
+        })
+      }
+    }
+  },
+  properties: {
+    add: {
+      type: 'void',
+      title: '{{t("Add field")}}',
+      'x-component': 'ArrayItems.Addition'
+    }
+  }
+});
+const getConfigSchema = general => ({
+  type: 'void',
+  properties: {
+    config: {
+      type: 'object',
+      properties: {
+        chartType: {
+          type: 'string',
+          title: '{{t("Chart type")}}',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            placeholder: '{{t("Please select a chart type.")}}'
+          },
+          enum: '{{ chartTypes }}'
+        },
+        [(0, _shared().uid)()]: {
+          type: 'void',
+          properties: {
+            general
+          }
+        },
+        [(0, _shared().uid)()]: {
+          type: 'void',
+          properties: {
+            advanced: {
+              type: 'json',
+              title: '{{t("JSON config")}}',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                extra: (0, _locale.lang)('Same properties set in the form above will be overwritten by this JSON config.')
+              },
+              'x-component': 'Input.JSON',
+              'x-component-props': {
+                autoSize: {
+                  minRows: 3
+                }
+              }
+            }
+          }
+        },
+        reference: {
+          type: 'string',
+          'x-reactions': {
+            dependencies: ['.chartType'],
+            fulfill: {
+              schema: {
+                'x-content': '{{ getReference($deps[0]) }}'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+exports.getConfigSchema = getConfigSchema;
+const querySchema = {
+  type: 'void',
+  properties: {
+    settings: {
+      type: 'void',
+      // 'x-component': 'FormItem',
+      properties: {
+        // mode: {
+        //   type: 'string',
+        //   'x-decorator': 'FormItem',
+        //   'x-decorator-props': {
+        //     style: {
+        //       display: 'inline-block',
+        //       width: '45%',
+        //     },
+        //   },
+        //   'x-component': 'Radio.Group',
+        //   'x-component-props': {
+        //     defaultValue: 'builder',
+        //     optionType: 'button',
+        //     buttonStyle: 'solid',
+        //   },
+        //   enum: [
+        //     {
+        //       label: lang('Builder mode'),
+        //       value: 'builder',
+        //     },
+        //     {
+        //       label: lang('SQL mode'),
+        //       value: 'sql',
+        //     },
+        //   ],
+        //   'x-reactions': [
+        //     {
+        //       target: 'query.builder',
+        //       fulfill: {
+        //         state: {
+        //           visible: '{{ $self.value !== "sql" }}',
+        //         },
+        //       },
+        //     },
+        //     {
+        //       target: 'query.sql',
+        //       fulfill: {
+        //         state: {
+        //           visible: '{{ $self.value === "sql" }}',
+        //         },
+        //       },
+        //     },
+        //   ],
+        // },
+        collection: {
+          title: '{{t("Collection")}}',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            options: '{{ collectionOptions }}',
+            onChange: '{{ onCollectionChange }}',
+            placeholder: (0, _locale.lang)('Collection')
+          }
+        }
+      }
+    },
+    query: {
+      type: 'object',
+      properties: {
+        builder: {
+          type: 'void',
+          properties: {
+            collapse: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-component': 'FormCollapse',
+              'x-component-props': {
+                formCollapse: '{{formCollapse}}'
+              },
+              properties: {
+                pane1: {
+                  type: 'void',
+                  'x-component': 'FormCollapse.CollapsePanel',
+                  'x-component-props': {
+                    header: (0, _locale.lang)('Measures'),
+                    key: 'measures'
+                  },
+                  properties: {
+                    measures: getArraySchema({
+                      field: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Cascader',
+                        'x-component-props': {
+                          placeholder: '{{t("Field")}}',
+                          fieldNames: {
+                            label: 'title',
+                            value: 'name',
+                            children: 'children'
+                          }
+                        },
+                        enum: '{{ fieldOptions }}',
+                        required: true
+                      },
+                      aggregation: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                          placeholder: '{{t("Aggregation")}}'
+                        },
+                        enum: [{
+                          label: (0, _locale.lang)('Sum'),
+                          value: 'sum'
+                        }, {
+                          label: (0, _locale.lang)('Count'),
+                          value: 'count'
+                        }, {
+                          label: (0, _locale.lang)('Avg'),
+                          value: 'avg'
+                        }, {
+                          label: (0, _locale.lang)('Max'),
+                          value: 'max'
+                        }, {
+                          label: (0, _locale.lang)('Min'),
+                          value: 'min'
+                        }]
+                      },
+                      alias: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {
+                          placeholder: '{{t("Alias")}}'
+                        }
+                      }
+                    }, {
+                      required: true
+                    })
+                  }
+                },
+                pane2: {
+                  type: 'void',
+                  'x-component': 'FormCollapse.CollapsePanel',
+                  'x-component-props': {
+                    header: (0, _locale.lang)('Dimensions'),
+                    key: 'dimensions'
+                  },
+                  properties: {
+                    dimensions: getArraySchema({
+                      field: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Cascader',
+                        'x-component-props': {
+                          placeholder: '{{t("Field")}}',
+                          fieldNames: {
+                            label: 'title',
+                            value: 'name',
+                            children: 'children'
+                          }
+                        },
+                        enum: '{{ fieldOptions }}',
+                        required: true
+                      },
+                      format: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                          placeholder: '{{t("Format")}}',
+                          style: {
+                            maxWidth: '120px'
+                          }
+                        },
+                        'x-reactions': '{{ useFormatterOptions }}',
+                        'x-visible': '{{ $self.dataSource && $self.dataSource.length }}'
+                      },
+                      alias: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {
+                          placeholder: '{{t("Alias")}}'
+                        }
+                      }
+                    })
+                  }
+                },
+                pane3: {
+                  type: 'void',
+                  'x-component': 'FormCollapse.CollapsePanel',
+                  'x-component-props': {
+                    header: (0, _locale.lang)('Filter'),
+                    key: 'filter'
+                  },
+                  properties: {
+                    filter: {
+                      type: 'object',
+                      'x-decorator': 'FormItem',
+                      'x-decorator-props': {
+                        style: {
+                          overflow: 'scroll'
+                        }
+                      },
+                      'x-component': 'Filter',
+                      'x-component-props': {
+                        options: '{{ filterOptions }}'
+                        // dynamicComponent: 'Input',
+                      }
+                    }
+                  }
+                },
+
+                pane4: {
+                  type: 'void',
+                  'x-component': 'FormCollapse.CollapsePanel',
+                  'x-component-props': {
+                    header: (0, _locale.lang)('Sort'),
+                    key: 'sort'
+                  },
+                  properties: {
+                    orders: getArraySchema({
+                      field: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Cascader',
+                        'x-component-props': {
+                          placeholder: '{{t("Field")}}'
+                        },
+                        'x-reactions': '{{ useOrderOptions }}',
+                        required: true
+                      },
+                      order: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Radio.Group',
+                        'x-component-props': {
+                          defaultValue: 'ASC',
+                          optionType: 'button'
+                        },
+                        enum: ['ASC', 'DESC']
+                      }
+                    }, {
+                      'x-reactions': '{{ useOrderReaction }}'
+                    })
+                  }
+                }
+              }
+            },
+            limit: {
+              title: '{{t("Limit")}}',
+              type: 'number',
+              'x-decorator': 'FormItem',
+              'x-component': 'InputNumber',
+              'x-component-props': {
+                defaultValue: 2000,
+                max: 2000,
+                min: 1,
+                style: {
+                  width: '100px'
+                }
+              }
+            }
+          }
+        },
+        // sql: {
+        //   type: 'object',
+        //   properties: {
+        //     select: {
+        //       type: 'void',
+        //       'x-decorator': 'p',
+        //       'x-component': 'Text',
+        //       'x-component-props': {
+        //         code: true,
+        //       },
+        //       'x-content': 'SELECT',
+        //     },
+        //     fields: {
+        //       type: 'string',
+        //       'x-decorator': 'FormItem',
+        //       'x-component': 'Input.TextArea',
+        //       'x-component-props': {
+        //         autoSize: {
+        //           minRows: 2,
+        //         },
+        //         placeholder: 'Fields',
+        //       },
+        //       required: true,
+        //     },
+        //     from: {
+        //       type: 'void',
+        //       'x-decorator': 'p',
+        //       'x-component': 'FromSql',
+        //     },
+        //     clauses: {
+        //       type: 'string',
+        //       'x-decorator': 'FormItem',
+        //       'x-component': 'Input.TextArea',
+        //       'x-component-props': {
+        //         autoSize: {
+        //           minRows: 5,
+        //         },
+        //         placeholder: 'Join, Where, Group By, Having, Order By, Limit',
+        //       },
+        //       required: true,
+        //     },
+        //   },
+        // },
+        cache: {
+          type: 'object',
+          properties: {
+            enabled: {
+              type: 'boolean',
+              title: '{{t("Enable cache")}}',
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch'
+            },
+            ttl: {
+              type: 'number',
+              title: '{{t("TTL (second)")}}',
+              'x-decorator': 'FormItem',
+              'x-component': 'InputNumber',
+              'x-component-props': {
+                defaultValue: 60,
+                min: 1,
+                style: {
+                  width: '100px'
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+exports.querySchema = querySchema;
+const transformSchema = {
+  type: 'void',
+  properties: {
+    transform: getArraySchema({
+      field: {
+        type: 'string',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-component-props': {
+          placeholder: '{{t("Field")}}',
+          style: {
+            maxWidth: '100px'
+          }
+        },
+        'x-reactions': '{{ useChartFields }}'
+      },
+      type: {
+        type: 'string',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-component-props': {
+          placeholder: '{{t("Type")}}'
+        },
+        'x-reactions': '{{ useFieldTypeOptions }}'
+      },
+      format: {
+        type: 'string',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-component-props': {
+          placeholder: '{{t("Format")}}'
+        },
+        'x-reactions': '{{ useTransformers }}',
+        'x-visible': '{{ $self.dataSource && $self.dataSource.length }}'
+      }
+    }, {
+      'x-decorator-props': {
+        style: {
+          width: '50%'
+        }
+      }
+    })
+  }
+};
+exports.transformSchema = transformSchema;

package/lib/client/block/transformers.d.ts

@@ -0,0 +1,6 @@
+declare const transformers: {
+    [key: string]: {
+        [key: string]: (val: any, locale?: string) => string | number;
+    };
+};
+export default transformers;

package/lib/client/block/transformers.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _dayjs() {
+  const data = _interopRequireDefault(require("dayjs"));
+  _dayjs = function _dayjs() {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const transformers = {
+  datetime: {
+    YYYY: val => (0, _dayjs().default)(val).format('YYYY'),
+    MM: val => (0, _dayjs().default)(val).format('MM'),
+    DD: val => (0, _dayjs().default)(val).format('DD'),
+    'YYYY-MM': val => (0, _dayjs().default)(val).format('YYYY-MM'),
+    'YYYY-MM-DD': val => (0, _dayjs().default)(val).format('YYYY-MM-DD'),
+    'YYYY-MM-DD hh:mm': val => (0, _dayjs().default)(val).format('YYYY-MM-DD hh:mm'),
+    'YYYY-MM-DD hh:mm:ss': val => (0, _dayjs().default)(val).format('YYYY-MM-DD hh:mm:ss')
+  },
+  date: {
+    YYYY: val => (0, _dayjs().default)(val).format('YYYY'),
+    MM: val => (0, _dayjs().default)(val).format('MM'),
+    DD: val => (0, _dayjs().default)(val).format('DD'),
+    'YYYY-MM': val => (0, _dayjs().default)(val).format('YYYY-MM'),
+    'YYYY-MM-DD': val => (0, _dayjs().default)(val).format('YYYY-MM-DD')
+  },
+  time: {
+    'hh:mm:ss': val => (0, _dayjs().default)(val).format('hh:mm:ss'),
+    'hh:mm': val => (0, _dayjs().default)(val).format('hh:mm'),
+    hh: val => (0, _dayjs().default)(val).format('hh')
+  },
+  number: {
+    Percent: val => new Intl.NumberFormat('en-US', {
+      style: 'percent',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(val),
+    Currency: (val, locale = 'en-US') => {
+      const currency = {
+        'zh-CN': 'CNY',
+        'en-US': 'USD',
+        'ja-JP': 'JPY',
+        'ko-KR': 'KRW',
+        'pt-BR': 'BRL',
+        'ru-RU': 'RUB',
+        'tr-TR': 'TRY',
+        'es-ES': 'EUR'
+      }[locale];
+      return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency
+      }).format(val);
+    },
+    Exponential: val => {
+      var _val;
+      return (_val = +val) === null || _val === void 0 ? void 0 : _val.toExponential();
+    },
+    Abbreviation: (val, locale = 'en-US') => new Intl.NumberFormat(locale, {
+      notation: 'compact'
+    }).format(val)
+  }
+};
+var _default = transformers;
+exports.default = _default;