diginet-core-ui 1.3.43 → 1.3.45

package/components/chart/line/Axis.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 
 const Axis = ({
@@ -10,27 +10,28 @@ const Axis = ({
   axisWidth,
   getX,
   getY,
-  maxX,
-  maxY,
+  // maxX,
+  // maxY,
   minX,
-  minY,
-  unitWidth
+  minY // unitWidth,
+
 }) => {
-  // drawn Oxygen coordinate systems for width and height are entered or by default 
+  // drawn Oxygen coordinate systems for width and height are entered or by default
   return axisVisible ? jsx("g", {
-    className: 'DGN-Axis-LineChart',
+    className: 'DGN-UI-LineChart-Axis',
     stroke: axisColor,
     strokeWidth: axisWidth
   }, jsx("line", {
     x1: getX(minX),
-    y1: getY(minY),
-    x2: getX(maxX + unitWidth + 0.5),
+    y1: getY(minY) // x2={getX(maxX + unitWidth + 0.5)}
+    ,
+    x2: '100%',
     y2: getY(minY)
   }), jsx("line", {
     x1: getX(minX),
     y1: getY(minX),
     x2: getX(minX),
-    y2: getY(maxY + 10)
+    y2: '-10%'
   })) : null;
 };
 

package/components/chart/line/Grid.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 
 const Grid = ({
@@ -36,8 +36,9 @@ const Grid = ({
     gridY.push(jsx("line", {
       key: i,
       x1: getX(minX),
-      y1: getY(i),
-      x2: getX(maxX + unitWidth + 0.5),
+      y1: getY(i) // x2={getX(maxX + unitWidth + 0.5)}
+      ,
+      x2: '100%',
       y2: getY(i)
     }));
   }

package/components/chart/line/Path.js

@@ -1,8 +1,9 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import { color as colors } from '../../../styles/colors';
 
 const Path = ({
   data,
@@ -26,18 +27,18 @@ const Path = ({
     return colors;
   });
   const PathCSS = css`
-        stroke: ${pathColor};
+        stroke: ${colors[pathColor] || pathColor};
         stroke-width: ${STROKE};
         stroke-linecap: round;
         stroke-linejoin: round;
         /* &:hover {
             cursor: pointer;
-            stroke: ${pathColor};
+            stroke: ${colors[pathColor] || pathColor};
             stroke-linecap: round;
             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/Point.js

@@ -1,9 +1,10 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
+import { color as colors } from '../../../styles/colors';
 
 const Points = ({
   data,
@@ -23,16 +24,17 @@ const Points = ({
   pointsVisible,
   strokeWidth,
   onClick,
-  unitWidth
+  unitWidth,
+  pointHoverAlignment
 }) => {
   const PointCSS = css`
-        fill: ${pointsColor};
+        fill: ${colors[pointsColor] || pointsColor};
         stroke: ${pointsStrokeColor};
         stroke-width: ${strokeWidth};
         &:hover {
             cursor: pointer;
             fill: #fff;
-            stroke: ${pointsColor};
+            stroke: ${colors[pointsColor] || pointsColor};
             stroke-width: ${pointsStrokeHover};
         }
     `;
@@ -170,78 +172,69 @@ const Points = ({
       Width += 90;
     }
 
-    if (getX(point.x + unitWidth / 1.5) < 20) {
-      return jsx("g", {
-        id: `tooltipLine` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: rightTooltipPath(Width, 20, 6, 4),
-        fill: pointsColor,
-        stroke: pointsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-        }
-      }), jsx("text", {
-        x: x,
-        y: y,
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-
-    if (getX(point.x + unitWidth / 1.5) > viewBoxWidth) {
-      return jsx("g", {
-        id: `tooltipLine` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 1.5) - 4}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: leftTooltipPath(Width, 20, 6, 4),
-        fill: pointsColor,
-        stroke: pointsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-        }
-      }), jsx("text", {
-        x: x1,
-        y: y1,
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-
-    if (getY(point.quantity) > 10) {
-      return jsx("g", {
-        id: `tooltipLine` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) - 4})`
-      }, jsx("path", {
-        d: topTooltipPath(Width, 20, 6, 4),
-        fill: pointsColor,
-        stroke: pointsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-        }
-      }), jsx("text", {
-        y: "-23",
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-
-    return jsx("g", {
+    const toolTipRight = jsx("g", {
+      id: `tooltipLine` + i,
+      className: 'DGN-Tooltip-Bar',
+      style: {
+        display: 'none'
+      },
+      transform: `translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`
+    }, jsx("path", {
+      d: rightTooltipPath(Width, 20, 6, 4),
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
+      style: {
+        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
+      }
+    }), jsx("text", {
+      x: x,
+      y: y,
+      dy: "1em",
+      css: textChartCSS,
+      fill: "#fff"
+    }, point.quantity));
+    const toolTipLeft = jsx("g", {
+      id: `tooltipLine` + i,
+      className: 'DGN-Tooltip-Bar',
+      style: {
+        display: 'none'
+      },
+      transform: `translate(${getX(point.x + unitWidth / 1.5) - 4}, ${getY(point.quantity)})`
+    }, jsx("path", {
+      d: leftTooltipPath(Width, 20, 6, 4),
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
+      style: {
+        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
+      }
+    }), jsx("text", {
+      x: x1,
+      y: y1,
+      dy: "1em",
+      css: textChartCSS,
+      fill: "#fff"
+    }, point.quantity));
+    const toolTipTop = jsx("g", {
+      id: `tooltipLine` + i,
+      className: 'DGN-Tooltip-Bar',
+      style: {
+        display: 'none'
+      },
+      transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) - 4})`
+    }, jsx("path", {
+      d: topTooltipPath(Width, 20, 6, 4),
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
+      style: {
+        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
+      }
+    }), jsx("text", {
+      y: "-23",
+      dy: "1em",
+      css: textChartCSS,
+      fill: "#fff"
+    }, point.quantity));
+    const toolTipBottom = jsx("g", {
       id: `tooltipLine` + i,
       className: 'DGN-Tooltip-Bar',
       style: {
@@ -250,8 +243,8 @@ const Points = ({
       transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) + 4})`
     }, jsx("path", {
       d: bottomTooltipPath(Width, 20, 6, 4),
-      fill: pointsColor,
-      stroke: pointsColor,
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
       style: {
         filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
       }
@@ -261,6 +254,37 @@ 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;
+      }
+    } else {
+      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", {
@@ -332,7 +356,10 @@ Points.propTypes = {
   pointsVisible: PropTypes.bool,
 
   /** the unitWidth */
-  unitWidth: PropTypes.number
+  unitWidth: PropTypes.number,
+
+  /** the direction to display tootip */
+  pointHoverAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right'])
 };
 Points.defaultProps = {
   getX: x => x,

package/components/chart/line/index.js

@@ -1,17 +1,17 @@
 /** @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(({
+const LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelsVisible,
   labelsCharacterWidth,
   labelsCountY,
@@ -21,8 +21,9 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewBoxWidth,
   labelsOffsetX,
   labelsHeightX,
-  unitWidth,
+  // unitWidth,
   style,
+  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'];
@@ -41,7 +42,9 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const getMinX = () => {
-    return dataSource.length > 0 ? dataSource[0].x : 0;
+    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 = () => {
@@ -49,12 +52,16 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const getMaxX = () => {
-    return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 0;
+    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.length > 0 ? dataSource.reduce((max, point) => point.quantity > max ? point.quantity : max, dataSource[0].quantity) : 0;
+    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;
   };
 
@@ -94,13 +101,15 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   return jsx("svg", {
     id: id,
-    className: 'DGN-CUI-LineChart',
+    className: ['DGN-CUI-LineChart', className].join(' ').trim().replace(/\s+/g, ' '),
     viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
     style: {
       display: 'block',
       overflow: 'visible',
-      margin: `${getLabelsYWidth() * 2}`
-    }
+      margin: `${getLabelsYWidth() * 2}`,
+      ...style
+    },
+    ref: ref
   }, jsx(Axis, { ...props,
     ...commonProps
   }), jsx(Grid, { ...props,
@@ -121,7 +130,9 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...commonProps
   }));
 }));
-BarChart.defaultProps = {
+LineChart.defaultProps = {
+  style: {},
+  className: '',
   data: [],
   viewBoxHeight: 200,
   viewBoxWidth: 500,
@@ -130,7 +141,12 @@ BarChart.defaultProps = {
   ...Points.defaultProps,
   ...Grid.defaultProps
 };
-BarChart.propTypes = {
+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 */
@@ -154,7 +170,7 @@ BarChart.propTypes = {
   /** show data information when hovering in the area containing the column */
   pointsIsHoverOnZone: PropTypes.bool,
 
-  /** show or hiden point */
+  /** show or hidden point */
   pointsVisible: PropTypes.bool,
 
   /** change the inner color of the point button  */
@@ -172,11 +188,14 @@ BarChart.propTypes = {
   /** 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 */
+  /** 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,
   ...Labels.propTypes,
   ...Points.propTypes,
   ...Grid.propTypes
 };
-export default BarChart;
+export default LineChart;

package/components/form-control/checkbox/index.js

@@ -316,11 +316,11 @@ Checkbox.propTypes = {
   /** The function will run to return a true or false value of Radio Component */
   onChange: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+  /**
+   * ref methods
+   *
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
   ref: PropTypes.any
 };