diginet-core-ui 1.3.87 → 1.3.88

package/components/chart/line/Point.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 { typography } from "../../../styles/typography";
 import { color as colors } from "../../../styles/colors";
+
 const Points = ({
   data,
   getX,
@@ -40,9 +43,8 @@ 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;
@@ -61,6 +63,7 @@ const Points = ({
             H ${offset} 
             L 0,0 z`;
   };
+
   const bottomTooltipPath = (width, height, offset, radius) => {
     const left = -width / 2;
     const right = width / 2;
@@ -79,6 +82,7 @@ const Points = ({
             H ${offset} 
             L 0,0 z`;
   };
+
   const leftTooltipPath = (width, height, offset, radius) => {
     const left = -offset - width;
     const right = -offset;
@@ -97,6 +101,7 @@ const Points = ({
             V ${offset} 
             L 0,0 z`;
   };
+
   const rightTooltipPath = (width, height, offset, radius) => {
     const left = offset;
     const right = offset + width;
@@ -114,22 +119,24 @@ 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('tooltipLine' + i).style.display = 'block';
   };
+
   const MouseLeaveTarget = (e, i) => {
     if (onRemote) onRemote(e, i);
     document.getElementById('tooltipLine' + 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}`;
@@ -138,6 +145,7 @@ 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;
@@ -145,6 +153,7 @@ const Points = ({
       x1 += -23;
       y1 += -8;
     }
+
     if (h.length == 4 || h.length == 5) {
       Width += 40;
       x += 26;
@@ -152,15 +161,19 @@ 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;
     }
+
     const toolTipRight = jsx("g", {
       id: `tooltipLine` + i,
       className: 'DGN-Tooltip-Bar',
@@ -243,14 +256,18 @@ const Points = ({
       css: textChartCSS,
       fill: "#fff"
     }, point.quantity));
+
     if (pointHoverAlignment) {
       switch (pointHoverAlignment) {
         case 'right':
           return toolTipRight;
+
         case 'left':
           return toolTipLeft;
+
         case 'top':
           return toolTipTop;
+
         case 'bottom':
         default:
           return toolTipBottom;
@@ -259,15 +276,19 @@ const Points = ({
       if (getX(point.x + unitWidth / 1.5) < 20) {
         return toolTipRight;
       }
+
       if (getX(point.x + unitWidth / 1.5) > viewBoxWidth) {
         return toolTipLeft;
       }
+
       if (getY(point.quantity) > 10) {
         return toolTipTop;
       }
+
       return toolTipBottom;
     }
   };
+
   return pointsVisible ? jsx("g", {
     className: 'DGN-Point-LineChart'
   }, data.map((point, i) => {
@@ -301,31 +322,44 @@ 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,
+
   /** the direction to display tootip */
   pointHoverAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right'])
 };

package/components/chart/line/Title.js

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

package/components/chart/line/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
@@ -6,8 +7,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 LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -47,55 +48,63 @@ const LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     '#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 = () => {
     var _dataSource$;
+
     return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.x : 0;
   };
+
   const getMinY = () => {
     return 0;
   };
+
   const getMaxX = () => {
     var _dataSource;
+
     return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? (_dataSource = dataSource[(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) - 1]) === null || _dataSource === void 0 ? void 0 : _dataSource.x : 0;
   };
+
   const getMaxY = () => {
     var _dataSource$2;
+
     const yStep = labelsCountY > 0 ? labelsCountY : 1;
     const maxY = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? dataSource.reduce((max, point) => point.quantity > max ? point.quantity : max, (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2.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();
@@ -122,11 +131,9 @@ const LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...style
     },
     ref: ref
-  }, jsx(Axis, {
-    ...props,
+  }, jsx(Axis, { ...props,
     ...commonProps
-  }), jsx(Grid, {
-    ...props,
+  }), jsx(Grid, { ...props,
     ...commonProps
   }), jsx(Labels, {
     data: dataSource,
@@ -158,37 +165,53 @@ LineChart.defaultProps = {
 LineChart.propTypes = {
   /** style inline for component */
   style: PropTypes.object,
+
   /** className for component */
   className: PropTypes.string,
   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 hidden 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 hidden the line to be drawn smooth */
   Smooth: PropTypes.bool,
+
   /** the direction to display tootip */
   pointHoverAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
   ...Axis.propTypes,

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

@@ -1,7 +1,9 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import { jsx } from '@emotion/core';
+
 const Axis = ({
   axisColor,
   axisVisible,
@@ -31,6 +33,7 @@ const Axis = ({
     y2: getY(maxY + 10)
   })) : null;
 };
+
 Axis.defaultProps = {
   axisColor: '#7F828E',
   axisVisible: true,
@@ -42,24 +45,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-v2/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,7 +29,9 @@ 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,
@@ -36,6 +41,7 @@ const Grid = ({
       y2: getY(i)
     }));
   }
+
   if (GridLines === 'full') {
     return jsx("g", {
       className: 'DGN-Grid-LineChart',
@@ -43,6 +49,7 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridX, gridY);
   }
+
   if (GridLines === 'horizontal') {
     return jsx("g", {
       className: 'DGN-Grid-LineChart',
@@ -50,6 +57,7 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridY);
   }
+
   if (GridLines === 'none') {
     return null;
   } else {
@@ -60,27 +68,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-v2/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
 };