@easyv/charts 1.4.22 → 1.4.24

package/package.json

@@ -1,55 +1,55 @@
-{
-  "name": "@easyv/charts",
-  "version": "1.4.22",
-  "description": "",
-  "main": "lib/index.js",
-  "scripts": {
-    "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
-    "prepare": "husky install"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^16.2.4",
-    "@types/d3": "^7.0.0",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
-    "babel-plugin-transform-import-styles": "^0.0.11",
-    "babel-preset-env": "^1.7.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "husky": "^7.0.4",
-    "load-styles": "^2.0.0",
-    "standard-version": "^9.3.2"
-  },
-  "dependencies": {
-    "@easyv/utils": "^0.0.45",
-    "d3v7": "npm:d3@^7.0.0",
-    "gitignore": "^0.7.0",
-    "mrm": "^4.0.0",
-    "popmotion": "^9.3.6",
-    "react": "^17.0.2",
-    "svg-path-properties": "^1.0.11",
-    "svg-points": "^6.0.1",
-    "yarn": "^1.22.19"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "standard-version": {
-    "skip": {
-      "commit": true
-    }
-  }
-}
+{
+  "name": "@easyv/charts",
+  "version": "1.4.24",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
+    "prepare": "husky install"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@types/d3": "^7.0.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "babel-plugin-transform-import-styles": "^0.0.11",
+    "babel-preset-env": "^1.7.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "husky": "^7.0.4",
+    "load-styles": "^2.0.0",
+    "standard-version": "^9.3.2"
+  },
+  "dependencies": {
+    "@easyv/utils": "^0.0.45",
+    "d3v7": "npm:d3@^7.0.0",
+    "gitignore": "^0.7.0",
+    "mrm": "^4.0.0",
+    "popmotion": "^9.3.6",
+    "react": "^17.0.2",
+    "svg-path-properties": "^1.0.11",
+    "svg-points": "^6.0.1",
+    "yarn": "^1.22.19"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "standard-version": {
+    "skip": {
+      "commit": true
+    }
+  }
+}

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/Background.tsx

@@ -1,61 +1,61 @@
-/**
- * 轴类图背景
- */
-import React from 'react';
-import { getSeriesInfo } from '../utils';
-
-export default ({
-  axis: { ticks, scaler, step, direction },
-  bandLength,
-  config: {
-    background,
-    seriesIntervalWidth: paddingInner,
-    paddingInner: paddingOuter,
-  },
-  length,
-}: {
-  axis: {
-    ticks: Array<string>;
-    scaler: Function;
-    step: number;
-    direction: string;
-  };
-  bandLength: number;
-  config: {
-    background: string;
-    seriesIntervalWidth: number;
-    paddingInner: number;
-  };
-  length: number;
-}) => {
-  const isVertical: boolean = direction === 'vertical';
-
-  const { width: bandwidth } = getSeriesInfo({
-    step,
-    bandLength,
-    paddingInner,
-    paddingOuter,
-  });
-
-  const size = isVertical
-    ? {
-        width: length,
-        height: bandwidth,
-      }
-    : {
-        width: bandwidth,
-        height: length,
-      };
-  return ticks.map((tick, index: number) => {
-    return (
-      <rect
-        key={index}
-        {...size}
-        x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
-        y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
-        fill={background}
-        stroke='none'
-      />
-    );
-  });
-};
+/**
+ * 轴类图背景
+ */
+import React from 'react';
+import { getSeriesInfo } from '../utils';
+
+export default ({
+  axis: { ticks, scaler, step, direction },
+  bandLength,
+  config: {
+    background,
+    seriesIntervalWidth: paddingInner,
+    paddingInner: paddingOuter,
+  },
+  length,
+}: {
+  axis: {
+    ticks: Array<string>;
+    scaler: Function;
+    step: number;
+    direction: string;
+  };
+  bandLength: number;
+  config: {
+    background: string;
+    seriesIntervalWidth: number;
+    paddingInner: number;
+  };
+  length: number;
+}) => {
+  const isVertical: boolean = direction === 'vertical';
+
+  const { width: bandwidth } = getSeriesInfo({
+    step,
+    bandLength,
+    paddingInner,
+    paddingOuter,
+  });
+
+  const size = isVertical
+    ? {
+        width: length,
+        height: bandwidth,
+      }
+    : {
+        width: bandwidth,
+        height: length,
+      };
+  return ticks.map((tick, index: number) => {
+    return (
+      <rect
+        key={index}
+        {...size}
+        x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
+        y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
+        fill={background}
+        stroke='none'
+      />
+    );
+  });
+};