@zgfe/modules-event 1.0.7 → 1.0.29-zhongyuan.10

package/es/components/topBar/styles/index.less

@@ -1,63 +1,58 @@
-@import '~@zgfe/business-lib/es/assets/styles/inner.less';
-
-.modules-event-topbar {
-  display: flex;
-  justify-content: flex-end;
-  margin: 8px 0;
-  padding-right: 24px;
-  &-panel {
-    margin-right: 16px;
-    .ant-btn {
-      background: #fff;
-      border-color: #f2f3f4;
-    }
-    .ant-btn:hover {
-      border-color: #165dff;
-    }
-  }
-  &-scene {
-    margin-right: 16px;
-    .ant-btn {
-      background: #fff;
-      border-color: #f2f3f4;
-    }
-    .ant-btn:hover {
-      border-color: #165dff;
-    }
-  }
-  &-earlywarning {
-    margin-right: 16px;
-  }
-  &-platform {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-    > div {
-      position: relative;
-      padding: 0 16px;
-      background: #fff;
-      border: 1px solid #ecedf0;
-      cursor: pointer;
-    }
-    > div:hover,
-    .active {
-      z-index: 1;
-      color: #165dff;
-      background: #e8efff;
-      border: 1px solid #165dff;
-    }
-    > :nth-child(1) {
-      border-radius: 4px 0 0 4px;
-    }
-    > :nth-child(2) {
-      margin-left: -1px;
-    }
-    > :nth-child(3) {
-      margin-left: -1px;
-    }
-    > :nth-child(4) {
-      margin-left: -1px;
-      border-radius: 0 4px 4px 0;
-    }
-  }
-}
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+
+.modules-event-topbar {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0;
+  padding: 0 16px;
+  &-title {
+    display: flex;
+    align-items: center;
+    .fanhuiicon {
+      margin-right: 8px;
+      color: #5f6085;
+      cursor: pointer;
+    }
+    > span {
+      color: var(--io-N-, #021429);
+      font-weight: 500;
+      font-size: 16px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      line-height: 20px; /* 125% */
+      letter-spacing: 0.016px;
+    }
+  }
+  &-right {
+    display: flex;
+    justify-content: flex-end;
+  }
+  &-panel {
+    margin-right: 16px;
+    .ant-btn {
+      background: #fff;
+      border-color: #f2f3f4;
+    }
+    .ant-btn:hover {
+      border-color: #165dff;
+    }
+  }
+  &-scene {
+    margin-right: 16px;
+    .ant-btn {
+      background: #fff;
+      border-color: #f2f3f4;
+    }
+    .ant-btn:hover {
+      border-color: #165dff;
+    }
+  }
+  &-earlywarning {
+    margin-right: 16px;
+  }
+  &-platform {
+    display: flex;
+    height: 32px;
+    line-height: 32px;
+  }
+}

package/es/components/topBar/types.d.ts

@@ -1,7 +1,6 @@
 import { SearchValue, ResponseDataProps } from '../../types';
 export interface TopBarProps {
     searchData?: SearchValue;
-    showList: string[];
     platformChange: (data: number) => void;
     eventData?: ResponseDataProps;
     onClickGenerateReport?: (value: any) => void;

package/es/constants/apis.d.ts

@@ -2,7 +2,9 @@ declare const Apis: {
     dataList: string;
     getEventDataSql: string;
     eventDownloadReport: string;
-    queryAllSubjectApi: string;
     querySubDisplayApi: string;
+    relationSaveConfig: string;
+    queryRelationConfig: string;
+    getEventSwitch: string;
 };
 export default Apis;

package/es/constants/apis.js

@@ -2,7 +2,9 @@ var Apis = {
   dataList: '/zg/web/v2/data/eventDataList',
   getEventDataSql: '/zg/web/v2/dataSql/getEventDataSql',
   eventDownloadReport: '/zg/web/v2/data/eventDownloadReport',
-  queryAllSubjectApi: '/zg/web/v2/analysisSubject/queryAllSubject',
-  querySubDisplayApi: '/zg/web/v2/analysisSubject/querySubDisplay'
+  querySubDisplayApi: '/zg/web/v2/analysisSubject/querySubDisplay',
+  relationSaveConfig: '/zg/web/v2/event/relation/saveConfig',
+  queryRelationConfig: '/zg/web/v2/event/queryRelationConfig',
+  getEventSwitch: '/zg/web/v2/event/getEventSwitch'
 };
 export default Apis;

package/es/constants/fields.d.ts

@@ -249,17 +249,3 @@ export declare const addSceneFields: ({
     options?: undefined;
     fieldNames?: undefined;
 })[];
-export declare const indexObject: {
-    [key: string]: string;
-};
-export declare const BuiltinIndicators: {
-    id: number;
-    name: string;
-    eventList: {
-        name: string;
-        id: number;
-        type: string;
-        isBuiltIn: boolean;
-        attrList: never[];
-    }[];
-};

package/es/constants/fields.js

@@ -174,48 +174,4 @@ export var addSceneFields = [{
     required: true,
     message: '请输入场景名称'
   }]
-}];
-export var indexObject = {
-  number: '人数',
-  times: '次数',
-  per: '人均次数',
-  sum: '总和',
-  avg: '均值',
-  duration_times: '分布',
-  median: '中位数'
-};
-export var BuiltinIndicators = {
-  id: -2,
-  name: '整体',
-  eventList: [{
-    name: '新增用户',
-    id: -201,
-    type: 'add',
-    isBuiltIn: true,
-    attrList: []
-  }, {
-    name: '活跃用户',
-    id: -202,
-    type: 'active',
-    isBuiltIn: true,
-    attrList: []
-  }, {
-    name: '访问次数',
-    id: -203,
-    type: 'times',
-    isBuiltIn: true,
-    attrList: []
-  }, {
-    name: '平均使用时长',
-    id: -204,
-    type: 'duration_avg',
-    isBuiltIn: true,
-    attrList: []
-  }, {
-    name: '使用时长分布',
-    id: -205,
-    type: 'duration',
-    isBuiltIn: true,
-    attrList: []
-  }]
-};
+}];

