@easyv/charts 1.0.57 → 1.0.61

package/src/formatter/legend.js

@@ -1,87 +1,87 @@
-import css from '../css/index.module.css';
-import { getFontStyle } from '../utils';
-export const pieLegendFormatter = (
-  { displayName, value, percent, series: { color: seriesColor, icon="" } },
-  {
-    name: { show: showName, font: nameFont },
-    value: {
-      show: showValue,
-      font: valueFont,
-      sameColor: valueSameColor,
-      gap: valueGap,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize,
-        translate: { x, y },
-      },
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      sameColor: percentSameColor,
-      gap: percentGap,
-    },
-  }
-) => {
-  const {
-    type: seriesColorType,
-    pure,
-    linear: { stops },
-  } = seriesColor;
-
-  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
-  return (
-    <>
-      {icon &&<span style={{ ...icon, marginRight: icon.marginRight }} />}
-      <span
-        className={
-          showName && showValue && showPercent
-            ? css.showAllStyle
-            : css.notShowAllStyle
-        }
-      >
-        {showName && (
-          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont) }}>
-            {displayName}
-          </span>
-        )}
-        {showValue && (
-          <span
-            style={{
-              ...getFontStyle(valueFont),
-              marginLeft: valueGap,
-              display: 'flex',
-              color: valueSameColor ? _color : valueFont.color,
-              alignItems: 'center',
-              justifyContent: 'flex-start',
-            }}
-          >
-            {showValue && <span>{value}</span>}
-            {showSuffix && (
-              <span
-                style={{
-                  fontSize,
-                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-                }}
-              >
-                {text}
-              </span>
-            )}
-          </span>
-        )}
-        {showPercent && (
-          <span
-            style={{
-              ...getFontStyle(percentFont),
-              marginLeft: percentGap,
-              color: percentSameColor ? _color : percentFont.color,
-            }}
-          >
-            {percent + '%'}
-          </span>
-        )}
-      </span>
-    </>
-  );
-};
+import css from '../css/index.module.css';
+import { getFontStyle } from '../utils';
+export const pieLegendFormatter = (
+  { displayName, value, percent, series: { color: seriesColor, icon="" } },
+  {
+    name: { show: showName, font: nameFont },
+    value: {
+      show: showValue,
+      font: valueFont,
+      sameColor: valueSameColor,
+      gap: valueGap,
+      suffix: {
+        show: showSuffix,
+        text,
+        fontSize,
+        translate: { x, y },
+      },
+    },
+    percent: {
+      show: showPercent,
+      font: percentFont,
+      sameColor: percentSameColor,
+      gap: percentGap,
+    },
+  }
+) => {
+  const {
+    type: seriesColorType,
+    pure,
+    linear: { stops },
+  } = seriesColor;
+
+  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  return (
+    <>
+      {icon &&<span style={{ ...icon, marginRight: icon.marginRight }} />}
+      <span
+        className={
+          showName && showValue && showPercent
+            ? css.showAllStyle
+            : css.notShowAllStyle
+        }
+      >
+        {showName && (
+          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont), whiteSpace:"nowrap" }}>
+            {displayName}
+          </span>
+        )}
+        {showValue && (
+          <span
+            style={{
+              ...getFontStyle(valueFont),
+              marginLeft: valueGap,
+              display: 'flex',
+              color: valueSameColor ? _color : valueFont.color,
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+            }}
+          >
+            {showValue && <span>{value}</span>}
+            {showSuffix && (
+              <span
+                style={{
+                  fontSize,
+                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
+                }}
+              >
+                {text}
+              </span>
+            )}
+          </span>
+        )}
+        {showPercent && (
+          <span
+            style={{
+              ...getFontStyle(percentFont),
+              marginLeft: percentGap,
+              color: percentSameColor ? _color : percentFont.color,
+            }}
+          >
+            {percent + '%'}
+          </span>
+        )}
+      </span>
+    </>
+  );
+};

package/src/hooks/index.js

