@easyv/charts 1.4.22 → 1.4.24

package/src/components/Label.js

@@ -1,242 +1,275 @@
-/**
- * 轴类图表标签
- */
-import { memo, useContext } from "react";
-import { getTranslate2d, getSeriesInfo, getFontStyle } 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, isClipAxis, clipValue },
-    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
-          ) => {
-            let y1, y2;
-            if (isClipAxis) {
-              if (end > +clipValue) {
-                y1 = yScaler[1](start);
-                y2 = yScaler[0](end);
-              } else {
-                y1 = yScaler[1](start);
-                y2 = yScaler[1](end);
-              }
-            } else {
-              y1 = yScaler(isVertical ? end : start);
-              //  处理z型折线图和堆叠柱图的逻辑冲突
-              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 + (config.line ? step : 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}
-                style={{ cursor: "pointer" }}
-                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 },
-    suffix:{
-      content, font:suffixFont, translate:{ x:suffixX, y:suffixY }
-    }
-  },
-  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}
-    >
-      <tspan>{value}</tspan>
-      <tspan dx={suffixX} dy={suffixY} style={{
-        ...getFontStyle(suffixFont,"svg")
-      }}>{content}</tspan>
-    </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} {...outer} />
-      <Circle cx={cx} cy={cy} {...inner} />
-    </>
-  ) : (
-    <>
-      <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, getFontStyle } 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, isClipAxis, clipValue },
+    triggerClick,
+    //控制图相关
+    indicatorWidth,
+    setControlChartTooltipShow,
+    setControlChartTooltipX,
+    setControlChartTooltipXName,
+    isControlChart = false,
+    setControlChartIndicatorList = null,
+  }) => {
+    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
+          ) => {
+            let y1, y2;
+            if (isClipAxis) {
+              if (end > +clipValue) {
+                y1 = yScaler[1](start);
+                y2 = yScaler[0](end);
+              } else {
+                y1 = yScaler[1](start);
+                y2 = yScaler[1](end);
+              }
+            } else {
+              y1 = yScaler(isVertical ? end : start);
+              //  处理z型折线图和堆叠柱图的逻辑冲突
+              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 + (config.line ? step : 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}
+                onMouseEnter={() => {
+                  if (isControlChart) {
+                    setControlChartIndicatorList((v) => {
+                      return v.map((item) => {
+                        if (item.tick === data.x) {
+                          return { ...item, isShow: true };
+                        } else {
+                          return item;
+                        }
+                      });
+                    });
+                    setControlChartTooltipShow(true);
+                    setControlChartTooltipX(xScaler(x) - indicatorWidth / 2);
+                    setControlChartTooltipXName(data.x);
+                  }
+                }}
+                onMouseLeave={() => {
+                  if (isControlChart) {
+                    setControlChartIndicatorList((v) =>
+                      v.map((item) => ({ ...item, isShow: false }))
+                    );
+                    setControlChartTooltipShow(false);
+                    setControlChartTooltipXName(undefined);
+                    setControlChartTooltipX(undefined);
+                  }
+                }}
+                style={{ cursor: "pointer" }}
+                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 },
+    suffix:{
+      content, font:suffixFont, translate:{ x:suffixX, y:suffixY }
+    }
+  },
+  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}
+    >
+      <tspan>{value}</tspan>
+      <tspan dx={suffixX} dy={suffixY} style={{
+        ...getFontStyle(suffixFont,"svg")
+      }}>{content}</tspan>
+    </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} {...outer} />
+      <Circle cx={cx} cy={cy} {...inner} />
+    </>
+  ) : (
+    <>
+      <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",
+      };
+  }
+};