All files / libs/reporting/dashboards/components/src/lib/home-legacy/donut-chart ActiveShape.tsx

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo } from 'react';
import { Sector } from 'recharts';

import { type CurrencySymbolsEnum } from '@amalia/ext/iso-4217';
import { assert } from '@amalia/ext/typescript';
import { useFormatAmount, useFormatPercent } from '@amalia/kernel/intl/components';

interface ActiveShapeProps {
  readonly cx?: number;
  readonly cy?: number;
  readonly innerRadius?: number;
  readonly outerRadius?: number;
  readonly startAngle?: number;
  readonly endAngle?: number;
  readonly fill?: string;
  readonly payload?: { name?: string };
  readonly value?: number;
  readonly currency: CurrencySymbolsEnum;
  readonly percent?: number;
}

export const ActiveShape = memo(function ActiveShape({
  cx,
  cy,
  innerRadius,
  outerRadius,
  startAngle,
  endAngle,
  fill,
  payload,
  value,
  currency,
  percent,
}: ActiveShapeProps) {
  assert(cy, 'cy is required');

  const formatAmount = useFormatAmount();
  const formatPercent = useFormatPercent();

  return (
    <g>
      <text
        dy={8}
        textAnchor="middle"
        x={cx}
        y={cy - 16}
        css={(theme) => css`
          fill: ${theme.ds.colors.gray[900]};

          [data-color-scheme='dark'] & {
            fill: ${theme.ds.colors.gray[100]};
          }
        `}
      >
        {formatAmount(value ?? 0, currency)}
      </text>
      <text
        dy={8}
        textAnchor="middle"
        x={cx}
        y={cy}
        css={(theme) => css`
          fill: ${theme.ds.colors.gray[700]};

          [data-color-scheme='dark'] & {
            fill: ${theme.ds.colors.gray[400]};
          }
        `}
      >
        {formatPercent(percent ?? 0, { intlOptions: { maximumFractionDigits: 0 } })}
      </text>
      <text
        dy={8}
        strokeWidth={1}
        textAnchor="middle"
        x={cx}
        y={cy + 16}
        css={(theme) => css`
          width: 80px;

          fill: ${theme.ds.colors.gray[700]};

          [data-color-scheme='dark'] & {
            fill: ${theme.ds.colors.gray[400]};
          }
        `}
      >
        {payload?.name?.substring(0, 18)}
      </text>
      <Sector
        cx={cx}
        cy={cy}
        endAngle={endAngle}
        fill={fill}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
      />
    </g>
  );
});