@easyv/charts 1.0.58 → 1.0.62

package/lib/components/Label.js

@@ -72,6 +72,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         _ref2$data = _ref2.data,
         x = _ref2$data.x,
         y = _ref2$data.y,
+        showY = _ref2$data.showY,
         s = _ref2$data.s;
 
     var y1 = yScaler(isVertical ? end : start);
@@ -108,7 +109,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       cy: attr.y,
       config: icon
     }), showLabel && /*#__PURE__*/React.createElement(Label, (0, _extends2["default"])({
-      value: y,
+      value: showY,
       config: label
     }, attr)));
   }));

package/lib/components/PieChart.js

@@ -763,7 +763,7 @@ var Current = function Current(_ref9) {
   }, text)), //百分比值
   showPercent && /*#__PURE__*/_react["default"].createElement("span", {
     style: _objectSpread(_objectSpread({
-      transform: "translate(" + translatePercentX + "px," + translatePercentY + ")"
+      transform: "translate(" + translatePercentX + "px," + translatePercentY + "px)"
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       margin: gap / 2 + "px 0"
     })
@@ -972,6 +972,7 @@ var RingLabel = function RingLabel(_ref12) {
         type = _ref13$series$color.type,
         pure = _ref13$series$color.pure,
         stops = _ref13$series$color.linear.stops,
+        realData = _ref13.data,
         displayName = _ref13.displayName,
         value = _ref13.value,
         percent = _ref13.percent,
@@ -1035,7 +1036,7 @@ var RingLabel = function RingLabel(_ref12) {
       dx: valueDx(_showName, mode),
       dy: valueDy(_showName, mode, directionY),
       style: (0, _utils.getFontStyle)(valueFont, 'svg')
-    }, value), showSuffix && /*#__PURE__*/_react["default"].createElement("tspan", {
+    }, realData.y), showSuffix && /*#__PURE__*/_react["default"].createElement("tspan", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont, 'svg')), {}, {
         fontSize: suffixFontSize
       }),

package/lib/components/Tooltip.js

@@ -22,6 +22,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       x = _ref.tickName,
       data = _ref.data,
       series = _ref.series,
+      config = _ref.config,
       _ref$config$tip = _ref.config.tip,
       _ref$config$tip$data = _ref$config$tip.data,
       xAxis = _ref$config$tip$data.xAxis,
@@ -29,11 +30,13 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       align = _ref$config$tip$data$.align,
       font = _ref$config$tip$data$.font,
       translateXAxis = _ref$config$tip$data$.translate,
-      lineHeight = _ref$config$tip$data.lineHeight,
       dataConfig = _ref$config$tip$data.data,
       _ref$config$tip$data$2 = _ref$config$tip$data.data,
+      lineHeight = _ref$config$tip$data$2.lineHeight,
+      iconSize = _ref$config$tip$data$2.iconSize,
       name = _ref$config$tip$data$2.name,
       value = _ref$config$tip$data$2.value,
+      suffix = _ref$config$tip$data$2.suffix,
       image = _ref$config$tip.image,
       margin = _ref$config$tip.margin,
       _ref$config$tip$size = _ref$config$tip.size,
@@ -59,7 +62,6 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }, (0, _utils.getFontStyle)(font))
   }, formatter ? formatter({
     series: series,
-    lineHeight: lineHeight,
     x: {
       x: x,
       config: xAxis
@@ -81,7 +83,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       transform: (0, _utils.getTranslate3d)(translateXAxis)
     }, font)
   }, x), data.map(function (_ref2, index) {
-    var y = _ref2.y,
+    var showY = _ref2.showY,
         s = _ref2.s;
 
     var _series$find = series.find(function (series) {
@@ -91,10 +93,20 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         icon = _series$find.icon,
         displayName = _series$find.displayName;
 
+    var showSuffix = suffix.show,
+        content = suffix.content,
+        suffiixFont = suffix.font,
+        suffixTranslate = suffix.translate;
+    var tmp = new Map();
+    Object.values(content).forEach(function (item) {
+      tmp.set(item['suffix'].name, item['suffix'].suffix);
+    });
+
     var _icon = (0, _utils.getIcon)(type, icon);
 
     return /*#__PURE__*/React.createElement("dd", {
       style: {
+        border: '1px solid yellow',
         display: 'flex',
         justifyContent: 'space-between',
         lineHeight: lineHeight + 'px'
@@ -102,17 +114,25 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       key: index
     }, /*#__PURE__*/React.createElement("span", {
       style: {
+        border: '1px solid red',
         display: 'flex',
         alignItems: 'center',
         gap: icon.iconGap
       }
     }, /*#__PURE__*/React.createElement("span", {
-      style: _icon
+      style: _objectSpread(_objectSpread({}, _icon), {}, {
+        width: iconSize + 'px',
+        height: iconSize + 'px'
+      })
     }), /*#__PURE__*/React.createElement("span", {
       style: (0, _utils.getFontStyle)(name)
     }, displayName || s)), /*#__PURE__*/React.createElement("span", {
       style: (0, _utils.getFontStyle)(value)
-    }, y));
+    }, showY, showSuffix && /*#__PURE__*/React.createElement("span", {
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(suffiixFont)), {}, {
+        transform: (0, _utils.getTranslate3d)(suffixTranslate)
+      })
+    }, tmp.get(s))));
   })));
 });
 

