diginet-core-ui 1.3.24

package/components/chart/Pie/Circle.js

@@ -0,0 +1,50 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from "prop-types";
+import { memo, forwardRef } from 'react';
+import { jsx } from '@emotion/core';
+const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  center,
+  color,
+  onMouseEnter,
+  onMouseLeave,
+  onTouchEnd,
+  onTouchStart,
+  className,
+  radius,
+  strokeColor,
+  strokeWidth,
+  name,
+  quantity
+}, ref) => {
+  return jsx("ellipse", {
+    cx: center,
+    cy: center,
+    fill: color,
+    className: className,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onTouchEnd: onTouchEnd,
+    onTouchStart: onTouchStart,
+    rx: radius,
+    ry: radius,
+    stroke: strokeColor,
+    strokeWidth: strokeWidth
+  }, name && jsx("title", null, name, ": ", quantity));
+}));
+Circle.propTypes = {
+  className: PropTypes.string,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onTouchEnd: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  center: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+  radius: PropTypes.number.isRequired,
+  strokeColor: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  name: PropTypes.string,
+  quantity: PropTypes.number
+};
+export default Circle;

package/components/chart/Pie/Sector.js

@@ -0,0 +1,142 @@
+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 { useRef, memo, forwardRef } from 'react';
+import PropTypes from "prop-types";
+import ReactDOM from 'react-dom';
+import { jsx, css } from '@emotion/core';
+const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  fill,
+  strokeColor,
+  strokeLinejoin,
+  strokeWidth,
+  onTouchStart,
+  onTouchEnd,
+  onMouseEnter,
+  onMouseLeave,
+  expandOnHover,
+  expandedIndex,
+  renderSelectedItem,
+  className,
+  path,
+  name,
+  quantity,
+  href,
+  transitionDuration,
+  transitionTimingFunction,
+  ...props
+}, ref) => {
+  let result;
+
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const pathRef = useRef(null);
+  const SectorCSS = expandOnHover || expandedIndex >= 0 ? css`
+        transition-property: all;
+        cursor: pointer;
+        transition-timing-function: ${transitionTimingFunction};
+        transition-duration: ${transitionDuration};
+        &:hover {
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            filter: drop-shadow( 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.2));
+        }
+    ` : css`
+        transition-property: all;
+        cursor: pointer;
+        transition-timing-function: ${transitionTimingFunction};
+        transition-duration: ${transitionDuration};
+    `;
+
+  const Data = (data, index) => {
+    let item = null;
+
+    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+      item = renderSelectedItem({
+        data,
+        index
+      });
+      const el = document.createElement('title');
+      ReactDOM.render(item, pathRef.current.appendChild(el));
+    }
+  };
+
+  const content = jsx("g", {
+    css: SectorCSS
+  }, jsx("path", _extends({
+    d: path,
+    fill: fill,
+    ref: pathRef,
+    stroke: strokeColor,
+    className: className,
+    strokeWidth: strokeWidth,
+    strokeLinejoin: strokeLinejoin,
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, props), renderSelectedItem ? Data() : name && jsx("title", null, name, ": ", quantity)));
+
+  if (href) {
+    result = jsx("a", {
+      href: href
+    }, content);
+  } else {
+    result = content;
+  }
+
+  return result;
+}));
+Sector.defaultProps = {
+  strokeColor: "#fff",
+  strokeWidth: 0,
+  strokeLinejoin: "round",
+  name: null,
+  quantity: null,
+  href: null,
+  transitionDuration: "8s",
+  transitionTimingFunction: "ease-out"
+};
+Sector.propTypes = {
+  /** the fill change color of pie chart  */
+  fill: PropTypes.string.isRequired,
+
+  /** event click mouse in pie chart */
+  onMouseEnter: PropTypes.func,
+
+  /** event leave mouse in pie chart */
+  onMouseLeave: PropTypes.func,
+  onTouchEnd: PropTypes.func,
+  onTouchStart: PropTypes.func,
+
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+   */
+  renderSelectedItem: PropTypes.func,
+  path: PropTypes.string.isRequired,
+
+  /** the StrokeColor change color border and Stroke */
+  strokeColor: PropTypes.string,
+
+  /** it can be applied to any element but it has effect only on the following nine */
+  strokeLinejoin: PropTypes.string,
+
+  /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
+  strokeWidth: PropTypes.number,
+
+  /** The title is add from the data */
+  name: PropTypes.string,
+  quantity: PropTypes.number,
+  href: PropTypes.string,
+
+  /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
+  transitionDuration: PropTypes.string,
+
+  /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
+  transitionTimingFunction: PropTypes.string,
+  className: PropTypes.string
+};
+export default Sector;

