@easyv/charts 1.7.37 → 1.8.0

package/src/components/ChartContainer.tsx

@@ -1,71 +1,71 @@
-/**
- * svg外框
- */
-import React, {
-  memo,
-  forwardRef,
-  ReactChild,
-  ReactEventHandler,
-  LegacyRef,
-} from "react";
-const event = () => {};
-
-type Props = {
-  width: number;
-  height: number;
-  marginLeft: number;
-  marginTop: number;
-  style: Object;
-  children: ReactChild;
-  onMouseEnter: ReactEventHandler;
-  onMouseLeave: ReactEventHandler;
-  onClick: ReactEventHandler;
-  onMouseMove: ReactEventHandler;
-  onMouseOut: ReactEventHandler;
-};
-
-export default memo(
-  forwardRef(
-    (
-      {
-        width,
-        height,
-        marginLeft,
-        marginTop,
-        style,
-        children,
-        onMouseEnter = event,
-        onMouseLeave = event,
-        onClick = event,
-        onMouseMove = event,
-        onMouseOut = event,
-      }: Props,
-      ref: LegacyRef<SVGSVGElement>
-    ) => {
-      return (
-        <svg
-          className="__easyv-svg"
-          width={width}
-          height={height}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          onMouseOut={onMouseOut}
-          onClick={onClick}
-          onMouseMove={onMouseMove}
-          ref={ref}
-          style={{
-            overflow: "visible",
-            position: "absolute",
-            width,
-            height,
-            ...style,
-          }}
-        >
-          <g transform={"translate(" + marginLeft + ", " + marginTop + ")"}>
-            {children}
-          </g>
-        </svg>
-      );
-    }
-  )
-);
+/**
+ * svg外框
+ */
+import React, {
+  memo,
+  forwardRef,
+  ReactChild,
+  ReactEventHandler,
+  LegacyRef,
+} from "react";
+const event = () => {};
+
+type Props = {
+  width: number;
+  height: number;
+  marginLeft: number;
+  marginTop: number;
+  style: Object;
+  children: ReactChild;
+  onMouseEnter: ReactEventHandler;
+  onMouseLeave: ReactEventHandler;
+  onClick: ReactEventHandler;
+  onMouseMove: ReactEventHandler;
+  onMouseOut: ReactEventHandler;
+};
+
+export default memo(
+  forwardRef(
+    (
+      {
+        width,
+        height,
+        marginLeft,
+        marginTop,
+        style,
+        children,
+        onMouseEnter = event,
+        onMouseLeave = event,
+        onClick = event,
+        onMouseMove = event,
+        onMouseOut = event,
+      }: Props,
+      ref: LegacyRef<SVGSVGElement>
+    ) => {
+      return (
+        <svg
+          className="__easyv-svg"
+          width={width}
+          height={height}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onMouseOut={onMouseOut}
+          onClick={onClick}
+          onMouseMove={onMouseMove}
+          ref={ref}
+          style={{
+            overflow: "visible",
+            position: "absolute",
+            width,
+            height,
+            ...style,
+          }}
+        >
+          <g transform={"translate(" + marginLeft + ", " + marginTop + ")"}>
+            {children}
+          </g>
+        </svg>
+      );
+    }
+  )
+);

package/src/components/ConicalGradient.js

