diginet-core-ui 1.3.65 → 1.3.66

package/components/button/index.js

@@ -111,7 +111,6 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   startIcon,
   endIcon,
   children,
-  refs,
   loading,
   ...props
 }, reference) => {
@@ -484,19 +483,19 @@ Button.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/button/more.js

@@ -23,25 +23,25 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const [open, setOpen] = useState(false);
   const ButtonMoreStyle = css`
-        display: inline-flex;
-        button {
-            :first-of-type {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-                margin-right: 1px;
+            display: inline-flex;
+            button {
+                :first-of-type {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    margin-right: 1px;
+                }
+                :last-of-type {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                    margin-left: 0;
+                }
             }
-            :last-of-type {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-                margin-left: 0;
+            .more-icon-close {
+                display: none;
             }
-        }
-        .more-icon-close {
-            display: none;
-        }
-    `;
+        `;
 
-  const showMoreOption = e => {
+  const showMoreOption = () => {
     if (!open) {
       setOpen(true);
     }

package/components/button/ripple-effect.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */

package/components/card/card.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,18 +9,18 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import CardContext from './context';
 const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
-  type,
-  title,
+  // open,
+  // type,
+  // title,
   style,
   top,
-  pressESCToClose,
-  darkTheme,
-  autoFocus,
-  refs,
+  // pressESCToClose,
+  // darkTheme,
+  // autoFocus,
+  // refs,
   onClose,
-  onConfirm,
-  onCancel,
+  // onConfirm,
+  // onCancel,
   children,
   width,
   ...props
@@ -29,25 +31,25 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const cardBoxRef = useRef(null);
   const CardBox = css`
-        background-color: white;
-        border-radius: 4px;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        box-sizing: border-box;
-        border-radius: 10px;
-        display: flex;
-        position: relative;
-        max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
-        min-width: 150px;
-        max-width: 90%;
-        margin: 0 auto;
-        height: max-content;
-        width: ${isNaN(width) ? width : width + 'px'};
-        flex-direction: column;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        /* min-height: 152px; */
-        cursor: 'initial';
-    `;
+                background-color: white;
+                border-radius: 4px;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                box-sizing: border-box;
+                border-radius: 10px;
+                display: flex;
+                position: relative;
+                max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
+                min-width: 150px;
+                max-width: 90%;
+                margin: 0 auto;
+                height: max-content;
+                width: ${isNaN(width) ? width : width + 'px'};
+                flex-direction: column;
+                -webkit-box-orient: vertical;
+                -webkit-box-direction: normal;
+                /* min-height: 152px; */
+                cursor: 'initial';
+            `;
 
   const onShowCard = () => {
     setOpenState(true);

package/components/card/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { memo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Card from './card';

package/components/chart/Pie/Circle.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -19,6 +19,7 @@ const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   quantity
 }, ref) => {
   return jsx("ellipse", {
+    ref: ref,
     cx: center,
     cy: center,
     fill: color,

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -15,10 +15,10 @@ const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   radius,
   strokeColor,
   strokeWidth,
-  name,
-  quantity
+  name
 }, ref) => {
   return jsx("ellipse", {
+    ref: ref,
     cx: center,
     cy: center,
     fill: color,
@@ -44,7 +44,6 @@ Circle.propTypes = {
   radius: PropTypes.number.isRequired,
   strokeColor: PropTypes.string,
   strokeWidth: PropTypes.number,
-  name: PropTypes.string,
-  quantity: PropTypes.number
+  name: PropTypes.string
 };
 export default Circle;

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

@@ -2,7 +2,7 @@
 
 /** @jsx jsx */
 import { useRef, memo, forwardRef } from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   fill,
@@ -18,8 +18,6 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   renderSelectedItem,
   className,
   path,
-  name,
-  quantity,
   href,
   transitionDuration,
   transitionTimingFunction,
@@ -34,20 +32,20 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const pathRef = useRef(null);
   const SectorCSS = expandOnHover || expandedIndex >= 0 ? css`
-        transition-property: ${transitionProperty};
-        cursor: pointer;
-        transition-timing-function: ${transitionTimingFunction};
-        transition-duration: ${transitionDuration};
-        &:hover {
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-            filter: drop-shadow( 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5));
-        }
-    ` : css`
-        transition-property: all;
-        cursor: pointer;
-        transition-timing-function: ${transitionTimingFunction};
-        transition-duration: ${transitionDuration};
-    `;
+                          transition-property: ${transitionProperty};
+                          cursor: pointer;
+                          transition-timing-function: ${transitionTimingFunction};
+                          transition-duration: ${transitionDuration};
+                          &:hover {
+                              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+                              filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5));
+                          }
+                      ` : css`
+                          transition-property: all;
+                          cursor: pointer;
+                          transition-timing-function: ${transitionTimingFunction};
+                          transition-duration: ${transitionDuration};
+                      `;
   const content = jsx("path", {
     d: path,
     fill: fill,
@@ -75,14 +73,13 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return result;
 }));
 Sector.defaultProps = {
-  strokeColor: "#fff",
+  strokeColor: '#fff',
   strokeWidth: 0,
-  strokeLinejoin: "round",
-  name: null,
+  strokeLinejoin: 'round',
   quantity: null,
   href: null,
-  transitionDuration: "0.5s",
-  transitionTimingFunction: "ease-in",
+  transitionDuration: '0.5s',
+  transitionTimingFunction: 'ease-in',
   transitionProperty: 'd'
 };
 Sector.propTypes = {
@@ -97,8 +94,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,
@@ -111,9 +108,6 @@ Sector.propTypes = {
 
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: PropTypes.number,
-
-  /** The title is add from the data */
-  name: PropTypes.string,
   quantity: PropTypes.number,
   href: PropTypes.string,
 

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

@@ -1,13 +1,14 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { useState } from 'react';
-import PropTypes from "prop-types";
-import Sector from "./Sector";
-import ReactDOMServer from 'react-dom/server';
+import PropTypes from 'prop-types';
+import Sector from './Sector';
 import { jsx, css } from '@emotion/core';
-import { randomString, parseTextToHTML } from '../../../utils';
-import { typography } from "../../../styles/typography";
+import { randomString } from '../../../utils';
+import { typography } from '../../../styles/typography';
 
 const Sectors = ({
   center,
@@ -37,7 +38,7 @@ const Sectors = ({
   let angleStart = startAngle;
   let angleEnd = startAngle;
 
-  const getPath = (d, i, e) => {
+  const getPath = (d, i) => {
     const anglePosition = (angleStart + angleEnd) / 2;
     var rotateX = 0;
     var rotateY = 0;
@@ -77,10 +78,10 @@ const Sectors = ({
             ${typography.paragraph1};
             stroke-dasharray: 1000;
             stroke-dashoffset: 1000;
-		    animation: draw 8s ease-in-out forwards;
+            animation: draw 8s ease-in-out forwards;
             @keyframes draw {
-            to {
-                stroke-dashoffset: 0;
+                to {
+                    stroke-dashoffset: 0;
                 }
             }
         `;
@@ -94,7 +95,7 @@ const Sectors = ({
             animation: dash 1s linear forwards;
             &:hover {
                 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-                filter: drop-shadow( 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.2));
+                filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.2));
             }
             @keyframes dash {
                 to {
@@ -103,7 +104,7 @@ const Sectors = ({
             }
         `;
     return jsx("g", {
-      key: "Path" + i
+      key: 'Path' + i
     }, jsx("path", {
       d: path1,
       stroke: d.color,
@@ -164,9 +165,9 @@ const Sectors = ({
 
     return jsx("g", {
       key: i,
-      id: "sector" + i
+      id: 'sector' + i
     }, jsx(Sector, {
-      key: "sector" + i,
+      key: 'sector' + i,
       fill: d.color,
       path: path,
       href: d.href,
@@ -188,8 +189,8 @@ const Sectors = ({
 Sectors.defaultProps = {
   expandSize: 10,
   strokeWidthTooltip: 2,
-  transitionTimingFunction: "ease-out",
-  strokeLinejoin: "round",
+  transitionTimingFunction: 'ease-out',
+  strokeLinejoin: 'round',
   transitionProperty: 'd'
 };
 Sectors.propTypes = {

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

@@ -13,14 +13,13 @@ import Sector from './Sector';
 const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandOnHover,
   renderSelectedItem,
-  type,
+  // type,
   viewData,
   onSectorHover,
   expandSize,
   data,
   title,
   Donut,
-  viewBoxSize,
   width,
   height,
   ...props
@@ -119,19 +118,148 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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 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 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 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 handleSectorHover = (data, index, e) => {
     if (expandOnHover) {
@@ -375,9 +503,6 @@ PieChart.propTypes = {
   /** */
   angleMargin: PropTypes.number,
 
-  /** The viewBox attribute defines the position and dimension, in user space, of an SVG viewport */
-  viewBoxSize: 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,
 

package/components/chart/bar/Bar.js

@@ -1,13 +1,13 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useEffect } from 'react';
+import { memo, useRef, forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
-import PropTypes from "prop-types";
-import Labels from "./Labels";
-import { typography } from "../../../styles/typography";
+import PropTypes from 'prop-types';
+import Labels from './Labels';
+import { typography } from '../../../styles/typography';
 const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  barsOpacity,
+  // barsOpacity,
   barsMargin,
   barsColor,
   hoverTooltip,
@@ -20,21 +20,21 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   minX,
   minY,
   unitWidth,
-  onClick,
-  ...props
+  onClick // ...props
+
 }, ref) => {
   // Start create css in Component
   const barChartCSS = css`
-        position: relative;
-        &:hover {
-            cursor: pointer;
-            filter: drop-shadow( 0 -2px 4px rgba(21, 26, 48, 0.25));
-        }
-    `;
+                position: relative;
+                &:hover {
+                    cursor: pointer;
+                    filter: drop-shadow(0 -2px 4px rgba(21, 26, 48, 0.25));
+                }
+            `;
   const textChartCSS = css`
-        text-anchor: middle;
-        ${typography.paragraph3};
-    `; // End create css in Component
+                text-anchor: middle;
+                ${typography.paragraph3};
+            `; // End create css in Component
   // Create variable to calculate
 
   const round = n => {
@@ -274,7 +274,8 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   return hoverTooltip ? jsx("g", {
-    className: 'DGN-CUI-Bar'
+    className: 'DGN-CUI-Bar',
+    ref: ref
   }, data.map((point, i) => {
     return jsx("g", {
       key: i,
@@ -295,7 +296,8 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: handleChange
     }), getPlacement(point, i));
   })) : jsx("g", {
-    className: 'DGN-CUI-Bar'
+    className: 'DGN-CUI-Bar',
+    ref: ref
   }, data.map((point, i) => {
     return jsx("g", {
       key: i,