@easyv/charts 1.2.11 → 1.3.0

package/src/components/StereoBar.tsx

@@ -1,311 +1,307 @@
-/**
- * 立体柱状图的柱子
- */
- import React, { memo } from 'react';
- import { min, max } from 'd3v7';
- import {
-     getBandBackground,
-     getBandwidth,
-     getBandSeriesStepAndWidth,
- } 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 bandwidth = getBandwidth(step, paddingOuter);
-         const { seriesStep, seriesWidth } = getBandSeriesStepAndWidth({
-             width: bandwidth,
-             paddingInner,
-             bandLength,
-         });
- 
-         const _data = showHighlight ? getHighlightData(data, extent) : data;
- 
-         const offset =
-             (seriesWidth + paddingInner * seriesStep) * bandLength -
-             paddingInner * seriesStep;
- 
-         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) + seriesStep * index - offset / 2;
-                         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;
+  }
+}