legend LegendIcon.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 { css } from '@emotion/react';
import { memo } from 'react';

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

export type LegendIconProps = {
  readonly series: ChartSeries;
};

export const LegendIcon = memo(function LegendIcon({ series }: LegendIconProps) {
  switch (series.type) {
    case ChartSeriesType.BAR:
      return (
        <div
          css={css`
            background-color: ${series.color};
            border-radius: 4px;
            width: 16px;
            height: 16px;
          `}
        />
      );
    case ChartSeriesType.DOTTED_LINE:
      return (
        <svg
          fill="none"
          height="2"
          viewBox="0 0 11 2"
          width="11"
          css={css`
            flex: none;
          `}
        >
          <path
            d="M0 1H11"
            stroke={series.color}
            strokeDasharray="4.5 2"
            strokeWidth="1.5"
          />
        </svg>
      );
    case ChartSeriesType.LINE:
      return (
        <div
          css={css`
            background-color: ${series.color};
            border-radius: 16px;
            width: 8px;
            height: 8px;
          `}
        />
      );
  }
});