to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
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>
|
|
{{ item.text }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { Chart, LegendItem } from 'chart.js';
|
|
|
|
const props = defineProps({
|
|
});
|
|
|
|
let chart = $shallowRef<Chart>();
|
|
let items = $shallowRef<LegendItem[]>([]);
|
|
|
|
function update(_chart: Chart, _items: LegendItem[]) {
|
|
chart = _chart,
|
|
items = _items;
|
|
}
|
|
|
|
function onClick(item: LegendItem) {
|
|
if (chart == null) return;
|
|
const { type } = chart.config;
|
|
if (type === 'pie' || type === 'doughnut') {
|
|
// Pie and doughnut charts only have a single dataset and visibility is per item
|
|
chart.toggleDataVisibility(item.index);
|
|
} else {
|
|
chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
|
|
}
|
|
chart.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(--divider);
|
|
border-radius: var(--radius-ellipse);
|
|
|
|
&:hover {
|
|
border-color: var(--inputBorderHover);
|
|
}
|
|
|
|
&.disabled {
|
|
text-decoration: line-through;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
> .box {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-full);
|
|
vertical-align: -10%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@container (max-width: 500px) {
|
|
.root {
|
|
font-size: 90%;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
</style>
|