@easyv/charts 1.0.56 → 1.0.60

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

@@ -670,6 +670,7 @@ var Current = function Current(_ref9) {
       _ref9$config$name = _ref9$config.name,
       showName = _ref9$config$name.show,
       nameFont = _ref9$config$name.font,
+      textBreak = _ref9$config$name.textBreak,
       _ref9$config$percent = _ref9$config.percent,
       showPercent = _ref9$config$percent.show,
       percentFont = _ref9$config$percent.font,
@@ -704,22 +705,69 @@ var Current = function Current(_ref9) {
       fieldName = currentData.fieldName,
       value = currentData.value,
       percent = currentData.percent;
-  return show && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showName && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
-    textAnchor: "middle",
-    dy: (showValue && showPercent ? -1 : showValue || showPercent ? -0.5 : 0) * gap
-  }, (0, _utils.getFontStyle)(nameFont, 'svg')), displayName || fieldName), showValue && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
-    textAnchor: "middle",
-    dy: (showName && showPercent ? 0 : showName && !showPercent ? 0.5 : showPercent ? -0.5 : 0) * gap + translateValueY,
-    dx: translateValueX
-  }, (0, _utils.getFontStyle)(valueFont, 'svg')), value, showSuffix && text && /*#__PURE__*/_react["default"].createElement("tspan", {
-    dx: translateSuffixX,
-    dy: translateSuffixY,
-    fontSize: fontSize
-  }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
-    textAnchor: "middle",
-    dy: (showName && showValue ? 1 : showName || showValue ? 0.5 : 0) * gap + translatePercentY,
-    dx: translatePercentX
-  }, (0, _utils.getFontStyle)(percentFont, 'svg')), percent + '%'));
+  var nameTemp = displayName ? displayName : fieldName; //类目名
+
+  var nameList = [];
+
+  if (textBreak) {
+    //如果限制了首行字符，则切割组件
+    while (nameTemp.length > textBreak) {
+      nameList.push(nameTemp.slice(0, textBreak));
+      nameTemp = nameTemp.slice(textBreak);
+    }
+  }
+
+  nameList.push(nameTemp);
+  var foreignStyle = {
+    //foreignObject标签样式，
+    width: "100%",
+    height: "100%",
+    transform: "translate(-50%,-50%)"
+  },
+      boxStyle = {
+    //弹性盒子样式，用于当前值的上下居中对齐等
+    width: "100%",
+    height: '100%',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+  return show && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: foreignStyle
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: boxStyle
+  }, //类目名称
+  showName && /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(nameFont)), {}, {
+      margin: gap / 2 + "px 0",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    })
+  }, nameList.map(function (d, i) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      key: i
+    }, d);
+  })), //真实值
+  showValue && /*#__PURE__*/_react["default"].createElement("span", {
+    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
+      transform: "translate(" + translateValueX + "px," + translateValueY + "px)",
+      margin: gap / 2 + "px 0"
+    })
+  }, value, showSuffix && text && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      transform: "translate(" + translateSuffixX + "px," + translateSuffixY + "px)",
+      fontSize: fontSize
+    }
+  }, text)), //百分比值
+  showPercent && /*#__PURE__*/_react["default"].createElement("span", {
+    style: _objectSpread(_objectSpread({
+      transform: "translate(" + translatePercentX + "px," + translatePercentY + "px)"
+    }, (0, _utils.getFontStyle)(percentFont)), {}, {
+      margin: gap / 2 + "px 0"
+    })
+  }, percent + '%'))));
 };
 
 var Label = function Label(_ref10) {

package/lib/components/Tooltip.js

@@ -81,7 +81,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) {
@@ -112,7 +112,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       style: (0, _utils.getFontStyle)(name)
     }, displayName || s)), /*#__PURE__*/React.createElement("span", {
       style: (0, _utils.getFontStyle)(value)
-    }, y));
+    }, showY));
   })));
 });
 

package/lib/formatter/legend.js

@@ -58,9 +58,11 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
   }), /*#__PURE__*/React.createElement("span", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle
   }, showName && /*#__PURE__*/React.createElement("span", {
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       paddingLeft: 5
-    }, (0, _utils.getFontStyle)(nameFont))
+    }, (0, _utils.getFontStyle)(nameFont)), {}, {
+      whiteSpace: "nowrap"
+    })
   }, displayName), showValue && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,

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.56",
+  "version": "1.0.60",
   "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

