@easyv/charts 1.1.7 → 1.2.1

package/src/components/StackData.js

@@ -1,20 +1,20 @@
-/**
- * 堆叠类，具体逻辑在useStackData(HOC)
- */
-import { memo } from 'react';
-import { useStackData } from '../hooks';
-export default (Component) => {
-  return memo(({ config: { series, ...config }, data, ...props }) => {
-    const _series = useStackData({
-      series,
-      data,
-    });
-    return (
-      <Component
-        {...props}
-        config={{ ...config, series: _series }}
-        data={data}
-      />
-    );
-  });
-};
+/**
+ * 堆叠类，具体逻辑在useStackData(HOC)
+ */
+import { memo } from 'react';
+import { useStackData } from '../hooks';
+export default (Component) => {
+  return memo(({ config: { series, ...config }, data, ...props }) => {
+    const _series = useStackData({
+      series,
+      data,
+    });
+    return (
+      <Component
+        {...props}
+        config={{ ...config, series: _series }}
+        data={data}
+      />
+    );
+  });
+};

package/src/components/StereoBar.tsx

@@ -1,311 +1,311 @@
-/**
- * 立体柱状图的柱子
- */
- 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 {
+     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;
+     }
  }