diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,5 +1,7 @@
 /* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -7,6 +9,7 @@ import Sector from "./Sector";
 import { jsx, css } from '@emotion/core';
 import { randomString } from "../../../utils";
 import { typography } from "../../../styles/typography";
+
 const Sectors = ({
   center,
   data,
@@ -34,21 +37,25 @@ 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;
@@ -60,6 +67,7 @@ const Sectors = ({
       xte += x1Path - 30;
       yte += y1Path - 6;
     }
+
     const path1 = `
             M${xPath},${yPath}
             L${x1Path},${y1Path}
@@ -119,6 +127,7 @@ 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;
@@ -141,16 +150,19 @@ 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
@@ -173,6 +185,7 @@ const Sectors = ({
     }), getPath(d, i));
   })) : null;
 };
+
 Sectors.defaultProps = {
   expandSize: 10,
   strokeWidthTooltip: 2,
@@ -182,22 +195,29 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { useState, useRef, memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -38,28 +39,35 @@ 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;
@@ -98,24 +106,23 @@ 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,
-    x: position + i * 10
-  }));
+  const expandedIndex = useRef(null); // const dataSource = data.map((item, i) => ({ ...item, x: i * position }));
 
-  // const measureText = (str, fontSize = 16) => {
+  const DataTitle = data.map((item, i) => ({ ...item,
+    x: position + i * 10
+  })); // const measureText = (str, fontSize = 16) => {
   //     const widths = [
   //         0,
   //         0,
@@ -253,6 +260,7 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //             .reduce((cur, acc) => acc + cur) * fontSize
   //     );
   // };
+
   const handleSectorHover = (data, index, e) => {
     if (expandOnHover) {
       setExpanded({
@@ -260,10 +268,12 @@ 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,
@@ -276,14 +286,13 @@ 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,
@@ -293,6 +302,7 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onSectorHover: handleSectorHover
     });
   };
+
   return jsx("div", {
     ref: ref,
     className: `DGN-CUI-Container-PieChart`
@@ -445,14 +455,19 @@ 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,
@@ -460,28 +475,40 @@ 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,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 + 5)
   })) : null;
 };
+
 Axis.defaultProps = {
   axisColor: '#7F828E',
   axisOpacity: 1,
@@ -43,24 +46,33 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useRef, forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -19,8 +20,8 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   minX,
   minY,
   unitWidth,
-  onClick
-  // ...props
+  onClick // ...props
+
 }, ref) => {
   // Start create css in Component
   const barChartCSS = css`
@@ -33,19 +34,18 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const textChartCSS = css`
                 text-anchor: middle;
                 ${typography.paragraph3};
-            `;
-  // End create css in Component
-
+            `; // 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;
+  const barsWidth = unitWidth - margin * 3; // 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;
@@ -64,6 +64,7 @@ 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;
@@ -82,6 +83,7 @@ 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;
@@ -100,6 +102,7 @@ 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;
@@ -117,41 +120,49 @@ 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,
@@ -175,6 +186,7 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
+
     if (getX(point.x + unitWidth / 2) > viewBoxWidth) {
       return jsx("g", {
         id: `tooltip-bar` + i,
@@ -198,6 +210,7 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
+
     if (getY(point.quantity + 0.5) > 10) {
       return jsx("g", {
         id: `tooltip-bar` + i,
@@ -220,6 +233,7 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         fill: "#fff"
       }, point.quantity));
     }
+
     return jsx("g", {
       id: `tooltip-bar` + i,
       className: 'DGN-Tooltip-Bar',
@@ -240,9 +254,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,
@@ -258,6 +272,7 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       fill: barsColor
     }, point.quantity));
   };
+
   return hoverTooltip ? jsx("g", {
     className: 'DGN-CUI-Bar',
     ref: ref
@@ -306,26 +321,33 @@ 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,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 + unitWidth; i++) {
     gridX.push(jsx("line", {
       key: i,
@@ -26,7 +29,9 @@ 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,
@@ -36,6 +41,7 @@ const Grid = ({
       y2: getY(i)
     }));
   }
+
   if (GridLines === 'full') {
     return jsx("g", {
       className: 'DGN-Grid-BarChart',
@@ -43,6 +49,7 @@ const Grid = ({
       strokeWidth: gridWidth
     }, gridX, gridY);
   }
+
   if (GridLines === 'horizontal') {
     return jsx("g", {
       className: 'DGN-Grid-BarChart',
@@ -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 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
 };