@zgfe/business-lib 1.0.0-beta.1

package/es/attributeSelector/index.less

@@ -0,0 +1,172 @@
+@import '../commonStyle/select.less';
+@import '../commonStyle/icon.less';
+
+.biz-select-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #ccc;
+  // height: 50px;
+}
+
+.biz-archon {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  .ant-anchor {
+    display: flex;
+  }
+
+  .ant-anchor-ink::before {
+    width: 0;
+  }
+
+  .ant-anchor-link {
+    padding: 0;
+
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+
+  .ant-anchor-link-active > .ant-anchor-link-title {
+    color: @fontColor;
+  }
+
+  &.biz-archon-first {
+    margin-bottom: 12px;
+    border-bottom: 1px solid #ecedf0;
+
+    .ant-anchor-link {
+      position: relative;
+      height: 17px;
+      margin: 4px 8px;
+      line-height: 17px;
+      transition: all 0.3s;
+    }
+
+    .ant-anchor-link-active {
+      a {
+        color: @themeColor;
+      }
+
+      &::after {
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        width: 16px;
+        height: 1px;
+        background-color: @themeColor;
+        transform: translateX(-50%);
+        content: '';
+      }
+    }
+  }
+
+  &.biz-archon-second {
+    box-sizing: border-box;
+    margin: 0 4px 12px 0;
+
+    .ant-anchor-link {
+      box-sizing: border-box;
+      margin: 0px 8px;
+      padding: 4px 5px;
+      color: @fontColor;
+      font-size: 12px;
+      background: #ffffff;
+      border: @boxBorder;
+      border-radius: @boxRadius;
+
+      &.ant-anchor-link-active,
+      &:hover {
+        color: @hoverColor;
+        background-color: @hoverBgColor;
+        border-color: @hoverColor;
+
+        a {
+          color: @hoverColor;
+        }
+      }
+    }
+  }
+
+  a {
+    color: @titleColor;
+
+    &:hover {
+      color: @themeColor;
+    }
+  }
+}
+
+.biz-dropdown-container {
+  position: absolute;
+  top: 42px;
+  left: -4px;
+  z-index: 9999;
+  min-width: 322px;
+  height: @dropdownHeight;
+  padding: @dropdownPadding;
+  overflow: hidden;
+  background: #ffffff;
+  border-radius: @specialRadius;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+
+  .biz-select-list-container {
+    box-sizing: border-box;
+    height: calc(100% - 120px);
+    padding: 4px;
+    overflow-y: auto;
+  }
+
+  .biz-drop-option {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .biz-drop-menu {
+    position: relative;
+    box-sizing: border-box;
+    height: 32px;
+    padding-left: 8px;
+    color: @titleColor;
+
+    &::before {
+      position: absolute;
+      top: 9px;
+      left: 0px;
+      width: 3px;
+      height: 14px;
+      background-color: @themeColor;
+      border-radius: 10px;
+      content: '';
+    }
+
+    span {
+      padding-right: 8px;
+    }
+
+    .biz-menu-split {
+      flex: auto;
+      height: 1px;
+      background: @borderColor;
+    }
+  }
+
+  .biz-drop-index {
+    height: 40px;
+    padding: 11px 8px;
+    border-radius: @specialRadius;
+    cursor: pointer;
+    span {
+    }
+    .biz-icon-index {
+      margin-right: 5px;
+      font-size: @iconSize;
+    }
+  }
+}

package/es/chart/chartConfig.d.ts

@@ -0,0 +1,28 @@
+import { GridComponentOption, TitleComponentOption, TooltipComponentOption } from 'echarts/types/dist/echarts';
+import { BarSeriesOption, LegendComponentOption, LineSeriesOption, PieSeriesOption, ToolboxComponentOption, XAXisOption, YAXisOption } from 'echarts/types/dist/shared';
+import './index.less';
+export declare const baseConfig: EChartsOption;
+export declare const seriesConfig: {
+    symbol: string;
+    type: string;
+};
+export declare type EChartsOption = echarts.ComposeOption<TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | LineSeriesOption | BarSeriesOption | PieSeriesOption>;
+export declare const legendConfig: LegendComponentOption;
+export declare const gridConfig: {
+    left: number;
+    right: string;
+    bottom: number;
+    top: number;
+    containLabel: boolean;
+};
+export declare const xAxisConfig: XAXisOption;
+export declare const yAxisConfig: YAXisOption;
+export declare const tooltipConfig: TooltipComponentOption;
+/**
+ *  折现/柱图
+ * @param xData x轴数据 []
+ * @param seriesData 系列数据 [{name:'系列名称',data:[数据]}]
+ * @param chartType 图表类型
+ * @param seriesType 系列类型（单选列柱图是单个颜色还是一个柱一个颜色）
+ */
+export declare const getChartOption: (chartType: string, xData?: string[] | undefined, seriesData?: object[], sameColor?: boolean, legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical') => EChartsOption;

package/es/chart/chartConfig.js

@@ -0,0 +1,256 @@
+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 './index.less';
+export var baseConfig = {
+  color: chartColors,
+  textStyle: {
+    color: '#5F6085'
+  },
+  toolbox: {
+    show: false
+  }
+};
+export var seriesConfig = {
+  symbol: 'circle',
+  // symbolSize: 6,
+  type: 'line' // emphasis: {},
+
+};
+export var legendConfig = {
+  type: 'scroll',
+  height: 17,
+  padding: 0,
+  itemHeight: 10,
+  itemWidth: 10,
+  lineStyle: {
+    opacity: 0
+  },
+  textStyle: {
+    color: '#5F6085',
+    lineHeight: 17
+  },
+  pageIconSize: 10,
+  pageTextStyle: {
+    color: '#5F6085'
+  }
+};
+export var gridConfig = {
+  left: 0,
+  right: '3%',
+  bottom: 0,
+  top: 24,
+  containLabel: true
+};
+export var xAxisConfig = {
+  axisLine: {
+    lineStyle: {
+      color: '#ECEDF0',
+      width: 1
+    }
+  },
+  axisTick: {
+    lineStyle: {
+      color: '#ECEDF0'
+    }
+  },
+  nameTextStyle: {
+    lineHeight: 30
+  },
+  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;
+        }
+      }
+    }
+  }
+};
+export var yAxisConfig = {
+  type: 'value',
+  splitLine: {
+    lineStyle: {
+      type: 'dashed'
+    }
+  },
+  axisLabel: {
+    formatter: function formatter(value) {
+      if (parseFloat(String(value)) >= 1000) {
+        return util.toThousands(parseFloat((value / 1000).toFixed(1))) + 'k';
+      } else {
+        return String(value);
+      }
+    }
+  }
+};
+export var tooltipConfig = {
+  trigger: 'axis',
+  confine: false,
+  backgroundColor: 'rgba(250, 251, 253, 0.8)',
+  borderColor: 'transparent',
+  padding: 8,
+  extraCssText: '0px 4px 10px rgba(0, 0, 0, 0.1)',
+  className: 'biz-chart-tooltip',
+  appendToBody: true,
+  axisPointer: {
+    type: 'shadow',
+    z: 0,
+    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('');
+  }
+};
+/**
+ *  折现/柱图
+ * @param xData x轴数据 []
+ * @param seriesData 系列数据 [{name:'系列名称',data:[数据]}]
+ * @param chartType 图表类型
+ * @param seriesType 系列类型（单选列柱图是单个颜色还是一个柱一个颜色）
+ */
+
+export var getChartOption = function getChartOption(chartType, xData) {
+  var seriesData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  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 xAxis = JSON.parse(JSON.stringify(xAxisConfig)),
+      yAxis = _objectSpread({}, yAxisConfig),
+      tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
+      legend = _objectSpread({}, legendConfig),
+      grid = _objectSpread({}, gridConfig),
+      base = _objectSpread({}, baseConfig);
+
+  legend.top = legendPosition;
+  legend.orient = legendOrient;
+
+  if (legendOrient === 'vertical') {
+    legend.left = 'left';
+    legend.height = 'auto';
+    legend.width = 50;
+    grid.left = 80;
+  }
+
+  if (chartType === 'line' || chartType === 'bar') {
+    // x轴配置
+    if (xData) {
+      xAxis.data = xData;
+    }
+
+    xAxis.axisLabel = xAxis.axisLabel || {
+      rotate: 0
+    };
+    xAxis.axisLabel.rotate = chartType === 'bar' ? 45 : 0; // series配置
+
+    var itemStyle = {
+      color: sameColor ? 'auto' : function (param) {
+        return chartColors[param.dataIndex % 20];
+      }
+    }; // if(chartType==='line'){
+    //   seriesConfig.symbol = './style/circle.svg'
+    //   seriesConfig.symbolSize = 10
+    // }
+
+    var series = seriesData.map(function (item) {
+      return _objectSpread(_objectSpread(_objectSpread({}, item), seriesConfig), {}, {
+        itemStyle: itemStyle,
+        type: chartType
+      });
+    });
+    console.log(tooltip.axisPointer); // tooltip 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;
+    }
+
+    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
+        }
+      });
+    });
+
+    tooltip.trigger = 'item';
+
+    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 {};
+  }
+};

package/es/chart/color.d.ts

@@ -0,0 +1 @@
+export declare const chartColors: string[];

package/es/chart/color.js

@@ -0,0 +1 @@
+export var chartColors = ['#165DFF', '#CDDBFD', '#80E1D9', '#CDF3F0', '#65789B', '#CED4DE', '#F8BC3B', '#FCE7B9', '#6F66ED', '#D1CEFD', '#66AFED', '#D3E7F9', '#9661BC', '#DFCFEA', '#FF7557', '#FFD1C7', '#4DB273', '#BBDEC8', '#F08BB4', '#FFE0ED'];

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

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/chart/demo/bar.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BizChart } from 'business-lib';
+import chartData from './data';
+var barData = {
+  xData: ['付款成功', '注册', '搜索商品', '查看商品详情', '申请退货'],
+  seriesData: [{
+    data: [157, 161, 1441, 1414, 710]
+  }]
+};
+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
+  }));
+});

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    xData: string[];
+    seriesData: ({
+        name: string;
+        data: number[];
+    } | {
+        name: string[];
+        data: number[];
+    })[];
+};
+export default _default;

package/es/chart/demo/data.js

@@ -0,0 +1,37 @@
+export default {
+  xData: ['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'],
+  seriesData: [{
+    name: '付款成功',
+    data: [26, 27, 43, 44, 40, 34, 33, 33, 34, 24, 30, 31, 31, 38]
+  }, {
+    name: '注册-发送手机验证码',
+    data: [11, 10, 7, 5, 13, 18, 14, 17, 11, 6, 10, 12, 15, 10]
+  }, {
+    name: '搜索商品',
+    data: [75, 68, 86, 80, 87, 71, 72, 81, 77, 74, 78, 76, 76, 79]
+  }, {
+    name: 'pv',
+    data: [104, 89, 109, 103, 112, 93, 87, 101, 101, 97, 102, 110, 106, 98]
+  }, {
+    name: '查看商品详情',
+    data: [122, 107, 132, 113, 133, 115, 106, 127, 132, 117, 119, 123, 119, 117]
+  }, {
+    name: 'scroll',
+    data: [98, 96, 106, 109, 113, 105, 91, 111, 99, 99, 104, 108, 116, 92]
+  }, {
+    name: ['click'],
+    data: [108, 102, 111, 90, 111, 105, 91, 129, 117, 101, 109, 109, 105, 96]
+  }, {
+    name: ['申请退货'],
+    data: [5, 11, 14, 9, 8, 14, 9, 10, 12, 12, 14, 16, 12, 10]
+  }, {
+    name: ['wxshare'],
+    data: [96, 89, 113, 100, 107, 109, 84, 106, 107, 100, 102, 106, 104, 90]
+  }, {
+    name: ['wxsopen'],
+    data: [92, 89, 118, 108, 128, 107, 103, 124, 107, 100, 115, 104, 99, 99]
+  }, {
+    name: ['进入购物车'],
+    data: [42, 44, 50, 47, 40, 49, 32, 50, 42, 40, 42, 39, 41, 32]
+  }]
+};

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

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/chart/demo/index.js

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

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

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/chart/demo/pie.js

