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

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

@@ -0,0 +1,13 @@
+import { DataProps } from '../type';
+export declare const formatPieData: (data: DataProps, showAll: boolean, showMap: {
+    [x: string]: any;
+}, showList?: any[] | undefined) => {
+    name: string;
+    value: number;
+}[];
+export declare const formatChartData: (data: DataProps, reverseXAxis: boolean, showMap: {
+    [x: string]: any;
+}, showList?: any[] | undefined) => {
+    x_axis: string[];
+    series: any;
+};

package/es/chart/util/formatData.js

@@ -0,0 +1,56 @@
+import { chartColors } from './color';
+export var formatPieData = function formatPieData(data, showAll, showMap, showList) {
+  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;
+};
+export var formatChartData = function formatChartData(data, reverseXAxis, showMap, showList) {
+  if (reverseXAxis) {
+    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;
+  }
+};

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

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

package/es/chart/util/formatOption.js

@@ -0,0 +1,91 @@
+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;
+    }
+  }
+};
+
+var mapTooltipFormatter = function mapTooltipFormatter(params) {
+  console.log('t00l>>', params);
+  if (params.data === null || params.data === undefined) return;
+  var data = params.data;
+
+  if (data.childrenOptions && data.childrenOptions.length) {
+    var series = [];
+    var childrenOptions = data.childrenOptions;
+    childrenOptions.forEach(function (option) {
+      var label = option.name || option.names.join('-');
+      var value = option.value || option.values;
+
+      if (util.isArray(value)) {
+        value = value[value.length - 1];
+      }
+
+      series.push("<div class=\"biz-chart-tooltip-item\"><span class=\"biz-chart-tooltip-content\">".concat(label, ": </span><span class=\"biz-chart-tooltip-value\" style=\"color:#66ccff;\">").concat(util.toThousands(value), "</span></div>"));
+    });
+    return "".concat(series.join('<br/>'));
+  }
+
+  var dataValue = data.value || data.values;
+
+  if (util.isArray(dataValue)) {
+    dataValue = dataValue[dataValue.length - 1];
+  }
+
+  return "<div class=\"biz-chart-tooltip-item\"><span class=\"biz-chart-tooltip-content\">".concat(data.name || data.names.join('-'), ": </span><span style=\"color:#66ccff;\">").concat(util.toThousands(dataValue), "</span></div>");
+};
+
+export { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault, mapTooltipFormatter };

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

@@ -0,0 +1,8 @@
+import { DataProps, ItemDataProps } from '../type';
+declare const citySeries: (mapStore: DataProps, haveUserGroup: boolean) => ItemDataProps[];
+declare const provinceSeries: (data: DataProps, haveUserGroup?: boolean | undefined) => any;
+declare const maxMinValue: (series: ItemDataProps) => {
+    max: number;
+    min: number;
+};
+export { provinceSeries, citySeries, maxMinValue };

package/es/chart/util/mapUtil.js

