amazing-react-charts 0.5.2 → 0.7.0

package/dist/core/MultipurposeChart.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IDefaultChartProps, WidthProps } from './types';
+interface MultipurposeChartProps {
+    series: Array<{
+        name: string;
+        color?: string;
+        data: number[];
+    }>;
+    xData: Array<number | string>;
+    xType?: IDefaultChartProps['xType'];
+    yType?: IDefaultChartProps['yType'];
+    width?: WidthProps;
+    dateFormat?: string;
+    yComplement?: (input: string) => string;
+    rangeSelector?: boolean;
+}
+export declare const WIDTH_STYLE: {
+    width: string;
+};
+declare const _default: React.MemoExoticComponent<(props: MultipurposeChartProps) => JSX.Element>;
+export default _default;

package/dist/core/MultipurposeChart.js

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WIDTH_STYLE = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
+
+var _auxiliarFunctions = require("../lib/auxiliarFunctions");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var WIDTH_STYLE = {
+  width: '99.9%'
+};
+exports.WIDTH_STYLE = WIDTH_STYLE;
+
+var isDarkColor = function isDarkColor(color) {
+  var c = color.substring(1);
+  var rgb = parseInt(c, 16);
+  var r = rgb >> 16 & 0xff;
+  var g = rgb >> 8 & 0xff;
+  var b = rgb >> 0 & 0xff;
+  var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luma < 40;
+};
+
+var MAGIC_TYPE = ['line', 'bar', 'stack'];
+
+var MultipurposeChart = function MultipurposeChart(props) {
+  var series = props.series,
+      yType = props.yType,
+      xData = props.xData,
+      xType = props.xType,
+      width = props.width,
+      yComplement = props.yComplement,
+      dateFormat = props.dateFormat,
+      rangeSelector = props.rangeSelector;
+  var ref = (0, _react.useRef)(null);
+  var actualGraph = (0, _react.useRef)('bar');
+  var isStacked = (0, _react.useRef)(false);
+
+  var getLabelOptions = function getLabelOptions(barColor) {
+    var isDarkBarColor = isDarkColor(barColor);
+    return {
+      show: true,
+      position: 'insideBottom',
+      align: 'left',
+      verticalAlign: 'middle',
+      rotate: 90,
+      formatter: yComplement('{c}') + '  {name|{a}}',
+      color: isDarkBarColor ? '#FFFFFF' : '#000000',
+      fontSize: 16,
+      rich: {
+        name: {
+          color: isDarkBarColor ? '#FFFFFF' : '#000000'
+        }
+      }
+    };
+  };
+
+  var formatTooltip = function formatTooltip(lines) {
+    var takeComplement = function takeComplement(value) {
+      return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(value)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement);
+    };
+
+    var linesTooltips = lines.map(function (line) {
+      return line.seriesName + ': ' + takeComplement(Number(line.value)) + '<br>';
+    });
+    var tooltipTitle = xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? lines[0].name + '-02' : lines[0].name, dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd MMM') : lines[0].name;
+    return "".concat(tooltipTitle, " <br> ").concat(linesTooltips.join(' '));
+  };
+
+  var slider = rangeSelector ? [{
+    type: 'slider',
+    xAxisIndex: 0,
+    filterMode: 'none'
+  }] : [];
+  var options = {
+    color: (0, _toConsumableArray2.default)(series.map(function (it) {
+      return it.color;
+    })),
+    dataZoom: [].concat(slider),
+    tooltip: {
+      formatter: formatTooltip,
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: series.map(function (it) {
+        return it.name;
+      })
+    },
+    toolbox: {
+      show: true,
+      orient: 'vertical',
+      left: 'right',
+      top: 'center',
+      feature: {
+        mark: {
+          show: true
+        },
+        dataView: {
+          show: true,
+          readOnly: false,
+          title: 'Visualização de dados',
+          lang: ['Visualização de dados', 'Fechar', 'Atualizar']
+        },
+        magicType: {
+          show: true,
+          type: MAGIC_TYPE,
+          title: {
+            line: 'Gráfico de linha',
+            bar: 'Gráfico de barras',
+            stack: 'Estacar',
+            tile: 'Lado a lado'
+          }
+        },
+        saveAsImage: {
+          show: true,
+          title: 'Salvar como imagem'
+        }
+      }
+    },
+    xAxis: {
+      type: yType || 'category',
+      axisTick: {
+        show: false
+      },
+      data: xData
+    },
+    yAxis: {
+      type: xType || 'value'
+    },
+    series: (0, _toConsumableArray2.default)(series.map(function (it) {
+      return {
+        name: it.name,
+        type: 'bar',
+        barGap: 0,
+        label: getLabelOptions(it.color),
+        emphasis: {
+          focus: 'series'
+        },
+        data: it.data
+      };
+    }))
+  };
+  var onEvents = {
+    'magictypechanged': function magictypechanged(e) {
+      var echartsInstance = ref.current.getEchartsInstance();
+      var actualOptions = echartsInstance.getOption();
+
+      if (e.currentType === 'stack') {
+        isStacked.current = !isStacked.current;
+      } else {
+        actualGraph.current = e.currentType;
+      }
+
+      var newOptions = _objectSpread({}, actualOptions);
+
+      newOptions.toolbox = options.toolbox;
+      var isVertical = actualGraph.current === 'bar' && !isStacked.current;
+      var isLine = actualGraph.current === 'line';
+      var originalSeries = options.series;
+      newOptions.series.forEach(function (it, i) {
+        it.label.rotate = isVertical ? 90 : 0;
+        it.label.align = isVertical ? 'left' : 'center';
+        it.type = actualGraph.current;
+        it.label.rich.name.color = isLine ? '#000000' : originalSeries[i].label.rich.name.color;
+        it.label.color = isLine ? '#000000' : originalSeries[i].label.color;
+      });
+      ref.current.getEchartsInstance().setOption(newOptions);
+    },
+    'mouseover': function mouseover(e) {
+      var echartsInstance = ref.current.getEchartsInstance();
+      var actualOptions = echartsInstance.getOption();
+      actualOptions.color = (0, _toConsumableArray2.default)(options.color.map(function (it, i) {
+        return e.componentIndex === i ? it : "#".concat(it.slice(1), "66");
+      }));
+      actualOptions.series.forEach(function (it, i) {
+        if (i === e.componentIndex) return;
+        it.label.rich.name.color = '#00000000';
+        it.label.color = '#00000000';
+      });
+      echartsInstance.setOption(_objectSpread({}, actualOptions));
+    },
+    'mouseout': function mouseout() {
+      var echartsInstance = ref.current.getEchartsInstance();
+      var actualOptions = echartsInstance.getOption();
+      actualOptions.color = (0, _toConsumableArray2.default)(options.color);
+      var originalSeries = options.series;
+      var isLine = actualGraph.current === 'line';
+      actualOptions.series.forEach(function (it, i) {
+        it.label.rich.name.color = isLine ? '#000000' : originalSeries[i].label.rich.name.color;
+        it.label.color = isLine ? '#000000' : originalSeries[i].label.color;
+      });
+      echartsInstance.setOption(_objectSpread({}, actualOptions));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
+    style: WIDTH_STYLE,
+    opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
+    option: options,
+    ref: ref,
+    onEvents: onEvents
+  });
+};
+
+var _default = _react.default.memo(MultipurposeChart);
+
+exports.default = _default;

