@easyv/charts 1.0.74 → 1.1.1

package/src/components/Axis.tsx

@@ -1,336 +1,354 @@
-/**
- * x, y, z轴
- */
-import React, {
-  ComponentType,
-  memo,
-  ReactComponentElement,
-  useContext,
-} from 'react';
-import { getTickCoord, getGridCoord } from '../utils';
-import { chartContext } from '../context';
-import { Line } from '../element';
-
-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 getAxesPath: (
-  orientation: Orientation,
-  { 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);
-  }
-};
-/**
- * 根据坐标轴位置来确定轴标签的垂直对齐方式，水平对齐方式，以及轴标签位于坐标轴的哪个方向
- * @param orientation 坐标轴位置
- * @param rotate 旋转角度
- * @returns {
- *    dominantBaseline,
- *    textAnchor,
- *    directionX,
- *    directionY
- * }
- */
-const getLayout: (
-  orientation: Orientation,
-  rotate: number
-) => {
-  dominantBaseline: string;
-  textAnchor: string;
-  directionX: number;
-  directionY: number;
-} = (orientation, rotate) => {
-  switch (orientation) {
-    case 'top':
-      return {
-        dominantBaseline: 'text-after-edge',
-        textAnchor: rotate ? 'end' : 'middle',
-        directionX: 1,
-        directionY: -1,
-      };
-    case 'bottom':
-      return {
-        dominantBaseline: 'text-before-edge',
-        textAnchor: rotate ? 'start' : 'middle',
-        directionX: 1,
-        directionY: 1,
-      };
-    case 'left':
-      return {
-        dominantBaseline: 'middle',
-        textAnchor: 'end',
-        directionX: -1,
-        directionY: 1,
-      };
-    case 'right':
-      return {
-        dominantBaseline: 'middle',
-        textAnchor: 'start',
-        directionX: 1,
-        directionY: 1,
-      };
-  }
-};
-const AxisLine: ({
-  orientation: Orientation,
-  config: ChartLine,
-}: any) => ReactComponentElement<ComponentType> | null = ({
-  orientation = defaultOrientation,
-  config: { show, color, lineWidth },
-}) => {
-  if (!show) return null;
-  const context: Context = useContext(chartContext);
-  return (
-    <path
-      d={getAxesPath(orientation, context)}
-      stroke={color}
-      strokeWidth={lineWidth}
-    />
-  );
-};
-
-const Unit: ({
-  config: {
-    show: boolean,
-    text: string,
-    font: Font,
-    translate: Translate,
-    align: Align,
-  },
-}: any) => ReactComponentElement<ComponentType> | null = ({
-  config: {
-    show,
-    text,
-    font: { bold, color, fontFamily, fontSize, italic, letterSpacing },
-    translate: { x: translateX, y: translateY },
-    align: { textAnchor } = defaultAlign,
-  },
-}) => {
-  if (!show) return null;
-  return (
-    <text
-      className='__easyv-unit'
-      transform={'translate(' + translateX + ', ' + translateY + ')'}
-      fontFamily={fontFamily}
-      fontSize={fontSize}
-      fill={color}
-      fontWeight={bold ? 'bold' : 'normal'}
-      fontStyle={italic ? 'italic' : 'normal'}
-      letterSpacing={letterSpacing}
-      textAnchor={textAnchor}
-    >
-      {text}
-    </text>
-  );
-};
-
-type LabelType = {
-  className: string;
-  orientation: Orientation;
-  label: string;
-  coordinate: number;
-  formatter: Function;
-  tickSize: number;
-  rotate: number;
-  config: { show: boolean; translate: Translate; font: Font };
-};
-
-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 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>
-    );
-  };
-
-export default memo(
-  ({
-    orientation,
-    scaler,
-    tickSize = defaultTickSize,
-    ticks,
-    formatter,
-    rotate,
-    config: { on, label, axisLine, tickLine, gridLine, unit },
-    positions,
-  }: 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;
-
-    return (
-      <>
-        {axisLine && tickLine && (
-          <>
-            {axisLine &&
-              (positions && positions.length ? (
-                positions.map(({ x, y }: any, index: number) => (
-                  <g key={index} 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;
-                        return (
-                          <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;
-                      return (
-                        <Line
-                          className='__easyv-tickLine'
-                          key={index}
-                          config={tickLine}
-                          {...getTickCoord({
-                            orientation,
-                            coordinate,
-                            tickSize: _tickSize,
-                          })}
-                        />
-                      );
-                    })}
-                </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;
-              return (
-                <g key={index}>
-                  {label && (
-                    <Label
-                      className='__easyv-label'
-                      orientation={orientation}
-                      coordinate={coordinate}
-                      config={label}
-                      label={tick}
-                      tickSize={_tickSize}
-                      formatter={formatter}
-                      rotate={rotate}
-                    />
-                  )}
-                  {gridLine && (
-                    <Line
-                      className='__easyv-gridLine'
-                      config={gridLine}
-                      {...getGridCoord({
-                        orientation,
-                        coordinate,
-                        end:
-                          orientation == 'left' || orientation == 'right'
-                            ? width
-                            : height,
-                      })}
-                    />
-                  )}
-                </g>
-              );
-            })}
-          {unit && <Unit config={unit} />}
-        </g>
-      </>
-    );
-  }
-);
+/**
+ * x, y, z轴
+ */
+import React, {
+  ComponentType,
+  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 getAxesPath: (
+  orientation: Orientation,
+  { 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);
+  }
+};
+/**
+ * 根据坐标轴位置来确定轴标签的垂直对齐方式，水平对齐方式，以及轴标签位于坐标轴的哪个方向
+ * @param orientation 坐标轴位置
+ * @param rotate 旋转角度
+ * @returns {
+ *    dominantBaseline,
+ *    textAnchor,
+ *    directionX,
+ *    directionY
+ * }
+ */
+const getLayout: (
+  orientation: Orientation,
+  rotate: number
+) => {
+  dominantBaseline: string;
+  textAnchor: string;
+  directionX: number;
+  directionY: number;
+} = (orientation, rotate) => {
+  switch (orientation) {
+    case 'top':
+      return {
+        dominantBaseline: 'text-after-edge',
+        textAnchor: rotate ? 'end' : 'middle',
+        directionX: 1,
+        directionY: -1,
+      };
+    case 'bottom':
+      return {
+        dominantBaseline: 'text-before-edge',
+        textAnchor: rotate ? 'start' : 'middle',
+        directionX: 1,
+        directionY: 1,
+      };
+    case 'left':
+      return {
+        dominantBaseline: 'middle',
+        textAnchor: 'end',
+        directionX: -1,
+        directionY: 1,
+      };
+    case 'right':
+      return {
+        dominantBaseline: 'middle',
+        textAnchor: 'start',
+        directionX: 1,
+        directionY: 1,
+      };
+  }
+};
+const AxisLine: ({
+  orientation: Orientation,
+  config: ChartLine,
+}: any) => ReactComponentElement<ComponentType> | null = ({
+  orientation = defaultOrientation,
+  config: { show, color, lineWidth },
+}) => {
+  if (!show) return null;
+  const context: Context = useContext(chartContext);
+  return (
+    <path
+      d={getAxesPath(orientation, context)}
+      stroke={color}
+      strokeWidth={lineWidth}
+    />
+  );
+};
+
+const Unit: ({
+  config: {
+    show: boolean,
+    text: string,
+    font: Font,
+    translate: Translate,
+    align: Align,
+  },
+}: any) => ReactComponentElement<ComponentType> | null = ({
+  config: {
+    show,
+    text,
+    font: { bold, color, fontFamily, fontSize, italic, letterSpacing },
+    translate: { x: translateX, y: translateY },
+    align: { textAnchor } = defaultAlign,
+  },
+}) => {
+  if (!show) return null;
+  return (
+    <text
+      className='__easyv-unit'
+      transform={'translate(' + translateX + ', ' + translateY + ')'}
+      fontFamily={fontFamily}
+      fontSize={fontSize}
+      fill={color}
+      fontWeight={bold ? 'bold' : 'normal'}
+      fontStyle={italic ? 'italic' : 'normal'}
+      letterSpacing={letterSpacing}
+      textAnchor={textAnchor}
+    >
+      {text}
+    </text>
+  );
+};
+
+type LabelType = {
+  className: string;
+  orientation: Orientation;
+  label: string;
+  coordinate: number;
+  formatter: Function;
+  tickSize: number;
+  rotate: number;
+  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,
+  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 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(
+  ({
+    orientation,
+    scaler,
+    tickSize = defaultTickSize,
+    ticks,
+    formatter,
+    rotate,
+    triggerClick,
+    config: { on, label, axisLine, tickLine, gridLine, unit },
+    positions,
+  }: 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;
+
+    return (
+      <>
+        {axisLine && tickLine && (
+          <>
+            {axisLine &&
+              (positions && positions.length ? (
+                positions.map(({ x, y }: any, index: number) => (
+                  <g key={index} 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;
+                        return (
+                          <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;
+                      return (
+                        <Line
+                          className='__easyv-tickLine'
+                          key={index}
+                          config={tickLine}
+                          {...getTickCoord({
+                            orientation,
+                            coordinate,
+                            tickSize: _tickSize,
+                          })}
+                        />
+                      );
+                    })}
+                </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;
+              return (
+                <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}
+                      {...getGridCoord({
+                        orientation,
+                        coordinate,
+                        end:
+                          orientation == 'left' || orientation == 'right'
+                            ? width
+                            : height,
+                      })}
+                    />
+                  )}
+                </g>
+              );
+            })}
+          {unit && <Unit config={unit} />}
+        </g>
+      </>
+    );
+  }
+);