@zgfe/business-lib 1.0.0-beta.4 → 1.0.1-beta.0

package/es/attributeSelector/listPanel.js

@@ -0,0 +1,206 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Anchor, Button } from 'antd';
+import React, { useContext, useEffect, useState } from 'react';
+import { BizGlobalDataContext } from '..';
+import BizSearchInput from '../searchInput';
+import Option from './option';
+var Link = Anchor.Link;
+
+var AttrListPanel = function AttrListPanel(props) {
+  var _props$disableItemLis;
+
+  var id = props.id,
+      _props$enableEnvProp = props.enableEnvProp,
+      enableEnvProp = _props$enableEnvProp === void 0 ? true : _props$enableEnvProp,
+      _props$enableEventPro = props.enableEventProp,
+      enableEventProp = _props$enableEventPro === void 0 ? false : _props$enableEventPro,
+      _props$enableUserProp = props.enableUserProp,
+      enableUserProp = _props$enableUserProp === void 0 ? true : _props$enableUserProp,
+      _props$eventIdList = props.eventIdList,
+      eventIdList = _props$eventIdList === void 0 ? [] : _props$eventIdList;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var _useContext = useContext(BizGlobalDataContext),
+      eventGroupList = _useContext.eventGroupList,
+      userPropList = _useContext.userPropList,
+      eventEnvList = _useContext.eventEnvList;
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      optionList = _useState4[0],
+      setOptionList = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentAttr = _useState6[0],
+      setCurrentAttr = _useState6[1];
+
+  var disableItemlist = (_props$disableItemLis = props.disableItemList) === null || _props$disableItemLis === void 0 ? void 0 : _props$disableItemLis.map(function (item) {
+    if (item.propCategory === 'envProp') {
+      item.key = "envProp-".concat(item.name);
+    } else if (item.propCategory === 'eventProp') {
+      item.key = item.id;
+    } else if (item.propCategory === 'userProp') {
+      item.key = "userProp-".concat(item.name);
+    }
+
+    return item;
+  });
+  var anchor = {
+    container: "container-".concat(id),
+    event: "event".concat(id),
+    user: "user".concat(id),
+    env: "env".concat(id)
+  };
+  var classPrefix = 'biz-attr-select';
+  useEffect(function () {
+    var list = [];
+
+    if (enableEventProp) {
+      var hasAnchor = false;
+      eventGroupList === null || eventGroupList === void 0 ? void 0 : eventGroupList.forEach(function (group) {
+        group.eventList.forEach(function (event) {
+          if (event.isDelete || event.isStop) return;
+          if (eventIdList.length && !eventIdList.includes(event.id)) return;
+          var group = {
+            isEvent: true,
+            groupName: event.alias || event.name,
+            anchor: hasAnchor ? String(Math.random()) : anchor.event,
+            key: "event-".concat(event.id),
+            children: []
+          };
+          hasAnchor = true;
+          event.attrList.forEach(function (attr) {
+            group.children.push(attr);
+          });
+          list.push(group);
+        });
+      });
+    }
+
+    if (enableUserProp) {
+      list.push({
+        isEvent: false,
+        groupName: '用户属性',
+        key: 'userProps',
+        anchor: anchor.user,
+        children: userPropList
+      });
+    }
+
+    if (enableEnvProp) {
+      list.push({
+        isEvent: false,
+        groupName: '触发环境',
+        key: 'eventEnvProps',
+        anchor: anchor.env,
+        children: eventEnvList
+      });
+    }
+
+    setOptionList(list);
+  }, [eventGroupList, userPropList, eventEnvList, eventIdList]);
+  useEffect(function () {
+    setCurrentAttr(props.value);
+  }, [props.value]);
+
+  function onClick(option) {
+    setCurrentAttr(option);
+    if (props.onChange) props.onChange(option);
+  }
+
+  var showList = function () {
+    var list = [];
+    optionList.map(function (group) {
+      if (!group.children.length) return;
+      var head = /*#__PURE__*/React.createElement(Option, {
+        group: group,
+        key: group.key
+      });
+      var childList = [];
+      group.children.forEach(function (option) {
+        if (searchValue && !new RegExp(searchValue, 'i').test(option === null || option === void 0 ? void 0 : option.label)) return;
+        var disabled = false;
+        disableItemlist === null || disableItemlist === void 0 ? void 0 : disableItemlist.forEach(function (item) {
+          if (item.key === option.key) disabled = true;
+        });
+        childList.push( /*#__PURE__*/React.createElement(Option, {
+          option: option,
+          key: option === null || option === void 0 ? void 0 : option.key,
+          checked: (currentAttr === null || currentAttr === void 0 ? void 0 : currentAttr.key) === (option === null || option === void 0 ? void 0 : option.key),
+          highlight: {
+            enable: true,
+            text: searchValue
+          },
+          disabled: disabled,
+          onClick: onClick
+        }));
+      });
+
+      if (childList.length) {
+        list.push(head);
+        list = list.concat(childList);
+      }
+    });
+    return list;
+  }();
+
+  if (!showList.length && !searchValue) return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-drowdown nodata")
+  }, "\u6682\u65E0\u6570\u636E");
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-drowdown")
+  }, /*#__PURE__*/React.createElement(BizSearchInput, {
+    onChange: function onChange(val) {
+      return setSearchValue(val);
+    },
+    placeholder: "\u641C\u7D22\u5C5E\u6027"
+  }), showList.length ? /*#__PURE__*/React.createElement(Anchor, {
+    className: "".concat(classPrefix, "-anchor-panel"),
+    affix: false,
+    onClick: function onClick(e) {
+      e.preventDefault();
+    },
+    getContainer: function getContainer() {
+      return document.getElementById(anchor.container);
+    }
+  }, enableEventProp && /*#__PURE__*/React.createElement(Link, {
+    href: "#".concat(anchor.event),
+    title: /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "\u4E8B\u4EF6\u5C5E\u6027")
+  }), enableUserProp && /*#__PURE__*/React.createElement(Link, {
+    href: "#".concat(anchor.user),
+    title: /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "\u7528\u6237\u5C5E\u6027")
+  }), enableEnvProp && /*#__PURE__*/React.createElement(Link, {
+    "data-type": 'event',
+    href: "#".concat(anchor.env),
+    title: /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "\u89E6\u53D1\u73AF\u5883")
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    id: anchor.container,
+    className: "".concat(classPrefix, "-container")
+  }, showList.length ? showList : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-nodata")
+  }, "\u6682\u65E0\u6570\u636E")));
+};
+
+export default AttrListPanel;

