diginet-core-ui 1.3.24

package/components/chart/line/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-LineChart',
+    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(minX),
+    x2: getX(minX),
+    y2: getY(maxY + 10)
+  })) : null;
+};
+
+Axis.defaultProps = {
+  axisColor: '#7F828E',
+  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/line/Grid.js

@@ -0,0 +1,115 @@
+/** @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; i++) {
+    gridX.push(jsx("line", {
+      key: i,
+      x1: getX(i + unitWidth / 1.5),
+      y1: getY(minY),
+      x2: getX(i + unitWidth / 1.5),
+      y2: getY(maxY + 10)
+    }));
+  }
+
+  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-LineChart',
+      stroke: gridColor,
+      strokeWidth: gridWidth
+    }, gridX, gridY);
+  }
+
+  if (GridLines === 'horizontal') {
+    return jsx("g", {
+      className: 'DGN-Grid-LineChart',
+      stroke: gridColor,
+      strokeWidth: gridWidth
+    }, gridY);
+  }
+
+  if (GridLines === 'none') {
+    return null;
+  } else {
+    return jsx("g", {
+      className: 'DGN-Grid-LineChart',
+      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 Line*/
+  gridColor: PropTypes.string,
+
+  /** change  Line grid display style ['full' , 'horizontal', 'none'], default: 'full'*/
+  GridLines: PropTypes.string,
+
+  /** hiden or  show grid Line*/
+  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/line/Labels.js

@@ -0,0 +1,172 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import { jsx, css } from '@emotion/core';
+import theme from '../../../theme/settings';
+
+const Labels = ({
+  getX,
+  getY,
+  data,
+  labelsColor,
+  labelsCountY,
+  labelsFormatX,
+  labelsFormatY,
+  labelsHeightX,
+  labelsOffsetX,
+  labelStyle,
+  labelsOffsetY,
+  labelsVisible,
+  maxY,
+  minX,
+  unitWidth
+}) => {
+  const FONT_SIZE = 12;
+  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: ${theme.colors.secondary};
+        text-anchor: start;
+        font-size: ${FONT_SIZE}px;
+        font-family: ${theme.typography.fontFamily};
+        text-transform: capitalize;
+        cursor: pointer;
+        display: inline-block;
+        transform-box: fill-box;
+        transform: rotateZ(45deg);
+    ` : css`
+        color: ${theme.colors.secondary};
+        text-anchor: middle;
+        font-size: ${FONT_SIZE}px;
+        font-family: ${theme.typography.fontFamily};
+        text-transform: capitalize;
+        display: inline-block;
+        word-break: break-word;
+    `;
+
+  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 / 1.5),
+      y: getY(0) + labelsHeightX
+    }, labelsFormatX(point.name))) : data.map((point, x) => jsx("foreignObject", {
+      key: x,
+      css: Label,
+      fill: labelsColor,
+      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",
+      style: {
+        fill: theme.colors.secondary,
+        fontSize: FONT_SIZE,
+        fontFamily: theme.typography.fontFamily
+      }
+    }, 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: theme.colors.secondary,
+  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

@@ -0,0 +1,163 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import { jsx, css } from '@emotion/core';
+
+const Path = ({
+  data,
+  getX,
+  getY,
+  Smooth,
+  PathVisible,
+  viewBoxWidth,
+  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: ${pathColor};
+        stroke-width: ${STROKE};
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        /* &:hover {
+            cursor: pointer;
+            stroke: ${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;