diginet-core-ui 1.3.78 → 1.3.79

package/components/chart/Pie-v2/Sector.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useRef, memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -25,11 +24,9 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   let result;
-
   if (!ref) {
     ref = useRef(null);
   }
-
   const pathRef = useRef(null);
   const SectorCSS = expandOnHover || expandedIndex >= 0 ? css`
                           transition-property: ${transitionProperty};
@@ -61,7 +58,6 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onMouseLeave: onMouseLeave,
     ...props
   }, renderSelectedItem);
-
   if (href) {
     result = jsx("a", {
       href: href
@@ -69,7 +65,6 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   } else {
     result = content;
   }
-
   return result;
 }));
 Sector.defaultProps = {
@@ -85,35 +80,27 @@ Sector.defaultProps = {
 Sector.propTypes = {
   /** the fill change color of pie chart  */
   fill: PropTypes.string.isRequired,
-
   /** event click mouse in pie chart */
   onMouseEnter: PropTypes.func,
-
   /** event leave mouse in pie chart */
   onMouseLeave: PropTypes.func,
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
-
   /** function displays selected items by custom, example:<br/>
    * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,
-
   /** the StrokeColor change color border and Stroke */
   strokeColor: PropTypes.string,
-
   /** it can be applied to any element but it has effect only on the following nine */
   strokeLinejoin: PropTypes.string,
-
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: PropTypes.number,
   quantity: PropTypes.number,
   href: PropTypes.string,
-
   /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
   transitionDuration: PropTypes.string,
-
   /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
   transitionTimingFunction: PropTypes.string,
   className: PropTypes.string

package/components/chart/Pie-v2/Sectors.js

@@ -1,7 +1,5 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -9,7 +7,6 @@ import Sector from './Sector';
 import { jsx, css } from '@emotion/core';
 import { randomString } from '../../../utils';
 import { typography } from '../../../styles/typography';
-
 const Sectors = ({
   center,
   data,
@@ -37,25 +34,21 @@ const Sectors = ({
   const total = data.reduce((prev, current) => current.quantity + prev, 0);
   let angleStart = startAngle;
   let angleEnd = startAngle;
-
   const getPath = (d, i) => {
     const anglePosition = (angleStart + angleEnd) / 2;
     var rotateX = 0;
     var rotateY = 0;
     var xte = 0;
     var yte = 0;
-
     const measureText = (str, fontSize = 16) => {
       const widths = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2796875, 0.2765625, 0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625, 0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125, 0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875, 1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625, 0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625, 0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625, 0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375, 0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625, 0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5, 0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875, 0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875, 0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625];
       const avg = 0.5279276315789471;
       return str.split('').map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg).reduce((cur, acc) => acc + cur) * fontSize;
     };
-
     const xPath = center + center * Math.cos(Math.PI * anglePosition / 180);
     const yPath = center + center * Math.sin(Math.PI * anglePosition / 180);
     const x1Path = center + center * 1.3 * Math.cos(Math.PI * anglePosition / 180);
     const y1Path = center + center * 1.3 * Math.sin(Math.PI * anglePosition / 180);
-
     if (anglePosition > 271 || anglePosition < 89) {
       rotateX += x1Path + measureText((d.quantity / total * 100).toFixed(2) + '%') + 5;
       rotateY += y1Path;
@@ -67,7 +60,6 @@ const Sectors = ({
       xte += x1Path - 30;
       yte += y1Path - 6;
     }
-
     const path1 = `
             M${xPath},${yPath}
             L${x1Path},${y1Path}
@@ -127,7 +119,6 @@ const Sectors = ({
       fill: d.color
     }, (d.quantity / total * 100).toFixed(2), '%'));
   };
-
   return total > 0 ? jsx("g", null, data.map((d, i) => {
     const isLarge = d.quantity / total > 0.5;
     const angle = 360 * d.quantity / total;
@@ -150,19 +141,16 @@ const Sectors = ({
                     z
                 `;
     angleEnd += angleMargin;
-
     const MouseEnterTarget = (d, e, i) => {
       if (onSectorHover) onSectorHover(d, i, e);
       document.getElementById(`${id}` + i).style.display = 'block';
       document.getElementById(`${id1}` + i).style.display = 'block';
     };
-
     const MouseLeaveTarget = (e, i) => {
       if (onSectorHover) onSectorHover(null, null, e);
       document.getElementById(`${id}` + i).style.display = 'none';
       document.getElementById(`${id1}` + i).style.display = 'none';
     };
-
     return jsx("g", {
       key: i,
       id: 'sector' + i
@@ -185,7 +173,6 @@ const Sectors = ({
     }), getPath(d, i));
   })) : null;
 };
-
 Sectors.defaultProps = {
   expandSize: 10,
   strokeWidthTooltip: 2,
@@ -195,29 +182,22 @@ Sectors.defaultProps = {
 };
 Sectors.propTypes = {
   center: PropTypes.number.isRequired,
-
   /** The array of elements that appear in the PieChart */
   data: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     name: PropTypes.string,
     quantity: PropTypes.number.isRequired
   })).isRequired,
-
   /** returns the data of the object to be hover */
   onSectorHover: PropTypes.func,
-
   /** the Size expand On Hover */
   expandSize: PropTypes.number,
-
   /** the StrokeWidth change color border and Stroke */
   strokeColor: Sector.propTypes.strokeColor,
-
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: Sector.propTypes.strokeWidth,
-
   /** The starting angle is drawn in a circle from data first */
   startAngle: PropTypes.number,
-
   /** */
   angleMargin: PropTypes.number
 };

package/components/chart/Pie-v2/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useState, useRef, memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -39,35 +38,28 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowUppercase: false,
     allowSymbol: false
   }));
-
   if (data[0] && !data[0].color) {
     var colors = [];
     let Count = data.length;
-
     while (colors.length < Count) {
       do {
         var makeColorCode = '0123456789ABCDEF';
         var code = '#';
-
         for (var count = 0; count < 6; count++) {
           code = code + makeColorCode[Math.floor(Math.random() * 16)];
         }
       } while (colors.indexOf(code) >= 0);
-
       colors.push('#' + ('000000' + code.toString(16)).slice(-6));
     }
-
     for (let i in data) {
       data[i].color = colors[i];
     }
   }
-
   const ZoomIn = () => {
     let zoom = 0;
     zoom = (width + height) / 2;
     return zoom;
   };
-
   const svgCSS = css`
                 position: relative;
                 display: block;
@@ -106,23 +98,24 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             `;
   const padding1 = ZoomIn() / 10;
   var padding = 0;
-
   if (padding1 >= 60) {
     padding += padding1 / 2;
   } else {
     padding += padding1;
   }
-
   const dem = data.length;
   const position = (ZoomIn() - padding * 2) / dem;
   const center = ZoomIn() / 4;
   const dataWithValue = data.filter(d => d.quantity > 0);
   const [isExpanded, setExpanded] = useState('false');
-  const expandedIndex = useRef(null); // const dataSource = data.map((item, i) => ({ ...item, x: i * position }));
-
-  const DataTitle = data.map((item, i) => ({ ...item,
+  const expandedIndex = useRef(null);
+  // const dataSource = data.map((item, i) => ({ ...item, x: i * position }));
+  const DataTitle = data.map((item, i) => ({
+    ...item,
     x: position + i * 10
-  })); // const measureText = (str, fontSize = 16) => {
+  }));
+
+  // const measureText = (str, fontSize = 16) => {
   //     const widths = [
   //         0,
   //         0,
@@ -260,7 +253,6 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //             .reduce((cur, acc) => acc + cur) * fontSize
   //     );
   // };
-
   const handleSectorHover = (data, index, e) => {
     if (expandOnHover) {
       setExpanded({
@@ -268,12 +260,10 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       expandedIndex.current = index !== null ? index : props.expandedIndex > -1 ? props.expandedIndex : null;
     }
-
     if (onSectorHover) {
       onSectorHover(data, index, e);
     }
   };
-
   const renderSingleData = (d, center) => {
     return jsx(Circle, {
       center: center,
@@ -286,13 +276,14 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...d
     });
   };
-
   const renderMultipleData = center => {
     return jsx(Sectors, {
       center: center,
-      data: expandOnHover ? data.map((d, i) => ({ ...d,
+      data: expandOnHover ? data.map((d, i) => ({
+        ...d,
         expanded: `${isExpanded ? i === expandedIndex.current : i === props.expandedIndex}`
-      })) : data.map((d, i) => ({ ...d,
+      })) : data.map((d, i) => ({
+        ...d,
         expanded: `${i === props.expandedIndex}`
       })),
       ...props,
@@ -302,7 +293,6 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onSectorHover: handleSectorHover
     });
   };
-
   return jsx("div", {
     ref: ref,
     className: `DGN-CUI-Container-PieChart`
@@ -455,19 +445,14 @@ PieChart.defaultProps = {
 PieChart.propTypes = {
   /** the viewData will display information about the input data */
   viewData: PropTypes.bool,
-
   /** drawn Ratio of Width entered by user, default is: 900px */
   width: PropTypes.number,
-
   /** drawn Ratio of Height entered by user, default is: 500px */
   height: PropTypes.number,
-
   /** change from PieChart to DonutChart  */
   Donut: PropTypes.bool,
-
   /** Typography of font in core, default: h4  */
   type: PropTypes.string,
-
   /** The array of elements that appear in the PieChart */
   data: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string,
@@ -475,40 +460,28 @@ PieChart.propTypes = {
     quantity: PropTypes.number.isRequired,
     href: PropTypes.string
   })).isRequired,
-
   /** the animation expand On Hover */
   expandOnHover: PropTypes.bool,
-
   /** the Size expand On Hover */
   expandSize: PropTypes.number,
-
   /** the specified position is hovering by default */
   expandedIndex: PropTypes.number,
-
   /** returns the data of the object to be hover */
   onSectorHover: PropTypes.func,
-
   /** the StrokeWidth change color border and Stroke */
   strokeColor: Sector.propTypes.strokeColor,
-
   /** it can be applied to any element but it has effect only on the following nine */
   strokeLinejoin: Sector.propTypes.strokeLinejoin,
-
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: Sector.propTypes.strokeWidth,
-
   /** The starting angle is drawn in a circle from data first */
   startAngle: PropTypes.number,
-
   /** */
   angleMargin: PropTypes.number,
-
   /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
   transitionDuration: Sector.propTypes.transitionDuration,
-
   /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
   transitionTimingFunction: Sector.propTypes.transitionTimingFunction,
-
   /** The title is add from the data */
   name: Sector.propTypes.name
 };

package/components/chart/bar/Axis.js

@@ -1,9 +1,7 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import { jsx } from '@emotion/core';
-
 const Axis = ({
   axisColor,
   axisVisible,
@@ -33,7 +31,6 @@ const Axis = ({
     y2: getY(maxY + 5)
   })) : null;
 };
-
 Axis.defaultProps = {
   axisColor: '#7F828E',
   axisOpacity: 1,
@@ -46,33 +43,24 @@ Axis.defaultProps = {
 Axis.propTypes = {
   /** the axisColor change color */
   axisColor: PropTypes.string,
-
   /** the axisOpacity property sets the opacity of an element*/
   axisOpacity: PropTypes.number,
-
   /** the axisVisible Hide or show the Axis axis */
   axisVisible: PropTypes.bool,
-
   /** the axisWidth change the thickness of the column */
   axisWidth: PropTypes.number,
-
   /** the getX position x on Ox*/
   getX: PropTypes.func,
-
   /** the getY position y on Oy */
   getY: PropTypes.func,
-
   /** the maxX is maximum of Ox quantity returned by data*/
   maxX: PropTypes.number,
-
   /** the maxY is maximum of Oy quantity returned by data*/
   maxY: PropTypes.number,
-
   /** the minX is minimum of OX quantity returned by data*/
   minX: PropTypes.number,
   //** the minY is minimum of Oy quantity returned by data*/
   minY: PropTypes.number,
-
   /** the unitWidth */
   unitWidth: PropTypes.number
 };

package/components/chart/bar/Bar.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -20,8 +19,8 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   minX,
   minY,
   unitWidth,
-  onClick // ...props
-
+  onClick
+  // ...props
 }, ref) => {
   // Start create css in Component
   const barChartCSS = css`
@@ -34,18 +33,19 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const textChartCSS = css`
                 text-anchor: middle;
                 ${typography.paragraph3};
-            `; // End create css in Component
-  // Create variable to calculate
+            `;
+  // End create css in Component
 
+  // Create variable to calculate
   const round = n => {
     return Math.round(n * 100) / 100;
   };
-
   const barChart = useRef(null);
   const BARS_MARGIN_DEFAULT = 0.16;
   const margin = barsMargin >= 0 && barsMargin < unitWidth / 2 ? barsMargin : BARS_MARGIN_DEFAULT;
-  const barsWidth = unitWidth - margin * 3; // create drawing function tooltips in different positions
+  const barsWidth = unitWidth - margin * 3;
 
+  // create drawing function tooltips in different positions
   const topTooltipPath = (width, height, offset, radius) => {
     const left = -width / 2;
     const right = width / 2;
@@ -64,7 +64,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             H ${offset} 
             L 0,0 z`;
   };
-
   const bottomTooltipPath = (width, height, offset, radius) => {
     const left = -width / 2;
     const right = width / 2;
@@ -83,7 +82,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             H ${offset} 
             L 0,0 z`;
   };
-
   const leftTooltipPath = (width, height, offset, radius) => {
     const left = -offset - width;
     const right = -offset;
@@ -102,7 +100,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             V ${offset} 
             L 0,0 z`;
   };
-
   const rightTooltipPath = (width, height, offset, radius) => {
     const left = offset;
     const right = offset + width;
@@ -120,49 +117,41 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             Q ${left},${bottom} ${left},${bottom - radius}
             V ${offset} 
             L 0,0 z`;
-  }; // Create event management function
-
+  };
 
+  // Create event management function
   const MouseEnterTarget = (e, i) => {
     if (onEnter) onEnter(e, i);
     document.getElementById('tooltip-bar' + i).style.display = 'block';
   };
-
   const MouseLeaveTarget = (e, i) => {
     if (onRemote) onRemote(e, i);
     document.getElementById('tooltip-bar' + i).style.display = 'none';
   };
-
   const handleChange = event => {
     if (onClick) onClick(event);
-  }; // Create function to display tooltip by position
-
+  };
 
+  // Create function to display tooltip by position
   const getPlacement = (point, i) => {
     // convert number -> string
     const h = `${point.quantity}`;
     var Width = 0;
-
     if (h.length == 2 || h.length == 1 || h.length == 3) {
       Width += 35;
     }
-
     if (h.length == 4 || h.length == 5) {
       Width += 40;
     }
-
     if (h.length == 6 || h.length == 7) {
       Width += 50;
     }
-
     if (h.length == 8 || h.length == 9) {
       Width += 70;
     }
-
     if (h.length == 10 || h.length == 11) {
       Width += 90;
     }
-
     if (getX(point.x + unitWidth / 2) < 20) {
       return jsx("g", {
         id: `tooltip-bar` + i,
@@ -186,7 +175,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
-
     if (getX(point.x + unitWidth / 2) > viewBoxWidth) {
       return jsx("g", {
         id: `tooltip-bar` + i,
@@ -210,7 +198,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
-
     if (getY(point.quantity + 0.5) > 10) {
       return jsx("g", {
         id: `tooltip-bar` + i,
@@ -233,7 +220,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
-
     return jsx("g", {
       id: `tooltip-bar` + i,
       className: 'DGN-Tooltip-Bar',
@@ -254,9 +240,9 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: textChartCSS,
       fill: "#fff"
     }, point.quantity));
-  }; // Create function to display data
-
+  };
 
+  // Create function to display data
   const getPlacementNotHover = (point, i) => {
     return jsx("g", {
       id: `tooltip-bar` + i,
@@ -272,7 +258,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       fill: barsColor
     }, point.quantity));
   };
-
   return hoverTooltip ? jsx("g", {
     className: 'DGN-CUI-Bar',
     ref: ref
@@ -321,33 +306,26 @@ Bars.propTypes = {
   /** change color of Bar in BarChart */
   barsColor: PropTypes.string,
   barsMargin: PropTypes.number,
-
   /** change the percentage of blurred colors on the column */
   barsOpacity: PropTypes.number,
   data: PropTypes.arrayOf(PropTypes.shape({
     x: PropTypes.number,
     quantity: PropTypes.number
   })).isRequired,
-
   /** the getX position x on Ox*/
   getX: PropTypes.func,
-
   /** the getY position y on Oy */
   getY: PropTypes.func,
   labelsHeightX: Labels.propTypes.labelsHeightX,
   labelsOffsetX: Labels.propTypes.labelsOffsetX,
   labelsOffsetY: Labels.propTypes.labelsOffsetY,
   labelsWidthY: PropTypes.number,
-
   /** the minX is minimum of OX quantity returned by data*/
   minX: PropTypes.number.isRequired,
-
   /** the minY is minimum of Oy quantity returned by data*/
   minY: PropTypes.number.isRequired,
-
   /** the unitWidth */
   unitWidth: PropTypes.number,
-
   /** Shows tooltip containing data on hover */
   hoverTooltip: PropTypes.bool
 };

package/components/chart/bar/Grid.js

@@ -1,9 +1,7 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import { jsx } from '@emotion/core';
-
 const Grid = ({
   getX,
   getY,
@@ -19,7 +17,6 @@ const Grid = ({
 }) => {
   let gridX = [];
   let gridY = [];
-
   for (let i = minX; i <= maxX + unitWidth; i++) {
     gridX.push(jsx("line", {
       key: i,
@@ -29,9 +26,7 @@ const Grid = ({
       y2: getY(maxY + 5)
     }));
   }
-
   const yStep = labelsCountY > 0 ? labelsCountY : unitWidth;
-
   for (let i = minY; i <= maxY; i += Math.floor(maxY / yStep)) {
     gridY.push(jsx("line", {
       key: i,
@@ -41,7 +36,6 @@ const Grid = ({
       y2: getY(i)
     }));
   }
-
   if (GridLines === 'full') {
     return jsx("g", {
       className: 'DGN-Grid-BarChart',
@@ -49,7 +43,6 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridX, gridY);
   }
-
   if (GridLines === 'horizontal') {
     return jsx("g", {
       className: 'DGN-Grid-BarChart',
@@ -57,7 +50,6 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridY);
   }
-
   if (GridLines === 'none') {
     return null;
   } else {
@@ -68,37 +60,27 @@ const Grid = ({
     }, gridY);
   }
 };
-
 Grid.propTypes = {
   /** the getX position x on Ox*/
   getX: PropTypes.func,
-
   /** the getY position y on Oy */
   getY: PropTypes.func,
-
   /** change color of grid Columb*/
   gridColor: PropTypes.string,
-
   /** change  Columb grid display style ['full' , 'horizontal', 'none']*/
   GridLines: PropTypes.string,
-
   /** hiden or  show grid columb*/
   gridVisible: PropTypes.bool,
   gridWidth: PropTypes.number,
   labelsCountY: PropTypes.number,
-
   /** the maxX is maximum of Ox quantity returned by data*/
   maxX: PropTypes.number,
-
   /** the maxY is maximum of Oy quantity returned by data*/
   maxY: PropTypes.number,
-
   /** the minX is minimum of OX quantity returned by data*/
   minX: PropTypes.number,
-
   /** the minY is minimum of Oy quantity returned by data*/
   minY: PropTypes.number,
-
   /** the unitWidth */
   unitWidth: PropTypes.number
 };