@@ -1,17 +1,17 @@
-import useFilterData from './useFilterData';
-import useStackData from './useStackData';
-import useAxes from './useAxes';
-import useTooltip from './useTooltip';
-import useAnimateData from './useAnimateData';
-import useCarouselAxisX from './useCarouselAxisX';
-import useExtentData from './useExtentData';
-
-export {
-  useFilterData,
-  useStackData,
-  useAxes,
-  useTooltip,
-  useAnimateData,
-  useCarouselAxisX,
-  useExtentData,
-};
+import useFilterData from './useFilterData';
+import useStackData from './useStackData';
+import useAxes from './useAxes';
+import useTooltip from './useTooltip';
+import useAnimateData from './useAnimateData';
+import useCarouselAxisX from './useCarouselAxisX';
+import useExtentData from './useExtentData';
+
+export {
+  useFilterData,
+  useStackData,
+  useAxes,
+  useTooltip,
+  useAnimateData,
+  useCarouselAxisX,
+  useExtentData,
+};

package/src/hooks/useAnimateData.ts

@@ -1,62 +1,62 @@
-import { useEffect, useState } from 'react';
-import { animate, linear } from 'popmotion';
-
-/**
- * 图表数据动画
- * @param {Array} data data列表
- * @param {boolean} dataAnimation 是否开启数据增长动画
- * @returns 改变后的数据
- */
-
-export default (data: DataType[], dataAnimation: boolean) => {
-  const [animateData, setAnimateData] = useState<DataType[]>([]);
-
-  useEffect(() => {
-    let animateRef: any = null;
-    if (dataAnimation && data.length) {
-      animateRef = animate({
-        autoplay: true,
-        repeat: 0,
-        from: 0,
-        to: 1,
-        duration: 500,
-        ease: linear,
-        onUpdate: (v: number) => {
-          setAnimateData((oldData: DataType[]) => {
-            const oldLength = oldData.length;
-            const newLength = data.length;
-            if (oldLength >= newLength) {
-              return oldData.map(({ y }: DataType, i: number) => {
-                const current: DataType = data[i] || { y: 0 };
-                const delta: number = current.y - y;
-                return {
-                  ...current,
-                  y: Math.floor(y + delta * v),
-                };
-              });
-            } else {
-              return data.map((current: DataType, i: number) => {
-                const oldCurrent: DataType = oldData[i] || { y: 0 };
-                const delta = oldCurrent.y - current.y;
-                return {
-                  ...current,
-                  y: Math.floor(oldCurrent.y + delta * v),
-                };
-              });
-            }
-          });
-        },
-        onComplete: () => {
-          setAnimateData(data);
-        },
-      });
-    } else {
-      setAnimateData(data);
-    }
-    return () => {
-      animateRef && animateRef.stop();
-    };
-  }, [data, dataAnimation]);
-
-  return animateData;
-};
+import { useEffect, useState } from 'react';
+import { animate, linear } from 'popmotion';
+
+/**
+ * 图表数据动画
+ * @param {Array} data data列表
+ * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @returns 改变后的数据
+ */
+
+export default (data: DataType[], dataAnimation: boolean) => {
+  const [animateData, setAnimateData] = useState<DataType[]>([]);
+
+  useEffect(() => {
+    let animateRef: any = null;
+    if (dataAnimation && data.length) {
+      animateRef = animate({
+        autoplay: true,
+        repeat: 0,
+        from: 0,
+        to: 1,
+        duration: 500,
+        ease: linear,
+        onUpdate: (v: number) => {
+          setAnimateData((oldData: DataType[]) => {
+            const oldLength = oldData.length;
+            const newLength = data.length;
+            if (oldLength >= newLength) {
+              return oldData.map(({ y }: DataType, i: number) => {
+                const current: DataType = data[i] || { y: 0 };
+                const delta: number = current.y - y;
+                return {
+                  ...current,
+                  y: Math.floor(y + delta * v),
+                };
+              });
+            } else {
+              return data.map((current: DataType, i: number) => {
+                const oldCurrent: DataType = oldData[i] || { y: 0 };
+                const delta = oldCurrent.y - current.y;
+                return {
+                  ...current,
+                  y: Math.floor(oldCurrent.y + delta * v),
+                };
+              });
+            }
+          });
+        },
+        onComplete: () => {
+          setAnimateData(data);
+        },
+      });
+    } else {
+      setAnimateData(data);
+    }
+    return () => {
+      animateRef && animateRef.stop();
+    };
+  }, [data, dataAnimation]);
+
+  return animateData;
+};

