File size: 4,092 Bytes
76a7a50 | 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 145 146 147 | <!--
Matomo - free/libre analytics platform
@link https://matomo.org
@license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->
<template>
<div
class="metrics-picker__options"
:role="multiselect ? 'group' : 'radiogroup'"
:aria-label="translate('General_ChooseMetrics')"
>
<label
class="metrics-picker__column metrics-picker__label"
v-for="columnConfig in selectableColumns"
:key="columnConfig.column"
>
<input
class="filled-in"
:type="multiselect ? 'checkbox' : 'radio'"
:checked="!!columnStates[columnConfig.column]"
@change="optionSelected(columnConfig.column, columnStates)"
@keydown.enter.prevent="optionSelected(columnConfig.column, columnStates)"
/>
<span aria-hidden="true"></span>
<span class="metrics-picker__title">{{ columnConfig.translation }}</span>
</label>
<p
class="metrics-picker__headline"
v-if="selectableRows.length"
>
{{ translate('General_RecordsToPlot') }}
</p>
<label
class="metrics-picker__row metrics-picker__label"
v-for="rowConfig in selectableRows"
:key="rowConfig.matcher"
>
<input
class="filled-in"
:type="multiselect ? 'checkbox' : 'radio'"
:checked="!!rowStates[rowConfig.matcher]"
@change="optionSelected(rowConfig.matcher, rowStates)"
@keydown.enter.prevent="optionSelected(rowConfig.matcher, rowStates)"
/>
<span aria-hidden="true"></span>
<span class="metrics-picker__title">{{ rowConfig.label }}</span>
</label>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface SelectableColumnInfo {
column: string;
translation: string;
}
interface SelectableRowInfo {
matcher: string;
label: string;
}
interface MetricsPickerOptionsState {
columnStates: Record<string, boolean>;
rowStates: Record<string, boolean>;
}
// Declared outside the component because it is needed inside data(), before the
// component's methods are available.
function getInitialOptionStates(
allOptions: (SelectableColumnInfo | SelectableRowInfo)[],
selectedOptions: string[],
): Record<string, boolean> {
const states: Record<string, boolean> = {};
allOptions.forEach((columnConfig) => {
const name = (columnConfig as SelectableColumnInfo).column
|| (columnConfig as SelectableRowInfo).matcher;
states[name] = false;
});
selectedOptions.forEach((column) => {
states[column] = true;
});
return states;
}
export default defineComponent({
props: {
multiselect: Boolean,
selectableColumns: {
type: Array,
default: () => [],
},
selectableRows: {
type: Array,
default: () => [],
},
selectedColumns: {
type: Array,
default: () => [],
},
selectedRows: {
type: Array,
default: () => [],
},
},
data(): MetricsPickerOptionsState {
return {
columnStates: getInitialOptionStates(
this.selectableColumns as SelectableColumnInfo[],
this.selectedColumns as string[],
),
rowStates: getInitialOptionStates(
this.selectableRows as SelectableRowInfo[],
this.selectedRows as string[],
),
};
},
emits: ['select'],
methods: {
unselectOptions(optionStates: Record<string, boolean>) {
Object.keys(optionStates).forEach((optionName) => {
optionStates[optionName] = false;
});
},
getSelected(optionStates: Record<string, boolean>) {
return Object.keys(optionStates).filter((optionName) => !!optionStates[optionName]);
},
optionSelected(optionValue: string, optionStates: Record<string, boolean>) {
if (!this.multiselect) {
this.unselectOptions(this.columnStates);
this.unselectOptions(this.rowStates);
}
optionStates[optionValue] = !optionStates[optionValue];
this.$emit('select', {
columns: this.getSelected(this.columnStates),
rows: this.getSelected(this.rowStates),
});
},
},
});
</script>
|