diginet-core-ui 1.3.88 → 1.3.89

package/components/chart/bar/Labels.js

@@ -1,13 +1,10 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from "../../../theme/settings";
 import { typography } from "../../../styles/typography";
-
 const Labels = ({
   getX,
   getY,
@@ -35,7 +32,7 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-                  fill: ${theme.colors.secondary};
+                  fill: ${theme.colors.system.rest};
                   text-anchor: start;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -44,7 +41,7 @@ const Labels = ({
                   transform-box: fill-box;
                   transform: rotateZ(45deg);
               ` : css`
-                  color: ${theme.colors.secondary};
+                  color: ${theme.colors.system.rest};
                   text-anchor: middle;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -54,16 +51,14 @@ const Labels = ({
               `;
   const TextCSS = css`
         ${typography.paragraph3};
-        fill: ${theme.colors.secondary};
+        fill: ${theme.colors.system.rest};
         cursor: 'pointer';
     `;
-
   if (labelsVisible) {
     let xLabels;
     let yLabels;
     let tile = 4;
     let tile2 = 9;
-
     const TiLe = () => {
       if (viewBoxWidth >= 800) {
         return tile;
@@ -71,7 +66,6 @@ const Labels = ({
         return tile2;
       }
     };
-
     xLabels = labelStyle === 'italic' ? data.map((point, x) => jsx("text", {
       key: x,
       css: LabelCSS,
@@ -90,11 +84,9 @@ const Labels = ({
     }, labelsFormatX(point.name))));
     const yLabelsRange = [];
     const yStep = labelsCountY > 0 ? labelsCountY : 1;
-
     for (let i = 0; i <= maxY; i += Math.floor(maxY / yStep)) {
       yLabelsRange.push(i);
     }
-
     yLabels = yLabelsRange.map(quantity => jsx("text", {
       key: quantity,
       fill: labelsColor,
@@ -116,12 +108,11 @@ const Labels = ({
     return null;
   }
 };
-
 Labels.defaultProps = {
   getX: x => x,
   getY: quantity => quantity,
   labelsCharacterWidth: 10,
-  labelsColor: theme.colors.secondary,
+  labelsColor: theme.colors.system.rest,
   labelsCountY: 5,
   labelsFormatX: label => label,
   labelsFormatY: quantity => quantity,
@@ -136,13 +127,10 @@ Labels.defaultProps = {
 Labels.propTypes = {
   /** the getX position x on Ox*/
   getX: PropTypes.func,
-
   /** the getY position y on Oy */
   getY: PropTypes.func,
-
   /** the labelsColor change color */
   labelsColor: PropTypes.string,
-
   /** change style show of label ['', 'italic'], default: 'italic' */
   labelStyle: PropTypes.string,
   labelsCountY: PropTypes.number,
@@ -152,22 +140,16 @@ Labels.propTypes = {
   labelsOffsetX: PropTypes.number,
   labelsOffsetY: PropTypes.number,
   labelsStepX: PropTypes.number,
-
   /** change show or hiden of label */
   labelsVisible: PropTypes.bool,
-
   /** 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/Points.js

@@ -1,9 +1,7 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import { jsx } from '@emotion/core';
-
 const Points = ({
   data,
   getX,
@@ -47,52 +45,37 @@ const Points = ({
     }, jsx("title", null, point.name, " : ", point.quantity));
   })) : null;
 };
-
 Points.propTypes = {
   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,
-
   /** 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,
-
   /** change the inner color of the point button  */
   pointsColor: PropTypes.string,
-
   /** show data information when hovering in the area containing the column */
   pointsIsHoverOnZone: PropTypes.bool,
-
   /** function change event hover */
   onHover: PropTypes.func,
-
   /** change the radius of the point is created */
   pointsRadius: PropTypes.number,
-
   /** change the border color of the point button  */
   pointsStrokeColor: PropTypes.string,
-
   /** the thickness of the inner core point */
   pointsStrokeWidth: PropTypes.number,
-
   /** show or hiden point */
   pointsVisible: PropTypes.bool,
-
   /** the unitWidth */
   unitWidth: PropTypes.number
 };

package/components/chart/bar/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
@@ -22,7 +21,8 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelsHeightX,
   ...props
 }, ref) => {
-  const dataSource = data.map((item, i) => ({ ...item,
+  const dataSource = data.map((item, i) => ({
+    ...item,
     x: i
   }));
   const UNIT_WIDTH = 1;
@@ -30,48 +30,39 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   });
-
   const round = n => {
     return Math.round(n * 100) / 100;
   };
-
   const getMinX = () => {
     return dataSource.length > 0 ? dataSource[0].x : 0;
   };
-
   const getMaxX = () => {
     return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 0;
   };
-
   const getMinY = () => {
     return 0;
   };
-
   const getMaxY = () => {
     const yStep = labelsCountY > 0 ? labelsCountY : 1;
     const maxY = dataSource.length > 0 ? dataSource.reduce((max, point) => point.quantity > max ? point.quantity : max, dataSource[0].quantity) : 0;
     return maxY ? Math.ceil(maxY / yStep) * yStep : yStep;
   };
-
   const getSvgX = x => {
     const minX = getMinX();
     const maxX = getMaxX();
     const paddingLeft = getLabelsYWidth();
     return round((x - minX) / (maxX + 1 - minX) * (Math.abs(viewBoxWidth) - paddingLeft));
   };
-
   const getSvgY = y => {
     const paddingBottom = labelsVisible ? labelsHeightX + labelsOffsetX : 0;
     const height = Math.abs(viewBoxHeight) - paddingBottom;
     const maxY = getMaxY();
     return round(height - y / maxY * height);
   };
-
   const getLabelsYWidth = () => {
     const maxY = getMaxY();
     return labelsVisible ? maxY.toString().length * labelsCharacterWidth + labelsOffsetY : 0;
   };
-
   const minX = getMinX();
   const maxX = getMaxX();
   const maxY = getMaxY();
@@ -96,9 +87,11 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       overflow: 'visible',
       margin: `${getLabelsYWidth() * 2}`
     }
-  }, jsx(Axis, { ...props,
+  }, jsx(Axis, {
+    ...props,
     ...commonProps
-  }), jsx(Grid, { ...props,
+  }), jsx(Grid, {
+    ...props,
     ...commonProps
   }), jsx(Bars, {
     data: dataSource,
@@ -131,45 +124,32 @@ BarChart.propTypes = {
     x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     quantity: PropTypes.number
   })).isRequired,
-
   /** drawn Ratio of viewBoxHeight entered by user, default is: 200px */
   viewBoxHeight: PropTypes.number,
-
   /** drawn Ratio of viewBoxWidth entered by user, default is: 500px */
   viewBoxWidth: PropTypes.number,
-
   /** change color of Bar in BarChart */
   barsColor: PropTypes.string,
-
   /** change ColumB grid display style ['full' , 'horizontal', 'none']*/
   GridLines: PropTypes.string,
   //** change style show of label (default, italic) */
   labelStyle: PropTypes.string,
-
   /** the axisVisible Hide or show the Axis axis */
   axisVisible: PropTypes.bool,
-
   /** the axisColor change color */
   axisColor: PropTypes.string,
-
   /** change color of grid Columb*/
   gridColor: PropTypes.string,
-
   /** show data information when hovering in the area containing the column */
   pointsIsHoverOnZone: PropTypes.bool,
-
   /** show or hiden point */
   pointsVisible: PropTypes.bool,
-
   /** change the inner color of the point button */
   pointsColor: PropTypes.string,
-
   /** change the border color of the point button  */
   pointsStrokeColor: PropTypes.string,
-
   /** the thickness of the inner core point */
   pointsStrokeWidth: PropTypes.number,
-
   /** change the radius of the point is created */
   pointsRadius: PropTypes.number,
   ...Bars.propTypes,

package/components/chart/bar-v2/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-v2/Bar.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -21,14 +20,15 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   minX,
   minY,
   unitWidth,
-  onClick // ...props
-
+  onClick
+  // ...props
 }, ref) => {
   const [id] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
-  })); // Start create css in Component
+  }));
 
+  // Start create css in Component
   const barChartCSS = css`
                 position: relative;
                 opacity: 0.7;
@@ -43,18 +43,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;
@@ -73,7 +74,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;
@@ -92,7 +92,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;
@@ -111,7 +110,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;
@@ -129,49 +127,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(`${id}` + i).style.display = 'block';
   };
-
   const MouseLeaveTarget = (e, i) => {
     if (onRemote) onRemote(e, i);
     document.getElementById(`${id}` + 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: `${id}` + i,
@@ -195,7 +185,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
-
     if (getX(point.x + unitWidth / 2) > viewBoxWidth) {
       return jsx("g", {
         id: `${id}` + i,
@@ -219,7 +208,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
-
     if (getY(point.quantity + 0.5) > 10) {
       return jsx("g", {
         id: `${id}` + i,
@@ -242,7 +230,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
-
     return jsx("g", {
       id: `${id}` + i,
       className: 'DGN-Tooltip-Bar',
@@ -263,9 +250,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: `${id}` + i,
@@ -281,7 +268,6 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       fill: barsColor
     }, point.quantity));
   };
-
   return hoverTooltip ? jsx("g", {
     className: 'DGN-CUI-Bar',
     ref: ref
@@ -330,33 +316,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-v2/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
 };