tracing LtiTracingActiveKpiLine.tsx

0% Statements 0/54

0% Branches 0/1

0% Functions 0/1

0% Lines 0/54

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { memo } from 'react';
import { FormattedMessage, FormattedNumber } from 'react-intl';

import { FormattedPercent } from '@amalia/kernel/intl/components';
import { type LtiPlanKpi } from '@amalia/lti/types';
import {
  TracingChar,
  TracingFormulaContainer,
  TracingLayerLayout,
  TracingNode,
} from '@amalia/payout-calculation/statements/tracing/components';

interface LtiTracingActiveKpiLineProps {
  readonly kpi: LtiPlanKpi;
  readonly outcome: number;
  readonly grantedShares: number;
}

export const LtiTracingActiveKpiLine = memo(function LtiTracingActiveKpiLine({
  kpi,
  outcome,
  grantedShares,
}: LtiTracingActiveKpiLineProps) {
  return (
    <TracingLayerLayout>
      <TracingFormulaContainer displayMode="MODAL">
        <TracingNode
          value={<FormattedPercent value={outcome} />}
          label={
            <FormattedMessage
              defaultMessage="{kpi} outcome percentage"
              values={{ kpi: kpi.name }}
            />
          }
        />
        <TracingChar char="*" />
        <TracingNode
          label={<FormattedMessage defaultMessage="Granted shares" />}
          value={<FormattedNumber value={grantedShares} />}
        />
        <TracingChar char="*" />
        <TracingNode
          value={<FormattedPercent value={kpi.weight} />}
          label={
            <FormattedMessage
              defaultMessage="{kpi} weight"
              values={{ kpi: kpi.name }}
            />
          }
        />
      </TracingFormulaContainer>
    </TracingLayerLayout>
  );
});