diginet-core-ui 1.3.87 → 1.3.88

package/components/chart/bar-v2/Points.js

@@ -1,7 +1,9 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import { jsx } from '@emotion/core';
+
 const Points = ({
   data,
   getX,
@@ -45,37 +47,52 @@ 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-v2/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
@@ -21,8 +22,7 @@ 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,39 +30,48 @@ 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();
@@ -87,11 +96,9 @@ 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,
@@ -124,32 +131,45 @@ 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/line/Axis.js

@@ -1,7 +1,9 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
+
 const Axis = ({
   axisColor,
   axisVisible,
@@ -11,8 +13,8 @@ const Axis = ({
   // maxX,
   // maxY,
   minX,
-  minY
-  // unitWidth,
+  minY // unitWidth,
+
 }) => {
   // drawn Oxygen coordinate systems for width and height are entered or by default
   return axisVisible ? jsx("g", {
@@ -21,8 +23,7 @@ const Axis = ({
     strokeWidth: axisWidth
   }, jsx("line", {
     x1: getX(minX),
-    y1: getY(minY)
-    // x2={getX(maxX + unitWidth + 0.5)}
+    y1: getY(minY) // x2={getX(maxX + unitWidth + 0.5)}
     ,
     x2: '100%',
     y2: getY(minY)
@@ -33,6 +34,7 @@ const Axis = ({
     y2: '-10%'
   })) : null;
 };
+
 Axis.defaultProps = {
   axisColor: '#7F828E',
   axisVisible: true,
@@ -44,24 +46,34 @@ 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/line/Grid.js

@@ -1,7 +1,9 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
+
 const Grid = ({
   getX,
   getY,
@@ -17,6 +19,7 @@ const Grid = ({
 }) => {
   let gridX = [];
   let gridY = [];
+
   for (let i = minX; i <= maxX; i++) {
     gridX.push(jsx("line", {
       key: i,
@@ -26,18 +29,20 @@ const Grid = ({
       y2: getY(maxY + 10)
     }));
   }
+
   const yStep = labelsCountY > 0 ? labelsCountY : unitWidth;
+
   for (let i = minY; i <= maxY; i += Math.floor(maxY / yStep)) {
     gridY.push(jsx("line", {
       key: i,
       x1: getX(minX),
-      y1: getY(i)
-      // x2={getX(maxX + unitWidth + 0.5)}
+      y1: getY(i) // x2={getX(maxX + unitWidth + 0.5)}
       ,
       x2: '100%',
       y2: getY(i)
     }));
   }
+
   if (GridLines === 'full') {
     return jsx("g", {
       className: 'DGN-Grid-LineChart',
@@ -45,6 +50,7 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridX, gridY);
   }
+
   if (GridLines === 'horizontal') {
     return jsx("g", {
       className: 'DGN-Grid-LineChart',
@@ -52,6 +58,7 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridY);
   }
+
   if (GridLines === 'none') {
     return null;
   } else {
@@ -62,27 +69,37 @@ 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 Line*/
   gridColor: PropTypes.string,
+
   /** change  Line grid display style ['full' , 'horizontal', 'none'], default: 'full'*/
   GridLines: PropTypes.string,
+
   /** hiden or  show grid Line*/
   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
 };

package/components/chart/line/Labels.js

@@ -1,10 +1,13 @@
 /* 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,
@@ -51,11 +54,13 @@ const Labels = ({
         ${typography.paragraph3};
         fill: ${theme.colors.secondary};
     `;
+
   if (labelsVisible) {
     let xLabels;
     let yLabels;
     let tile = 4;
     let tile2 = 9;
+
     const TiLe = () => {
       // eslint-disable-next-line no-undef
       if (viewBoxWidth >= 800) {
@@ -64,6 +69,7 @@ const Labels = ({
         return tile2;
       }
     };
+
     xLabels = labelStyle === 'italic' ? data.map((point, x) => jsx("text", {
       key: x,
       css: LabelCSS,
@@ -82,9 +88,11 @@ 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,
@@ -106,6 +114,7 @@ const Labels = ({
     return null;
   }
 };
+
 Labels.defaultProps = {
   getX: x => x,
   getY: quantity => quantity,
@@ -125,10 +134,13 @@ 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,
@@ -138,16 +150,22 @@ 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/line/Path.js

@@ -1,9 +1,12 @@
 /* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { color as colors } from "../../../styles/colors";
+
 const Path = ({
   data,
   getX,
@@ -19,9 +22,7 @@ const Path = ({
     const x = getX(element.x + unitWidth / 1.5);
     const y = getY(element.quantity);
     return [x, y];
-  });
-
-  // const Colors = data.map(element => {
+  }); // const Colors = data.map(element => {
   //     const colors = element.color;
   //     return colors;
   // });
@@ -38,58 +39,58 @@ const Path = ({
             stroke-linejoin: round;
             stroke-width: ${STROKEHover};
         } */
-    `;
-
-  // Properties of a line
+    `; // Properties of a line
   // I:  - pointA (array) [x,y]: coordinates
   //     - pointB (array) [x,y]: coordinates
   // O:  - (object) { length: l, angle: a }: properties of the line
+
   const line = (pointA, pointB) => {
     const lengthX = pointB[0] - pointA[0];
     const lengthY = pointB[1] - pointA[1];
     const Balance = 0.005 * Math.PI;
     const Re = 0.38 * Math.PI;
     let angle = Math.atan2(lengthY, lengthX);
+
     if (angle < -0.32 * Math.PI) {
       angle += Re; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
     }
 
     if (angle > 0.16 * Math.PI) {
       angle -= Balance;
-    }
+    } // console.log(angle);
 
-    // console.log(angle);
 
     return {
       length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
       angle
     };
-  };
-
-  // Position of a control point
+  }; // Position of a control point
   // I:  - current (array) [x, y]: current point coordinates
   //     - previous (array) [x, y]: previous point coordinates
   //     - next (array) [x, y]: next point coordinates
   //     - reverse (boolean, optional): sets the direction
   // O:  - (array) [x,y]: a tuple of coordinates
+
+
   const controlPoint = (current, previous, next, reverse) => {
     // When 'current' is the first or last point of the array
     // 'previous' or 'next' don't exist.
     // Replace with 'current'
     const c = current;
     const p = previous ? previous : c;
-    const n = next ? next : c;
-    // The smoothing ratio
-    const smoothing = 0.15;
-    // Properties of the opposed-line
-    const o = line(p, n);
-    // If is end-control-point, add PI to the angle to go backward
-    const rev = reverse ? Math.PI : 0;
-    // The control point position is relative to the current point
+    const n = next ? next : c; // The smoothing ratio
+
+    const smoothing = 0.15; // Properties of the opposed-line
+
+    const o = line(p, n); // If is end-control-point, add PI to the angle to go backward
+
+    const rev = reverse ? Math.PI : 0; // The control point position is relative to the current point
+
     const x = c[0] + Math.cos(o.angle + rev) * o.length * smoothing;
     const y = c[1] + Math.sin(o.angle * 0.095 + rev) * o.length * smoothing;
     return [x, y];
   };
+
   const svgPathRender = point => {
     const d = point.reduce((acc, e, i, a) => {
       if (i > 0) {
@@ -106,13 +107,13 @@ const Path = ({
       fill: 'none'
     });
   };
+
   const command = point => `L ${point[0]} ${point[1]} `;
+
   const svgPath = points => {
     // build the d attributes by looping over the points
-    const d = points.reduce((acc, point, i, a) => i === 0 ?
-    // if first point
-    `M ${point[0]},${point[1]}` :
-    // else
+    const d = points.reduce((acc, point, i, a) => i === 0 ? // if first point
+    `M ${point[0]},${point[1]}` : // else
     `${acc} ${command(point, i, a)}`, '');
     return jsx("path", {
       d: d,
@@ -120,27 +121,36 @@ const Path = ({
       fill: 'none'
     });
   };
+
   return PathVisible ? jsx("g", {
     className: 'DGN-Path-LineChart'
   }, Smooth ? svgPathRender(point) : svgPath(point)) : null;
 };
+
 Path.defaultProps = {
   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 color of the line drawn is the default color according to the data returned from the API, otherwise it will be generated by the design. */
   pathColor: PropTypes.string,
+
   /** shows the line to be drawn */
   PathVisible: PropTypes.bool,
+
   /** show or hiden the line to be drawn smooth */
   Smooth: PropTypes.bool,
+
   /** the thickness of the line to be drawn */
   STROKE: PropTypes.number,
+
   /** the unitWidth */
   unitWidth: PropTypes.number
 };