import React from "react"; import tags from "./tags.json"; const excluded = ["Dummy", "Tags"]; export const MrDoughnut = () => { const tagData = tags.allMdx.edges .reduce((items, item) => { const { tags } = item.node.frontmatter; tags.map((tag) => items.push(tag)); return items; }, []) .reduce((items, item) => { const existingItem = items.find((index) => index.tag === item); if (existingItem) { existingItem.count += 1; } else { items.push({ tag: item, count: 1 }); } return items; }, []) .filter((item) => !excluded.includes(item.tag)) .sort((a, b) => b.count - a.count) .slice(0, 5) .map((item, index, array) => { const { count } = item; const countTotal = array.reduce((a, b) => a + b.count, 0); const percentage = (count / countTotal) * 100; const remainder = 100 - percentage; return { ...item, percentage: percentage, remainder: remainder }; }); const colors = ["#ff6090", "#3f51b5", "#00bcd4", "#8bc34a", "#ffc107"]; return (

Top 5 tags

paulie.dev

{tagData.map((item, index) => { const { tag, percentage } = item; return (

{tag}

{`${Math.abs(percentage).toFixed(2)}%`}

); })}

); };

Create an Svg Doughnut Chart