react-donut-chart/dist/ArcPath.js

An extendable SVG donut chart React component.

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)}import React,{useContext}from"react";import{DonutChartContext}from"./DonutChart";function coordinates(half,radius,startAngle,endAngle){const startAngleDegrees=Math.PI*startAngle/180;const endAngleDegrees=Math.PI*endAngle/180;return{x1:half+half*radius*Math.cos(startAngleDegrees),y1:half+half*radius*Math.sin(startAngleDegrees),x2:half+half*radius*Math.cos(endAngleDegrees),y2:half+half*radius*Math.sin(endAngleDegrees)}}function arc(width,radius,largeArcFlag,x,y){const z=width/2*radius;return`A${z}, ${z} 0 ${largeArcFlag} ${x}, ${y}`}function path(activeAngle,startAngle,width,innerRadius,outerRadius){const endAngle=startAngle+activeAngle;const largeArcFlagOuter=activeAngle>180?"1 1":"0 1";const largeArcFlagInner=activeAngle>180?"1 0":"0 0";const half=width/2;const outerCoords=coordinates(half,outerRadius,startAngle,endAngle);const innerCoords=coordinates(half,innerRadius,startAngle,endAngle);const outerArc=arc(width,outerRadius,largeArcFlagOuter,outerCoords.x2,outerCoords.y2);const innerArc=arc(width,innerRadius,largeArcFlagInner,innerCoords.x1,innerCoords.y1);return`M${outerCoords.x1},${outerCoords.y1}
  ${outerArc}
  L${innerCoords.x2},${innerCoords.y2}
  ${innerArc} z`}const ArcPath=({item})=>{const{className,emptyOffset,graphWidth,innerRadius,outerRadius,selected,selectedOffset,toggledOffset,toggleSelect,total}=useContext(DonutChartContext);const{angle,classNames,clickHandlers,index,isEmpty,label,value,...restItemRenderrops}=item;const activeAngle=Number.isNaN(value/total)||total/value===1?359.99:value/total*360;let[inner,outer]=[innerRadius,outerRadius];if(isEmpty){inner+=emptyOffset;outer-=emptyOffset}else if((selected===null||selected===void 0?void 0:selected.label)===label){if(toggleSelect){inner-=toggledOffset;outer+=toggledOffset}else{outer+=selectedOffset}}return/*#__PURE__*/React.createElement("path",_extends({},clickHandlers,restItemRenderrops,{className:`${className}-arcs-path ${classNames}`,d:path(activeAngle,angle,graphWidth,inner,outer)}))};export default ArcPath;