@easyv/charts 1.7.37 → 1.8.0

package/src/components/LinearGradient.js

@@ -1,29 +1,29 @@
-/**
- * svg渐变滤镜
- */
-export default ({
-  id,
-  colors,
-  rotate = 0,
-  gradientUnits,
-  position: [x1, y1, x2, y2] = [0, 0, 0, 1],
-}) => (
-  <linearGradient
-    x1={x1}
-    y1={y1}
-    x2={x2}
-    y2={y2}
-    id={id}
-    gradientUnits={gradientUnits}
-    gradientTransform={'rotate(' + rotate + ', .5, .5)'}
-  >
-    {colors.map(({ offset, color, stopOpacity = 1 }, index) => (
-      <stop
-        key={index}
-        offset={offset}
-        stopColor={color}
-        stopOpacity={stopOpacity}
-      />
-    ))}
-  </linearGradient>
-);
+/**
+ * svg渐变滤镜
+ */
+export default ({
+  id,
+  colors,
+  rotate = 0,
+  gradientUnits,
+  position: [x1, y1, x2, y2] = [0, 0, 0, 1],
+}) => (
+  <linearGradient
+    x1={x1}
+    y1={y1}
+    x2={x2}
+    y2={y2}
+    id={id}
+    gradientUnits={gradientUnits}
+    gradientTransform={'rotate(' + rotate + ', .5, .5)'}
+  >
+    {colors.map(({ offset, color, stopOpacity = 1 }, index) => (
+      <stop
+        key={index}
+        offset={offset}
+        stopColor={color}
+        stopOpacity={stopOpacity}
+      />
+    ))}
+  </linearGradient>
+);

package/src/components/PieChart.js

@@ -1241,6 +1241,15 @@ const Label = ({
   );
 };
 
