@easyv/charts 1.4.21 → 1.4.24

package/src/components/Control.jsx

@@ -0,0 +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>
+    </>
+  );
+}))
+

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}
+    />
+  ));

package/src/components/Indicator.js

@@ -1,13 +1,61 @@
-/**
- * 轴类图表移上去的指示框背景
- */
-export default ({ color, height, width, x = 0, y = 0 }) => (
-  <rect
-    width={width}
-    height={height}
-    x={x}
-    y={y}
-    fill={color}
-    stroke='none'
-  />
-);
+/**
+ * 轴类图表移上去的指示框背景
+ */
+import { useState } from "react";
+export default ({
+  color,
+  height,
+  width,
+  x = 0,
+  y = 0,
+  isControlChart = false,
+  xName = null,
+  setControlChartTooltipShow = null,
+  setControlChartTooltipXName = null,
+  setControlChartTooltipX = null,
+  setControlChartIndicatorList = null,
+  controlChartIndicatorList = null,
+}) => {
+  let isShow = true;
+  if (isControlChart && controlChartIndicatorList) {
+    isShow = controlChartIndicatorList.find(
+      (item) => item.tick === xName
+    ).isShow;
+  }
+  return (
+    <rect
+      width={width}
+      height={height}
+      x={x}
+      onMouseEnter={() => {
+        if (isControlChart) {
+          setControlChartIndicatorList((v) => {
+            return v.map((item) => {
+              if (item.tick === xName) {
+                return { ...item, isShow: true };
+              } else {
+                return item;
+              }
+            });
+          });
+          setControlChartTooltipShow(true);
+          setControlChartTooltipXName(xName);
+          setControlChartTooltipX(x);
+        }
+      }}
+      onMouseLeave={() => {
+        if (isControlChart) {
+          setControlChartIndicatorList((v) =>
+            v.map((item) => ({ ...item, isShow: false }))
+          );
+          setControlChartTooltipShow(false);
+          setControlChartTooltipXName(undefined);
+          setControlChartTooltipX(undefined);
+        }
+      }}
+      fill={isShow ? color : "transparent"}
+      y={y}
+      stroke="none"
+    />
+  );
+};