package/components/chart/Pie/Sectors.js

@@ -0,0 +1,91 @@
+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 Sector from "./Sector";
+import { jsx } from '@emotion/core';
+
+const Sectors = ({
+  center,
+  data,
+  onSectorHover,
+  expandSize,
+  strokeWidth,
+  strokeColor,
+  startAngle,
+  angleMargin,
+  ...props
+}) => {
+  const total = data.reduce((prev, current) => current.quantity + prev, 0);
+  let angleStart = startAngle;
+  let angleEnd = startAngle;
+  return total > 0 ? jsx("g", null, data.map((d, i) => {
+    const isLarge = d.quantity / total > 0.5;
+    const angle = 360 * d.quantity / total;
+    const radius = center + (d.expanded === 'true' ? expandSize : 0) - strokeWidth / 2;
+    angleStart = angleEnd;
+    angleMargin = angleMargin > angle ? angle : angleMargin;
+    angleEnd = angleStart + angle - angleMargin;
+    const x1 = center + radius * Math.cos(Math.PI * angleStart / 180);
+    const y1 = center + radius * Math.sin(Math.PI * angleStart / 180);
+    const x2 = center + radius * Math.cos(Math.PI * angleEnd / 180);
+    const y2 = center + radius * Math.sin(Math.PI * angleEnd / 180);
+    const path = `
+                    M${center},${center}
+                    L${x1},${y1}
+                    A${radius},${radius}
+                    0 ${isLarge ? 1 : 0},1
+                    ${x2},${y2}
+                    z
+                `;
+    angleEnd += angleMargin;
+    return jsx(Sector, _extends({
+      key: "sector" + i,
+      fill: d.color,
+      path: path,
+      href: d.href,
+      strokeColor: strokeColor,
+      strokeWidth: strokeWidth,
+      total: total,
+      onMouseEnter: e => onSectorHover(d, i, e),
+      onMouseLeave: e => onSectorHover(null, null, e),
+      onTouchEnd: e => onSectorHover(null, null, e),
+      onTouchStart: e => onSectorHover(d, i, e)
+    }, props, d));
+  })) : null;
+};
+
+Sectors.defaultProps = {
+  expandSize: 2
+};
+Sectors.propTypes = {
+  center: PropTypes.number.isRequired,
+
+  /** The array of elements that appear in the PieChart */
+  data: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    quantity: PropTypes.number.isRequired
+  })).isRequired,
+
+  /** returns the data of the object to be hover */
+  onSectorHover: PropTypes.func,
+
+  /** the Size expand On Hover */
+  expandSize: PropTypes.number,
+
+  /** the StrokeWidth change color border and Stroke */
+  strokeColor: Sector.propTypes.strokeColor,
+
+  /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
+  strokeWidth: Sector.propTypes.strokeWidth,
+
+  /** The starting angle is drawn in a circle from data first */
+  startAngle: PropTypes.number,
+
+  /** */
+  angleMargin: PropTypes.number
+};
+export default Sectors;

package/components/chart/Pie/index.js