package/es/modules/chart/demo/panel.js

@@ -4,8 +4,13 @@ import { searchData, totalResult, totalSearchData } from './data';
 export default (function () {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "\u8D8B\u52BF\u56FE\u8868\u683C"), /*#__PURE__*/React.createElement(EventChart, {
     params: searchData
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("h2", null, "\u6C47\u603B\u56FE\u8868\u683C"), /*#__PURE__*/React.createElement(EventChart, {
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("h2", null, "\u6C47\u603B\u56FE\u8868\u683C"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 500,
+      height: 500
+    }
+  }, /*#__PURE__*/React.createElement(EventChart, {
     dataSource: totalResult,
     params: totalSearchData
-  }));
+  })));
 });

package/es/modules/chart/index.js

@@ -12,42 +12,46 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Tooltip, Empty } from 'antd';
-import { BizChart, BizGlobalDataContext, ajax, BizLoading } from '@zgfe/business-lib';
+import { BizChart, BizGlobalDataContext, ajax, BizLoading, BizEmpty } from '@zgfe/business-lib';
 import { EventTable } from '../../components';
 import { judgeIsCity } from '../content/utils';
 import { getValue, getMapChartData } from '../../modules/content/utils';
-import { getDefaultShow, getShowColor, getUserGroupsCompareData, getSortData, getChartDataEventAliasName } from '../../utils/formData';
+import { getShowColor, getUserGroupsCompareData, getSortData, getChartDataEventAliasName, formTableData, sortOriginalData } from '../../utils/formData';
 import _ from 'lodash';
 import moment from 'moment';
 import { Apis, chartColors } from '../../constants';
 var classPrefix = 'event-mi-table';
 var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var params = props.params;
-  var _useState = useState(false),
+  var _useState = useState(props === null || props === void 0 ? void 0 : props.completedSearchData),
     _useState2 = _slicedToArray(_useState, 2),
-    isCity = _useState2[0],
-    setIsCity = _useState2[1];
-  var _useState3 = useState(props.type || 'line'),
+    completedSearchData = _useState2[0],
+    setCompletedSearchData = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    chartType = _useState4[0],
-    setChartType = _useState4[1];
-  var _useState5 = useState(props.showList || []),
+    isCity = _useState4[0],
+    setIsCity = _useState4[1];
+  var _useState5 = useState(props.type || 'line'),
     _useState6 = _slicedToArray(_useState5, 2),
-    showList = _useState6[0],
-    setShowList = _useState6[1];
-  var _useState7 = useState(props.dataSource),
+    chartType = _useState6[0],
+    setChartType = _useState6[1];
+  var _useState7 = useState(props.showList || []),
     _useState8 = _slicedToArray(_useState7, 2),
-    dataSource = _useState8[0],
-    setDataSource = _useState8[1];
+    showList = _useState8[0],
+    setShowList = _useState8[1];
+  var _useState9 = useState(props.dataSource),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dataSource = _useState10[0],
+    setDataSource = _useState10[1];
   var _useContext = useContext(BizGlobalDataContext),
-    currentApp = _useContext.currentApp,
     eventGroupList = _useContext.eventGroupList,
     eventEnvList = _useContext.eventEnvList,
