react-donut-chart/dist/LegendItem.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";const LegendItem=({item})=>{const{className,graphWidth,width}=useContext(DonutChartContext);const{classNames,clickHandlers,index,isEmpty,label,value,...restItemRenderProps}=item;const classSuffix="legend-item";const legendWidth=width-graphWidth;const sqUnit=legendWidth/10;const yOffset=1.5;return/*#__PURE__*/React.createElement("g",_extends({},clickHandlers,{className:`${className}-${classSuffix} ${classNames}`,transform:`translate(${width-legendWidth}, ${index*yOffset*sqUnit})`}),/*#__PURE__*/React.createElement("rect",_extends({},restItemRenderProps,{height:sqUnit,width:sqUnit})),/*#__PURE__*/React.createElement("text",{className:`${className}-${classSuffix}-label ${classNames}`,dy:".35em",x:sqUnit+sqUnit/2,y:sqUnit/2},`${label} - ${value}`))};export default LegendItem;