@easyv/charts 1.4.14 → 1.4.16

package/package.json

@@ -1,54 +1,55 @@
-{
-  "name": "@easyv/charts",
-  "version": "1.4.14",
-  "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.0.3",
-    "@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"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "standard-version": {
-    "skip": {
-      "commit": true
-    }
-  }
-}
+{
+  "name": "@easyv/charts",
+  "version": "1.4.16",
+  "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,24 +8,24 @@ import React, {
   useContext,
   CSSProperties,
   MouseEventHandler,
-} from 'react';
-import { getTickCoord, getGridCoord, getFontStyle } from '../utils';
-import { chartContext } from '../context';
-import { Line } from '../element';
-import TextOverflow from './TextOverflow';
+} from "react";
+import { getTickCoord, getGridCoord, getFontStyle } from "../utils";
+import { chartContext } from "../context";
+import { Line } from "../element";
+import TextOverflow from "./TextOverflow";
 const defaultEvent = () => {};
 const defaultAppearance = {
-  angle:0,
-  count:6,
-  speed:5,
-  width:"fit-content",
-  textOverflow:"ellipsis"
+  angle: 0,
+  count: 6,
+  speed: 5,
+  width: "fit-content",
+  textOverflow: "ellipsis",
 };
 const defaultAlign: Align = {
-  textAnchor: 'middle',
-  dominantBaseline: 'middle',
+  textAnchor: "middle",
+  dominantBaseline: "middle",
 };