package/lib/formatter/legend.js

@@ -19,7 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
   var displayName = _ref.displayName,
-      value = _ref.value,
+      data = _ref.data,
       percent = _ref.percent,
       _ref$series = _ref.series,
       seriesColor = _ref$series.color,
@@ -71,7 +71,7 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
       alignItems: 'center',
       justifyContent: 'flex-start'
     })
-  }, showValue && /*#__PURE__*/React.createElement("span", null, value), showSuffix && /*#__PURE__*/React.createElement("span", {
+  }, showValue && /*#__PURE__*/React.createElement("span", null, data.y), showSuffix && /*#__PURE__*/React.createElement("span", {
     style: {
       fontSize: fontSize,
       transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'

package/lib/hooks/useFilterData.js

@@ -101,7 +101,12 @@ var _default = function _default(_ref) {
   }, [series]);
   return [{
     series: _series,
-    data: _data
+    data: _data.map(function (d) {
+      return _objectSpread(_objectSpread({}, d), {}, {
+        y: parseFloat(d.y),
+        showY: d.y
+      });
+    })
   }, onClick];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.0.58",
+  "version": "1.0.62",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Label.js

@@ -40,11 +40,10 @@ export default memo(
       paddingInner * seriesStep;
     const isVertical = direction === 'vertical';
     const _position = label.position;
-
     return (
       <g className='__easyv-label'>
         {data.map(
-          ({ index, bound: [start, end], data, data: { x, y, s } }, i) => {
+          ({ index, bound: [start, end], data, data: { x, y, showY, s } }, i) => {
 
             const y1 = yScaler(isVertical ? end : start);
             const y2 = start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end);
@@ -84,7 +83,7 @@ export default memo(
                 data-data={JSON.stringify(data)}
               >
                 {showIcon && <Icon cx={attr.x} cy={attr.y} config={icon} />}
-                {showLabel && <Label value={y} config={label} {...attr} />}
+                {showLabel && <Label value={showY} config={label} {...attr} />}
               </g>
             );
           }

package/src/components/PieChart.js

@@ -340,7 +340,7 @@ const Component = memo(
         outerRadius,
       }));
     }, [data, arcsFunc, chart, legendPrecision]);
-    
+
     const _arcs = useMemo(() => {
       const seriesLength = series.size;
       if (!seriesLength) return [];
@@ -728,7 +728,7 @@ const Current = ({
             { //百分比值
               showPercent && <span
                 style={{
-                  transform:"translate("+translatePercentX+"px,"+translatePercentY+")",
+                  transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
                   ...getFontStyle(percentFont),
                   margin:gap/2+"px 0"
                 }}
@@ -984,6 +984,7 @@ const RingLabel =({
                 linear: { stops },
               },
             },
+            data:realData,
             displayName,
             value,
             percent,
@@ -1047,7 +1048,7 @@ const RingLabel =({
                         dy={valueDy(_showName, mode, directionY)}
                         style={getFontStyle(valueFont, 'svg')}
                       >
-                        {value}
+                        {realData.y}
                       </tspan>
                       {showSuffix && (
                         <tspan

package/src/components/Tooltip.js

@@ -11,14 +11,14 @@ export default memo(
     tickName: x,
     data,
     series,
+    config,
     config: {
       tip: {
         data: {
           xAxis,
           xAxis: { align, font, translate: translateXAxis },
-          lineHeight,
           data: dataConfig,
-          data: { name, value },
+          data: { lineHeight, iconSize, name, value, suffix },
         },
         image,
         margin,
@@ -31,13 +31,14 @@ export default memo(
   }) => {
     const translate3d = isVertical
       ? {
-          ...translateTip,
-          y: translateTip.y + position,
-        }
+        ...translateTip,
+        y: translateTip.y + position,
+      }
       : {
-          ...translateTip,
-          x: translateTip.x + position,
-        };
+        ...translateTip,
+        x: translateTip.x + position,
+      };
+
     return (
       <div
         className='__easyv-tooltip'
@@ -49,17 +50,16 @@ export default memo(
           padding: getMargin(margin),
           background: image
             ? '50% 50% / 100% 100% no-repeat url(' +
-              window.appConfig.ASSETS_URL +
-              image +
-              ')'
+            window.appConfig.ASSETS_URL +
+            image +
+            ')'
             : 'rgba(48, 55, 66, 0.85)',
-            ...getFontStyle(font)
+          ...getFontStyle(font)
         }}
       >
         {formatter ? (
           formatter({
             series,
-            lineHeight,
             x: { x, config: xAxis },
             data: { data, config: dataConfig },
           })
@@ -80,15 +80,26 @@ export default memo(
               }}
             >
               {x}
+
             </dt>
-            {data.map(({ y, s }, index) => {
+            {data.map(({ showY, s }, index) => {
               const { type, icon, displayName } = series.find(
                 (series) => series.name == s
               );
+              const { show: showSuffix, content, font: suffiixFont, translate: suffixTranslate } = suffix
+              const tmp = new Map();
+              Object.values(content).forEach(
+                (item) => {
+                  tmp.set(item['suffix'].name,
+                    item['suffix'].suffix
+                  );
+                }
+              );
               const _icon = getIcon(type, icon);
               return (
                 <dd
                   style={{
+                    border: '1px solid yellow',
                     display: 'flex',
                     justifyContent: 'space-between',
                     lineHeight: lineHeight + 'px',
@@ -97,15 +108,21 @@ export default memo(
                 >
                   <span
                     style={{
+                      border: '1px solid red',
                       display: 'flex',
                       alignItems: 'center',
                       gap: icon.iconGap,
                     }}
                   >
-                    <span style={_icon} />
+                    <span style={{ ..._icon, width: iconSize + 'px', height: iconSize + 'px' }} />
                     <span style={getFontStyle(name)}>{displayName || s}</span>
                   </span>
-                  <span style={getFontStyle(value)}>{y}</span>
+                  <span style={getFontStyle(value)}>{showY}
+                    {showSuffix && <span style={{ ...getFontStyle(suffiixFont), transform: getTranslate3d(suffixTranslate) }}>
+                      {tmp.get(s)}
+                    </span>
+                    }
+                  </span>
                 </dd>
               );
             })}

package/src/element/ConicGradient.jsx

@@ -0,0 +1,56 @@
+import * as d3 from 'd3';
+
+//只支持在svg中使用
+//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
+//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
+export default function ConicGradient(props){
+    const {
+        gradientId,         //渐变ID，每一个环形渐变都需要使用独有的id，防止大屏中存在多个环形渐变时，出现渐变混用的情况。
+        colorConfig={},
+        circleConfig={}
+    } = props,
+    {
+        colorType = "linear",   //渐变类型
+        colors = [{offset:0,color:"rgba(255,0,0,0.5)"},
+                  {offset:50,color:"rgba(0,255,0,0.5)"},
+                  {offset:100,color:"rgba(0,0,255,0.5)"}]     //渐变颜色
+    } = colorConfig,
+    {
+        innerRadius = 80,       //圆环内半径
+        outerRadius = 100,      //圆环外半径
+        startAngle = 0,         //初始角度
+        endAngle = 360,         //结束角度
+        cornerRadius = 0,       //圆环两端的圆角
+        padAngle = 0            //圆环内边距，用于多个圆环之间的间距
+    } = circleConfig;
+    const arc = d3
+        .arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .startAngle((startAngle * Math.PI) / 180)
+        .endAngle((endAngle * Math.PI) / 180)
+        .cornerRadius(cornerRadius)
+        .padAngle(padAngle);
+    return <g>
+        <clipPath id={""+gradientId} style={{transform:`translate(50%,50%)`}}>
+            <path d={arc()}></path>
+        </clipPath>
+        <foreignObject style={{
+            width:"100%",
+            height:"100%",
+            transform:`translate(-50%,-50%)`,
+            background:colorType==="pure"?
+            colors : `conic-gradient(${colorsToString(colors)})`,
+            clipPath:`url(${'#'+gradientId})`
+        }}></foreignObject>
+    </g>
+}
+function colorsToString(colors){
+    let s="";
+    colors.sort((a,b)=>{
+        return a.offset-b.offset;
+    }).map(d=>{
+        s=s+d.color+" "+d.offset+"%,";
+    })
+    return s.slice(0,-1)
+}

package/src/formatter/legend.js

@@ -1,7 +1,7 @@
 import css from '../css/index.module.css';
 import { getFontStyle } from '../utils';
 export const pieLegendFormatter = (
-  { displayName, value, percent, series: { color: seriesColor, icon="" } },
+  { displayName, data, percent, series: { color: seriesColor, icon="" } },
   {
     name: { show: showName, font: nameFont },
     value: {
@@ -57,7 +57,7 @@ export const pieLegendFormatter = (
               justifyContent: 'flex-start',
             }}
           >
-            {showValue && <span>{value}</span>}
+            {showValue && <span>{data.y}</span>}
             {showSuffix && (
               <span
                 style={{

package/src/hooks/useFilterData.js

@@ -29,7 +29,7 @@ const getSelected = (selected, name) => {
 
 export default ({ data, series }) => {
   const [selected, setSelected] = useState(getInitialSelected(series));
-
+  
   const _series = useMemo(() => {
     const tmp = new Map();
     series.forEach((currentSeries, key) => {
@@ -55,10 +55,17 @@ export default ({ data, series }) => {
   useEffect(() => {
     setSelected(getInitialSelected(series));
   }, [series]);
+
   return [
     {
       series: _series,
-      data: _data,
+      data: _data.map(d=>{
+        return {
+          ...d,
+          y:parseFloat(d.y),
+          showY:d.y
+        }
+      }),
     },
     onClick,
   ];

package/tsconfig.json

@@ -18,6 +18,6 @@
 
     "types": ["src/types"]
   },
-  "include": ["src"],
+  "include": ["src", "../南湖数据", "../Lighter.jsx"],
   "exclude": ["node_modules", "**/*.spec.ts"],
 }