-    userPropList = _useContext.userPropList;
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    loading = _useState10[0],
-    setLoading = _useState10[1];
+    userPropList = _useContext.userPropList,
+    currentApp = _useContext.currentApp;
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    loading = _useState12[0],
+    setLoading = _useState12[1];
   var showColors = useMemo(function () {
     if (!dataSource) return chartColors;
     return getShowColor(dataSource, showList);
@@ -58,31 +62,46 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [params]);
   useEffect(function () {
+    if (!dataSource || !dataSource.series.length) return;
     if (!props.showList || !props.showList.length) {
-      setShowList(dataSource ? getDefaultShow(dataSource) : []);
+      var _dataSource$series$;
+      var gLen = (params === null || params === void 0 ? void 0 : params.dimension) ? 1 : 0;
+      var _data = formTableData(dataSource, (params === null || params === void 0 ? void 0 : params.userGroup) || [0], gLen);
+      var _sortData = sortOriginalData(_data, {
+        columnKey: "field".concat(((_dataSource$series$ = dataSource.series[0]) === null || _dataSource$series$ === void 0 ? void 0 : _dataSource$series$.values.length) - 1),
+        order: 'descend'
+      });
+      var _showlist = [];
+      _sortData.forEach(function (item, index) {
+        if (index < 10) {
+          _showlist.push(item.nameGroup);
+        }
+      });
+      setShowList(_showlist);
+      props.onChangeShow && props.onChangeShow(_showlist);
     } else {
       setShowList(props.showList);
     }
-  }, [props.showList, props.type, dataSource]);
+  }, [dataSource, props.showList]);
   useEffect(function () {
-    var _params$chartType;
-    if (!params) return;
-    var chartData = ((_params$chartType = params.chartType) === null || _params$chartType === void 0 ? void 0 : _params$chartType.split(',')) || ['line'];
+    var _completedSearchData$;
+    if (!completedSearchData) return;
+    var chartData = ((_completedSearchData$ = completedSearchData.chartType) === null || _completedSearchData$ === void 0 ? void 0 : _completedSearchData$.split(',')) || ['line'];
     var type = chartData[0];
     if (!props.dataSource) {
       type = (chartData === null || chartData === void 0 ? void 0 : chartData.length) > 1 ? chartData[chartData.length - 1] : chartData[0];
     }
     setChartType(props.type || type);
-    if (params.id) {
-      var dimensions = params.dimension;
+    if (completedSearchData.id) {
+      var dimensions = completedSearchData.dimension;
       if (type === 'map' && dimensions) {
         var _getValue;
         setIsCity(judgeIsCity((_getValue = getValue(dimensions, eventGroupList, eventEnvList, userPropList)) === null || _getValue === void 0 ? void 0 : _getValue.name));
       }
     }
-  }, [params, props.type]);
+  }, [completedSearchData, props.type]);
   var fetchResult = function fetchResult() {
-    var _params$chartType2;
+    var _params$chartType;
     setLoading(true);
     ajax(Apis.dataList, {
       method: 'post',
@@ -90,9 +109,11 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
         appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
         platform: (params === null || params === void 0 ? void 0 : params.platform) || 0
       }, params), {}, {
-        chartType: (params === null || params === void 0 ? void 0 : (_params$chartType2 = params.chartType) === null || _params$chartType2 === void 0 ? void 0 : _params$chartType2.indexOf(',')) === -1 ? params === null || params === void 0 ? void 0 : params.chartType : 'grid'
+        chartType: (params === null || params === void 0 ? void 0 : (_params$chartType = params.chartType) === null || _params$chartType === void 0 ? void 0 : _params$chartType.indexOf(',')) === -1 ? params === null || params === void 0 ? void 0 : params.chartType : 'grid'
       })
     }).then(function (res) {
+      var _params$userGroup;
+      setCompletedSearchData(params);
       if (!res) {
         setLoading(false);
         return;
@@ -101,7 +122,7 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (['bar', 'pie', 'map'].indexOf(params.chartType) !== -1) {
         _data = getSortData(_data);
       }
-      if (params.userGroup.length > 1) {
+      if ((params === null || params === void 0 ? void 0 : params.userGroup) && (params === null || params === void 0 ? void 0 : (_params$userGroup = params.userGroup) === null || _params$userGroup === void 0 ? void 0 : _params$userGroup.length) > 1) {
         setDataSource(getUserGroupsCompareData(_data));
       } else {
         setDataSource(_data);
@@ -117,16 +138,37 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       list.splice(index, 1);
     }
+    setShowList(list);
     if (props.onChangeShow) props.onChangeShow(list);
   };
-  var onChangeShow = function onChangeShow(names) {
-    if (props.onChangeShow) props.onChangeShow(names);
-  };
   if (loading) {
     return /*#__PURE__*/React.createElement(BizLoading, {
       className: "".concat(classPrefix, "-loading")
     });
   }
+  if (dataSource && dataSource.delEvent) {
+    if (!props.isHideDel) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          minHeight: 345,
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React.createElement(BizEmpty, {
+        imageStyle: {
+          height: 58
+        },
+        description: /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: '#9AA1A9'
+          }
+        }, "\u4E8B\u4EF6\u5DF2\u88AB\u5220\u9664\u65E0\u6CD5\u67E5\u770B\uFF0C\u8BF7\u91CD\u65B0\u8BBE\u7F6E")
+      }));
+    } else {
+      return null;
+    }
+  }
   if (!dataSource || !dataSource.xAxis.length || !dataSource.series.length) {
     return /*#__PURE__*/React.createElement(Empty, {
       image: Empty.PRESENTED_IMAGE_SIMPLE,
@@ -139,6 +181,33 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
       title: '当前图表数据实时更新，约每分钟更新一次'
     }, /*#__PURE__*/React.createElement("div", null, "\u6570\u636E\u66F4\u65B0\u65F6\u95F4\uFF1A", moment().format('YYYY-MM-DD HH:mm')));
   };
