@easyv/charts 1.4.22 → 1.4.25

package/src/components/Axis.tsx

@@ -8,11 +8,13 @@ import React, {
   useContext,
   CSSProperties,
   MouseEventHandler,
+  forwardRef,
 } from "react";
 import { getTickCoord, getGridCoord, getFontStyle } from "../utils";
 import { chartContext } from "../context";
 import { Line } from "../element";
 import TextOverflow from "./TextOverflow";
+import { path } from "d3";
 const defaultEvent = () => {};
 const defaultAppearance = {
   angle: 0,
@@ -250,201 +252,239 @@ const Label: (
 };
 
 export default memo(
-  ({
-    orientation,
-    scaler,
-    tickSize = defaultTickSize,
-    ticks,
-    formatter,
-    rotate,
-    triggerClick,
-    config: { on, label, axisLine, tickLine, gridLine, unit },
-    config,
-    positions,
-    xLineRange,
-    //断轴图相关
-    isClipAxis = false,
-    yLineRange,
-    clipAxisRange,
-  }: any) => {
-    if (!(on && ticks.length > 0)) return null;
-    const { width, height } = useContext(chartContext);
-    const x = orientation == "right" ? width : 0;
-    const y = orientation == "bottom" ? height : 0;
+  forwardRef(
+    (
+      {
+        orientation,
+        scaler,
+        tickSize = defaultTickSize,
+        ticks,
+        formatter,
+        rotate,
+        triggerClick,
+        config: { on, label, axisLine, tickLine, gridLine, unit },
+        config,
+        positions,
+        xLineRange,
+        range,
+        axisType,
+        //断轴图相关
+        isClipAxis = false,
+        yLineRange,
+        clipAxisRange,
+        //控制图相关
+        isControlChart,
+        controlConfig,
+        controlEnd,
+        rawTicks,
+      }: any,
+      ref
+    ) => {
+      if (!(on && ticks.length > 0)) return null;
+      const { width, height } = useContext(chartContext);
+      const x = orientation == "right" ? width : 0;
+      const y = orientation == "bottom" ? height : 0;
 
-    function drawYAxisTickLine() {
-      const draw = (ticks: any, scaler: any) => {
-        return ticks.map((tick: string, index: number) => {
-          const coordinate = scaler(tick);
-          if (isNaN(coordinate)) return null;
-          const _tickSize = tickLine.tickSize || tickSize;
-          const gridCoord = getGridCoord({
-            orientation,
-            coordinate,
-            end:
-              orientation == "left" || orientation == "right" ? width : height,
+      function drawAxisTickLine() {
+        const draw = (ticks: any, scaler: any) => {
+          return ticks.map((tick: string, index: number) => {
+            const coordinate = scaler(tick);
+            if (isNaN(coordinate)) return null;
+            const _tickSize = tickLine.tickSize || tickSize;
+            const gridCoord = getGridCoord({
+              orientation,
+              coordinate,
+              end:
+                orientation == "left" || orientation == "right"
+                  ? width
+                  : height,
+            });
+
+            const x1 = gridCoord.x1;
+            const y1 = gridCoord.y1;
+            return (
+              !(
+                (orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) ||
+                y1 < 0 ||
+                y1 > yLineRange
+              ) && (
+                <Line
+                  className="__easyv-tickLine"
+                  key={index}
+                  config={tickLine}
+                  {...getTickCoord({
+                    orientation,
+                    coordinate,
+                    tickSize: _tickSize,
+                  })}
+                />
+              )
+            );
           });
+        };
 
-          const x1 = gridCoord.x1;
-          const y1 = gridCoord.y1;
+        if (isClipAxis) {
           return (
-            !(
-              (orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) ||
-              y1 < 0 ||
-              y1 > yLineRange
-            ) && (
-              <Line
-                className="__easyv-tickLine"
-                key={index}
-                config={tickLine}
-                {...getTickCoord({
-                  orientation,
-                  coordinate,
-                  tickSize: _tickSize,
-                })}
-              />
-            )
+            <>
+              {ticks.map((ticks: any, index: number) => {
+                return draw(ticks, scaler[index]);
+              })}
+            </>
           );
-        });
-      };
-
-      if (isClipAxis) {
-        return (
-          <>
-            {ticks.map((ticks: any, index: number) => {
-              return draw(ticks, scaler[index]);
-            })}
-          </>
-        );
-      } else {
-        return <>{draw(ticks, scaler)}</>;
+        } else {
+          return <>{draw(ticks, scaler)}</>;
+        }
       }
-    }
 
-    function drawLabel() {
-      const draw = (ticks: any, scaler: any) => {
-        return ticks.map((tick: string, index: number) => {
-          const coordinate = scaler(tick);
-          if (isNaN(coordinate)) return null;
-          const _tickSize = tickLine.tickSize || tickSize;
-          const gridCoord = getGridCoord({
-            orientation,
-            coordinate,
-            end:
-              orientation == 'left' || orientation == 'right'
-                ? width
-                : height,
+      function drawLabel() {
+        const draw = (ticks: any, scaler: any) => {
+          return ticks.map((tick: string, index: number) => {
+            const coordinate = scaler(tick);
+            if (isNaN(coordinate)) return null;
+            const _tickSize = tickLine.tickSize || tickSize;
+            const gridCoord = getGridCoord({
+              orientation,
+              coordinate,
+              end:
+                orientation == "left" || orientation == "right"
+                  ? width
+                  : height,
+            });
+            const x1 = gridCoord.x1;
+            const y1 = gridCoord.y1;
+            return (
+              (!(
+                (orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) ||
+                y1 < 0 ||
+                y1 > yLineRange
+              ) ||
+                isControlChart) && (
+                <g key={index}>
+                  {label && (
+                    <Label
+                      className="__easyv-label"
+                      orientation={orientation}
+                      coordinate={coordinate}
+                      config={label}
+                      label={tick}
+                      tickSize={_tickSize}
+                      formatter={formatter}
+                      rotate={rotate}
+                      onClick={triggerClick}
+                    />
+                  )}
+                  {gridLine && (
+                    <Line
+                      className="__easyv-gridLine"
+                      config={gridLine}
+                      {...gridCoord}
+                    />
+                  )}
+                </g>
+              )
+            );
           });
-          const x1 = gridCoord.x1;
-          const y1 = gridCoord.y1;
+        };
+        if (isClipAxis) {
           return (
-            !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange)) && <g key={index}>
-              {label && (
-                <Label
-                  className='__easyv-label'
-                  orientation={orientation}
-                  coordinate={coordinate}
-                  config={label}
-                  label={tick}
-                  tickSize={_tickSize}
-                  formatter={formatter}
-                  rotate={rotate}
-                  onClick={triggerClick}
-                />
-              )}
-              {gridLine && (
-                <Line
-                  className='__easyv-gridLine'
-                  config={gridLine}
-                  {...gridCoord}
-                />
-              )}
-            </g>
+            <>
+              {ticks.map((ticks: any, index: number) => {
+                return draw(ticks, scaler[index]);
+              })}
+            </>
           );
-        })
+        } else if (isControlChart && orientation == "bottom") {
+          return <>{draw(rawTicks, scaler)}</>;
+        } else {
+          return <>{draw(ticks, scaler)}</>;
+        }
       }
-      if (isClipAxis) {
-        return (
-          <>
-            {ticks.map((ticks: any, index: number) => {
-              return draw(ticks, scaler[index]);
-            })}
-          </>
-        );
-      } else {
-        return <>{draw(ticks, scaler)}</>;
-      }
-    }
 
-    return (
-      <>
-        {/* 绘制轴线和刻度 */}
-        {axisLine && tickLine && (
-          <>
-            {axisLine &&
-              // 依据positions来区分x轴y轴，有position为x轴
-              (positions && positions.length ? (
-                positions.map(({ x, y }: any, index: number) => (
-                  <g key={index} transform={"translate(" + x + ", " + y + ")"}>
-                    <AxisLine orientation={orientation} config={axisLine} />
-                    {tickLine &&
-                      ticks.map((tick: string, index: number) => {
-                        const coordinate = scaler(tick);
-                        if (isNaN(coordinate)) return null;
-                        const _tickSize = tickLine.tickSize || tickSize;
-                        const gridCoord = getGridCoord({
-                          orientation,
-                          coordinate,
-                          end:
-                            orientation == "left" || orientation == "right"
-                              ? width
-                              : height,
-                        });
-                        const x1 = gridCoord.x1;
-                        const y1 = gridCoord.y1;
-                        return (
-                          !(
-                            (orientation == "bottom" &&
-                              (x1 < 0 || x1 > xLineRange)) ||
-                            y1 < 0 ||
-                            y1 > yLineRange
-                          ) && (
-                            <Line
-                              className="__easyv-tickLine"
-                              key={index}
-                              config={tickLine}
-                              {...getTickCoord({
-                                orientation,
-                                coordinate,
-                                tickSize: _tickSize,
-                              })}
-                            />
-                          )
-                        );
-                      })}
+      return (
+        <g>
+          {/* 绘制轴线和刻度 */}
+          {axisLine && tickLine && (
+            <g>
+              {axisLine &&
+                (positions && positions.length ? (
+                  positions.map(({ x, y }: any, index: number) => (
+                    <g
+                      key={index}
+                      transform={"translate(" + x + ", " + y + ")"}
+                    >
+                      <AxisLine
+                        orientation={orientation}
+                        config={axisLine}
+                        range={range}
+                      />
+                      {tickLine &&
+                        ticks.map((tick: string, index: number) => {
+                          const coordinate = scaler(tick);
+                          if (isNaN(coordinate)) return null;
+                          const _tickSize = tickLine.tickSize || tickSize;
+                          const gridCoord = getGridCoord({
+                            orientation,
+                            coordinate,
+                            end:
+                              orientation == "left" || orientation == "right"
+                                ? width
+                                : height,
+                          });
+                          const x1 = gridCoord.x1;
+                          const y1 = gridCoord.y1;
+                          return (
+                            !(
+                              (orientation == "bottom" &&
+                                (x1 < 0 || x1 > xLineRange)) ||
+                              y1 < 0 ||
+                              y1 > yLineRange
+                            ) && (
+                              <Line
+                                className="__easyv-tickLine"
+                                key={index}
+                                config={tickLine}
+                                {...getTickCoord({
+                                  orientation,
+                                  coordinate,
+                                  tickSize: _tickSize,
+                                })}
+                              />
+                            )
+                          );
+                        })}
+                    </g>
+                  ))
+                ) : (
+                  <g transform={"translate(" + x + ", " + y + ")"}>
+                    <AxisLine
+                      orientation={orientation}
+                      config={axisLine}
+                      isClipAxis={isClipAxis}
+                      clipAxisRange={clipAxisRange}
+                    />
+                    {tickLine && drawAxisTickLine()}
                   </g>
-                ))
-              ) : (
-                <g transform={"translate(" + x + ", " + y + ")"}>
-                  <AxisLine
-                    orientation={orientation}
-                    config={axisLine}
-                    isClipAxis={isClipAxis}
-                    clipAxisRange={clipAxisRange}
-                  />
-                  {tickLine && drawYAxisTickLine()}
-                </g>
-              ))}
-          </>
-        )}
-        {/* 绘制标签和网格线 */}
-        <g transform={'translate(' + x + ', ' + y + ')'}>
-          {label &&
-            gridLine && drawLabel()
-            }
-          {unit && <Unit config={unit} />}
+                ))}
+            </g>
+          )}
+          {/* 绘制标签和网格线 */}
+          <svg
+            width={width}
+            style={{
+              overflow:
+                axisType !== "x" && isControlChart ? "visible" : "hidden",
+            }}
+          >
+            <g transform={"translate(" + x + ", " + y + ")"}>
+              {/* 用于控制图 */}
+              <g ref={ref as any}>
+                {label && gridLine && drawLabel()}
+                {unit && <Unit config={unit} />}
+              </g>
+            </g>
+          </svg>
         </g>
-      </>
-    );
-  }
+      );
+    }
+  )
 );

package/src/components/Band.tsx

@@ -66,7 +66,15 @@ const getBorderRadius = ({
 
 export default memo(
   ({
+    //控制图部分，主要是为了控制图的指示器，在悬浮的时候显示
     triggerClick,
+    indicatorWidth,
+    setControlChartTooltipShow,
+    setControlChartTooltipX,
+    setControlChartTooltipXName,
+    isControlChart = false,
+    setControlChartIndicatorList,
+
     config: {
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
@@ -84,6 +92,7 @@ export default memo(
     bandLength = 0,
     data,
     xAxis: { scaler: xScaler, step, direction },
+    xAxis,
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
   }: any) => {
     if (!data.length) return null;
@@ -112,8 +121,7 @@ export default memo(
             }: DataWithBoundType,
             i: number
           ) => {
-            //todo 柱状中空设置
-            let y1:number, y2: number;
+            let y1: number, y2: number;
             //断轴图相关，断轴图的scaler是一个数组，内含上断轴下断轴的scaler
             if (isClipAxis) {
               if (end > +clipValue) {
@@ -144,9 +152,9 @@ export default memo(
               if (isClipAxis && end > +clipValue) {
                 let clipValueY2 = yScaler[0](clipValue); //上方
                 let clipValueY1 = yScaler[1](clipValue); //下方
-                let top = Math.abs((y2-clipValueY2)/(y1-y2))*100;
-                let bottom = Math.abs((y2-clipValueY1)/(y1-y2))*100;
-      
+                let top = Math.abs((y2 - clipValueY2) / (y1 - y2)) * 100;
+                let bottom = Math.abs((y2 - clipValueY1) / (y1 - y2)) * 100;
+
                 //clip path属性
                 return `polygon(0% 0%, 0% 100%, 0 100%, 0 ${top}%, 100% ${top}%, 100% ${bottom}%, 0 ${bottom}%, 0 100%, 100% 100%, 100% 0%)`;
               } else {
@@ -172,6 +180,33 @@ export default memo(
                 }}
                 {...attr}
                 onClick={triggerClick}
+                //enter和leave事件，用于控制图的提示框
+                onMouseEnter={() => {
+                  if (isControlChart) {
+                    setControlChartIndicatorList((v: any) => {
+                      return v.map((item: any) => {
+                        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: any) =>
+                      v.map((item: any) => ({ ...item, isShow: false }))
+                    );
+                    setControlChartTooltipShow(false);
+                    setControlChartTooltipXName(undefined);
+                    setControlChartTooltipX(undefined);
+                  }
+                }}
                 data-data={JSON.stringify(data)}
               >
                 {headUrl && showHead && (