@easyv/charts 1.0.73 → 1.1.0

package/src/components/Axis.tsx

@@ -6,19 +6,23 @@ import React, {
   memo,
   ReactComponentElement,
   useContext,
+  CSSProperties,
+  MouseEventHandler,
 } from 'react';
 import { getTickCoord, getGridCoord } from '../utils';
 import { chartContext } from '../context';
 import { Line } from '../element';
-
+const defaultEvent = () => {};
 const defaultAlign: Align = {
   textAnchor: 'middle',
   dominantBaseline: 'middle',
 };
 const defaultOrientation = 'bottom';
 const defaultTickSize = 6;
-const defaultFormatter: (d: string, { suffix }: { suffix: string }) => string =
-  (d, { suffix }) => d + suffix;
+const defaultFormatter: (
+  d: string,
+  { suffix }: { suffix: string }
+) => string = (d, { suffix }) => d + suffix;
 
 const getAxesPath: (
   orientation: Orientation,
@@ -145,80 +149,92 @@ type LabelType = {
   formatter: Function;
   tickSize: number;
   rotate: number;
-  config: { show: boolean; translate: Translate; font: Font };
+  onClick?: MouseEventHandler;
+  config: {
+    show: boolean;
+    translate: Translate;
+    font: Font;
+    style: CSSProperties | Function;
+  };
 };
 
-const Label: (props: LabelType) => ReactComponentElement<ComponentType> | null =
-  ({
-    className,
-    orientation = defaultOrientation,
-    label,
-    coordinate,
-    formatter = defaultFormatter,
-    tickSize,
-    rotate = 0,
-    config,
-    config: {
-      show,
-      translate: { x: translateX, y: translateY },
-      font: { fontFamily, fontSize, color, bold, italic, letterSpacing },
-    },
-  }) => {
-    if (!show) return null;
-    const _label = formatter(label, config);
-    const { dominantBaseline, textAnchor, directionX, directionY } = getLayout(
-      orientation,
-      rotate
-    );
-    const isVertical = orientation == 'left' || orientation == 'right';
+const Label: (
+  props: LabelType
+) => ReactComponentElement<ComponentType> | null = ({
+  className,
+  orientation = defaultOrientation,
+  label,
+  coordinate,
+  formatter = defaultFormatter,
+  tickSize,
+  rotate = 0,
+  config,
+  onClick = defaultEvent,
+  config: {
+    show,
+    style,
+    translate: { x: translateX, y: translateY },
+    font: { fontFamily, fontSize, color, bold, italic, letterSpacing },
+  },
+}) => {
+  if (!show) return null;
+  const _label = formatter(label, config);
+  const { dominantBaseline, textAnchor, directionX, directionY } = getLayout(
+    orientation,
+    rotate
+  );
+  const isVertical = orientation == 'left' || orientation == 'right';
 
-    const x =
-      (isVertical ? tickSize * directionX : coordinate) +
-      translateX * directionX;
-    const y =
-      (isVertical ? coordinate : tickSize * directionY) +
-      translateY * directionY;
+  const x =
+    (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
+  const y =
+    (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
-    const translateText = 'translate(' + x + ', ' + y + ')';
-   
-    return (
-      <text
-        className={className}
-        style={{
-          whiteSpace:"pre"
-        }}
-        dominantBaseline={dominantBaseline}
-        textAnchor={textAnchor}
-        fontFamily={fontFamily}
-        fontSize={fontSize}
-        fill={color}
-        fontWeight={bold ? 'bold' : 'normal'}
-        fontStyle={italic ? 'italic' : 'normal'}
-        letterSpacing={letterSpacing}
-        dx='0'
-        dy='0'
-        transform={
-          Array.isArray(_label)
-            ? rotate !== 0
-              ? isVertical
-                ? translateText + 'rotate(' + rotate + ')'
-                : 'rotate(' + rotate + ', ' + x + ', ' + y + ')'
-              : isVertical
-              ? translateText
-              : 'translate(' + translateX + ', ' + translateY + ')'
-            : translateText + 'rotate(' + rotate + ')'
-        }
-      >
-        {!!Array.isArray(_label)
-          ? _label.map((item, index) => (
-              <tspan key={index} x={x} dy='1em'>
-                {item}
-              </tspan>
-            ))
-          : _label}
-      </text>
-    );
-  };
+  const translateText = 'translate(' + x + ', ' + y + ')';
+
+  const _style = style && (typeof style == 'object' ? style : style(_label));
+
+  return (
+    <text
+      className={className}
+      style={{
+        ..._style,
+        whiteSpace: 'pre',
+      }}
+      onClick={onClick}
+      data-data={JSON.stringify({ x: label })}
+      dominantBaseline={dominantBaseline}
+      textAnchor={textAnchor}
+      fontFamily={fontFamily}
+      fontSize={fontSize}
+      fill={color}
+      fontWeight={bold ? 'bold' : 'normal'}
+      fontStyle={italic ? 'italic' : 'normal'}
+      letterSpacing={letterSpacing}
+      dx='0'
+      dy='0'
+      transform={
+        Array.isArray(_label)
+          ? rotate !== 0
+            ? isVertical
+              ? translateText + 'rotate(' + rotate + ')'
+              : 'rotate(' + rotate + ', ' + x + ', ' + y + ')'
+            : isVertical
+            ? translateText
+            : 'translate(' + translateX + ', ' + translateY + ')'
+          : translateText + 'rotate(' + rotate + ')'
+      }
+    >
+      {!!Array.isArray(_label)
+        ? _label.map((item, index) => (
+            <tspan key={index} x={x} dy='1em'>
+              {item}
+            </tspan>
+          ))
+        : _label}
+    </text>
+  );
+};
 
 export default memo(
   ({
@@ -228,6 +244,7 @@ export default memo(
     ticks,
     formatter,
     rotate,
+    triggerClick,
     config: { on, label, axisLine, tickLine, gridLine, unit },
     positions,
   }: any) => {
@@ -309,6 +326,7 @@ export default memo(
                       tickSize={_tickSize}
                       formatter={formatter}
                       rotate={rotate}
+                      onClick={triggerClick}
                     />
                   )}
                   {gridLine && (

package/src/components/Band.tsx

@@ -140,12 +140,14 @@ export default memo(
                   style={{
                     width: '100%',
                     height: '100%',
-                    opacity:opacity,
+                    /** Safari Bug **/
+                    position: 'fixed',
+                    opacity: fillType == 'pattern' ? opacity : 1,
                     background:
                       fillType == 'pattern'
                         ? `50% 50% / ${size.width}px ${size.height}px repeat ` +
                           'url(' +
-                           url +
+                          url +
                           ')'
                         : getBandBackground(
                             pattern,

package/src/components/CartesianChart.js

@@ -132,7 +132,9 @@ const Chart = memo(
           )}
           {[...axes.values()].map((item, index) => {
             const config = item.axisType == 'x' ? axisX : item;
-            return <Axis {...config} key={index} />;
+            return (
+              <Axis triggerClick={onInteraction} {...config} key={index} />
+            );
           })}
 
           {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
@@ -173,8 +175,12 @@ const Chart = memo(
             {...tooltip}
             data={tooltipData}
             x={tooltipX}
+            marginLeft={marginLeft}
+            marginTop={marginTop}
             tickName={tickName}
             series={series}
+            width={width}
+            height={height}
           />
         )}
         {brush && <Brush config={brush} width={width} />}

package/src/components/Lighter.jsx

@@ -1,74 +1,83 @@
 /**
  * 区域图发光跟踪路径
  */
-import React, { useState, useEffect, useRef } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
 import { scaleLinear } from 'd3v7';
 import { getColorList } from '../utils';
-
-const accelerateStep = 2;
-const loop = false;
+import { svgPathProperties } from 'svg-path-properties';
 
 export default ({
   path: d,
+  config,
   config: { length: curveLength, width, fill, unitStep },
 }) => {
   const pointIndexRef = useRef(0);
   const raf = useRef(null);
   const [points, setPoints] = useState([]);
   const [lighter, setLighter] = useState(null);
-  const [path, setPath] = useState(null);
   const pointLength = points.length;
   const totalLength = getLength(pointLength, curveLength);
   const easingFunc = easing.linear;
-  const interpolateList = getColorsInterpolate(getColorList(fill));
-
-  const drawLigher = () => {
-    const currentPointLength = pointIndexRef.current;
-    const pointIndex =
-      currentPointLength >= totalLength
-        ? loop
-          ? curveLength
-          : 0
-        : currentPointLength +
-          unitStep +
-          Math.floor(
-            easingFunc(pointIndexRef.current / totalLength) * accelerateStep
-          );
-
-    const overstep = pointIndex - pointLength;
-    const startIndex = getPointIndex(pointIndex, pointLength, curveLength);
-    const endIndex = getPointIndex(
-      pointIndex + curveLength,
-      pointLength,
-      curveLength
-    );
-    const overstepPoints =
-      loop && overstep > 0 ? points.slice(0, overstep) : [];
 
-    drawCircle(
-      Array.from(lighter.children),
-      [...points.slice(startIndex, endIndex), ...overstepPoints],
-      interpolateList
-    );
+  const interpolateList = useMemo(
+    () => getColorsInterpolate(getColorList(fill)),
+    [fill]
+  );
 
-    pointIndexRef.current = pointIndex;
-    raf.current = requestAnimationFrame(drawLigher);
-  };
+  const drawLigher = useCallback(() => {
+    const STEP = 2;
+    const LOOP = false;
+    if (lighter && lighter.children) {
+      const currentPointLength = pointIndexRef.current;
+      const pointIndex =
+        currentPointLength >= totalLength
+          ? LOOP
+            ? curveLength
+            : 0
+          : currentPointLength +
+            unitStep +
+            Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
+
+      const overstep = pointIndex - pointLength;
+      const startIndex = getPointIndex(pointIndex, pointLength, curveLength);
+      const endIndex = getPointIndex(
+        pointIndex + curveLength,
+        pointLength,
+        curveLength
+      );
+      const overstepPoints =
+        LOOP && overstep > 0 ? points.slice(0, overstep) : [];
+      drawCircle(
+        Array.from(lighter.children),
+        [...points.slice(startIndex, endIndex), ...overstepPoints],
+        interpolateList
+      );
+
+      pointIndexRef.current = pointIndex;
+    }
 
+    raf.current = requestAnimationFrame(drawLigher);
+  }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
   useEffect(() => {
-    if (path) {
-      const totalLength = path.getTotalLength();
-      const points = [];
-      for (let i = 0; i < totalLength; i++) {
-        const { x, y } = path.getPointAtLength(i);
-        points.push({
-          x,
-          y,
-        });
-      }
-      setPoints(points);
+    const path = new svgPathProperties(d);
+    const totalLength = path.getTotalLength();
+    const points = [];
+    for (let i = 0; i < totalLength; i++) {
+      const { x, y } = path.getPointAtLength(i);
+      points.push({
+        index: i,
+        x,
+        y,
+      });
     }
-  }, [d, path]);
+    setPoints(points);
+  }, [d, config]);
 
   useEffect(() => {
     raf.current = requestAnimationFrame(drawLigher);
@@ -76,27 +85,29 @@ export default ({
       cancelAnimationFrame(raf.current);
     };
   }, [drawLigher]);
-
   return (
-    <>
-      <path ref={setPath} d={d} fill='none' stroke='none' />
-      <g ref={setLighter}>
-        {points.map((item, index) => (
-          <circle key={index} r={width} fill='none' />
-        ))}
-      </g>
-    </>
+    <g ref={setLighter}>
+      {points.map(({ x, y }, index) => (
+        <circle cx={x} cy={y} key={index} r={width} fill='none' />
+      ))}
+    </g>
   );
 };
 
 const drawCircle = (children, points, interpolateList) => {
   const pointLength = points.length;
-  points.forEach(({ x, y }, index) => {
-    children[index].setAttribute('cx', x);
-    children[index].setAttribute('cy', y);
-    children[index].setAttribute(
+  // const [startPoint] = points;
+  // const startIndex = startPoint ? startPoint.index : 0;
+  children.forEach((child, index) => {
+    const pointIndex = points.findIndex(({ index: i }) => i == index);
+    child.setAttribute(
       'fill',
-      getColor(index / pointLength, interpolateList)
+      pointIndex > -1
+        ? getColor(
+            pointIndex / pointLength, //TODO: 颜色插值尚需完善
+            interpolateList
+          )
+        : 'none'
     );
   });
 };

package/src/components/PieChart.js

@@ -572,7 +572,8 @@ const Component = memo(
                           style={{
                             ...categoryTextStyle,
                             fontWeight:categoryTextStyle.bold?"bold":"normal",
-                            fontStyle:categoryTextStyle.italic?"italic":"normal"
+                            fontStyle:categoryTextStyle.italic?"italic":"normal",
+                            pointerEvents:"none"
                           }}
                           fill={categoryTextStyle.color}
                         >
@@ -599,9 +600,11 @@ const Component = memo(
             )}
             {label && <Label config={label} arcs={_arcs} />}
             {current && (
-              <g fillOpacity={y} style={{transform:"rotate("+(-rotate_)+"deg)"}}>
+              <g fillOpacity={y} style={{ transform:"rotate("+(-rotate_)+"deg)" }}>
                 <Current
                   config={current}
+                  width={width}
+                  height={height}
                   data={_arcs}
                   currentIndex={+currentIndex}
                 />
@@ -649,6 +652,8 @@ const Current = ({
       },
     },
   },
+  width,
+  height,
   data,
   currentIndex,
 }) => {
@@ -671,13 +676,14 @@ const Current = ({
   }
   nameList.push(nameTemp)
   let foreignStyle={    //foreignObject标签样式，
-    width:"100%",
-    height:"100%",
-    transform:"translate(-50%,-50%)",
+    width,
+    height,
+    transform:`translate(-${width/2}px,-${height/2}px)`,
+    pointerEvents:"none"
   },
   boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
-    width:"100%",
-    height:'100%',
+    width,
+    height,
     display:"flex",
     flexDirection:"column",
     justifyContent:"center",
@@ -686,59 +692,57 @@ const Current = ({
 
   return (
     show && (
-      <>
-        <foreignObject style={foreignStyle}>
-          <div style={boxStyle}>
-            { //类目名称
-              showName && <div 
-                style={{
-                  ...getFontStyle(nameFont),
-                  margin:gap/2+"px 0",
-                  display:"flex",
-                  flexDirection:"column",
-                  alignItems:"center"
-                }}>
-                {
-                  nameList.map((d,i)=>{
-                    return <span key={i}>{d}</span>
-                  })
-                }
-              </div>
-            }
-            { //真实值
-              showValue && <span 
-                style={{
-                  ...getFontStyle(valueFont),
-                  transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
-                  margin:gap/2+"px 0"
-                }}>
-                {value}
-                {showSuffix && text && (
-                  <span
-                    style={{
-                      transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
-                      fontSize:fontSize
-                    }}
-                  >
-                    {text}
-                  </span>
-                )}
-              </span>
-            }
-            { //百分比值
-              showPercent && <span
-                style={{
-                  transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
-                  ...getFontStyle(percentFont),
-                  margin:gap/2+"px 0"
-                }}
-              >
-                {percent + '%'}
-              </span>
-            }
-          </div>
-        </foreignObject>
-      </>
+      <foreignObject style={foreignStyle}>
+        <div style={boxStyle}>
+          { //类目名称
+            showName && <div 
+              style={{
+                ...getFontStyle(nameFont),
+                margin:gap/2+"px 0",
+                display:"flex",
+                flexDirection:"column",
+                alignItems:"center"
+              }}>
+              {
+                nameList.map((d,i)=>{
+                  return <span key={i}>{d}</span>
+                })
+              }
+            </div>
+          }
+          { //真实值
+            showValue && <span 
+              style={{
+                ...getFontStyle(valueFont),
+                transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
+                margin:gap/2+"px 0"
+              }}>
+              {value}
+              {showSuffix && text && (
+                <span
+                  style={{
+                    transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
+                    fontSize:fontSize
+                  }}
+                >
+                  {text}
+                </span>
+              )}
+            </span>
+          }
+          { //百分比值
+            showPercent && <span
+              style={{
+                transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
+                ...getFontStyle(percentFont),
+                margin:gap/2+"px 0"
+              }}
+            >
+              {percent + '%'}
+            </span>
+          }
+        </div>
+      </foreignObject>
     )
   );
 };