YLPieChart = (data, config={}) => { const id = "ID" + Math.floor(Math.random() * 1000000); const svgWidth = config?.svgWidth ? config.svgWidth : 1100; const svgHeight = config?.svgHeight ? config.svgHeight : 600 const defaultFont = config?.defaultFont ? config.defaultFont : "Arial"; // Create the SVG container. const svg = d3.create("svg") .attr("class", "svg-chart-container") .attr("width", svgWidth) .attr("height", svgHeight) .attr("style", "max-width: 100%; height: auto;") .attr("font-family", defaultFont); const marginTop = config?.marginTop ? config.marginTop : 50; const marginBottom = config?.marginBottom ? config.marginBottom : 100; const marginRight = config?.marginRight ? config.marginRight : 100; const marginLeft = config?.marginLeft ? config.marginLeft : 180; const chartWidth = svgWidth - marginRight - marginLeft; const chartHeight = svgHeight - marginBottom - marginTop; const radius = Math.min(chartWidth, chartHeight) / 2; var innerRadius = radius * 0.7; if (innerRadius < 100) innerRadius = radius * 0.8; const chart = svg.append('g') .attr("class", "chart") .attr( "transform", "translate(" + marginLeft + "," + marginTop + ")" ); const centerPoint = chart.append('g') .attr("class", "center-point") .attr( "transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")" ); const defaultFontSize = config?.defaultFontSize ? config.defaultFontSize : 12; const percentCircleRadius = config?.percentCircleRadius ? config.percentCircleRadius : 14; const labelMargin = config?.labelMargin ? config.labelMargin : 20; const defaultTextFill = config?.defaultTextFill ? config.defaultTextFill : "#6F68A7"; const backCircleColor = config?.backCircleColor ? config.backCircleColor : "#EAF0FB"; const channels = ({x:config?.x ? config.x : "name", y:config?.y ? config.y : "value"}) const nameAccessor = (d) => d[channels.x]; const valueAccessor = (d) => d[channels.y]; const round = config?.round ? config.round : (d, sum) => Math.round((valueAccessor(d.data) / sum) * 100); const centerText = config?.centerText ? config.centerText : ``; const centerTextFontFamily = config?.centerTextFontFamily ? config.centerTextFontFamily : defaultFont; const groupingText = config?.groupingText ? config.groupingText : `Count`; const groupingTextFontFamily = config?.groupingTextFontFamily ? config.groupingTextFontFamily : defaultFont; const pieTextFontFamily = config?.pieTextFontFamily ? config.pieTextFontFamily : defaultFont; const dataTextFontFamily = config?.dataTextFontFamily ? config.dataTextFontFamily : defaultFont; const valueFormat = config?.valueFormat ? config.valueFormat : (d) => (d.toFixed(0))+ " m³"; const minAllowed = config?.minAllowed ? config.minAllowed : 0.02; const othersText = config?.othersText ? config.othersText :"Others"; const rect = svg.node().getBoundingClientRect(); const ctx = DOM.context2d(rect.width, rect.height); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(radius) .padAngle(0.02) .cornerRadius(1); const arcOuter = d3.arc() .innerRadius(arc.outerRadius()() + 2) .outerRadius(arc.outerRadius()() + 10); const arcLabel = d3.arc() .innerRadius(arcOuter.outerRadius()()) .outerRadius(arcOuter.outerRadius()() + 30); const pie = d3.pie() .value(valueAccessor) .sort(null); ////////// function drawCenterTexts() { const sum = d3.sum(data.map(valueAccessor)); const fo = centerPoint.append("foreignObject") .attr("class", "center-for-text") .attr("pointer-events", "none") .attr("x", -innerRadius) .attr("y", -innerRadius) .attr("width", innerRadius * 2) .attr("height", innerRadius * 2); fo.append("xhtml:div") .attr("class", "for-center-div") .html(`

${centerText}
${groupingText}
${valueFormat(sum)}

`); } function getTextWidth(text, { fontSize = 14, fontWeight = 400 } = {}) { ctx.font = `${fontWeight || ""} ${fontSize}px ${defaultFont} `; const measurement = ctx.measureText(text); return measurement.width+100; } function getPieData() { const sum = d3.sum(data, valueAccessor); let _data = data.filter((dataItem) => valueAccessor(dataItem) / sum >= minAllowed); const others = data.filter((dataItem) => valueAccessor(dataItem) / sum < minAllowed); if (others.length > 1) { let tmp = {}; tmp["items"] = others; tmp[channels.x] = othersText; tmp[channels.y] = d3.sum(others, valueAccessor); _data.push(tmp); } else { _data = data; } return pie(_data.sort((a,b)=>valueAccessor(a)/sum isRightSide(d)); const left = pieData.filter((d) => !isRightSide(d)); pieData.forEach((d, i, arr) => { d.xOffset = 0; if ((i != 0 && i != arr.length - 1) || arr.length < 20) { d.yOffset = 0; } else { d.yOffset = -30; } }); const process = (d, i, arr) => { if (i < 1) return; const prev = arr[i - 1]; const curr = d; const yPrev = arcLabel.centroid(prev)[1] + prev.yOffset; const yCurr = arcLabel.centroid(curr)[1]; if (isRightSide(curr) && yPrev + percentCircleRadius * 2 > yCurr) { curr.yOffset = yPrev + percentCircleRadius * 2 - yCurr + 2; } else if (!isRightSide(curr) && yPrev + percentCircleRadius * 2 > yCurr) { curr.yOffset = yPrev + percentCircleRadius * 2 - yCurr + 2; if (arr.length > 4) { if (i < 4 + arr.length / 10) { //curr.xOffset = -10-arr.length/2*1; } if (arr.length > 9) { curr.xOffset = 0; } } } }; right.forEach(process); left.reverse().forEach(process); let tmp = {}; tmp[channels.y]=1; centerPoint.append('path') .attr("class", "pie-background") .data(pie([tmp])) .attr("d", arcOuter) .attr("fill", backCircleColor); const pieG = centerPoint.append('g') .selectAll() .data(pieData); pieG.join("path") .attr("class", "pie-paths") .attr("d", arc) .attr("cursor", "pointer") .attr("fill", (d,i) => getColor(d,i)); pieG.join('polyline') .attr("class", "pie-label-line") .attr("points", (d) => { let textWidth = getTextWidth(d.data[channels.x] || "", { fontSize: defaultFontSize }) + labelMargin; if (isRightSide(d)) { textWidth = -textWidth;} return ` ${arc.centroid(d)[0]}, ${arc.centroid(d)[1]} ${arcLabel.centroid(correct(d))[0] + d.xOffset}, ${arcLabel.centroid(correct(d))[1] + d.yOffset} ${arcLabel.centroid(correct(d))[0] - textWidth + d.xOffset}, ${arcLabel.centroid(correct(d))[1] + d.yOffset} `; }) .attr("stroke", defaultTextFill) .attr("fill", "none") .attr("pointer-events", "none") .style("opacity", getLabelOpacity); pieG.join('circle') .attr("class", "pie-center-points") .attr("cx", (d) => arc.centroid(d)[0]) .attr("cy", (d) => arc.centroid(d)[1]) .style("opacity", getLabelOpacity) .attr("fill", "#FFFFFF") .attr("r", 2) .attr("pointer-events", "none"); pieG.join('text') .attr("class", "pie-texts") .text((d) => nameAccessor(d.data)) .attr("x", (d) => { let x = arcLabel.centroid(correct(d))[0]; if (isRightSide(d)) x += labelMargin - 5; else x -= labelMargin - 5; return x + d.xOffset; }) .attr("text-anchor", (d) => (isRightSide(d) ? "start" : "end")) .attr("font-size", defaultFontSize+2) .attr("font-family", pieTextFontFamily) .attr("font-weight", 'bold') .attr("y", (d) => arcLabel.centroid(correct(d))[1] - 4 + d.yOffset) .attr("fill", defaultTextFill) .style("opacity", getLabelOpacity); pieG.join('text') .attr("class", "pie-data-texts") .text((d) => valueFormat(valueAccessor(d.data))) .attr("x", (d) => { let x = arcLabel.centroid(correct(d))[0]; if (isRightSide(d)) x += labelMargin - 5; else x -= labelMargin + 15; return x + d.xOffset; }) .attr("text-anchor", (d) => (isRightSide(d) ? "start" : "end")) .attr("font-size", defaultFontSize-2) .attr("font-family", dataTextFontFamily) .attr("y", (d) => arcLabel.centroid(correct(d))[1] + 10 + d.yOffset) .attr("fill", defaultTextFill) .style("opacity", getLabelOpacity); pieG.join('text') .attr("class", "pie-percent-texts") .text((d) => round(d, sum) + "%") .attr("alignment-baseline", "middle") .attr("x", (d) => { let textWidth = getTextWidth(d.data[channels.x] || "", { fontSize: defaultFontSize }) + labelMargin + percentCircleRadius; if (isRightSide(d)) { textWidth = -textWidth;} return arcLabel.centroid(correct(d))[0] - textWidth + d.xOffset; }) .attr("y", (d) => arcLabel.centroid(correct(d))[1] + d.yOffset) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("font-family", defaultFont) .attr("fill", defaultTextFill) .style("opacity", getLabelOpacity); pieG.join('circle') .attr("class", "pie-percent-circle") .attr("stroke", defaultTextFill) .attr("r", percentCircleRadius) .style("opacity", getLabelOpacity) .attr("fill", "none") .attr("cx", (d) => { let textWidth = getTextWidth(d.data[channels.x] || "", { fontSize: defaultFontSize }) + labelMargin + percentCircleRadius; if (isRightSide(d)) { textWidth = -textWidth; } return arcLabel.centroid(correct(d))[0] - textWidth + d.xOffset; }) .attr( "cy", (d) => arcLabel.centroid(correct(d))[1] - 1.1 + d.yOffset ); } /////// function getLabelOpacity(pieItem) { if (Math.abs(pieItem.yOffset) > 130) { return 0; } return 1; } function getColor(d,i) { const sum = d3.sum(data.map(valueAccessor)); let codeColor = "e6deb2-dec367-ecb45b-ed8238-e07a5f-d9636c-ab90a4-85aab1-6a8782-869e80-80B266-aad09d-b5ddbf-9ac1ae-aea9a4-947f67".split("-").map((d) => `#${d}`).reverse() return ( d.data.color || codeColor[i] //d3.schemeSet1[hashCode(d.data[channels.x] + "") % d3.schemeSet1.length] ); } function isRightSide(n) { const d = correct(n); const midAngle = (d.startAngle + d.endAngle) / 2; if (midAngle <= Math.PI) return true; return false; } function correct(d) { return Object.assign({}, d, { startAngle: d.startAngle, endAngle: d.endAngle }); } // Get hashcode from string function hashCode(s) { for (var i = 0, h; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0; return Math.abs(h); } ////////// drawSlices(data); drawCenterTexts(); return svg.node(); }