diginet-core-ui 1.3.24

package/components/chart/Pie-v2/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);
+}));
+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-v2/Sector.js

@@ -0,0 +1,128 @@
+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 { 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,
+  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", _extends({
+    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",
+  name: null,
+  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,
+
+  /** 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-v2/Sectors.js

@@ -0,0 +1,224 @@
+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 } from 'react';
+import PropTypes from "prop-types";
+import Sector from "./Sector";
+import ReactDOMServer from 'react-dom/server';
+import { jsx, css } from '@emotion/core';
+import theme from '../../../theme/settings';
+import { randomString, parseTextToHTML } from '../../../utils';
+
+const Sectors = ({
+  center,
+  data,
+  onSectorHover,
+  expandSize,
+  strokeWidth,
+  strokeColor,
+  startAngle,
+  angleMargin,
+  strokeWidthTooltip,
+  strokeLinejoin,
+  transitionTimingFunction,
+  transitionProperty,
+  transitionDuration,
+  ...props
+}) => {
+  const [id] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const [id1] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const total = data.reduce((prev, current) => current.quantity + prev, 0);
+  let angleStart = startAngle;
+  let angleEnd = startAngle;
+
+  const getPath = (d, i, e) => {
+    const anglePosition = (angleStart + angleEnd) / 2;
+    var rotateX = 0;
+    var rotateY = 0;
+    var xte = 0;
+    var yte = 0;
+
+    const measureText = (str, fontSize = 16) => {
+      const widths = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2796875, 0.2765625, 0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625, 0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125, 0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875, 1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625, 0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625, 0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625, 0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375, 0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625, 0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5, 0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875, 0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875, 0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625];
+      const avg = 0.5279276315789471;
+      return str.split('').map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg).reduce((cur, acc) => acc + cur) * fontSize;
+    };
+
+    const xPath = center + center * Math.cos(Math.PI * anglePosition / 180);
+    const yPath = center + center * Math.sin(Math.PI * anglePosition / 180);
+    const x1Path = center + center * 1.3 * Math.cos(Math.PI * anglePosition / 180);
+    const y1Path = center + center * 1.3 * Math.sin(Math.PI * anglePosition / 180);
+
+    if (anglePosition > 271 || anglePosition < 89) {
+      rotateX += x1Path + measureText((d.quantity / total * 100).toFixed(2) + '%') + 5;
+      rotateY += y1Path;
+      xte += x1Path + 30;
+      yte += y1Path - 6;
+    } else if (90 < anglePosition || anglePosition < 270) {
+      rotateX += x1Path - measureText((d.quantity / total * 100).toFixed(2) + '%') - 5;
+      rotateY += y1Path - 1;
+      xte += x1Path - 30;
+      yte += y1Path - 6;
+    }
+
+    const path1 = `
+            M${xPath},${yPath}
+            L${x1Path},${y1Path}
+            L${rotateX},${rotateY}
+        `;
+    const textChartCSS = css`
+            text-anchor: middle;
+            font-size: 16px;
+            font-family: ${theme.typography.fontFamily};
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+		    animation: draw 8s ease-in-out forwards;
+            @keyframes draw {
+            to {
+                stroke-dashoffset: 0;
+                }
+            }
+        `;
+    const PathCSS = css`
+            cursor: pointer;
+            transition-timing-function: ${transitionTimingFunction};
+            transition-property: ${transitionProperty};
+            transition-duration: ${transitionDuration};
+            stroke-dasharray: 200;
+            stroke-dashoffset: 200;
+            animation: dash 1s linear forwards;
+            &: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));
+            }
+            @keyframes dash {
+                to {
+                    stroke-dashoffset: 0;
+                }
+            }
+        `;
+    return jsx("g", {
+      key: "Path" + i
+    }, jsx("path", {
+      d: path1,
+      stroke: d.color,
+      css: PathCSS,
+      id: `${id}${i}`,
+      style: {
+        display: 'none'
+      },
+      strokeWidth: strokeWidthTooltip,
+      fill: 'none',
+      strokeLinejoin: strokeLinejoin
+    }), jsx("text", {
+      id: `${id1}${i}`,
+      x: xte,
+      y: yte,
+      style: {
+        display: 'none'
+      },
+      css: textChartCSS,
+      fill: d.color
+    }, (d.quantity / total * 100).toFixed(2), '%'));
+  };
+
+  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 x = (x1 + x2) / 3;
+    const y = (y1 + y2) / 3;
+    const path = `
+                    M${center},${center}
+                    L${x1},${y1}
+                    A${radius},${radius}
+                    0 ${isLarge ? 1 : 0},1
+                    ${x2},${y2}
+                    z
+                `;
+    angleEnd += angleMargin;
+
+    const MouseEnterTarget = (d, e, i) => {
+      if (onSectorHover) onSectorHover(d, i, e);
+      document.getElementById(`${id}` + i).style.display = 'block';
+      document.getElementById(`${id1}` + i).style.display = 'block';
+    };
+
+    const MouseLeaveTarget = (e, i) => {
+      if (onSectorHover) onSectorHover(null, null, e);
+      document.getElementById(`${id}` + i).style.display = 'none';
+      document.getElementById(`${id1}` + i).style.display = 'none';
+    };
+
+    return jsx("g", {
+      key: i,
+      id: "sector" + i
+    }, jsx(Sector, _extends({
+      key: "sector" + i,
+      fill: d.color,
+      path: path,
+      href: d.href,
+      strokeColor: strokeColor,
+      strokeWidth: strokeWidth,
+      total: total,
+      onMouseEnter: e => MouseEnterTarget(d, e, i),
+      onMouseLeave: e => MouseLeaveTarget(e, i),
+      onTouchEnd: e => onSectorHover(null, null, e),
+      onTouchStart: e => onSectorHover(d, i, e),
+      x: x + 15,
+      y: y + 16
+    }, props, d)), getPath(d, i));
+  })) : null;
+};
+
+Sectors.defaultProps = {
+  expandSize: 10,
+  strokeWidthTooltip: 2,
+  transitionTimingFunction: "ease-out",
+  strokeLinejoin: "round",
+  transitionProperty: 'd'
+};
+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-v2/index.js

@@ -0,0 +1,397 @@
+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, memo, forwardRef } from 'react';
+import PropTypes from "prop-types";
+import theme from '../../../theme/settings';
+import { jsx, css } from '@emotion/core';
+import Typography from '../../typography';
+import { randomString } from '../../../utils';
+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,
+  title,
+  Donut,
+  viewBoxSize,
+  width,
+  height,
+  ...props
+}, ref) => {
+  const [id1] = useState(randomString(6, {
+    allowLowercase: false,
+    allowUppercase: false,
+    allowSymbol: false
+  }));
+  const [id2] = useState(randomString(6, {
+    allowLowercase: false,
+    allowUppercase: false,
+    allowSymbol: false
+  }));
+  const [id3] = useState(randomString(6, {
+    allowLowercase: false,
+    allowUppercase: false,
+    allowSymbol: false
+  }));
+
+  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 ZoomIn = () => {
+    let zoom = 0;
+    zoom = (width + height) / 2;
+    return zoom;
+  };
+
+  const svgCSS = css`
+        position: relative;
+        display: block;
+        margin: 0 auto;
+        overflow:hidden;
+        line-height:normal;
+        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+        -ms-user-select:none;
+        -moz-user-select:none;
+        -webkit-user-select:none;
+    `;
+  const Pie = Donut ? css`
+        position: relative;
+        display: flex;
+        margin: 0 auto;
+        &: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: #111d5e;
+        }
+    ` : css`
+        position: relative;
+        display: flex;
+        margin: 0 auto;
+    `;
+  const dataCSS = css`
+        fill:rgba(0,0,0,0.54);
+        font-size: 16px;
+        font-family: ${theme.typography.fontFamily};
+        cursor:default;
+    `;
+  const padding1 = ZoomIn() / 10;
+  var padding = 0;
+
+  if (padding1 >= 60) {
+    padding += padding1 / 2;
+  } else {
+    padding += padding1;
+  }
+
+  const dem = data.length;
+  const position = (ZoomIn() - padding * 2) / dem;
+  const center = ZoomIn() / 4;
+  const dataWithValue = data.filter(d => d.quantity > 0);
+  const [isExpanded, setExpanded] = useState('false');
+  const expandedIndex = useRef(null);
+  const dataSource = data.map((item, i) => ({ ...item,
+    x: i * position
+  }));
+  const DataTitle = data.map((item, i) => ({ ...item,
+    x: position + i * 10
+  }));
+
+  const measureText = (str, fontSize = 16) => {
+    const widths = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2796875, 0.2765625, 0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625, 0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125, 0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875, 1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625, 0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625, 0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625, 0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375, 0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625, 0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5, 0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875, 0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875, 0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625];
+    const avg = 0.5279276315789471;
+    return str.split('').map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg).reduce((cur, acc) => acc + cur) * fontSize;
+  };
+
+  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
+    }));
+  };
+
+  return jsx("div", {
+    ref: ref,
+    className: `DGN-CUI-Container-PieChart`
+  }, dataWithValue && dataWithValue.length > 0 ? jsx("svg", {
+    width: ZoomIn(),
+    height: ZoomIn(),
+    css: svgCSS,
+    direction: "ltr"
+  }, jsx("defs", null, jsx("filter", {
+    id: `DGN_${id3}`,
+    x: "-50%",
+    y: "-50%",
+    width: "200%",
+    height: "200%",
+    transform: "translate(0,0)"
+  }, jsx("feGaussianBlur", {
+    in: "SourceGraphic",
+    result: "gaussianBlurResult",
+    stdDeviation: "3"
+  }), jsx("feOffset", {
+    in: "gaussianBlurResult",
+    result: "offsetResult",
+    dx: "2",
+    dy: "6"
+  }), jsx("feComposite", {
+    in: "floodResult",
+    in2: "offsetResult",
+    operator: "in",
+    result: "compositeResult"
+  }), jsx("feComposite", {
+    in: "SourceGraphic",
+    in2: "compositeResult",
+    operator: "over"
+  })), jsx("clipPath", {
+    id: `DGN_${id1}`
+  }, jsx("rect", {
+    x: "0",
+    y: "0",
+    width: ZoomIn(),
+    height: ZoomIn(),
+    transform: "translate(0,0)"
+  })), jsx("clipPath", {
+    id: `DGN_${id2}`
+  }, jsx("rect", {
+    x: "-141",
+    y: "-20",
+    width: "400",
+    height: "64",
+    transform: "translate(0,0)"
+  }))), jsx("rect", {
+    x: "0",
+    y: "0",
+    width: ZoomIn(),
+    height: ZoomIn(),
+    transform: "translate(0,0)",
+    fill: "gray",
+    opacity: "0.0001"
+  }), jsx("g", {
+    clipPath: `url(#DGN_${id2})`,
+    transform: `translate(${ZoomIn() / 2.5}, 30)`
+  }, jsx(Typography, {
+    type: 'title3',
+    fill: '#111d5e',
+    mapping: 'text'
+  }, title)), jsx("g", {
+    css: svgCSS,
+    transform: `translate(${ZoomIn() / 4}, ${ZoomIn() / 6})`
+  }, dataWithValue.length === 1 ? renderSingleData(dataWithValue[0], center) : renderMultipleData(center)), jsx("g", {
+    css: svgCSS,
+    transform: `translate(${ZoomIn() / 4}, ${ZoomIn() / 4})`
+  }, Donut ? jsx("circle", {
+    cx: center,
+    cy: center,
+    r: center / 1.5,
+    stroke: "none",
+    fill: "#fff"
+  }) : null), viewData ? jsx("g", {
+    clipPath: `url(#DGN_${id1})`,
+    transform: `translate(0,0)`
+  }, jsx("g", {
+    transform: `translate(${-padding}, ${ZoomIn() - 80})`
+  }, jsx("g", {
+    css: dataCSS
+  }, DataTitle.map((d, i) => {
+    return jsx("g", {
+      key: i,
+      transform: `translate(${5 - i * 10},${(d.x - position) * 2} )`,
+      className: 'item' + i
+    }, jsx("g", {
+      transform: `translate(${d.x - 20}, 0)`
+    }, jsx("rect", {
+      width: "8",
+      height: "8",
+      rx: "4",
+      fill: d.color
+    })), jsx(Typography, {
+      type: 'p3',
+      x: d.x,
+      y: "10",
+      mapping: 'text',
+      transform: "translate(0,0)",
+      fill: '#51A30'
+    }, d.name));
+  })))) : null) : jsx("svg", {
+    width: ZoomIn(),
+    height: ZoomIn(),
+    css: svgCSS,
+    direction: "ltr"
+  }, jsx("g", {
+    css: Pie,
+    transform: `translate(${ZoomIn() / 4}, ${ZoomIn() / 4})`
+  }, jsx("circle", {
+    cx: center,
+    cy: center,
+    r: center,
+    stroke: "none",
+    fill: "#AAACB4"
+  }), jsx(Typography, {
+    x: "25%",
+    y: "25%",
+    fill: ' #fff',
+    type: 'title1',
+    mapping: 'text',
+    textAnchor: "middle",
+    background: "#fff",
+    dy: ".3em"
+  }, "0%"))));
+}));
+PieChart.defaultProps = {
+  data: [],
+  type: 'h4',
+  title: '',
+  expandOnHover: true,
+  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,
+  width: 500,
+  height: 300,
+  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 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;