diginet-core-ui 1.4.39 → 1.4.40

package/components/chart/line/Labels.js

@@ -1,160 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { useTheme } from "../../../theme";
-import { getProp } from "../../../utils";
-const Labels = ({
-  getX,
-  getY,
-  data,
-  labelsColor: labelsColorProp,
-  labelsCountY,
-  labelsFormatX,
-  labelsFormatY,
-  labelsHeightX,
-  labelsOffsetX,
-  labelStyle,
-  labelsOffsetY,
-  labelsVisible,
-  maxY,
-  minX,
-  unitWidth
-}) => {
-  const theme = useTheme();
-  const {
-    colors,
-    typography
-  } = theme;
-  const labelsColor = getProp(colors, labelsColorProp, labelsColorProp);
-  const labelContainerCSS = css`
-        transform: translate(0, ${labelsOffsetX}px);
-    `;
-  const Label = css`
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    `;
-  const LabelCSS = labelStyle === 'italic' ? css`
-                  fill: ${getProp(colors, 'system/rest')};
-                  text-anchor: start;
-                  ${typography.paragraph3};
-                  text-transform: capitalize;
-                  cursor: pointer;
-                  display: inline-block;
-                  transform-box: fill-box;
-                  transform: rotateZ(45deg);
-              ` : css`
-                  color: ${getProp(colors, 'system/rest')};
-                  text-anchor: middle;
-                  ${typography.paragraph3};
-                  text-transform: capitalize;
-                  display: inline-block;
-                  word-break: break-word;
-              `;
-  const TextCSS = css`
-        ${typography.paragraph3};
-        fill: ${getProp(colors, 'system/rest')};
-    `;
-  if (labelsVisible) {
-    let xLabels;
-    let yLabels;
-    let tile = 4;
-    let tile2 = 9;
-    const TiLe = () => {
-      // eslint-disable-next-line no-undef
-      if (viewBoxWidth >= 800) {
-        return tile;
-      } else {
-        return tile2;
-      }
-    };
-    xLabels = labelStyle === 'italic' ? data.map((point, x) => jsx("text", {
-      key: x,
-      css: LabelCSS,
-      fill: labelsColor,
-      x: getX(point.x + unitWidth / 1.5),
-      y: getY(0) + labelsHeightX
-    }, labelsFormatX(point.name))) : data.map((point, x) => jsx("foreignObject", {
-      key: x,
-      css: Label,
-      x: getX(point.x + unitWidth / TiLe()),
-      y: getY(0) + labelsHeightX,
-      width: "40",
-      height: "80"
-    }, jsx("span", {
-      css: LabelCSS
-    }, 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,
-      x: getX(minX),
-      y: getY(quantity) + labelsHeightX / 3,
-      transform: `translate(-${labelsOffsetY}, 0)`,
-      textAnchor: "end",
-      css: TextCSS
-    }, labelsFormatY(quantity)));
-    return jsx("g", {
-      className: 'DGN-Labels-LineChart'
-    }, xLabels && jsx("g", {
-      id: 'DGN-AxisX',
-      css: labelContainerCSS
-    }, xLabels), yLabels && jsx("g", {
-      id: 'DGN-AxisY'
-    }, yLabels));
-  } else {
-    return null;
-  }
-};
-Labels.defaultProps = {
-  getX: x => x,
-  getY: quantity => quantity,
-  labelsCharacterWidth: 10,
-  labelsColor: 'system/rest',
-  labelsCountY: 5,
-  labelsFormatX: label => label,
-  labelsFormatY: quantity => quantity,
-  labelsHeightX: 5,
-  labelsOffsetX: 10,
-  labelsOffsetY: 10,
-  labelsStepX: 1,
-  labelsVisible: true,
-  unitWidth: 1,
-  labelStyle: 'italic'
-};
-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,
-  labelsFormatX: PropTypes.func,
-  labelsFormatY: PropTypes.func,
-  labelsHeightX: PropTypes.number,
-  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
-};
-export default Labels;

package/components/chart/line/Path.js

@@ -1,154 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { getColor } from "../../../styles/utils";
-const Path = ({
-  data,
-  getX,
-  getY,
-  Smooth,
-  PathVisible,
-  STROKE,
-  STROKEHover,
-  pathColor,
-  unitWidth
-}) => {
-  const point = data.map(element => {
-    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 PathCSS = css`
-        stroke: ${getColor(pathColor)};
-        stroke-width: ${STROKE};
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        /* &:hover {
-            cursor: pointer;
-            stroke: ${getColor(pathColor)};
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: ${STROKEHover};
-        } */
-    `;
-
-  // 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
-  const line = (pointA, pointB) => {
-    const lengthX = pointB[0] - pointA[0];
-    const lengthY = pointB[1] - pointA[1];
-    const Balance = 0.005 * Math.PI;
-    const Re = 0.38 * Math.PI;
-    let angle = Math.atan2(lengthY, lengthX);
-    if (angle < -0.32 * Math.PI) {
-      angle += Re; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
-    }
-    if (angle > 0.16 * Math.PI) {
-      angle -= Balance;
-    }
-
-    // console.log(angle);
-
-    return {
-      length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-      angle
-    };
-  };
-
-  // 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
-  //     - reverse (boolean, optional): sets the direction
-  // O:  - (array) [x,y]: a tuple of coordinates
-  const controlPoint = (current, previous, next, reverse) => {
-    // When 'current' is the first or last point of the array
-    // 'previous' or 'next' don't exist.
-    // Replace with 'current'
-    const c = current;
-    const p = previous ? previous : c;
-    const n = next ? next : c;
-    // The smoothing ratio
-    const smoothing = 0.15;
-    // Properties of the opposed-line
-    const o = line(p, n);
-    // If is end-control-point, add PI to the angle to go backward
-    const rev = reverse ? Math.PI : 0;
-    // The control point position is relative to the current point
-    const x = c[0] + Math.cos(o.angle + rev) * o.length * smoothing;
-    const y = c[1] + Math.sin(o.angle * 0.095 + rev) * o.length * smoothing;
-    return [x, y];
-  };
-  const svgPathRender = point => {
-    const d = point.reduce((acc, e, i, a) => {
-      if (i > 0) {
-        const cs = controlPoint(a[i - 1], a[i - 2], e);
-        const ce = controlPoint(e, a[i - 1], a[i + 1], true);
-        return `${acc} C ${cs[0]},${cs[1]} ${ce[0]},${ce[1]} ${e[0]},${e[1]}`;
-      } else {
-        return `${acc} M ${e[0]},${e[1]}`;
-      }
-    }, '');
-    return jsx("path", {
-      d: d,
-      css: PathCSS,
-      fill: 'none'
-    });
-  };
-  const command = point => `L ${point[0]} ${point[1]} `;
-  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)}`, '');
-    return jsx("path", {
-      d: d,
-      css: PathCSS,
-      fill: 'none'
-    });
-  };
-  return PathVisible ? jsx("g", {
-    className: 'DGN-Path-LineChart'
-  }, Smooth ? svgPathRender(point) : svgPath(point)) : null;
-};
-Path.defaultProps = {
-  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,
-  /** 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,
-  /** shows the line to be drawn */
-  PathVisible: PropTypes.bool,
-  /** show or hiden the line to be drawn smooth */
-  Smooth: PropTypes.bool,
-  /** the thickness of the line to be drawn */
-  STROKE: PropTypes.number,
-  /** the unitWidth */
-  unitWidth: PropTypes.number
-};
-Path.defaultProps = {
-  unitWidth: 1,
-  PathVisible: true,
-  pathColor: '#0095FF',
-  Smooth: false,
-  STROKE: 2,
-  STROKEHover: 3
-};
-export default Path;

package/components/chart/line/Point.js

@@ -1,343 +0,0 @@
-/* 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 { fill } from "../../../styles/general";
-import { getColor } from "../../../styles/utils";
-const Points = ({
-  data,
-  getX,
-  getY,
-  maxY,
-  minX,
-  minY,
-  pointsColor,
-  pointsIsHoverOnZone,
-  onEnter,
-  onRemote,
-  viewBoxWidth,
-  pointsRadius,
-  pointsStrokeHover,
-  pointsStrokeColor,
-  pointsVisible,
-  strokeWidth,
-  onClick,
-  unitWidth,
-  pointHoverAlignment
-}) => {
-  const PointCSS = css`
-        ${fill(pointsColor)};
-        stroke: ${pointsStrokeColor};
-        stroke-width: ${strokeWidth};
-        &:hover {
-            cursor: pointer;
-            fill: #fff;
-            stroke: ${getColor(pointsColor)};
-            stroke-width: ${pointsStrokeHover};
-        }
-    `;
-  const textChartCSS = css`
-        text-anchor: middle;
-        ${typography.paragraph3};
-    `;
-
-  // create drawing function tooltips in different positions
-  const topTooltipPath = (width, height, offset, radius) => {
-    const left = -width / 2;
-    const right = width / 2;
-    const top = -offset - height;
-    const bottom = -offset;
-    return `M 0,0
-            L ${-offset},${bottom} 
-            H ${left + radius}
-            Q ${left},${bottom} ${left},${bottom - radius}  
-            V ${top + radius}   
-            Q ${left},${top} ${left + radius},${top}
-            H ${right - radius}
-            Q ${right},${top} ${right},${top + radius}
-            V ${bottom - radius}
-            Q ${right},${bottom} ${right - radius},${bottom}
-            H ${offset} 
-            L 0,0 z`;
-  };
-  const bottomTooltipPath = (width, height, offset, radius) => {
-    const left = -width / 2;
-    const right = width / 2;
-    const bottom = offset + height;
-    const top = offset;
-    return `M 0,0 
-            L ${-offset},${top} 
-            H ${left + radius}
-            Q ${left},${top} ${left},${top + radius}  
-            V ${bottom - radius}   
-            Q ${left},${bottom} ${left + radius},${bottom}
-            H ${right - radius}
-            Q ${right},${bottom} ${right},${bottom - radius}
-            V ${top + radius}
-            Q ${right},${top} ${right - radius},${top}
-            H ${offset} 
-            L 0,0 z`;
-  };
-  const leftTooltipPath = (width, height, offset, radius) => {
-    const left = -offset - width;
-    const right = -offset;
-    const top = -height / 2;
-    const bottom = height / 2;
-    return `M 0,0 
-            L ${right},${-offset} 
-            V ${top + radius}
-            Q ${right},${top} ${right - radius},${top}  
-            H ${left + radius}   
-            Q ${left},${top} ${left},${top + radius}
-            V ${bottom - radius}
-            Q ${left},${bottom} ${left + radius},${bottom}
-            H ${right - radius}
-            Q ${right},${bottom} ${right},${bottom - radius}
-            V ${offset} 
-            L 0,0 z`;
-  };
-  const rightTooltipPath = (width, height, offset, radius) => {
-    const left = offset;
-    const right = offset + width;
-    const top = -height / 2;
-    const bottom = height / 2;
-    return `M 0,0 
-            L ${left},${-offset} 
-            V ${top + radius}
-            Q ${left},${top} ${left + radius},${top}  
-            H ${right - radius}   
-            Q ${right},${top} ${right},${top + radius}
-            V ${bottom - radius}
-            Q ${right},${bottom} ${right - radius},${bottom}
-            H ${left + radius}
-            Q ${left},${bottom} ${left},${bottom - radius}
-            V ${offset} 
-            L 0,0 z`;
-  };
-
-  // 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
-  const getPlacement = (point, i) => {
-    // convert number -> string
-    const h = `${point.quantity}`;
-    var Width = 0;
-    var x = 0;
-    var y = 0;
-    var x1 = 0;
-    var y1 = 0;
-    if (h.length == 2 || h.length == 1 || h.length == 3) {
-      Width += 35;
-      x += 23;
-      y += -8;
-      x1 += -23;
-      y1 += -8;
-    }
-    if (h.length == 4 || h.length == 5) {
-      Width += 40;
-      x += 26;
-      y += -8;
-      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',
-      style: {
-        display: 'none'
-      },
-      transform: `translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`
-    }, jsx("path", {
-      d: rightTooltipPath(Width, 20, 6, 4),
-      fill: getColor(pointsColor),
-      stroke: getColor(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: getColor(pointsColor),
-      stroke: getColor(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: getColor(pointsColor),
-      stroke: getColor(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: {
-        display: 'none'
-      },
-      transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) + 4})`
-    }, jsx("path", {
-      d: bottomTooltipPath(Width, 20, 6, 4),
-      fill: getColor(pointsColor),
-      stroke: getColor(pointsColor),
-      style: {
-        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-      }
-    }), jsx("text", {
-      y: "10",
-      dy: "1em",
-      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", {
-    className: 'DGN-Point-LineChart'
-  }, data.map((point, i) => {
-    return jsx("g", {
-      key: i,
-      className: 'DGN-Point' + i
-    }, jsx("circle", {
-      key: i,
-      css: PointCSS,
-      r: point.active ? pointsRadius * 1.2 : pointsRadius,
-      cx: getX(point.x + unitWidth / 1.5),
-      cy: getY(point.quantity),
-      onMouseEnter: e => MouseEnterTarget(e, i),
-      onMouseLeave: e => MouseLeaveTarget(e, i),
-      onClick: handleChange
-    }), getPlacement(point, i));
-  }), pointsIsHoverOnZone && data.map((point, i) => {
-    return jsx("g", {
-      key: i,
-      className: 'DGN-Point' + i
-    }, jsx("rect", {
-      key: i,
-      x: getX(point.x > minX ? (data[i].x + data[i - 1].x) / 2 : minX),
-      y: getY(maxY),
-      fill: 'transparent',
-      width: getX(1),
-      height: getY(minY),
-      onMouseEnter: e => MouseEnterTarget(e, i),
-      onMouseLeave: e => MouseLeaveTarget(e, i),
-      onClick: handleChange
-    }), 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'])
-};
-Points.defaultProps = {
-  getX: x => x,
-  getY: quantity => quantity,
-  pointsColor: '#0095FF',
-  pointsIsHoverOnZone: false,
-  pointsVisible: false,
-  unitWidth: 1,
-  pointsRadius: 3,
-  pointsStrokeHover: 2
-};
-export default Points;

package/components/chart/line/Title.js

@@ -1,52 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from 'prop-types';
-import { jsx } from '@emotion/core';
-import Typography from "../../typography";
-const Title = ({
-  data
-}) => {
-  return jsx("g", {
-    className: 'DGN-Title-LineChart'
-  }, jsx("foreignObject", {
-    x: 0,
-    y: 230,
-    width: "100%",
-    height: "60px"
-  }, jsx("ul", {
-    style: {
-      position: 'fixed',
-      maxHeight: '175px',
-      justifyContent: 'center',
-      display: 'flex'
-    }
-  }, data.dataset.map((d, i) => {
-    return jsx("li", {
-      key: i,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, jsx("span", {
-      style: {
-        backgroundColor: d.borderColor,
-        borderRadius: '100%',
-        width: '6px',
-        height: '6px'
-      }
-    }), jsx(Typography, {
-      type: 'h5',
-      style: {
-        margin: '5px 5px'
-      },
-      color: d.borderColor
-    }, d.label));
-  }))));
-};
-Title.defaultProps = {
-  data: []
-};
-Title.propTypes = {
-  data: PropTypes.object.isRequired
-};
-export default Title;