diginet-core-ui 1.4.39 → 1.4.40

package/components/chart/bar/Points.js

@@ -1,94 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from "prop-types";
-import { jsx } from '@emotion/core';
-const Points = ({
-  data,
-  getX,
-  getY,
-  maxY,
-  minX,
-  minY,
-  pointsColor,
-  pointsIsHoverOnZone,
-  onHover,
-  pointsRadius,
-  pointsStrokeColor,
-  pointsStrokeWidth,
-  pointsVisible,
-  unitWidth
-}) => {
-  return pointsVisible ? jsx("g", {
-    className: 'DGN-Point-BarChart'
-  }, data.map((point, i) => {
-    return jsx("circle", {
-      key: i,
-      r: point.active ? pointsRadius * 1.2 : pointsRadius,
-      cx: getX(point.x + unitWidth / 2),
-      cy: getY(point.quantity),
-      onMouseEnter: e => onHover(point, e),
-      onMouseLeave: () => onHover(null, null),
-      fill: pointsColor,
-      stroke: pointsStrokeColor,
-      strokeWidth: pointsStrokeWidth
-    });
-  }), pointsIsHoverOnZone && data.map((point, i) => {
-    return 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 => onHover(point, e),
-      onMouseLeave: () => onHover(null, null)
-    }, jsx("title", null, point.name, " : ", point.quantity));
-  })) : null;
-};
-Points.propTypes = {
-  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 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,
-  /** function change event hover */
-  onHover: PropTypes.func,
-  /** change the radius of the point is created */
-  pointsRadius: PropTypes.number,
-  /** change the border color of the point button  */
-  pointsStrokeColor: PropTypes.string,
-  /** the thickness of the inner core point */
-  pointsStrokeWidth: PropTypes.number,
-  /** show or hiden point */
-  pointsVisible: PropTypes.bool,
-  /** the unitWidth */
-  unitWidth: PropTypes.number
-};
-Points.defaultProps = {
-  getX: x => x,
-  getY: quantity => quantity,
-  pointsColor: '#fff',
-  pointsIsHoverOnZone: false,
-  onHover: () => {},
-  pointsRadius: 3,
-  pointsStrokeColor: '#111d5e',
-  pointsStrokeWidth: 1,
-  pointsVisible: false,
-  unitWidth: 1
-};
-export default Points;

package/components/chart/bar/index.js

