diginet-core-ui 1.3.24

package/components/chart/line-v2/Point.js

@@ -0,0 +1,354 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { useState } from 'react';
+import PropTypes from "prop-types";
+import { jsx, css } from '@emotion/core';
+import theme from '../../../theme/settings';
+import { randomString } from '../../../utils';
+
+const Points = ({
+  data,
+  getX,
+  getY,
+  maxY,
+  minX,
+  minY,
+  pointsColor,
+  pointsIsHoverOnZone,
+  onEnter,
+  onRemote,
+  viewBoxWidth,
+  pointsRadius,
+  pointsStrokeHover,
+  pointsStrokeColor,
+  pointsVisible,
+  strokeWidth,
+  onClick,
+  unitWidth
+}) => {
+  const [id] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const PointCSS = css`
+        fill: ${pointsColor};
+        stroke: ${pointsStrokeColor};
+        stroke-width: ${strokeWidth};
+        &:hover {
+            cursor: pointer;
+            fill: #fff;
+            stroke: ${pointsColor};
+            stroke-width: ${pointsStrokeHover};
+        }
+    `;
+  const textChartCSS = css`
+        text-anchor: middle;
+        font-size: 12px;
+        font-family: ${theme.typography.fontFamily};
+    `; // 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;
+    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;
+    }
+
+    if (getX(point.x + unitWidth / 1.5) < 20) {
+      return jsx("g", {
+        id: `${id}` + 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: `${id}` + 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: `${id}` + 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", {
+      id: `${id}` + 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: pointsColor,
+      stroke: 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));
+  };
+
+  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
+};
+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-v2/Title.js

@@ -0,0 +1,56 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import { jsx } from '@emotion/core';
+import Typography from '../../typography';
+
+const Title = ({
+  position,
+  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;

package/components/chart/line-v2/index.js

@@ -0,0 +1,174 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+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 Path from './Path';
+import { randomString } from '../../../utils';
+const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  labelsVisible,
+  labelsCharacterWidth,
+  labelsCountY,
+  data,
+  viewBoxHeight,
+  labelsOffsetY,
+  viewBoxWidth,
+  labelsOffsetX,
+  labelsHeightX,
+  unitWidth,
+  style,
+  ...props
+}, ref) => {
+  const colors = ['#FFD600', '#FFA800', '#FF7A00', '#FF0000', '#B61414', '#8FFF00', '#629000', '#019A5A', '#00C875', '#00FFD1', '#4200FF', '#0075FF', '#0095FF', '#00C2FF', '#00E0FF', '#8F00FF', '#BD00FF', '#FA00FF', '#FF00B8', '#FF3D71'];
+  const dataSource = data.map((item, i) => ({ ...item,
+    x: i
+  })); // console.log(dataSource);
+
+  const UNIT_WIDTH = 1;
+  const id = 'DGN-CUI-LineChart-' + 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 getMinY = () => {
+    return 0;
+  };
+
+  const getMaxX = () => {
+    return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 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,
+    className: 'DGN-CUI-LineChart',
+    viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
+    style: {
+      display: 'block',
+      overflow: 'visible',
+      margin: `${getLabelsYWidth() * 2}`
+    }
+  }, jsx(Axis, _extends({}, props, commonProps)), jsx(Grid, _extends({}, props, commonProps)), jsx(Labels, _extends({
+    data: dataSource
+  }, props, commonProps)), jsx(Path, _extends({
+    data: dataSource,
+    viewBoxWidth: viewBoxWidth
+  }, props, commonProps)), jsx(Points, _extends({
+    data: dataSource,
+    viewBoxWidth: viewBoxWidth
+  }, props, commonProps)));
+}));
+BarChart.defaultProps = {
+  data: [],
+  viewBoxHeight: 200,
+  viewBoxWidth: 500,
+  ...Axis.defaultProps,
+  ...Labels.defaultProps,
+  ...Points.defaultProps,
+  ...Grid.defaultProps
+};
+BarChart.propTypes = {
+  data: PropTypes.array.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,
+
+  /** the axisColor change color */
+  axisColor: PropTypes.string,
+
+  /** the axisVisible Hide or show the Axis axis */
+  axisVisible: PropTypes.bool,
+
+  /** change style show of label ['', 'italic'], default: 'italic' */
+  labelStyle: PropTypes.string,
+
+  /** change  Line grid display style ['full' , 'horizontal', 'none'], default: 'full'*/
+  GridLines: 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 radius of the point is created */
+  pointsRadius: PropTypes.number,
+
+  /** the thickness of the line to be drawn */
+  STROKE: PropTypes.number,
+
+  /** shows the line to be drawn */
+  PathVisible: PropTypes.bool,
+
+  /** 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 */
+  Smooth: PropTypes.bool,
+  ...Axis.propTypes,
+  ...Labels.propTypes,
+  ...Points.propTypes,
+  ...Grid.propTypes
+};
+export default BarChart;