@easyv/charts 1.7.35 → 1.7.37

package/src/utils/index.js

@@ -1,812 +1,812 @@
-import { getColor } from '@easyv/utils';
-import { toFixed } from '@easyv/utils/lib/common/utils';
-import {
-  scaleOrdinal as ordinal,
-  range as sequence,
-  ascending,
-  descending,
-  sum,
-} from 'd3v7';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { toPath } from 'svg-points';
-
-const defaultBackground = '#000000';
-const defaultIcon = {
-  background: defaultBackground,
-};
-const defaultLineIcon = {
-  height: 2,
-  background: defaultBackground,
-};
-const SvgBackground = ({
-  fill: {
-    type,
-    pure,
-    linear: { angle, opacity, stops },
-  },
-  pattern: {
-    path = '',
-    width = '100%',
-    height = '100%',
-    boderColor: stroke = 'transparent',
-    boderWidth = 0,
-  },
-}) => {
-  return (
-    <svg
-      preserveAspectRatio='none'
-      xmlns='http://www.w3.org/2000/svg'
-      width={width}
-      height={height}
-    >
-      <defs>
-        <linearGradient
-          id='linearGradient'
-          x1='0%'
-          y1='0%'
-          x2='0%'
-          y2='100%'
-          gradientTransform={'rotate(' + (angle + 180) + ', 0.5, 0.5)'}
-        >
-          {stops.map(({ offset, color }, index) => (
-            <stop
-              key={index}
-              offset={offset + '%'}
-              stopColor={color}
-              stopOpacity={opacity}
-            />
-          ))}
-        </linearGradient>
-      </defs>
-      <path
-        d={path}
-        fill={type === 'pure' ? pure : 'url(#linearGradient)'}
-        stroke={stroke}
-        strokeWidth={boderWidth}
-      />
-    </svg>
-  );
-};
-const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
-  if (type == 'pure') {
-    return [
-      { color: pure, offset: 1 },
-      { color: pure, offset: 0 },
-    ];
-  }
-  return stops.map(({ color, offset }) => ({ color, offset: offset / 100 }));
-};
-const getMultiColorStr = (colors)=>{
-  const { stops, angle } = colors;
-  let result = 'linear-gradient(' + angle + 'deg, ';
-  const stops_ = JSON.parse(JSON.stringify(stops));
-  stops_.sort((a,b)=>a.offset-b.offset);
-  for(let i=0;i<stops_.length;i++){
-    const { color, offset } = stops_[i];
-    result += `${color} ${offset}%,`;
-  }
-  return result.slice(0,-1)+")";
-}
-const getIcon = (type, icon, lineType="solid") => {
-  switch (type) {
-    case 'area':
-    case 'line':
-      let color = icon.background;
-      return icon
-        ? {
-            ...defaultLineIcon,
-            ...icon,
-            minWidth: icon.width,
-            background:lineType=="solid"?color:`linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`
-          }
-        : defaultLineIcon;
-    default:
-      return icon
-        ? {
-            ...defaultIcon,
-            ...icon,
-            minWidth: icon.width,
-          }
-        : defaultIcon;
-  }
-};
-
-const dateFormat = (date, fmt) => {
-  date = new Date(date);
-  const o = {
-    'M+': date.getMonth() + 1, //月份
-    'D+': date.getDate(), //日
-    'H+': date.getHours(), //小时
-    'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
-    'm+': date.getMinutes(), //分
-    's+': date.getSeconds(), //秒
-    S: date.getMilliseconds(), //毫秒
-    X: '星期' + '日一二三四五六'.charAt(date.getDay()),
-    W: new Array(
-      'Sunday',
-      'Monday',
-      'Tuesday',
-      'Wednesday',
-      'Thursday',
-      'Friday',
-      'Saturday'
-    )[date.getDay()],
-    w: new Array('Sun.', 'Mon.', ' Tues.', 'Wed.', ' Thur.', 'Fri.', 'Sat.')[
-      date.getDay()
-    ],
-  };
-  if (/(Y+)/.test(fmt))
-    fmt = fmt.replace(
-      RegExp.$1,
-      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
-    );
-  for (var k in o)
-    if (new RegExp('(' + k + ')').test(fmt))
-      fmt = fmt.replace(
-        RegExp.$1,
-        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
-      );
-  return fmt;
-};
-const getBreakWord = (str, breakNumber) => {
-  const re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
-  return str.match(re);
-};
-
-//x轴标签逻辑
-const getTicksOfAxis = (domain, ticksCount, showLast) => {
-  let len = domain.length;
-  if (ticksCount < 2 || ticksCount > len) return domain;
-  let step = Math.floor((len - ticksCount) / (ticksCount - 1));
-  let ticksArr = [];
-  if (showLast) {
-    let count = ticksCount, gap = 0;
-    step = (len - 1) / (count - 1);
-    const maxGap = Math.max(count-2,len-count);
-    //循环计算出最接近count值且能让step为整数的值
-    if(!Number.isInteger(step)){
-      while(gap<=maxGap){
-        gap++;
-        const left = (len-1)/(count-gap-1), right = (len-1)/(count+gap-1);
-        if(Number.isInteger(left)){
-          step = left;
-          break;
-        }
-        if(Number.isInteger(right)){
-          step = right;
-          break;
-        }
-      }
-    }
-    if(!Number.isInteger(step)) step = 1; //如果找不到整数的step，直接取1，返回所有刻度
-    ticksArr = domain.filter(function (d, i) {
-      return i % step === 0;
-    });
-  }else{
-    ticksArr = domain.filter(function (d, i) {
-      return i % (step + 1) === 0;
-    });
-  }
-  return ticksArr;
-};
-
-const getTickCoord = ({
-  orientation,
-  coordinate,
-  tickSize = 6,
-  x = 0,
-  y = 0,
-}) => {
-  let x1, x2, y1, y2;
-  switch (orientation) {
-    case 'top':
-      x1 = x2 = coordinate;
-      y2 = y;
-      y1 = y2 - tickSize;
-      break;
-    case 'left':
-      y1 = y2 = coordinate;
-      x2 = x;
-      x1 = x2 - tickSize;
-      break;
-    case 'right':
-      y1 = y2 = coordinate;
-      x2 = x;
-      x1 = x2 + tickSize;
-      break;
-    default:
-      x1 = x2 = coordinate;
-      y2 = y;
-      y1 = y2 + tickSize;
-      break;
-  }
-  return { x1, x2, y1, y2 };
-};
-const getGridCoord = ({ orientation, coordinate, end }) => {
-  let x1, x2, y1, y2;
-  switch (orientation) {
-    case 'top':
-      x1 = x2 = coordinate;
-      y1 = 0;
-      y2 = end;
-      break;
-    case 'bottom':
-      x1 = x2 = coordinate;
-      y1 = 0;
-      y2 = end * -1;
-      break;
-    case 'left':
-      y1 = y2 = coordinate;
-      x1 = 0;
-      x2 = end;
-      break;
-    case 'right':
-      y1 = y2 = coordinate;
-      x1 = 0;
-      x2 = end * -1;
-      break;
-  }
-  return { x1, x2, y1, y2 };
-};
-
-const identity = (d) => d;
-
-//获取鼠标指针坐标
-const getMousePos = (evt, dom) => {
-  var rect = dom.getBoundingClientRect();
-  return {
-    x: evt.clientX - rect.left,
-    y: evt.clientY - rect.top,
-    w: rect.width,
-    h: rect.height,
-  };
-};
-
-const getFontStyle = (
-  { color, bold, italic, fontSize, fontFamily, letterSpacing },
-  type
-) => {
-  if (type == 'svg') {
-    return {
-      fontSize,
-      fontFamily,
-      letterSpacing,
-      fill: color,
-      fontWeight: bold ? 'bold' : 'normal',
-      fontStyle: italic ? 'italic' : 'normal',
-    };
-  }
-  return {
-    fontSize,
-    fontFamily,
-    letterSpacing,
-    color,
-    fontWeight: bold ? 'bold' : 'normal',
-    fontStyle: italic ? 'italic' : 'normal',
-  };
-};
-const formatFont=({ color, fill, bold, italic, ...rest },
-  type)=>{
-  if (type == 'svg') {
-    return {
-      fill: fill || color,
-      fontWeight: typeof bold=="string" ? bold : ( bold ? 'bold' : 'normal'),
-      fontStyle: typeof italic=="string"? italic : (italic ? 'italic' : 'normal'),
-      ...rest
-    };
-  }
-  return {
-    color:color|| fill,
-    fontWeight: typeof bold=="string" ? bold : ( bold ? 'bold' : 'normal'),
-    fontStyle: typeof italic=="string"? italic : (italic ? 'italic' : 'normal'),
-    ...rest
-  };
-}
-
-const getMargin = ({ marginTop, marginRight, marginBottom, marginLeft }) =>
-  marginTop +
-  'px ' +
-  marginRight +
-  'px ' +
-  marginBottom +
-  'px ' +
-  marginLeft +
-  'px';
-const getTranslate3d = ({ x = 0, y = 0, z = 0 }) =>
-  'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
-const getTranslate2d = ({ x = 0, y = 0 }) => 'translate(' + x + ', ' + y + ')';
-function band() {
-  var scale = ordinal().unknown(undefined),
-    domain = scale.domain,
-    ordinalRange = scale.range,
-    r0 = 0,
-    r1 = 1,
-    step,
-    bandwidth,
-    round = false,
-    paddingInner = 0,
-    paddingOuter = 0,
-    // seriesPaddingInner = 0,
-    // seriesPaddingOuter = 0,
-    // seriesLength = 0,
-    align = 0.5;
-
-  delete scale.unknown;
-
-  function rescale() {
-    var n = domain().length,
-      reverse = r1 < r0,
-      start = reverse ? r1 : r0,
-      stop = reverse ? r0 : r1;
-    step = (stop - start) / Math.max(1, n - paddingOuter * 2);
-    if (round) step = Math.floor(step);
-    start += (stop - start - step * n) * align;
-    bandwidth = step;
-    if (round) (start = Math.round(start)), (bandwidth = Math.round(bandwidth));
-    var values = sequence(n).map(function (i) {
-      return start + step * i + step / 2;
-    });
-    return ordinalRange(reverse ? values.reverse() : values);
-  }
-
-  scale.domain = function (_) {
-    return arguments.length ? (domain(_), rescale()) : domain();
-  };
-
-  scale.range = function (_) {
-    return arguments.length
-      ? (([r0, r1] = _), (r0 = +r0), (r1 = +r1), rescale())
-      : [r0, r1];
-  };
-
-  scale.rangeRound = function (_) {
-    return ([r0, r1] = _), (r0 = +r0), (r1 = +r1), (round = true), rescale();
-  };
-
-  scale.bandwidth = function () {
-    return bandwidth;
-  };
-
-  scale.step = function () {
-    return step;
-  };
-
-  scale.seriesBandwidth = function () {
-    return seriesBandwidth;
-  };
-
-  scale.seriesStep = function () {
-    return seriesStep;
-  };
-
-  scale.round = function (_) {
-    return arguments.length ? ((round = !!_), rescale()) : round;
-  };
-
-  scale.padding = function (_) {
-    return arguments.length
-      ? ((paddingInner = Math.min(1, (paddingOuter = +_))), rescale())
-      : paddingInner;
-  };
-
-  scale.paddingInner = function (_) {
-    return arguments.length
-      ? ((paddingInner = Math.min(1, _)), rescale())
-      : paddingInner;
-  };
-
-  scale.paddingOuter = function (_) {
-    return arguments.length ? ((paddingOuter = +_), rescale()) : paddingOuter;
-  };
-
-  scale.align = function (_) {
-    return arguments.length
-      ? ((align = Math.max(0, Math.min(1, _))), rescale())
-      : align;
-  };
-
-  scale.copy = function () {
-    return band(domain(), [r0, r1])
-      .round(round)
-      .paddingInner(paddingInner)
-      .paddingOuter(paddingOuter)
-      .align(align);
-  };
-
-  return initRange.apply(rescale(), arguments);
-}
-
-function initRange(domain, range) {
-  switch (arguments.length) {
-    case 0:
-      break;
-    case 1:
-      this.range(domain);
-      break;
-    default:
-      this.range(range).domain(domain);
-      break;
-  }
-  return this;
-}
-
-const getStacks = (series) => {
-  const tmp = [];
-  series.forEach(({ type, stack, yOrZ }, name) => {
-    const current = tmp.find(
-      ({ type: _type, stack: _stack, yOrZ: _yOrZ }) =>
-        _type == type && stack && _stack == stack && yOrZ == _yOrZ
-    );
-    if (!current) {
-      const common = {
-        type,
-        stack,
-        positive: 0,
-        negative: 0,
-        yOrZ,
-        s: [name],
-      };
-      if (type === 'band') {
-        const index = tmp.filter((item) => item.type === 'band').length;
-        tmp.push({
-          ...common,
-          index,
-        });
-      } else {
-        tmp.push({
-          ...common,
-          index: 0,
-        });
-      }
-    } else {
-      current.s.push(name);
-    }
-  });
-  return tmp;
-};
-
-const dataYOrZ = (data, { y: seriesY, z: seriesZ }) => {
-  const tmp = {
-    y: [],
-    z: [],
-  };
-  for (let i = 0, j = data.length; i < j; i++) {
-    const d = data[i];
-    if (seriesY.get(d.s)) {
-      tmp.y.push(d);
-      continue;
-    }
-    if (seriesZ.get(d.s)) {
-      tmp.z.push(d);
-    }
-  }
-  return tmp;
-};
-
-const seriesYOrZ = (series) => {
-  const y = new Map();
-  const z = new Map();
-  series.forEach((value, key) => {
-    if (value.yOrZ === 'y') {
-      y.set(key, value);
-    } else {
-      z.set(key, value);
-    }
-  });
-  return { y, z };
-};
-
-const resetStacks = (stacks) => {
-  stacks.forEach((stack) => {
-    stack.positive = 0;
-    stack.negative = 0;
-  });
-};
-
-const getCurrentStack = (stack, stackMap) =>
-  stackMap.find(
-    ({ stack: _stack, type: _type, yOrZ: _yOrZ, s: _s }) =>
-      _type == stack.type &&
-      _stack == stack.stack &&
-      _yOrZ == stack.yOrZ &&
-      _s.includes(stack.name)
-  );
-
-const getBandBackground = (pattern, fill) => {
-  if (!(pattern && pattern.path)) return getColor(fill);
-  try{
-    const { backgroundSize = '100% 100%', ..._pattern } = pattern;
-    return (
-      'center top / ' +
-      backgroundSize +
-      ' url("data:image/svg+xml,' +
-      encodeURIComponent(
-        renderToStaticMarkup(<SvgBackground fill={fill} pattern={_pattern} />)
-      ) +
-      '")'
-    );
-  }catch(e){}
-  return "";
-};
-const getBandwidth = (step, paddingOuter) => step * (1 - paddingOuter);
-
-const getBandSeriesStepAndWidth = ({ width, paddingInner, bandLength }) => {
-  const seriesStep = width / (bandLength == 0 ? 1 : bandLength);
-  const seriesWidth = seriesStep * (1 - paddingInner);
-  return {
-    seriesStep,
-    seriesWidth,
-  };
-};
-
-const getSeriesInfo = ({
-  step,
-  bandLength = 1,
-  paddingInner = 0,
-  paddingOuter = 0,
-}) => {
-  if (bandLength == 0)
-    return {
-      seriesWidth: step,
-      seriesStep: step,
-      seriesStart: 0,
-      width: step,
-    };
-  const _step =
-    step / (bandLength + paddingOuter * 2 + paddingInner * (bandLength - 1));
-  return {
-    seriesWidth: _step,
-    seriesStep: (1 + paddingInner) * _step,
-    seriesStart: paddingOuter * _step,
-    width: step - paddingOuter * 2 * _step,
-  };
-};
-
-const isValidHttpUrl = (string) => {
-  let url;
-
-  try {
-    url = new URL(string);
-  } catch (_) {
-    return false;
-  }
-
-  return url.protocol === 'http:' || url.protocol === 'https:';
-};
-
-const getChildren = (svgStr) => {
-  const wrapper = document.createElement('div');
-  wrapper.innerHTML = svgStr;
-  const { childNodes } = wrapper;
-  const svgDom = [...childNodes].find((item) => item.tagName === 'svg');
-
-  if (!!svgDom) {
-    return [...svgDom.childNodes];
-  }
-
-  return null;
-};
-
-const filterChildren = (children, tagNames) => {
-  return children.reduce((prev, node) => {
-    let { nodeName } = node;
-
-    if (tagNames.indexOf(nodeName) > -1) {
-      if (nodeName === 'g') {
-        return filterChildren([...node.childNodes], tagNames);
-      } else {
-        prev.push(node);
-      }
-    }
-
-    return prev;
-  }, []);
-};
-
-const getDomPath = (node) => {
-  switch (node.nodeName) {
-    case 'circle':
-      return toPath({
-        type: 'circle',
-        cx: +node.getAttribute('cx') || 0,
-        cy: +node.getAttribute('cy') || 0,
-        r: +node.getAttribute('r') || 0,
-      });
-
-    case 'ellipse':
-      return toPath({
-        type: 'ellipse',
-        cx: +node.getAttribute('cx') || 0,
-        cy: +node.getAttribute('cy') || 0,
-        rx: +node.getAttribute('rx') || 0,
-        ry: +node.getAttribute('ry') || 0,
-      });
-
-    case 'line':
-      return toPath({
-        type: 'line',
-        x1: +node.getAttribute('x1') || 0,
-        x2: +node.getAttribute('x2') || 0,
-        y1: +node.getAttribute('y1') || 0,
-        y2: +node.getAttribute('y2') || 0,
-      });
-
-    case 'path':
-      return toPath({
-        type: 'path',
-        d: node.getAttribute('d') || '',
-      });
-
-    case 'polygon':
-      return toPath({
-        type: 'polyline',
-        points: node.getAttribute('points') || '',
-      });
-
-    case 'polyline':
-      return toPath({
-        type: 'polyline',
-        points: node.getAttribute('points') || '',
-      });
-
-    case 'rect':
-      return toPath({
-        type: 'rect',
-        height: +node.getAttribute('height') || 0,
-        width: +node.getAttribute('width') || 0,
-        x: +node.getAttribute('x') || 0,
-        y: +node.getAttribute('y') || 0,
-        rx: +node.getAttribute('rx') || 0,
-        ry: +node.getAttribute('ry') || 0,
-      });
-  }
-};
-
-const sortPie = (data, order) => {
-  const _data = data.map((item) => ({ ...item }));
-  switch (order) {
-    case '':
-      _data.sort(({ index: a }, { index: b }) => ascending(a, b));
-      break;
-    case 'desc':
-      _data.sort(({ value: a }, { value: b }) => descending(a, b));
-      break;
-    case 'asc':
-      _data.sort(({ value: a }, { value: b }) => ascending(a, b));
-      break;
-  }
-  return _data;
-};
-
-// const getDataWithPercent = (data = [], precision = 0, type) => {
-//   const digits = Math.pow(10, precision);
-//   const targetSeats = digits * 100;
-
-//   const total = sum(data, (d) => d.value);
-
-//   const votesPerQuota = data.map((d, index) => ({
-//     ...d,
-//     vote: Math.round((d.value / total) * digits * 100),
-//     index,
-//   }));
-//   const currentSum = sum(votesPerQuota, (d) => d.vote);
-//   const remainder = targetSeats - currentSum;
-//   console.log(type+":",votesPerQuota, toFixed);
-//   votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
-
-//   const tmp = votesPerQuota.map(({ vote, ...data }, index) => ({
-//     ...data,
-//     percent: toFixed((vote + (index < remainder ? 1 : 0)) / digits, precision),
-//   }));
-
-//   return tmp;
-// };
-
-const getDataWithPercent = (data = [], precision = 0) => {
-  let objData = [];
-  function getPercentWithPrecision(valueList, idx, precision) {
-    if (!valueList[idx]) {
-      return 0;
-    }
-    const sum = valueList.reduce( function (acc, val) {
-      return acc + val.value;
-    }, 0);
-    if (sum === 0) {
-      return 0;
-    }
-    const digits = Math.pow(10, precision);
-    const votesPerQuota = valueList.map(function (val) {
-      return val.value / sum * digits * 100;
-    });
-    const targetSeats = digits * 100;
-    const seats = votesPerQuota.map(function (votes) {
-      return Math.floor(votes);
-    });
-    let currentSum = seats.reduce( function (acc, val) {
-      return acc + val;
-    }, 0);
-    const remainder = votesPerQuota.map(function (votes, idx) {
-      return votes - seats[idx];
-    });
-    while (currentSum < targetSeats) {
-      let max = Number.NEGATIVE_INFINITY;
-      let maxId = null;
-      for (let i = 0, len = remainder.length; i < len; ++i) {
-        if (remainder[i] > max) {
-          max = remainder[i];
-          maxId = i;
-        }
-      }
-      ++seats[maxId];
-      remainder[maxId] = 0;
-      ++currentSum;
-    }
-    return seats[idx] / digits;
-  }
-  data.forEach((d, i) => {
-    objData.push({
-      ...d,
-      percent: getPercentWithPrecision(data, i, precision)
-    })
-  });
-  return objData
-};
-
-const excludeTypes = ['array', 'object', 'group', 'modal', 'colors'];
-const reduceConfig = (config = []) => {
-  if (!Array.isArray(config)) {
-    return config;
-  }
-  let output = {};
-  for (let i = 0, len = config.length; i < len; i++) {
-    let type = config[i]._type;
-
-    output[config[i]._name] =
-      type && !excludeTypes.includes(type)
-        ? config[i]._value
-        : reduceConfig(config[i]._value);
-  }
-  return output;
-};
-
-//限制value的值在min和max之间
-const mathR=(value, range)=>{
-  const [min,max] = range;
-  return Math.max(min,Math.min(value,max));
-}
-
-export {
-  dateFormat,
-  getBreakWord,
-  getTicksOfAxis,
-  getTickCoord,
-  getGridCoord,
-  identity,
-  getMousePos,
-  getFontStyle,
-  formatFont,
-  getMargin,
-  getTranslate3d,
-  getTranslate2d,
-  band,
-  getIcon,
-  getColorList,
-  getMultiColorStr,
-  getStacks,
-  dataYOrZ,
-  seriesYOrZ,
-  resetStacks,
-  getCurrentStack,
-  getBandBackground,
-  getBandwidth,
-  getBandSeriesStepAndWidth,
-  isValidHttpUrl,
-  getChildren,
-  filterChildren,
-  getDomPath,
-  sortPie,
-  getDataWithPercent,
-  reduceConfig,
-  getSeriesInfo,
-  mathR
-};
+import { getColor } from '@easyv/utils';
+import { toFixed } from '@easyv/utils/lib/common/utils';
+import {
+  scaleOrdinal as ordinal,
+  range as sequence,
+  ascending,
+  descending,
+  sum,
+} from 'd3v7';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { toPath } from 'svg-points';
+
+const defaultBackground = '#000000';
+const defaultIcon = {
+  background: defaultBackground,
+};
+const defaultLineIcon = {
+  height: 2,
+  background: defaultBackground,
+};
+const SvgBackground = ({
+  fill: {
+    type,
+    pure,
+    linear: { angle, opacity, stops },
+  },
+  pattern: {
+    path = '',
+    width = '100%',
+    height = '100%',
+    boderColor: stroke = 'transparent',
+    boderWidth = 0,
+  },
+}) => {
+  return (
+    <svg
+      preserveAspectRatio='none'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width}
+      height={height}
+    >
+      <defs>
+        <linearGradient
+          id='linearGradient'
+          x1='0%'
+          y1='0%'
+          x2='0%'
+          y2='100%'
+          gradientTransform={'rotate(' + (angle + 180) + ', 0.5, 0.5)'}
+        >
+          {stops.map(({ offset, color }, index) => (
+            <stop
+              key={index}
+              offset={offset + '%'}
+              stopColor={color}
+              stopOpacity={opacity}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path
+        d={path}
+        fill={type === 'pure' ? pure : 'url(#linearGradient)'}
+        stroke={stroke}
+        strokeWidth={boderWidth}
+      />
+    </svg>
+  );
+};
+const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
+  if (type == 'pure') {
+    return [
+      { color: pure, offset: 1 },
+      { color: pure, offset: 0 },
+    ];
+  }
+  return stops.map(({ color, offset }) => ({ color, offset: offset / 100 }));
+};
+const getMultiColorStr = (colors)=>{
+  const { stops, angle } = colors;
+  let result = 'linear-gradient(' + angle + 'deg, ';
+  const stops_ = JSON.parse(JSON.stringify(stops));
+  stops_.sort((a,b)=>a.offset-b.offset);
+  for(let i=0;i<stops_.length;i++){
+    const { color, offset } = stops_[i];
+    result += `${color} ${offset}%,`;
+  }
+  return result.slice(0,-1)+")";
+}
+const getIcon = (type, icon, lineType="solid") => {
+  switch (type) {
+    case 'area':
+    case 'line':
+      let color = icon.background;
+      return icon
+        ? {
+            ...defaultLineIcon,
+            ...icon,
+            minWidth: icon.width,
+            background:lineType=="solid"?color:`linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`
+          }
+        : defaultLineIcon;
+    default:
+      return icon
+        ? {
+            ...defaultIcon,
+            ...icon,
+            minWidth: icon.width,
+          }
+        : defaultIcon;
+  }
+};
+
+const dateFormat = (date, fmt) => {
+  date = new Date(date);
+  const o = {
+    'M+': date.getMonth() + 1, //月份
+    'D+': date.getDate(), //日
+    'H+': date.getHours(), //小时
+    'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
+    'm+': date.getMinutes(), //分
+    's+': date.getSeconds(), //秒
+    S: date.getMilliseconds(), //毫秒
+    X: '星期' + '日一二三四五六'.charAt(date.getDay()),
+    W: new Array(
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday'
+    )[date.getDay()],
+    w: new Array('Sun.', 'Mon.', ' Tues.', 'Wed.', ' Thur.', 'Fri.', 'Sat.')[
+      date.getDay()
+    ],
+  };
+  if (/(Y+)/.test(fmt))
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+    );
+  for (var k in o)
+    if (new RegExp('(' + k + ')').test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+      );
+  return fmt;
+};
+const getBreakWord = (str, breakNumber) => {
+  const re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
+  return str.match(re);
+};
+
+//x轴标签逻辑
+const getTicksOfAxis = (domain, ticksCount, showLast) => {
+  let len = domain.length;
+  if (ticksCount < 2 || ticksCount > len) return domain;
+  let step = Math.floor((len - ticksCount) / (ticksCount - 1));
+  let ticksArr = [];
+  if (showLast) {
+    let count = ticksCount, gap = 0;
+    step = (len - 1) / (count - 1);
+    const maxGap = Math.max(count-2,len-count);
+    //循环计算出最接近count值且能让step为整数的值
+    if(!Number.isInteger(step)){
+      while(gap<=maxGap){
+        gap++;
+        const left = (len-1)/(count-gap-1), right = (len-1)/(count+gap-1);
+        if(Number.isInteger(left)){
+          step = left;
+          break;
+        }
+        if(Number.isInteger(right)){
+          step = right;
+          break;
+        }
+      }
+    }
+    if(!Number.isInteger(step)) step = 1; //如果找不到整数的step，直接取1，返回所有刻度
+    ticksArr = domain.filter(function (d, i) {
+      return i % step === 0;
+    });
+  }else{
+    ticksArr = domain.filter(function (d, i) {
+      return i % (step + 1) === 0;
+    });
+  }
+  return ticksArr;
+};
+
+const getTickCoord = ({
+  orientation,
+  coordinate,
+  tickSize = 6,
+  x = 0,
+  y = 0,
+}) => {
+  let x1, x2, y1, y2;
+  switch (orientation) {
+    case 'top':
+      x1 = x2 = coordinate;
+      y2 = y;
+      y1 = y2 - tickSize;
+      break;
+    case 'left':
+      y1 = y2 = coordinate;
+      x2 = x;
+      x1 = x2 - tickSize;
+      break;
+    case 'right':
+      y1 = y2 = coordinate;
+      x2 = x;
+      x1 = x2 + tickSize;
+      break;
+    default:
+      x1 = x2 = coordinate;
+      y2 = y;
+      y1 = y2 + tickSize;
+      break;
+  }
+  return { x1, x2, y1, y2 };
+};
+const getGridCoord = ({ orientation, coordinate, end }) => {
+  let x1, x2, y1, y2;
+  switch (orientation) {
+    case 'top':
+      x1 = x2 = coordinate;
+      y1 = 0;
+      y2 = end;
+      break;
+    case 'bottom':
+      x1 = x2 = coordinate;
+      y1 = 0;
+      y2 = end * -1;
+      break;
+    case 'left':
+      y1 = y2 = coordinate;
+      x1 = 0;
+      x2 = end;
+      break;
+    case 'right':
+      y1 = y2 = coordinate;
+      x1 = 0;
+      x2 = end * -1;
+      break;
+  }
+  return { x1, x2, y1, y2 };
+};
+
+const identity = (d) => d;
+
+//获取鼠标指针坐标
+const getMousePos = (evt, dom) => {
+  var rect = dom.getBoundingClientRect();
+  return {
+    x: evt.clientX - rect.left,
+    y: evt.clientY - rect.top,
+    w: rect.width,
+    h: rect.height,
+  };
+};
+
+const getFontStyle = (
+  { color, bold, italic, fontSize, fontFamily, letterSpacing },
+  type
+) => {
+  if (type == 'svg') {
+    return {
+      fontSize,
+      fontFamily,
+      letterSpacing,
+      fill: color,
+      fontWeight: bold ? 'bold' : 'normal',
+      fontStyle: italic ? 'italic' : 'normal',
+    };
+  }
+  return {
+    fontSize,
+    fontFamily,
+    letterSpacing,
+    color,
+    fontWeight: bold ? 'bold' : 'normal',
+    fontStyle: italic ? 'italic' : 'normal',
+  };
+};
+const formatFont=({ color, fill, bold, italic, ...rest },
+  type)=>{
+  if (type == 'svg') {
+    return {
+      fill: fill || color,
+      fontWeight: typeof bold=="string" ? bold : ( bold ? 'bold' : 'normal'),
+      fontStyle: typeof italic=="string"? italic : (italic ? 'italic' : 'normal'),
+      ...rest
+    };
+  }
+  return {
+    color:color|| fill,
+    fontWeight: typeof bold=="string" ? bold : ( bold ? 'bold' : 'normal'),
+    fontStyle: typeof italic=="string"? italic : (italic ? 'italic' : 'normal'),
+    ...rest
+  };
+}
+
+const getMargin = ({ marginTop, marginRight, marginBottom, marginLeft }) =>
+  marginTop +
+  'px ' +
+  marginRight +
+  'px ' +
+  marginBottom +
+  'px ' +
+  marginLeft +
+  'px';
+const getTranslate3d = ({ x = 0, y = 0, z = 0 }) =>
+  'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
+const getTranslate2d = ({ x = 0, y = 0 }) => 'translate(' + x + ', ' + y + ')';
+function band() {
+  var scale = ordinal().unknown(undefined),
+    domain = scale.domain,
+    ordinalRange = scale.range,
+    r0 = 0,
+    r1 = 1,
+    step,
+    bandwidth,
+    round = false,
+    paddingInner = 0,
+    paddingOuter = 0,
+    // seriesPaddingInner = 0,
+    // seriesPaddingOuter = 0,
+    // seriesLength = 0,
+    align = 0.5;
+
+  delete scale.unknown;
+
+  function rescale() {
+    var n = domain().length,
+      reverse = r1 < r0,
+      start = reverse ? r1 : r0,
+      stop = reverse ? r0 : r1;
+    step = (stop - start) / Math.max(1, n - paddingOuter * 2);
+    if (round) step = Math.floor(step);
+    start += (stop - start - step * n) * align;
+    bandwidth = step;
+    if (round) (start = Math.round(start)), (bandwidth = Math.round(bandwidth));
+    var values = sequence(n).map(function (i) {
+      return start + step * i + step / 2;
+    });
+    return ordinalRange(reverse ? values.reverse() : values);
+  }
+
+  scale.domain = function (_) {
+    return arguments.length ? (domain(_), rescale()) : domain();
+  };
+
+  scale.range = function (_) {
+    return arguments.length
+      ? (([r0, r1] = _), (r0 = +r0), (r1 = +r1), rescale())
+      : [r0, r1];
+  };
+
+  scale.rangeRound = function (_) {
+    return ([r0, r1] = _), (r0 = +r0), (r1 = +r1), (round = true), rescale();
+  };
+
+  scale.bandwidth = function () {
+    return bandwidth;
+  };
+
+  scale.step = function () {
+    return step;
+  };
+
+  scale.seriesBandwidth = function () {
+    return seriesBandwidth;
+  };
+
+  scale.seriesStep = function () {
+    return seriesStep;
+  };
+
+  scale.round = function (_) {
+    return arguments.length ? ((round = !!_), rescale()) : round;
+  };
+
+  scale.padding = function (_) {
+    return arguments.length
+      ? ((paddingInner = Math.min(1, (paddingOuter = +_))), rescale())
+      : paddingInner;
+  };
+
+  scale.paddingInner = function (_) {
+    return arguments.length
+      ? ((paddingInner = Math.min(1, _)), rescale())
+      : paddingInner;
+  };
+
+  scale.paddingOuter = function (_) {
+    return arguments.length ? ((paddingOuter = +_), rescale()) : paddingOuter;
+  };
+
+  scale.align = function (_) {
+    return arguments.length
+      ? ((align = Math.max(0, Math.min(1, _))), rescale())
+      : align;
+  };
+
+  scale.copy = function () {
+    return band(domain(), [r0, r1])
+      .round(round)
+      .paddingInner(paddingInner)
+      .paddingOuter(paddingOuter)
+      .align(align);
+  };
+
+  return initRange.apply(rescale(), arguments);
+}
+
+function initRange(domain, range) {
+  switch (arguments.length) {
+    case 0:
+      break;
+    case 1:
+      this.range(domain);
+      break;
+    default:
+      this.range(range).domain(domain);
+      break;
+  }
+  return this;
+}
+
+const getStacks = (series) => {
+  const tmp = [];
+  series.forEach(({ type, stack, yOrZ }, name) => {
+    const current = tmp.find(
+      ({ type: _type, stack: _stack, yOrZ: _yOrZ }) =>
+        _type == type && stack && _stack == stack && yOrZ == _yOrZ
+    );
+    if (!current) {
+      const common = {
+        type,
+        stack,
+        positive: 0,
+        negative: 0,
+        yOrZ,
+        s: [name],
+      };
+      if (type === 'band') {
+        const index = tmp.filter((item) => item.type === 'band').length;
+        tmp.push({
+          ...common,
+          index,
+        });
+      } else {
+        tmp.push({
+          ...common,
+          index: 0,
+        });
+      }
+    } else {
+      current.s.push(name);
+    }
+  });
+  return tmp;
+};
+
+const dataYOrZ = (data, { y: seriesY, z: seriesZ }) => {
+  const tmp = {
+    y: [],
+    z: [],
+  };
+  for (let i = 0, j = data.length; i < j; i++) {
+    const d = data[i];
+    if (seriesY.get(d.s)) {
+      tmp.y.push(d);
+      continue;
+    }
+    if (seriesZ.get(d.s)) {
+      tmp.z.push(d);
+    }
+  }
+  return tmp;
+};
+
+const seriesYOrZ = (series) => {
+  const y = new Map();
+  const z = new Map();
+  series.forEach((value, key) => {
+    if (value.yOrZ === 'y') {
+      y.set(key, value);
+    } else {
+      z.set(key, value);
+    }
+  });
+  return { y, z };
+};
+
+const resetStacks = (stacks) => {
+  stacks.forEach((stack) => {
+    stack.positive = 0;
+    stack.negative = 0;
+  });
+};
+
+const getCurrentStack = (stack, stackMap) =>
+  stackMap.find(
+    ({ stack: _stack, type: _type, yOrZ: _yOrZ, s: _s }) =>
+      _type == stack.type &&
+      _stack == stack.stack &&
+      _yOrZ == stack.yOrZ &&
+      _s.includes(stack.name)
+  );
+
+const getBandBackground = (pattern, fill) => {
+  if (!(pattern && pattern.path)) return getColor(fill);
+  try{
+    const { backgroundSize = '100% 100%', ..._pattern } = pattern;
+    return (
+      'center top / ' +
+      backgroundSize +
+      ' url("data:image/svg+xml,' +
+      encodeURIComponent(
+        renderToStaticMarkup(<SvgBackground fill={fill} pattern={_pattern} />)
+      ) +
+      '")'
+    );
+  }catch(e){}
+  return "";
+};
+const getBandwidth = (step, paddingOuter) => step * (1 - paddingOuter);
+
+const getBandSeriesStepAndWidth = ({ width, paddingInner, bandLength }) => {
+  const seriesStep = width / (bandLength == 0 ? 1 : bandLength);
+  const seriesWidth = seriesStep * (1 - paddingInner);
+  return {
+    seriesStep,
+    seriesWidth,
+  };
+};
+
+const getSeriesInfo = ({
+  step,
+  bandLength = 1,
+  paddingInner = 0,
+  paddingOuter = 0,
+}) => {
+  if (bandLength == 0)
+    return {
+      seriesWidth: step,
+      seriesStep: step,
+      seriesStart: 0,
+      width: step,
+    };
+  const _step =
+    step / (bandLength + paddingOuter * 2 + paddingInner * (bandLength - 1));
+  return {
+    seriesWidth: _step,
+    seriesStep: (1 + paddingInner) * _step,
+    seriesStart: paddingOuter * _step,
+    width: step - paddingOuter * 2 * _step,
+  };
+};
+
+const isValidHttpUrl = (string) => {
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === 'http:' || url.protocol === 'https:';
+};
+
+const getChildren = (svgStr) => {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = svgStr;
+  const { childNodes } = wrapper;
+  const svgDom = [...childNodes].find((item) => item.tagName === 'svg');
+
+  if (!!svgDom) {
+    return [...svgDom.childNodes];
+  }
+
+  return null;
+};
+
+const filterChildren = (children, tagNames) => {
+  return children.reduce((prev, node) => {
+    let { nodeName } = node;
+
+    if (tagNames.indexOf(nodeName) > -1) {
+      if (nodeName === 'g') {
+        return filterChildren([...node.childNodes], tagNames);
+      } else {
+        prev.push(node);
+      }
+    }
+
+    return prev;
+  }, []);
+};
+
+const getDomPath = (node) => {
+  switch (node.nodeName) {
+    case 'circle':
+      return toPath({
+        type: 'circle',
+        cx: +node.getAttribute('cx') || 0,
+        cy: +node.getAttribute('cy') || 0,
+        r: +node.getAttribute('r') || 0,
+      });
+
+    case 'ellipse':
+      return toPath({
+        type: 'ellipse',
+        cx: +node.getAttribute('cx') || 0,
+        cy: +node.getAttribute('cy') || 0,
+        rx: +node.getAttribute('rx') || 0,
+        ry: +node.getAttribute('ry') || 0,
+      });
+
+    case 'line':
+      return toPath({
+        type: 'line',
+        x1: +node.getAttribute('x1') || 0,
+        x2: +node.getAttribute('x2') || 0,
+        y1: +node.getAttribute('y1') || 0,
+        y2: +node.getAttribute('y2') || 0,
+      });
+
+    case 'path':
+      return toPath({
+        type: 'path',
+        d: node.getAttribute('d') || '',
+      });
+
+    case 'polygon':
+      return toPath({
+        type: 'polyline',
+        points: node.getAttribute('points') || '',
+      });
+
+    case 'polyline':
+      return toPath({
+        type: 'polyline',
+        points: node.getAttribute('points') || '',
+      });
+
+    case 'rect':
+      return toPath({
+        type: 'rect',
+        height: +node.getAttribute('height') || 0,
+        width: +node.getAttribute('width') || 0,
+        x: +node.getAttribute('x') || 0,
+        y: +node.getAttribute('y') || 0,
+        rx: +node.getAttribute('rx') || 0,
+        ry: +node.getAttribute('ry') || 0,
+      });
+  }
+};
+
+const sortPie = (data, order) => {
+  const _data = data.map((item) => ({ ...item }));
+  switch (order) {
+    case '':
+      _data.sort(({ index: a }, { index: b }) => ascending(a, b));
+      break;
+    case 'desc':
+      _data.sort(({ value: a }, { value: b }) => descending(a, b));
+      break;
+    case 'asc':
+      _data.sort(({ value: a }, { value: b }) => ascending(a, b));
+      break;
+  }
+  return _data;
+};
+
+// const getDataWithPercent = (data = [], precision = 0, type) => {
+//   const digits = Math.pow(10, precision);
+//   const targetSeats = digits * 100;
+
+//   const total = sum(data, (d) => d.value);
+
+//   const votesPerQuota = data.map((d, index) => ({
+//     ...d,
+//     vote: Math.round((d.value / total) * digits * 100),
+//     index,
+//   }));
+//   const currentSum = sum(votesPerQuota, (d) => d.vote);
+//   const remainder = targetSeats - currentSum;
+//   console.log(type+":",votesPerQuota, toFixed);
+//   votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
+
+//   const tmp = votesPerQuota.map(({ vote, ...data }, index) => ({
+//     ...data,
+//     percent: toFixed((vote + (index < remainder ? 1 : 0)) / digits, precision),
+//   }));
+
+//   return tmp;
+// };
+
+const getDataWithPercent = (data = [], precision = 0) => {
+  let objData = [];
+  function getPercentWithPrecision(valueList, idx, precision) {
+    if (!valueList[idx]) {
+      return 0;
+    }
+    const sum = valueList.reduce( function (acc, val) {
+      return acc + val.value;
+    }, 0);
+    if (sum === 0) {
+      return 0;
+    }
+    const digits = Math.pow(10, precision);
+    const votesPerQuota = valueList.map(function (val) {
+      return val.value / sum * digits * 100;
+    });
+    const targetSeats = digits * 100;
+    const seats = votesPerQuota.map(function (votes) {
+      return Math.floor(votes);
+    });
+    let currentSum = seats.reduce( function (acc, val) {
+      return acc + val;
+    }, 0);
+    const remainder = votesPerQuota.map(function (votes, idx) {
+      return votes - seats[idx];
+    });
+    while (currentSum < targetSeats) {
+      let max = Number.NEGATIVE_INFINITY;
+      let maxId = null;
+      for (let i = 0, len = remainder.length; i < len; ++i) {
+        if (remainder[i] > max) {
+          max = remainder[i];
+          maxId = i;
+        }
+      }
+      ++seats[maxId];
+      remainder[maxId] = 0;
+      ++currentSum;
+    }
+    return seats[idx] / digits;
+  }
+  data.forEach((d, i) => {
+    objData.push({
+      ...d,
+      percent: getPercentWithPrecision(data, i, precision)
+    })
+  });
+  return objData
+};
+
+const excludeTypes = ['array', 'object', 'group', 'modal', 'colors'];
+const reduceConfig = (config = []) => {
+  if (!Array.isArray(config)) {
+    return config;
+  }
+  let output = {};
+  for (let i = 0, len = config.length; i < len; i++) {
+    let type = config[i]._type;
+
+    output[config[i]._name] =
+      type && !excludeTypes.includes(type)
+        ? config[i]._value
+        : reduceConfig(config[i]._value);
+  }
+  return output;
+};
+
+//限制value的值在min和max之间
+const mathR=(value, range)=>{
+  const [min,max] = range;
+  return Math.max(min,Math.min(value,max));
+}
+
+export {
+  dateFormat,
+  getBreakWord,
+  getTicksOfAxis,
+  getTickCoord,
+  getGridCoord,
+  identity,
+  getMousePos,
+  getFontStyle,
+  formatFont,
+  getMargin,
+  getTranslate3d,
+  getTranslate2d,
+  band,
+  getIcon,
+  getColorList,
+  getMultiColorStr,
+  getStacks,
+  dataYOrZ,
+  seriesYOrZ,
+  resetStacks,
+  getCurrentStack,
+  getBandBackground,
+  getBandwidth,
+  getBandSeriesStepAndWidth,
+  isValidHttpUrl,
+  getChildren,
+  filterChildren,
+  getDomPath,
+  sortPie,
+  getDataWithPercent,
+  reduceConfig,
+  getSeriesInfo,
+  mathR
+};