@@ -0,0 +1,311 @@
+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 { useState, useRef, useEffect, memo, forwardRef } from 'react';
+import PropTypes from "prop-types";
+import Typography from '../../typography';
+import { jsx, css } from '@emotion/core';
+import Circle from "./Circle";
+import Sectors from "./Sectors";
+import Sector from "./Sector";
+const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  expandOnHover,
+  renderSelectedItem,
+  type,
+  viewData,
+  onSectorHover,
+  expandSize,
+  data,
+  direction,
+  Donut,
+  viewBoxSize,
+  width,
+  height,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  if (data[0] && !data[0].color) {
+    var colors = [];
+    let Count = data.length;
+
+    while (colors.length < Count) {
+      do {
+        var makeColorCode = '0123456789ABCDEF';
+        var code = '#';
+
+        for (var count = 0; count < 6; count++) {
+          code = code + makeColorCode[Math.floor(Math.random() * 16)];
+        }
+      } while (colors.indexOf(code) >= 0);
+
+      colors.push("#" + ("000000" + code.toString(16)).slice(-6));
+    }
+
+    for (let i in data) {
+      data[i].color = colors[i];
+    }
+  }
+
+  const compare = () => {
+    if (width > height) {
+      return height;
+    } else if (width <= height) {
+      return width;
+    }
+  };
+
+  const ZoomIn = () => {
+    let zoom = 0;
+    zoom = compare() / 25;
+    return zoom;
+  };
+
+  const Pie = Donut ? css`
+        position: relative;
+        display: flex;
+        margin: 0 auto;
+        width: ${compare()}px;
+        height: ${compare()}px;
+        &:before{
+            content: '';
+            position: absolute;
+            display: block;
+            position: absolute;
+            display: flex;
+            top: 50%;
+            width: 50%;
+            height: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            background-color: #fff;
+        }
+    ` : css`
+        position: relative;
+        display: flex;
+        margin: 0 auto;
+        width: ${compare()}px;
+        height: ${compare()}px;
+    `;
+  const PieMini = css`
+        border-radius: 100%;
+        width: ${ZoomIn()}px;
+        height: ${ZoomIn()}px;
+    `;
+  const total = data.reduce((prev, current) => current.quantity + prev, 0);
+  const center = viewBoxSize / 2;
+  const dataWithValue = data.filter(d => d.quantity > 0);
+  const offset = expandOnHover || props.expandedIndex > -1 ? expandSize + 2 : 0;
+  const [isExpanded, setExpanded] = useState('false');
+  const expandedIndex = useRef(null);
+
+  const handleSectorHover = (data, index, e) => {
+    if (expandOnHover) {
+      setExpanded({
+        isExpanded: data ? 'true' : 'false'
+      });
+      expandedIndex.current = index !== null ? index : props.expandedIndex > -1 ? props.expandedIndex : null;
+    }
+
+    if (onSectorHover) {
+      onSectorHover(data, index, e);
+    }
+  };
+
+  const renderSingleData = (d, center) => {
+    return jsx(Circle, _extends({
+      center: center,
+      radius: center + (d.expanded || expandOnHover && expandedIndex === 0 ? expandSize : 0),
+      color: d.color,
+      onMouseEnter: e => handleSectorHover(d, 0, e),
+      onMouseLeave: e => handleSectorHover(null, null, e),
+      onTouchEnd: e => handleSectorHover(null, null, e),
+      onTouchStart: e => handleSectorHover(d, 0, e)
+    }, d));
+  };
+
+  const renderMultipleData = center => {
+    return jsx(Sectors, _extends({
+      center: center,
+      data: expandOnHover ? data.map((d, i) => ({ ...d,
+        expanded: `${isExpanded ? i === expandedIndex.current : i === props.expandedIndex}`
+      })) : data.map((d, i) => ({ ...d,
+        expanded: `${i === props.expandedIndex}`
+      }))
+    }, props, {
+      expandSize: expandSize,
+      expandOnHover: expandOnHover,
+      renderSelectedItem: renderSelectedItem,
+      onSectorHover: handleSectorHover
+    }));
+  };
+
+  useEffect(() => {
+    if (direction === 'bottom' && viewData) {
+      document.getElementById(`DGN-CUI-Container-PieChart`).style.display = "inherit";
+      document.getElementById(`DGN-CUI-TableData-PieChart`).style.display = "flex";
+    }
+
+    if (direction === 'left' && viewData) {
+      document.getElementById(`DGN-CUI-Container-PieChart`).style.position = "relative";
+      document.getElementById(`DGN-CUI-TableData-PieChart`).style.position = "fixed";
+    }
+  }, [direction, viewData]);
+  return jsx("div", {
+    id: `DGN-CUI-Container-PieChart`,
+    style: {
+      display: '-webkit-box'
+    }
+  }, jsx("div", {
+    css: Pie,
+    ref: ref
+  }, dataWithValue && dataWithValue.length > 0 ? jsx("svg", {
+    viewBox: `0 0 ${viewBoxSize + offset * 2} ${viewBoxSize + offset * 2}`,
+    style: {
+      top: '50%',
+      left: '50%'
+    }
+  }, jsx("g", {
+    transform: `translate(${offset}, ${offset})`
+  }, dataWithValue.length === 1 ? renderSingleData(dataWithValue[0], center) : renderMultipleData(center))) : jsx("svg", {
+    viewBox: `0 0 ${viewBoxSize + offset * 2} ${viewBoxSize + offset * 2}`
+  }, jsx("circle", {
+    cx: center,
+    cy: center,
+    r: center,
+    stroke: "none",
+    fill: "#AAACB4"
+  }), jsx("text", {
+    x: "50%",
+    y: "50%",
+    textAnchor: "middle",
+    background: "#fff",
+    dy: ".3em"
+  }, "0%"))), viewData ? jsx("ul", {
+    id: `DGN-CUI-TableData-PieChart`,
+    style: {
+      width: '100%',
+      listStyle: 'none',
+      borderCollapse: 'separate'
+    }
+  }, data.map((d, i) => {
+    return jsx("li", {
+      key: i,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, jsx("span", {
+      css: PieMini,
+      style: {
+        backgroundColor: d.color
+      }
+    }), jsx(Typography, {
+      type: type,
+      style: {
+        margin: '5px 5px'
+      },
+      color: d.color
+    }, d.name), jsx(Typography, {
+      type: type,
+      style: {
+        margin: '5px 5px'
+      },
+      color: d.color
+    }, (d.quantity / total * 100).toFixed(2), '%'));
+  })) : null);
+}));
+PieChart.defaultProps = {
+  data: [],
+  type: 'h4',
+  expandOnHover: false,
+  viewData: true,
+  name: null,
+  expandSize: Sectors.defaultProps.expandSize,
+  expandedIndex: -1,
+  onSectorHover: null,
+  strokeColor: Sector.defaultProps.strokeColor,
+  strokeLinejoin: Sector.defaultProps.strokeLinejoin,
+  strokeWidth: Sector.defaultProps.strokeWidth,
+  startAngle: 0,
+  angleMargin: 0,
+  viewBoxSize: 100,
+  width: 900,
+  height: 500,
+  direction: '',
+  Donut: false,
+  transitionDuration: Sector.defaultProps.transitionDuration,
+  transitionTimingFunction: Sector.defaultProps.transitionTimingFunction
+};
+PieChart.propTypes = {
+  /** the viewData will display information about the input data */
+  viewData: PropTypes.bool,
+
+  /** drawn Ratio of Width entered by user, default is: 900px */
+  width: PropTypes.number,
+
+  /** drawn Ratio of Height entered by user, default is: 500px */
+  height: PropTypes.number,
+
+  /** change from PieChart to DonutChart  */
+  Donut: PropTypes.bool,
+
+  /** Typography of font in core, default: h4  */
+  type: PropTypes.string,
+
+  /** The array of elements that appear in the PieChart */
+  data: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    name: PropTypes.string,
+    quantity: PropTypes.number.isRequired,
+    href: PropTypes.string
+  })).isRequired,
+
+  /** the animation expand On Hover */
+  expandOnHover: PropTypes.bool,
+
+  /** the direction custom position data */
+  direction: PropTypes.string,
+
+  /** the Size expand On Hover */
+  expandSize: PropTypes.number,
+
+  /** the specified position is hovering by default */
+  expandedIndex: PropTypes.number,
+
+  /** returns the data of the object to be hover */
+  onSectorHover: PropTypes.func,
+
+  /** the StrokeWidth change color border and Stroke */
+  strokeColor: Sector.propTypes.strokeColor,
+
+  /** it can be applied to any element but it has effect only on the following nine */
+  strokeLinejoin: Sector.propTypes.strokeLinejoin,
+
+  /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
+  strokeWidth: Sector.propTypes.strokeWidth,
+
+  /** The starting angle is drawn in a circle from data first */
+  startAngle: PropTypes.number,
+
+  /** */
+  angleMargin: PropTypes.number,
+
+  /** The viewBox attribute defines the position and dimension, in user space, of an SVG viewport */
+  viewBoxSize: PropTypes.number,
+
+  /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
+  transitionDuration: Sector.propTypes.transitionDuration,
+
+  /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
+  transitionTimingFunction: Sector.propTypes.transitionTimingFunction,
+
+  /** The title is add from the data */
+  name: Sector.propTypes.name
+};
+export default PieChart;