@easyv/charts 1.0.75 → 1.1.0

package/src/components/Tooltip.js

@@ -1,133 +1,168 @@
-/**
- * 提示框
- */
-import { memo } from 'react';
-import { getFontStyle, getMargin, getTranslate3d } from '../utils';
-import { getIcon } from '../utils';
-
-export default memo(
-  ({
-    x: position,
-    tickName: x,
-    data,
-    series,
-    config,
-    config: {
-      tip: {
-        data: {
-          xAxis,
-          xAxis: { align, font, translate: translateXAxis },
-          data: dataConfig,
-          data: { lineHeight, iconSize, name, value, suffix },
-        },
-        image,
-        margin,
-        size: { width, height },
-        translate: translateTip,
-      },
-    },
-    formatter,
-    isVertical,
-  }) => {
-    const translate3d = isVertical
-      ? {
-        ...translateTip,
-        y: translateTip.y + position,
-      }
-      : {
-        ...translateTip,
-        x: translateTip.x + position,
-      };
-
-    return (
-      <div
-        className='__easyv-tooltip'
-        style={{
-          pointerEvents: 'none',
-          transform: getTranslate3d(translate3d),
-          width,
-          height,
-          padding: getMargin(margin),
-          background: image
-            ? '50% 50% / 100% 100% no-repeat url(' +
-            window.appConfig.ASSETS_URL +
-            image +
-            ')'
-            : 'rgba(48, 55, 66, 0.85)',
-          ...getFontStyle(font)
-        }}
-      >
-        {formatter ? (
-          formatter({
-            series,
-            x: { x, config: xAxis },
-            data: { data, config: dataConfig },
-          })
-        ) : (
-          <dl
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              height: '100%',
-            }}
-          >
-            <dt
-              style={{
-                textAlign: align,
-                transform: getTranslate3d(translateXAxis),
-                ...font,
-              }}
-            >
-              {x}
-
-            </dt>
-            {data.map(({ showY, s }, index) => {
-              const { type, icon, displayName } = series.find(
-                (series) => series.name == s
-              );
-              const { show: showSuffix, content, font: suffiixFont, translate: suffixTranslate } = suffix
-              const tmp = new Map();
-              Object.values(content).forEach(
-                (item) => {
-                  tmp.set(item['suffix'].name,
-                    item['suffix'].suffix
-                  );
-                }
-              );
-              const _icon = getIcon(type, icon);
-              return (
-                <dd
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    lineHeight: lineHeight + 'px',
-                  }}
-                  key={index}
-                >
-                  <span
-                    style={{
-                      border: '1px solid red',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: icon.iconGap,
-                    }}
-                  >
-                    <span style={{ ..._icon, width: iconSize + 'px', height: iconSize + 'px' }} />
-                    <span style={getFontStyle(name)}>{displayName || s}</span>
-                  </span>
-                  <span style={getFontStyle(value)}>{showY}
-                    {showSuffix && <span style={{ ...getFontStyle(suffiixFont), transform: getTranslate3d(suffixTranslate) }}>
-                      {tmp.get(s)}
-                    </span>
-                    }
-                  </span>
-                </dd>
-              );
-            })}
-          </dl>
-        )}
-      </div>
-    );
-  }
-);
+/**
+ * 提示框
+ */
+import { memo, useMemo } from 'react';
+import { getFontStyle, getMargin, getTranslate3d } from '../utils';
+import { getIcon } from '../utils';
+export default memo(
+  ({
+    x: position,
+    tickName: x,
+    marginLeft,
+    marginTop,
+    data,
+    series,
+    config: {
+      tip: {
+        data: {
+          xAxis,
+          xAxis: { align, font, translate: translateXAxis },
+          data: dataConfig,
+          data: { lineHeight, iconSize, name, value, suffix },
+        },
+        image,
+        margin,
+        size: { width: tipWidth, height: tipHeight },
+        translate: translateTip,
+      },
+    },
+    formatter,
+    isVertical,
+    width,
+    height,
+  }) => {
+    const tipPosition = useMemo(() => {
+      const translate3d = isVertical
+        ? {
+            ...translateTip,
+            y: translateTip.y + position + marginTop,
+          }
+        : {
+            ...translateTip,
+            x: translateTip.x + position + marginLeft,
+          };
+      if (translate3d.x + tipWidth > width) {
+        const newPositon = position + marginLeft - tipWidth - translateTip.x;
+        translate3d.x = newPositon >= 0 ? newPositon : 0;
+      }
+      if (translate3d.y + tipHeight > height) {
+        const newPositon = position + marginTop - tipHeight - translateTip.y;
+        translate3d.y = newPositon >= 0 ? newPositon : height - tipHeight;
+      }
+      return getTranslate3d(translate3d);
+    }, [
+      width,
+      height,
+      marginLeft,
+      marginTop,
+      position,
+      tipWidth,
+      tipHeight,
+      translateTip,
+    ]);
+
+    return (
+      <div
+        className='__easyv-tooltip'
+        style={{
+          pointerEvents: 'none',
+          transform: tipPosition,
+          width: tipWidth,
+          height: tipHeight,
+          padding: getMargin(margin),
+          background: image
+            ? '50% 50% / 100% 100% no-repeat url(' +
+              window.appConfig.ASSETS_URL +
+              image +
+              ')'
+            : 'rgba(48, 55, 66, 0.85)',
+          ...getFontStyle(font),
+        }}
+      >
+        {formatter ? (
+          formatter({
+            series,
+            x: { x, config: xAxis },
+            data: { data, config: dataConfig },
+          })
+        ) : (
+          <dl
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              height: '100%',
+            }}
+          >
+            <dt
+              style={{
+                textAlign: align,
+                transform: getTranslate3d(translateXAxis),
+                ...font,
+              }}
+            >
+              {x}
+            </dt>
+            {data.map(({ showY, s }, index) => {
+              const { type, icon, displayName } = series.find(
+                (series) => series.name == s
+              );
+              const {
+                show: showSuffix,
+                content,
+                font: suffiixFont,
+                translate: suffixTranslate,
+              } = suffix;
+              const tmp = new Map();
+              Object.values(content).forEach((item) => {
+                tmp.set(item['suffix'].name, item['suffix'].suffix);
+              });
+              const _icon = getIcon(type, icon);
+              return (
+                <dd
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    lineHeight: lineHeight + 'px',
+                  }}
+                  key={index}
+                >
+                  <span
+                    style={{
+                      border: '1px solid red',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: icon.iconGap,
+                    }}
+                  >
+                    <span
+                      style={{
+                        ..._icon,
+                        width: iconSize + 'px',
+                        height: iconSize + 'px',
+                      }}
+                    />
+                    <span style={getFontStyle(name)}>{displayName || s}</span>
+                  </span>
+                  <span style={getFontStyle(value)}>
+                    {showY}
+                    {showSuffix && (
+                      <span
+                        style={{
+                          ...getFontStyle(suffiixFont),
+                          transform: getTranslate3d(suffixTranslate),
+                        }}
+                      >
+                        {tmp.get(s)}
+                      </span>
+                    )}
+                  </span>
+                </dd>
+              );
+            })}
+          </dl>
+        )}
+      </div>
+    );
+  }
+);