package/dist/core/RadarChart.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { WidthProps } from './types';
+interface RadarChartProps {
+    series: Array<{
+        name: string;
+        color: string;
+        data: number[];
+    }>;
+    indicators: Array<{
+        name: string;
+        max: number;
+    }>;
+    width?: WidthProps;
+    yComplement?: (input: string) => string;
+    circular?: boolean;
+    highlight?: boolean;
+}
+declare const RadarChart: (props: RadarChartProps) => JSX.Element;
+export default RadarChart;

package/dist/core/RadarChart.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _auxiliarFunctions = require("../lib/auxiliarFunctions");
+
+var _DonutChart = require("./DonutChart");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var RadarChart = function RadarChart(props) {
+  var width = props.width,
+      series = props.series,
+      indicators = props.indicators,
+      yComplement = props.yComplement,
+      circular = props.circular,
+      highlight = props.highlight;
+
+  var formatTooltip = function formatTooltip(lines) {
+    var takeComplement = function takeComplement(value) {
+      return (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement);
+    };
+
+    var linesTooltips = lines.data.value.map(function (value, i) {
+      return indicators[i].name + ': ' + takeComplement(Number(value)) + '<br>';
+    });
+    return "".concat(lines.name, " <br> ").concat(linesTooltips.join(' '));
+  };
+
+  var emphasis = highlight ? {
+    emphasis: {
+      areaStyle: {
+        color: 'rgba(0,250,0,0.3)'
+      }
+    }
+  } : {};
+  var options = {
+    color: series.map(function (it) {
+      return it.color;
+    }),
+    tooltip: {
+      formatter: formatTooltip,
+      trigger: 'item'
+    },
+    legend: {
+      data: series.map(function (it) {
+        return it.name;
+      })
+    },
+    radar: {
+      shape: circular && 'circle',
+      indicator: indicators.map(function (it) {
+        return {
+          name: it.name,
+          max: it.max
+        };
+      })
+    },
+    series: [_objectSpread({
+      type: 'radar',
+      data: series.map(function (it) {
+        return {
+          name: it.name,
+          value: it.data
+        };
+      })
+    }, emphasis)]
+  };
+  return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
+    style: _DonutChart.WIDTH_STYLE,
+    opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
+    option: options
+  });
+};
+
+var _default = RadarChart;
+exports.default = _default;

