rechart-pie-chart.js

import * as React from 'react';
import styled from 'styled-components';
import { naira } from 'utils/NairaFormat';
import { Box, Flex, Grid } from '@chakra-ui/core';
import { EmojiWrapper } from '../Dashboard/styles';
import { Label, PieChart, Pie, Tooltip, Cell } from 'recharts';

const COLORS = [
  '#42B2F7',
  '#25D1A2',
  '#005199',
  '#8D45CD',
  '#FFBF43',
  '#C5E2FC',
  '#0AA379',
];

const data = [
  {
    index: 0,
    name: 'Group A',
    value: 2400,
    count: 10,
  },
  {
    index: 1,
    name: 'Group B',
    value: 4567,
    count: 1,
  },
  {
    index: 2,
    name: 'Group C',
    value: 1398,
    count: 12,
  },
  {
    index: 3,
    name: 'Group D',
    value: 9800,
    count: 14,
  },
  {
    index: 4,
    name: 'Group E',
    value: 3908,
    count: 15,
  },
  {
    index: 5,
    name: 'Group F',
    value: 4800,
    count: 3,
  },
  {
    index: 6,
    name: 'Group G',
    value: 4800,
    count: 10,
  },
];

export const PieChartComponent = React.memo(() => {
  return (
    <Box pt="1.5rem" pb="2.625rem">
      <Flex
        pb="4.5rem"
        align="center"
        position="relative"
        flexDirection="column"
      >
        <PieChart width={300} height={300}>
          <Tooltip
            content={<MemoizedTooltip />}
            coordinate={{ x: 100, y: 300 }}
            cursor={{ fill: 'transparent' }}
          />

          <Pie
            cx="50%"
            cy="50%"
            data={data}
            nameKey="name"
            fill="#82ca9d"
            dataKey="value"
            paddingAngle={1}
            innerRadius={'75%'}
            outerRadius={'100%'}
          >
            <Label
              position="center"
              value="Spending Category"
              style={{
                fontSize: '90%',
                fill: '#737a91',
                textAnchor: 'middle',
                fontFamily: 'MaisonNeue',
              }}
            />

            {data.map((_, index) => (
              <Cell
                key={`cell-${index}`}
                fill={COLORS[index % COLORS.length]}
              />
            ))}
          </Pie>
        </PieChart>
      </Flex>

      <Grid
        rowGap="2rem"
        gridTemplateColumns={`repeat(auto-fit, minmax(240px, 1fr))`}
      >
        {data.map((value, index) => (
          <Box key={`graph-key-${index}`}>
            <Flex flex={1} align="center">
              <EmojiWrapper bc={COLORS[value.index]} brdwidth="2px">
                <span role="img" aria-label="money-wings">
                  💸
                </span>
              </EmojiWrapper>

              <CategoryLabel>
                <p className="category-type">{value.name}</p>
                <p className="category-amount">
                  {naira({
                    amount: value.value,
                    opt: {
                      minimumFractionDigits: 0,
                    },
                  })}
                </p>

                <p className="category-count">
                  {value.count}{' '}
                  {value.count > 1 ? `Transactions` : `Transaction`}
                </p>
              </CategoryLabel>
            </Flex>
          </Box>
        ))}
      </Grid>
    </Box>
  );
});

const MemoizedTooltip = React.memo(CustomToolTip);

function CustomToolTip(data: Record<string, unknown>) {
  const { payload = [] } = data as {
    payload: [Record<string, unknown>, Record<string, unknown>];
  };

  const [info] = payload;

  if (info) {
    const { payload: singleData } = info as {
      payload: {
        index: number;
        name: string;
        value: string | number;
        count: number;
      };
    };

    return (
      <div
        style={{
          ...TooltipStyles.wrapper,
          border: `1.5px solid ${COLORS[singleData.index]}`,
        }}
      >
        <p style={TooltipStyles.labels}>{singleData.name}</p>

        <div>
          <p style={TooltipStyles.key}>
            Amount:{' '}
            <span style={TooltipStyles.value}>
              {naira({
                amount: singleData.value,
                opt: {
                  minimumFractionDigits: 0,
                },
              })}
            </span>
          </p>
          <p style={TooltipStyles.key}>
            Transaction:{' '}
            <span style={TooltipStyles.value}>{singleData.count}</span>
          </p>
        </div>
      </div>
    );
  }

  return null;
}

const TooltipStyles = {
  wrapper: {
    padding: 12,
    borderRadius: 8,
    background: '#fff',
    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
  },
  labels: {
    fontWeight: 600,
    paddingBottom: 4,
    color: '#000000',
    fontSize: '0.75rem',
    fontFamily: 'MaisonNeue',
  },
  key: {
    fontWeight: 500,
    color: '#737a91',
    paddingBottom: 4,
    fontSize: '0.75rem',
    fontFamily: 'MaisonNeue',
  },
  value: {
    color: '#000000',
    fontWeight: 600,
  },
};

const CategoryLabel = styled(Box)`
  p.category-type {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: #000000;
  }

  p.category-amount {
    font-weight: 600;
  }

  p.category-count {
    font-size: 15px;
    line-height: 25px;
    font-weight: normal;
    color: #737a91;
  }
`;