@@ -0,0 +1,195 @@
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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 cityGeoCoord from './data/cityGeoCoord';
+import provinceGeoCoord from './data/provinceGeoCoord';
+
+var citySeries = function citySeries(mapStore, haveUserGroup) {
+  var backGroundMapSeries = {
+    type: 'map',
+    map: 'china',
+    showLegendSymbol: false,
+    top: 20,
+    bottom: 20,
+    data: [] // 省份着色背景地图数据
+
+  };
+  var scatterSeries = {
+    name: '',
+    type: 'scatter',
+    coordinateSystem: 'geo',
+    symbolSize: 8,
+    data: [] // 城市散点图数据
+
+  };
+  var provinceMapData = {};
+  mapStore.x_axis.forEach(function (xItem, i) {
+    scatterSeries.name = xItem;
+    mapStore.series.forEach(function (cityItem) {
+      var cityName = cityItem.names[cityItem.names.length - 1];
+      cityName = cityName.replace(/(市|省|自治区)$/, '');
+      var cityCoordObj = cityGeoCoord[cityName]; // 城市坐标对象
+
+      if (cityCoordObj) {
+        var cityValue = cityItem.values[i];
+        var scatterItem = {
+          name: cityCoordObj.name,
+          isCity: true,
+          value: [cityCoordObj.log, cityCoordObj.lat, cityValue],
+          childrenOptions: cityItem.userGroupCompareData
+        };
+        scatterSeries.data.push(scatterItem); // 计算省份数据，注有用户群对比时，因无法去重，导致省份数据不准，目前省份数据只做颜色区分，不做数据展示，后续产品方案会修改
+
+        var provinceObj = cityCoordObj.province; // 省份坐标对象
+
+        var provinceName = provinceObj ? provinceObj.name.replace(/(省|市)$/, '') : '';
+        var currentMapData = provinceMapData[provinceName];
+        var currentMapOptions = currentMapData ? currentMapData.childrenOptions : [];
+        provinceMapData[provinceName] = {
+          name: provinceName,
+          isProvince: true,
+          value: currentMapData ? currentMapData.value + cityValue : cityValue,
+          childrenOptions: currentMapOptions.concat(haveUserGroup ? cityItem.userGroupCompareData : [cityItem])
+        };
+      }
+    });
+  });
+
+  for (var j in provinceMapData) {
+    backGroundMapSeries.data.push(_objectSpread({
+      itemStyle: {
+        color: '#ccccef',
+        opacity: 0.5
+      }
+    }, provinceMapData[j]));
+  }
+
+  return [scatterSeries, backGroundMapSeries];
+};
+
+var provinceSeries = function provinceSeries(data, haveUserGroup) {
+  var series = [];
+  var mapStore = formatData(data, haveUserGroup);
+  mapStore.x_axis.forEach(function (xItem, i) {
+    var item = {
+      name: xItem,
+      type: 'map',
+      map: 'china',
+      roam: false,
+      top: 20,
+      bottom: 20,
+      label: {
+        show: true,
+        color: '#565656' // formatter: (params: { name: string }) => {
+        //     return params.name.replace(/(市|省|自治区|维吾尔自治区|特别行政区|壮族自治区|回族自治区)$/, '')
+        // }
+
+      },
+      showLegendSymbol: false,
+      data: []
+    };
+    mapStore.series.forEach(function (provinceItem) {
+      var name = provinceItem.name || provinceItem.names;
+      var provinceName = _typeof(name) === 'object' ? name[name.length - 1] : name;
+      provinceName = provinceName.replace(/(市|省|自治区)$/, '');
+      var provinceCoordObj = provinceGeoCoord[provinceName];
+      name = _typeof(name) === 'object' ? name.join('-') : name;
+      name = name.replace(/(市|省|自治区)$/, '');
+
+      if (provinceCoordObj) {
+        // 过滤json库中不存在的省
+        item.data.push({
+          name: name,
+          isProvince: true,
+          value: provinceItem.values[i],
+          childrenOptions: provinceItem.userGroupCompareData
+        });
+      }
+    });
+    series.push(item);
+  });
+  return series;
+};
+
+var maxMinValue = function maxMinValue(series) {
+  var max = 100;
+  var min = 0;
+  var valueArr = [];
+  series.data.forEach(function (item) {
+    var value = item.hasOwnProperty('value') ? item.value : item.values;
+
+    if (util.isArray(value)) {
+      value = value[value.length - 1];
+    }
+
+    valueArr = valueArr.concat([value]);
+  });
+
+  if (valueArr.length) {
+    max = Math.max.apply(Math, _toConsumableArray(valueArr));
+    min = Math.min.apply(Math, _toConsumableArray(valueArr));
+  }
+
+  if (max <= min) {
+    max = min + 1;
+  }
+
+  return {
+    max: max,
+    min: min
+  };
+};
+
+var formatData = function formatData(seriesData, haveUserGroup) {
+  if (haveUserGroup) {
+    // 有用户群时增加userGroupCompareData
+    var store = {
+      x_axis: seriesData.x_axis,
+      series: []
+    };
+    var areaObjMap = {};
+    seriesData.series.forEach(function (item) {
+      var areaName = item.names[item.names.length - 1];
+
+      if (!areaObjMap[areaName]) {
+        areaObjMap[areaName] = {
+          names: [areaName],
+          values: item.values,
+          userGroupCompareData: [item]
+        };
+      } else {
+        // 注：当有用户群对比时，此区域的values粗略计算为各用户群相加之和（此处未去重，因数据不准目前只做颜色展示，后续产品会修改）
+        areaObjMap[areaName].values = [areaObjMap[areaName].values[0] + item.values[0]];
+        areaObjMap[areaName].userGroupCompareData.push(item);
+      }
+    });
+
+    for (var area in areaObjMap) {
+      store.series.push(areaObjMap[area]);
+    }
+
+    return store;
+  } else {
+    return seriesData;
+  }
+};
+
+export { provinceSeries, citySeries, maxMinValue };

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);
 }