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

package/es/chart/index.js

@@ -16,18 +16,25 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts';
-import { getChartOption } from './chartConfig';
+import { getChartOption, getPieConfig } from './chartConfig';
+import util from '../utils/util';
+import { chartColors } from './color';
 
 var BizChart = function BizChart(props) {
   var _props$type = props.type,
       type = _props$type === void 0 ? 'line' : _props$type,
-      option = props.option,
       data = props.data,
+      showList = props.showList,
+      _props$showAll = props.showAll,
+      showAll = _props$showAll === void 0 ? true : _props$showAll,
       _props$sameColor = props.sameColor,
       sameColor = _props$sameColor === void 0 ? true : _props$sameColor,
+      _props$reverseXAxis = props.reverseXAxis,
+      reverseXAxis = _props$reverseXAxis === void 0 ? false : _props$reverseXAxis,
+      seriesName = props.seriesName,
       tooltipFormatter = props.tooltipFormatter,
       xAxisFormatter = props.xAxisFormatter,
       yAxisFormatter = props.yAxisFormatter,
@@ -40,30 +47,100 @@ var BizChart = function BizChart(props) {
       chartOption = _useState2[0],
       setChartOption = _useState2[1];
 
-  useEffect(function () {
-    var eOption = getChartOption(type, data === null || data === void 0 ? void 0 : data.xData, data === null || data === void 0 ? void 0 : data.seriesData, sameColor, legendPosition, legendOrient);
-
-    if (tooltipFormatter) {
-      eOption.tooltip.formatter = tooltipFormatter;
+  var showMap = useMemo(function () {
+    var data = {};
+
+    if (showList) {
+      showList.forEach(function (item) {
+        if (util.isArray(item)) {
+          data[item.join('-')] = true;
+        } else if (util.isString(item)) {
+          data[item] = true;
+        }
+      });
     }
 
-    if (xAxisFormatter) {
-      eOption.xAxis.axisLabel.formatter = xAxisFormatter;
+    return data;
+  }, [showList]);
+
+  var formatPieData = function formatPieData(data) {
+    var list = [];
+    var other = {
+      name: '其它',
+      value: 0
+    };
+    data.series.forEach(function (item) {
+      var series = {
+        name: item.names.join('-'),
+        value: item.values[0]
+      };
+
+      if (showAll) {
+        list.push(series);
+      } else {
+        if (showList && showMap[series.name] || !showList && list.length < 10) {
+          // 数据被showList命中，或者没定义showList，但位于前十的记录
+          list.push(series);
+        } else {
+          other.value += item.values[0];
+        }
+      }
+    });
+    if (!showAll && other.value > 0) list.push(other);
+    return list;
+  };
+
+  var formatChartData = function formatChartData(data) {
+    if (reverseXAxis) {
+      var series = {
+        names: [seriesName || ''],
+        values: []
+      };
+      var x_axis = [];
+      var sData = [];
+      data.series.forEach(function (seriesItem, index) {
+        x_axis.push(seriesItem.names.join('-'));
+
+        if (reverseXAxis && showList && !showMap[data.series[index].names.join('-')]) {
+          return;
+        }
+
+        sData.push({
+          name: x_axis[index],
+          value: seriesItem.values[0],
+          itemStyle: {
+            normal: {
+              color: chartColors[sData.length]
+            }
+          }
+        });
+      });
+      return {
+        x_axis: x_axis,
+        series: sData
+      };
+    } else {
+      return data;
     }
+  };
 
-    if (yAxisFormatter) {
-      eOption.yAxis.axisLabel.formatter = yAxisFormatter;
-    }
+  useEffect(function () {
+    var eOption = {};
+
+    if (type === 'pie') {
+      var rData = formatPieData(data);
+      eOption = getPieConfig(rData, legendPosition, legendOrient, tooltipFormatter);
+    } else {
+      var _rData = formatChartData(data);
 
-    if (valueUnit) {
-      eOption.yAxis.name = valueUnit;
+      eOption = getChartOption(type, reverseXAxis && showList ? showList : _rData.x_axis, _rData.series, sameColor, legendPosition, legendOrient, valueUnit, tooltipFormatter, xAxisFormatter, yAxisFormatter, reverseXAxis, seriesName);
     }
 
-    console.log('option>>>', eOption);
+    console.log(type, ' >>> ', eOption);
     setChartOption(function () {
       return _objectSpread({}, eOption);
     });
-  }, [data, type]);
+  }, [data, type, reverseXAxis]);
   return /*#__PURE__*/React.createElement(ReactEChartsCore, {
     echarts: echarts,
     option: chartOption,

package/es/chart/util/format.d.ts

@@ -0,0 +1,4 @@
+declare const tooltipFormatterDefault: (params: any) => string;
+declare const yAxisFormatterDefault: (value: number) => string;
+declare const xAxisFormatterDefault: (value: string) => string;
+export { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault };

package/es/chart/util/format.js

@@ -0,0 +1,61 @@
+import util from '../../utils/util';
+
+var tooltipFormatterDefault = function tooltipFormatterDefault(params) {
+  var xDate = params[0].name;
+  var xLabel = xDate;
+
+  if (/^\d{4}-\d{2}-\d{2}$/.test(xLabel)) {
+    // 处理日期
+    xLabel = xLabel.replace(/\d{4}-/, '');
+  }
+
+  var htmlArray = [];
+
+  if (params.length > 1) {
+    htmlArray.push("<span class=\"biz-chart-tooltip-title\">".concat(xLabel, "</span>"));
+  }
+
+  params.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(params.length > 1 ? item.seriesName : item.name, ":</span> <span class=\"biz-chart-tooltip-value\">").concat(lineLabel, "</span></div>"));
+  });
+  return htmlArray.join('');
+};
+
+var yAxisFormatterDefault = function yAxisFormatterDefault(value) {
+  if (parseFloat(String(value)) >= 1000) {
+    return util.toThousands(parseFloat((value / 1000).toFixed(1))) + 'k';
+  } else {
+    return String(value);
+  }
+};
+
+var xAxisFormatterDefault = function xAxisFormatterDefault(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 { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault };

package/es/commonStyle/icon.less

@@ -1,9 +1,9 @@
-@import './index.less';
+@import './variable.less';
 
 .biz-icon-add {
   width: fit-content;
   padding: 2px;
-  color: @titleColor;
+  color: @fontColor3;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -71,12 +71,16 @@
   line-height: 20px;
   border-radius: 4px;
   cursor: pointer;
+  .anticon {
+    margin-right: 8px;
+    font-size: 24px;
+  }
 }
 
 .biz-btn-primary,
 .ant-btn-primary {
   color: #fff;
-  background: #165dff;
+  background: @themeColor;
   border: none;
 
   &:hover,
@@ -88,8 +92,8 @@
   }
 
   &:disabled {
-    color: #cacdd4;
-    background: #f6f6f6;
+    color: @disableColor;
+    background: @grayColor;
   }
 }
 
@@ -145,3 +149,26 @@
     border-color: #165dff;
   }
 }
+
+.ant-tooltip {
+  .ant-tooltip-inner {
+    border-radius: @boxRadius2;
+  }
+
+  &.biz-tooltip {
+    width: auto;
+
+    .ant-tooltip-inner {
+      padding: 4px;
+      color: @fontColor;
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .ant-tooltip-arrow-content {
+      background-color: #fff;
+      --antd-arrow-background-color: #fff;
+    }
+  }
+}

package/es/commonStyle/index.less

@@ -1,171 +1,3 @@
-/** 全局变量 **/
-@themeColor: #165dff;
-/* 字体颜色 */
-@fontColor: #021429;
-/* 中性色/次要-信息2 */
-@fontColor2: #242541;
-/* 中性色/次要-信息3 */
-@fontColor3: #5f6085;
-/* 图标颜色 */
-@iconColor: #5f6085;
-/* layout icon颜色 */
-@layoutIconColor: #242541;
-/* 标题颜色 */
-@titleColor: #5f6085;
-/* 灰色*/
-@grayColor: #f6f6f6;
-@disableColor: #cacdd4;
-/* 边框圆角 */
-@boxRadius: 4px;
-/* 特殊圆角 */
-@specialRadius: 10px;
-/* icon圆角 */
-@iconRadius: 3px;
-/* hover背景色 */
-@hoverBgColor: #e8efff;
-/* 中性色/gray-8背景色 */
-@grayBgColor: #fafafb;
-/* hover字体颜色 */
-@hoverColor: #165dff;
-/* active背景色 */
-@activeBgColor: #165dff;
-/* active字体颜色 */
-@activeColor: #ffffff;
-/* 删除hover背景色 */
-@deleteHoverBgColor: #fed5d1;
-/* 删除hover字体色 */
-@deleteHoverColor: #fb5547;
-/* 按钮 */
-@btnPrimaryBgColor: #165dff;
-@btnPrimaryFontColor: #ffffff;
-
-/* 字体大小 */
-@fontSize: 14px;
-/* 图标大小 */
-@iconSize: 16px;
-/* 字体weight */
-@fontWeight: 400;
-/* border */
-@boxBorder: 1px solid #ecedf0;
-@borderColor: #ecedf0;
-/* padding */
-@searchPadding: 24px;
-@contentPadding: 32px;
-/*下拉框宽度*/
-@dropdownWidth: 284px;
-/* 分析维度， 关系 */
-@dropdownWidth2: 120px;
-/*更多操作*/
-@dropdownWidth3: 200px;
-/* 指标下拉框= 200+284*/
-@dropdownHeight: 400px;
-
-/* 下拉框外框 */
-@dropdownPadding: 8px;
-/*下拉选项*/
-@dropdownItemPadding: 14px 8px;
-/**/
-@selectItemHeight: 48px;
-/*级联二级选择项*/
-@selectItem2Height: 40px;
-/*级联二级内边距*/
-@selectItem2Padding: 8px 10px;
-
-.boxBg {
-  color: @fontColor;
-  background-color: #fff;
-  &:hover:not(.box-active, .box-disabled) {
-    color: @hoverColor;
-    background-color: @hoverBgColor;
-    .biz-icon {
-      color: @hoverColor;
-    }
-  }
-}
-.box-hover {
-  color: @hoverColor;
-  background-color: @hoverBgColor;
-  .biz-icon {
-    color: @hoverColor;
-  }
-}
-.box-active {
-  color: @activeColor !important;
-  background-color: @activeBgColor;
-  .biz-icon {
-    color: @activeColor;
-  }
-}
-.box-disabled {
-  color: @fontColor !important;
-  background-color: #f5f5f5;
-  cursor: not-allowed !important;
-}
-.biz-search {
-  box-sizing: border-box;
-  padding: 4px;
-  background: #f6f6f6;
-  border-radius: @specialRadius;
-  &:hover,
-  &.active {
-    background-color: @hoverBgColor;
-    .biz-search-box {
-      background-color: #fff;
-      border-color: #165dff;
-    }
-  }
-  .biz-search-box {
-    height: 40px;
-    background: #f6f6f6;
-    border-color: #f6f6f6;
-    border-radius: @specialRadius;
-    box-shadow: none;
-
-    input {
-      background: transparent;
-    }
-    .ant-input {
-      border: none;
-    }
-    &.small {
-      height: 32px;
-    }
-  }
-}
-
-.mb-12 {
-  margin-bottom: 12px;
-}
-
-/*滚动条凹槽的颜色，还可以设置边框属性 */
-::-webkit-scrollbar-track-piece {
-  background-color: #fff;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-}
-
-/*滚动条的宽度*/
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-/*滚动条的设置*/
-::-webkit-scrollbar-thumb {
-  background-color: #cacdd4;
-  background-clip: padding-box;
-  border: 2px solid #fff;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-}
-
-/*滚动条鼠标移上去*/
-::-webkit-scrollbar-thumb:hover {
-  // background-color: #bbb;
-}
-::-webkit-scrollbar-track-piece {
-  width: 6px;
-  height: 6px;
-}
+@import './theme.less';
+@import './icon.less';
+@import './select.less';

package/es/commonStyle/select.less

@@ -1,13 +1,4 @@
-@import './index.less';
-@import './theme.less';
-
-/* 标题 */
-
-/*下拉框样式重写*/
-// .biz-select {
-//   width: 100%;
-//   color: @fontColor;
-// }
+@import './variable.less';
 
 /*文本框样式*/
 .biz-select-cotainer {
@@ -71,7 +62,7 @@
 
 .biz-select-zhankai {
   position: absolute;
-  top: 9px;
+  top: 5px;
   right: 10px;
   display: none;
   color: @iconColor;
@@ -92,7 +83,7 @@
   font-size: @fontSize;
   line-height: 48px;
   background: #ffffff;
-  border-radius: @specialRadius;
+  border-radius: @boxRadius2;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }