@evergis/charts - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/charts.cjs.development.js

@@ -109,4 +109,4 @@ 'use strict';
 
-const getTextAnchor = (index, data) => {
-  const deg = degByIndex(index, data.length);
+const getTextAnchor = (index, length) => {
+  const deg = degByIndex(index, length);
   const halfAngle = 180;
@@ -126,3 +126,3 @@
 function _templateObject() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n"]);
 
@@ -135,16 +135,82 @@ _templateObject = function _templateObject() {
 }
-const Wrapper = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject());
 
-function _templateObject8() {
-  const data = _taggedTemplateLiteralLoose(["\n  margin-left: 0.25rem;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.54);\n"]);
+const getTranslate = (_ref) => {
+  let {
+    anchor,
+    index,
+    translateX,
+    translateY
+  } = _ref;
 
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
+  if (index === 0 && anchor === 'middle') {
+    return "translate(calc(-50% + " + translateX + "px), calc(-100% + " + translateY + "px))";
+  } else if (anchor === 'middle') {
+    return "translate(calc(-50% + " + translateX + "px), calc(" + translateY + "px))";
+  } else if (anchor === 'start') {
+    return "translate(calc(" + translateX + "px), calc(-50% + " + translateY + "px))";
+  } else if (anchor === 'end') {
+    return "translate(calc(-100% + " + translateX + "px), calc(-50% + " + translateY + "px))";
+  }
 
-  return data;
-}
+  return "translate(" + translateX + "px, " + translateY + "px)";
+};
 
+const LabelContainer = /*#__PURE__*/styled__default.div.attrs(props => ({
+  style: {
+    transform: getTranslate(props)
+  }
+}))( /*#__PURE__*/_templateObject());
+
+const labelClassName = 'd3-chart-label';
+const drawRadialLabels = (_ref) => {
+  let {
+    node,
+    dataLength,
+    radiusScale,
+    maxValue,
+    angleSlice,
+    radius,
+    xOffset,
+    yOffset,
+    translateX,
+    translateY,
+    renderLabel
+  } = _ref;
+  const d3container = d3.select(node);
+  d3container.selectAll("." + labelClassName).remove();
+
+  const pxToValue = value => maxValue / radius * value;
+
+  const axisX = i => radiusScale(maxValue + pxToValue(xOffset || 0)) * Math.cos(angleSlice * i - Math.PI / 2);
+
+  const axisY = i => radiusScale((maxValue + pxToValue(yOffset || 0)) * Math.sin(angleSlice * i - Math.PI / 2));
+
+  const labels = Array.from({
+    length: dataLength
+  }, (_, index) => ({
+    x: Math.ceil(axisX(index)),
+    y: Math.ceil(axisY(index))
+  }));
+  labels.forEach((_ref2, index) => {
+    let {
+      x,
+      y
+    } = _ref2;
+    const anchor = getTextAnchor(index, dataLength);
+    const html = ReactDOMServer.renderToString(React__default.createElement(LabelContainer, {
+      anchor: anchor,
+      translateX: translateX || 0,
+      translateY: translateY || 0,
+      index: index,
+      style: {
+        left: x,
+        top: y
+      }
+    }, typeof renderLabel === 'function' ? renderLabel(anchor, index) : renderLabel));
+    d3container.append('div').attr('class', labelClassName).html(html);
+  });
+};
+
 function _templateObject7() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  margin-left: 0.25rem;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.54);\n"]);
 
@@ -159,3 +225,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 0.5rem;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
 
@@ -170,3 +236,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 0.5rem), -50%);\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 0.5rem;\n"]);
 
@@ -181,3 +247,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  const data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  max-width: 7.5rem;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 0.5rem), -50%);\n"]);
 
@@ -192,3 +258,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  max-width: 7.5rem;\n"]);
 
@@ -203,3 +269,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n"]);
 
@@ -212,26 +278,3 @@ _templateObject2 = function _templateObject2() {
 }
-
-function _templateObject$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: #959595;\n      stroke-opacity: 0.18;\n    }\n  }\n  .", " {\n    font-size: 0.75rem;\n    fill-opacity: 0.56;\n  }\n  .", " {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  .", " {\n    fill: rgb(144, 197, 61);\n  }\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const radarChartclassNames = {
-  radar: 'radar',
-  radarAxis: 'radarAxis',
-  radarAxisText: 'radarAxisText',
-  radarPolygon: 'radarPolygon',
-  radarLabel: 'radarLabel',
-  radarLabelName: 'radarLabelName',
-  radarLabelBadge: 'radarLabelBadge',
-  radarLabelBadgePrefix: 'radarLabelBadgePrefix',
-  radarCircle: 'radarCircle'
-};
-const SvgWrapper = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$1(), radarChartclassNames.radarAxis, radarChartclassNames.radarAxisText, radarChartclassNames.radarPolygon, radarChartclassNames.radarCircle);
-
-const getTranslate = (_ref) => {
+const getTranslate$1 = (_ref) => {
   let {
@@ -256,15 +299,41 @@ anchor,
 };
+const Label = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2());
+const Name = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject3());
+const middleBadgeStyles = /*#__PURE__*/styled.css( /*#__PURE__*/_templateObject4());
+const DefaultBadge = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject5());
+const MiddleBadge = /*#__PURE__*/styled__default(DefaultBadge)( /*#__PURE__*/_templateObject6(), middleBadgeStyles);
+const BadgePrefix = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject7());
 
-const LabelContainer = /*#__PURE__*/styled__default.div.attrs(props => ({
-  style: {
-    transform: getTranslate(props)
-  }
-}))( /*#__PURE__*/_templateObject2());
-const Label = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject3());
-const Name = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject4());
-const middleBadgeStyles = /*#__PURE__*/styled.css( /*#__PURE__*/_templateObject5());
-const DefaultBadge = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject6());
-const MiddleBadge = /*#__PURE__*/styled__default(DefaultBadge)( /*#__PURE__*/_templateObject7(), middleBadgeStyles);
-const BadgePrefix = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject8());
+function _templateObject$1() {
+  const data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n"]);
 
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+const Wrapper = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject$1());
+
+function _templateObject$2() {
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: #959595;\n      stroke-opacity: 0.18;\n    }\n  }\n  .", " {\n    font-size: 0.75rem;\n    fill-opacity: 0.56;\n  }\n  .", " {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  .", " {\n    fill: rgb(144, 197, 61);\n  }\n"]);
+
+  _templateObject$2 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+const radarChartclassNames = {
+  radar: 'radar',
+  radarAxis: 'radarAxis',
+  radarAxisText: 'radarAxisText',
+  radarPolygon: 'radarPolygon',
+  radarLabelName: 'radarLabelName',
+  radarLabelBadge: 'radarLabelBadge',
+  radarLabelBadgePrefix: 'radarLabelBadgePrefix',
+  radarCircle: 'radarCircle'
+};
+const SvgWrapper = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$2(), radarChartclassNames.radarAxis, radarChartclassNames.radarAxisText, radarChartclassNames.radarPolygon, radarChartclassNames.radarCircle);
+
 const draw = (node, props) => {
@@ -381,47 +450,29 @@ const {
     });
-
-    const pxToValue = value => maxValue / radius * value;
-
     const defaultLabelOffset = 8;
-
-    const axisX = i => radiusScale(maxValue + pxToValue(bleedLength + (labelOffset || defaultLabelOffset))) * Math.cos(angleSlice * i - Math.PI / 2);
-
-    const axisY = i => radiusScale((maxValue + pxToValue(bleedLength + (labelOffset || defaultLabelOffset))) * Math.sin(angleSlice * i - Math.PI / 2));
-
-    const labels = data[0].map((_, i) => ({
-      x: Math.ceil(axisX(i)),
-      y: Math.ceil(axisY(i))
-    }));
     const heightInner = height - bleedLength - paddingY;
     const translateX = width / 2;
     const translateY = heightInner / 2 + (heightInner - maxGridHeight) / 2;
+    const offset = bleedLength + (labelOffset || defaultLabelOffset);
     globalCenter.attr('transform', "translate(" + translateX + "," + translateY + ")");
