@easyv/charts 1.0.68 → 1.0.72

package/src/components/Label.js

@@ -1,196 +1,206 @@
-/**
- * 轴类图表标签
- */
-import { memo, useContext } from 'react';
-import {
-  getTranslate2d,
-  getBandwidth,
-  getBandSeriesStepAndWidth,
-} from '../utils';
-import { chartContext } from '../context';
-
-export default memo(
-  ({
-    config: {
-      seriesIntervalWidth: paddingInner = 0,
-      paddingInner: paddingOuter = 0,
-      label,
-      icon,
-    },
-    config,
-    bandLength = 0,
-    data,
-    xAxis: { scaler: xScaler, step, direction },
-    yAxis: { scaler: yScaler },
-    triggerClick,
-  }) => {
-    const lineType = config.hasOwnProperty('line') //堆叠处理
-    const showIcon = icon && icon.show;
-    const showLabel = label && label.show;
-
-    if (!(data.length && (showIcon || showLabel))) return null;
-    const { width, height } = useContext(chartContext);
-    const bandwidth = getBandwidth(step, paddingOuter);
-    const { seriesStep, seriesWidth } = getBandSeriesStepAndWidth({
-      width: bandwidth,
-      paddingInner,
-      bandLength,
-    });
-
-    const offset =
-      (seriesWidth + paddingInner * seriesStep) * bandLength -
-      paddingInner * seriesStep;
-    const isVertical = direction === 'vertical';
-    const _position = label.position;
-    return (
-      <g className='__easyv-label'>
-        {data.map(
-          ({ index, bound: [start, end], data, data: { x, y, showY, s } }, i) => {
-            const y1 = yScaler(isVertical ? end : start);
-            //处理z型折线图和堆叠柱图的逻辑冲突
-            const y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end);
-            // const y2 =  yScaler(isVertical ? start : end);
-            const positionX = xScaler(x) + seriesStep * index - offset / 2;
-            if (isNaN(positionX)) return null;
-            const position = positionX + seriesWidth / 2;
-            const labelPosition = isVertical
-              ? getVerticalLabel({
-                position: _position,
-                y,
-                y1,
-                y2,
-                width,
-              })
-              : getHorizontalLabel({
-                position: _position,
-                y,
-                y1,
-                y2,
-                height,
-              });
-            const attr = isVertical
-              ? {
-                ...labelPosition,
-                y: position,
-                dominantBaseline: 'middle',
-              }
-              : {
-                ...labelPosition,
-                x: position,
-                textAnchor: 'middle',
-              };
-            return (
-              <g
-                key={i}
-                onClick={triggerClick}
-                data-data={JSON.stringify(data)}
-              >
-                {showIcon && <Icon cx={attr.x} cy={attr.y} config={icon} />}
-                {showLabel && <Label value={showY} config={label} {...attr} />}
-              </g>
-            );
-          }
-        )}
-      </g>
-    );
-  }
-);
-
-const Label = ({
-  x,
-  y,
-  value,
-  config: {
-    font,
-    translate: { x: translateX = 0, y: translateY = 0 },
-  },
-  textAnchor = 'middle',
-  dominantBaseline = 'middle',
-}) => {
-  return (
-    <text
-      x={x}
-      y={y}
-      transform={getTranslate2d({
-        x: translateX,
-        y: translateY * (value >= 0 ? 1 : -1),
-      })}
-      textAnchor={textAnchor}
-      dominantBaseline={dominantBaseline}
-      {...font}
-    >
-      {value}
-    </text>
-  );
-};
-const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius } }) =>
-  mode == 'single' ? (
-    <Circle cx={cx} cy={cy} color={color} radius={radius} />
-  ) : (
-    <>
-      <Circle cx={cx} cy={cy} {...inner} />
-      <Circle cx={cx} cy={cy} {...outer} />
-    </>
-  );
-const Circle = ({ cx, cy, color, radius }) => (
-  <circle cx={cx} cy={cy} fill={color} r={radius} stroke='none' />
-);
-
-const getVerticalLabel = ({ position = 'outerStart', width, y, y1, y2 }) => {
-  switch (position) {
-    case 'start':
-      return {
-        x: y > 0 ? y2 : y1,
-        textAnchor: 'start',
-      };
-    case 'middle':
-      return {
-        x: (y1 + y2) / 2,
-        textAnchor: 'middle',
-      };
-    case 'end':
-      return {
-        x: y > 0 ? y1 : y2,
-        textAnchor: 'end',
-      };
-    case 'outerStart':
-      return {
-        x: y1,
-        textAnchor: y > 0 ? 'start' : 'end',
-      };
-    case 'chartStart':
-      return {
-        x: y > 0 ? width : 0,
-        textAnchor: y > 0 ? 'start' : 'end',
-      };
-  }
-};
-const getHorizontalLabel = ({ position = 'outerStart', height, y, y1, y2 }) => {
-  switch (position) {
-    case 'start':
-      return {
-        y: y > 0 ? y1 : y2,
-        dominantBaseline: 'text-after-edge',
-      };
-    case 'middle':
-      return {
-        y: (y1 + y2) / 2,
-        dominantBaseline: 'middle',
-      };
-    case 'end':
-      return {
-        y: y > 0 ? y2 : y1,
-        dominantBaseline: 'text-before-edge',
-      };
-    case 'outerStart':
-      return {
-        y: y2,
-        dominantBaseline: y >= 0 ? 'text-after-edge' : 'text-before-edge',
-      };
-    case 'chartStart':
-      return {
-        y: y > 0 ? 0 : height,
-        dominantBaseline: y > 0 ? 'text-after-edge' : 'text-before-edge',
-      };
-  }
-};
+/**
+ * 轴类图表标签
+ */
+import { memo, useContext } from 'react';
+import {
+  getTranslate2d,
+  getBandwidth,
+  getBandSeriesStepAndWidth,
+} from '../utils';
+import { chartContext } from '../context';
+
+export default memo(
+  ({
+    config: {
+      seriesIntervalWidth: paddingInner = 0,
+      paddingInner: paddingOuter = 0,
+      label,
+      icon,
+    },
+    config,
+    bandLength = 0,
+    data,
+    xAxis: { scaler: xScaler, step, direction },
+    yAxis: { scaler: yScaler },
+    triggerClick,
+  }) => {
+    const lineType = config.hasOwnProperty('line') //堆叠处理
+    const showIcon = icon && icon.show;
+    const showLabel = label && label.show;
+
+    if (!(data.length && (showIcon || showLabel))) return null;
+    const { width, height } = useContext(chartContext);
+    const bandwidth = getBandwidth(step, paddingOuter);
+    const { seriesStep, seriesWidth } = getBandSeriesStepAndWidth({
+      width: bandwidth,
+      paddingInner,
+      bandLength,
+    });
+
+    const offset =
+      (seriesWidth + paddingInner * seriesStep) * bandLength -
+      paddingInner * seriesStep;
+    const isVertical = direction === 'vertical';
+    const _position = label.position;
+    return (
+      <g className='__easyv-label'>
+        {data.map(
+          ({ index, bound: [start, end], data, data: { x, y, showY, s } }, i) => {
+            const y1 = yScaler(isVertical ? end : start);
+            //处理z型折线图和堆叠柱图的逻辑冲突
+            const y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end);
+            // const y2 =  yScaler(isVertical ? start : end);
+            const positionX = xScaler(x) + seriesStep * index - offset / 2;
+            if (isNaN(positionX)) return null;
+            const position = positionX + seriesWidth / 2;
+            const labelPosition = isVertical
+              ? getVerticalLabel({
+                position: _position,
+                y,
+                y1,
+                y2,
+                width,
+              })
+              : getHorizontalLabel({
+                position: _position,
+                y,
+                y1,
+                y2,
+                height,
+              });
+            const attr = isVertical
+              ? {
+                ...labelPosition,
+                y: position,
+                dominantBaseline: 'middle',
+              }
+              : {
+                ...labelPosition,
+                x: position,
+                textAnchor: 'middle',
+              };
+            return (
+              <g
+                key={i}
+                onClick={triggerClick}
+                data-data={JSON.stringify(data)}
+              >
+                {showIcon && <Icon cx={attr.x} cy={attr.y} config={icon} />}
+                {showLabel && <Label value={showY} config={label} {...attr} />}
+              </g>
+            );
+          }
+        )}
+      </g>
+    );
+  }
+);
+
+const Label = ({
+  x,
+  y,
+  value,
+  config: {
+    font,
+    translate: { x: translateX = 0, y: translateY = 0 },
+  },
+  textAnchor = 'middle',
+  dominantBaseline = 'middle',
+}) => {
+  return (
+    <text
+      x={x}
+      y={y}
+      transform={getTranslate2d({
+        x: translateX,
+        y: translateY * (value >= 0 ? 1 : -1),
+      })}
+      textAnchor={textAnchor}
+      dominantBaseline={dominantBaseline}
+      {...font}
+    >
+      {value}
+    </text>
+  );
+};
+const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius, image, size: { width, height } } }) =>
+  mode == 'single' ? (
+    <Circle cx={cx} cy={cy} color={color} radius={radius} />
+  ) : mode == 'double' ? (
+    <>
+      <Circle cx={cx} cy={cy} {...inner} />
+      <Circle cx={cx} cy={cy} {...outer} />
+    </>
+  ) : (
+    <>
+      <image
+        width={width}
+        height={height}
+        x={cx - width / 2}
+        y={cy - height / 2}
+        xlinkHref={window.appConfig.ASSETS_URL + image} />
+    </>
+  );
+
+const Circle = ({ cx, cy, color, radius }) => (
+  <circle cx={cx} cy={cy} fill={color} r={radius} stroke='none' />
+);
+
+const getVerticalLabel = ({ position = 'outerStart', width, y, y1, y2 }) => {
+  switch (position) {
+    case 'start':
+      return {
+        x: y > 0 ? y2 : y1,
+        textAnchor: 'start',
+      };
+    case 'middle':
+      return {
+        x: (y1 + y2) / 2,
+        textAnchor: 'middle',
+      };
+    case 'end':
+      return {
+        x: y > 0 ? y1 : y2,
+        textAnchor: 'end',
+      };
+    case 'outerStart':
+      return {
+        x: y1,
+        textAnchor: y > 0 ? 'start' : 'end',
+      };
+    case 'chartStart':
+      return {
+        x: y > 0 ? width : 0,
+        textAnchor: y > 0 ? 'start' : 'end',
+      };
+  }
+};
+const getHorizontalLabel = ({ position = 'outerStart', height, y, y1, y2 }) => {
+  switch (position) {
+    case 'start':
+      return {
+        y: y > 0 ? y1 : y2,
+        dominantBaseline: 'text-after-edge',
+      };
+    case 'middle':
+      return {
+        y: (y1 + y2) / 2,
+        dominantBaseline: 'middle',
+      };
+    case 'end':
+      return {
+        y: y > 0 ? y2 : y1,
+        dominantBaseline: 'text-before-edge',
+      };
+    case 'outerStart':
+      return {
+        y: y2,
+        dominantBaseline: y >= 0 ? 'text-after-edge' : 'text-before-edge',
+      };
+    case 'chartStart':
+      return {
+        y: y > 0 ? 0 : height,
+        dominantBaseline: y > 0 ? 'text-after-edge' : 'text-before-edge',
+      };
+  }
+};