diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,204 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import Sector from "./Sector";
-import { jsx, css } from '@emotion/core';
-import { randomString } from "../../../utils";
-import { typography } from "../../../styles/typography";
-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) => {
-    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;
-            ${typography.paragraph1};
-            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, {
-      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

@@ -1,488 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { useState, useRef, memo, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import Typography from "../../typography";
-import { randomString } from "../../../utils";
-import { typography } from "../../../styles/typography";
-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,
-  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;
-                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-                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);
-                ${typography.paragraph1};
-                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, {
-      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
-    });
-  };
-  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 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;