blob: e28d6ad6bab60e9d853b18ddc21d7bd54fe9e3ba (
plain)
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
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
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: type === 'line' ? item.strokeStyle?.toString() : item.fillStyle?.toString() }"></span>
{{ item.text }}
</button>
</div>
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
import { Chart, LegendItem } from 'chart.js';
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;
if (type.value === 'pie' || type.value === 'doughnut') {
// Pie and doughnut charts only have a single dataset and visibility is per item
if (item.index != null) chart.value.toggleDataVisibility(item.index);
} else {
if (item.datasetIndex != null) chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex));
}
chart.value.update();
}
defineExpose({
update,
});
</script>
<style lang="scss" module>
.root {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
&:global {
> .item {
font-size: 85%;
padding: 4px 12px 4px 8px;
border: solid 1px var(--MI_THEME-divider);
border-radius: var(--MI-radius-ellipse);
&:hover {
border-color: var(--MI_THEME-inputBorderHover);
}
&.disabled {
text-decoration: line-through;
opacity: 0.5;
}
> .box {
display: inline-block;
width: 12px;
height: 12px;
border-radius: var(--MI-radius-full);
vertical-align: -10%;
}
}
}
}
@container (max-width: 500px) {
.root {
font-size: 90%;
gap: 6px;
}
}
</style>
|
