diff options
Diffstat (limited to 'packages/frontend/src/components/MkChartLegend.vue')
| -rw-r--r-- | packages/frontend/src/components/MkChartLegend.vue | 14 |
1 files changed, 6 insertions, 8 deletions
diff --git a/packages/frontend/src/components/MkChartLegend.vue b/packages/frontend/src/components/MkChartLegend.vue index 1a1b4323d9..110eeca5db 100644 --- a/packages/frontend/src/components/MkChartLegend.vue +++ b/packages/frontend/src/components/MkChartLegend.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div :class="$style.root"> <button v-for="item in items" class="_button item" :class="{ disabled: item.hidden }" @click="onClick(item)"> - <span class="box" :style="{ background: chart.config.type === 'line' ? item.strokeStyle?.toString() : item.fillStyle?.toString() }"></span> + <span class="box" :style="{ background: type === 'line' ? item.strokeStyle?.toString() : item.fillStyle?.toString() }"></span> {{ item.text }} </button> </div> @@ -16,25 +16,23 @@ SPDX-License-Identifier: AGPL-3.0-only import { shallowRef } from 'vue'; import { Chart, LegendItem } from 'chart.js'; -const props = defineProps({ -}); - const chart = shallowRef<Chart>(); +const type = shallowRef<string>(); const items = shallowRef<LegendItem[]>([]); function update(_chart: Chart, _items: LegendItem[]) { chart.value = _chart, items.value = _items; + if ('type' in _chart.config) type.value = _chart.config.type; } function onClick(item: LegendItem) { if (chart.value == null) return; - const { type } = chart.value.config; - if (type === 'pie' || type === 'doughnut') { + if (type.value === 'pie' || type.value === 'doughnut') { // Pie and doughnut charts only have a single dataset and visibility is per item - chart.value.toggleDataVisibility(item.index); + if (item.index) chart.value.toggleDataVisibility(item.index); } else { - chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex)); + if (item.datasetIndex) chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex)); } chart.value.update(); } |