@zgfe/modules-attribution 1.0.1

package/dist/esm/modules/leftPanel/index.js

@@ -0,0 +1,285 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useContext, useEffect, useState } from 'react';
+import { IconFont, BizGlobalDataContext } from '@zgfe/business-lib';
+import { Form, Skeleton, Button } from 'antd';
+import SearchPanel from "./components/panel";
+import GlobalAttribute from "./components/globalAttribute";
+import "./styles/index.less";
+import _ from 'lodash';
+import { formatSearchData, formValue, removeEmptyValue, targetChangeCallback } from "./utils";
+import { initTarget } from "../../constants/initData";
+import { searchFields } from "../../constants/fields";
+export var classPrefix = 'mi-left-form';
+var LeftPanel = function LeftPanel(props) {
+  var defaultValue = props.defaultValue;
+  // 是否是新增引起的变化
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAdd = _useState2[0],
+    setIsAdd = _useState2[1];
+
+  // form 值
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+
+  // 是否加载中
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+
+  // 筛选条件值
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    formData = _useState6[0],
+    setFormData = _useState6[1];
+
+  // 指标下拉列表中是否展示事件概览
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showOverview = _useState8[0],
+    setShowOverview = _useState8[1];
+  // 已选择的事件id列表
+  var _useState9 = useState([-100]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    eventIdList = _useState10[0],
+    setEventIdList = _useState10[1];
+  var _useContext = useContext(BizGlobalDataContext),
+    eventGroupList = _useContext.eventGroupList,
+    userGroupList = _useContext.userGroupList;
+
+  // 初始化
+  useEffect(function () {
+    if (defaultValue) {
+      var _defaultValue = _objectSpread(_objectSpread({}, defaultValue), {}, {
+        event: defaultValue.targets,
+        process: defaultValue.targets
+      });
+      var data = formValue(_defaultValue, userGroupList);
+      setFormData(data);
+      // 初始化事件id列表
+      var eList = [];
+      _defaultValue.targets.forEach(function (target) {
+        if (target && target.eventId) {
+          eList.push(target.eventId);
+        }
+      });
+      setEventIdList(eList);
+    }
+    setLoading(false);
+  }, []);
+
+  // 点击表格中事件进入具体的事件查询
+  useEffect(function () {
+    var targets = props.targets;
+    if (!targets || !formData) return;
+    // 指标先清空再赋值（因为指标的赋值只有在初始化时才起作用）
+    var data = _.cloneDeep(formData);
+    data.globalFilters = undefined;
+    data.globalDimensions = undefined;
+    data.targets = targets;
+    var initData = _objectSpread(_objectSpread({}, formData), {}, {
+      targets: undefined,
+      event: undefined,
+      process: undefined
+    });
+    setFormData(initData);
+    setTimeout(function () {
+      form.setFieldsValue(data);
+      setFormData(data);
+      setEventIdList([targets[0].eventId]);
+    }, 0);
+  }, [props.targets]);
+
+  /**
+   * 表单项添加
+   * @param name 表单项名称
+   * @param callback onAdd回调
+   * @returns
+   */
+  var onAdd = function onAdd(name, callback) {
+    var targets = form.getFieldValue('targets');
+    if (name === 'targets') {
+      if (targets[0].eventId === -100) {
+        setShowOverview(true);
+        return;
+      } else if (targets.length > 1 && !targets[targets.length - 1]) {
+        // 新增的指标还没有选择时，不允许新增
+        setShowOverview(false);
+        return;
+      } else {
+        setShowOverview(false);
+      }
+    }
+    if (name === 'globalDimensions' && targets[0].eventId === -100) return;
+    setIsAdd(true);
+    setTimeout(function () {
+      callback();
+    }, 0);
+  };
+
+  /**
+   * form list 删除
+   * 为了解决指标，多个时除了第一个其他的都没有值，删除第一个就会导致报错
+   * @param name form name
+   * @param index 位置
+   * @param callback remove
+   */
+  var _onDelete = function onDelete(name, index, callback) {
+    if (name === 'targets') {
+      var targetValue = form.getFieldValue(name);
+      if (index === 0) {
+        var empty = [0];
+        for (var i = 1; i < targetValue.length; i++) {
+          if (!targetValue[i]) {
+            empty.push(i);
+          } else {
+            break;
+          }
+        }
+        callback(empty);
+        return;
+      }
+    }
+    callback(index);
+  };
+
+  /**
+   * 判断添加按钮是否显示
+   * @param name 当前form item的name
+   * @returns
+   */
+  var onShowAddBtn = function onShowAddBtn(name) {
+    var targets = form.getFieldValue('targets');
+    if (name === 'targets' || name === 'globalDimensions') {
+      if (targets && targets[0].eventId === -100) {
+        return 'disabled';
+      }
+      if (name === 'targets') {
+        var length = targets.length;
+        if (length > 1 && !targets[length - 1]) {
+          return 'disabled';
+        }
+      }
+    }
+    return '';
+  };
+
+  /**
+   * 筛选值发生改变
+   * @param _changedValues 当前表单项改变后的值
+   * @param allValues 当前表单值
+   * @returns
+   */
+  var onChange = function onChange(_changedValues, allValues) {
+    // 是新增引起的变化则不请求接口
+    if (isAdd) {
+      setIsAdd(false);
+      return;
+    }
+    var data = _.cloneDeep(allValues);
+    if (_changedValues.targets) {
+      var eList = [];
+      if (allValues.targets.length) {
+        allValues.targets.forEach(function (target) {
+          if (target && target.eventId) {
+            eList.push(target.eventId);
+          }
+        });
+      } else {
+        data.targets = initTarget;
+        eList = [-100];
+      }
+      setEventIdList(eList);
+      var targetData = targetChangeCallback(data, eList, eventGroupList);
+      form.setFieldsValue(targetData);
+      // 多于1个指标，不显示事件概览
+      setShowOverview(allValues.targets.length <= 1);
+    }
+    var finalData = removeEmptyValue(data);
+    setFormData(finalData);
+    props.onChange(formatSearchData(finalData));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    loading: loading,
+    active: true,
+    paragraph: {
+      rows: 4
+    }
+  }, /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    layout: "vertical",
+    initialValues: formData,
+    onValuesChange: onChange
+  }, searchFields.map(function (item) {
+    if (item.type === 'globalFilters') {
+      return /*#__PURE__*/React.createElement(Form.Item, {
+        key: item.key
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-title")
+      }, item.label), /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-item"),
+        name: item.name
+      }, /*#__PURE__*/React.createElement(GlobalAttribute, {
+        max: item.max,
+        eventIdList: eventIdList
+      })));
+    }
+    return /*#__PURE__*/React.createElement(Form.List, {
+      name: item.name,
+      key: item.key
+    }, function (fields, _ref, index) {
+      var add = _ref.add,
+        remove = _ref.remove;
+      return /*#__PURE__*/React.createElement(Form.Item, {
+        className: item.type,
+        key: "".concat(item.key, "-item-").concat(index)
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-title")
+      }, " ", item.label, " "), fields.map(function (field, index) {
+        return /*#__PURE__*/React.createElement(Form.Item, _extends({}, field, {
+          key: field.key,
+          className: "".concat(classPrefix, "-item")
+        }), /*#__PURE__*/React.createElement(SearchPanel, {
+          type: item.type,
+          showOverview: showOverview,
+          enableDelete: fields.length > 1,
+          eventIdList: eventIdList,
+          allValues: formData,
+          onDelete: function onDelete() {
+            return _onDelete(item.name, index, remove);
+          }
+        }));
+      }), fields.length < item.max && item.addLabel !== '' && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-add ").concat(onShowAddBtn(item.name)),
+        onClick: function onClick() {
+          return onAdd(item.type, add);
+        }
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        className: "".concat(classPrefix, "-add-icon"),
+        type: "tianjia1"
+      }), item.addLabel));
+    });
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: function onClick() {
+      return props.onChange(123);
+    }
+  }, "\u67E5\u8BE2")));
+};
+export default LeftPanel;