@@ -1,161 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from 'prop-types';
-import { memo, forwardRef } from 'react';
-import { jsx } from '@emotion/core';
-import Axis from "./Axis";
-import Points from "./Points";
-import Labels from "./Labels";
-import Grid from "./Grid";
-import Bars from "./Bar";
-import { randomString } from "../../../utils";
-const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  labelsVisible,
-  labelsCharacterWidth,
-  labelsCountY,
-  data,
-  viewBoxHeight,
-  labelsOffsetY,
-  viewBoxWidth,
-  labelsOffsetX,
-  labelsHeightX,
-  ...props
-}, ref) => {
-  const dataSource = data.map((item, i) => ({
-    ...item,
-    x: i
-  }));
-  const UNIT_WIDTH = 1;
-  const id = 'DGN-CUI-BarChart-' + randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  });
-  const round = n => {
-    return Math.round(n * 100) / 100;
-  };
-  const getMinX = () => {
-    return dataSource.length > 0 ? dataSource[0].x : 0;
-  };
-  const getMaxX = () => {
-    return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 0;
-  };
-  const getMinY = () => {
-    return 0;
-  };
-  const getMaxY = () => {
-    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;
-    return maxY ? Math.ceil(maxY / yStep) * yStep : yStep;
-  };
-  const getSvgX = x => {
-    const minX = getMinX();
-    const maxX = getMaxX();
-    const paddingLeft = getLabelsYWidth();
-    return round((x - minX) / (maxX + 1 - minX) * (Math.abs(viewBoxWidth) - paddingLeft));
-  };
-  const getSvgY = y => {
-    const paddingBottom = labelsVisible ? labelsHeightX + labelsOffsetX : 0;
-    const height = Math.abs(viewBoxHeight) - paddingBottom;
-    const maxY = getMaxY();
-    return round(height - y / maxY * height);
-  };
-  const getLabelsYWidth = () => {
-    const maxY = getMaxY();
-    return labelsVisible ? maxY.toString().length * labelsCharacterWidth + labelsOffsetY : 0;
-  };
-  const minX = getMinX();
-  const maxX = getMaxX();
-  const maxY = getMaxY();
-  const minY = getMinY();
-  const commonProps = {
-    getX: getSvgX.bind(),
-    getY: getSvgY.bind(),
-    maxX: maxX,
-    maxY: maxY,
-    minX: minX,
-    minY: minY,
-    round: round,
-    labelsWidthY: getLabelsYWidth(),
-    unitWidth: UNIT_WIDTH
-  };
-  return jsx("svg", {
-    id: id,
-    ref: ref,
-    viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
-    style: {
-      display: 'block',
-      overflow: 'visible',
-      margin: `${getLabelsYWidth() * 2}`
-    }
-  }, jsx(Axis, {
-    ...props,
-    ...commonProps
-  }), jsx(Grid, {
-    ...props,
-    ...commonProps
-  }), jsx(Bars, {
-    data: dataSource,
-    viewBoxWidth: viewBoxWidth,
-    ...props,
-    ...commonProps
-  }), jsx(Labels, {
-    data: dataSource,
-    viewBoxWidth: viewBoxWidth,
-    ...props,
-    ...commonProps
-  }), jsx(Points, {
-    data: dataSource,
-    ...props,
-    ...commonProps
-  }));
-}));
-BarChart.defaultProps = {
-  data: [],
-  viewBoxHeight: 200,
-  viewBoxWidth: 500,
-  ...Bars.defaultProps,
-  ...Axis.defaultProps,
-  ...Grid.defaultProps,
-  ...Points.defaultProps,
-  ...Labels.defaultProps
-};
-BarChart.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    quantity: PropTypes.number
-  })).isRequired,
-  /** drawn Ratio of viewBoxHeight entered by user, default is: 200px */
-  viewBoxHeight: PropTypes.number,
-  /** drawn Ratio of viewBoxWidth entered by user, default is: 500px */
-  viewBoxWidth: PropTypes.number,
-  /** change color of Bar in BarChart */
-  barsColor: PropTypes.string,
-  /** change ColumB grid display style ['full' , 'horizontal', 'none']*/
-  GridLines: PropTypes.string,
-  //** change style show of label (default, italic) */
-  labelStyle: PropTypes.string,
-  /** the axisVisible Hide or show the Axis axis */
-  axisVisible: PropTypes.bool,
-  /** the axisColor change color */
-  axisColor: PropTypes.string,
-  /** change color of grid Columb*/
-  gridColor: PropTypes.string,
-  /** show data information when hovering in the area containing the column */
-  pointsIsHoverOnZone: PropTypes.bool,
-  /** show or hiden point */
-  pointsVisible: PropTypes.bool,
-  /** change the inner color of the point button */
-  pointsColor: PropTypes.string,
-  /** change the border color of the point button  */
-  pointsStrokeColor: PropTypes.string,
-  /** the thickness of the inner core point */
-  pointsStrokeWidth: PropTypes.number,
-  /** change the radius of the point is created */
-  pointsRadius: PropTypes.number,
-  ...Bars.propTypes,
-  ...Grid.propTypes,
-  ...Axis.propTypes,
-  ...Points.propTypes,
-  ...Labels.propTypes
-};
-export default BarChart;

package/components/chart/bar-v2/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-v2/Bar.js

@@ -1,354 +0,0 @@
-/** @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 { randomString } from "../../../utils";
-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) => {
-  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;
-                    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
-
-  // 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',
-    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;