diginet-core-ui 1.4.39 → 1.4.40

package/components/chart/line/index.js

@@ -1,199 +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 Labels from "./Labels";
-import Grid from "./Grid";
-import Points from "./Point";
-// import Title from './Title';
-import Path from "./Path";
-import { randomString } from "../../../utils";
-const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  labelsVisible,
-  labelsCharacterWidth,
-  labelsCountY,
-  data,
-  viewBoxHeight,
-  labelsOffsetY,
-  viewBoxWidth,
-  labelsOffsetX,
-  labelsHeightX,
-  // unitWidth,
-  style,
-  className,
-  ...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 = () => {
-    var _dataSource$;
-    return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.x : 0;
-  };
-  const getMinY = () => {
-    return 0;
-  };
-  const getMaxX = () => {
-    var _dataSource;
-    return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? (_dataSource = dataSource[(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) - 1]) === null || _dataSource === void 0 ? void 0 : _dataSource.x : 0;
-  };
-  const getMaxY = () => {
-    var _dataSource$2;
-    const yStep = labelsCountY > 0 ? labelsCountY : 1;
-    const maxY = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? dataSource.reduce((max, point) => point.quantity > max ? point.quantity : max, (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2.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', className].join(' ').trim().replace(/\s+/g, ' '),
-    viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
-    style: {
-      display: 'block',
-      overflow: 'visible',
-      margin: `${getLabelsYWidth() * 2}`,
-      ...style
-    },
-    ref: ref
-  }, jsx(Axis, {
-    ...props,
-    ...commonProps
-  }), jsx(Grid, {
-    ...props,
-    ...commonProps
-  }), jsx(Labels, {
-    data: dataSource,
-    ...props,
-    ...commonProps
-  }), jsx(Path, {
-    data: dataSource,
-    viewBoxWidth: viewBoxWidth,
-    ...props,
-    ...commonProps
-  }), jsx(Points, {
-    data: dataSource,
-    viewBoxWidth: viewBoxWidth,
-    ...props,
-    ...commonProps
-  }));
-}));
-LineChart.defaultProps = {
-  style: {},
-  className: '',
-  data: [],
-  viewBoxHeight: 200,
-  viewBoxWidth: 500,
-  ...Axis.defaultProps,
-  ...Labels.defaultProps,
-  ...Points.defaultProps,
-  ...Grid.defaultProps
-};
-LineChart.propTypes = {
-  /** style inline for component */
-  style: PropTypes.object,
-  /** className for component */
-  className: PropTypes.string,
-  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 hidden 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 hidden the line to be drawn smooth */
-  Smooth: PropTypes.bool,
-  /** the direction to display tootip */
-  pointHoverAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  ...Axis.propTypes,
-  ...Labels.propTypes,
-  ...Points.propTypes,
-  ...Grid.propTypes
-};
-export default LineChart;

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

@@ -1,66 +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-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-v2/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; 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-v2/Labels.js

@@ -1,160 +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,
-  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;
-                  display: inline-block;
-                  word-break: break-word;
-              `;
-  const TextCSS = css`
-        ${typography.paragraph3};
-        fill: ${getProp(colors, 'system/rest')};
-    `;
-  if (labelsVisible) {
-    let xLabels;
-    let yLabels;
-    let tile = 4;
-    let tile2 = 9;
-    const TiLe = () => {
-      // eslint-disable-next-line no-undef
-      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,
-      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-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: '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;

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

@@ -1,153 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-const Path = ({
-  data,
-  getX,
-  getY,
-  Smooth,
-  PathVisible,
-  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;