package/dist/esm/modules/leftPanel/styles/index.less

@@ -0,0 +1,55 @@
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+
+.mi-left-form {
+  .biz-target-dimension {
+    display: none;
+  }
+  .biz-event-select-list-panel {
+    position: fixed;
+  }
+  &-title.ant-form-item {
+    margin-bottom: 8px;
+    color: @text-color-secondary;
+    font-weight: 600;
+    .ant-form-item-control-input {
+      min-height: 20px;
+      .ant-form-item-control-input-content {
+        height: 20px;
+      }
+    }
+  }
+
+  &-item.ant-form-item {
+    margin-bottom: 8px;
+  }
+
+  &-add {
+    width: fit-content;
+    height: 20px;
+    margin-top: 8px;
+    color: @text-color-secondary;
+    line-height: 20px;
+    border-radius: @border-radius-small;
+    cursor: pointer;
+    span {
+      margin-right: 4px;
+    }
+
+    &:not(.disabled):hover {
+      .__default-hover();
+    }
+
+    &.disabled {
+      color: @disabled-color;
+      cursor: not-allowed;
+    }
+  }
+
+  .biz-condition-item-input {
+    border-color: transparent;
+  }
+
+  .ant-input-affix-wrapper > input.ant-input {
+    height: 100%;
+  }
+}

package/dist/esm/modules/leftPanel/types.d.ts