@@ -630,7 +630,7 @@ const Current = ({
   config: {
     show,
     gap,
-    name: { show: showName, font: nameFont },
+    name: { show: showName, font: nameFont, textBreak },
     percent: {
       show: showPercent,
       font: percentFont,
@@ -661,68 +661,83 @@ const Current = ({
   if (!currentData) return null;
 
   const { displayName, fieldName, value, percent } = currentData;
+  let nameTemp = displayName? displayName : fieldName;  //类目名
+  let nameList = [];
+  if(textBreak){    //如果限制了首行字符，则切割组件
+    while(nameTemp.length>textBreak){
+      nameList.push(nameTemp.slice(0,textBreak));
+      nameTemp = nameTemp.slice(textBreak)
+    }
+  }
+  nameList.push(nameTemp)
+  let foreignStyle={    //foreignObject标签样式，
+    width:"100%",
+    height:"100%",
+    transform:"translate(-50%,-50%)",
+  },
+  boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
+    width:"100%",
+    height:'100%',
+    display:"flex",
+    flexDirection:"column",
+    justifyContent:"center",
+    alignItems:"center"
+  }
 
   return (
     show && (
       <>
-        {showName && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showValue && showPercent
-                ? -1
-                : showValue || showPercent
-                ? -0.5
-                : 0) * gap
+        <foreignObject style={foreignStyle}>
+          <div style={boxStyle}>
+            { //类目名称
+              showName && <div 
+                style={{
+                  ...getFontStyle(nameFont),
+                  margin:gap/2+"px 0",
+                  display:"flex",
+                  flexDirection:"column",
+                  alignItems:"center"
+                }}>
+                {
+                  nameList.map((d,i)=>{
+                    return <span key={i}>{d}</span>
+                  })
+                }
+              </div>
             }
-            {...getFontStyle(nameFont, 'svg')}
-          >
-            {displayName || fieldName}
-          </text>
-        )}
-        {showValue && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showName && showPercent
-                ? 0
-                : showName && !showPercent
-                ? 0.5
-                : showPercent
-                ? -0.5
-                : 0) *
-                gap +
-              translateValueY
+            { //真实值
+              showValue && <span 
+                style={{
+                  ...getFontStyle(valueFont),
+                  transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
+                  margin:gap/2+"px 0"
+                }}>
+                {value}
+                {showSuffix && text && (
+                  <span
+                    style={{
+                      transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
+                      fontSize:fontSize
+                    }}
+                  >
+                    {text}
+                  </span>
+                )}
+              </span>
             }
-            dx={translateValueX}
-            {...getFontStyle(valueFont, 'svg')}
-          >
-            {value}
-            {showSuffix && text && (
-              <tspan
-                dx={translateSuffixX}
-                dy={translateSuffixY}
-                fontSize={fontSize}
+            { //百分比值
+              showPercent && <span
+                style={{
+                  transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
+                  ...getFontStyle(percentFont),
+                  margin:gap/2+"px 0"
+                }}
               >
-                {text}
-              </tspan>
-            )}
-          </text>
-        )}
-        {showPercent && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showName && showValue ? 1 : showName || showValue ? 0.5 : 0) *
-                gap +
-              translatePercentY
+                {percent + '%'}
+              </span>
             }
-            dx={translatePercentX}
-            {...getFontStyle(percentFont, 'svg')}
-          >
-            {percent + '%'}
-          </text>
-        )}
+          </div>
+        </foreignObject>
       </>
     )
   );
@@ -759,7 +774,7 @@ const Label = ({
   arcs,
   animation
 }) => {
-  // const [labels, setLabels] = useState(null);
+   // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
 
   const _arcs = useMemo(
@@ -803,11 +818,11 @@ const Label = ({
   //     console.log('bbox: ', bbox);
   //   }
   // }, [labels]);
-  
+
   return (
     <g
-    // style={{ opacity }} ref={setLabels}
-    >
+       // style={{ opacity }} ref={setLabels}
+      >
       {_arcs.map(
         (
           {

package/src/components/Tooltip.js

@@ -81,7 +81,7 @@ 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
               );
@@ -105,7 +105,7 @@ export default memo(
                     <span style={_icon} />
                     <span style={getFontStyle(name)}>{displayName || s}</span>
                   </span>
-                  <span style={getFontStyle(value)}>{y}</span>
+                  <span style={getFontStyle(value)}>{showY}</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

@@ -42,7 +42,7 @@ export const pieLegendFormatter = (
         }
       >
         {showName && (
-          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont) }}>
+          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont), whiteSpace:"nowrap" }}>
             {displayName}
           </span>
         )}

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,
   ];