import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts"; import styled, { css, useTheme } from "styled-components"; const StyledTransmissionChart = styled.div` ${({ theme }) => css` position: relative; background: white; border-radius: 0.5em; padding: 2.5em 2em; box-sizing: border-box; min-height: 36em; .head { color: ${theme.dark}; font-family: ${theme.fontFancy}; font-size: 2.1em; text-transform: uppercase; margin-bottom: 0.5em; line-height: 1.1; text-align: center; } .row { display: flex; align-items: center; } .chart-wrap { width: 28em; height: 26em; margin-right: 1.5em; } `} `; const LegendItem = styled.div<{ typeColor: string }>` ${({ theme, typeColor }) => css` font-size: 1.5em; margin: 0.2em 0; position: relative; padding-left: 1.15em; :before { position: absolute; left: 0em; top: 0.25em; content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; margin-right: 0.5em; } span { color: ${theme.teal}; font-weight: bold; } :before { background-color: ${typeColor}; } `} `; const TransmissionChart = ({ data = [] }) => { const theme = useTheme(); const chartColors = [ theme.teal, theme.green, theme.navy, theme.yellow, "#956828", ]; return ( <StyledTransmissionChart> <div className="head">Source of cases</div> <div className="row"> <div className="chart-wrap"> <ResponsiveContainer width="100%" height="100%"> <PieChart> <Pie dataKey="percent" data={data} outerRadius="100%"> {data.map((_, index) => ( <Cell key={`cell-${index}`} fill={chartColors[index % chartColors.length]} /> ))} </Pie> </PieChart> </ResponsiveContainer> </div> <div> {data.map((item: any, i: number) => ( <LegendItem key={i} typeColor={chartColors[i]}> {item.type}: <span>{item.percent}</span> </LegendItem> ))} </div> </div> </StyledTransmissionChart> ); }; export default TransmissionChart;