forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vislib_vis_legend.html
99 lines (92 loc) · 4.24 KB
/
vislib_vis_legend.html
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
89
90
91
92
93
94
95
96
97
98
99
<div class="visLegend" ng-if="labels.length">
<button
type="button"
ng-click="toggleLegend()"
class="kuiCollapseButton visLegend__toggle"
ng-class="{'visLegend__toggle--isOpen': open}"
aria-label="{{::'common.ui.vis.visTypes.legend.toggleLegendButtonAriaLabel' | i18n: { defaultMessage: 'Toggle legend' } }}"
aria-expanded="{{!!open}}"
aria-controls="{{::legendId}}"
data-test-subj="vislibToggleLegend"
title="{{::'common.ui.vis.visTypes.legend.toggleLegendButtonTitle' | i18n: { defaultMessage: 'Toggle legend' } }}"
>
<icon type="'list'"></icon>
</button>
<ul class="visLegend__list" ng-show="open" id="{{::legendId}}">
<li
ng-repeat="legendData in labels track by legendData.label"
ng-mouseenter="highlight($event)"
ng-mouseleave="unhighlight($event)"
data-label="{{legendData.label}}"
class="visLegend__value color"
>
<div ng-keydown="onLegendEntryKeydown($event)">
<div
kbn-accessible-click
data-label="{{legendData.label}}"
ng-focus="highlight($event)"
ng-blur="unhighlight($event)"
ng-click="$parent.toggleDetails(legendData.label)"
ng-class="$parent.areDetailsVisible(legendData.label) ? 'visLegend__valueTitle--full' : 'visLegend__valueTitle--truncate'"
class="visLegend__valueTitle"
title="{{legendData.label}}"
aria-label="{{::'common.ui.vis.visTypes.legend.toggleOptionsButtonAriaLabel' | i18n: { defaultMessage: '{legendDataLabel}, toggle options', values: { legendDataLabel: legendData.label } } }}"
data-test-subj="legend-{{legendData.label}}"
>
<i
class="fa fa-circle"
ng-style="{color: getColor(legendData.label)}"
data-test-subj="legendSelectedColor-{{getColor(legendData.label)}}"
></i>
{{legendData.label}}
</div>
<div ng-if="$parent.areDetailsVisible(legendData.label)" class="visLegend__valueDetails">
<div
class="kuiButtonGroup kuiButtonGroup--united kuiButtonGroup--fullWidth"
ng-show="canFilter(legendData)"
>
<button
class="kuiButton kuiButton--basic kuiButton--small"
ng-click="filter(legendData, false)"
aria-label="{{::'common.ui.vis.visTypes.legend.filterForValueButtonAriaLabel' | i18n: { defaultMessage: 'Filter for value {legendDataLabel}', values: { legendDataLabel: legendData.label } } }}"
data-test-subj="legend-{{legendData.label}}-filterIn"
>
<span class="kuiIcon fa-search-plus"></span>
</button>
<button
class="kuiButton kuiButton--basic kuiButton--small"
ng-click="filter(legendData, true)"
aria-label="{{::'common.ui.vis.visTypes.legend.filterOutValueButtonAriaLabel' | i18n: { defaultMessage: 'Filter out value {legendDataLabel}', values: { legendDataLabel: legendData.label } } }}"
data-test-subj="legend-{{legendData.label}}-filterOut"
>
<span class="kuiIcon fa-search-minus"></span>
</button>
</div>
<div class="visLegend__valueColorPicker" role="listbox">
<span
id="{{legendId}}ColorPickerDesc"
class="euiScreenReaderOnly"
i18n-id="common.ui.vis.visTypes.legend.setColorScreenReaderDescription"
i18n-default-message="Set color for value {legendDataLabel}"
i18n-values="{ legendDataLabel: legendData.label }"
>
</span>
<i
ng-repeat="choice in colors"
kbn-accessible-click
role="option"
aria-label="{{choice}}"
aria-describedby="{{legendId}}ColorPickerDesc"
aria-selected="{{choice === getColor(legendData.label)}}"
ng-click="setColor(legendData.label, choice)"
ng-class="choice == getColor(legendData.label) ? 'fa-circle-o' : 'fa-circle'"
ng-style="{color: choice}" class="fa dot visLegend__valueColorPickerDot"
data-test-subj="legendSelectColor-{{choice}}"
>
</i>
</div>
</div>
</div>
</li>
</ul>
</div>