package/dist/index.d.ts

@@ -9,3 +9,5 @@ export { default as PictorialChart } from './core/PictorialChart';
 export { default as AudiometryChart } from './core/AudiometryChart';
 export { default as DonutChart } from './core/DonutChart';
 export { default as CoordinateLineChart } from './core/CoordinateLineChart';
+export { default as MultipurposeChart } from './core/MultipurposeChart';
+export { default as RadarChart } from './core/RadarChart';

package/dist/index.js

@@ -71,6 +71,18 @@ Object.defineProperty(exports, "CoordinateLineChart", {
     return _CoordinateLineChart.default;
   }
 });
+Object.defineProperty(exports, "MultipurposeChart", {
+  enumerable: true,
+  get: function get() {
+    return _MultipurposeChart.default;
+  }
+});
+Object.defineProperty(exports, "RadarChart", {
+  enumerable: true,
+  get: function get() {
+    return _RadarChart.default;
+  }
+});
 
 var _AreaChart = _interopRequireDefault(require("./core/AreaChart"));
 
@@ -92,4 +104,8 @@ var _AudiometryChart = _interopRequireDefault(require("./core/AudiometryChart"))
 
 var _DonutChart = _interopRequireDefault(require("./core/DonutChart"));
 
-var _CoordinateLineChart = _interopRequireDefault(require("./core/CoordinateLineChart"));
+var _CoordinateLineChart = _interopRequireDefault(require("./core/CoordinateLineChart"));
+
+var _MultipurposeChart = _interopRequireDefault(require("./core/MultipurposeChart"));
+
+var _RadarChart = _interopRequireDefault(require("./core/RadarChart"));

package/package.json

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

package/src/core/MultipurposeChart.tsx

