All files / libs/reporting/dashboards/components/src/lib/home-legacy/benchmark-by-plan-widget/benchmark-by-plan BenchmarkByPlan.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15x
 
 
 
 
26x
42x
 
 
 
26x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
 
import { CurrencySymbolsEnum } from '@amalia/ext/iso-4217';
import { CustomReportsPresetsEnum } from '@amalia/reporting/custom-reports/shared';
 
import { DashboardWidget } from '../../dashboard-widget/DashboardWidget';
import { DonutChart } from '../../donut-chart/DonutChart';
import { type DataDonut } from '../../donut-chart/DonutChart.types';
import { WidgetTitle } from '../../widget-title/WidgetTitle';
 
interface BenchmarkData {
  name: string;
  value: number | null;
}
type BenchmarkByPlanProps = {
  readonly currency?: CurrencySymbolsEnum;
  readonly data: BenchmarkData[];
  readonly loading?: boolean;
};
 
export const BenchmarkByPlan = memo(function BenchmarkByPlan({
  currency = CurrencySymbolsEnum.EUR,
  data,
  loading = true,
}: BenchmarkByPlanProps) {
  const cleanedData = useMemo(
    () => data.filter((row): row is DataDonut => row.value !== null && row.value >= 0),
    [data],
  );
 
  return (
    <DashboardWidget>
      <WidgetTitle
        customReportId={CustomReportsPresetsEnum.PRESET_BENCHMARK_BY_PLAN}
        title={<FormattedMessage defaultMessage="Benchmark by plans" />}
      />
 
      <DonutChart
        currency={currency}
        data={cleanedData}
        donutPadding={100}
        hideTooltip={false}
        innerRadius={80}
        loading={loading}
        thickness={15}
      />
    </DashboardWidget>
  );
});