@easyv/charts 1.2.11 → 1.3.0

package/src/components/Label.js

@@ -1,206 +1,225 @@
-/**
- * 轴类图表标签
- */
-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',
-      };
-  }
-};
+/**
+ * 轴类图表标签
+ */
+import { memo, useContext } from 'react';
+import { getTranslate2d, getSeriesInfo } 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 { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
+      step,
+      bandLength,
+      paddingInner,
+      paddingOuter,
+    });
+
+    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) - step / 2 + seriesStart + index * seriesStep;
+
+            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 && !isNaN(attr.y) && (
+                  <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',
+      };
+  }
+};