@@ -1,258 +1,258 @@
-/**
- * 饼图装饰内圈
- */
-import React, { useEffect, useState } from 'react';
-import { arc } from 'd3v7';
-import { converColor } from '@easyv/utils/lib/common/utils';
-import css from '../css/index.module.css';
-
-export default ({
-  width,
-  height,
-  centerX,
-  centerY,
-  radius,
-  config: { show, innerRadius, outerRadius, opacity, speed, direction },
-  arcs,
-}) => {
-  if (!show) return null;
-  const [canvas, setCanvas] = useState(null);
-
-  useEffect(() => {
-    if (arcs && arcs.length > 0 && canvas && canvas.getContext('2d')) {
-      const _radius = radius * devicePixelRatio;
-      const context = canvas.getContext('2d');
-      context.clearRect(
-        0,
-        0,
-        width * devicePixelRatio,
-        height * devicePixelRatio
-      );
-
-      context.save();
-      context.translate(centerX * devicePixelRatio, centerY * devicePixelRatio);
-      context.beginPath();
-
-      const _arc = arc()
-        .innerRadius(innerRadius * _radius)
-        .outerRadius(outerRadius * _radius)
-        // .padAngle(axis.pole.padAngle)
-        // .cornerRadius(axis.pole.cornerRadius)
-        .context(context);
-
-      arcs.forEach((element) => {
-        const startAngle = element.arc.startAngle()();
-        const endAngle = element.arc.endAngle()();
-        _arc.startAngle(startAngle).endAngle(endAngle)();
-        context.fillStyle = 'rgba(255, 255, 255, 0)';
-        context.fill();
-      });
-
-      context.clip();
-      context.rotate(-Math.PI / 2);
-
-      const conic = new ConicalGradient();
-      arcs.reduce(
-        (
-          reduced,
-          {
-            percent,
-            series: {
-              color: {
-                type,
-                pure,
-                linear: { stops },
-              },
-            },
-          }
-        ) => {
-          const result = reduced + percent / 100;
-          const color = type == 'pure' ? pure : stops[0].color;
-          if (!!color) {
-            var { r, g, b, a } = converColor(color, 1);
-            conic.addColorStop(reduced, { r, g, b, a: 0 });
-            conic.addColorStop(result, { r, g, b, a });
-          }
-          return result;
-        },
-        0
-      );
-
-      conic.fill(context, 0, 0, _radius, 0, 2 * Math.PI, false);
-      context.restore();
-    }
-  }, [canvas, radius, arcs, innerRadius, outerRadius]);
-
-  return (
-    <canvas
-      className={
-        direction == 'clockwise'
-          ? css.rotateClockwise
-          : css.rotateCounterClockwise
-      }
-      ref={setCanvas}
-      width={width * devicePixelRatio}
-      height={height * devicePixelRatio}
-      style={{
-        opacity: opacity / 100,
-        width,
-        height,
-        pointerEvents: 'none',
-        position: 'absolute',
-        animationTimingFunction: 'linear',
-        animationDuration: speed + 's',
-        animationIterationCount: 'infinite',
-        transformOrigin: centerX + 'px ' + centerY + 'px',
-      }}
-    />
-  );
-};
-
-/**
- * ConicalGradient
- */
-function ConicalGradient() {
-  this._offsets = [];
-  this._colors = [];
-}
-
-ConicalGradient.prototype = {
-  /**
-   * addColorStop
-   *
-   * @param {Number} offset
-   * @param {Array} color RGBA值
-   */
-  addColorStop: function (offset, color) {
-    this._offsets.push(offset);
-    this._colors.push(color);
-    return this;
-  },
-
-  /**
-   * _offsetsReverse (array.forEach callback)
-   */
-  _offsetsReverse: function (offset, index, array) {
-    array[index] = 1 - offset;
-  },
-  /**
-   * fill
-   *
-   * @param {Number} context
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @param {Number} startAngle
-   * @param {Number} endAngle
-   * @param {Boolean} anticlockwise
-   */
-  fill: function (context, x, y, radius, startAngle, endAngle, anticlockwise) {
-    var offsets = this._offsets;
-    var colors = this._colors;
-
-    var PI = Math.PI;
-    var TWO_PI = PI * 2;
-
-    if (startAngle < 0) startAngle = (startAngle % TWO_PI) + TWO_PI;
-    startAngle %= TWO_PI;
-    if (endAngle < 0) endAngle = (endAngle % TWO_PI) + TWO_PI;
-    endAngle %= TWO_PI;
-
-    if (anticlockwise) {
-      // 逆时针
-      var swap = startAngle;
-      startAngle = endAngle;
-      endAngle = swap;
-
-      colors.reverse();
-      offsets.reverse();
-      offsets.forEach(this._offsetsReverse);
-    }
-
-    if (startAngle > endAngle || Math.abs(endAngle - startAngle) < 0.0001) {
-      endAngle += TWO_PI;
-    }
-
-    var colorsLength = colors.length;
-
-    var currentColorIndex = 0;
-    var currentColor = colors[currentColorIndex];
-    var nextColor = colors[currentColorIndex];
-
-    var prevOffset = 0;
-    var currentOffset = offsets[currentColorIndex];
-    var offsetDist = currentOffset - prevOffset;
-
-    var totalAngleDeg = ((endAngle - startAngle) * 180) / PI;
-    var stepAngleRad = (endAngle - startAngle) / totalAngleDeg;
-
-    var arcStartAngle = startAngle;
-    var arcEndAngle;
-
-    var r1 = currentColor.r,
-      g1 = currentColor.g,
-      b1 = currentColor.b,
-      a1 = currentColor.a,
-      r2 = nextColor.r,
-      g2 = nextColor.g,
-      b2 = nextColor.b,
-      a2 = nextColor.a;
-    if (!a1 && a1 !== 0) a1 = 1;
-    if (!a2 && a2 !== 0) a2 = 1;
-    var rd = r2 - r1,
-      gd = g2 - g1,
-      bd = b2 - b1,
-      ad = a2 - a1;
-    var t, r, g, b, a;
-
-    context.save();
-    for (var i = 0, n = 1 / totalAngleDeg; i < 1; i += n) {
-      if (i >= currentOffset) {
-        currentColorIndex++;
-
-        currentColor = nextColor;
-        r1 = currentColor.r;
-        g1 = currentColor.g;
-        b1 = currentColor.b;
-        a1 = currentColor.a;
-        if (!a1 && a1 !== 0) a1 = 1;
-
-        nextColor = colors[currentColorIndex] || {r:0,g:0,b:0,a:1};
-        r2 = nextColor.r;
-        g2 = nextColor.g;
-        b2 = nextColor.b;
-        a2 = nextColor.a;
-        if (!a2 && a2 !== 0) a2 = 1;
-
-        rd = r2 - r1;
-        gd = g2 - g1;
-        bd = b2 - b1;
-        ad = a2 - a1;
-
-        prevOffset = currentOffset;
-        currentOffset = offsets[currentColorIndex];
-        offsetDist = currentOffset - prevOffset;
-      }
-
-      t = (i - prevOffset) / offsetDist;
-      r = (rd * t + r1) & 255;
-      g = (gd * t + g1) & 255;
-      b = (bd * t + b1) & 255;
-      a = ad * t + a1;
-
-      arcEndAngle = arcStartAngle + stepAngleRad;
-
-      context.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
-      context.beginPath();
-      context.moveTo(x, y);
-      context.arc(x, y, radius, arcStartAngle - 0.02, arcEndAngle, false);
-      context.closePath();
-      context.fill();
-
-      arcStartAngle += stepAngleRad;
-    }
-    context.restore();
-
-    return this;
-  },
-};
+/**
+ * 饼图装饰内圈
+ */
+import React, { useEffect, useState } from 'react';
+import { arc } from 'd3v7';
+import { converColor } from '@easyv/utils/lib/common/utils';
+import css from '../css/index.module.css';
+
+export default ({
+  width,
+  height,
+  centerX,
+  centerY,
+  radius,
+  config: { show, innerRadius, outerRadius, opacity, speed, direction },
+  arcs,
+}) => {
+  if (!show) return null;
+  const [canvas, setCanvas] = useState(null);
+
+  useEffect(() => {
+    if (arcs && arcs.length > 0 && canvas && canvas.getContext('2d')) {
+      const _radius = radius * devicePixelRatio;
+      const context = canvas.getContext('2d');
+      context.clearRect(
+        0,
+        0,
+        width * devicePixelRatio,
+        height * devicePixelRatio
+      );
+
+      context.save();
+      context.translate(centerX * devicePixelRatio, centerY * devicePixelRatio);
+      context.beginPath();
+
+      const _arc = arc()
+        .innerRadius(innerRadius * _radius)
+        .outerRadius(outerRadius * _radius)
+        // .padAngle(axis.pole.padAngle)
+        // .cornerRadius(axis.pole.cornerRadius)
+        .context(context);
+
+      arcs.forEach((element) => {
+        const startAngle = element.arc.startAngle()();
+        const endAngle = element.arc.endAngle()();
+        _arc.startAngle(startAngle).endAngle(endAngle)();
+        context.fillStyle = 'rgba(255, 255, 255, 0)';
+        context.fill();
+      });
+
+      context.clip();
+      context.rotate(-Math.PI / 2);
+
+      const conic = new ConicalGradient();
+      arcs.reduce(
+        (
+          reduced,
+          {
+            percent,
+            series: {
+              color: {
+                type,
+                pure,
+                linear: { stops },
+              },
+            },
+          }
+        ) => {
+          const result = reduced + percent / 100;
+          const color = type == 'pure' ? pure : stops[0].color;
+          if (!!color) {
+            var { r, g, b, a } = converColor(color, 1);
+            conic.addColorStop(reduced, { r, g, b, a: 0 });
+            conic.addColorStop(result, { r, g, b, a });
+          }
+          return result;
+        },
+        0
+      );
+
+      conic.fill(context, 0, 0, _radius, 0, 2 * Math.PI, false);
+      context.restore();
+    }
+  }, [canvas, radius, arcs, innerRadius, outerRadius]);
+
+  return (
+    <canvas
+      className={
+        direction == 'clockwise'
+          ? css.rotateClockwise
+          : css.rotateCounterClockwise
+      }
+      ref={setCanvas}
+      width={width * devicePixelRatio}
+      height={height * devicePixelRatio}
+      style={{
+        opacity: opacity / 100,
+        width,
+        height,
+        pointerEvents: 'none',
+        position: 'absolute',
+        animationTimingFunction: 'linear',
+        animationDuration: speed + 's',
+        animationIterationCount: 'infinite',
+        transformOrigin: centerX + 'px ' + centerY + 'px',
+      }}
+    />
+  );
+};
+
+/**
+ * ConicalGradient
+ */
+function ConicalGradient() {
+  this._offsets = [];
+  this._colors = [];
+}
+
+ConicalGradient.prototype = {
+  /**
+   * addColorStop
+   *
+   * @param {Number} offset
+   * @param {Array} color RGBA值
+   */
+  addColorStop: function (offset, color) {
+    this._offsets.push(offset);
+    this._colors.push(color);
+    return this;
+  },
+
+  /**
+   * _offsetsReverse (array.forEach callback)
+   */
+  _offsetsReverse: function (offset, index, array) {
+    array[index] = 1 - offset;
+  },
+  /**
+   * fill
+   *
+   * @param {Number} context
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @param {Number} startAngle
+   * @param {Number} endAngle
+   * @param {Boolean} anticlockwise
+   */
+  fill: function (context, x, y, radius, startAngle, endAngle, anticlockwise) {
+    var offsets = this._offsets;
+    var colors = this._colors;
+
+    var PI = Math.PI;
+    var TWO_PI = PI * 2;
+
+    if (startAngle < 0) startAngle = (startAngle % TWO_PI) + TWO_PI;
+    startAngle %= TWO_PI;
+    if (endAngle < 0) endAngle = (endAngle % TWO_PI) + TWO_PI;
+    endAngle %= TWO_PI;
+
+    if (anticlockwise) {
+      // 逆时针
+      var swap = startAngle;
+      startAngle = endAngle;
+      endAngle = swap;
+
+      colors.reverse();
+      offsets.reverse();
+      offsets.forEach(this._offsetsReverse);
+    }
+
+    if (startAngle > endAngle || Math.abs(endAngle - startAngle) < 0.0001) {
+      endAngle += TWO_PI;
+    }
+
+    var colorsLength = colors.length;
+
+    var currentColorIndex = 0;
+    var currentColor = colors[currentColorIndex];
+    var nextColor = colors[currentColorIndex];
+
+    var prevOffset = 0;
+    var currentOffset = offsets[currentColorIndex];
+    var offsetDist = currentOffset - prevOffset;
+
+    var totalAngleDeg = ((endAngle - startAngle) * 180) / PI;
+    var stepAngleRad = (endAngle - startAngle) / totalAngleDeg;
+
+    var arcStartAngle = startAngle;
+    var arcEndAngle;
+
+    var r1 = currentColor.r,
+      g1 = currentColor.g,
+      b1 = currentColor.b,
+      a1 = currentColor.a,
+      r2 = nextColor.r,
+      g2 = nextColor.g,
+      b2 = nextColor.b,
+      a2 = nextColor.a;
+    if (!a1 && a1 !== 0) a1 = 1;
+    if (!a2 && a2 !== 0) a2 = 1;
+    var rd = r2 - r1,
+      gd = g2 - g1,
+      bd = b2 - b1,
+      ad = a2 - a1;
+    var t, r, g, b, a;
+
+    context.save();
+    for (var i = 0, n = 1 / totalAngleDeg; i < 1; i += n) {
+      if (i >= currentOffset) {
+        currentColorIndex++;
+
+        currentColor = nextColor;
+        r1 = currentColor.r;
+        g1 = currentColor.g;
+        b1 = currentColor.b;
+        a1 = currentColor.a;
+        if (!a1 && a1 !== 0) a1 = 1;
+
+        nextColor = colors[currentColorIndex] || {r:0,g:0,b:0,a:1};
+        r2 = nextColor.r;
+        g2 = nextColor.g;
+        b2 = nextColor.b;
+        a2 = nextColor.a;
+        if (!a2 && a2 !== 0) a2 = 1;
+
+        rd = r2 - r1;
+        gd = g2 - g1;
+        bd = b2 - b1;
+        ad = a2 - a1;
+
+        prevOffset = currentOffset;
+        currentOffset = offsets[currentColorIndex];
+        offsetDist = currentOffset - prevOffset;
+      }
+
+      t = (i - prevOffset) / offsetDist;
+      r = (rd * t + r1) & 255;
+      g = (gd * t + g1) & 255;
+      b = (bd * t + b1) & 255;
+      a = ad * t + a1;
+
+      arcEndAngle = arcStartAngle + stepAngleRad;
+
+      context.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
+      context.beginPath();
+      context.moveTo(x, y);
+      context.arc(x, y, radius, arcStartAngle - 0.02, arcEndAngle, false);
+      context.closePath();
+      context.fill();
+
+      arcStartAngle += stepAngleRad;
+    }
+    context.restore();
+
+    return this;
+  },
+};