-    const d3container = d3.select(node);
-    d3container.selectAll("." + radarChartclassNames.radarLabel).remove();
-    labels.forEach((_ref7, index) => {
-      let {
-        x,
-        y
-      } = _ref7;
-      const anchor = getTextAnchor(index, data[0]);
-      const Badge = anchor === 'middle' ? MiddleBadge : DefaultBadge;
-      const html = ReactDOMServer.renderToString(React__default.createElement(LabelContainer, {
-        anchor: anchor,
-        translateX: translateX,
-        translateY: translateY,
-        index: index,
-        style: {
-          left: x,
-          top: y
-        }
-      }, React__default.createElement(Label, {
-        className: radarChartclassNames.radarLabel
-      }, React__default.createElement(Name, {
-        className: radarChartclassNames.radarLabelName
-      }, data[0][index].name), data.length === 1 && React__default.createElement(Badge, {
-        className: radarChartclassNames.radarLabelBadge
-      }, typeof formatValue === 'function' ? formatValue(data[0][index].value) : data[0][index].value, badgePrefix && React__default.createElement(BadgePrefix, {
-        className: radarChartclassNames.radarLabelBadgePrefix
-      }, badgePrefix)))));
-      d3container.append('div').attr('class', radarChartclassNames.radarLabel).html(html);
+    drawRadialLabels({
+      node,
+      maxValue,
+      translateX,
+      translateY,
+      dataLength: data[0].length,
+      angleSlice,
+      radius,
+      radiusScale,
+      xOffset: offset,
+      yOffset: offset,
+      renderLabel: (anchor, index) => {
+        const Badge = anchor === 'middle' ? MiddleBadge : DefaultBadge;
+        return React__default.createElement(Label, null, React__default.createElement(Name, {
+          className: radarChartclassNames.radarLabelName
+        }, data[0][index].name), data.length === 1 && React__default.createElement(Badge, {
+          className: radarChartclassNames.radarLabelBadge
+        }, typeof formatValue === 'function' ? formatValue(data[0][index].value) : data[0][index].value, badgePrefix && React__default.createElement(BadgePrefix, {
+          className: radarChartclassNames.radarLabelBadgePrefix
+        }, badgePrefix)));
+      }
     });
@@ -462,4 +513,270 @@
 
+function radiansToDegrees(radians) {
+  const flatAngle = 180;
+  return radians * flatAngle / Math.PI;
+}
+function degreesToRadians(degrees) {
+  const flatAngle = 180;
+  return degrees * (Math.PI / flatAngle);
+}
+
+const formatNumber = number => {
+  if (number === null || number === undefined) {
+    return '';
+  }
+
+  let result = '';
+  const gapSize = 3;
+  const numsArray = String(number).split('.');
+  const numeral = numsArray[0];
+  let spaceBefore = numeral.length % gapSize;
+
+  for (let i = 0; i < numeral.length; i++) {
+    if (i === spaceBefore) {
+      result = result + " "; // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+
+      spaceBefore += 3;
+    }
+
+    result = result + numeral[i];
+  }
+
+  if (numsArray[1]) {
+    return [result.trim(), numsArray[1]].join(',');
+  }
+
+  return result.trim();
+};
+
+function _templateObject$3() {
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 8rem;\n  }\n  .", " {\n    stroke: #000;\n  }\n"]);
+
+  _templateObject$3 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+const pieChartclassNames = {
+  pieSlice: 'pieSlice',
+  pieSliceLabel: 'pieSliceLabel',
+  pieSliceLabelValue: 'pieSliceLabelValue',
+  pieSliceLabelName: 'pieSliceLabelName',
+  pieRadialLabel: 'pieRadialLabel',
+  pieRadialLink: 'pieRadialLink'
+};
+const SvgWrapper$1 = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$3(), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink);
+
+const drawRadialLabels$1 = (_ref) => {
+  let {
+    enableRadialLabels,
+    global,
+    arc,
+    node,
+    radius,
+    dataReady,
+    radialLabelsLinkHorizontalLength,
+    formatRadialLabel,
+    radialLabelsTextXOffset,
+    translateX,
+    translateY,
+    radialLabelYOffset
+  } = _ref;
+  const d3container = d3.select(node);
+  d3container.selectAll("." + pieChartclassNames.pieRadialLabel).remove();
+
+  if (enableRadialLabels) {
+    const radiusFactor = 0.9;
+    const defaultRadialLabelsLinkHorizontalLength = 4;
+    const outerArc = d3.arc().innerRadius(radius * radiusFactor).outerRadius(radius * radiusFactor);
+
+    const getMidFactor = d => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
+
+    global.selectAll('allPolylines').data(dataReady).enter().append('polyline').attr('class', pieChartclassNames.pieRadialLink).style('fill', 'none') // @ts-ignore
+    .attr('points', d => {
+      const midFactor = getMidFactor(d); // @ts-ignore
+
+      const posA = arc.centroid(d); // @ts-ignore
+
+      const posB = outerArc.centroid(d); // @ts-ignore
+
+      const posC = outerArc.centroid(d);
+      const posCPi = [(radius + (radialLabelsLinkHorizontalLength || defaultRadialLabelsLinkHorizontalLength)) * midFactor, posC[1]];
+      return [[posA[0], posA[1]], [posB[0], posB[1] - (radialLabelYOffset || 0) * d.index], [posCPi[0], posCPi[1] - (radialLabelYOffset || 0) * d.index]];
+    });
+
+    const getPosition = d => {
+      // @ts-ignore
+      const pos = outerArc.centroid(d);
+      return [(radius + (radialLabelsLinkHorizontalLength || defaultRadialLabelsLinkHorizontalLength)) * getMidFactor(d), pos[1]];
+    };
+
+    const getAlign = d => {
+      const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+      return midangle < Math.PI ? 'start' : 'end';
+    };
+
+    const defaultRadialLabelsTextXOffset = 4;
+    d3container.selectAll('allLabels').data(dataReady).enter().append('div') // @ts-ignore
+    .html(d => {
+      const html = ReactDOMServer.renderToString( // @ts-ignore
+      typeof formatRadialLabel === 'function' ? formatRadialLabel(d) : d.data.name);
+      return html;
+    }).attr('class', pieChartclassNames.pieRadialLabel) // @ts-ignore
+    .style('transform', d => getTranslate$1({
+      anchor: getAlign(d),
+      index: d.index,
+      translateX,
+      translateY: translateY - (radialLabelYOffset || 0) * d.index
+    })) // @ts-ignore
+    .style('left', // @ts-ignore
+    d => getPosition(d)[0] - (getAlign(d) === 'start' ? -(radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) : radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) + "px") // @ts-ignore
+    .style('top', d => getPosition(d)[1] + "px") // @ts-ignore
+    .style('text-align', getAlign);
+  }
+};
+
+const draw$1 = (node, props) => {
+  const {
+    data,
+    padAngle,
+    onClick,
+    outerRadius,
+    startAngle,
+    endAngle,
+    cornerRadius,
+    margin,
+    enableSlicesLabels,
+    formatSliceLabel,
+    slicesLabelsSkipAngle,
+    enableSlicesLabelsName,
+    formatSliceLabelName,
+    borderWidth,
+    borderColor,
+    enableRadialLabels,
+    backgroundColor,
+    radialLabelsLinkHorizontalLength,
+    radialLabelsTextXOffset,
+    formatRadialLabel,
+    radialLabelYOffset
+  } = props;
+
+  if (node !== null && data.length) {
+    const marginTop = margin ? margin.top : 0;
+    const marginRight = margin ? margin.right : 0;
+    const marginBottom = margin ? margin.bottom : 0;
+    const marginLeft = margin ? margin.left : 0;
+    const {
+      width: nodeWidth
+    } = node.getBoundingClientRect();
+    const width = props.width || nodeWidth;
+    const defaultHeight = 240;
+    const height = props.height || defaultHeight;
+    const radius = (Math.min(width, height) - (borderWidth || 0) * 2 - (width > height ? marginTop + marginBottom : marginRight + marginLeft)) / 2;
+    const svg = appendSvg(node, width, height);
+    const global = svg.append('g').attr('transform', "translate(" + ((width - (marginLeft + marginRight)) / 2 + marginLeft) + "," + ((height - (marginBottom + marginTop)) / 2 + marginTop) + ")");
+    const maxPadAngle = 45;
+    const dividerPadAngle = 100;
+    const fullAngle = 360;
+    const pie = d3.pie().startAngle(-degreesToRadians(startAngle || 0)).endAngle(degreesToRadians(endAngle || fullAngle)).padAngle(padAngle ? Math.max(Math.min(padAngle / dividerPadAngle, maxPadAngle), 0) : 0).sort(null) // @ts-ignore
+    .value((_ref) => {
+      let {
+        value
+      } = _ref;
+      return value;
+    }); // @ts-ignore
+
+    const dataReady = pie(data);
+    const maxOuterRadius = 0.95;
+    const arc = d3.arc().cornerRadius(cornerRadius || 0).innerRadius(radius).outerRadius(radius * Math.min(Math.max(outerRadius || 0, 0), maxOuterRadius));
+
+    if (typeof backgroundColor === 'string') {
+      global.append('path').attr('fill', backgroundColor).attr('d', () => // @ts-ignore
+      arc({
+        startAngle: degreesToRadians(0),
+        endAngle: degreesToRadians(fullAngle)
+      }));
+    }
+
+    global.selectAll('allSlices').data(dataReady).enter().append('path') // @ts-ignore
+    .attr('d', arc).attr('class', pieChartclassNames.pieSlice).attr('fill', (_ref2) => {
+      let {
+        index
+      } = _ref2;
+      return data[index].color;
+    }).attr('stroke', borderColor || '').attr('stroke-width', borderWidth || 0).attr('style', typeof onClick === 'function' ? 'cursor: pointer' : '').on('click', // @ts-ignore
+    (_, d) => typeof onClick === 'function' && onClick(data[d.index])).append('svg:title').text((_ref3) => {
+      let {
+        index
+      } = _ref3;
+      return (data[index].name || '') + " (" + formatNumber(parseFloat(data[index].value.toFixed(2))) + ")";
+    });
+
+    if (enableSlicesLabels) {
+      const text = global.selectAll('allSlices').data(dataReady).enter().append('text').attr('class', pieChartclassNames.pieSliceLabel).attr('text-anchor', 'middle').attr('dominant-baseline', 'central').attr('transform', // @ts-ignore
+      d => 'translate(' + arc.centroid(d) + ')');
+      text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelValue) // @ts-ignore
+      .text(d => {
+        const deg = radiansToDegrees(d.endAngle - d.startAngle);
+
+        if (!slicesLabelsSkipAngle || deg > slicesLabelsSkipAngle) {
+          return typeof formatSliceLabel === 'function' ? formatSliceLabel(d) : d.value;
+        }
+      });
+
+      if (enableSlicesLabelsName) {
+        text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelName) // @ts-ignore
+        .text(d => typeof formatSliceLabelName === 'function' ? formatSliceLabelName(d) : d.data.name).attr('x', '0').attr('dy', '1.2em');
+      }
+    }
+
+    drawRadialLabels$1({
+      arc,
+      enableRadialLabels,
+      global,
+      radius,
+      node,
+      dataReady,
+      translateX: (width - (marginLeft - marginRight)) / 2,
+      translateY: (height + (marginTop - marginBottom)) / 2,
+      radialLabelsLinkHorizontalLength,
+      radialLabelsTextXOffset,
+      formatRadialLabel,
+      radialLabelYOffset
+    });
+  }
+};
+
+const PieChart = props => {
+  const {
+    className,
+    style,
+    children
+  } = props;
+  const [ref, node] = useNode();
+  React.useEffect(() => {
+    node && draw$1(node, props);
+  }, [node, props]);
+
+  const onDraw = () => draw$1(node, props);
+
+  useResize(props.width, onDraw);
+  return React__default.createElement("div", {
+    className: className,
+    style: style
+  }, React__default.createElement(SvgWrapper$1, {
+    ref: ref
+  }, children));
+};
+PieChart.defaultProps = {
+  data: [],
+  startAngle: 0,
+  endAngle: 360,
+  slicesLabelsSkipAngle: 0
+};
+
+exports.PieChart = PieChart;
 exports.RadarChart = RadarChart;
