@easyv/charts 1.4.22 → 1.4.24

package/src/components/StereoBar.tsx

@@ -1,307 +1,307 @@
-/**
- * 立体柱状图的柱子
- */
-import React, { memo } from 'react';
-import { min, max } from 'd3v7';
-import { getSeriesInfo } from '../utils';
-
-const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
-  switch (extent) {
-    case 'min':
-      const minData = min(data, (d: DataWithBoundType) => d.data.y);
-      return data.map((item) => ({
-        ...item,
-        flag: minData == item.data.y ? 'min' : '',
-      }));
-    case 'max':
-      const maxData = max(data, (d: DataWithBoundType) => d.data.y);
-      return data.map((item) => ({
-        ...item,
-        flag: maxData == item.data.y ? 'max' : '',
-      }));
-    default:
-      return data;
-  }
-};
-
-const getAttr = ({
-  isVertical,
-  seriesWidth,
-  length,
-  x,
-  y,
-}: {
-  isVertical: boolean;
-  seriesWidth: number;
-  length: number;
-  x: number;
-  y: number;
-}) => {
-  if (isVertical) return { width: length, height: seriesWidth, x: y, y: x };
-  return {
-    x,
-    y,
-    width: seriesWidth,
-    height: length,
-  };
-};
-
-const getBorderRadius = ({
-  isVertical,
-  positive,
-  seriesWidth,
-}: {
-  isVertical: boolean;
-  positive: boolean;
-  seriesWidth: number;
-}) => {
-  return isVertical
-    ? positive
-      ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0'
-      : seriesWidth + 'px 0 0 ' + seriesWidth + 'px'
-    : positive
-    ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0'
-    : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
-};
-
-export default memo(
-  ({
-    triggerClick,
-    config: {
-      pattern = {},
-      seriesIntervalWidth: paddingInner = 0,
-      paddingInner: paddingOuter = 0,
-      style,
-      fill,
-      highlight: { show: showHighlight, extent, fill: highlightFill },
-      id,
-    },
-    bandLength = 0,
-    data,
-    xAxis: { scaler: xScaler, step, direction },
-    yAxis: { scaler: yScaler },
-    fieldName,
-  }: any) => {
-    if (!data.length) return null;
-
-    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
-      step,
-      bandLength,
-      paddingInner,
-      paddingOuter,
-    });
-    const _data = showHighlight ? getHighlightData(data, extent) : data;
-
-    const isVertical = direction === 'vertical';
-
-    const highlightColor = parseMultiColorToSVG(
-      highlightFill,
-      'highlight_gradient_' + id + '_' + fieldName
-    );
-    const color = parseMultiColorToSVG(
-      fill,
-      'gradient_' + id + '_' + fieldName
-    );
-    return (
-      <g className='__easyv-band'>
-        <defs>
-          <filter id={`filter_front`}>
-            <feComponentTransfer>
-              <feFuncR type='linear' slope='0.5' />
-              <feFuncG type='linear' slope='0.5' />
-              <feFuncB type='linear' slope='0.5' />
-            </feComponentTransfer>
-          </filter>
-          <filter id={`filter_side`}>
-            <feComponentTransfer>
-              <feFuncR type='linear' slope='0.7' />
-              <feFuncG type='linear' slope='0.7' />
-              <feFuncB type='linear' slope='0.7' />
-            </feComponentTransfer>
-          </filter>
-          {highlightColor.def}
-          {color.def}
-        </defs>
-        {_data.map(
-          (
-            {
-              flag,
-              index,
-              bound: [start, end],
-              data,
-              data: { x, y, s },
-            }: DataWithBoundType,
-            i: number
-          ) => {
-            const y1 = yScaler(isVertical ? end : start);
-            const y2 = yScaler(isVertical ? start : end);
-
-            const positionX =
-              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
-            if (isNaN(positionX)) return null;
-
-            const positionY = y < 0 ? y1 : y2;
-            const attr = getAttr({
-              isVertical,
-              x: positionX,
-              y: positionY,
-              length: Math.abs(y1 - y2),
-              seriesWidth,
-            });
-
-            return (
-              <g
-                key={i}
-                onClick={triggerClick}
-                data-data={JSON.stringify(data)}
-              >
-                <Column3DSkin
-                  {...attr}
-                  color={extent === flag ? highlightColor : color}
-                />
-              </g>
-            );
-          }
-        )}
-      </g>
-    );
-  }
-);
-
-const Column3DSkin = function (props: any) {
-  const { width, height, x, y, color, opacity = 1 } = props;
-  return (
-    <g
-      style={{
-        transform: `skew(0deg, 23deg)`,
-        transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
-        opacity: opacity,
-      }}
-    >
-      {color.defs}
-      {/* 正面 */}
-      <rect
-        width={width / 2}
-        height={height}
-        x={x}
-        y={y}
-        fill={color.fill}
-        style={{ filter: `url(#filter_front)` }}
-      ></rect>
-      {/* 侧面 */}
-      <rect
-        width={width / 2}
-        height={height}
-        x={x + width / 2}
-        y={y}
-        fill={color.fill}
-        style={{
-          transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
-          transform: 'skew(0deg, -45deg)',
-        }}
-      ></rect>
-      {/* 顶部 */}
-      <rect
-        width={width / 2}
-        height={width / 2}
-        x={x}
-        y={y}
-        fill={color.firstColor ? color.firstColor : color}
-        style={{
-          transformOrigin: `${x + (width / 4) * 3}px ${y}px`,
-          transform: `skew(-45deg) translate(0, -${width / 2}px)`,
-        }}
-      ></rect>
-    </g>
-  );
-};
-
-//以下都是为了解析multicolor
-function pointRotate(point: any, center: any, angle: any) {
-  const x = point[0],
-    y = point[1],
-    rx = center[0],
-    ry = center[1],
-    cos = Math.cos(angle),
-    sin = Math.sin(angle);
-  const x0 = (x - rx) * cos - (y - ry) * sin + rx;
-  const y0 = (x - rx) * sin + (y - ry) * cos + ry;
-  return [x0, y0];
-}
-const AngleTransfromRatio = 180 / Math.PI;
-function deg2rad(deg: any) {
-  return deg / AngleTransfromRatio;
-}
-function deepCopy(obj: any): any {
-  if (typeof obj == 'object') {
-    let o: any;
-    if (Array.isArray(obj)) {
-      o = [];
-      for (let i = 0; i < obj.length; i++) {
-        o.push(deepCopy(obj[i]));
-      }
-    } else {
-      o = {};
-      for (const k of Object.keys(obj)) {
-        o[k] = deepCopy(obj[k]);
-      }
-    }
-    return o;
-  } else {
-    return obj;
-  }
-}
-function parseMultiColorToSVG(config: any, id: any) {
-  if (config.type == 'linear') {
-    const { stops, opacity } = config.linear;
-    let start = [0, 0.5],
-      end = [1, 0.5];
-    const angle = config.linear.angle + 90;
-    if (angle) {
-      const center = [0.5, 0.5];
-      start = pointRotate(start, center, deg2rad(angle));
-      end = pointRotate(end, center, deg2rad(angle));
-    }
-    const _stops = deepCopy(stops); //深度复制再排序防止修改props
-    _stops.sort((a: any, b: any) => a.offset - b.offset); //必须排序才能渲染出来
-    return {
-      fill: `url(#${id})`,
-      def: React.createElement(
-        'linearGradient',
-        {
-          id,
-          x2: start[0],
-          y2: start[1],
-          x1: end[0],
-          y1: end[1],
-        },
-        _stops.map((e: any) => {
-          return React.createElement('stop', {
-            key: e.offset,
-            offset: e.offset / 100,
-            stopColor: e.color,
-            stopOpacity: opacity,
-          });
-        })
-      ),
-      firstColor: getTopColor(_stops, angle),
-    };
-  } else {
-    return {
-      fill: config.pure,
-      firstColor: config.pure,
-    };
-  }
-}
-
-function getTopColor(stops: any[], angle: number) {
-  let a = angle % 360;
-  if (a < 0) {
-    a = 360 + a;
-  }
-  if (a >= 90 && a < 270) {
-    return stops[stops.length - 1].color;
-  } else {
-    return stops[0].color;
-  }
-}
+/**
+ * 立体柱状图的柱子
+ */
+import React, { memo } from 'react';
+import { min, max } from 'd3v7';
+import { getSeriesInfo } from '../utils';
+
+const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
+  switch (extent) {
+    case 'min':
+      const minData = min(data, (d: DataWithBoundType) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: minData == item.data.y ? 'min' : '',
+      }));
+    case 'max':
+      const maxData = max(data, (d: DataWithBoundType) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: maxData == item.data.y ? 'max' : '',
+      }));
+    default:
+      return data;
+  }
+};
+
+const getAttr = ({
+  isVertical,
+  seriesWidth,
+  length,
+  x,
+  y,
+}: {
+  isVertical: boolean;
+  seriesWidth: number;
+  length: number;
+  x: number;
+  y: number;
+}) => {
+  if (isVertical) return { width: length, height: seriesWidth, x: y, y: x };
+  return {
+    x,
+    y,
+    width: seriesWidth,
+    height: length,
+  };
+};
+
+const getBorderRadius = ({
+  isVertical,
+  positive,
+  seriesWidth,
+}: {
+  isVertical: boolean;
+  positive: boolean;
+  seriesWidth: number;
+}) => {
+  return isVertical
+    ? positive
+      ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0'
+      : seriesWidth + 'px 0 0 ' + seriesWidth + 'px'
+    : positive
+    ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0'
+    : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
+};
+
+export default memo(
+  ({
+    triggerClick,
+    config: {
+      pattern = {},
+      seriesIntervalWidth: paddingInner = 0,
+      paddingInner: paddingOuter = 0,
+      style,
+      fill,
+      highlight: { show: showHighlight, extent, fill: highlightFill },
+      id,
+    },
+    bandLength = 0,
+    data,
+    xAxis: { scaler: xScaler, step, direction },
+    yAxis: { scaler: yScaler },
+    fieldName,
+  }: any) => {
+    if (!data.length) return null;
+
+    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
+      step,
+      bandLength,
+      paddingInner,
+      paddingOuter,
+    });
+    const _data = showHighlight ? getHighlightData(data, extent) : data;
+
+    const isVertical = direction === 'vertical';
+
+    const highlightColor = parseMultiColorToSVG(
+      highlightFill,
+      'highlight_gradient_' + id + '_' + fieldName
+    );
+    const color = parseMultiColorToSVG(
+      fill,
+      'gradient_' + id + '_' + fieldName
+    );
+    return (
+      <g className='__easyv-band'>
+        <defs>
+          <filter id={`filter_front`}>
+            <feComponentTransfer>
+              <feFuncR type='linear' slope='0.5' />
+              <feFuncG type='linear' slope='0.5' />
+              <feFuncB type='linear' slope='0.5' />
+            </feComponentTransfer>
+          </filter>
+          <filter id={`filter_side`}>
+            <feComponentTransfer>
+              <feFuncR type='linear' slope='0.7' />
+              <feFuncG type='linear' slope='0.7' />
+              <feFuncB type='linear' slope='0.7' />
+            </feComponentTransfer>
+          </filter>
+          {highlightColor.def}
+          {color.def}
+        </defs>
+        {_data.map(
+          (
+            {
+              flag,
+              index,
+              bound: [start, end],
+              data,
+              data: { x, y, s },
+            }: DataWithBoundType,
+            i: number
+          ) => {
+            const y1 = yScaler(isVertical ? end : start);
+            const y2 = yScaler(isVertical ? start : end);
+
+            const positionX =
+              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+            if (isNaN(positionX)) return null;
+
+            const positionY = y < 0 ? y1 : y2;
+            const attr = getAttr({
+              isVertical,
+              x: positionX,
+              y: positionY,
+              length: Math.abs(y1 - y2),
+              seriesWidth,
+            });
+
+            return (
+              <g
+                key={i}
+                onClick={triggerClick}
+                data-data={JSON.stringify(data)}
+              >
+                <Column3DSkin
+                  {...attr}
+                  color={extent === flag ? highlightColor : color}
+                />
+              </g>
+            );
+          }
+        )}
+      </g>
+    );
+  }
+);
+
+const Column3DSkin = function (props: any) {
+  const { width, height, x, y, color, opacity = 1 } = props;
+  return (
+    <g
+      style={{
+        transform: `skew(0deg, 23deg)`,
+        transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
+        opacity: opacity,
+      }}
+    >
+      {color.defs}
+      {/* 正面 */}
+      <rect
+        width={width / 2}
+        height={height}
+        x={x}
+        y={y}
+        fill={color.fill}
+        style={{ filter: `url(#filter_front)` }}
+      ></rect>
+      {/* 侧面 */}
+      <rect
+        width={width / 2}
+        height={height}
+        x={x + width / 2}
+        y={y}
+        fill={color.fill}
+        style={{
+          transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
+          transform: 'skew(0deg, -45deg)',
+        }}
+      ></rect>
+      {/* 顶部 */}
+      <rect
+        width={width / 2}
+        height={width / 2}
+        x={x}
+        y={y}
+        fill={color.firstColor ? color.firstColor : color}
+        style={{
+          transformOrigin: `${x + (width / 4) * 3}px ${y}px`,
+          transform: `skew(-45deg) translate(0, -${width / 2}px)`,
+        }}
+      ></rect>
+    </g>
+  );
+};
+
+//以下都是为了解析multicolor
+function pointRotate(point: any, center: any, angle: any) {
+  const x = point[0],
+    y = point[1],
+    rx = center[0],
+    ry = center[1],
+    cos = Math.cos(angle),
+    sin = Math.sin(angle);
+  const x0 = (x - rx) * cos - (y - ry) * sin + rx;
+  const y0 = (x - rx) * sin + (y - ry) * cos + ry;
+  return [x0, y0];
+}
+const AngleTransfromRatio = 180 / Math.PI;
+function deg2rad(deg: any) {
+  return deg / AngleTransfromRatio;
+}
+function deepCopy(obj: any): any {
+  if (typeof obj == 'object') {
+    let o: any;
+    if (Array.isArray(obj)) {
+      o = [];
+      for (let i = 0; i < obj.length; i++) {
+        o.push(deepCopy(obj[i]));
+      }
+    } else {
+      o = {};
+      for (const k of Object.keys(obj)) {
+        o[k] = deepCopy(obj[k]);
+      }
+    }
+    return o;
+  } else {
+    return obj;
+  }
+}
+function parseMultiColorToSVG(config: any, id: any) {
+  if (config.type == 'linear') {
+    const { stops, opacity } = config.linear;
+    let start = [0, 0.5],
+      end = [1, 0.5];
+    const angle = config.linear.angle + 90;
+    if (angle) {
+      const center = [0.5, 0.5];
+      start = pointRotate(start, center, deg2rad(angle));
+      end = pointRotate(end, center, deg2rad(angle));
+    }
+    const _stops = deepCopy(stops); //深度复制再排序防止修改props
+    _stops.sort((a: any, b: any) => a.offset - b.offset); //必须排序才能渲染出来
+    return {
+      fill: `url(#${id})`,
+      def: React.createElement(
+        'linearGradient',
+        {
+          id,
+          x2: start[0],
+          y2: start[1],
+          x1: end[0],
+          y1: end[1],
+        },
+        _stops.map((e: any) => {
+          return React.createElement('stop', {
+            key: e.offset,
+            offset: e.offset / 100,
+            stopColor: e.color,
+            stopOpacity: opacity,
+          });
+        })
+      ),
+      firstColor: getTopColor(_stops, angle),
+    };
+  } else {
+    return {
+      fill: config.pure,
+      firstColor: config.pure,
+    };
+  }
+}
+
+function getTopColor(stops: any[], angle: number) {
+  let a = angle % 360;
+  if (a < 0) {
+    a = 360 + a;
+  }
+  if (a >= 90 && a < 270) {
+    return stops[stops.length - 1].color;
+  } else {
+    return stops[0].color;
+  }
+}