@@ -0,0 +1,27 @@
+import { TargetConditionTypes } from '@zgfe/business-lib';
+export declare namespace LeftPanelTypes {
+    interface Props {
+        defaultValue?: any;
+        targets?: Array<TargetConditionTypes.Value>;
+        onChange: (values: any) => void;
+    }
+    interface FieldProp {
+        key: string;
+        type: string;
+        name: string;
+        label: string;
+        max: number;
+        addLabel: string;
+        options?: any[];
+    }
+    interface PanelProp {
+        type: string;
+        value?: any;
+        allValues?: any;
+        enableDelete: boolean;
+        eventIdList?: number[];
+        showOverview?: boolean;
+        onChange?: (data: any) => void;
+        onDelete?: () => void;
+    }
+}

package/dist/esm/modules/leftPanel/types.js

@@ -0,0 +1,2 @@
+export var LeftPanelTypes;
+(function (_LeftPanelTypes) {})(LeftPanelTypes || (LeftPanelTypes = {}));

package/dist/esm/modules/leftPanel/utils.d.ts

@@ -0,0 +1,5 @@
+import { SearchData, SearchValue } from '../../types';
+export declare function formValue(source: SearchValue, userGroupList: any): any;
+export declare function formatSearchData(data: SearchData): SearchValue;
+export declare function removeEmptyValue(source: SearchData): any;
+export declare function targetChangeCallback(data: SearchData, eList: number[], eventGroupList: any): SearchData;

package/dist/esm/modules/leftPanel/utils.js