+exports.pieChartclassNames = pieChartclassNames;
 exports.radarChartclassNames = radarChartclassNames;
 //# sourceMappingURL=charts.cjs.development.js.map

dist/charts.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),a=e(t),r=require("d3"),n=e(require("react-dom/server")),l=require("styled-components"),i=e(l);function c(e,t){let a=!1;return function(){a||(e(...arguments),a=!0,setTimeout((function(){a=!1}),t))}}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}function o(e,t){return t||(t=e.slice(0)),e.raw=t,e}function d(){const e=o(["\n  position: relative;\n  width: 100%;\n"]);return d=function(){return e},e}function u(){const e=o(["\n  margin-left: 0.25rem;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.54);\n"]);return u=function(){return e},e}function p(){const e=o(["\n  ","\n"]);return p=function(){return e},e}function f(){const e=o(["\n  display: flex;\n  align-items: center;\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 0.5rem;\n"]);return f=function(){return e},e}function m(){const e=o(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 0.5rem), -50%);\n"]);return m=function(){return e},e}function h(){const e=o(["\n  text-align: center;\n  max-width: 7.5rem;\n"]);return h=function(){return e},e}function g(){const e=o(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n"]);return g=function(){return e},e}function x(){const e=o(["\n  position: absolute;\n"]);return x=function(){return e},e}function v(){const e=o(["\n  ."," {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: #959595;\n      stroke-opacity: 0.18;\n    }\n  }\n  ."," {\n    font-size: 0.75rem;\n    fill-opacity: 0.56;\n  }\n  ."," {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  ."," {\n    fill: rgb(144, 197, 61);\n  }\n"]);return v=function(){return e},e}const b={radar:"radar",radarAxis:"radarAxis",radarAxisText:"radarAxisText",radarPolygon:"radarPolygon",radarLabel:"radarLabel",radarLabelName:"radarLabelName",radarLabelBadge:"radarLabelBadge",radarLabelBadgePrefix:"radarLabelBadgePrefix",radarCircle:"radarCircle"},y=i(i.div(d()))(v(),b.radarAxis,b.radarAxisText,b.radarPolygon,b.radarCircle),L=e=>{let{anchor:t,index:a,translateX:r,translateY:n}=e;return 0===a&&"middle"===t?"translate(calc(-50% + "+r+"px), calc(-100% + "+n+"px))":"middle"===t?"translate(calc(-50% + "+r+"px), calc("+n+"px))":"start"===t?"translate(calc("+r+"px), calc(-50% + "+n+"px))":"end"===t?"translate(calc(-100% + "+r+"px), calc(-50% + "+n+"px))":"translate("+r+"px, "+n+"px)"},M=i.div.attrs(e=>({style:{transform:L(e)}}))(x()),P=i.div(g()),E=i.div(h()),w=l.css(m()),A=i.div(f()),C=i(A)(p(),w),N=i.div(u()),B=(e,t)=>{const{data:l,curve:i,polar:c,formatValue:o,badgePrefix:d,labelOffset:u,circleRadius:p,gradient:f}=t;if(null!==e&&l.length){const m=10,h="number"==typeof t.bleedLength?t.bleedLength:m,{width:g}=e.getBoundingClientRect(),x=t.width||g,v=400,y=t.height||v,L=t.minValue||Math.min(0,r.min(l,e=>r.min(e.map(e=>{let{value:t}=e;return t})))),w=(t.maxValue||Math.max(0,r.max(l,e=>r.max(e.map(e=>{let{value:t}=e;return t})))))-L,B=t.paddingY||0,I=Math.min((x-2*(t.paddingX||0)-2*h)/2,(y-2*B-2*h)/2),k=r.scaleLinear().range([0,I]).domain([0,w]),R=4,T=t.levels||R,z=2*Math.PI/l[0].length,O=r.lineRadial().curve(r.curveLinearClosed).radius(e=>{let{value:t}=e;return k(t)}).angle((e,t)=>t*z),j=r.lineRadial().curve(i||r.curveLinearClosed).radius(e=>{let{value:t}=e;return k(t)}).angle((e,t)=>t*z),q=((e,t,a)=>(r.select(e).select("svg").remove(),r.select(e).append("svg").attr("width",t).attr("height",a)))(e,x,y),S=q.append("g"),V=r.range(1,T+1).reverse(),X=e=>-e*I/T,Y=e=>w*e/T,_=S.append("g").attr("class",b.radarAxis).selectAll().data([l[0]]).enter(),D=S.append("g").attr("class",b.radar),F=_.selectAll().data(l[0].map(e=>{let{name:t}=e;return t})).enter();let G=0;c?V.forEach(e=>{const t=_.append("circle").attr("cx",0).attr("cy",0).attr("r",()=>I/T*e).node().getBoundingClientRect().height;G=Math.max(G,t)}):V.map(Y).forEach(e=>{const t=_.append("path").attr("d",()=>O(Array.from({length:l[0].length},()=>({value:e})))).node().getBoundingClientRect().height;G=Math.max(G,t)});const H=k(w)+h;F.append("line").attr("x1",0).attr("y1",0).attr("x2",(e,t)=>H*Math.cos(z*t-Math.PI/2)).attr("y2",(e,t)=>H*Math.sin(z*t-Math.PI/2)),l.forEach(e=>{D.append("path").attr("class",b.radarPolygon).attr("d",()=>j(e.map(e=>s({},e,{value:e.value-L}))))}),S.selectAll("text").data(V).enter().append("text").attr("class",b.radarAxisText).attr("x","4").attr("y",X).attr("dy",0).attr("dominant-baseline","central").text(e=>Y(e)+L),p&&l.forEach(e=>{const t=D.append("g").attr("class",b.radarCircle);e.forEach((e,a)=>{let{value:r}=e;t.append("circle").attr("cx",k(r)*Math.cos(z*a-Math.PI/2)).attr("cy",k(r*Math.sin(z*a-Math.PI/2))).attr("r",p)})});const J=e=>w/I*e,K=8,Q=e=>k(w+J(h+(u||K)))*Math.cos(z*e-Math.PI/2),U=e=>k((w+J(h+(u||K)))*Math.sin(z*e-Math.PI/2)),W=l[0].map((e,t)=>({x:Math.ceil(Q(t)),y:Math.ceil(U(t))})),Z=y-h-B,$=x/2,ee=Z/2+(Z-G)/2;S.attr("transform","translate("+$+","+ee+")");const te=r.select(e);if(te.selectAll("."+b.radarLabel).remove(),W.forEach((e,t)=>{let{x:r,y:i}=e;const c=((e,t)=>{const a=((e,t)=>360/t*e)(e,t.length),r=180;return[0,r].includes(a)?"middle":a<r?"start":"end"})(t,l[0]),s="middle"===c?C:A,u=n.renderToString(a.createElement(M,{anchor:c,translateX:$,translateY:ee,index:t,style:{left:r,top:i}},a.createElement(P,{className:b.radarLabel},a.createElement(E,{className:b.radarLabelName},l[0][t].name),1===l.length&&a.createElement(s,{className:b.radarLabelBadge},"function"==typeof o?o(l[0][t].value):l[0][t].value,d&&a.createElement(N,{className:b.radarLabelBadgePrefix},d)))));te.append("div").attr("class",b.radarLabel).html(u)}),f){const e=n.renderToString(f);q.append("g").html(e)}}},I=e=>{const{className:r,style:n}=e,[l,i]=function(){const[e,a]=t.useState(null);return[t.useCallback(e=>a(e),[]),e]}();return t.useEffect(()=>{i&&B(i,e)},[i,e]),t.useEffect(()=>{var e;return o&&("number"!=typeof(e=s)||e!==Number(e)||Infinity===e||!1===e)&&window.addEventListener("resize",c(o,44)),()=>o&&window.removeEventListener("resize",c(o,44))},[s=e.width,o=()=>B(i,e)]),a.createElement("div",{className:r,style:n},a.createElement(y,{ref:l}));var s,o};I.defaultProps={height:400,data:[],curve:r.curveLinearClosed},exports.RadarChart=I,exports.radarChartclassNames=b;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),a=e(t),n=require("d3"),r=e(require("react-dom/server")),l=require("styled-components"),i=e(l);function s(){const[e,a]=t.useState(null);return[t.useCallback(e=>a(e),[]),e]}function c(e,t){let a=!1;return function(){a||(e(...arguments),a=!0,setTimeout((function(){a=!1}),t))}}const o=(e,a)=>{t.useEffect(()=>{var t;return a&&("number"!=typeof(t=e)||t!==Number(t)||Infinity===t||!1===t)&&window.addEventListener("resize",c(a,44)),()=>a&&window.removeEventListener("resize",c(a,44))},[e,a])};function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function u(e,t){return t||(t=e.slice(0)),e.raw=t,e}const p=(e,t,a)=>(n.select(e).select("svg").remove(),n.select(e).append("svg").attr("width",t).attr("height",a));function f(){const e=u(["\n  position: absolute;\n"]);return f=function(){return e},e}const m=e=>{let{anchor:t,index:a,translateX:n,translateY:r}=e;return 0===a&&"middle"===t?"translate(calc(-50% + "+n+"px), calc(-100% + "+r+"px))":"middle"===t?"translate(calc(-50% + "+n+"px), calc("+r+"px))":"start"===t?"translate(calc("+n+"px), calc(-50% + "+r+"px))":"end"===t?"translate(calc(-100% + "+n+"px), calc(-50% + "+r+"px))":"translate("+n+"px, "+r+"px)"},g=i.div.attrs(e=>({style:{transform:m(e)}}))(f());function h(){const e=u(["\n  margin-left: 0.25rem;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.54);\n"]);return h=function(){return e},e}function x(){const e=u(["\n  ","\n"]);return x=function(){return e},e}function b(){const e=u(["\n  display: flex;\n  align-items: center;\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 0.5rem;\n"]);return b=function(){return e},e}function L(){const e=u(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 0.5rem), -50%);\n"]);return L=function(){return e},e}function y(){const e=u(["\n  text-align: center;\n  max-width: 7.5rem;\n"]);return y=function(){return e},e}function v(){const e=u(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n"]);return v=function(){return e},e}const A=i.div(v()),R=i.div(y()),M=l.css(L()),S=i.div(b()),P=i(S)(x(),M),k=i.div(h());function E(){const e=u(["\n  position: relative;\n  width: 100%;\n"]);return E=function(){return e},e}const w=i.div(E());function C(){const e=u(["\n  ."," {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: #959595;\n      stroke-opacity: 0.18;\n    }\n  }\n  ."," {\n    font-size: 0.75rem;\n    fill-opacity: 0.56;\n  }\n  ."," {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  ."," {\n    fill: rgb(144, 197, 61);\n  }\n"]);return C=function(){return e},e}const N={radar:"radar",radarAxis:"radarAxis",radarAxisText:"radarAxisText",radarPolygon:"radarPolygon",radarLabelName:"radarLabelName",radarLabelBadge:"radarLabelBadge",radarLabelBadgePrefix:"radarLabelBadgePrefix",radarCircle:"radarCircle"},O=i(w)(C(),N.radarAxis,N.radarAxisText,N.radarPolygon,N.radarCircle),I=(e,t)=>{const{data:l,curve:i,polar:s,formatValue:c,badgePrefix:o,labelOffset:u,circleRadius:f,gradient:m}=t;if(null!==e&&l.length){const h=10,x="number"==typeof t.bleedLength?t.bleedLength:h,{width:b}=e.getBoundingClientRect(),L=t.width||b,y=400,v=t.height||y,M=t.minValue||Math.min(0,n.min(l,e=>n.min(e.map(e=>{let{value:t}=e;return t})))),E=(t.maxValue||Math.max(0,n.max(l,e=>n.max(e.map(e=>{let{value:t}=e;return t})))))-M,w=t.paddingY||0,C=Math.min((L-2*(t.paddingX||0)-2*x)/2,(v-2*w-2*x)/2),O=n.scaleLinear().range([0,C]).domain([0,E]),I=4,X=t.levels||I,Y=2*Math.PI/l[0].length,T=n.lineRadial().curve(n.curveLinearClosed).radius(e=>{let{value:t}=e;return O(t)}).angle((e,t)=>t*Y),B=n.lineRadial().curve(i||n.curveLinearClosed).radius(e=>{let{value:t}=e;return O(t)}).angle((e,t)=>t*Y),z=p(e,L,v),V=z.append("g"),j=n.range(1,X+1).reverse(),q=e=>-e*C/X,H=e=>E*e/X,F=V.append("g").attr("class",N.radarAxis).selectAll().data([l[0]]).enter(),_=V.append("g").attr("class",N.radar),W=F.selectAll().data(l[0].map(e=>{let{name:t}=e;return t})).enter();let D=0;s?j.forEach(e=>{const t=F.append("circle").attr("cx",0).attr("cy",0).attr("r",()=>C/X*e).node().getBoundingClientRect().height;D=Math.max(D,t)}):j.map(H).forEach(e=>{const t=F.append("path").attr("d",()=>T(Array.from({length:l[0].length},()=>({value:e})))).node().getBoundingClientRect().height;D=Math.max(D,t)});const G=O(E)+x;W.append("line").attr("x1",0).attr("y1",0).attr("x2",(e,t)=>G*Math.cos(Y*t-Math.PI/2)).attr("y2",(e,t)=>G*Math.sin(Y*t-Math.PI/2)),l.forEach(e=>{_.append("path").attr("class",N.radarPolygon).attr("d",()=>B(e.map(e=>d({},e,{value:e.value-M}))))}),V.selectAll("text").data(j).enter().append("text").attr("class",N.radarAxisText).attr("x","4").attr("y",q).attr("dy",0).attr("dominant-baseline","central").text(e=>H(e)+M),f&&l.forEach(e=>{const t=_.append("g").attr("class",N.radarCircle);e.forEach((e,a)=>{let{value:n}=e;t.append("circle").attr("cx",O(n)*Math.cos(Y*a-Math.PI/2)).attr("cy",O(n*Math.sin(Y*a-Math.PI/2))).attr("r",f)})});const J=8,K=v-x-w,Q=L/2,U=K/2+(K-D)/2,Z=x+(u||J);if(V.attr("transform","translate("+Q+","+U+")"),(e=>{let{node:t,dataLength:l,radiusScale:i,maxValue:s,angleSlice:c,radius:o,xOffset:d,yOffset:u,translateX:p,translateY:f,renderLabel:m}=e;const h=n.select(t);h.selectAll(".d3-chart-label").remove();const x=e=>s/o*e,b=e=>i((s+x(u||0))*Math.sin(c*e-Math.PI/2));Array.from({length:l},(e,t)=>{return{x:Math.ceil((a=t,i(s+x(d||0))*Math.cos(c*a-Math.PI/2))),y:Math.ceil(b(t))};var a}).forEach((e,t)=>{let{x:n,y:i}=e;const s=((e,t)=>{const a=((e,t)=>360/t*e)(e,t),n=180;return[0,n].includes(a)?"middle":a<n?"start":"end"})(t,l),c=r.renderToString(a.createElement(g,{anchor:s,translateX:p||0,translateY:f||0,index:t,style:{left:n,top:i}},"function"==typeof m?m(s,t):m));h.append("div").attr("class","d3-chart-label").html(c)})})({node:e,maxValue:E,translateX:Q,translateY:U,dataLength:l[0].length,angleSlice:Y,radius:C,radiusScale:O,xOffset:Z,yOffset:Z,renderLabel:(e,t)=>{const n="middle"===e?P:S;return a.createElement(A,null,a.createElement(R,{className:N.radarLabelName},l[0][t].name),1===l.length&&a.createElement(n,{className:N.radarLabelBadge},"function"==typeof c?c(l[0][t].value):l[0][t].value,o&&a.createElement(k,{className:N.radarLabelBadgePrefix},o)))}}),m){const e=r.renderToString(m);z.append("g").html(e)}}},X=e=>{const{className:n,style:r}=e,[l,i]=s();return t.useEffect(()=>{i&&I(i,e)},[i,e]),o(e.width,()=>I(i,e)),a.createElement("div",{className:n,style:r},a.createElement(O,{ref:l}))};function Y(e){return e*(Math.PI/180)}function T(){const e=u(["\n  ."," {\n    fill: #4a4a4a;\n  }\n  ."," {\n    position: absolute;\n    max-width: 8rem;\n  }\n  ."," {\n    stroke: #000;\n  }\n"]);return T=function(){return e},e}X.defaultProps={height:400,data:[],curve:n.curveLinearClosed};const B={pieSlice:"pieSlice",pieSliceLabel:"pieSliceLabel",pieSliceLabelValue:"pieSliceLabelValue",pieSliceLabelName:"pieSliceLabelName",pieRadialLabel:"pieRadialLabel",pieRadialLink:"pieRadialLink"},z=i(w)(T(),B.pieSliceLabel,B.pieRadialLabel,B.pieRadialLink),V=(e,t)=>{const{data:a,padAngle:l,onClick:i,outerRadius:s,startAngle:c,endAngle:o,cornerRadius:d,margin:u,enableSlicesLabels:f,formatSliceLabel:m,slicesLabelsSkipAngle:g,enableSlicesLabelsName:h,formatSliceLabelName:x,borderWidth:b,borderColor:L,enableRadialLabels:y,backgroundColor:v,radialLabelsLinkHorizontalLength:A,radialLabelsTextXOffset:R,formatRadialLabel:M,radialLabelYOffset:S}=t;if(null!==e&&a.length){const P=u?u.top:0,k=u?u.right:0,E=u?u.bottom:0,w=u?u.left:0,{width:C}=e.getBoundingClientRect(),N=t.width||C,O=240,I=t.height||O,X=(Math.min(N,I)-2*(b||0)-(N>I?P+E:k+w))/2,T=p(e,N,I).append("g").attr("transform","translate("+((N-(w+k))/2+w)+","+((I-(E+P))/2+P)+")"),z=45,V=100,j=360,q=n.pie().startAngle(-Y(c||0)).endAngle(Y(o||j)).padAngle(l?Math.max(Math.min(l/V,z),0):0).sort(null).value(e=>{let{value:t}=e;return t})(a),H=.95,F=n.arc().cornerRadius(d||0).innerRadius(X).outerRadius(X*Math.min(Math.max(s||0,0),H));if("string"==typeof v&&T.append("path").attr("fill",v).attr("d",()=>F({startAngle:Y(0),endAngle:Y(j)})),T.selectAll("allSlices").data(q).enter().append("path").attr("d",F).attr("class",B.pieSlice).attr("fill",e=>{let{index:t}=e;return a[t].color}).attr("stroke",L||"").attr("stroke-width",b||0).attr("style","function"==typeof i?"cursor: pointer":"").on("click",(e,t)=>"function"==typeof i&&i(a[t.index])).append("svg:title").text(e=>{let{index:t}=e;return(a[t].name||"")+" ("+(e=>{if(null==e)return"";let t="";const a=String(e).split("."),n=a[0];let r=n.length%3;for(let e=0;e<n.length;e++)e===r&&(t+=" ",r+=3),t+=n[e];return a[1]?[t.trim(),a[1]].join(","):t.trim()})(parseFloat(a[t].value.toFixed(2)))+")"}),f){const e=T.selectAll("allSlices").data(q).enter().append("text").attr("class",B.pieSliceLabel).attr("text-anchor","middle").attr("dominant-baseline","central").attr("transform",e=>"translate("+F.centroid(e)+")");e.append("tspan").attr("class",B.pieSliceLabelValue).text(e=>{const t=180*(e.endAngle-e.startAngle)/Math.PI;if(!g||t>g)return"function"==typeof m?m(e):e.value}),h&&e.append("tspan").attr("class",B.pieSliceLabelName).text(e=>"function"==typeof x?x(e):e.data.name).attr("x","0").attr("dy","1.2em")}(e=>{let{enableRadialLabels:t,global:a,arc:l,node:i,radius:s,dataReady:c,radialLabelsLinkHorizontalLength:o,formatRadialLabel:d,radialLabelsTextXOffset:u,translateX:p,translateY:f,radialLabelYOffset:m}=e;const g=n.select(i);if(g.selectAll("."+B.pieRadialLabel).remove(),t){const e=.9,t=4,i=n.arc().innerRadius(s*e).outerRadius(s*e),h=e=>e.startAngle+(e.endAngle-e.startAngle)/2<Math.PI?1:-1;a.selectAll("allPolylines").data(c).enter().append("polyline").attr("class",B.pieRadialLink).style("fill","none").attr("points",e=>{const a=h(e),n=l.centroid(e),r=i.centroid(e),c=i.centroid(e),d=[(s+(o||t))*a,c[1]];return[[n[0],n[1]],[r[0],r[1]-(m||0)*e.index],[d[0],d[1]-(m||0)*e.index]]});const x=e=>{const a=i.centroid(e);return[(s+(o||t))*h(e),a[1]]},b=e=>e.startAngle+(e.endAngle-e.startAngle)/2<Math.PI?"start":"end",L=4;g.selectAll("allLabels").data(c).enter().append("div").html(e=>r.renderToString("function"==typeof d?d(e):e.data.name)).attr("class",B.pieRadialLabel).style("transform",e=>(e=>{let{anchor:t,index:a,translateX:n,translateY:r}=e;return 0===a&&"middle"===t?"translate(calc(-50% + "+n+"px), calc(-100% + "+r+"px))":"middle"===t?"translate(calc(-50% + "+n+"px), calc("+r+"px))":"start"===t?"translate(calc("+n+"px), calc(-50% + "+r+"px))":"end"===t?"translate(calc(-100% + "+n+"px), calc(-50% + "+r+"px))":"translate("+n+"px, "+r+"px)"})({anchor:b(e),index:e.index,translateX:p,translateY:f-(m||0)*e.index})).style("left",e=>x(e)[0]-("start"===b(e)?-(u||L):u||L)+"px").style("top",e=>x(e)[1]+"px").style("text-align",b)}})({arc:F,enableRadialLabels:y,global:T,radius:X,node:e,dataReady:q,translateX:(N-(w-k))/2,translateY:(I+(P-E))/2,radialLabelsLinkHorizontalLength:A,radialLabelsTextXOffset:R,formatRadialLabel:M,radialLabelYOffset:S})}},j=e=>{const{className:n,style:r,children:l}=e,[i,c]=s();return t.useEffect(()=>{c&&V(c,e)},[c,e]),o(e.width,()=>V(c,e)),a.createElement("div",{className:n,style:r},a.createElement(z,{ref:i},l))};j.defaultProps={data:[],startAngle:0,endAngle:360,slicesLabelsSkipAngle:0},exports.PieChart=j,exports.RadarChart=X,exports.pieChartclassNames=B,exports.radarChartclassNames=N;
 //# sourceMappingURL=charts.cjs.production.min.js.map