package/es/attributeSelector/option.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AttributeSelect } from './types';
+declare const Option: React.FC<{
+    option?: AttributeSelect.Value;
+    group?: AttributeSelect.Option;
+    disabled?: boolean;
+    highlight?: {
+        enable: boolean;
+        text: string;
+        color?: string;
+    };
+    checked?: boolean;
+    onClick?: (option: AttributeSelect.Value) => void;
+}>;
+export default Option;

package/es/attributeSelector/option.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { IconFont } from '..';
+import { util } from '../utils';
+
+var Option = function Option(props) {
+  var option = props.option,
+      group = props.group,
+      checked = props.checked,
+      disabled = props.disabled;
+  var classPrefix = 'biz-attr-select';
+
+  function onClick() {
+    if (disabled) return;
+    if (props.onClick) props.onClick(option);
+  }
+
+  function getLabel(label) {
+    if (!props.highlight || !props.highlight.enable || !props.highlight.text) return label;
+    var text = props.highlight.text;
+    if (text.length === label.length) return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(classPrefix, "-highlight")
+    }, label);
+    return util.setHighLight(label, props.highlight.text, function (text, key) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(classPrefix, "-highlight"),
+        key: key
+      }, text);
+    });
+  }
+
+  if (group) {
+    return /*#__PURE__*/React.createElement("div", {
+      id: group.anchor,
+      className: "".concat(classPrefix, "-group")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-split")
+    }), /*#__PURE__*/React.createElement("span", {
+      title: group.isEvent ? "\u4E8B\u4EF6\u5C5E\u6027[".concat(group.groupName, "]") : group.groupName
+    }, group.isEvent ? "\u4E8B\u4EF6\u5C5E\u6027[".concat(group.groupName, "]") : group.groupName));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-option ").concat(checked ? 'active' : '', " ").concat(disabled ? 'disabled' : ''),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-option-icon"),
+    type: "".concat((option === null || option === void 0 ? void 0 : option.propCategory) === 'userProp' ? 'icon-yonghushuxing' : (option === null || option === void 0 ? void 0 : option.propCategory) === 'eventProp' ? 'icon-shijianshuxing1' : 'icon-chufahuanjing')
+  }), /*#__PURE__*/React.createElement("span", {
+    title: (option === null || option === void 0 ? void 0 : option.alias) || (option === null || option === void 0 ? void 0 : option.label)
+  }, getLabel((option === null || option === void 0 ? void 0 : option.alias) || (option === null || option === void 0 ? void 0 : option.label))));
+};
+
+export default Option;

package/es/attributeSelector/styles/index.less

