donut-chart DonutAnnotation.tsx

0% Statements 0/86

0% Branches 0/1

0% Functions 0/1

0% Lines 0/86

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

import { css } from '@emotion/react';
import { memo, type Dispatch, type SetStateAction } from 'react';

import { Group, Typography } from '@allshares/studio-design-system';
import { type CurrencySymbolsEnum } from '@amalia/ext/iso-4217';
import { FormattedAmount } from '@amalia/kernel/intl/components';

import { type DataDonut } from './DonutChart.types';

interface DonutAnnotationProps {
  readonly activeSection: number | undefined;
  readonly setActiveSection: Dispatch<SetStateAction<number | undefined>>;
  readonly annotationIndex: number;
  readonly colors: string[];
  readonly currency: CurrencySymbolsEnum;
  readonly entry: DataDonut;
}

export const DonutAnnotation = memo(function DonutAnnotation({
  activeSection,
  setActiveSection,
  annotationIndex,
  colors,
  currency,
  entry,
}: DonutAnnotationProps) {
  return (
    <Group
      key={`cell-${annotationIndex + 1}`}
      align="center"
      data-testid="donut-annotation"
      gap={8}
      css={(theme) => css`
        background-color: ${activeSection === annotationIndex
          ? colors[annotationIndex % colors.length]
          : theme.ds.colors.gray[50]};
        height: 35px;
        padding: 8px;
        width: 100%;

        [data-color-scheme='dark'] & {
          background-color: ${activeSection === annotationIndex
            ? colors[annotationIndex % colors.length]
            : theme.ds.colors.dark[700]};

          &:hover {
            color: ${theme.ds.colors.gray[900]};
          }
        }
      `}
      onMouseLeave={() => setActiveSection(undefined)}
      onMouseOver={() => setActiveSection(annotationIndex)}
    >
      <div
        id={`donut-annotation-${annotationIndex + 1}`}
        css={(theme) => css`
          width: 10px;
          height: 10px;
          border-radius: ${theme.ds.borderRadiuses.round};
          background-color: ${colors[annotationIndex % colors.length]};
          border: ${activeSection === annotationIndex ? '2px' : '0px'} solid ${theme.ds.colors.gray[0]};

          [data-color-scheme='dark'] & {
            border: ${activeSection === annotationIndex ? '2px' : '0px'} solid ${theme.ds.colors.dark[800]};
          }
        `}
      />

      <Typography
        variant="bodyBaseRegular"
        css={css`
          flex: 1;
        `}
      >
        {entry.name}
      </Typography>

      <Typography variant="bodyBaseMedium">
        <FormattedAmount
          currencySymbol={currency}
          value={entry.value}
        />
      </Typography>
    </Group>
  );
});