package/src/components/index.js

@@ -1,49 +1,51 @@
-import Mapping from './Mapping';
-import AnimateData from './AnimateData';
-import FilterData from './FilterData';
-import ExtentData from './ExtentData';
-import StackData from './StackData';
-import ChartContainer from './ChartContainer';
-import Legend from './Legend';
-import Axis from './Axis';
-import Tooltip from './Tooltip';
-import Indicator from './Indicator';
-import Band from './Band';
-import Line from './Line';
-import Background from './Background';
-import LinearGradient from './LinearGradient';
-import Brush from './Brush';
-import Label from './Label';
-import StereoBar from './StereoBar';
-import Carousel from './Carousel';
-import Chart from './Chart';
-import ConicalGradient from './ConicalGradient';
-import CartesianChart from './CartesianChart';
-import PieChart from './PieChart';
-
-const Area = Line;
-export {
-  Mapping,
-  AnimateData,
-  FilterData,
-  StackData,
-  ExtentData,
-  ChartContainer,
-  Legend,
-  Tooltip,
-  Axis,
-  Indicator,
-  Band,
-  Line,
-  Area,
-  Background,
-  LinearGradient,
-  Brush,
-  Label,
-  StereoBar,
-  Carousel,
-  CartesianChart,
-  PieChart,
-  Chart,
-  ConicalGradient,
-};
+import Mapping from './Mapping';
+import AnimateData from './AnimateData';
+import FilterData from './FilterData';
+import ExtentData from './ExtentData';
+import StackData from './StackData';
+import ChartContainer from './ChartContainer';
+import Legend from './Legend';
+import Axis from './Axis';
+import Tooltip from './Tooltip';
+import Indicator from './Indicator';
+import Band from './Band';
+import Lighter from './Lighter';
+import Line from './Line';
+import Background from './Background';
+import LinearGradient from './LinearGradient';
+import Brush from './Brush';
+import Label from './Label';
+import StereoBar from './StereoBar';
+import Carousel from './Carousel';
+import Chart from './Chart';
+import ConicalGradient from './ConicalGradient';
+import CartesianChart from './CartesianChart';
+import PieChart from './PieChart';
+
+const Area = Line;
+export {
+  Mapping,
+  AnimateData,
+  FilterData,
+  StackData,
+  ExtentData,
+  ChartContainer,
+  Legend,
+  Tooltip,
+  Axis,
+  Indicator,
+  Band,
+  Lighter,
+  Line,
+  Area,
+  Background,
+  LinearGradient,
+  Brush,
+  Label,
+  StereoBar,
+  Carousel,
+  CartesianChart,
+  PieChart,
+  Chart,
+  ConicalGradient,
+};

