@easyv/charts 1.1.0 → 1.1.4

package/src/utils/index.js

@@ -1,692 +1,696 @@
-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 defaultSize = 10;
-const defaultBackground = '#000000';
-const defaultIcon = {
-  width: defaultSize,
-  height: defaultSize,
-  background: defaultBackground,
-};
-const defaultLineIcon = {
-  width: defaultSize,
-  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 + ', 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 getIcon = (type, icon) => {
-  switch (type) {
-    case 'area':
-    case 'line':
-      return icon
-        ? {
-          ...defaultLineIcon,
-          ...icon,
-        }
-        : defaultLineIcon;
-    default:
-      return icon
-        ? {
-          ...defaultIcon,
-          ...icon,
-        }
-        : 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));
-  const ticksArr = domain.filter(function (d, i) {
-    return i % (step + 1) === 0;
-  });
-  let Tlen = ticksArr.length;
-  let lastIndex = domain.findIndex(d => d == ticksArr[Tlen - 1])
-  if (showLast) {
-    len % ticksCount == 0 || (len-1) - lastIndex >= Math.round(len / Tlen / 2) ? null : ticksArr.pop()
-    ticksArr.push(domain[len - 1])
-  }
-  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 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);
-  const { backgroundSize = '100% 100%', ..._pattern } = pattern;
-  return (
-    'center top / ' +
-    backgroundSize +
-    ' url("data:image/svg+xml,' +
-    encodeURIComponent(
-      renderToStaticMarkup(<SvgBackground fill={fill} pattern={_pattern} />)
-    ) +
-    '")'
-  );
-};
-const getBandwidth = (step, paddingOuter) =>
-  step / Math.max(1, 1 + paddingOuter);
-
-const getBandSeriesStepAndWidth = ({ width, paddingInner, bandLength }) => {
-  const seriesStep = width / Math.max(1, bandLength - paddingInner);
-  const seriesWidth = seriesStep * (1 - paddingInner);
-  return {
-    seriesStep,
-    seriesWidth,
-  };
-};
-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) => {
-  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);
-
-  let remainder = targetSeats - currentSum;
-  votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
-
-  const tmp = votesPerQuota.map(({ vote, value, ...data }, index) => {
-    let obj = {
-      ...data,
-      value,
-      percent: toFixed((vote + ((value && value != 0) ? remainder : 0)) / digits, precision),
-    };
-    if (value && value != 0) {
-      remainder = 0
-    }
-    return obj
-  });
-  return tmp;
-};
-
-export {
-  dateFormat,
-  getBreakWord,
-  getTicksOfAxis,
-  getTickCoord,
-  getGridCoord,
-  identity,
-  getMousePos,
-  getFontStyle,
-  getMargin,
-  getTranslate3d,
-  getTranslate2d,
-  band,
-  getIcon,
-  getColorList,
-  getStacks,
-  dataYOrZ,
-  seriesYOrZ,
-  resetStacks,
-  getCurrentStack,
-  getBandBackground,
-  getBandwidth,
-  getBandSeriesStepAndWidth,
-  isValidHttpUrl,
-  getChildren,
-  filterChildren,
-  getDomPath,
-  sortPie,
-  getDataWithPercent,
-};
+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 defaultSize = 10;
+const defaultBackground = '#000000';
+const defaultIcon = {
+  width: defaultSize,
+  height: defaultSize,
+  background: defaultBackground,
+};
+const defaultLineIcon = {
+  width: defaultSize,
+  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 getIcon = (type, icon) => {
+  switch (type) {
+    case 'area':
+    case 'line':
+      return icon
+        ? {
+            ...defaultLineIcon,
+            ...icon,
+          }
+        : defaultLineIcon;
+    default:
+      return icon
+        ? {
+            ...defaultIcon,
+            ...icon,
+          }
+        : 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));
+  const ticksArr = domain.filter(function (d, i) {
+    return i % (step + 1) === 0;
+  });
+  let Tlen = ticksArr.length;
+  let lastIndex = domain.findIndex((d) => d == ticksArr[Tlen - 1]);
+  if (showLast) {
+    len % ticksCount == 0 || len - 1 - lastIndex >= Math.round(len / Tlen / 2)
+      ? null
+      : ticksArr.pop();
+    ticksArr.push(domain[len - 1]);
+  }
+  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 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);
+  const { backgroundSize = '100% 100%', ..._pattern } = pattern;
+  return (
+    'center top / ' +
+    backgroundSize +
+    ' url("data:image/svg+xml,' +
+    encodeURIComponent(
+      renderToStaticMarkup(<SvgBackground fill={fill} pattern={_pattern} />)
+    ) +
+    '")'
+  );
+};
+const getBandwidth = (step, paddingOuter) =>
+  step / Math.max(1, 1 + paddingOuter);
+
+const getBandSeriesStepAndWidth = ({ width, paddingInner, bandLength }) => {
+  const seriesStep = width / Math.max(1, bandLength - paddingInner);
+  const seriesWidth = seriesStep * (1 - paddingInner);
+  return {
+    seriesStep,
+    seriesWidth,
+  };
+};
+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) => {
+  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);
+
+  let remainder = targetSeats - currentSum;
+  votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
+
+  const tmp = votesPerQuota.map(({ vote, value, ...data }, index) => {
+    let obj = {
+      ...data,
+      value,
+      percent: toFixed(
+        (vote + (value && value != 0 ? remainder : 0)) / digits,
+        precision
+      ),
+    };
+    if (value && value != 0) {
+      remainder = 0;
+    }
+    return obj;
+  });
+  return tmp;
+};
+
+export {
+  dateFormat,
+  getBreakWord,
+  getTicksOfAxis,
+  getTickCoord,
+  getGridCoord,
+  identity,
+  getMousePos,
+  getFontStyle,
+  getMargin,
+  getTranslate3d,
+  getTranslate2d,
+  band,
+  getIcon,
+  getColorList,
+  getStacks,
+  dataYOrZ,
+  seriesYOrZ,
+  resetStacks,
+  getCurrentStack,
+  getBandBackground,
+  getBandwidth,
+  getBandSeriesStepAndWidth,
+  isValidHttpUrl,
+  getChildren,
+  filterChildren,
+  getDomPath,
+  sortPie,
+  getDataWithPercent,
+};