diginet-core-ui 1.3.24

package/components/chart/bar-v2/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 + 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

@@ -0,0 +1,175 @@
+/** @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,
+  viewBoxWidth,
+  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;
+        cursor: pointer;
+        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 / 2),
+      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,
+        cursor: 'pointer',
+        fontFamily: theme.typography.fontFamily
+      }
+    }, 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: 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/bar-v2/Points.js

@@ -0,0 +1,111 @@
+/** @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

@@ -0,0 +1,172 @@
+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 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,
+    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(Bars, _extends({
+    data: dataSource,
+    viewBoxWidth: viewBoxWidth
+  }, props, commonProps)), jsx(Labels, _extends({
+    data: dataSource,
+    viewBoxWidth: viewBoxWidth
+  }, props, commonProps)), jsx(Points, _extends({
+    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;