@zgfe/business-lib 1.0.0-beta.1 → 1.0.0-beta.2

package/es/chart/chartConfig.js

@@ -1,11 +1,23 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import util from '../utils/util';
 import { chartColors } from './color';
+import { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault } from './util/format';
 import './index.less';
 export var baseConfig = {
   color: chartColors,
@@ -18,9 +30,7 @@ export var baseConfig = {
 };
 export var seriesConfig = {
   symbol: 'circle',
-  // symbolSize: 6,
-  type: 'line' // emphasis: {},
-
+  symbolSize: 5
 };
 export var legendConfig = {
   type: 'scroll',
@@ -62,27 +72,10 @@ export var xAxisConfig = {
   nameTextStyle: {
     lineHeight: 30
   },
-  boundaryGap: false,
+  // boundaryGap: false,
   axisLabel: {
     formatter: function formatter(value) {
-      if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
-        // 处理日期
-        return value.replace(/\d{4}-/, '');
-      } else if (/^\d{4}-\d{2}-\d{2}\|\d{4}-\d{2}-\d{2}$/.test(value)) {
-        // 周、月日期
-        var dates = value.match(/\d{4}-\d{2}-\d{2}/g);
-        return dates ? dates[0].replace(/\d{4}-/, '') + '~' + dates[1].replace(/\d{4}-/, '') : value;
-      } else {
-        value = util.strMiddleSplit(value);
-
-        if (/:/.test(value)) {
-          return value.replace(/\d{4}-\d{2}-\d{2}\s/, '');
-        } else if (/,/.test(value)) {
-          return value.replace(/,/g, '-');
-        } else {
-          return value;
-        }
-      }
+      return value;
     }
   }
 };
@@ -95,11 +88,7 @@ export var yAxisConfig = {
   },
   axisLabel: {
     formatter: function formatter(value) {
-      if (parseFloat(String(value)) >= 1000) {
-        return util.toThousands(parseFloat((value / 1000).toFixed(1))) + 'k';
-      } else {
-        return String(value);
-      }
+      return String(value);
     }
   }
 };