@@ -0,0 +1,262 @@
+import { PropCategory } from '@zgfe/business-lib/es/attributeSelector/types';
+import _ from 'lodash';
+// 将传入的查询数据格式化为需要的form对象
+export function formValue(source, userGroupList) {
+  var data = _.cloneDeep(source);
+  // 用户群变形
+  var result = [],
+    newDimensions = [];
+  if (data.userGroup) {
+    var userGroup = typeof data.userGroup === 'string' ? data.userGroup.split(',') : data.userGroup;
+    userGroup.map(function (group) {
+      var uid = typeof group === 'string' ? parseInt(group) : group;
+      userGroupList.forEach(function (user) {
+        if (user.id === uid) {
+          result.push(user);
+        }
+      });
+    });
+  } else {
+    result = [userGroupList[0]];
+  }
+  data.userGroup = result;
+  // 格式化属性细分
+  if (data.globalDimensions) {
+    data.globalDimensions.forEach(function (item) {
+      if (item) {
+        if (item.propCategory === PropCategory.EventProp) {
+          if (item.attrId) {
+            newDimensions.push({
+              id: item.attrId,
+              propCategory: item.propCategory,
+              type: item.type,
+              key: item.attrId
+            });
+          }
+        } else if (item.propCategory === PropCategory.UserProp) {
+          if (item.attrName) {
+            newDimensions.push({
+              id: item.attrId || 0,
+              name: item.attrName,
+              propCategory: item.propCategory,
+              type: item.type,
+              category: item.category,
+              key: "".concat(item.propCategory, "-").concat(item.attrName),
+              subtype: item.subtype
+            });
+          }
+        } else if (item.propCategory === PropCategory.EnvProp) {
+          if (item.attrName) {
+            newDimensions.push({
+              id: item.attrId || 0,
+              name: item.attrName,
+              type: item.type,
+              category: item.category,
+              key: "".concat(item.propCategory, "-").concat(item.attrName),
+              propCategory: item.propCategory
+            });
+          }
+        }
+      }
+    });
+  }
+  data.globalDimensions = newDimensions;
+  return data;
+}
+
+/**
+ * 将form数据转为搜索值
+ * @param data  form值
+ * @returns
+ */
+export function formatSearchData(data) {
+  var newData = {};
+  if (data.userGroup) {
+    var ids = [];
+    data.userGroup.forEach(function (group) {
+      if (group) {
+        ids.push(group.id);
+      }
+    });
+    newData.userGroup = ids;
+  }
+  if (data.globalDimensions) {
+    var globalDimensions = [];
+    data.globalDimensions.forEach(function (item) {
+      if (!item) return;
+      var responseData = {
+        propCategory: item.propCategory,
+        type: item.type,
+        attrId: item.id || 0
+      };
+      if (item.propCategory === PropCategory.EventProp) {
+        responseData.attrName = item.label;
+      } else {
+        responseData.attrName = item.name;
+        responseData.category = item.category;
+        if (item.propCategory === PropCategory.UserProp && item.subtype) {
+          responseData.subtype = item.subtype;
+        }
+      }
+      globalDimensions.push(responseData);
+    });
+    newData.globalDimensions = globalDimensions;
+  }
+  newData.targets = data.targets;
+  newData.globalFilters = data.globalFilters;
+  return newData;
+}
+
+/**
+ * 去除数组中的undefined,以及筛选条件组件未选择完的条件
+ * @param source
+ * @returns
+ */
+export function removeEmptyValue(source) {
+  var data = _.cloneDeep(source);
+  var getValue = function getValue(formData) {
+    if (!formData) return formData;
+    var newData = [];
+    formData.forEach(function (item) {
+      if (item) {
+        if (item.filters) {
+          var conditions = getConditionList(item.filters.conditions);
+          if (conditions) {
+            item.filters.conditions = conditions;
+          } else {
+            item.filters = undefined;
+          }
+        }
+        newData.push(item);
+      }
+    });
+    if (newData.length) return newData.length ? newData : undefined;
+  };
+  data.targets = getValue(data.targets);
+  data.userGroup = getValue(data.userGroup);
+  data.globalDimensions = getValue(data.globalDimensions);
+  if (data.globalFilters) {
+    var conditions = getConditionList(data.globalFilters.conditions);
+    if (conditions) {
+      data.globalFilters.conditions = conditions;
+    } else {
+      data.globalFilters = undefined;
+    }
+  }
+  return data;
+}
+
+// 关系类型
+var OperateTypes;
+/**
+ * 筛选条件当未选择值时，不查询
+ * @param condition 筛选条件数组
+ * @returns
+ */
+(function (OperateTypes) {
+  OperateTypes["IsNull"] = "is null";
+  OperateTypes["IsNotNull"] = "is not null";
+})(OperateTypes || (OperateTypes = {}));
+function getConditionList(condition) {
+  if (!condition) return;
+  var conditionList = [];
+  condition.forEach(function (item) {
+    if (!item.attrId && !item.attrName) return;
+    if (!item.values || !item.values.length) {
+      if (item.operate === OperateTypes.IsNotNull || item.operate === OperateTypes.IsNull) {
+        conditionList.push(item);
+      }
+    } else {
+      conditionList.push(item);
+    }
+  });
+  return conditionList.length ? conditionList : undefined;
+}
+
+/**
+ * 指标发生改变，对全局属性和属性细分的数据影响
+ * @param data 表单数据
+ * @param eList 指标id列表
+ * @param eventGroupList 事件列表
+ * @returns
+ */
+export function targetChangeCallback(data, eList, eventGroupList) {
+  // 事件概览清空属性
+  if (eList[0] === -100) {
+    data.globalFilters = undefined;
+    data.globalDimensions = undefined;
+  } else {
+    if (data.globalFilters && data.globalFilters.conditions) {
+      var newFilters = [],
+        flag = true;
+      data.globalFilters.conditions.forEach(function (condition) {
+        if (condition) {
+          if (condition.propCategory === 'eventProp' && condition.attrId) {
+            // 事件属性
+            var hasExit = judgeAttrInEvents(eList, condition.attrId, eventGroupList);
+            if (hasExit) {
+              newFilters.push(condition);
+            } else {
+              flag = false;
+            }
+          } else {
+            newFilters.push(condition);
+          }
+        }
+      });
+      // 有属性不在当前事件属性中，则清空
+      if (!flag) {
+        data.globalFilters = undefined;
+      }
+    }
+    if (data.globalDimensions) {
+      var newDimensions = [],
+        _flag = true;
+      data.globalDimensions.forEach(function (condition) {
+        if (condition) {
+          if (condition.propCategory === 'eventProp') {
+            // 事件属性
+            var hasExit = condition.eventId ? eList.includes(condition.eventId) : judgeAttrInEvents(eList, condition.id, eventGroupList);
+            if (hasExit) {
+              newDimensions.push(condition);
+            } else {
+              _flag = false;
+            }
+          } else {
+            newDimensions.push(condition);
+          }
+        }
+      });
+      // 有属性不在当前事件属性中
+      if (!_flag) {
+        data.globalDimensions = undefined;
+      }
+    }
+  }
+  return data;
+}
+
+/**
+ * 判断属性是否在选择的事件中
+ * @param elds 指标id列表
+ * @param attrId 属性id
+ * @param eventGroupList 事件列表
+ * @returns
+ */
+var judgeAttrInEvents = function judgeAttrInEvents(elds, attrId, eventGroupList) {
+  var flag = false;
+  if (!eventGroupList) return false;
+  eventGroupList.forEach(function (group) {
+    group.eventList.forEach(function (event) {
+      if (elds.includes(event.id)) {
+        event.attrList.forEach(function (attr) {
+          if (attr.id === attrId) {
+            flag = true;
+            return;
+          }
+        });
+      }
+    });
+  });
+  return flag;
+};

package/dist/esm/style/image/ring.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" r="32" stroke-width="4" stroke="#165dff" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
+  <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
+</circle>
+<circle cx="50" cy="50" r="27" stroke-width="4" stroke="#85adfc" stroke-dasharray="42.411500823462205 42.411500823462205" stroke-dashoffset="42.411500823462205" fill="none" stroke-linecap="round">
+  <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;-360 50 50"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>