diginet-core-ui 1.3.65 → 1.3.66

package/components/chart/bar/Labels.js

@@ -1,7 +1,9 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
 import { typography } from '../../../styles/typography';
@@ -33,23 +35,23 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-        fill: ${theme.colors.secondary};
-        text-anchor: start;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        cursor: pointer;
-        display: inline-block;
-        transform-box: fill-box;
-        transform: rotateZ(45deg);
-    ` : css`
-        color: ${theme.colors.secondary};
-        text-anchor: middle;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        cursor: pointer;
-        display: inline-block;
-        word-break: break-word;
-    `;
+                  fill: ${theme.colors.secondary};
+                  text-anchor: start;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  transform-box: fill-box;
+                  transform: rotateZ(45deg);
+              ` : css`
+                  color: ${theme.colors.secondary};
+                  text-anchor: middle;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  word-break: break-word;
+              `;
   const TextCSS = css`
         ${typography.paragraph3};
         fill: ${theme.colors.secondary};

package/components/chart/bar/index.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
-import { memo, forwardRef } from "react";
+import PropTypes from 'prop-types';
+import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import Axis from './Axis';
 import Points from './Points';
@@ -89,6 +89,7 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   return jsx("svg", {
     id: id,
+    ref: ref,
     viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
     style: {
       display: 'block',

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

@@ -3,12 +3,12 @@
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
-import PropTypes from "prop-types";
-import Labels from "./Labels";
+import PropTypes from 'prop-types';
+import Labels from './Labels';
 import { randomString } from '../../../utils';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
 const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  barsOpacity,
+  // barsOpacity,
   barsMargin,
   barsColor,
   hoverTooltip,
@@ -21,8 +21,8 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   minX,
   minY,
   unitWidth,
-  onClick,
-  ...props
+  onClick // ...props
+
 }, ref) => {
   const [id] = useState(randomString(6, {
     allowNumber: false,
@@ -30,20 +30,20 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })); // Start create css in Component
 
   const barChartCSS = css`
