amazing-react-charts 0.7.0 → 0.7.1

package/dist/core/HorizontalBarChart.js

@@ -9,10 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -59,6 +63,11 @@ var HorizontalBarChart = function HorizontalBarChart(props) {
       title = _useState2[0],
       setTitle = _useState2[1];
 
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      richData = _useState4[0],
+      setRichDate = _useState4[1];
+
   (0, _react.useEffect)(function () {
     if (toolboxTooltip && toolboxTooltip.saveAsImageWithTitle) {
       setTitle(false);
@@ -66,6 +75,60 @@ var HorizontalBarChart = function HorizontalBarChart(props) {
       setTitle(true);
     }
   }, [toolboxTooltip]);
+  (0, _react.useEffect)(function () {
+    data.map( /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(item) {
+        var rich;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (item.image) {
+                  _context.next = 2;
+                  break;
+                }
+
+                return _context.abrupt("return", {});
+
+              case 2:
+                _context.t0 = _defineProperty2.default;
+                _context.t1 = {};
+                _context.t2 = (0, _auxiliarFunctions.changeSpaceForUnderline)(item.label);
+                _context.next = 7;
+                return (0, _auxiliarFunctions.convertImageToBase64FromUrl)(item.image);
+
+              case 7:
+                _context.t3 = _context.sent;
+                _context.t4 = {
+                  image: _context.t3
+                };
+                _context.t5 = {
+                  height: 35,
+                  backgroundColor: _context.t4
+                };
+                rich = (0, _context.t0)(_context.t1, _context.t2, _context.t5);
+
+                if (!richData.find(function (itemRich) {
+                  return (0, _auxiliarFunctions.changeSpaceForUnderline)(item.label) in itemRich;
+                })) {
+                  setRichDate(function (state) {
+                    return [].concat((0, _toConsumableArray2.default)(state), [rich]);
+                  });
+                }
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  }, [richData]);
 
   var handleShowTitle = function handleShowTitle(show) {
     setTitle(show);
@@ -104,9 +167,9 @@ var HorizontalBarChart = function HorizontalBarChart(props) {
       itemId: item.itemId
     };
   }));
-  var yData = (0, _reverse.default)(data.map(function (item) {
+  var yData = data.map(function (item) {
     return item.label;
-  }));
+  });
   var domain = {
     min: 0,
     max: Math.max.apply(Math, (0, _toConsumableArray2.default)(data.map(function (item) {
@@ -214,14 +277,20 @@ var HorizontalBarChart = function HorizontalBarChart(props) {
     yAxis: {
       data: yData,
       type: 'category',
+      inverse: true,
       axisLine: {
         show: showTickInfos || false
       },
       axisLabel: {
         formatter: function formatter(text) {
-          return (0, _auxiliarFunctions.truncateLabel)(text, labelWordSize);
+          return data.find(function (item) {
+            return item.image;
+          }) ? (0, _auxiliarFunctions.formatLabelWithImage)(text) : (0, _auxiliarFunctions.truncateLabel)(text, labelWordSize);
         },
-        fontWeight: boldTickLabel ? '400' : undefined
+        max: 10,
+        margin: 12,
+        fontWeight: boldTickLabel ? '400' : undefined,
+        rich: Object.assign.apply(Object, [{}].concat((0, _toConsumableArray2.default)(richData)))
       },
       axisTick: {
         show: showTickInfos || false,

package/dist/core/types.d.ts

@@ -62,6 +62,7 @@ export declare type EntryData = {
     result: number;
     itemId?: string;
     style?: LabelProps;
+    image?: string;
 };
 export declare type EntryWithStyleData = {
     value: number;

package/dist/lib/auxiliarFunctions.d.ts

@@ -62,3 +62,6 @@ export declare const getSaveAsImageWithTitle: (title: string, setTitle: (show: b
 export declare const getWidthOpts: (width: WidthProps) => {
     width: WidthProps;
 };
+export declare const convertImageToBase64FromUrl: (imgUrl: string) => Promise<unknown>;
+export declare const changeSpaceForUnderline: (value: string) => string;
+export declare const formatLabelWithImage: (text: string) => string;

package/dist/lib/auxiliarFunctions.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWidthOpts = exports.getSaveAsImageWithTitle = exports.thousandSeparator = exports.getInitialValues = exports.getDataView = exports.getSaveAsImage = exports.fixedDomain = exports.getDomain = exports.fixedTruncateLabel = exports.truncateLabel = exports.formatTooltipWithHours = exports.formatTooltip = exports.formatTime = exports.toDate = exports.mountMessage = exports.monuntTimeMessage = exports.generateAuxMessage = exports.getPercentage = exports.timeConvert = exports.takeDonutChartComplement = exports.takeLabelComplement = void 0;
+exports.formatLabelWithImage = exports.changeSpaceForUnderline = exports.convertImageToBase64FromUrl = exports.getWidthOpts = exports.getSaveAsImageWithTitle = exports.thousandSeparator = exports.getInitialValues = exports.getDataView = exports.getSaveAsImage = exports.fixedDomain = exports.getDomain = exports.fixedTruncateLabel = exports.truncateLabel = exports.formatTooltipWithHours = exports.formatTooltip = exports.formatTime = exports.toDate = exports.mountMessage = exports.monuntTimeMessage = exports.generateAuxMessage = exports.getPercentage = exports.timeConvert = exports.takeDonutChartComplement = exports.takeLabelComplement = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -290,4 +290,42 @@ var getWidthOpts = function getWidthOpts(width) {
   };
 };
 
-exports.getWidthOpts = getWidthOpts;
+exports.getWidthOpts = getWidthOpts;
+
+var convertImageToBase64FromUrl = function convertImageToBase64FromUrl(imgUrl) {
+  return new Promise(function (resolve) {
+    var img = new Image();
+    img.src = imgUrl;
+    img.setAttribute('crossOrigin', 'anonymous');
+
+    img.onload = function () {
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+      canvas.width = 40;
+      canvas.height = 40;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(40 / 2, 40 / 2, 40 / 2, 0, Math.PI * 2);
+      ctx.clip();
+      ctx.drawImage(img, 0, 0, 40, 40);
+      ctx.restore();
+      var dataUrl = ctx.canvas.toDataURL('image/png');
+      resolve(dataUrl);
+    };
+  });
+};
+
+exports.convertImageToBase64FromUrl = convertImageToBase64FromUrl;
+
+var changeSpaceForUnderline = function changeSpaceForUnderline(value) {
+  return value.replace(' ', '_');
+};
+
+exports.changeSpaceForUnderline = changeSpaceForUnderline;
+
+var formatLabelWithImage = function formatLabelWithImage(text) {
+  var textFormatted = '{value|' + text + '} {' + changeSpaceForUnderline(text) + '| }';
+  return textFormatted;
+};
+
+exports.formatLabelWithImage = formatLabelWithImage;

package/package.json

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

package/src/core/HorizontalBarChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import ReactEcharts from 'echarts-for-react'
 import {
   IDefaultChartProps,
@@ -16,16 +16,19 @@ import {
   truncateLabel,
   takeLabelComplement,
   getSaveAsImageWithTitle,
-  getWidthOpts
+  getWidthOpts,
+  convertImageToBase64FromUrl,
+  changeSpaceForUnderline,
+  formatLabelWithImage,
 } from '../lib/auxiliarFunctions'
 import { reverse } from 'ramda'
 import { WIDTH_STYLE } from './DonutChart'
 import { TOOLBOX_DEFAULT_PROPS } from './AreaChart'
 
 interface IProps extends IDefaultChartProps {
-  showTickInfos?: boolean
-  xComplement?: string
-  boldTickLabel?: boolean
+  showTickInfos?: boolean;
+  xComplement?: string;
+  boldTickLabel?: boolean;
 }
 
 const HorizontalBarChart = (props: IProps) => {
@@ -50,6 +53,7 @@ const HorizontalBarChart = (props: IProps) => {
   } = props
 
   const [title, setTitle] = useState(false)
+  const [richData, setRichDate] = useState([])
 
   useEffect(() => {
     if (toolboxTooltip && toolboxTooltip.saveAsImageWithTitle) {
@@ -59,18 +63,39 @@ const HorizontalBarChart = (props: IProps) => {
     }
   }, [toolboxTooltip])
 
+  useEffect(() => {
+    data.map(async (item: EntryData) => {
+      if(!item.image) return {}
+  
+      const rich = {[changeSpaceForUnderline(item.label)]: {
+        height: 35,
+        backgroundColor: {
+          image: await convertImageToBase64FromUrl(item.image)
+        },
+      }}
+
+      if(!richData
+        .find(itemRich => changeSpaceForUnderline(item.label) in itemRich
+        )){
+        setRichDate(state => [...state, rich])
+      }
+      
+    })
+
+  }, [richData])
+
   const handleShowTitle = (show: boolean) => {
     setTitle(show)
   }
 
   const xData: EntryWithStyleData[] = reverse(
     data.map((item: EntryData) => {
-      const results = data.map(item => item.result)
+      const results = data.map((item) => item.result)
       const maxValue = Math.max(...results)
 
       const label: LabelProps = item.result <= (!showTickInfos ? 50 : 15) && {
         position: 'right',
-        distance: 1
+        distance: 1,
       }
 
       if (maxValue !== item.result && xType === 'time') {
@@ -84,7 +109,7 @@ const HorizontalBarChart = (props: IProps) => {
           value: item.result,
           label: label,
           itemStyle: item.style,
-          itemId: item.itemId
+          itemId: item.itemId,
         }
       }
 
@@ -92,13 +117,14 @@ const HorizontalBarChart = (props: IProps) => {
         value: item.result,
         label: label,
         itemStyle: item.style,
-        itemId: item.itemId
+        itemId: item.itemId,
       }
     })
   )
 
-  const yData = reverse(data.map((item: EntryData) => item.label))
-  const domain = { min: 0, max: Math.max(...data.map(item => item.result)) }
+  const yData = data.map((item: EntryData) => item.label)
+  
+  const domain = { min: 0, max: Math.max(...data.map((item) => item.result)) }
   const backgroundBar = data.map(() =>
     xComplement === '%' ? 100 : getDomain(domain)
   )
@@ -107,9 +133,10 @@ const HorizontalBarChart = (props: IProps) => {
     const { label, result } = tooltipProps
     const { name, value } = chartValues[1]
 
-    const dataValue = xType === 'time'
-      ? timeConvert(value) + 'h'
-      : takeLabelComplement(Number(value), xComplement)
+    const dataValue =
+      xType === 'time'
+        ? timeConvert(value) + 'h'
+        : takeLabelComplement(Number(value), xComplement)
 
     return `${label}: ${name} <br>` + `${result}: ${dataValue} <br>`
   }
@@ -122,15 +149,17 @@ const HorizontalBarChart = (props: IProps) => {
       : takeLabelComplement(Number(value), xComplement)
   }
 
-  const myTool = toolboxTooltip && toolboxTooltip.saveAsImageWithTitle && {
+  const myTool = toolboxTooltip &&
+    toolboxTooltip.saveAsImageWithTitle && {
     myTool: getSaveAsImageWithTitle(
       toolboxTooltip.saveAsImageWithTitle,
       handleShowTitle
-    )
+    ),
   }
 
-  const saveAsImage = toolboxTooltip && toolboxTooltip.saveAsImage && {
-    saveAsImage: getSaveAsImage(toolboxTooltip.saveAsImage)
+  const saveAsImage = toolboxTooltip &&
+    toolboxTooltip.saveAsImage && {
+    saveAsImage: getSaveAsImage(toolboxTooltip.saveAsImage),
   }
 
   const toolbox = toolboxTooltip && {
@@ -139,14 +168,14 @@ const HorizontalBarChart = (props: IProps) => {
     feature: {
       ...myTool,
       ...saveAsImage,
-      dataView: toolboxTooltip.dataView &&
-        getDataView(toolboxTooltip.dataView)
-    }
+      dataView: toolboxTooltip.dataView && getDataView(toolboxTooltip.dataView),
+    },
   }
+
   const options = {
     grid: {
       containLabel: true,
-      ...gridProps
+      ...gridProps,
     },
     series: [
       {
@@ -163,9 +192,9 @@ const HorizontalBarChart = (props: IProps) => {
             color: '#ececec',
             barBorderRadius: showTickInfos ? 0 : 10,
             opacity: showTickInfos && 0.5,
-            borderColor: showTickInfos ? undefined : props.color
-          }
-        }
+            borderColor: showTickInfos ? undefined : props.color,
+          },
+        },
       },
       {
         xAxisIndex: 0,
@@ -175,7 +204,7 @@ const HorizontalBarChart = (props: IProps) => {
         barMaxWidth: !showTickInfos && 20,
         itemStyle: {
           color: color,
-          barBorderRadius: showTickInfos ? 0 : 10
+          barBorderRadius: showTickInfos ? 0 : 10,
         },
         label: {
           formatter: formatLabel,
@@ -183,19 +212,19 @@ const HorizontalBarChart = (props: IProps) => {
           fontSize: showTickInfos ? 14 : 11,
           fontWeight: '400' as const,
           color: 'black',
-          show: true
-        }
-      }
+          show: true,
+        },
+      },
     ],
     xAxis: {
       max: xComplement === '%' ? 100 : getDomain(domain),
       type: 'value' as const,
       data: xData,
       axisTick: {
-        show: showTickInfos || false
+        show: showTickInfos || false,
       },
       axisLine: {
-        show: showTickInfos || false
+        show: showTickInfos || false,
       },
       axisLabel: {
         rotate: rotateLabel,
@@ -203,37 +232,44 @@ const HorizontalBarChart = (props: IProps) => {
         formatter: (item: string) =>
           xType === 'time'
             ? timeConvert(Number(item)) + 'h'
-            : item + xComplement
+            : item + xComplement,
       },
       splitLine: {
         show: showTickInfos || false,
         lineStyle: {
           type: 'dotted' as const,
-          opacity: 0.8
-        }
-      }
+          opacity: 0.8,
+        },
+      },
     },
     yAxis: {
       data: yData,
       type: 'category' as const,
+      inverse: true,
       axisLine: {
-        show: showTickInfos || false
+        show: showTickInfos || false,
       },
       axisLabel: {
-        formatter: (text: string) => truncateLabel(text, labelWordSize),
-        fontWeight: boldTickLabel ? '400' as const : undefined
+        formatter: (text: string) =>
+          data.find(item => item.image)  
+            ? formatLabelWithImage(text) 
+            : truncateLabel(text, labelWordSize),
+        max: 10,
+        margin: 12,
+        fontWeight: boldTickLabel ? ('400' as const) : undefined,
+        rich: Object.assign({}, ...richData),
       },
       axisTick: {
         show: showTickInfos || false,
-        alignWithLabel: true
+        alignWithLabel: true,
       },
       splitLine: {
         show: showTickInfos || false,
         lineStyle: {
           type: 'dotted' as const,
-          opacity: 0.8
-        }
-      }
+          opacity: 0.8,
+        },
+      },
     },
     title: {
       left: marginLeftTitle || '5.9%',
@@ -243,21 +279,21 @@ const HorizontalBarChart = (props: IProps) => {
       textStyle: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
         fontSize: titleFontSize || 16,
-        fontWeight: '400' as const
-      }
+        fontWeight: '400' as const,
+      },
     },
     tooltip: tooltipProps && {
       trigger: 'axis' as const,
       axisPointer: {
         type: 'shadow' as const,
         shadowStyle: {
-          opacity: 0.5
-        }
+          opacity: 0.5,
+        },
       },
       formatter: formatTooltip,
-      textStyle: { fontSize: 11.5 }
+      textStyle: { fontSize: 11.5 },
     },
-    toolbox
+    toolbox,
   }
 
   const clickEvent = { click: onClickBar }