+function getAlign(align, reverse){
+  if(align=="center")return "center";
+  if(align=="left")return reverse?"flex-end":"flex-start";
+  return reverse?"flex-start":"flex-end"
+}
+function getTranslate(translate, reverse){
+  const { x, y } = translate;
+  return `translate(${reverse?-x:x}px, ${y}px)`
+}
 const RingLabel = ({
   config: {
     ringDuration, 
@@ -1250,9 +1259,10 @@ const RingLabel = ({
     lineColor,
     distance,
     mode,
+    align="center",
     show,
     translate: { x: translateX, y: translateY },
-    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed },
+    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed, translate:nameTranslate },
     value: {
       show: showValue,
       font: valueFont,
@@ -1262,8 +1272,9 @@ const RingLabel = ({
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
       },
+      translate:valueTranslate
     },
-    percent: { show: showPercent, font: percentFont, precision },
+    percent: { show: showPercent, font: percentFont, precision, translate:percentTranslate },
   },
   iosStyle:{
     isIOS, left, top
@@ -1374,7 +1385,9 @@ const RingLabel = ({
                       width: "max-content",
                       animationDelay: `${(actualIndex + 1) * ringDuration - labelDuration}ms`,
                       display:"flex",
-                      alignItems:"center"
+                      flexDirection:mode=="horizontal"?"row":"column",
+                      alignItems:getAlign(align, x3>=0),
+                      justifyContent:"center"
                     }}
                   >
                     {_showName && (
@@ -1388,11 +1401,12 @@ const RingLabel = ({
                           maxWidth,
                           ...getFontStyle(nameFont),
                           float: mode == "horizontal" ? "left" : "none",
+                          transform:getTranslate(nameTranslate, x3>=0)
                         }}
                       ></TextOverflow>
                     )}
                     {showValue && (
-                      <span style={getFontStyle(valueFont)}>
+                      <span style={{...getFontStyle(valueFont), transform:getTranslate(valueTranslate, x3>=0)}}>
                         {realData.y}
                         {showSuffix && (
                           <span
@@ -1409,7 +1423,7 @@ const RingLabel = ({
                       </span>
                     )}
                     {showPercent && (
-                      <span style={getFontStyle(percentFont)}>
+                      <span style={{...getFontStyle(percentFont), transform:getTranslate(percentTranslate, x3>=0)}}>
                         {(_showValue ? "（" : "") +
                           percent +
                           "%" +

package/src/components/PieTooltip.jsx

@@ -1,161 +1,161 @@
-import React, { memo } from 'react'
-import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
-
-
-export const PieTooltip = memo((props) => {
-	const { mousePos,
-		pieCenter,
-		config: {
-			tip: {
-				data: { lineHeight, iconSize, name,
-					value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix, suffix: { show: valueSuffixIsShow } },
-					percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix, suffix: { show: percentageSuffixIsShow }, precision },
-				},
-				image,
-				margin,
-				size: { width: tipWidth, height: tipHeight },
-				translate: translateTip,
-			},
-		},
-		data,
-		series } = props
-
-	const Item = () => {
-		const { data: { s, y }, percent } = data
-		const { type, icon, displayName } = [...series.values()].find(
-			(series) => series.name == s
-		);
-
-		const renderSuffix = (suffix) => {
-			const {
-				content,
-				font: suffiixFont,
-				translate: suffixTranslate,
-			} = suffix;
-			return (
-				<span
-					style={{
-						...getFontStyle(suffiixFont),
-						display: "inline-block",
-						transform: getTranslate3d(suffixTranslate),
-					}}
-				>
-					{content}
-				</span>
-			)
-		}
-
-		const _icon = getIcon(type, icon);
-		return (
-			<dd
-				style={{
-					display: 'flex',
-					justifyContent: 'space-between',
-					lineHeight: lineHeight + 'px',
-				}}
-
-			>
-				<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>
-				{valueIsShow && <span style={getFontStyle(valueFont)}>
-					{y}
-					{valueSuffixIsShow && renderSuffix(valueSuffix)}
-				</span>}
-				{percentageIsShow && <span style={getFontStyle(percentageFont)}>
-					{Number(percent).toFixed(precision)}
-					{percentageSuffixIsShow && renderSuffix(percentageSuffix)}
-				</span>}
-			</dd>
-		);
-	}
-	const { x: mouseX, y: mouseY } = mousePos
-	const { x: centerX, y: centerY } = pieCenter
-	const getTipPos = () => {
-
-		const getBigscreenScale = () => {
-			if (window.getScreenScale) {
-				return window.getScreenScale()
-			} else {
-				const bigscreenDom = document.getElementById('bigscreen-container')
-				if (!bigscreenDom) return [1, 1]
-				const transform = bigscreenDom.style.transform
-				if (!transform) return [1, 1]
-				let match = transform.match(/scale\(([^)]+)\)/)
-				if (match) {
-					const scaleMatch = match[1].split(',')
-					let scaleX = scaleMatch[0];
-					let scaleY = scaleMatch[1];
-					if (scaleY) {
-						return [Number(scaleX), Number(scaleY)]
-					} else {
-						return [Number(scaleX), Number(scaleX)]
-					}
-				} else {
-					return [1, 1]
-				}
-			}
-		}
-		const [scaleX, scaleY] = getBigscreenScale()
-		const _mouseX = mouseX / scaleX
-		const _mouseY = mouseY / scaleY
-		const tipPosMap = {
-			rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
-			leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
-			leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
-			rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
-		}
-		if (_mouseX < centerX && _mouseY < centerY) {
-			return tipPosMap.leftTop
-		} else if (_mouseX > centerX && _mouseY < centerY) {
-			return tipPosMap.rightTop
-		} else if (_mouseX >= centerX && _mouseY >= centerY) {
-			return tipPosMap.rightBottom
-		} else {
-			return tipPosMap.leftBottom
-		}
-	}
-
-	return <div
-		className='__easyv-tooltip'
-		style={{
-			pointerEvents: 'none',
-			transform: getTipPos(mousePos, pieCenter),
-			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)',
-		}}
-	>
-		<dl
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				justifyContent: 'space-between',
-				height: '100%',
-			}}
-		>
-			{Item()}
-		</dl>
-
-	</div>
+import React, { memo } from 'react'
+import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
+
+
+export const PieTooltip = memo((props) => {
+	const { mousePos,
+		pieCenter,
+		config: {
+			tip: {
+				data: { lineHeight, iconSize, name,
+					value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix, suffix: { show: valueSuffixIsShow } },
+					percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix, suffix: { show: percentageSuffixIsShow }, precision },
+				},
+				image,
+				margin,
+				size: { width: tipWidth, height: tipHeight },
+				translate: translateTip,
+			},
+		},
+		data,
+		series } = props
+
+	const Item = () => {
+		const { data: { s, y }, percent } = data
+		const { type, icon, displayName } = [...series.values()].find(
+			(series) => series.name == s
+		);
+
+		const renderSuffix = (suffix) => {
+			const {
+				content,
+				font: suffiixFont,
+				translate: suffixTranslate,
+			} = suffix;
+			return (
+				<span
+					style={{
+						...getFontStyle(suffiixFont),
+						display: "inline-block",
+						transform: getTranslate3d(suffixTranslate),
+					}}
+				>
+					{content}
+				</span>
+			)
+		}
+
+		const _icon = getIcon(type, icon);
+		return (
+			<dd
+				style={{
+					display: 'flex',
+					justifyContent: 'space-between',
+					lineHeight: lineHeight + 'px',
+				}}
+
+			>
+				<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>
+				{valueIsShow && <span style={getFontStyle(valueFont)}>
+					{y}
+					{valueSuffixIsShow && renderSuffix(valueSuffix)}
+				</span>}
+				{percentageIsShow && <span style={getFontStyle(percentageFont)}>
+					{Number(percent).toFixed(precision)}
+					{percentageSuffixIsShow && renderSuffix(percentageSuffix)}
+				</span>}
+			</dd>
+		);
+	}
+	const { x: mouseX, y: mouseY } = mousePos
+	const { x: centerX, y: centerY } = pieCenter
+	const getTipPos = () => {
+
+		const getBigscreenScale = () => {
+			if (window.getScreenScale) {
+				return window.getScreenScale()
+			} else {
+				const bigscreenDom = document.getElementById('bigscreen-container')
+				if (!bigscreenDom) return [1, 1]
+				const transform = bigscreenDom.style.transform
+				if (!transform) return [1, 1]
+				let match = transform.match(/scale\(([^)]+)\)/)
+				if (match) {
+					const scaleMatch = match[1].split(',')
+					let scaleX = scaleMatch[0];
+					let scaleY = scaleMatch[1];
+					if (scaleY) {
+						return [Number(scaleX), Number(scaleY)]
+					} else {
+						return [Number(scaleX), Number(scaleX)]
+					}
+				} else {
+					return [1, 1]
+				}
+			}
+		}
+		const [scaleX, scaleY] = getBigscreenScale()
+		const _mouseX = mouseX / scaleX
+		const _mouseY = mouseY / scaleY
+		const tipPosMap = {
+			rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
+			leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
+			leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
+			rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
+		}
+		if (_mouseX < centerX && _mouseY < centerY) {
+			return tipPosMap.leftTop
+		} else if (_mouseX > centerX && _mouseY < centerY) {
+			return tipPosMap.rightTop
+		} else if (_mouseX >= centerX && _mouseY >= centerY) {
+			return tipPosMap.rightBottom
+		} else {
+			return tipPosMap.leftBottom
+		}
+	}
+
+	return <div
+		className='__easyv-tooltip'
+		style={{
+			pointerEvents: 'none',
+			transform: getTipPos(mousePos, pieCenter),
+			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)',
+		}}
+	>
+		<dl
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				justifyContent: 'space-between',
+				height: '100%',
+			}}
+		>
+			{Item()}
+		</dl>
+
+	</div>
 })

package/src/components/SplitText.tsx

@@ -1,70 +1,70 @@
-import React, { memo } from 'react';
-
-type SplitConfig = {
-	fontFamily: string;
-	separator: string;
-	show: boolean;
-	splitCount: number;
-	style: 'custom' | 'default';
-	margin: {
-		left: number;
-		right: number;
-	};
-};
-
-interface SplitProps {
-	value: number | string;
-	config: SplitConfig;
-}
-
-export default memo((props: SplitProps) => {
-	const {
-		value,
-		config: {
-			fontFamily,
-			separator,
-			show,
-			splitCount,
-			style,
-			margin: { left, right },
-		},
-	} = props;
-
-	const stringValue = String(value);
-	const [intValueString, pointValueSting = ''] = stringValue.split('.');
-
-	const intArray: (string | '分隔符')[] = [];
-
-	const pointArray = [...pointValueSting];
-
-	[...intValueString].forEach((i, index) => {
-		!(intValueString.length - index - 1) || (intValueString.length - index - 1) % splitCount
-			? intArray.push(i)
-			: (intArray.push(i), intArray.push('分隔符'));
-	});
-
-	return show ? (
-		<>
-			{intArray.map((v, index) => {
-				return (
-					<span
-						key={'int_' + index}
-						style={{
-							fontFamily: v === '分隔符' && style != 'default' ? fontFamily : 'inherit',
-							marginLeft: v === '分隔符' ? left : 0,
-							marginRight: v === '分隔符' ? right : 0,
-						}}
-					>
-						{v === '分隔符' ? (style == 'custom' && separator ? separator : ',') : v}
-					</span>
-				);
-			})}
-			{pointArray.length ? <span>.</span> : null}
-			{pointArray.map((v, index) => {
-				return <span key={'point_' + index}>{v}</span>;
-			})}
-		</>
-	) : (
-		value
-	);
-});
+import React, { memo } from 'react';
+
+type SplitConfig = {
+	fontFamily: string;
+	separator: string;
+	show: boolean;
+	splitCount: number;
+	style: 'custom' | 'default';
+	margin: {
+		left: number;
+		right: number;
+	};
+};
+
+interface SplitProps {
+	value: number | string;
+	config: SplitConfig;
+}
+
+export default memo((props: SplitProps) => {
+	const {
+		value,
+		config: {
+			fontFamily,
+			separator,
+			show,
+			splitCount,
+			style,
+			margin: { left, right },
+		},
+	} = props;
+
+	const stringValue = String(value);
+	const [intValueString, pointValueSting = ''] = stringValue.split('.');
+
+	const intArray: (string | '分隔符')[] = [];
+
+	const pointArray = [...pointValueSting];
+
+	[...intValueString].forEach((i, index) => {
+		!(intValueString.length - index - 1) || (intValueString.length - index - 1) % splitCount
+			? intArray.push(i)
+			: (intArray.push(i), intArray.push('分隔符'));
+	});
+
+	return show ? (
+		<>
+			{intArray.map((v, index) => {
+				return (
+					<span
+						key={'int_' + index}
+						style={{
+							fontFamily: v === '分隔符' && style != 'default' ? fontFamily : 'inherit',
+							marginLeft: v === '分隔符' ? left : 0,
+							marginRight: v === '分隔符' ? right : 0,
+						}}
+					>
+						{v === '分隔符' ? (style == 'custom' && separator ? separator : ',') : v}
+					</span>
+				);
+			})}
+			{pointArray.length ? <span>.</span> : null}
+			{pointArray.map((v, index) => {
+				return <span key={'point_' + index}>{v}</span>;
+			})}
+		</>
+	) : (
+		value
+	);
+});