dist/charts.esm.js

 import React, { useState, useCallback, useEffect } from 'react';
-import { select, min, max, scaleLinear, lineRadial, curveLinearClosed, range } from 'd3';
+import { select, min, max, scaleLinear, lineRadial, curveLinearClosed, range, arc, pie } from 'd3';
 import ReactDOMServer from 'react-dom/server';
@@ -101,4 +101,4 @@ import styled, { css } from 'styled-components';
 
-const getTextAnchor = (index, data) => {
-  const deg = degByIndex(index, data.length);
+const getTextAnchor = (index, length) => {
+  const deg = degByIndex(index, length);
   const halfAngle = 180;
@@ -118,3 +118,3 @@
 function _templateObject() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n"]);
 
@@ -127,16 +127,82 @@ _templateObject = function _templateObject() {
 }
-const Wrapper = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject());
 
-function _templateObject8() {
-  const data = _taggedTemplateLiteralLoose(["\n  margin-left: 0.25rem;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.54);\n"]);
+const getTranslate = (_ref) => {
+  let {
+    anchor,
+    index,
+    translateX,
+    translateY
+  } = _ref;
 
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
+  if (index === 0 && anchor === 'middle') {
+    return "translate(calc(-50% + " + translateX + "px), calc(-100% + " + translateY + "px))";
+  } else if (anchor === 'middle') {
+    return "translate(calc(-50% + " + translateX + "px), calc(" + translateY + "px))";
+  } else if (anchor === 'start') {
+    return "translate(calc(" + translateX + "px), calc(-50% + " + translateY + "px))";
+  } else if (anchor === 'end') {
+    return "translate(calc(-100% + " + translateX + "px), calc(-50% + " + translateY + "px))";
+  }
 
-  return data;
-}
+  return "translate(" + translateX + "px, " + translateY + "px)";
+};
 
+const LabelContainer = /*#__PURE__*/styled.div.attrs(props => ({
+  style: {
+    transform: getTranslate(props)
+  }
+}))( /*#__PURE__*/_templateObject());
+
+const labelClassName = 'd3-chart-label';
+const drawRadialLabels = (_ref) => {
+  let {
+    node,
+    dataLength,
+    radiusScale,
+    maxValue,
+    angleSlice,
+    radius,
+    xOffset,
+    yOffset,
+    translateX,
+    translateY,
+    renderLabel
+  } = _ref;
+  const d3container = select(node);
+  d3container.selectAll("." + labelClassName).remove();
+
+  const pxToValue = value => maxValue / radius * value;
+
+  const axisX = i => radiusScale(maxValue + pxToValue(xOffset || 0)) * Math.cos(angleSlice * i - Math.PI / 2);
+
+  const axisY = i => radiusScale((maxValue + pxToValue(yOffset || 0)) * Math.sin(angleSlice * i - Math.PI / 2));
+
+  const labels = Array.from({
+    length: dataLength
+  }, (_, index) => ({
+    x: Math.ceil(axisX(index)),
+    y: Math.ceil(axisY(index))
+  }));
+  labels.forEach((_ref2, index) => {
+    let {
+      x,
+      y
+    } = _ref2;
+    const anchor = getTextAnchor(index, dataLength);
+    const html = ReactDOMServer.renderToString(React.createElement(LabelContainer, {
+      anchor: anchor,
+      translateX: translateX || 0,
+      translateY: translateY || 0,
+      index: index,
+      style: {
+        left: x,
+        top: y
+      }
+    }, typeof renderLabel === 'function' ? renderLabel(anchor, index) : renderLabel));
+    d3container.append('div').attr('class', labelClassName).html(html);
+  });
+};
+
 function _templateObject7() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  margin-left: 0.25rem;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.54);\n"]);
 