@@ -0,0 +1,247 @@
+// @ts-nocheck
+import React, { useRef } from 'react'
+import ReactEcharts from 'echarts-for-react'
+import { EChartOption } from 'echarts/lib/echarts'
+import { 
+  formatTime, 
+  getWidthOpts, 
+  takeLabelComplement, 
+  timeConvert 
+} from '../lib/auxiliarFunctions'
+import { IDefaultChartProps, WidthProps } from './types'
+
+interface MultipurposeChartProps {
+  series: Array<{
+    name: string
+    color?: string
+    data: number[]
+  }>
+  xData: Array<number | string>
+  xType?: IDefaultChartProps['xType']
+  yType?: IDefaultChartProps['yType']
+  width?: WidthProps
+  dateFormat?: string
+  yComplement?: (input: string) => string
+  rangeSelector?: boolean
+}
+
+export const WIDTH_STYLE = { width: '99.9%' }
+
+
+const isDarkColor = (color: string) => {
+  const c = color.substring(1)
+  const rgb = parseInt(c, 16)
+  const r = (rgb >> 16) & 0xff
+  const g = (rgb >> 8) & 0xff
+  const b = (rgb >> 0) & 0xff
+
+  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b
+  return luma < 40
+}
+
+const MAGIC_TYPE = ['line', 'bar', 'stack']
+
+const MultipurposeChart = (props: MultipurposeChartProps) => {
+  const {series, yType, xData, xType, 
+    width, yComplement, dateFormat, rangeSelector} = props
+  const ref = useRef<ReactEcharts>(null)
+  const actualGraph = useRef('bar')
+  const isStacked = useRef(false)
+
+  const getLabelOptions = (barColor: string) => {
+    const isDarkBarColor = isDarkColor(barColor)
+
+    return {
+      show: true,
+      position: 'insideBottom',
+      align: 'left',
+      verticalAlign: 'middle',
+      rotate: 90,
+      formatter: yComplement('{c}') + '  {name|{a}}',
+      color: isDarkBarColor ? '#FFFFFF' : '#000000',
+      fontSize: 16,
+      rich: {
+        name: {
+          color: isDarkBarColor ? '#FFFFFF' : '#000000'
+        }
+      }
+    }
+  }
+
+  const formatTooltip = (
+    lines: { name: string, seriesName: string, value: number }[]
+  ) => {
+    const takeComplement = (value: number) =>
+      yType === 'time'
+        ? timeConvert(Number(value)) + 'h'
+        : takeLabelComplement(Number(value), yComplement)
+
+    const linesTooltips = lines.map(
+      line =>
+        line.seriesName + ': ' + takeComplement(Number(line.value)) + '<br>'
+    )
+
+    const tooltipTitle =
+      xType === 'time'
+        ? formatTime(
+          dateFormat === 'yyyy-MM' ? lines[0].name + '-02' : lines[0].name,
+          dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd MMM'
+        )
+        : lines[0].name
+
+    return `${tooltipTitle} <br> ${linesTooltips.join(' ')}`
+  }
+
+  const slider = rangeSelector ?
+    [
+      {
+        type: 'slider',
+        xAxisIndex: 0,
+        filterMode: 'none'
+      },
+    ]: []
+
+  const options: EChartOption = {
+    color: [...series.map(it => it.color)],
+    dataZoom: [...slider],
+    tooltip: {
+      formatter: formatTooltip,
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: series.map(it => it.name)
+    },
+    toolbox: {
+      show: true,
+      orient: 'vertical',
+      left: 'right',
+      top: 'center',
+      feature: {
+        mark: { show: true },
+        dataView: { 
+          show: true, 
+          readOnly: false,
+          title: 'Visualização de dados',
+          lang: ['Visualização de dados', 'Fechar', 'Atualizar']
+        },
+        magicType: { 
+          show: true, 
+          type: MAGIC_TYPE,
+          title: {
+            line: 'Gráfico de linha',
+            bar: 'Gráfico de barras',
+            stack: 'Estacar',
+            tile: 'Lado a lado',
+          },
+        },
+        saveAsImage: { show: true, title: 'Salvar como imagem' }
+      }
+    },
+    xAxis: {
+      type: yType || 'category',
+      axisTick: { show: false },
+      data: xData
+    },
+    yAxis: {
+      type: xType || 'value'
+    },
+    series: [
+      ...series.map(it => ({
+        name: it.name,
+        type: 'bar',
+        barGap: 0,
+        label: getLabelOptions(it.color),
+        emphasis: {
+          focus: 'series'
+        },
+        data: it.data
+      }))
+    ]
+  }
+
+  const onEvents = {
+    'magictypechanged': (e: {
+      currentType: 'stack' | 'line' | 'bar'
+    }) => {
+      const echartsInstance = ref.current.getEchartsInstance()
+      const actualOptions = echartsInstance.getOption()
+
+      if(e.currentType === 'stack') {
+        isStacked.current = !isStacked.current
+      } else {
+        actualGraph.current = e.currentType
+      }
+
+      const newOptions: EChartOption = {...actualOptions}
+      newOptions.toolbox = options.toolbox
+      const isVertical = actualGraph.current === 'bar' && !isStacked.current
+      const isLine = actualGraph.current === 'line'
+      const originalSeries = options.series
+      newOptions.series.forEach((it, i) => {
+        it.label.rotate = isVertical ? 90 : 0
+        it.label.align = isVertical ? 'left': 'center'
+        it.type = actualGraph.current
+        it.label.rich.name.color = isLine 
+          ? '#000000' 
+          : originalSeries[i].label.rich.name.color
+        it.label.color = isLine ? '#000000' : originalSeries[i].label.color
+      })
+
+      ref.current.getEchartsInstance().setOption(newOptions)
+    },
+    'mouseover': (e) => {
+      const echartsInstance = ref.current.getEchartsInstance()
+      const actualOptions = echartsInstance.getOption()
+
+      actualOptions.color = [
+        ...options.color.map(
+          (it, i) => e.componentIndex === i ? it : `#${it.slice(1)}66`
+        )
+      ]
+
+      actualOptions.series.forEach((it, i) => {
+        if(i === e.componentIndex)
+          return
+
+        it.label.rich.name.color = '#00000000'
+        it.label.color = '#00000000'
+      })
+
+      echartsInstance.setOption({...actualOptions})
+    },
+    'mouseout': () => {
+      const echartsInstance = ref.current.getEchartsInstance()
+      const actualOptions = echartsInstance.getOption()
+
+      actualOptions.color = [
+        ...options.color
+      ]
+
+      const originalSeries = options.series
+      const isLine = actualGraph.current === 'line'
+      actualOptions.series.forEach((it, i) => {
+        it.label.rich.name.color = isLine 
+          ? '#000000' 
+          : originalSeries[i].label.rich.name.color
+        it.label.color = isLine ? '#000000' : originalSeries[i].label.color
+      })
+
+      echartsInstance.setOption({...actualOptions})
+    }
+  }
+
+  return (
+    <ReactEcharts
+      style={WIDTH_STYLE}
+      opts={getWidthOpts(width || 'auto')}
+      option={options}
+      ref={ref}
+      onEvents={onEvents}
+    />
+  )
+}
+
+export default React.memo(MultipurposeChart)