@@ -0,0 +1,100 @@
+@import '../../assets/styles/inner.less';
+.biz-attr-select {
+  &-handle {
+    display: flex;
+    flex-direction: row;
+    .__select-handle();
+    &:hover .biz-attr-select-del-icon {
+      display: inline-block;
+    }
+  }
+  &-del-icon {
+    display: none;
+    flex: none;
+    width: @icon-width;
+    line-height: 2em;
+    text-align: center;
+    border-radius: @border-radius-small;
+    &:hover {
+      .__error-hover();
+    }
+  }
+  &-drowdown {
+    width: 284px;
+    .__select-panel();
+    &.nodata {
+      .__select-nodata();
+    }
+  }
+  &-anchor-panel {
+    padding: 12px 0 20px 0;
+    .ant-anchor {
+      display: flex;
+      flex-direction: row;
+      .ant-anchor-ink::before {
+        width: 0;
+      }
+      .ant-anchor-link {
+        padding: 0;
+        &:last-of-type .ant-btn {
+          margin-right: 0;
+        }
+      }
+      .ant-btn {
+        margin-right: 8px;
+      }
+      .ant-anchor-link-active .ant-btn {
+        .__default-hover();
+      }
+    }
+  }
+  &-container {
+    max-height: 400px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &-nodata {
+    .__select-nodata();
+  }
+  &-group {
+    position: relative;
+    height: 32px;
+    padding: 0 @padding-sm;
+    color: @text-color-secondary;
+    line-height: 32px;
+    &::before {
+      position: absolute;
+      top: 9px;
+      left: 5px;
+      width: 3px;
+      height: 14px;
+      background-color: @primary-color;
+      border-radius: 10px;
+      content: '';
+    }
+    & > span {
+      position: relative;
+      display: inline-block;
+      max-width: 225px;
+      padding-right: @padding-xss;
+      background: #fff;
+      .__default-overflow();
+    }
+  }
+  &-split {
+    position: absolute;
+    top: 18px;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid @border-color-base;
+  }
+  &-option {
+    .__select-option();
+    &:not(.active, :hover, .disabled) .biz-attr-select-highlight {
+      color: @primary-color;
+    }
+  }
+  &-option-icon {
+    margin-right: @margin-xs;
+  }
+}

package/es/attributeSelector/types.d.ts

@@ -0,0 +1,79 @@
+export declare enum PropType {
+    STRING = 1,
+    NUMBER = 2,
+    DATE = 3
+}
+export declare enum PropCategory {
+    EventProp = "eventProp",
+    UserProp = "userProp",
+    EnvProp = "envProp"
+}
+export interface AnalysisEvent {
+    id: number;
+    name: string;
+    alias?: string;
+    attrList: Array<EventProp>;
+    isDelete?: boolean;
+    isStop?: boolean;
+    isOverview?: boolean;
+}
+export interface EventGroup {
+    id: number;
+    name?: string;
+    eventList: AnalysisEvent[];
+}
+export interface BasicProp {
+    label?: string;
+    alias?: string;
+    type?: PropType;
+    realTime?: boolean;
+}
+export interface UserProp extends BasicProp {
+    name: string;
+    category?: 'fixed' | 'custom';
+    propCategory: 'userProp';
+    key?: string;
+    subtype?: number;
+}
+export interface EnvProp extends BasicProp {
+    category?: 'fixed' | 'custom';
+    propCategory: 'envProp';
+    name: string;
+    key?: string;
+}
+export interface EventProp extends BasicProp {
+    eventId?: number;
+    id: number;
+    propCategory: 'eventProp';
+    key?: number;
+    isHidden?: boolean;
+}
+export interface PropGroups {
+    eventGroupList?: EventGroup[];
+    userPropList?: UserProp[];
+    envPropList?: EnvProp[];
+}
+export declare namespace AttributeSelect {
+    type Value = EventProp | UserProp | EnvProp | null;
+    interface Props {
+        id?: string;
+        value?: Value;
+        defaultValue?: Value;
+        disableItemList?: (EventProp | UserProp | EnvProp)[];
+        enableDelete?: boolean;
+        placeholder?: string;
+        enableEventProp?: boolean;
+        enableUserProp?: boolean;
+        enableEnvProp?: boolean;
+        eventIdList?: number[];
+        onChange?: (value: Value) => void;
+        onDelete?: (value?: Value) => void;
+    }
+    interface Option {
+        groupName: string;
+        isEvent: boolean;
+        key: string;
+        anchor: string;
+        children: Value[];
+    }
+}

package/es/attributeSelector/types.js

@@ -0,0 +1,15 @@
+export var PropType;
+
+(function (PropType) {
+  PropType[PropType["STRING"] = 1] = "STRING";
+  PropType[PropType["NUMBER"] = 2] = "NUMBER";
+  PropType[PropType["DATE"] = 3] = "DATE";
+})(PropType || (PropType = {}));
+
+export var PropCategory;
+
+(function (PropCategory) {
+  PropCategory["EventProp"] = "eventProp";
+  PropCategory["UserProp"] = "userProp";
+  PropCategory["EnvProp"] = "envProp";
+})(PropCategory || (PropCategory = {}));

package/es/attributeSelector/util.d.ts

@@ -0,0 +1,7 @@
+import { OldSystem } from '../utils/type';
+import { PropGroups } from './types';
+export default function convertAttributeData(store: {
+    envPropList?: OldSystem.EnvProp[];
+    userPropList?: OldSystem.UserProp[];
+    eventList?: OldSystem.EventGroup[];
+}): PropGroups;

package/es/attributeSelector/util.js

@@ -0,0 +1,69 @@
+export default function convertAttributeData(store) {
+  var _store$eventList, _store$envPropList, _store$userPropList;
+
+  var res = {
+    envPropList: [],
+    eventGroupList: [],
+    userPropList: []
+  };
+  (_store$eventList = store.eventList) === null || _store$eventList === void 0 ? void 0 : _store$eventList.forEach(function (group_) {
+    var _res$eventGroupList;
+
+    var group = {
+      id: group_.groupId,
+      name: group_.groupName,
+      eventList: []
+    };
+    group_.eventList.forEach(function (e) {
+      if (e.is_delete || e.is_stop) return;
+      var event = {
+        alias: e.alias_name,
+        attrList: e.event_attrs.map(function (item) {
+          return {
+            alias: item.alias_name,
+            eventId: e.event_id,
+            id: item.attr_id,
+            isHidden: item.hidden,
+            key: item.attr_id,
+            label: item.attr_name,
+            propCategory: 'eventProp',
+            type: item.prop_type,
+            realTime: true
+          };
+        }),
+        id: e.event_id,
+        isDelete: e.is_delete,
+        isStop: e.is_stop,
+        name: e.event_name
+      };
+      group.eventList.push(event);
+    });
+    (_res$eventGroupList = res.eventGroupList) === null || _res$eventGroupList === void 0 ? void 0 : _res$eventGroupList.push(group);
+  });
+  res.envPropList = (_store$envPropList = store.envPropList) === null || _store$envPropList === void 0 ? void 0 : _store$envPropList.map(function (prop) {
+    return {
+      alias: prop.alias_name,
+      category: prop.category,
+      key: "envProp-".concat(prop.name),
+      label: prop.text,
+      name: prop.name,
+      propCategory: 'envProp',
+      type: prop.type,
+      realTime: true
+    };
+  });
+  res.userPropList = (_store$userPropList = store.userPropList) === null || _store$userPropList === void 0 ? void 0 : _store$userPropList.map(function (prop) {
+    return {
+      alias: prop.alias_name,
+      category: prop.category,
+      key: "userProp-".concat(prop.name),
+      label: prop.text,
+      name: prop.name,
+      propCategory: 'userProp',
+      type: prop.type,
+      subtype: prop.subtype,
+      realTime: prop.category === 'custom'
+    };
+  });
+  return res;
+}

package/es/chart/demo/bar.js

@@ -9,6 +9,7 @@ export default (function () {
     showList: ['付款成功', '搜索商品', '查看商品详情']
   }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(BizChart, {
     data: chartData,
-    type: "bar"
+    type: "bar",
+    xRotate: -45
   }));
 });