@@ -151,3 +217,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 0.5rem;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
 
@@ -162,3 +228,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 0.5rem), -50%);\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 0.5rem;\n"]);
 
@@ -173,3 +239,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  const data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  max-width: 7.5rem;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 0.5rem), -50%);\n"]);
 
@@ -184,3 +250,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  max-width: 7.5rem;\n"]);
 
@@ -195,3 +261,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n"]);
 
@@ -204,26 +270,3 @@ _templateObject2 = function _templateObject2() {
 }
-
-function _templateObject$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: #959595;\n      stroke-opacity: 0.18;\n    }\n  }\n  .", " {\n    font-size: 0.75rem;\n    fill-opacity: 0.56;\n  }\n  .", " {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  .", " {\n    fill: rgb(144, 197, 61);\n  }\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const radarChartclassNames = {
-  radar: 'radar',
-  radarAxis: 'radarAxis',
-  radarAxisText: 'radarAxisText',
-  radarPolygon: 'radarPolygon',
-  radarLabel: 'radarLabel',
-  radarLabelName: 'radarLabelName',
-  radarLabelBadge: 'radarLabelBadge',
-  radarLabelBadgePrefix: 'radarLabelBadgePrefix',
-  radarCircle: 'radarCircle'
-};
-const SvgWrapper = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$1(), radarChartclassNames.radarAxis, radarChartclassNames.radarAxisText, radarChartclassNames.radarPolygon, radarChartclassNames.radarCircle);
-
-const getTranslate = (_ref) => {
+const getTranslate$1 = (_ref) => {
   let {
@@ -248,15 +291,41 @@ anchor,
 };
+const Label = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2());
+const Name = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3());
+const middleBadgeStyles = /*#__PURE__*/css( /*#__PURE__*/_templateObject4());
+const DefaultBadge = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject5());
+const MiddleBadge = /*#__PURE__*/styled(DefaultBadge)( /*#__PURE__*/_templateObject6(), middleBadgeStyles);
+const BadgePrefix = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject7());
 