package/src/core/RadarChart.tsx

@@ -0,0 +1,87 @@
+import ReactEcharts from 'echarts-for-react'
+import { EChartOption } from 'echarts/lib/echarts'
+import React from 'react'
+import { getWidthOpts, takeLabelComplement } from '../lib/auxiliarFunctions'
+import { WIDTH_STYLE } from './DonutChart'
+import { WidthProps } from './types'
+
+interface RadarChartProps {
+  series: Array<{
+    name: string
+    color: string
+    data: number[]
+  }>
+  indicators: Array<{
+    name: string
+    max: number
+  }>
+  width?: WidthProps
+  yComplement?: (input: string) => string
+  circular?: boolean
+  highlight?: boolean
+}
+
+const RadarChart = (props: RadarChartProps) => {
+  const { width, series, indicators, yComplement, circular, highlight } = props
+
+  
+  const formatTooltip = (
+    lines: { name: string, seriesName: string, value: number, data: any }
+  ) => {
+    const takeComplement = 
+      (value: number) => takeLabelComplement(Number(value), yComplement)
+
+    const linesTooltips = lines.data.value.map(
+      (value: string | number, i: number) =>
+        indicators[i].name + ': ' + takeComplement(Number(value)) + '<br>'
+    )
+
+    return `${lines.name} <br> ${linesTooltips.join(' ')}`
+  }
+
+  const emphasis = highlight ? {
+    emphasis: {
+      areaStyle: {
+        color: 'rgba(0,250,0,0.3)'
+      }
+    }
+  } : {}
+  
+  const options: EChartOption = {
+    color: series.map(it => it.color),
+    tooltip: {
+      formatter: formatTooltip,
+      trigger: 'item',
+    },
+    legend: {
+      data: series.map(it => it.name)
+    },
+    radar: {
+      shape: circular && 'circle',
+      indicator: indicators.map(it => ({
+        name: it.name,
+        max: it.max
+      }))
+    },
+    series: [
+      {
+        type: 'radar',
+        data: series.map(it => ({
+          name: it.name,
+          value: it.data
+        })),
+        ...emphasis
+      }
+    ]
+  }
+
+  return (
+    <ReactEcharts
+      style={WIDTH_STYLE}
+      opts={getWidthOpts(width || 'auto')}
+      option={options}
+    />
+  )
+}
+
+export default RadarChart