package/es/chart/demo/pie.js

@@ -8,6 +8,7 @@ export default (function () {
     showAll: false,
     legendPosition: "bottom",
     legendOrient: "vertical",
+    colors: ['#1D9ED1', '#F383A2', '#9FB40F', '#FF6B3B', '#8C8C47'],
     showList: ['付款成功', '搜索商品', '查看商品详情', 'click']
   });
 });

package/es/chart/index.d.ts

@@ -1,83 +1,5 @@
 import React from 'react';
 import './util/data/china.js';
-import { DataProps } from './type';
-interface BizChartProps {
-    /**
-     * @description     图形类型
-     * @default         line
-     */
-    type: 'bar' | 'pie' | 'line' | 'map';
-    /**
-     * @description     数据（x轴和series数据）
-     * @default         -
-     */
-    data: DataProps;
-    /**
-     * @description     柱图是同色还是一柱一色（仅对柱图单一系列作用）
-     * @default         true
-     */
-    sameColor?: boolean;
-    /**
-     * @description     是否是城市
-     * @default         true
-     */
-    isCity?: boolean;
-    /**
-     * @description     用户群，以，隔开
-     * @default         -
-     */
-    userGroup?: string;
-    /**
-     * @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';
-    /**
-     * @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>;
+import { ChartTypes } from './types';
+declare const BizChart: React.FC<ChartTypes.Props>;
 export default BizChart;