+  var tooltipFormatter = function tooltipFormatter(params) {
+    var xLabel = '';
+    var array = params[0].name.split('|');
+    if (array.length > 1) {
+      xLabel = moment(array[0]).format('MM-DD') + '~' + moment(array[1]).format('MM-DD');
+    } else {
+      xLabel = moment(array[0]).isValid() ? moment(array[0]).format('MM-DD') : array[0];
+    }
+    var series = [];
+    var seriesMap = {};
+    params.forEach(function (item) {
+      if (item.value === null || item.value === undefined || seriesMap[item.seriesName] !== null && seriesMap[item.seriesName] !== undefined) return;
+      seriesMap[item.seriesName] = item.value;
+      var value = item.value;
+      var seriesName = item.seriesName || item.axisValueLabel;
+      seriesName = [seriesName].join('<br/>');
+      series.push({
+        text: "<div class='biz-chart-tooltip-item'>\n                      <div class='biz-chart-tooltip-content'>\n                        <span class=\"biz-tooltip-marker\" style=\"background:".concat(item.color, "\"></span>\n                        <div class=\"biz-tooltip-name\">").concat(seriesName, "</div>\n                      </div> \n                      <div class='biz-chart-tooltip-value'>\n                      ").concat(value, "\n                      </div>\n                    </div>"),
+        value: value
+      });
+    });
+    return "<div class='biz-chart-tooltip-title'>".concat(xLabel, "</div>").concat(series.sort(function (a, b) {
+      return parseInt(b.value) - parseInt(a.value);
+    }).map(function (item) {
+      return item.text;
+    }).join(''));
+  };
   switch (chartType) {
     case 'line':
     case 'bar':
@@ -156,7 +225,8 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
         colors: showColors,
         xRotate: chartType === 'bar' && dataSource.series.length > 5 ? 40 : 0,
         reverseXAxis: chartType === 'bar',
-        isCity: isCity
+        isCity: isCity,
+        tooltipFormatter: tooltipFormatter
       }));
     case 'grid':
       return /*#__PURE__*/React.createElement(EventTable, {
@@ -164,7 +234,6 @@ var EventChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
         sourcePanel: !props.dataSource,
         searchData: params,
         showList: showList,
-        changeShow: onChangeShow,
         changeShowByName: onChangeShowByName,
         onSelectEvent: props === null || props === void 0 ? void 0 : props.onSelectEvent
       });

package/es/modules/chart/types.d.ts

@@ -3,14 +3,17 @@ import { SearchValue } from '../../types';
 export declare namespace eventChartProps {
     interface ChartTypesProps extends ChartTypes.Value {
         xAxis: [];
+        delEvent?: number;
     }
     interface Props {
         dataSource?: ChartTypesProps;
         params?: SearchValue;
+        completedSearchData?: SearchValue;
         type?: string;
         showList?: string[];
         showColors?: string[];
         onChangeShow?: (data: string[]) => void;
         onSelectEvent?: (id: number, name: string) => void;
+        isHideDel?: boolean;
     }
 }

package/es/modules/content/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { EventContentProps } from './types';
 import './styles/index.less';
-declare const EventContent: React.FC<EventContentProps.Props>;
+declare const EventContent: React.ForwardRefExoticComponent<EventContentProps.Props & React.RefAttributes<any>>;
 export default EventContent;