diginet-core-ui 1.4.39 → 1.4.40

package/components/chart/bar/Axis.js

@@ -1,67 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from "prop-types";
-import { jsx } from '@emotion/core';
-const Axis = ({
-  axisColor,
-  axisVisible,
-  axisWidth,
-  getX,
-  getY,
-  maxX,
-  maxY,
-  minX,
-  minY,
-  unitWidth
-}) => {
-  // drawn Oxygen coordinate systems for width and height are entered or by default 
-  return axisVisible ? jsx("g", {
-    className: 'DGN-Axis-BarChart',
-    stroke: axisColor,
-    strokeWidth: axisWidth
-  }, jsx("line", {
-    x1: getX(minX),
-    y1: getY(minY),
-    x2: getX(maxX + unitWidth + 0.5),
-    y2: getY(minY)
-  }), jsx("line", {
-    x1: getX(minX),
-    y1: getY(minY),
-    x2: getX(minX),
-    y2: getY(maxY + 5)
-  })) : null;
-};
-Axis.defaultProps = {
-  axisColor: '#7F828E',
-  axisOpacity: 1,
-  axisVisible: true,
-  axisWidth: 0.5,
-  getX: x => x,
-  getY: quantity => quantity,
-  unitWidth: 1
-};
-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
-};
-export default Axis;

package/components/chart/bar/Bar.js

@@ -1,344 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-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";
-const Bars = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  // barsOpacity,
-  barsMargin,
-  barsColor,
-  hoverTooltip,
-  viewBoxWidth,
-  data,
-  onEnter,
-  onRemote,
-  getX,
-  getY,
-  minX,
-  minY,
-  unitWidth,
-  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));
-                }
-            `;
-  const textChartCSS = css`
-                text-anchor: middle;
-                ${typography.paragraph3};
-            `;
-  // 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;
-
-  // 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('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
-  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,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: rightTooltipPath(Width, 20, 6, 4),
-        fill: barsColor,
-        stroke: barsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))'
-        }
-      }), jsx("text", {
-        x: "23",
-        y: "-8",
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-    if (getX(point.x + unitWidth / 2) > viewBoxWidth) {
-      return jsx("g", {
-        id: `tooltip-bar` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: leftTooltipPath(Width, 20, 6, 4),
-        fill: barsColor,
-        stroke: barsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))'
-        }
-      }), jsx("text", {
-        x: "-23",
-        y: "-8",
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-    if (getY(point.quantity + 0.5) > 10) {
-      return jsx("g", {
-        id: `tooltip-bar` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: topTooltipPath(Width, 20, 6, 4),
-        fill: barsColor,
-        stroke: barsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))'
-        }
-      }), jsx("text", {
-        y: "-23",
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-    return jsx("g", {
-      id: `tooltip-bar` + i,
-      className: 'DGN-Tooltip-Bar',
-      style: {
-        display: 'none'
-      },
-      transform: `translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity)})`
-    }, jsx("path", {
-      d: bottomTooltipPath(Width, 20, 6, 4),
-      fill: barsColor,
-      stroke: barsColor,
-      style: {
-        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25))'
-      }
-    }), jsx("text", {
-      y: "10",
-      dy: "1em",
-      css: textChartCSS,
-      fill: "#fff"
-    }, point.quantity));
-  };
-
-  // Create function to display data
-  const getPlacementNotHover = (point, i) => {
-    return jsx("g", {
-      id: `tooltip-bar` + i,
-      className: 'DGN-Tooltip-Bar',
-      style: {
-        display: 'none'
-      },
-      transform: `translate(${getX(point.x + unitWidth / 2)}, ${getY(point.quantity + 0.5)})`
-    }, jsx("text", {
-      y: "-18",
-      dy: "1em",
-      css: textChartCSS,
-      fill: barsColor
-    }, point.quantity));
-  };
-  return hoverTooltip ? jsx("g", {
-    className: 'DGN-CUI-Bar',
-    ref: ref
-  }, data.map((point, i) => {
-    return jsx("g", {
-      key: i,
-      className: 'DGN-Bar' + i
-    }, jsx("rect", {
-      id: 'Bar' + i,
-      className: 'Bar',
-      ref: barChart,
-      css: barChartCSS,
-      fill: barsColor,
-      x: getX(point.x + BARS_MARGIN_DEFAULT),
-      y: getY(point.quantity + BARS_MARGIN_DEFAULT - 0.1),
-      stroke: 'none',
-      width: getX(barsWidth + minX),
-      height: round(getY(minY) - getY(point.quantity), 2),
-      onMouseEnter: e => MouseEnterTarget(e, i),
-      onMouseLeave: e => MouseLeaveTarget(e, i),
-      onClick: handleChange
-    }), getPlacement(point, i));
-  })) : jsx("g", {
-    className: 'DGN-CUI-Bar',
-    ref: ref
-  }, data.map((point, i) => {
-    return jsx("g", {
-      key: i,
-      className: 'DGN-Bar' + i
-    }, jsx("rect", {
-      className: 'Bar' + i,
-      css: barChartCSS,
-      fill: barsColor,
-      x: getX(point.x + BARS_MARGIN_DEFAULT),
-      y: getY(point.quantity + BARS_MARGIN_DEFAULT - 0.1),
-      stroke: 'none',
-      width: getX(barsWidth + minX),
-      height: round(getY(minY) - getY(point.quantity), 2),
-      onMouseEnter: e => MouseEnterTarget(e, i),
-      onMouseLeave: e => MouseLeaveTarget(e, i),
-      onClick: handleChange
-    }), getPlacementNotHover(point, i));
-  }));
-}));
-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
-};
-Bars.defaultProps = {
-  barsColor: '#0095FF',
-  barsMargin: 0.1,
-  barsOpacity: 1,
-  getX: x => x,
-  getY: value => value,
-  labelsHeightX: Labels.defaultProps.labelsHeightX,
-  labelsOffsetX: Labels.defaultProps.labelsOffsetX,
-  labelsOffsetY: Labels.defaultProps.labelsOffsetY,
-  unitWidth: 1,
-  hoverTooltip: true
-};
-export default Bars;

package/components/chart/bar/Grid.js

@@ -1,97 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from "prop-types";
-import { jsx } from '@emotion/core';
-const Grid = ({
-  getX,
-  getY,
-  gridColor,
-  GridLines,
-  gridWidth,
-  labelsCountY,
-  maxX,
-  maxY,
-  minX,
-  minY,
-  unitWidth
-}) => {
-  let gridX = [];
-  let gridY = [];
-  for (let i = minX; i <= maxX + unitWidth; i++) {
-    gridX.push(jsx("line", {
-      key: i,
-      x1: getX(i),
-      y1: getY(minY),
-      x2: getX(i),
-      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,
-      x1: getX(minX),
-      y1: getY(i),
-      x2: getX(maxX + unitWidth + 0.5),
-      y2: getY(i)
-    }));
-  }
-  if (GridLines === 'full') {
-    return jsx("g", {
-      className: 'DGN-Grid-BarChart',
-      stroke: gridColor,
-      strokeWidth: gridWidth
-    }, gridX, gridY);
-  }
-  if (GridLines === 'horizontal') {
-    return jsx("g", {
-      className: 'DGN-Grid-BarChart',
-      stroke: gridColor,
-      strokeWidth: gridWidth
-    }, gridY);
-  }
-  if (GridLines === 'none') {
-    return null;
-  } else {
-    return jsx("g", {
-      className: 'DGN-Grid-BarChart',
-      stroke: gridColor,
-      strokeWidth: gridWidth
-    }, 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
-};
-Grid.defaultProps = {
-  getX: x => x,
-  getY: y => y,
-  gridColor: 'rgba(127, 130, 142, 0.15)',
-  GridLines: 'full',
-  gridVisible: false,
-  gridWidth: 0.5,
-  labelsCountY: 5,
-  unitWidth: 1
-};
-export default Grid;

package/components/chart/bar/Labels.js

@@ -1,162 +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,
-  viewBoxWidth,
-  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;
-                  cursor: pointer;
-                  display: inline-block;
-                  word-break: break-word;
-              `;
-  const TextCSS = css`
-        ${typography.paragraph3};
-        fill: ${getProp(colors, 'system/rest')};
-        cursor: 'pointer';
-    `;
-  if (labelsVisible) {
-    let xLabels;
-    let yLabels;
-    let tile = 4;
-    let tile2 = 9;
-    const TiLe = () => {
-      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 / 2),
-      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-BarChart'
-    }, xLabels && jsx("g", {
-      className: 'DGN-AxisX',
-      css: labelContainerCSS
-    }, xLabels), yLabels && jsx("g", {
-      className: '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;