package/src/hooks/useAxes.js

@@ -1,143 +1,143 @@
-import { useMemo } from 'react';
-import { scaleLinear, scaleLog, scaleTime, scaleUtc } from 'd3-scale';
-import { band } from '../utils';
-import {
-  getYTicksByStep,
-  getYTicks,
-  getTicksOfAxis,
-} from '@easyv/utils/lib/common/utils';
-
-const scales = {
-  linear: scaleLinear,
-  log: scaleLog,
-  time: scaleTime,
-  utc: scaleUtc,
-  ordinal: band,
-};
-
-/**
- * x/y/z轴
- * @param {Array} axes 轴列表数组
- * @param {Object} context 其中需要包括
- * @returns {Map} 返回所有轴
- */
-
-export default ({ axes, context: { width, height } }) => {
-  const _axes = useMemo(() => {
-    const tmp = new Map();
-    const xAxisPositions = [];
-    axes.forEach((item) => {
-      const {
-        type,
-        orientation,
-        ticks,
-        tickCount = 1,
-        step = 1,
-        domain,
-        axisType,
-        paddingOuter = 0,
-        auto,
-        mode,
-        carousel,
-        config,
-      } = item;
-      const direction =
-        orientation === 'top' || orientation === 'bottom'
-          ? 'horizontal'
-          : orientation === 'left' || orientation === 'right'
-          ? 'vertical'
-          : '';
-
-      const length =
-        direction === 'horizontal'
-          ? width
-          : direction === 'vertical'
-          ? height
-          : 0;
-
-      const _paddingOuter = paddingOuter * length;
-      const start = _paddingOuter / 2;
-      const end = length - start;
-
-      const range =
-        direction === 'horizontal'
-          ? [start, end]
-          : direction === 'vertical'
-          ? [end, start]
-          : [0, 0];
-
-      const scaler = scales[type]().domain(domain).range(range);
-      scaler.type = type;
-
-      if (type !== 'ordinal') scaler.nice().clamp(true);
-
-      const allTicks = ticks
-        ? ticks
-        : scaler.ticks
-        ? scaler.ticks(tickCount)
-        : scaler.domain();
-
-      let _ticks = allTicks;
-      if (type === 'ordinal') {
-        if (carousel === false) {
-          _ticks = getTicksOfAxis(_ticks, +tickCount);
-        }
-      } else {
-        if (auto === false) {
-          switch (mode) {
-            case 'count':
-              _ticks = getYTicks(
-                _ticks[_ticks.length - 1],
-                _ticks[0],
-                +tickCount
-              );
-              break;
-            case 'step':
-              _ticks = getYTicksByStep(
-                _ticks[_ticks.length - 1],
-                _ticks[0],
-                +step
-              );
-              break;
-          }
-        }
-      }
-
-      const lengthWithoutPaddingOuter = length - _paddingOuter;
-
-      if (type == 'linear' && config.on) {
-        const zeroPosition = scaler(0);
-        if (zeroPosition !== range[0]) {
-          if (direction === 'horizontal') {
-            xAxisPositions.push({
-              x: zeroPosition,
-              y: 0,
-            });
-          } else if (direction === 'vertical') {
-            xAxisPositions.push({
-              x: 0,
-              y: zeroPosition,
-            });
-          }
-        }
-      }
-
-      tmp.set(axisType, {
-        ...item,
-        scaler,
-        length,
-        direction,
-        start,
-        end,
-        lengthWithoutPaddingOuter,
-        step: lengthWithoutPaddingOuter / allTicks.length,
-        allTicks,
-        ticks: _ticks,
-      });
-    });
-
-    tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
-    return tmp;
-  }, [axes]);
-  return _axes;
-};
+import { useMemo } from 'react';
+import { scaleLinear, scaleLog, scaleTime, scaleUtc } from 'd3-scale';
+import { band } from '../utils';
+import {
+  getYTicksByStep,
+  getYTicks,
+  getTicksOfAxis,
+} from '@easyv/utils/lib/common/utils';
+
+const scales = {
+  linear: scaleLinear,
+  log: scaleLog,
+  time: scaleTime,
+  utc: scaleUtc,
+  ordinal: band,
+};
+
+/**
+ * x/y/z轴
+ * @param {Array} axes 轴列表数组
+ * @param {Object} context 其中需要包括
+ * @returns {Map} 返回所有轴
+ */
+
+export default ({ axes, context: { width, height } }) => {
+  const _axes = useMemo(() => {
+    const tmp = new Map();
+    const xAxisPositions = [];
+    axes.forEach((item) => {
+      const {
+        type,
+        orientation,
+        ticks,
+        tickCount = 1,
+        step = 1,
+        domain,
+        axisType,
+        paddingOuter = 0,
+        auto,
+        mode,
+        carousel,
+        config,
+      } = item;
+      const direction =
+        orientation === 'top' || orientation === 'bottom'
+          ? 'horizontal'
+          : orientation === 'left' || orientation === 'right'
+          ? 'vertical'
+          : '';
+
+      const length =
+        direction === 'horizontal'
+          ? width
+          : direction === 'vertical'
+          ? height
+          : 0;
+
+      const _paddingOuter = paddingOuter * length;
+      const start = _paddingOuter / 2;
+      const end = length - start;
+
+      const range =
+        direction === 'horizontal'
+          ? [start, end]
+          : direction === 'vertical'
+          ? [end, start]
+          : [0, 0];
+
+      const scaler = scales[type]().domain(domain).range(range);
+      scaler.type = type;
+
+      if (type !== 'ordinal') scaler.nice().clamp(true);
+
+      const allTicks = ticks
+        ? ticks
+        : scaler.ticks
+        ? scaler.ticks(tickCount)
+        : scaler.domain();
+
+      let _ticks = allTicks;
+      if (type === 'ordinal') {
+        if (carousel === false) {
+          _ticks = getTicksOfAxis(_ticks, +tickCount);
+        }
+      } else {
+        if (auto === false) {
+          switch (mode) {
+            case 'count':
+              _ticks = getYTicks(
+                _ticks[_ticks.length - 1],
+                _ticks[0],
+                +tickCount
+              );
+              break;
+            case 'step':
+              _ticks = getYTicksByStep(
+                _ticks[_ticks.length - 1],
+                _ticks[0],
+                +step
+              );
+              break;
+          }
+        }
+      }
+
+      const lengthWithoutPaddingOuter = length - _paddingOuter;
+
+      if (type == 'linear' && config.on) {
+        const zeroPosition = scaler(0);
+        if (zeroPosition !== range[0]) {
+          if (direction === 'horizontal') {
+            xAxisPositions.push({
+              x: zeroPosition,
+              y: 0,
+            });
+          } else if (direction === 'vertical') {
+            xAxisPositions.push({
+              x: 0,
+              y: zeroPosition,
+            });
+          }
+        }
+      }
+
+      tmp.set(axisType, {
+        ...item,
+        scaler,
+        length,
+        direction,
+        start,
+        end,
+        lengthWithoutPaddingOuter,
+        step: lengthWithoutPaddingOuter / allTicks.length,
+        allTicks,
+        ticks: _ticks,
+      });
+    });
+
+    tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
+    return tmp;
+  }, [axes]);
+  return _axes;
+};