amazing-react-charts 0.4.12 → 0.4.14

package/dist/core/DonutChart.js

@@ -37,6 +37,15 @@ var WIDTH_STYLE = {
   width: '99.9%'
 };
 exports.WIDTH_STYLE = WIDTH_STYLE;
+var titleStyle = {
+  position: 'absolute',
+  top: 5,
+  margin: 0,
+  fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+  fontSize: 16,
+  fontWeight: 300,
+  color: 'black'
+};
 
 var DonutChart = function DonutChart(props) {
   var titleProps = props.title,
@@ -114,14 +123,13 @@ var DonutChart = function DonutChart(props) {
     grid: grid,
     color: colors,
     title: {
-      left: resultFormatType ? '0.1%' : '6.2%',
-      top: resultFormatType && '5.7%',
-      show: title,
-      text: titleProps,
+      top: 'middle',
+      left: 'center',
+      text: donutCenterValue || (0, _auxiliarFunctions.thousandSeparator)(totalValues),
       textAlign: 'left',
       textStyle: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: 16,
+        fontSize: centerPieValueFontSize || 24,
         fontWeight: '300'
       }
     },
@@ -141,21 +149,6 @@ var DonutChart = function DonutChart(props) {
       icon: 'shape'
     },
     series: [{
-      name: 'background',
-      type: 'pie',
-      radius: donutRadius,
-      data: data,
-      animation: false,
-      center: center || ['50%', '50%'],
-      label: {
-        color: 'black',
-        position: 'center',
-        formatter: donutCenterValue || (0, _auxiliarFunctions.thousandSeparator)(totalValues),
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: centerPieValueFontSize || 24,
-        fontWeight: '300'
-      }
-    }, {
       name: 'first',
       type: 'pie',
       radius: donutRadius,
@@ -179,11 +172,22 @@ var DonutChart = function DonutChart(props) {
       borderColor: pieceBorderColor || 'white'
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
-    style: WIDTH_STYLE,
+
+  var TitleChart = function TitleChart() {
+    return /*#__PURE__*/_react.default.createElement("h1", {
+      style: titleStyle
+    }, titleProps);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, title && /*#__PURE__*/_react.default.createElement(TitleChart, null), /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
+    style: _objectSpread({}, WIDTH_STYLE),
     opts: (0, _auxiliarFunctions.getWidthOpts)(width),
     option: options
-  });
+  }));
 };
 
 exports.DonutChart = DonutChart;

package/dist/lib/auxiliarFunctions.js

@@ -33,7 +33,7 @@ var takeLabelComplement = function takeLabelComplement(item, yComplement, typeCh
 exports.takeLabelComplement = takeLabelComplement;
 
 var takeDonutChartComplement = function takeDonutChartComplement(item, complement) {
-  return item === 0 && typeof complement === 'function' ? '' : "".concat(item, " (").concat(complement || '', ")");
+  return item === 0 && typeof complement === 'function' ? '' : "".concat(item, "  ").concat(complement ? "(".concat(complement, ")") : '');
 };
 
 exports.takeDonutChartComplement = takeDonutChartComplement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amazing-react-charts",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "An amazing react charts package based in echarts",
   "license": "MIT",
   "main": "dist/index.js",

package/src/core/DonutChart.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { CSSProperties, useEffect, useState } from 'react'
 import ReactEcharts from 'echarts-for-react'
 import { IProps } from './PieChart'
 import { PieChartData, PieDataLabel } from './types'
@@ -23,6 +23,16 @@ interface IDonutProps extends IProps {
 
 export const WIDTH_STYLE = { width: '99.9%' }
 
+const titleStyle: CSSProperties = {
+  position: 'absolute',
+  top: 5,
+  margin: 0,
+  fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+  fontSize: 16,
+  fontWeight: 300,
+  color: 'black'
+}
+
 export const DonutChart = (props: IDonutProps) => {
   const {
     title: titleProps,
@@ -113,14 +123,13 @@ export const DonutChart = (props: IDonutProps) => {
     grid: grid,
     color: colors,
     title: {
-      left: resultFormatType ? '0.1%' : '6.2%',
-      top: resultFormatType && '5.7%',
-      show: title,
-      text: titleProps,
+      top: 'middle',
+      left: 'center',
+      text: donutCenterValue || thousandSeparator(totalValues),
       textAlign: 'left',
       textStyle: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: 16,
+        fontSize: centerPieValueFontSize || 24,
         fontWeight: '300' as const
       }
     },
@@ -138,22 +147,6 @@ export const DonutChart = (props: IDonutProps) => {
       icon: 'shape'
     },
     series: [
-      {
-        name: 'background',
-        type: 'pie',
-        radius: donutRadius,
-        data: data,
-        animation: false,
-        center: center || ['50%', '50%'],
-        label: {
-          color: 'black',
-          position: 'center',
-          formatter: donutCenterValue || thousandSeparator(totalValues),
-          fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-          fontSize: centerPieValueFontSize || 24,
-          fontWeight: '300' as const
-        }
-      },
       {
         name: 'first',
         type: 'pie',
@@ -174,19 +167,24 @@ export const DonutChart = (props: IDonutProps) => {
           length: 4,
           length2: 4
         }
-      }
+      },
     ],
     itemStyle: {
       borderColor: pieceBorderColor || 'white'
     }
   }
 
+  const TitleChart = () =>  <h1 style={titleStyle}>{titleProps}</h1>
+
   return (
-    <ReactEcharts
-      style={WIDTH_STYLE}
-      opts={getWidthOpts(width)}
-      option={options}
-    />
+    <div style={{ position: 'relative'}}>
+      {title && <TitleChart />}
+      <ReactEcharts
+        style={{...WIDTH_STYLE}}
+        opts={getWidthOpts(width)}
+        option={options}
+      />
+    </div>
   )
 }
 

package/src/lib/auxiliarFunctions.ts

@@ -38,7 +38,7 @@ export const takeDonutChartComplement = (
   complement?: Complement
 ) => item === 0 && typeof complement === 'function'
   ? ''
-  : `${item} (${complement || ''})`
+  : `${item}  ${complement ? `(${complement})` : ''}`
 
 export const timeConvert = (value: number) => {
   const hrs = Math.floor(value)