30 | {props.items.map((item: LegendItem) => (
31 |
32 |
38 |
39 | {item.name}
40 | {item.subtitle && (
41 |
42 | {item.subtitle}
43 |
44 | )}
45 |
46 |
47 | ))}
48 |
49 | );
50 | };
51 |
52 | export default Legend;
53 |
--------------------------------------------------------------------------------
/arthur_bench/server/js/packages/components/core/Charts/LineChart/components/styles.ts:
--------------------------------------------------------------------------------
1 | import primary from 'resources/colors/Arthur/primary';
2 | import secondary from 'resources/colors/Arthur/secondary';
3 | import { GRAPHIK } from 'resources/fonts';
4 |
5 | export const styles = {
6 | tooltipDate: {
7 | marginBottom: '10px',
8 | fontSize: '12px',
9 | },
10 | tooltipDatapoint: {
11 | fontSize: '14px',
12 | color: primary.eggplant,
13 | fontFamily: GRAPHIK,
14 | },
15 | tooltipDatapointLabel: {
16 | color: secondary.variant.eggplant.light,
17 | },
18 | tooltipDataColor: {
19 | display: 'inline-block',
20 | marginRight: '8px',
21 | width: '8px',
22 | height: '8px',
23 | borderRadius: '8px',
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/arthur_bench/server/js/packages/components/core/Charts/LineChart/index.ts:
--------------------------------------------------------------------------------
1 | import LineChart from './LineChart';
2 | export type { TGraphDataItem } from './typings';
3 |
4 | export default LineChart;
5 |
--------------------------------------------------------------------------------
/arthur_bench/server/js/packages/components/core/Checkbox/Checkbox.styles.ts:
--------------------------------------------------------------------------------
1 | import secondary from 'resources/colors/Arthur/secondary';
2 | import { MONO } from 'resources/fonts';
3 |
4 | const styles = {
5 | root: {
6 | display: 'flex',
7 | alignItems: 'center',
8 | overflow: 'hidden',
9 | },
10 | checkboxWrap: {
11 | display: 'flex',
12 | alignItems: 'center',
13 | justifyContent: 'center',
14 | position: 'relative',
15 | },
16 | checkbox: (theme: any, color: string) => ({
17 | width: '18px',
18 | height: '18px',
19 | border: '2px solid #E4E0E4',
20 | appearance: 'none',
21 | display: 'inline-block',
22 | boxSizing: 'border-box',
23 | margin: 0,
24 | padding: 0,
25 | borderRadius: '2px',
26 | cursor: 'pointer',
27 | ':hover': {
28 | borderColor: color ? color : theme.color_1,
29 | },
30 | ':checked': {
31 | borderColor: color ? color : theme.color_1,
32 | },
33 | }),
34 | label: {
35 | cursor: 'pointer',
36 | marginLeft: '10px',
37 | fontSize: '14px',
38 | fontFamily: MONO,
39 | overflow: 'hidden',
40 | whiteSpace: 'nowrap',
41 | textOverflow: 'ellipsis',
42 | },
43 | icon: (theme: any, color: string) => ({
44 | display: 'block',
45 | transform: 'rotate(-45deg)',
46 | position: 'absolute',
47 | top: '4.5px',
48 | width: '8px',
49 | height: '4px',
50 | border: `2px solid ${color ? color : theme.color_1}`,
51 | borderRight: 'none',
52 | borderTop: 'none',
53 | pointerEvents: 'none',
54 | }),
55 | };
56 |
57 | export default styles;
58 |
--------------------------------------------------------------------------------
/arthur_bench/server/js/packages/components/core/Checkbox/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useFela } from 'react-fela';
3 | import styles from './Checkbox.styles';
4 | import { CheckboxProps } from './typings';
5 |
6 | const Checkbox = (props: CheckboxProps) => {
7 | const { clickHandler, checked, label, color } = props;
8 | const { css, theme } = useFela();
9 |
10 | const handleChange = (e: React.ChangeEvent