package/src/docz/MultipurposeChart.mdx

@@ -0,0 +1,39 @@
+---
+name: Multipurpose charts
+route: /multipurpose-charts
+---
+
+import MultipurposeChart from '../core/MultipurposeChart'
+import { Playground } from 'docz'
+
+# Multipurpose chart example
+
+## Demo
+<Playground>
+    <MultipurposeChart
+      yComplement={value => `R$ ${value},00`}
+      series={[
+        {
+          name: 'Dinheiro',
+          color: '#142459',
+          data: [320, 332, 301, 334, 390]
+        },
+        {
+          name: 'Crédito',
+          color: '#176BA0',
+          data: [220, 182, 191, 234, 290]
+        },
+        {
+          name: 'Débito',
+          color: '#19AADE',
+          data: [150, 232, 201, 154, 190]
+        },
+        {
+          name: 'Pix',
+          color: '#1AC9E6',
+          data: [98, 77, 101, 99, 40]
+        }
+      ]}
+      xData={['2012', '2013', '2014', '2015', '2016']}
+    />
+</Playground>

package/src/docz/RadarChart.mdx

@@ -0,0 +1,89 @@
+---
+name: Radar charts
+route: /radar-chart
+---
+
+import RadarChart from '../core/RadarChart'
+import { Playground } from 'docz'
+
+# Radar chart example
+
+## Demo
+<Playground>
+    <RadarChart
+      yComplement={value => `R$ ${value},00`}
+      series={[
+        {
+          name: 'Dinheiro',
+          color: '#142459',
+          data: [320, 332, 301, 334, 390]
+        },
+        {
+          name: 'Crédito',
+          color: '#176BA0',
+          data: [220, 182, 191, 234, 290]
+        },
+      ]}
+      indicators={[
+        { name: 'Roupas', max: 500 },
+        { name: 'Sapatos', max: 500 },
+        { name: 'Bolsas', max: 500 },
+        { name: 'Acessórios', max: 500 },
+        { name: 'Outros', max: 500 }
+      ]}
+    />
+</Playground>
+
+## Circular chart
+<Playground>
+    <RadarChart
+      circular
+      yComplement={value => `R$ ${value},00`}
+      series={[
+        {
+          name: 'Dinheiro',
+          color: '#142459',
+          data: [320, 332, 301, 334, 390]
+        },
+        {
+          name: 'Crédito',
+          color: '#176BA0',
+          data: [220, 182, 191, 234, 290]
+        },
+      ]}
+      indicators={[
+        { name: 'Roupas', max: 500 },
+        { name: 'Sapatos', max: 500 },
+        { name: 'Bolsas', max: 500 },
+        { name: 'Acessórios', max: 500 },
+        { name: 'Outros', max: 500 }
+      ]}
+    />
+</Playground>
+
+## Area highlighting (mouse over the lines)
+<Playground>
+    <RadarChart
+      highlight
+      yComplement={value => `R$ ${value},00`}
+      series={[
+        {
+          name: 'Dinheiro',
+          color: '#142459',
+          data: [320, 332, 301, 334, 390]
+        },
+        {
+          name: 'Crédito',
+          color: '#176BA0',
+          data: [220, 182, 191, 234, 290]
+        },
+      ]}
+      indicators={[
+        { name: 'Roupas', max: 500 },
+        { name: 'Sapatos', max: 500 },
+        { name: 'Bolsas', max: 500 },
+        { name: 'Acessórios', max: 500 },
+        { name: 'Outros', max: 500 }
+      ]}
+    />
+</Playground>

package/src/index.ts

@@ -9,3 +9,5 @@ export { default as PictorialChart } from './core/PictorialChart'
 export { default as AudiometryChart } from './core/AudiometryChart'
 export { default as DonutChart } from './core/DonutChart'
 export { default as CoordinateLineChart } from './core/CoordinateLineChart'
+export { default as MultipurposeChart } from './core/MultipurposeChart'
+export { default as RadarChart } from './core/RadarChart'