piechar={ const mainWrapper = html`

`; const chartRow = html`

`; // Title for the entire section const sectionTitle = html`

Experiences of people with dreadlocks: Harassment and police fairness

`; const title1 = html`

People with dreadlocks face discrimination or harassment in Uganda

`; const container1 = html`

`; const title2 = html`

Police treat people with dreadlocks fairly

`; const container2 = html`

`; const chartContainer1 = html`

${title1} ${container1}

`; const chartContainer2 = html`

${title2} ${container2}

`; const logoWidth = 150; const logoHeight = (130 / 910) * logoWidth; const noteContent ="Note: The charts represent the collective responses of 133 Ugandan participants from a survey conducted by the CCIJ between August and October 2023. This data includes perspectives from all participants, both those who have and those who have not worn dreadlocks." const data_source = html`

${noteContent}

Data Source: Online survey conducted by CCIJ

`; // Add the section title to the main wrapper mainWrapper.appendChild(sectionTitle); // Add chart containers to the row container chartRow.appendChild(chartContainer1); chartRow.appendChild(chartContainer2); // Append the chart row to the main wrapper mainWrapper.appendChild(chartRow); mainWrapper.appendChild(data_source); yield mainWrapper; const { Util } = G2; const plot1 = new G2Plot.Pie(container1, { data: [ { Opinion: "Strongly agree", Number: 28, Percent: 0.2105 }, { Opinion: "Agree", Number: 33, Percent: 0.2481 }, { Opinion: "Neutral", Number: 22, Percent: 0.1654 }, { Opinion: "Disagree", Number: 24, Percent: 0.1805 }, { Opinion: "Strongly disagree", Number: 26, Percent: 0.1955 } ], meta: { value: { formatter: (v) => `${(v * 100).toFixed(0)}%`, }, }, angleField: 'Percent', colorField: 'Opinion', radius: 0.8, height: 230, // change color mapping for the first chart here color: (d) => { switch (d.Opinion) { case 'Strongly disagree': return '#e8694a'; case 'Disagree': return '#f7ae9c'; case 'Neutral': return '#e0e3ea'; case 'Agree': return '#94b2f2'; case 'Strongly agree': return '#5b8ef8'; default: return '#000000'; // Default color if no match } }, legend:{ position:"left", flipPage:false } , label: { type: 'inner', offset: '-30%', autoRotate: false, content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, style: { fontSize: 14, textAlign: 'center', fill: 'rgba(0, 0, 0, 0.65)' }}, tooltip:{ formatter: (datum) => { return { name: datum.Opinion, value:+ (datum.Percent* 100).toFixed(0) + '%' }; }} }) const plot2 = new G2Plot.Pie(container2, { data:[ { Opinion: "Strongly agree", Number: 7, Percent: 0.0526 }, { Opinion: "Agree", Number: 15, Percent: 0.1128 }, { Opinion: "Neutral", Number: 22, Percent: 0.1654 }, { Opinion: "Disagree", Number: 44, Percent: 0.3308 }, { Opinion: "Strongly disagree", Number: 45, Percent: 0.3383 } ] , meta: { value: { formatter: (v) => `${(v * 100).toFixed(0)}%`, }, }, angleField: 'Percent', colorField: 'Opinion', radius: 0.8, height: 230, // change color mapping for the second chart here color: (d) => { switch (d.Opinion) { case 'Strongly disagree': return '#e8694a'; case 'Disagree': return '#f7ae9c'; case 'Neutral': return '#e0e3ea'; case 'Agree': return '#94b2f2'; case 'Strongly agree': return '#5b8ef8'; default: return '#000000'; // Default color if no match } }, legend: { position:"right", flipPage:false, visible: true, itemName: { style: { fill: 'transparent', cursor: 'default' } }, marker: { style: { fill: 'transparent', stroke: 'transparent' } } }, label: { type: 'inner', offset: '-30%', autoRotate: false, content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, style: { fontSize: 14, textAlign: 'center', fill: 'rgba(0, 0, 0, 0.65)' }, }, tooltip:{ formatter: (datum) => { return { name: datum.Opinion, value:+ (datum.Percent* 100).toFixed(0) + '%' }; }}, // interactions: [{ type: 'tooltip', enable: true }], }); plot1.render(); plot2.render(); function getPoint(view, xField, activeValue) { const { elements, coordinate } = view.geometries[0]; const element = elements.find((ele) => ele.getModel().data[xField] === activeValue); if (element) { const { radius, innerRadius, polarRadius } = coordinate; const center = coordinate.getCenter(); const { startAngle, endAngle } = Util.getAngle(element.getModel(), coordinate); const middleAngle = (startAngle + endAngle) / 2; const r = (polarRadius * (radius + innerRadius)) / 2; const x = r * Math.cos(middleAngle); const y = r * Math.sin(middleAngle); return { x: center.x + x, y: center.y + y, }; } return null; } // 监听事件，进行 Tooltip 联动 let inAction = null; plot1.on('tooltip:change', (e) => { if (inAction !== 'plot2') { const { data: eventData } = e; const point = getPoint(plot2.chart, 'Opinion', eventData.items?.[0]?.data?.Opinion); if (point) { inAction = 'plot1'; plot2.chart.showTooltip(point); } else { plot2.chart.hideTooltip(); } } }); plot1.on('tooltip:hide', (e) => { if (inAction) { inAction = null; plot2.chart.hideTooltip(); } }); plot2.on('tooltip:change', (e) => { if (inAction !== 'plot1') { const { data: eventData } = e; inAction = 'plot2'; const point = getPoint(plot1.chart, 'Opinion', eventData.items?.[0]?.data?.Opinion); if (point) { plot1.chart.showTooltip(point); } else { plot1.chart.hideTooltip(); } } }); plot2.on('tooltip:hide', (e) => { if (inAction) { inAction = null; plot1.chart.hideTooltip(); } }); }