@@ -0,0 +1,30 @@
+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
+    }]
+  }]
+};
+export default (function () {
+  return /*#__PURE__*/React.createElement(BizChart, {
+    data: pieData,
+    type: "pie",
+    legendPosition: "bottom",
+    legendOrient: "vertical"
+  });
+});

package/es/chart/index.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+interface ChartItmProps {
+    name?: string;
+    data?: Array<string | number | object>;
+}
+interface DataProps {
+    xData?: Array<string>;
+    seriesData: Array<ChartItmProps>;
+}
+interface BizChartProps {
+    /**
+     * @description     自定义图表配置
+     * @default         -
+     */
+    option?: any;
+    /**
+     * @description     图形类型
+     * @default         line
+     */
+    type?: 'bar' | 'pie' | 'line';
+    /**
+     * @description     数据（x轴和series数据）
+     * @default         -
+     */
+    data?: DataProps;
+    /**
+     * @description     柱图是同色还是一柱一色（仅对柱图单一系列作用）
+     * @default         true
+     */
+    sameColor?: boolean;
+    /**
+     * @description     提示格式
+     * @default         -
+     */
+    tooltipFormatter?: (param: any) => string;
+    /**
+     * @description     x轴标签格式
+     * @default         -
+     */
+    xAxisFormatter?: (param: any) => string;
+    /**
+     * @description     y轴标签格式
+     * @default         -
+     */
+    yAxisFormatter?: (param: any) => string;
+    /**
+     * @description     value 单位
+     * @default         -
+     */
+    valueUnit?: string;
+    /**
+     * @description     图例位置
+     * @default         -
+     */
+    legendPosition: 'top' | 'bottom' | 'middle';
+    /**
+     * @description     图例布局朝向
+     * @default         -
+     */
+    legendOrient: 'horizontal' | 'vertical';
+}
+declare const BizChart: React.FC<BizChartProps>;
+export default BizChart;