-        position: relative;
-        opacity: 0.7;
-        filter: alpha(opacity=70); /* sử dụng cho IE8 trở về trước */
-        &:hover {
-            cursor: pointer;
-            filter: drop-shadow( 0 -2px 4px rgba(21, 26, 48, 0.25));
-            opacity: 1.0;
-            filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */
-        }
-    `;
+                position: relative;
+                opacity: 0.7;
+                filter: alpha(opacity=70); /* sử dụng cho IE8 trở về trước */
+                &:hover {
+                    cursor: pointer;
+                    filter: drop-shadow(0 -2px 4px rgba(21, 26, 48, 0.25));
+                    opacity: 1;
+                    filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */
+                }
+            `;
   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 => {
@@ -283,7 +283,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,
@@ -304,7 +305,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,

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

@@ -1,10 +1,12 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
 
 const Labels = ({
   getX,
@@ -33,23 +35,23 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-        fill: ${theme.colors.secondary};
-        text-anchor: start;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        cursor: pointer;
-        display: inline-block;
-        transform-box: fill-box;
-        transform: rotateZ(45deg);
-    ` : css`
-        color: ${theme.colors.secondary};
-        text-anchor: middle;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        cursor: pointer;
-        display: inline-block;
-        word-break: break-word;
-    `;
+                  fill: ${theme.colors.secondary};
+                  text-anchor: start;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  transform-box: fill-box;
+                  transform: rotateZ(45deg);
+              ` : css`
+                  color: ${theme.colors.secondary};
+                  text-anchor: middle;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  word-break: break-word;
+              `;
   const TextCSS = css`
         ${typography.paragraph3};
         fill: ${theme.colors.secondary};

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

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
-import { memo, forwardRef } from "react";
+import PropTypes from 'prop-types';
+import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import Axis from './Axis';
 import Points from './Points';
@@ -89,6 +89,7 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   return jsx("svg", {
     id: id,
+    ref: ref,
     viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
     style: {
       display: 'block',

package/components/chart/line/Labels.js

@@ -1,10 +1,12 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
 
 const Labels = ({
   getX,
@@ -32,22 +34,22 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-        fill: ${theme.colors.secondary};
-        text-anchor: start;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        cursor: pointer;
-        display: inline-block;
-        transform-box: fill-box;
-        transform: rotateZ(45deg);
-    ` : css`
-        color: ${theme.colors.secondary};
-        text-anchor: middle;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        display: inline-block;
-        word-break: break-word;
-    `;
+                  fill: ${theme.colors.secondary};
+                  text-anchor: start;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  transform-box: fill-box;
+                  transform: rotateZ(45deg);
+              ` : css`
+                  color: ${theme.colors.secondary};
+                  text-anchor: middle;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  display: inline-block;
+                  word-break: break-word;
+              `;
   const TextCSS = css`
         ${typography.paragraph3};
         fill: ${theme.colors.secondary};
@@ -60,6 +62,7 @@ const Labels = ({
     let tile2 = 9;
 
     const TiLe = () => {
+      // eslint-disable-next-line no-undef
       if (viewBoxWidth >= 800) {
         return tile;
       } else {

package/components/chart/line/Path.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -11,7 +13,6 @@ const Path = ({
   getY,
   Smooth,
   PathVisible,
-  viewBoxWidth,
   STROKE,
   STROKEHover,
   pathColor,
@@ -21,11 +22,11 @@ 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 = element.color;
-    return colors;
-  });
+  }); // const Colors = data.map(element => {
+  //     const colors = element.color;
+  //     return colors;
+  // });
+
   const PathCSS = css`
         stroke: ${colors[pathColor] || pathColor};
         stroke-width: ${STROKE};

package/components/chart/line/Point.js

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

package/components/chart/line/Title.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Typography from '../../typography';
 
 const Title = ({
-  position,
   data
 }) => {
   return jsx("g", {

package/components/chart/line/index.js

@@ -26,7 +26,28 @@ const LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   ...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 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,
     x: i
   })); // console.log(dataSource);

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

@@ -1,10 +1,12 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
 
 const Labels = ({
   getX,
@@ -32,22 +34,22 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-        fill: ${theme.colors.secondary};
-        text-anchor: start;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        cursor: pointer;
-        display: inline-block;
-        transform-box: fill-box;
-        transform: rotateZ(45deg);
-    ` : css`
-        color: ${theme.colors.secondary};
-        text-anchor: middle;
-        ${typography.paragraph3};
-        text-transform: capitalize;
-        display: inline-block;
-        word-break: break-word;
-    `;
+                  fill: ${theme.colors.secondary};
+                  text-anchor: start;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  cursor: pointer;
+                  display: inline-block;
+                  transform-box: fill-box;
+                  transform: rotateZ(45deg);
+              ` : css`
+                  color: ${theme.colors.secondary};
+                  text-anchor: middle;
+                  ${typography.paragraph3};
+                  text-transform: capitalize;
+                  display: inline-block;
+                  word-break: break-word;
+              `;
   const TextCSS = css`
         ${typography.paragraph3};
         fill: ${theme.colors.secondary};
@@ -60,6 +62,7 @@ const Labels = ({
     let tile2 = 9;
 
     const TiLe = () => {
+      // eslint-disable-next-line no-undef
       if (viewBoxWidth >= 800) {
         return tile;
       } else {

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

@@ -1,7 +1,9 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 
 const Path = ({
@@ -10,7 +12,6 @@ const Path = ({
   getY,
   Smooth,
   PathVisible,
-  viewBoxWidth,
   STROKE,
   STROKEHover,
   pathColor,
@@ -20,11 +21,11 @@ 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 = element.color;
-    return colors;
-  });
+  }); // const Colors = data.map(element => {
+  //     const colors = element.color;
+  //     return colors;
+  // });
+
   const PathCSS = css`
         stroke: ${pathColor};
         stroke-width: ${STROKE};
@@ -37,7 +38,7 @@ 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
@@ -62,7 +63,7 @@ const Path = ({
       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
@@ -102,7 +103,7 @@ const Path = ({
     return jsx("path", {
       d: d,
       css: PathCSS,
-      fill: "none"
+      fill: 'none'
     });
   };
 
@@ -110,13 +111,13 @@ const Path = ({
 
   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
-    : `${acc} ${command(point, i, a)}`, '');
+    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,
       css: PathCSS,
-      fill: "none"
+      fill: 'none'
     });
   };
 

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

@@ -1,11 +1,13 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { useState } from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { randomString } from '../../../utils';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
 
 const Points = ({
   data,

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

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Typography from '../../typography';
 
 const Title = ({
-  position,
   data
 }) => {
   return jsx("g", {

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

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
-import { memo, forwardRef } from "react";
+import PropTypes from 'prop-types';
+import { memo, forwardRef } from 'react';
 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(({
@@ -21,11 +21,11 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewBoxWidth,
   labelsOffsetX,
   labelsHeightX,
-  unitWidth,
-  style,
+  // unitWidth,
+  // style,
   ...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 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,
     x: i
   })); // console.log(dataSource);
@@ -94,6 +94,7 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   return jsx("svg", {
     id: id,
+    ref: ref,
     className: 'DGN-CUI-LineChart',
     viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
     style: {

package/components/check-text/index.js

@@ -26,28 +26,28 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const checkText = css`
-        display: inline-flex;
-        color: ${disabled ? theme.colors.disabled : theme.colors.border};
-        div:nth-of-type(1):hover {
-            color: ${color[0]};
-        }
-        div:nth-of-type(2):hover {
-            color: ${color[1]};
-        }
-        div:nth-of-type(3):hover {
-            color: ${color[2]};
-        }
-    `;
+            display: inline-flex;
+            color: ${disabled ? theme.colors.disabled : theme.colors.border};
+            div:nth-of-type(1):hover {
+                color: ${color[0]};
+            }
+            div:nth-of-type(2):hover {
+                color: ${color[1]};
+            }
+            div:nth-of-type(3):hover {
+                color: ${color[2]};
+            }
+        `;
   const checkTextItemText = css`
-        margin-left: 10px;
-    `;
+            margin-left: 10px;
+        `;
   const checkTextDivider = css`
-        margin: 2px 19px;
-        width: 2px;
-        height: 16px;
-        background: ${theme.colors.border};
-        border-radius: 1px;
-    `;
+            margin: 2px 19px;
+            width: 2px;
+            height: 16px;
+            background: ${theme.colors.border};
+            border-radius: 1px;
+        `;
 
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
@@ -76,7 +76,8 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     });
   }, [chosen]);
-  const ItemName = option.map(index => jsx("span", {
+  const ItemName = option.map((index, idx) => jsx("span", {
+    key: idx,
     css: checkTextItemText
   }, index));
   return jsx("div", {