-const LabelContainer = /*#__PURE__*/styled.div.attrs(props => ({
-  style: {
-    transform: getTranslate(props)
-  }
-}))( /*#__PURE__*/_templateObject2());
-const Label = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3());
-const Name = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject4());
-const middleBadgeStyles = /*#__PURE__*/css( /*#__PURE__*/_templateObject5());
-const DefaultBadge = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject6());
-const MiddleBadge = /*#__PURE__*/styled(DefaultBadge)( /*#__PURE__*/_templateObject7(), middleBadgeStyles);
-const BadgePrefix = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject8());
+function _templateObject$1() {
+  const data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n"]);
 
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+const Wrapper = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$1());
+
+function _templateObject$2() {
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: #959595;\n      stroke-opacity: 0.18;\n    }\n  }\n  .", " {\n    font-size: 0.75rem;\n    fill-opacity: 0.56;\n  }\n  .", " {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  .", " {\n    fill: rgb(144, 197, 61);\n  }\n"]);
+
+  _templateObject$2 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+const radarChartclassNames = {
+  radar: 'radar',
+  radarAxis: 'radarAxis',
+  radarAxisText: 'radarAxisText',
+  radarPolygon: 'radarPolygon',
+  radarLabelName: 'radarLabelName',
+  radarLabelBadge: 'radarLabelBadge',
+  radarLabelBadgePrefix: 'radarLabelBadgePrefix',
+  radarCircle: 'radarCircle'
+};
+const SvgWrapper = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$2(), radarChartclassNames.radarAxis, radarChartclassNames.radarAxisText, radarChartclassNames.radarPolygon, radarChartclassNames.radarCircle);
+
 const draw = (node, props) => {
@@ -373,47 +442,29 @@ const {
     });