package/src/context/index.js

@@ -1,2 +1,2 @@
-import { createContext } from 'react';
-export const chartContext = createContext();
+import { createContext } from 'react';
+export const chartContext = createContext();

package/src/css/index.module.css

@@ -1,42 +1,42 @@
-.rotateClockwise {
-  animation-name: rotateClockwise;
-}
-
-@keyframes rotateClockwise {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.rotateCounterClockwise {
-  animation-name: rotateCounterClockwise;
-}
-
-@keyframes rotateCounterClockwise {
-  0% {
-    transform: rotate(360deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-.showAllStyle {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 40% 30% 30%;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.notShowAllStyle {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
+.rotateClockwise {
+  animation-name: rotateClockwise;
+}
+
+@keyframes rotateClockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rotateCounterClockwise {
+  animation-name: rotateCounterClockwise;
+}
+
+@keyframes rotateCounterClockwise {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.showAllStyle {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 40% 30% 30%;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.notShowAllStyle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
 }

package/src/css/piechart.module.css

@@ -1,27 +1,27 @@
-/*甜甜圈图专用css*/
-.label-line {
-    stroke-dasharray: 100;
-    stroke-dashoffset: 100;
-    animation: dash 800ms ease forwards;
-  }
-  
-  .label-text {
-    opacity: 0;
-    animation: show 800ms ease forwards;
-  }
-  
-  .inner-arc {
-    animation: dash 2s ease forwards;
-  }
-  
-  @keyframes dash {
-    100% {
-      stroke-dashoffset: 0%;
-    }
-  }
-  
-  @keyframes show {
-    100% {
-      opacity: 1;
-    }
+/*甜甜圈图专用css*/
+.label-line {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: dash 800ms ease forwards;
+  }
+  
+  .label-text {
+    opacity: 0;
+    animation: show 800ms ease forwards;
+  }
+  
+  .inner-arc {
+    animation: dash 2s ease forwards;
+  }
+  
+  @keyframes dash {
+    100% {
+      stroke-dashoffset: 0%;
+    }
+  }
+  
+  @keyframes show {
+    100% {
+      opacity: 1;
+    }
   }

package/src/element/ConicGradient.jsx

@@ -1,56 +1,56 @@
-import * as d3 from 'd3';
-
-//只支持在svg中使用
-//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
-//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
-export default function ConicGradient(props){
-    const {
-        gradientId,         //渐变ID，每一个环形渐变都需要使用独有的id，防止大屏中存在多个环形渐变时，出现渐变混用的情况。
-        colorConfig={},
-        circleConfig={}
-    } = props,
-    {
-        colorType = "linear",   //渐变类型
-        colors = [{offset:0,color:"rgba(255,0,0,0.5)"},
-                  {offset:50,color:"rgba(0,255,0,0.5)"},
-                  {offset:100,color:"rgba(0,0,255,0.5)"}]     //渐变颜色
-    } = colorConfig,
-    {
-        innerRadius = 80,       //圆环内半径
-        outerRadius = 100,      //圆环外半径
-        startAngle = 0,         //初始角度
-        endAngle = 360,         //结束角度
-        cornerRadius = 0,       //圆环两端的圆角
-        padAngle = 0            //圆环内边距，用于多个圆环之间的间距
-    } = circleConfig;
-    const arc = d3
-        .arc()
-        .innerRadius(innerRadius)
-        .outerRadius(outerRadius)
-        .startAngle((startAngle * Math.PI) / 180)
-        .endAngle((endAngle * Math.PI) / 180)
-        .cornerRadius(cornerRadius)
-        .padAngle(padAngle);
-    return <g>
-        <clipPath id={""+gradientId} style={{transform:`translate(50%,50%)`}}>
-            <path d={arc()}></path>
-        </clipPath>
-        <foreignObject style={{
-            width:"100%",
-            height:"100%",
-            transform:`translate(-50%,-50%)`,
-            background:colorType==="pure"?
-            colors : `conic-gradient(${colorsToString(colors)})`,
-            clipPath:`url(${'#'+gradientId})`
-        }}></foreignObject>
-    </g>
-}
-function colorsToString(colors){
-    let s="";
-    colors.sort((a,b)=>{
-        return a.offset-b.offset;
-    }).map(d=>{
-        s=s+d.color+" "+d.offset+"%,";
-    })
-    return s.slice(0,-1)
+import * as d3 from 'd3';
+
+//只支持在svg中使用
+//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
+//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
+export default function ConicGradient(props){
+    const {
+        gradientId,         //渐变ID，每一个环形渐变都需要使用独有的id，防止大屏中存在多个环形渐变时，出现渐变混用的情况。
+        colorConfig={},
+        circleConfig={}
+    } = props,
+    {
+        colorType = "linear",   //渐变类型
+        colors = [{offset:0,color:"rgba(255,0,0,0.5)"},
+                  {offset:50,color:"rgba(0,255,0,0.5)"},
+                  {offset:100,color:"rgba(0,0,255,0.5)"}]     //渐变颜色
+    } = colorConfig,
+    {
+        innerRadius = 80,       //圆环内半径
+        outerRadius = 100,      //圆环外半径
+        startAngle = 0,         //初始角度
+        endAngle = 360,         //结束角度
+        cornerRadius = 0,       //圆环两端的圆角
+        padAngle = 0            //圆环内边距，用于多个圆环之间的间距
+    } = circleConfig;
+    const arc = d3
+        .arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .startAngle((startAngle * Math.PI) / 180)
+        .endAngle((endAngle * Math.PI) / 180)
+        .cornerRadius(cornerRadius)
+        .padAngle(padAngle);
+    return <g>
+        <clipPath id={""+gradientId} style={{transform:`translate(50%,50%)`}}>
+            <path d={arc()}></path>
+        </clipPath>
+        <foreignObject style={{
+            width:"100%",
+            height:"100%",
+            transform:`translate(-50%,-50%)`,
+            background:colorType==="pure"?
+            colors : `conic-gradient(${colorsToString(colors)})`,
+            clipPath:`url(${'#'+gradientId})`
+        }}></foreignObject>
+    </g>
+}
+function colorsToString(colors){
+    let s="";
+    colors.sort((a,b)=>{
+        return a.offset-b.offset;
+    }).map(d=>{
+        s=s+d.color+" "+d.offset+"%,";
+    })
+    return s.slice(0,-1)
 }