@@ -118,34 +107,6 @@ export var tooltipConfig = {
     shadowStyle: {
       color: '#f6f6f6'
     }
-  },
-  formatter: function formatter(echartParams) {
-    var xDate = echartParams[0].name;
-    var xLabel = xDate;
-
-    if (/^\d{4}-\d{2}-\d{2}$/.test(xLabel)) {
-      // 处理日期
-      xLabel = xLabel.replace(/\d{4}-/, '');
-    }
-
-    var htmlArray = [];
-
-    if (echartParams.length > 1) {
-      htmlArray.push("<span class=\"biz-chart-tooltip-title\">".concat(xLabel, "</span>"));
-    }
-
-    echartParams.forEach(function (item) {
-      var lineLabel = item.value;
-
-      if (item.seriesName.indexOf('CTR') > -1) {
-        lineLabel += '%';
-      } else {
-        lineLabel = util.toThousands(lineLabel);
-      }
-
-      htmlArray.push("<div class=\"biz-chart-tooltip-item\"><span class=\"biz-chart-tooltip-content\">".concat(item.marker).concat(echartParams.length > 1 ? item.seriesName : item.name, ":</span> <span class=\"biz-chart-tooltip-value\">").concat(lineLabel, "</span></div>"));
-    });
-    return htmlArray.join('');
   }
 };
 /**
@@ -154,6 +115,15 @@ export var tooltipConfig = {
  * @param seriesData 系列数据 [{name:'系列名称',data:[数据]}]
  * @param chartType 图表类型
  * @param seriesType 系列类型（单选列柱图是单个颜色还是一个柱一个颜色）
+ * @param legendPosition 图例位置
+ * @param legendOrient   图例方向
+ * @param unit    y轴单位
+ * @param tooltipFormatter   tooltip 自定义显示
+ * @param xAxisFormatter   x轴 自定义显示
+ * @param yAxisFormatter   y轴 自定义显示
+ * @param reverseXAxis  柱图单系列
+ * @param seriesName  系列名称
+ *
  */
 
 export var getChartOption = function getChartOption(chartType, xData) {
@@ -161,96 +131,178 @@ export var getChartOption = function getChartOption(chartType, xData) {
   var sameColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   var legendPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'top';
   var legendOrient = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'horizontal';
+  var unit = arguments.length > 6 ? arguments[6] : undefined;
+  var tooltipFormatter = arguments.length > 7 ? arguments[7] : undefined;
+  var xAxisFormatter = arguments.length > 8 ? arguments[8] : undefined;
+  var yAxisFormatter = arguments.length > 9 ? arguments[9] : undefined;
+  var reverseXAxis = arguments.length > 10 ? arguments[10] : undefined;
+  var seriesName = arguments.length > 11 ? arguments[11] : undefined;
 
   var xAxis = JSON.parse(JSON.stringify(xAxisConfig)),
-      yAxis = _objectSpread({}, yAxisConfig),
       tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
+      yAxis = _objectSpread({}, yAxisConfig),
       legend = _objectSpread({}, legendConfig),
       grid = _objectSpread({}, gridConfig),
-      base = _objectSpread({}, baseConfig);
+      seriesItem = _objectSpread({}, seriesConfig); // x轴配置
 
-  legend.top = legendPosition;
-  legend.orient = legendOrient;
 
-  if (legendOrient === 'vertical') {
-    legend.left = 'left';
-    legend.height = 'auto';
-    legend.width = 50;
-    grid.left = 80;
+  if (xData) {
+    xAxis.data = xData;
+  }
+
+  xAxis.boundaryGap = chartType === 'bar';
+  xAxis.axisLabel = xAxis.axisLabel || {
+    rotate: 0
+  };
+  xAxis.axisLabel.rotate = chartType === 'bar' ? 45 : 0;
+
+  if (xAxisFormatter) {
+    xAxis.axisLabel.formatter = xAxisFormatter;
+  } else {
+    xAxis.axisLabel.formatter = xAxisFormatterDefault;
+  } //Y轴配置
+
+
+  yAxis.axisLabel = yAxis.axisLabel || {};
+
+  if (yAxisFormatter) {
+    yAxis.axisLabel.formatter = yAxisFormatter;
+  } else {
+    yAxis.axisLabel.formatter = yAxisFormatterDefault;
   }
 
-  if (chartType === 'line' || chartType === 'bar') {
-    // x轴配置
-    if (xData) {
-      xAxis.data = xData;
+  if (unit) {
+    yAxis.name = unit;
+  } // series配置
+
+
+  var itemStyle = {
+    color: sameColor ? 'auto' : function (param) {
+      return chartColors[param.dataIndex % 20];
     }
+  };
+  var series = [];
 
-    xAxis.axisLabel = xAxis.axisLabel || {
-      rotate: 0
-    };
-    xAxis.axisLabel.rotate = chartType === 'bar' ? 45 : 0; // series配置
+  if (chartType === 'bar') {
+    seriesItem.barMaxWidth = 40;
+  }
 
-    var itemStyle = {
-      color: sameColor ? 'auto' : function (param) {
-        return chartColors[param.dataIndex % 20];
+  if (!reverseXAxis) {
+    series = seriesData.map(function (item) {
+      var data = _objectSpread({}, item);
+
+      if (item.names) {
+        data = {
+          name: item.names.join('-'),
+          data: item.values
+        };
       }
-    }; // if(chartType==='line'){
-    //   seriesConfig.symbol = './style/circle.svg'
-    //   seriesConfig.symbolSize = 10
-    // }
 
-    var series = seriesData.map(function (item) {
-      return _objectSpread(_objectSpread(_objectSpread({}, item), seriesConfig), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, data), seriesItem), {}, {
         itemStyle: itemStyle,
         type: chartType
       });
     });
-    console.log(tooltip.axisPointer); // tooltip config
+  } else {
+    series = [_objectSpread(_objectSpread({
+      name: seriesName || '',
+      data: _toConsumableArray(seriesData)
+    }, seriesItem), {}, {
+      itemStyle: itemStyle,
+      type: chartType
+    })];
+  } // tooltip config
+
+
+  tooltip.axisPointer = tooltip.axisPointer || {};
+  tooltip.axisPointer.type = chartType === 'bar' ? 'shadow' : 'line';
+
+  if (tooltipFormatter) {
+    tooltip.formatter = tooltipFormatter;
+  } else {
+    tooltip.formatter = tooltipFormatterDefault;
+  } // grid config
 
-    tooltip.axisPointer = tooltip.axisPointer || {};
-    tooltip.axisPointer.type = chartType === 'bar' ? 'shadow' : 'line';
-    console.log(tooltip.axisPointer.type); // grid config
 
-    if (legendPosition === 'top') {
-      grid.top = seriesData.length > 1 ? 45 : 10;
-    } else if (legendPosition === 'bottom') {
-      grid.bottom = seriesData.length > 1 ? 45 : 0;
+  if (legendPosition === 'top') {
+    grid.top = series.length > 1 || reverseXAxis && seriesName ? 45 : 10;
+  } else if (legendPosition === 'bottom') {
+    grid.bottom = series.length > 1 ? 45 : 0;
+  } // 图例配置
+
+
+  legend.top = legendPosition;
+  legend.orient = legendOrient;
+
+  if (legendOrient === 'vertical') {
+    legend.left = 'left';
+    legend.height = 'auto';
+    legend.width = 50;
+    grid.left = 80;
+  }
+
+  return _objectSpread(_objectSpread({}, baseConfig), {}, {
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    tooltip: tooltip,
+    grid: grid,
+    series: series
+  });
+};
+/**
+ * 饼图配置
+ * @param seriesData 数据  [{name:'',value:''}]
+ * @param legendPosition 图例位置
+ * @param legendOrient   图例方向
+ * @param tooltipFormatter   tooltip 自定义显示
+ * @returns
+ */
+
+export var getPieConfig = function getPieConfig() {
+  var seriesData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
+  var legendOrient = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'horizontal';
+  var tooltipFormatter = arguments.length > 3 ? arguments[3] : undefined;
+  var series = [{
+    type: 'pie',
+    data: seriesData,
+    label: {
+      show: false
     }
+  }];
 
-    return _objectSpread(_objectSpread({}, baseConfig), {}, {
-      legend: legend,
-      xAxis: xAxis,
-      yAxis: yAxis,
-      tooltip: tooltip,
-      grid: grid,
-      series: series
-    });
-  } else if (chartType === 'pie') {
-    var _series = seriesData.map(function (item) {
-      return _objectSpread(_objectSpread(_objectSpread({}, item), seriesConfig), {}, {
-        type: chartType,
-        label: {
-          show: false
-        }
-      });
-    });
+  var tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
+      legend = _objectSpread({}, legendConfig),
+      grid = _objectSpread({}, gridConfig);
+
+  legend.top = legendPosition;
+  legend.orient = legendOrient;
+
+  if (legendOrient === 'vertical') {
+    legend.left = 'left';
+    legend.height = 'auto';
+    legend.width = 50;
+    grid.left = 80;
+  }
 
-    tooltip.trigger = 'item';
+  tooltip.trigger = 'item';
 
+  if (tooltipFormatter) {
+    tooltip.formatter = tooltipFormatter;
+  } else {
     tooltip.formatter = function (params) {
       var name = params.name,
           value = params.value,
           marker = params.marker;
       return "<div class=\"biz-chart-tooltip-item\"><span class=\"biz-chart-tooltip-content\">".concat(marker).concat(name, ":</span> <span class=\"biz-chart-tooltip-value\">").concat(value, "</span></div>");
     };
-
-    return _objectSpread(_objectSpread({}, baseConfig), {}, {
-      legend: legend,
-      tooltip: tooltip,
-      grid: grid,
-      series: _series
-    });
-  } else {
-    return {};
   }
+
+  return _objectSpread(_objectSpread({}, baseConfig), {}, {
+    legend: legend,
+    tooltip: tooltip,
+    grid: grid,
+    series: series
+  });
 };

package/es/chart/demo/bar.js

@@ -1,19 +1,15 @@
 import React from 'react';
-import { BizChart } from 'business-lib';
-import chartData from './data';
-var barData = {
-  xData: ['付款成功', '注册', '搜索商品', '查看商品详情', '申请退货'],
-  seriesData: [{
-    data: [157, 161, 1441, 1414, 710]
-  }]
-};
+import { BizChart } from '@zgfe/business-lib';
+import chartData from './data/data';
 export default (function () {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizChart, {
     data: chartData,
-    type: "bar"
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(BizChart, {
-    data: barData,
     type: "bar",
-    sameColor: false
+    reverseXAxis: true,
+    seriesName: "fff",
+    showList: ['付款成功', '搜索商品', '查看商品详情']
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(BizChart, {
+    data: chartData,
+    type: "bar"
   }));
 });

package/es/chart/demo/data/data.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    x_axis: string[];
+    series: {
+        names: string[];
+        values: number[];
+    }[];
+};
+export default _default;

package/es/chart/demo/data/data.js

@@ -0,0 +1,28 @@
+export default {
+  x_axis: ['2022-03-31', '2022-04-01', '2022-04-02', '2022-04-03', '2022-04-04', '2022-04-05', '2022-04-06', '2022-04-07', '2022-04-08', '2022-04-09', '2022-04-10', '2022-04-11', '2022-04-12', '2022-04-13'],
+  series: [{
+    names: ['付款成功'],
+    values: [26, 27, 43, 44, 40, 34, 33, 33, 34, 24, 30, 31, 31, 38]
+  }, {
+    names: ['注册-发送手机验证码'],
+    values: [11, 10, 7, 5, 13, 18, 14, 17, 11, 6, 10, 12, 15, 10]
+  }, {
+    names: ['搜索商品'],
+    values: [75, 68, 86, 80, 87, 71, 72, 81, 77, 74, 78, 76, 76, 79]
+  }, {
+    names: ['pv'],
+    values: [104, 89, 109, 103, 112, 93, 87, 101, 101, 97, 102, 110, 106, 98]
+  }, {
+    names: ['查看商品详情'],
+    values: [122, 107, 132, 113, 133, 115, 106, 127, 132, 117, 119, 123, 119, 117]
+  }, {
+    names: ['scroll'],
+    values: [98, 96, 106, 109, 113, 105, 91, 111, 99, 99, 104, 108, 116, 92]
+  }, {
+    names: ['click'],
+    values: [108, 102, 111, 90, 111, 105, 91, 129, 117, 101, 109, 109, 105, 96]
+  }, {
+    names: ['申请退货'],
+    values: [5, 11, 14, 9, 8, 14, 9, 10, 12, 12, 14, 16, 12, 10]
+  }]
+};

package/es/chart/demo/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { BizChart } from 'business-lib';
-import chartData from './data';
+import { BizChart } from '@zgfe/business-lib';
+import chartData from './data/data';
 export default (function () {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizChart, {
+  return /*#__PURE__*/React.createElement(BizChart, {
     data: chartData,
-    type: "line"
-  }));
+    type: "line",
+    legendPosition: "bottom"
+  });
 });

package/es/chart/demo/pie.js

@@ -1,30 +1,13 @@
 import React from 'react';
-import { BizChart } from 'business-lib';
-var pieData = {
-  seriesData: [{
-    data: [{
-      name: '付款成功',
-      value: 222
-    }, {
-      name: '注册',
-      value: 161
-    }, {
-      name: '搜索商品',
-      value: 1441
-    }, {
-      name: '查看商品详情',
-      value: 1414
-    }, {
-      name: '付款成申请退货功',
-      value: 710
-    }]
-  }]
-};
+import { BizChart } from '@zgfe/business-lib';
+import pieData from './data/data';
 export default (function () {
   return /*#__PURE__*/React.createElement(BizChart, {
     data: pieData,
     type: "pie",
+    showAll: false,
     legendPosition: "bottom",
-    legendOrient: "vertical"
+    legendOrient: "vertical",
+    showList: ['付款成功', '搜索商品', '查看商品详情', 'click']
   });
 });

package/es/chart/index.d.ts

@@ -1,18 +1,13 @@
 import React from 'react';
 interface ChartItmProps {
-    name?: string;
-    data?: Array<string | number | object>;
+    names: Array<string>;
+    values: Array<number>;
 }
 interface DataProps {
-    xData?: Array<string>;
-    seriesData: Array<ChartItmProps>;
+    x_axis?: Array<string>;
+    series: Array<ChartItmProps>;
 }
 interface BizChartProps {
-    /**
-     * @description     自定义图表配置
-     * @default         -
-     */
-    option?: any;
     /**
      * @description     图形类型
      * @default         line
@@ -22,7 +17,7 @@ interface BizChartProps {
      * @description     数据（x轴和series数据）
      * @default         -
      */
-    data?: DataProps;
+    data: DataProps;
     /**
      * @description     柱图是同色还是一柱一色（仅对柱图单一系列作用）
      * @default         true
@@ -52,12 +47,33 @@ interface BizChartProps {
      * @description     图例位置
      * @default         -
      */
-    legendPosition: 'top' | 'bottom' | 'middle';
+    legendPosition?: 'top' | 'bottom' | 'middle';
     /**
      * @description     图例布局朝向
      * @default         -
      */
-    legendOrient: 'horizontal' | 'vertical';
+    legendOrient?: 'horizontal' | 'vertical';
+    /**
+     * @description 显示数据项（从store中过滤），对应series中的names字段。如果没传的话，默认会展示前10条记录
+     * @abstract  [['group', 'item1'], ['group', 'item2']]或['item1', 'item2']
+     * @default     -
+     */
+    showList?: Array<any>;
+    /**
+     * @description 默认展示showList指定的条目或者前10条记录，并生成"其它"记录。showAll置为true后，将强制在饼图上展示所有记录
+     * @default     true
+     */
+    showAll?: boolean;
+    /**
+     * @description 是否将series中每项数据的names转为新的x轴
+     * @tip 目前只有柱状图时有效
+     * @default   false
+     */
+    reverseXAxis?: boolean;
+    /**
+     * @description reverseXAxis为true时，该项是图例名称
+     */
+    seriesName?: string;
 }
 declare const BizChart: React.FC<BizChartProps>;
 export default BizChart;