All files / libs/reporting/dashboards/components/src/lib/payout-and-performance-chart useChartSeries.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useTheme } from '@emotion/react';
import { pickBy } from 'lodash-es';
import { useMemo } from 'react';
import { useIntl } from 'react-intl';

import { useColorSchemeContext } from '@allshares/studio-design-system';
import { FormatsEnum } from '@amalia/data-capture/fields/types';
import { useHighlightedKpiColors } from '@amalia/payout-definition/plans/components';
import { type PayoutAndPerformanceChartStatistics } from '@amalia/reporting/dashboards/types';

import { ChartSeriesType, type ChartSeries } from './chartSeries';
import { findPayoutAndPerformanceChartStatisticsKpiColumns } from './kpiColumns.finder';

export const useChartSeries = (statistics?: PayoutAndPerformanceChartStatistics) => {
  const theme = useTheme();
  const { colorScheme } = useColorSchemeContext();
  const { formatMessage } = useIntl();

  const highlightedKpiColors = useHighlightedKpiColors();

  const [kpi1, kpi2] = useMemo(() => {
    const kpiColumns = findPayoutAndPerformanceChartStatisticsKpiColumns(statistics);
    return [kpiColumns.at(0), kpiColumns.at(1)];
  }, [statistics]);

  const amountDefinitionName = statistics?.definitions.ruleMetricPayment__value?.identifier;
  const amountFormat = statistics?.definitions.ruleMetricPayment__value?.format;

  const seriesMetadata: Record<string, ChartSeries> = useMemo(
    () =>
      pickBy(
        {
          [amountDefinitionName ?? '']: amountDefinitionName
            ? {
                label: formatMessage({ defaultMessage: 'Commission' }),
                name: amountDefinitionName,
                color: colorScheme === 'dark' ? theme.ds.hues.blue[700] : theme.ds.hues.blue[900],
                type: ChartSeriesType.BAR,
                format: amountFormat ?? FormatsEnum.currency,
                dataKey: `${amountDefinitionName}.value`,
              }
            : undefined,

          [`${amountDefinitionName}__average`]: amountDefinitionName
            ? {
                label: formatMessage({ defaultMessage: 'Commission average' }),
                name: 'average',
                color: `${colorScheme === 'dark' ? theme.ds.hues.blue[400] : theme.ds.hues.blue[900]}80`, // 50% opacity in #RRGGBBAA format.
                type: ChartSeriesType.DOTTED_LINE,
                format: amountFormat ?? FormatsEnum.currency,
                dataKey: `${amountDefinitionName}__average`,
              }
            : undefined,

          [kpi1?.identifier ?? '']: kpi1
            ? {
                label: kpi1.label,
                name: kpi1.identifier,
                color: highlightedKpiColors.primary,
                type: ChartSeriesType.LINE,
                format: FormatsEnum.percent,
                dataKey: kpi1.identifier,
              }
            : undefined,

          [kpi2?.identifier ?? '']: kpi2
            ? {
                label: kpi2.label,
                name: kpi2.identifier,
                color: highlightedKpiColors.secondary,
                type: ChartSeriesType.LINE,
                format: FormatsEnum.percent,
                dataKey: kpi2.identifier,
              }
            : undefined,
        },
        (seriesDefinition) => !!seriesDefinition,
      ),
    [formatMessage, theme, highlightedKpiColors, colorScheme, kpi1, kpi2, amountDefinitionName, amountFormat],
  );

  return {
    seriesMetadata,
    kpi1DataKey: kpi1?.identifier,
    kpi2DataKey: kpi2?.identifier,
  };
};