diginet-core-ui 1.4.39 → 1.4.40

package/components/chart/Pie/Sector.js

@@ -1,124 +0,0 @@
-/** @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", {
-    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

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

@@ -1,277 +0,0 @@
-/** @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, {
-      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, {
-      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",
-    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;

package/components/chart/Pie-v2/Circle.js

@@ -1,48 +0,0 @@
-/** @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
-}, ref) => {
-  return jsx("ellipse", {
-    ref: ref,
-    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);
-}));
-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
-};
-export default Circle;

package/components/chart/Pie-v2/Sector.js

@@ -1,108 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { useRef, memo, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-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,
-  href,
-  transitionDuration,
-  transitionTimingFunction,
-  transitionProperty,
-  ...props
-}, ref) => {
-  let result;
-  if (!ref) {
-    ref = useRef(null);
-  }
-  const pathRef = useRef(null);
-  const SectorCSS = expandOnHover || expandedIndex >= 0 ? css`
-                          transition-property: ${transitionProperty};
-                          cursor: pointer;
-                          transition-timing-function: ${transitionTimingFunction};
-                          transition-duration: ${transitionDuration};
-                          &:hover {
-                              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-                              filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5));
-                          }
-                      ` : css`
-                          transition-property: all;
-                          cursor: pointer;
-                          transition-timing-function: ${transitionTimingFunction};
-                          transition-duration: ${transitionDuration};
-                      `;
-  const content = jsx("path", {
-    d: path,
-    fill: fill,
-    ref: pathRef,
-    css: SectorCSS,
-    stroke: strokeColor,
-    className: className,
-    strokeWidth: strokeWidth,
-    strokeLinejoin: strokeLinejoin,
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    ...props
-  }, renderSelectedItem);
-  if (href) {
-    result = jsx("a", {
-      href: href
-    }, content);
-  } else {
-    result = content;
-  }
-  return result;
-}));
-Sector.defaultProps = {
-  strokeColor: '#fff',
-  strokeWidth: 0,
-  strokeLinejoin: 'round',
-  quantity: null,
-  href: null,
-  transitionDuration: '0.5s',
-  transitionTimingFunction: 'ease-in',
-  transitionProperty: 'd'
-};
-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,
-  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;