-
-    const pxToValue = value => maxValue / radius * value;
-
     const defaultLabelOffset = 8;
-
-    const axisX = i => radiusScale(maxValue + pxToValue(bleedLength + (labelOffset || defaultLabelOffset))) * Math.cos(angleSlice * i - Math.PI / 2);
-
-    const axisY = i => radiusScale((maxValue + pxToValue(bleedLength + (labelOffset || defaultLabelOffset))) * Math.sin(angleSlice * i - Math.PI / 2));
-
-    const labels = data[0].map((_, i) => ({
-      x: Math.ceil(axisX(i)),
-      y: Math.ceil(axisY(i))
-    }));
     const heightInner = height - bleedLength - paddingY;
     const translateX = width / 2;
     const translateY = heightInner / 2 + (heightInner - maxGridHeight) / 2;
+    const offset = bleedLength + (labelOffset || defaultLabelOffset);
     globalCenter.attr('transform', "translate(" + translateX + "," + translateY + ")");
-    const d3container = select(node);
-    d3container.selectAll("." + radarChartclassNames.radarLabel).remove();
-    labels.forEach((_ref7, index) => {
-      let {
-        x,
-        y
-      } = _ref7;
-      const anchor = getTextAnchor(index, data[0]);
-      const Badge = anchor === 'middle' ? MiddleBadge : DefaultBadge;
-      const html = ReactDOMServer.renderToString(React.createElement(LabelContainer, {
-        anchor: anchor,
-        translateX: translateX,
-        translateY: translateY,
-        index: index,
-        style: {
-          left: x,
-          top: y
-        }
-      }, React.createElement(Label, {
-        className: radarChartclassNames.radarLabel
-      }, React.createElement(Name, {
-        className: radarChartclassNames.radarLabelName
-      }, data[0][index].name), data.length === 1 && React.createElement(Badge, {
-        className: radarChartclassNames.radarLabelBadge
-      }, typeof formatValue === 'function' ? formatValue(data[0][index].value) : data[0][index].value, badgePrefix && React.createElement(BadgePrefix, {
-        className: radarChartclassNames.radarLabelBadgePrefix
-      }, badgePrefix)))));
-      d3container.append('div').attr('class', radarChartclassNames.radarLabel).html(html);
+    drawRadialLabels({
+      node,
+      maxValue,
+      translateX,
+      translateY,
+      dataLength: data[0].length,
+      angleSlice,
+      radius,
+      radiusScale,
+      xOffset: offset,
+      yOffset: offset,
+      renderLabel: (anchor, index) => {
+        const Badge = anchor === 'middle' ? MiddleBadge : DefaultBadge;
+        return React.createElement(Label, null, React.createElement(Name, {
+          className: radarChartclassNames.radarLabelName
+        }, data[0][index].name), data.length === 1 && React.createElement(Badge, {
+          className: radarChartclassNames.radarLabelBadge
+        }, typeof formatValue === 'function' ? formatValue(data[0][index].value) : data[0][index].value, badgePrefix && React.createElement(BadgePrefix, {
+          className: radarChartclassNames.radarLabelBadgePrefix
+        }, badgePrefix)));
+      }
     });
@@ -454,3 +505,267 @@
 
-export { RadarChart, radarChartclassNames };
+function radiansToDegrees(radians) {
+  const flatAngle = 180;
+  return radians * flatAngle / Math.PI;
+}
+function degreesToRadians(degrees) {
+  const flatAngle = 180;
+  return degrees * (Math.PI / flatAngle);
+}
+
+const formatNumber = number => {
+  if (number === null || number === undefined) {
+    return '';
+  }
+
+  let result = '';
+  const gapSize = 3;
+  const numsArray = String(number).split('.');
+  const numeral = numsArray[0];
+  let spaceBefore = numeral.length % gapSize;
+
+  for (let i = 0; i < numeral.length; i++) {
+    if (i === spaceBefore) {
+      result = result + " "; // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+
+      spaceBefore += 3;
+    }
+
+    result = result + numeral[i];
+  }
+
+  if (numsArray[1]) {
+    return [result.trim(), numsArray[1]].join(',');
+  }
+
+  return result.trim();
+};
+
+function _templateObject$3() {
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 8rem;\n  }\n  .", " {\n    stroke: #000;\n  }\n"]);
+
+  _templateObject$3 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+const pieChartclassNames = {
+  pieSlice: 'pieSlice',
+  pieSliceLabel: 'pieSliceLabel',
+  pieSliceLabelValue: 'pieSliceLabelValue',
+  pieSliceLabelName: 'pieSliceLabelName',
+  pieRadialLabel: 'pieRadialLabel',
+  pieRadialLink: 'pieRadialLink'
+};
+const SvgWrapper$1 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$3(), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink);
+
+const drawRadialLabels$1 = (_ref) => {
+  let {
+    enableRadialLabels,
+    global,
+    arc: arc$1,
+    node,
+    radius,
+    dataReady,
+    radialLabelsLinkHorizontalLength,
+    formatRadialLabel,
+    radialLabelsTextXOffset,
+    translateX,
+    translateY,
+    radialLabelYOffset
+  } = _ref;
+  const d3container = select(node);
+  d3container.selectAll("." + pieChartclassNames.pieRadialLabel).remove();
+
+  if (enableRadialLabels) {
+    const radiusFactor = 0.9;
+    const defaultRadialLabelsLinkHorizontalLength = 4;
+    const outerArc = arc().innerRadius(radius * radiusFactor).outerRadius(radius * radiusFactor);
+
+    const getMidFactor = d => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
+
+    global.selectAll('allPolylines').data(dataReady).enter().append('polyline').attr('class', pieChartclassNames.pieRadialLink).style('fill', 'none') // @ts-ignore
+    .attr('points', d => {
+      const midFactor = getMidFactor(d); // @ts-ignore
+
+      const posA = arc$1.centroid(d); // @ts-ignore
+
+      const posB = outerArc.centroid(d); // @ts-ignore
+
+      const posC = outerArc.centroid(d);
+      const posCPi = [(radius + (radialLabelsLinkHorizontalLength || defaultRadialLabelsLinkHorizontalLength)) * midFactor, posC[1]];
+      return [[posA[0], posA[1]], [posB[0], posB[1] - (radialLabelYOffset || 0) * d.index], [posCPi[0], posCPi[1] - (radialLabelYOffset || 0) * d.index]];
+    });
+
+    const getPosition = d => {
+      // @ts-ignore
+      const pos = outerArc.centroid(d);
+      return [(radius + (radialLabelsLinkHorizontalLength || defaultRadialLabelsLinkHorizontalLength)) * getMidFactor(d), pos[1]];
+    };
+
+    const getAlign = d => {
+      const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+      return midangle < Math.PI ? 'start' : 'end';
+    };
+
+    const defaultRadialLabelsTextXOffset = 4;
+    d3container.selectAll('allLabels').data(dataReady).enter().append('div') // @ts-ignore
+    .html(d => {
+      const html = ReactDOMServer.renderToString( // @ts-ignore
+      typeof formatRadialLabel === 'function' ? formatRadialLabel(d) : d.data.name);
+      return html;
+    }).attr('class', pieChartclassNames.pieRadialLabel) // @ts-ignore
+    .style('transform', d => getTranslate$1({
+      anchor: getAlign(d),
+      index: d.index,
+      translateX,
+      translateY: translateY - (radialLabelYOffset || 0) * d.index
+    })) // @ts-ignore
+    .style('left', // @ts-ignore
+    d => getPosition(d)[0] - (getAlign(d) === 'start' ? -(radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) : radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) + "px") // @ts-ignore
+    .style('top', d => getPosition(d)[1] + "px") // @ts-ignore
+    .style('text-align', getAlign);
+  }
+};
+
+const draw$1 = (node, props) => {
+  const {
+    data,
+    padAngle,
+    onClick,
+    outerRadius,
+    startAngle,
+    endAngle,
+    cornerRadius,
+    margin,
+    enableSlicesLabels,
+    formatSliceLabel,
+    slicesLabelsSkipAngle,
+    enableSlicesLabelsName,
+    formatSliceLabelName,
+    borderWidth,
+    borderColor,
+    enableRadialLabels,
+    backgroundColor,
+    radialLabelsLinkHorizontalLength,
+    radialLabelsTextXOffset,
+    formatRadialLabel,
+    radialLabelYOffset
+  } = props;
+
+  if (node !== null && data.length) {
+    const marginTop = margin ? margin.top : 0;
+    const marginRight = margin ? margin.right : 0;
+    const marginBottom = margin ? margin.bottom : 0;
+    const marginLeft = margin ? margin.left : 0;
+    const {
+      width: nodeWidth
+    } = node.getBoundingClientRect();
+    const width = props.width || nodeWidth;
+    const defaultHeight = 240;
+    const height = props.height || defaultHeight;
+    const radius = (Math.min(width, height) - (borderWidth || 0) * 2 - (width > height ? marginTop + marginBottom : marginRight + marginLeft)) / 2;
+    const svg = appendSvg(node, width, height);
+    const global = svg.append('g').attr('transform', "translate(" + ((width - (marginLeft + marginRight)) / 2 + marginLeft) + "," + ((height - (marginBottom + marginTop)) / 2 + marginTop) + ")");
+    const maxPadAngle = 45;
+    const dividerPadAngle = 100;
+    const fullAngle = 360;
+    const pie$1 = pie().startAngle(-degreesToRadians(startAngle || 0)).endAngle(degreesToRadians(endAngle || fullAngle)).padAngle(padAngle ? Math.max(Math.min(padAngle / dividerPadAngle, maxPadAngle), 0) : 0).sort(null) // @ts-ignore
+    .value((_ref) => {
+      let {
+        value
+      } = _ref;
+      return value;
+    }); // @ts-ignore
+
+    const dataReady = pie$1(data);
+    const maxOuterRadius = 0.95;
+    const arc$1 = arc().cornerRadius(cornerRadius || 0).innerRadius(radius).outerRadius(radius * Math.min(Math.max(outerRadius || 0, 0), maxOuterRadius));
+
+    if (typeof backgroundColor === 'string') {
+      global.append('path').attr('fill', backgroundColor).attr('d', () => // @ts-ignore
+      arc$1({
+        startAngle: degreesToRadians(0),
+        endAngle: degreesToRadians(fullAngle)
+      }));
+    }
+
+    global.selectAll('allSlices').data(dataReady).enter().append('path') // @ts-ignore
+    .attr('d', arc$1).attr('class', pieChartclassNames.pieSlice).attr('fill', (_ref2) => {
+      let {
+        index
+      } = _ref2;
+      return data[index].color;
+    }).attr('stroke', borderColor || '').attr('stroke-width', borderWidth || 0).attr('style', typeof onClick === 'function' ? 'cursor: pointer' : '').on('click', // @ts-ignore
+    (_, d) => typeof onClick === 'function' && onClick(data[d.index])).append('svg:title').text((_ref3) => {
+      let {
+        index
+      } = _ref3;
+      return (data[index].name || '') + " (" + formatNumber(parseFloat(data[index].value.toFixed(2))) + ")";
+    });
+
+    if (enableSlicesLabels) {
+      const text = global.selectAll('allSlices').data(dataReady).enter().append('text').attr('class', pieChartclassNames.pieSliceLabel).attr('text-anchor', 'middle').attr('dominant-baseline', 'central').attr('transform', // @ts-ignore
+      d => 'translate(' + arc$1.centroid(d) + ')');
+      text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelValue) // @ts-ignore
+      .text(d => {
+        const deg = radiansToDegrees(d.endAngle - d.startAngle);
+
+        if (!slicesLabelsSkipAngle || deg > slicesLabelsSkipAngle) {
+          return typeof formatSliceLabel === 'function' ? formatSliceLabel(d) : d.value;
+        }
+      });
+
+      if (enableSlicesLabelsName) {
+        text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelName) // @ts-ignore
+        .text(d => typeof formatSliceLabelName === 'function' ? formatSliceLabelName(d) : d.data.name).attr('x', '0').attr('dy', '1.2em');
+      }
+    }
+
+    drawRadialLabels$1({
+      arc: arc$1,
+      enableRadialLabels,
+      global,
+      radius,
+      node,
+      dataReady,
+      translateX: (width - (marginLeft - marginRight)) / 2,
+      translateY: (height + (marginTop - marginBottom)) / 2,
+      radialLabelsLinkHorizontalLength,
+      radialLabelsTextXOffset,
+      formatRadialLabel,
+      radialLabelYOffset
+    });
+  }
+};
+
+const PieChart = props => {
+  const {
+    className,
+    style,
+    children
+  } = props;
+  const [ref, node] = useNode();
+  useEffect(() => {
+    node && draw$1(node, props);
+  }, [node, props]);
+
+  const onDraw = () => draw$1(node, props);
+
+  useResize(props.width, onDraw);
+  return React.createElement("div", {
+    className: className,
+    style: style
+  }, React.createElement(SvgWrapper$1, {
+    ref: ref
+  }, children));
+};
+PieChart.defaultProps = {
+  data: [],
+  startAngle: 0,
+  endAngle: 360,
+  slicesLabelsSkipAngle: 0
+};
+
+export { PieChart, RadarChart, pieChartclassNames, radarChartclassNames };
 //# sourceMappingURL=charts.esm.js.map

dist/index.d.ts

@@ -1,2 +0,4 @@
-export { RadarChart } from './RadarChart';
-export { radarChartclassNames } from './RadarChart/styled';
+export { RadarChart } from './charts/RadarChart';
+export { radarChartclassNames } from './charts/RadarChart/styled';
+export { PieChart } from './charts/PieChart';
+export { pieChartclassNames } from './charts/PieChart/styled';

package.json

 {
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
@@ -64,3 +64,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "e01a311fdd5e5737d250e8a4b2b9b300715f114d"
+  "gitHead": "e86f20f050b6e101cef69dc477b8e763f2be1864"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

228029

increased by82.68%

Number of package files

39

increased by62.5%

Lines of code

1571

increased by82.04%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes