diginet-core-ui 1.3.24

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

@@ -0,0 +1,79 @@
+/** @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-v2/Bar.js

@@ -0,0 +1,374 @@
+/** @jsxRuntime classic */
+
+/** @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 theme from '../../../theme/settings';
+import { randomString } from '../../../utils';
+const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  barsOpacity,
+  barsMargin,
+  barsColor,
+  hoverTooltip,
+  viewBoxWidth,
+  data,
+  onEnter,
+  onRemote,
+  getX,
+  getY,
+  minX,
+  minY,
+  unitWidth,
+  onClick,
+  ...props
+}, ref) => {
+  const [id] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  })); // 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 */
+        }
+    `;
+  const textChartCSS = css`
+        text-anchor: middle;
+        font-size: 12px;
+        font-family: ${theme.typography.fontFamily};
+    `; // 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(`${id}` + i).style.display = 'block';
+  };
+
+  const MouseLeaveTarget = (e, i) => {
+    if (onRemote) onRemote(e, i);
+    document.getElementById(`${id}` + 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: `${id}` + 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: `${id}` + 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: `${id}` + 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: `${id}` + 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: `${id}` + 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'
+  }, 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'
+  }, 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;