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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
/*!
* Piwik - free/libre analytics platform
*
* @link http://piwik.org
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
/**
* This series picker component is a popup that displays a list of metrics/row
* values that can be selected. It's used by certain datatable visualizations
* to allow users to select different data series for display.
*
* Inputs:
* - multiselect: true if the picker should allow selecting multiple items, false
* if otherwise.
* - selectableColumns: the list of selectable metric values. must be a list of
* objects with the following properties:
* * column: the ID of the column, eg, nb_visits
* * translation: the translated text for the column, eg, Visits
* - selectableRows: the list of selectable row values. must be a list of objects
* with the following properties:
* * matcher: the ID of the row
* * label: the display text for the row
* - selectedColumns: the list of selected columns. should be a list of strings
* that correspond to the 'column' property in selectableColumns.
* - selectedRows: the list of selected rows. should be a list of strings that
* correspond to the 'matcher' property in selectableRows.
* - onSelect: expression invoked when a user makes a new selection. invoked
* with the following local variables:
* * columns: list of IDs of new selected columns, if any
* * rows: list of matchers of new selected rows, if any
*
* Usage:
* <piwik-series-picker />
*/
(function () {
angular.module('piwikApp').component('piwikSeriesPicker', {
templateUrl: 'plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.html?cb=' + piwik.cacheBuster,
bindings: {
multiselect: '<',
selectableColumns: '<',
selectableRows: '<',
selectedColumns: '<',
selectedRows: '<',
onSelect: '&'
},
controller: SeriesPickerController
});
SeriesPickerController.$inject = [];
function SeriesPickerController() {
var vm = this;
vm.isPopupVisible = false;
// note: column & row states are separated since it's technically possible (though
// highly improbable) that a row value matcher will be the same as a recognized column.
vm.columnStates = {};
vm.rowStates = {};
vm.optionSelected = optionSelected;
vm.onLeavePopup = onLeavePopup;
vm.$onInit = $onInit;
function $onInit() {
vm.columnStates = getInitialOptionStates(vm.selectableColumns, vm.selectedColumns);
vm.rowStates = getInitialOptionStates(vm.selectableRows, vm.selectedRows);
}
function getInitialOptionStates(allOptions, selectedOptions) {
var states = {};
allOptions.forEach(function (columnConfig) {
states[columnConfig.column || columnConfig.matcher] = false;
});
selectedOptions.forEach(function (column) {
states[column] = true;
});
return states;
}
function optionSelected(optionValue, optionStates) {
if (!vm.multiselect) {
unselectOptions(vm.columnStates);
unselectOptions(vm.rowStates);
}
optionStates[optionValue] = !optionStates[optionValue];
if (optionStates[optionValue]) {
triggerOnSelectAndClose();
}
}
function onLeavePopup() {
vm.isPopupVisible = false;
if (optionsChanged()) {
triggerOnSelectAndClose();
}
}
function triggerOnSelectAndClose() {
if (!vm.onSelect) {
return;
}
vm.isPopupVisible = false;
vm.onSelect({
columns: getSelected(vm.columnStates),
rows: getSelected(vm.rowStates)
});
}
function optionsChanged() {
return !arrayEqual(getSelected(vm.columnStates), vm.selectedColumns)
|| !arrayEqual(getSelected(vm.rowStates), vm.selectedRows);
}
function arrayEqual(lhs, rhs) {
if (lhs.length !== rhs.length) {
return false;
}
return lhs
.filter(function (element) { return rhs.indexOf(element) === -1; })
.length === 0;
}
function unselectOptions(optionStates) {
Object.keys(optionStates).forEach(function (optionName) {
optionStates[optionName] = false;
});
}
function getSelected(optionStates) {
return Object.keys(optionStates).filter(function (optionName) {
return !! optionStates[optionName];
});
}
}
})();
|
