-
Notifications
You must be signed in to change notification settings - Fork 1
/
profitAndLossLegend.jsx
69 lines (64 loc) · 1.6 KB
/
profitAndLossLegend.jsx
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
// eslint-disable-next-line filenames/match-exported,filenames/match-regex
import "chartjs-adapter-date-fns";
import React from "react";
const buttonGroupStyle = {
marginRight: 4,
marginLeft: 4,
display: "flex"
};
const buttonStyle = (includeShowMore) => ({
marginRight: 4,
flex: `0 1 ${includeShowMore ? 20 : 25}%`
});
export default function profitAndLossLegend({
datasets,
onToggleDataset,
onTriggerExpandView,
includeShowMore = true,
isSmall = true
}) {
return <>
<style>{`
.wk-button.inactive {
background-color: #ccc !important;
}
`}</style>
<div className="wk-button-group-right" style={buttonGroupStyle}>
{!isSmall && datasets.map((dataset, index) => renderLegendItem({
dataset,
index,
onToggleDataset,
includeShowMore
}))}
{includeShowMore && renderMoreButton({ onTriggerExpandView })}
</div>
</>;
}
function renderLegendItem({ dataset, index, onToggleDataset, includeShowMore }) {
let isDisabled = dataset.hidden;
return (
<button
key={index}
className={`wk-button ${isDisabled ? "inactive" : ""}`}
style={{
...buttonStyle(includeShowMore),
backgroundColor: dataset.type === "line" ? dataset.borderColor : dataset.backgroundColor
}}
onClick={(event) => onToggleDataset(dataset, index, event)}
>
{dataset.label}
</button>
);
}
function renderMoreButton({ onTriggerExpandView }) {
return (
<button
className="wk-button wk-button-text wk-button-icon-right"
style={buttonStyle(true)}
type="button"
onClick={onTriggerExpandView}
>
Show more<span aria-hidden="true" className="wk-icon-arrow-right"/>
</button>
);
}