@easyv/charts 1.4.24 → 1.4.25

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;
+  },
+};

package/src/components/Control.jsx

@@ -1,51 +1,51 @@
-import React, { forwardRef, memo, useRef } from "react";
-import { scaleLinear } from "d3-scale";
-
-export default memo(forwardRef((props, ref) => {
-  const { props: { control, axes, series, xLineRange, yLineRange, marginTop, axisX, bandLength } } = props;
-  const _axisX = { ...axisX, scaler: axisX.controlDragScaler }
-  return (
-    <>
-      <foreignObject
-        style={{
-          width: xLineRange,
-          height: control.height,
-          backgroundColor: control.color,
-          // padding: ` 0 ${control.margin.left}px 0  ${control.margin.right}px`,
-          transform: `translateY(${yLineRange + marginTop}px)`,
-        }}
-      >
-        <svg width="100%" height="100%">
-          {series.map(({ Component, yOrZ, ...config }, index) => {
-            const yAxis = axes.get(yOrZ);
-            const cloneYAxis = JSON.parse(JSON.stringify(yAxis));
-            //todo range
-            cloneYAxis.scaler = scaleLinear()
-              .domain(yAxis.domain)
-              .range([control.height, 0]);
-            return (
-              yAxis &&
-              Component && (
-                <Component
-                  key={index}
-                  {...config}
-                  bandLength={bandLength}
-                  xAxis={_axisX}
-                  yAxis={cloneYAxis}
-                />
-              )
-            );
-          })}
-          {/* 控制条 */}
-          <rect
-            ref={ref}
-            height={control.height}
-            width={(xLineRange * control.drag.width) / 100}
-            fill={control.drag.color}
-          ></rect>
-        </svg>
-      </foreignObject>
-    </>
-  );
-}))
-
+import React, { forwardRef, memo, useRef } from "react";
+import { scaleLinear } from "d3-scale";
+
+export default memo(forwardRef((props, ref) => {
+  const { props: { control, axes, series, xLineRange, yLineRange, marginTop, axisX, bandLength } } = props;
+  const _axisX = { ...axisX, scaler: axisX.controlDragScaler }
+  return (
+    <>
+      <foreignObject
+        style={{
+          width: xLineRange,
+          height: control.height,
+          backgroundColor: control.color,
+          // padding: ` 0 ${control.margin.left}px 0  ${control.margin.right}px`,
+          transform: `translateY(${yLineRange + marginTop}px)`,
+        }}
+      >
+        <svg width="100%" height="100%">
+          {series.map(({ Component, yOrZ, ...config }, index) => {
+            const yAxis = axes.get(yOrZ);
+            const cloneYAxis = JSON.parse(JSON.stringify(yAxis));
+            //todo range
+            cloneYAxis.scaler = scaleLinear()
+              .domain(yAxis.domain)
+              .range([control.height, 0]);
+            return (
+              yAxis &&
+              Component && (
+                <Component
+                  key={index}
+                  {...config}
+                  bandLength={bandLength}
+                  xAxis={_axisX}
+                  yAxis={cloneYAxis}
+                />
+              )
+            );
+          })}
+          {/* 控制条 */}
+          <rect
+            ref={ref}
+            height={control.height}
+            width={(xLineRange * control.drag.width) / 100}
+            fill={control.drag.color}
+          ></rect>
+        </svg>
+      </foreignObject>
+    </>
+  );
+}))
+

package/src/components/ExtentData.js

@@ -1,17 +1,17 @@
-/**
- * 计算X/Y/Z轴的domain，具体的逻辑在useExtentData(HOC)
- */
-import { memo } from 'react';
-import { useExtentData } from '../hooks';
-export default (Component) =>
-  memo(({ config: { axes, series, ...config }, data, ...props }) => (
-    <Component
-      {...props}
-      config={{
-        ...config,
-        axes: useExtentData({ series, axes, data }),
-        series,
-      }}
-      data={data}
-    />
-  ));
+/**
+ * 计算X/Y/Z轴的domain，具体的逻辑在useExtentData(HOC)
+ */
+import { memo } from 'react';
+import { useExtentData } from '../hooks';
+export default (Component) =>
+  memo(({ config: { axes, series, ...config }, data, ...props }) => (
+    <Component
+      {...props}
+      config={{
+        ...config,
+        axes: useExtentData({ series, axes, data }),
+        series,
+      }}
+      data={data}
+    />
+  ));