@easyv/charts 1.2.1 → 1.2.2

package/src/components/PieChart.js

@@ -39,35 +39,35 @@ const defaultChart = {
 const defaultAngle = { startAngle: 0, endAngle: 360, antiClockwise: false };
 
 const nameDy = (showValue, showPercent, mode, dir) => {
-  if(showValue||showPercent){
-    if(mode=="vertical"){
-      return dir==1?"1.1em":"-2.6em"
-    }else{
-      return 0
+  if (showValue || showPercent) {
+    if (mode == 'vertical') {
+      return dir == 1 ? '1.1em' : '-2.6em';
+    } else {
+      return 0;
     }
-  }else{
-    if(mode=="vertical"){
-      return dir*1.1+"em"
-    }else{
-      return 0
+  } else {
+    if (mode == 'vertical') {
+      return dir * 1.1 + 'em';
+    } else {
+      return 0;
     }
   }
-}
-const valueDy = (value1, mode, dir)=>{
-  if(value1){
-    if(mode=="vertical"){
-      return "1.5em"
-    }else{
-      return 0
+};
+const valueDy = (value1, mode, dir) => {
+  if (value1) {
+    if (mode == 'vertical') {
+      return '1.5em';
+    } else {
+      return 0;
     }
-  }else{
-    if(mode=="vertical"){
-      return dir==1?"1.1em":"-1.1em"
-    }else{
-      return 0
+  } else {
+    if (mode == 'vertical') {
+      return dir == 1 ? '1.1em' : '-1.1em';
+    } else {
+      return 0;
     }
   }
-}
+};
 
 const percentDy_ = (showName, showValue, mode, dir) => {
   if (showValue) {
@@ -81,7 +81,7 @@ const percentDy_ = (showName, showValue, mode, dir) => {
     }
   } else {
     if (mode == 'vertical') {
-      return dir*1.1+'em';
+      return dir * 1.1 + 'em';
     } else {
       return 0;
     }
@@ -192,41 +192,41 @@ const getArc = (
     .padAngle(padAngle),
 });
 
-const getCircleScale = ({ count, color, width, length }=tick, radius)=>{
+const getCircleScale = ({ count, color, width, length } = tick, radius) => {
   let data = [],
-      arcs = [],
-      centroids = [];
-    for (let i = 0; i < count; i++) {
-      data.push(1);
-    }
-    let scaleData = pie()(data);
-    scaleData.map((data) => {
-      let _arc = arc()
-        .innerRadius(radius + length/2)
-        .outerRadius(radius + length/2)
-        .startAngle(data.startAngle)
-        .endAngle(data.endAngle);
-      arcs.push(_arc());
-      centroids.push(_arc.centroid());
-    });
-    return (
-      <g>
-        {centroids.map((center, index) => {
-          let x = center[0],
-            y = center[1];
-          let rate = length / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
-          return (
-            <path
-              key={index}
-              d={`M${x},${y}l${x * rate},${y * rate}`}
-              strokeWidth={width}
-              stroke={color}
-            />
-          );
-        })}
-      </g>
-    );
-}
+    arcs = [],
+    centroids = [];
+  for (let i = 0; i < count; i++) {
+    data.push(1);
+  }
+  let scaleData = pie()(data);
+  scaleData.map((data) => {
+    let _arc = arc()
+      .innerRadius(radius + length / 2)
+      .outerRadius(radius + length / 2)
+      .startAngle(data.startAngle)
+      .endAngle(data.endAngle);
+    arcs.push(_arc());
+    centroids.push(_arc.centroid());
+  });
+  return (
+    <g>
+      {centroids.map((center, index) => {
+        let x = center[0],
+          y = center[1];
+        let rate = length / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+        return (
+          <path
+            key={index}
+            d={`M${x},${y}l${x * rate},${y * rate}`}
+            strokeWidth={width}
+            stroke={color}
+          />
+        );
+      })}
+    </g>
+  );
+};
 
 const Component = memo(
   ({
@@ -241,7 +241,7 @@ const Component = memo(
       },
       fan: {
         chart = defaultChart,
-        chart: { outerRadius = defaultChart.outerRadius,padAngle },
+        chart: { outerRadius = defaultChart.outerRadius, padAngle },
         angle = defaultAngle,
         stroke: { show, strokeWidth, color } = { show: false },
         decorate,
@@ -254,8 +254,15 @@ const Component = memo(
       series,
       animation: {
         on,
-        current: { heighten=0, opacity=0, width:radiusWidthAdd=0, color:animateColor, textStyle:animateCTS, gap=0 },
-        rotate = 0
+        current: {
+          heighten = 0,
+          opacity = 0,
+          width: radiusWidthAdd = 0,
+          color: animateColor,
+          textStyle: animateCTS,
+          gap = 0,
+        },
+        rotate = 0,
       },
     },
     state: { currentIndex, trigger },
@@ -416,15 +423,20 @@ const Component = memo(
     const halfChartWidth = chartWidth / 2;
     const halfChartHeight = chartHeight / 2;
 
-    const rotate_ = decorate2?-(arcs[+currentIndex].startAngle+arcs[+currentIndex].endAngle)*90/Math.PI+rotate:0;
+    const rotate_ = decorate2
+      ? (-(arcs[+currentIndex].startAngle + arcs[+currentIndex].endAngle) *
+          90) /
+          Math.PI +
+        rotate
+      : 0;
     let maxRadius = 0;
-    _arcs.map(d=>{
-      maxRadius=Math.max(maxRadius,d.outerRadius);
-    })
-    let centerRadius =0.5*maxRadius + 0.5*_arcs[0].innerRadius
-    return (
-      outerDecorate?<>
-        <ChartContainer   //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
+    _arcs.map((d) => {
+      maxRadius = Math.max(maxRadius, d.outerRadius);
+    });
+    let centerRadius = 0.5 * maxRadius + 0.5 * _arcs[0].innerRadius;
+    return outerDecorate ? (
+      <>
+        <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
           width={width}
           height={height}
           marginLeft={marginLeft}
@@ -432,67 +444,93 @@ const Component = memo(
         >
           <g
             style={{
-              transition:"transform ease-in-out 0.3s",
-              transform:'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate('+rotate_+"deg)"
+              transition: 'transform ease-in-out 0.3s',
+              transform:
+                'translate(' +
+                halfChartWidth +
+                'px, ' +
+                halfChartHeight +
+                'px) rotate(' +
+                rotate_ +
+                'deg)',
             }}
           >
             {
               //用于生成外环装饰的刻度
-              outerDecorate.tick.show && getCircleScale(outerDecorate.tick, maxRadius)
+              outerDecorate.tick.show &&
+                getCircleScale(outerDecorate.tick, maxRadius)
             }
-            <circle     //外环装饰
+            <circle //外环装饰
               cx='0'
               cy='0'
-              r={maxRadius+2}
+              r={maxRadius + 2}
               fill='none'
               stroke={outerDecorate.color}
               strokeWidth={outerDecorate.width}
             />
-            {
-              _arcs.map(
-                ({ id, value, series, arc, innerRadius, outerRadius, index: dataIndex }, index) => {
-                  const arcWidth = (outerRadius-innerRadius);
-                  const path = arc
-                    .innerRadius(centerRadius)
-                    .outerRadius(centerRadius)(value);
-                  const dashLength=Math.ceil(Math.PI*(centerRadius)*2/_arcs.length);
-                  const pie = getColorList(series.color);
-                  return (
-                    <Fragment key={index}>
-                      <path
-                        className={ringCss['inner-arc']}
-                        style={{
-                          strokeDasharray:`${dashLength},${2*dashLength}`,
-                          strokeDashoffset: dashLength,
-                          animationDelay: `${index * 2000}ms`
-                        }}
-                        data-index={dataIndex}
-                        onClick={onClick}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        d={path.split("L")[0]}
-                        stroke={'url(#' + id + ')'}
-                        strokeWidth={arcWidth}
-                        fill="none"
+            {_arcs.map(
+              (
+                {
+                  id,
+                  value,
+                  series,
+                  arc,
+                  innerRadius,
+                  outerRadius,
+                  index: dataIndex,
+                },
+                index
+              ) => {
+                const arcWidth = outerRadius - innerRadius;
+                const path = arc
+                  .innerRadius(centerRadius)
+                  .outerRadius(centerRadius)(value);
+                const dashLength = Math.ceil(
+                  (Math.PI * centerRadius * 2) / _arcs.length
+                );
+                const pie = getColorList(series.color);
+                return (
+                  <Fragment key={index}>
+                    <path
+                      className={ringCss['inner-arc']}
+                      style={{
+                        strokeDasharray: `${dashLength},${2 * dashLength}`,
+                        strokeDashoffset: dashLength,
+                        animationDelay: `${index * 2000}ms`,
+                      }}
+                      data-index={dataIndex}
+                      onClick={onClick}
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
+                      d={path.split('L')[0]}
+                      stroke={'url(#' + id + ')'}
+                      strokeWidth={arcWidth}
+                      fill='none'
+                    />
+                    <defs>
+                      <LinearGradient
+                        id={id}
+                        colors={pie}
+                        rotate={series.color.linear.angle + 180}
+                        // gradientUnits='objectBoundingBox'
                       />
-                      <defs>
-                        <LinearGradient
-                          id={id}
-                          colors={pie}
-                          rotate={series.color.linear.angle + 180}
-                          // gradientUnits='objectBoundingBox'
-                        />
-                      </defs>
-                    </Fragment>
-                  );
-                }
-              )
-            }
-          {label && <RingLabel config={{...label,maxRadius: maxRadius+2}} arcs={_arcs}/>}
+                    </defs>
+                  </Fragment>
+                );
+              }
+            )}
+            {label && (
+              <RingLabel
+                config={{ ...label, maxRadius: maxRadius + 2 }}
+                arcs={_arcs}
+              />
+            )}
           </g>
         </ChartContainer>
-        <Legend {...legend} series={_arcs} formatter={formatter}/>
-      </> : <>
+        <Legend {...legend} series={_arcs} formatter={formatter} />
+      </>
+    ) : (
+      <>
         <ChartContainer
           width={width}
           height={height}
@@ -501,31 +539,67 @@ const Component = memo(
         >
           <g
             style={{
-              transition:"transform ease-in-out 0.3s",
-              transform:'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate('+rotate_+"deg)"
+              transition: 'transform ease-in-out 0.3s',
+              transform:
+                'translate(' +
+                halfChartWidth +
+                'px, ' +
+                halfChartHeight +
+                'px) rotate(' +
+                rotate_ +
+                'deg)',
             }}
           >
             {_arcs.map(
-              ({ id, value, series, arc, innerRadius, outerRadius, index: dataIndex }, index) => {
+              (
+                {
+                  id,
+                  value,
+                  series,
+                  arc,
+                  innerRadius,
+                  outerRadius,
+                  index: dataIndex,
+                },
+                index
+              ) => {
                 const current = index == currentIndex;
                 const prev = index == prevIndex.current;
                 const offset = current ? y : prev ? 1 - y : 0;
 
-                const fillOpacity = animateColor?1:(current ? opacity / 100 : 1);
-                const deltaHeighten= offset*heighten;
+                const fillOpacity = animateColor
+                  ? 1
+                  : current
+                  ? opacity / 100
+                  : 1;
+                const deltaHeighten = offset * heighten;
                 const path = arc
                   .innerRadius(innerRadius + deltaHeighten)
                   .outerRadius(outerRadius + deltaHeighten)(value);
                 const pie = getColorList(series.color);
-                const currentPie = animateColor?getColorList(animateColor):getColorList(series.color);
-                let textPath="",categoryTextStyle={};
-                if(categoryText && categoryText.show){    //如果有类目文本，则需要计算文字路径
+                const currentPie = animateColor
+                  ? getColorList(animateColor)
+                  : getColorList(series.color);
+                let textPath = '',
+                  categoryTextStyle = {};
+                if (categoryText && categoryText.show) {
+                  //如果有类目文本，则需要计算文字路径
                   //let offsetWidth=decorate2.radiusWidth/2 + radiusWidthAdd/2;   //当前文字需生成在装饰物内，故而半径需要减小
-                  let textArc=arc.innerRadius(outerRadius+(current?gap:categoryText.gap))
-                    .outerRadius(outerRadius+(current?gap:categoryText.gap))(value);
-                  let lastA=textArc.lastIndexOf('A');
-                  textPath=textArc.slice(0, lastA > 0 ? lastA : textArc.length);    //文字路径
-                  categoryTextStyle=current?animateCTS:categoryText.textStyle;   //这里把textstyle拿出来
+                  let textArc = arc
+                    .innerRadius(
+                      outerRadius + (current ? gap : categoryText.gap)
+                    )
+                    .outerRadius(
+                      outerRadius + (current ? gap : categoryText.gap)
+                    )(value);
+                  let lastA = textArc.lastIndexOf('A');
+                  textPath = textArc.slice(
+                    0,
+                    lastA > 0 ? lastA : textArc.length
+                  ); //文字路径
+                  categoryTextStyle = current
+                    ? animateCTS
+                    : categoryText.textStyle; //这里把textstyle拿出来
                 }
 
                 return (
@@ -541,56 +615,77 @@ const Component = memo(
                       fill={'url(#' + id + ')'}
                       fillOpacity={fillOpacity}
                     />
-                    { //装饰物2，产生于每个弧的外部
-                      decorate2 && decorate2.show &&
-                      <path
-                        data-index={dataIndex}
-                        onClick={onClick}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        d={arc.innerRadius(outerRadius)
-                              .outerRadius(outerRadius + decorate2.radiusWidth + (current?radiusWidthAdd:0))(value)}
-                        stroke={show ? color : 'none'}
-                        strokeWidth={show ? strokeWidth : '0'}
-                        fill={'url(#' + id + ')'}
-                        fillOpacity={decorate2.opacity/100}
-                      />
-                    }
-                    { //类目文本
-                      categoryText && categoryText.show &&<g>
+                    {
+                      //装饰物2，产生于每个弧的外部
+                      decorate2 && decorate2.show && (
                         <path
+                          data-index={dataIndex}
                           onClick={onClick}
                           onMouseEnter={onMouseEnter}
                           onMouseLeave={onMouseLeave}
-                          id={id + '_text_' + index}
-                          d={textPath}
-                          fill='none'
-                          stroke='none'
+                          d={arc
+                            .innerRadius(outerRadius)
+                            .outerRadius(
+                              outerRadius +
+                                decorate2.radiusWidth +
+                                (current ? radiusWidthAdd : 0)
+                            )(value)}
+                          stroke={show ? color : 'none'}
+                          strokeWidth={show ? strokeWidth : '0'}
+                          fill={'url(#' + id + ')'}
+                          fillOpacity={decorate2.opacity / 100}
                         />
-                        <text
-                          textAnchor='middle'
-                          style={{
-                            ...categoryTextStyle,
-                            fontWeight:categoryTextStyle.bold?"bold":"normal",
-                            fontStyle:categoryTextStyle.italic?"italic":"normal",
-                            pointerEvents:"none"
-                          }}
-                          fill={categoryTextStyle.color}
-                        >
-                          <textPath
-                            startOffset='50%'
-                            href={'#' + id + '_text_' + index}
+                      )
+                    }
+                    {
+                      //类目文本
+                      categoryText && categoryText.show && (
+                        <g>
+                          <path
+                            onClick={onClick}
+                            onMouseEnter={onMouseEnter}
+                            onMouseLeave={onMouseLeave}
+                            id={id + '_text_' + index}
+                            d={textPath}
+                            fill='none'
+                            stroke='none'
+                          />
+                          <text
+                            textAnchor='middle'
+                            style={{
+                              ...categoryTextStyle,
+                              fontWeight: categoryTextStyle.bold
+                                ? 'bold'
+                                : 'normal',
+                              fontStyle: categoryTextStyle.italic
+                                ? 'italic'
+                                : 'normal',
+                              pointerEvents: 'none',
+                            }}
+                            fill={categoryTextStyle.color}
                           >
-                            {_arcs[index].displayName || _arcs[index].fieldName}
-                          </textPath>
-                        </text>
-                      </g>
+                            <textPath
+                              startOffset='50%'
+                              href={'#' + id + '_text_' + index}
+                            >
+                              {_arcs[index].displayName ||
+                                _arcs[index].fieldName}
+                            </textPath>
+                          </text>
+                        </g>
+                      )
                     }
                     <defs>
                       <LinearGradient
                         id={id}
-                        colors={current?currentPie:pie}
-                        rotate={current?(animateColor?animateColor.linear.angle + 180:series.color.linear.angle + 180):series.color.linear.angle + 180}
+                        colors={current ? currentPie : pie}
+                        rotate={
+                          current
+                            ? animateColor
+                              ? animateColor.linear.angle + 180
+                              : series.color.linear.angle + 180
+                            : series.color.linear.angle + 180
+                        }
                         // gradientUnits='objectBoundingBox'
                       />
                     </defs>
@@ -600,7 +695,10 @@ const Component = memo(
             )}
             {label && <Label config={label} arcs={_arcs} />}
             {current && (
-              <g fillOpacity={y} style={{ transform:"rotate("+(-rotate_)+"deg)" }}>
+              <g
+                fillOpacity={y}
+                style={{ transform: 'rotate(' + -rotate_ + 'deg)' }}
+              >
                 <Current
                   config={current}
                   width={width}
@@ -633,15 +731,17 @@ const Current = ({
   config: {
     show,
     gap,
-    name: { show: showName, font: nameFont, textBreak },
+    name: { show: showName, sameColor: nameColor, font: nameFont, textBreak },
     percent: {
       show: showPercent,
+      sameColor: percentColor,
       font: percentFont,
       precision,
       translate: { x: translatePercentX, y: translatePercentY },
     },
     value: {
       show: showValue,
+      sameColor: valueColor,
       font: valueFont,
       translate: { x: translateValueX, y: translateValueY },
       suffix: {
@@ -666,80 +766,114 @@ const Current = ({
   if (!currentData) return null;
 
   const { displayName, fieldName, value, percent } = currentData;
-  let nameTemp = displayName? displayName : fieldName;  //类目名
+  let nameTemp = displayName ? displayName : fieldName; //类目名
   let nameList = [];
-  if(textBreak){    //如果限制了首行字符，则切割组件
-    while(nameTemp.length>textBreak){
-      nameList.push(nameTemp.slice(0,textBreak));
-      nameTemp = nameTemp.slice(textBreak)
+  if (textBreak) {
+    //如果限制了首行字符，则切割组件
+    while (nameTemp.length > textBreak) {
+      nameList.push(nameTemp.slice(0, textBreak));
+      nameTemp = nameTemp.slice(textBreak);
     }
   }
-  nameList.push(nameTemp)
-  let foreignStyle={    //foreignObject标签样式，
-    width,
-    height,
-    transform:`translate(-${width/2}px,-${height/2}px)`,
-    pointerEvents:"none"
-  },
-  boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
-    width,
-    height,
-    display:"flex",
-    flexDirection:"column",
-    justifyContent:"center",
-    alignItems:"center"
-  }
-
+  nameList.push(nameTemp);
+  let foreignStyle = {
+      //foreignObject标签样式，
+      width,
+      height,
+      transform: `translate(-${width / 2}px,-${height / 2}px)`,
+      pointerEvents: 'none',
+    },
+    boxStyle = {
+      //弹性盒子样式，用于当前值的上下居中对齐等
+      width,
+      height,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    };
+  let seriesColor = currentData.series.color;
+  seriesColor =
+    seriesColor.type == 'pure'
+      ? seriesColor.pure
+      : seriesColor.linear.stops[0].color;
   return (
     show && (
       <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>
+          {
+            //类目名称
+            showName && (
+              <div
+                style={{
+                  ...getFontStyle(nameFont),
+                  margin: gap / 2 + 'px 0',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: nameColor ? seriesColor : nameFont.color,
+                }}
+              >
+                {nameList.map((d, i) => {
+                  return <span key={i}>{d}</span>;
+                })}
+              </div>
+            )
           }
-          { //真实值
-            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>
+          {
+            //真实值
+            showValue && (
+              <span
+                style={{
+                  ...getFontStyle(valueFont),
+                  transform:
+                    'translate(' +
+                    translateValueX +
+                    'px,' +
+                    translateValueY +
+                    'px)',
+                  margin: gap / 2 + 'px 0',
+                  color: valueColor ? seriesColor : valueFont.color,
+                }}
+              >
+                {value}
+                {showSuffix && text && (
+                  <span
+                    style={{
+                      transform:
+                        'translate(' +
+                        translateSuffixX +
+                        'px,' +
+                        translateSuffixY +
+                        'px)',
+                      fontSize: fontSize,
+                    }}
+                  >
+                    {text}
+                  </span>
+                )}
+              </span>
+            )
           }
-          { //百分比值
-            showPercent && <span
-              style={{
-                transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
-                ...getFontStyle(percentFont),
-                margin:gap/2+"px 0"
-              }}
-            >
-              {percent + '%'}
-            </span>
+          {
+            //百分比值
+            showPercent && (
+              <span
+                style={{
+                  transform:
+                    'translate(' +
+                    translatePercentX +
+                    'px,' +
+                    translatePercentY +
+                    'px)',
+                  ...getFontStyle(percentFont),
+                  margin: gap / 2 + 'px 0',
+                  color: percentColor ? seriesColor : percentFont.color,
+                }}
+              >
+                {percent + '%'}
+              </span>
+            )
           }
         </div>
       </foreignObject>
@@ -776,9 +910,9 @@ const Label = ({
     },
   },
   arcs,
-  animation
+  animation,
 }) => {
-   // const [labels, setLabels] = useState(null);
+  // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
 
   const _arcs = useMemo(
@@ -825,8 +959,8 @@ const Label = ({
 
   return (
     <g
-       // style={{ opacity }} ref={setLabels}
-      >
+    // style={{ opacity }} ref={setLabels}
+    >
       {_arcs.map(
         (
           {
@@ -842,22 +976,24 @@ const Label = ({
             percent,
             arc,
             outerRadius,
-            index:actualIndex
+            index: actualIndex,
           },
           index
         ) => {
-
           const [x, y] = arc.centroid();
           const midAngle = Math.atan2(y, x);
 
-          const [x1, y1] = getCoord(midAngle, maxRadius?maxRadius:outerRadius);
+          const [x1, y1] = getCoord(
+            midAngle,
+            maxRadius ? maxRadius : outerRadius
+          );
 
-          const radius = (maxRadius?maxRadius:outerRadius) + distance;
+          const radius = (maxRadius ? maxRadius : outerRadius) + distance;
           const [x2, y2] = getCoord(midAngle, radius);
-          
+
           const direction = x2 < 0 ? -1 : 1;
           const x3 = x2 + lineLength * direction;
-          
+
           const _x = x3 + (translateX + 6) * direction;
 
           const _showName = showName && displayName;
@@ -868,19 +1004,42 @@ const Label = ({
             (_showName || showPercent || showValue) && (
               <g key={index}>
                 <path
-                  className={animation? ringCss['label-line']:""}
-                  style={{ animationDelay:`${animation? ((actualIndex+1) * 2000 - 800) : 0}ms`}}
+                  className={animation ? ringCss['label-line'] : ''}
+                  style={{
+                    animationDelay: `${
+                      animation ? (actualIndex + 1) * 2000 - 800 : 0
+                    }ms`,
+                  }}
                   d={
-                    'M' + x1 + ', ' + y1 + 'L' + 
-                    x2 + ', ' + y2 + 'L' +
-                    x3 + ', ' + y2
+                    'M' +
+                    x1 +
+                    ', ' +
+                    y1 +
+                    'L' +
+                    x2 +
+                    ', ' +
+                    y2 +
+                    'L' +
+                    x3 +
+                    ', ' +
+                    y2
+                  }
+                  stroke={
+                    lineColor
+                      ? lineColor
+                      : type == 'pure'
+                      ? pure
+                      : stops[0].color
                   }
-                  stroke={lineColor?lineColor:(type == 'pure' ? pure : stops[0].color)}
                   fill='none'
                 />
                 <text
-                  className={animation? ringCss['label-text']:""}
-                  style={{ animationDelay:`${animation? ((actualIndex+1) * 2000 - 800) : 0}ms`}}
+                  className={animation ? ringCss['label-text'] : ''}
+                  style={{
+                    animationDelay: `${
+                      animation ? (actualIndex + 1) * 2000 - 800 : 0
+                    }ms`,
+                  }}
                   x={_x}
                   y={y2 + translateY}
                   dominantBaseline='middle'
@@ -921,7 +1080,7 @@ const Label = ({
                       dx={percentDx(_showName, _showValue, mode)}
                       dy={
                         percentDy(_showName, _showValue, mode) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : "")
+                        (_showValue && showSuffix ? suffixTranslateY * -1 : '')
                       }
                       style={getFontStyle(percentFont, 'svg')}
                     >
@@ -941,7 +1100,7 @@ const Label = ({
   );
 };
 
-const RingLabel =({
+const RingLabel = ({
   config: {
     maxRadius = 0,
     lineLength,
@@ -969,13 +1128,13 @@ const RingLabel =({
       sameColor: percentSameColor = false,
     },
   },
-  arcs
+  arcs,
 }) => {
   const _arcs = useMemo(
     () => getDataWithPercent(arcs, precision),
     [arcs, precision]
   );
-  
+
   return (
     <g>
       {_arcs.map(
@@ -988,31 +1147,33 @@ const RingLabel =({
                 linear: { stops },
               },
             },
-            data:realData,
+            data: realData,
             displayName,
             value,
             percent,
             arc,
             outerRadius,
-            index:actualIndex
+            index: actualIndex,
           },
           index
         ) => {
-
           const [x, y] = arc.centroid();
-         
+
           const midAngle = Math.atan2(y, x);
 
-          const [x1, y1] = getCoord(midAngle, maxRadius?maxRadius:outerRadius);
-          
-          const radius = (maxRadius?maxRadius:outerRadius) + distance;
+          const [x1, y1] = getCoord(
+            midAngle,
+            maxRadius ? maxRadius : outerRadius
+          );
+
+          const radius = (maxRadius ? maxRadius : outerRadius) + distance;
           const [x2, y2] = getCoord(midAngle, radius);
 
           const directionX = x2 < 0 ? -1 : 1;
           const directionY = y2 < 0 ? -1 : 1;
           const x3 = x2 + lineLength * directionX;
           const _x = x3 + (translateX + 6) * directionX;
-          
+
           const _showName = showName && displayName;
           const _showValue = showValue && (value || showSuffix);
 
@@ -1022,32 +1183,54 @@ const RingLabel =({
               <g key={index}>
                 <path
                   className={ringCss['label-line']}
-                  style={{ animationDelay:`${(actualIndex+1) * 2000 - 800}ms`}}
+                  style={{
+                    animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                  }}
                   d={
-                    'M' + x1 + ', ' + y1 + 'L' + 
-                    x2 + ', ' + y2 + 'L' +
-                    x3 + ', ' + y2
+                    'M' +
+                    x1 +
+                    ', ' +
+                    y1 +
+                    'L' +
+                    x2 +
+                    ', ' +
+                    y2 +
+                    'L' +
+                    x3 +
+                    ', ' +
+                    y2
+                  }
+                  stroke={
+                    lineColor
+                      ? lineColor
+                      : type == 'pure'
+                      ? pure
+                      : stops[0].color
                   }
-                  stroke={lineColor?lineColor:(type == 'pure' ? pure : stops[0].color)}
                   fill='none'
                 />
                 <text
                   className={ringCss['label-text']}
-                  style={{ animationDelay:`${(actualIndex+1) * 2000 - 800}ms`}}
-                  x={mode=="horizontal"?_x:x2}
+                  style={{
+                    animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                  }}
+                  x={mode == 'horizontal' ? _x : x2}
                   y={y2 + translateY}
                   dominantBaseline='middle'
                   textAnchor={x3 >= 0 ? 'start' : 'end'}
                 >
                   {_showName && (
-                    <tspan dy={nameDy(_showValue, showPercent, mode, directionY)} style={getFontStyle(nameFont, 'svg')}>
+                    <tspan
+                      dy={nameDy(_showValue, showPercent, mode, directionY)}
+                      style={getFontStyle(nameFont, 'svg')}
+                    >
                       {displayName + (showValue || showPercent ? ':' : '')}
                     </tspan>
                   )}
                   {_showValue && (
                     <>
                       <tspan
-                        x={ _showName?(mode=="horizontal"?'':x2):'' }
+                        x={_showName ? (mode == 'horizontal' ? '' : x2) : ''}
                         dx={valueDx(_showName, mode)}
                         dy={valueDy(_showName, mode, directionY)}
                         style={getFontStyle(valueFont, 'svg')}
@@ -1070,11 +1253,19 @@ const RingLabel =({
                   )}
                   {showPercent && (
                     <tspan
-                      x={_showName?(_showValue?'':(mode=="vertical"?x2:'')):''}
+                      x={
+                        _showName
+                          ? _showValue
+                            ? ''
+                            : mode == 'vertical'
+                            ? x2
+                            : ''
+                          : ''
+                      }
                       dx={percentDx(_showName, _showValue, mode)}
                       dy={
                         percentDy_(_showName, _showValue, mode, directionY) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : "")
+                        (_showValue && showSuffix ? suffixTranslateY * -1 : '')
                       }
                       style={getFontStyle(percentFont, 'svg')}
                     >