diginet-core-ui 1.4.39 → 1.4.40

package/components/chart/bar-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 + unitWidth; i++) {
-    gridX.push(jsx("line", {
-      key: i,
-      x1: getX(i),
-      y1: getY(minY),
-      x2: getX(i),
-      y2: getY(maxY + 5)
-    }));
-  }
-  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-BarChart',
-      stroke: gridColor,
-      strokeWidth: gridWidth
-    }, gridX, gridY);
-  }
-  if (GridLines === 'horizontal') {
-    return jsx("g", {
-      className: 'DGN-Grid-BarChart',
-      stroke: gridColor,
-      strokeWidth: gridWidth
-    }, gridY);
-  }
-  if (GridLines === 'none') {
-    return null;
-  } else {
-    return jsx("g", {
-      className: 'DGN-Grid-BarChart',
-      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 Columb*/
-  gridColor: PropTypes.string,
-  /** change  Columb grid display style ['full' , 'horizontal', 'none']*/
-  GridLines: PropTypes.string,
-  /** hiden or  show grid columb*/
-  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/bar-v2/Labels.js

@@ -1,162 +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,
-  viewBoxWidth,
-  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;
-                  cursor: pointer;
-                  display: inline-block;
-                  word-break: break-word;
-              `;
-  const TextCSS = css`
-        ${typography.paragraph3};
-        fill: ${getProp(colors, 'system/rest')};
-        cursor: 'pointer';
-    `;
-  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 / 2),
-      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-BarChart'
-    }, xLabels && jsx("g", {
-      className: 'DGN-AxisX',
-      css: labelContainerCSS
-    }, xLabels), yLabels && jsx("g", {
-      className: '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/bar-v2/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-v2/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/line/Axis.js

@@ -1,68 +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-UI-LineChart-Axis',
-    stroke: axisColor,
-    strokeWidth: axisWidth
-  }, jsx("line", {
-    x1: getX(minX),
-    y1: getY(minY)
-    // x2={getX(maxX + unitWidth + 0.5)}
-    ,
-    x2: '100%',
-    y2: getY(minY)
-  }), jsx("line", {
-    x1: getX(minX),
-    y1: getY(minX),
-    x2: getX(minX),
-    y2: '-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

@@ -1,99 +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)}
-      ,
-      x2: '100%',
-      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;