-const defaultOrientation = 'bottom';
+const defaultOrientation = "bottom";
 const defaultTickSize = 6;
 const defaultFormatter: (
   d: string,
@@ -37,12 +37,12 @@ const getAxesPath: (
   { width, height }: Context
 ) => string = (orientation, { width, height }) => {
   switch (orientation) {
-    case 'top':
-    case 'bottom':
-      return 'M-0.5, 0H' + width;
-    case 'left':
-    case 'right':
-      return 'M0, -0.5V' + (height + 0.5);
+    case "top":
+    case "bottom":
+      return "M-0.5, 0H" + width;
+    case "left":
+    case "right":
+      return "M0, -0.5V" + (height + 0.5);
   }
 };
 /**
@@ -59,32 +59,32 @@ const getLayout: (
   orientation: Orientation,
   rotate: number
 ) => {
-  transform:string,
+  transform: string;
   directionX: number;
   directionY: number;
 } = (orientation, rotate) => {
   switch (orientation) {
-    case 'top':
+    case "top":
       return {
-        transform:`translate(-50%,-100%) rotate(${rotate}deg)`,
+        transform: `translate(-50%,-100%) rotate(${rotate}deg)`,
         directionX: 1,
         directionY: -1,
       };
-    case 'bottom':
+    case "bottom":
       return {
-        transform:`translate(-50%,0) rotate(${rotate}deg)`,
+        transform: `translate(-50%,0) rotate(${rotate}deg)`,
         directionX: 1,
         directionY: 1,
       };
-    case 'left':
+    case "left":
       return {
-        transform:`translate(-100%,-50%) rotate(${rotate}deg)`,
+        transform: `translate(-100%,-50%) rotate(${rotate}deg)`,
         directionX: -1,
         directionY: 1,
       };
-    case 'right':
+    case "right":
       return {
-        transform:`translate(0,-50%) rotate(${rotate}deg)`,
+        transform: `translate(0,-50%) rotate(${rotate}deg)`,
         directionX: 1,
         directionY: 1,
       };
@@ -93,29 +93,45 @@ const getLayout: (
 const AxisLine: ({
   orientation,
   config,
+  isClipAxis,
+  clipAxisRange,
 }: any) => ReactComponentElement<ComponentType> | null = ({
   orientation = defaultOrientation,
   config: { show, color, lineWidth },
+  isClipAxis = false,
+  clipAxisRange = [],
 }) => {
   if (!show) return null;
   const context: Context = useContext(chartContext);
-  return (
-    <path
-      d={getAxesPath(orientation, context)}
-      stroke={color}
-      strokeWidth={lineWidth}
-    />
-  );
+  const { width, height } = context;
+  if (isClipAxis) {
+    return (
+      <>
+        {clipAxisRange.map((range: any, index: number) => {
+          return (
+            <path
+              key={index}
+              d={`M 0.5,${range[0]} L 0.5,${range[1]}`}
+              stroke={color}
+              strokeWidth={lineWidth}
+            />
+          );
+        })}
+      </>
+    );
+  } else {
+    return (
+      <path
+        d={getAxesPath(orientation, context)}
+        stroke={color}
+        strokeWidth={lineWidth}
+      />
+    );
+  }
 };
 
 const Unit: ({
-  config: {
-    show,
-    text,
-    font,
-    translate,
-    align,
-  },
+  config: { show, text, font, translate, align },
 }: any) => ReactComponentElement<ComponentType> | null = ({
   config: {
     show,
@@ -128,13 +144,13 @@ const Unit: ({
   if (!show) return null;
   return (
     <text
-      className='__easyv-unit'
-      transform={'translate(' + translateX + ', ' + translateY + ')'}
+      className="__easyv-unit"
+      transform={"translate(" + translateX + ", " + translateY + ")"}
       fontFamily={fontFamily}
       fontSize={fontSize}
       fill={color}
-      fontWeight={bold ? 'bold' : 'normal'}
-      fontStyle={italic ? 'italic' : 'normal'}
+      fontWeight={bold ? "bold" : "normal"}
+      fontStyle={italic ? "italic" : "normal"}
       letterSpacing={letterSpacing}
       textAnchor={textAnchor}
     >
@@ -144,12 +160,12 @@ const Unit: ({
 };
 
 type appearance = {
-  angle:number,
-  count:number,
-  speed:number,
-  width:number | string,
-  textOverflow:string
-}
+  angle: number;
+  count: number;
+  speed: number;
+  width: number | string;
+  textOverflow: string;
+};
 type LabelType = {
   className: string;
   orientation: Orientation;
@@ -164,7 +180,7 @@ type LabelType = {
     translate: Translate;
     font: Font;
     style: CSSProperties | Function;
-    appearance?:appearance
+    appearance?: appearance;
   };
 };
 
@@ -185,37 +201,52 @@ const Label: (
     style,
     translate: { x: translateX, y: translateY },
     font,
-    appearance :{
-      width,
-      speed,
-      textOverflow
-    } = defaultAppearance
+    appearance: { width, speed, textOverflow } = defaultAppearance,
   },
 }) => {
   if (!show) return null;
   const _label = formatter(label, config);
   const { transform, directionX, directionY } = getLayout(orientation, rotate);
-  const isVertical = orientation == 'left' || orientation == 'right';
+  const isVertical = orientation == "left" || orientation == "right";
 
   const x =
     (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
   const y =
     (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
-  const _style = style && (typeof style == 'object' ? style : style(_label));
+  const _style = style && (typeof style == "object" ? style : style(_label));
 
-  return <foreignObject width="1" height="1" x={x} y={y} style={{overflow:"visible"}}>
-    <div 
-      className={className}
-      onClick={onClick}
-      data-data={JSON.stringify({ x: label })}
-      style={{
-        ..._style,
-        ...getFontStyle(font)
-      }}>
-      <TextOverflow type={textOverflow} speed={speed} value={_label} style={{width,transform,textAlign:"center", justifyContent:"center"}}></TextOverflow>
-    </div>
-  </foreignObject>
+  return (
+    <foreignObject
+      width="1"
+      height="1"
+      x={x}
+      y={y}
+      style={{ overflow: "visible" }}
+    >
+      <div
+        className={className}
+        onClick={onClick}
+        data-data={JSON.stringify({ x: label })}
+        style={{
+          ..._style,
+          ...getFontStyle(font),
+        }}
+      >
+        <TextOverflow
+          type={textOverflow}
+          speed={speed}
+          value={_label}
+          style={{
+            width,
+            transform,
+            textAlign: "center",
+            justifyContent: "center",
+          }}
+        ></TextOverflow>
+      </div>
+    </foreignObject>
+  );
 };
 
 export default memo(
@@ -228,23 +259,133 @@ export default memo(
     rotate,
     triggerClick,
     config: { on, label, axisLine, tickLine, gridLine, unit },
+    config,
     positions,
     xLineRange,
-    yLineRange
+    //断轴图相关
+    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;
+    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,
+          });
+
+          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,
+                })}
+              />
+            )
+          );
+        });
+      };
+
+      if (isClipAxis) {
+        return (
+          <>
+            {ticks.map((ticks: any, index: number) => {
+              return draw(ticks, scaler[index]);
+            })}
+          </>
+        );
+      } 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,
+          });
+          const x1 = gridCoord.x1;
+          const y1 = gridCoord.y1;
+          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>
+          );
+        })
+      }
+      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 + ')'}>
+                  <g key={index} transform={"translate(" + x + ", " + y + ")"}>
                     <AxisLine orientation={orientation} config={axisLine} />
                     {tickLine &&
                       ticks.map((tick: string, index: number) => {
@@ -255,104 +396,52 @@ export default memo(
                           orientation,
                           coordinate,
                           end:
-                            orientation == 'left' || orientation == 'right'
+                            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,
-                            })}
-                          />
+                          !(
+                            (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} />
-                  {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 transform={"translate(" + x + ", " + y + ")"}>
+                  <AxisLine
+                    orientation={orientation}
+                    config={axisLine}
+                    isClipAxis={isClipAxis}
+                    clipAxisRange={clipAxisRange}
+                  />
+                  {tickLine && drawYAxisTickLine()}
                 </g>
               ))}
           </>
         )}
+        {/* 绘制标签和网格线 */}
         <g transform={'translate(' + x + ', ' + y + ')'}>
           {label &&
-            gridLine &&
-            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)) && <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>
-              );
-            })}
+            gridLine && drawLabel()
+            }
           {unit && <Unit config={unit} />}
         </g>
       </>