diginet-core-ui 1.3.78 → 1.3.79

package/components/chart/line-v2/Path.js

@@ -1,11 +1,8 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-
 const Path = ({
   data,
   getX,
@@ -21,7 +18,9 @@ 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 +37,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 +105,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,36 +119,27 @@ 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
 };

package/components/chart/line-v2/Point.js

@@ -1,14 +1,11 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { randomString } from '../../../utils';
 import { typography } from '../../../styles/typography';
-
 const Points = ({
   data,
   getX,
@@ -47,8 +44,9 @@ const Points = ({
   const textChartCSS = css`
         text-anchor: middle;
         ${typography.paragraph3};
-    `; // create drawing function tooltips in different positions
+    `;
 
+  // create drawing function tooltips in different positions
   const topTooltipPath = (width, height, offset, radius) => {
     const left = -width / 2;
     const right = width / 2;
@@ -67,7 +65,6 @@ const Points = ({
             H ${offset} 
             L 0,0 z`;
   };
-
   const bottomTooltipPath = (width, height, offset, radius) => {
     const left = -width / 2;
     const right = width / 2;
@@ -86,7 +83,6 @@ const Points = ({
             H ${offset} 
             L 0,0 z`;
   };
-
   const leftTooltipPath = (width, height, offset, radius) => {
     const left = -offset - width;
     const right = -offset;
@@ -105,7 +101,6 @@ const Points = ({
             V ${offset} 
             L 0,0 z`;
   };
-
   const rightTooltipPath = (width, height, offset, radius) => {
     const left = offset;
     const right = offset + width;
@@ -123,24 +118,22 @@ const Points = ({
             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}`;
@@ -149,7 +142,6 @@ const Points = ({
     var y = 0;
     var x1 = 0;
     var y1 = 0;
-
     if (h.length == 2 || h.length == 1 || h.length == 3) {
       Width += 35;
       x += 23;
@@ -157,7 +149,6 @@ const Points = ({
       x1 += -23;
       y1 += -8;
     }
-
     if (h.length == 4 || h.length == 5) {
       Width += 40;
       x += 26;
@@ -165,19 +156,15 @@ const Points = ({
       x1 += -26;
       y1 += -8;
     }
-
     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 / 1.5) < 20) {
       return jsx("g", {
         id: `${id}` + i,
@@ -201,7 +188,6 @@ const Points = ({
         fill: "#fff"
       }, point.quantity));
     }
-
     if (getX(point.x + unitWidth / 1.5) > viewBoxWidth) {
       return jsx("g", {
         id: `${id}` + i,
@@ -225,7 +211,6 @@ const Points = ({
         fill: "#fff"
       }, point.quantity));
     }
-
     if (getY(point.quantity) > 10) {
       return jsx("g", {
         id: `${id}` + i,
@@ -248,7 +233,6 @@ const Points = ({
         fill: "#fff"
       }, point.quantity));
     }
-
     return jsx("g", {
       id: `${id}` + i,
       className: 'DGN-Tooltip-Bar',
@@ -270,7 +254,6 @@ const Points = ({
       fill: "#fff"
     }, point.quantity));
   };
-
   return pointsVisible ? jsx("g", {
     className: 'DGN-Point-LineChart'
   }, data.map((point, i) => {
@@ -304,41 +287,29 @@ const Points = ({
     }), getPlacement(point, i));
   })) : null;
 };
-
 Points.propTypes = {
   /** 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,
-
   /** change the radius of the point is created */
   pointsRadius: PropTypes.number,
-
   /** change the border color of the point button  */
   pointsStrokeColor: PropTypes.string,
-
   /** show or hiden point */
   pointsVisible: PropTypes.bool,
-
   /** the unitWidth */
   unitWidth: PropTypes.number
 };

package/components/chart/line-v2/Title.js

@@ -1,10 +1,8 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Typography from '../../typography';
-
 const Title = ({
   data
 }) => {
@@ -45,7 +43,6 @@ const Title = ({
     }, d.label));
   }))));
 };
-
 Title.defaultProps = {
   data: []
 };

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
@@ -7,8 +6,8 @@ import { jsx } from '@emotion/core';
 import Axis from './Axis';
 import Labels from './Labels';
 import Grid from './Grid';
-import Points from './Point'; // import Title from './Title';
-
+import Points from './Point';
+// import Title from './Title';
 import Path from './Path';
 import { randomString } from '../../../utils';
 const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -26,57 +25,52 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   // const colors = ['#FFD600', '#FFA800', '#FF7A00', '#FF0000', '#B61414', '#8FFF00', '#629000', '#019A5A', '#00C875', '#00FFD1', '#4200FF', '#0075FF', '#0095FF', '#00C2FF', '#00E0FF', '#8F00FF', '#BD00FF', '#FA00FF', '#FF00B8', '#FF3D71'];
-  const dataSource = data.map((item, i) => ({ ...item,
+
+  const dataSource = data.map((item, i) => ({
+    ...item,
     x: i
-  })); // console.log(dataSource);
+  }));
+
+  // console.log(dataSource);
 
   const UNIT_WIDTH = 1;
   const id = 'DGN-CUI-LineChart-' + randomString(6, {
     allowNumber: false,
     allowSymbol: false
   });
-
   const round = n => {
     return Math.round(n * 100) / 100;
   };
-
   const getMinX = () => {
     return dataSource.length > 0 ? dataSource[0].x : 0;
   };
-
   const getMinY = () => {
     return 0;
   };
-
   const getMaxX = () => {
     return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 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();
@@ -102,9 +96,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(Labels, {
     data: dataSource,
@@ -133,46 +129,32 @@ BarChart.defaultProps = {
 };
 BarChart.propTypes = {
   data: PropTypes.array.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,
-
   /** the axisColor change color */
   axisColor: PropTypes.string,
-
   /** the axisVisible Hide or show the Axis axis */
   axisVisible: PropTypes.bool,
-
   /** change style show of label ['', 'italic'], default: 'italic' */
   labelStyle: PropTypes.string,
-
   /** change  Line grid display style ['full' , 'horizontal', 'none'], default: 'full'*/
   GridLines: 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 radius of the point is created */
   pointsRadius: PropTypes.number,
-
   /** the thickness of the line to be drawn */
   STROKE: PropTypes.number,
-
   /** shows the line to be drawn */
   PathVisible: PropTypes.bool,
-
   /** 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,
-
   /** show or hiden the line to be drawn smooth */
   Smooth: PropTypes.bool,
   ...Axis.propTypes,

package/components/check-text/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -24,7 +23,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const checkText = css`
             display: inline-flex;
             color: ${disabled ? theme.colors.disabled : theme.colors.border};
@@ -48,7 +46,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             background: ${theme.colors.border};
             border-radius: 1px;
         `;
-
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
     if (readOnly || clickedItem[index].style.color) return;
@@ -66,7 +63,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onClick) onClick(e);
     if (onChoose) onChoose(e);
   };
-
   useEffect(() => {
     ref.current.querySelectorAll('div').forEach((el, i) => {
       if (i === chosen || el.textContent === chosen) {
@@ -142,16 +138,12 @@ InterviewStatus.defaultProps = {
 InterviewStatus.propsTypes = {
   /** Prevent all event if true */
   disabled: PropTypes.bool,
-
   /** Item of CheckText in CheckText component */
   option: PropTypes.oneOf(['status', 'success', 'warning', 'danger']),
-
   /** the displayed chosen for each change */
   chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The function will run to return a value of CheckText Component */
   onClick: PropTypes.func,
-
   /** The function will run to return a value of CheckText Component */
   onChoose: PropTypes.func
 };

package/components/check-text/interview-confirmation.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -22,7 +21,6 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const checkText = css`
         display: inline-flex;
         color: ${disabled ? theme.colors.disabled : theme.colors.border};
@@ -46,7 +44,6 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         background: ${theme.colors.border};
         border-radius: 1px;
     `;
-
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
     if (readOnly || clickedItem[index].style.color) return;
@@ -64,7 +61,6 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onClick) onClick(e);
     if (onChoose) onChoose(e);
   };
-
   useEffect(() => {
     ref.current.querySelectorAll('div').forEach((el, i) => {
       if (i === chosen || el.textContent === chosen) {
@@ -159,13 +155,10 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 InterviewConfirmation.propsTypes = {
   /** Prevent all event if true */
   disabled: PropTypes.bool,
-
   /** the displayed chosen for each change */
   chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The function will run to return a value of CheckText Component */
   onClick: PropTypes.func,
-
   /** The function will run to return a value of CheckText Component */
   onChoose: PropTypes.func
 };

package/components/check-text/interview-status.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -22,7 +21,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const checkText = css`
         display: inline-flex;
         color: ${disabled ? theme.colors.disabled : theme.colors.border};
@@ -46,7 +44,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         background: ${theme.colors.border};
         border-radius: 1px;
     `;
-
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
     if (readOnly || clickedItem[index].style.color) return;
@@ -64,7 +61,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onClick) onClick(e);
     if (onChoose) onChoose(e);
   };
-
   useEffect(() => {
     ref.current.querySelectorAll('div').forEach((el, i) => {
       if (i === chosen || el.textContent === chosen) {
@@ -125,13 +121,10 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 InterviewStatus.propsTypes = {
   /** Prevent all event if true */
   disabled: PropTypes.bool,
-
   /** the displayed chosen for each change */
   chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The function will run to return a value of CheckText Component */
   onClick: PropTypes.func,
-
   /** The function will run to return a value of CheckText Component */
   onChoose: PropTypes.func
 };