misskey/packages/frontend/src/components/MkChartTooltip.vue
riku6460 8d06a6475e
chore: 著作権とライセンスについての情報を各ファイルに追加する (#141)
* chore: 著作権とライセンスについての情報を各ファイルに追加する

* chore: Add the SPDX information to each file

Add copyright and licensing information as defined in version 3.0 of
the REUSE Specification.

* tweak format

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

* chore: Add SPDX-License-Identifier [skip ci]

* add missing SPDX-License-Identifier

* remove unused file

---------

Co-authored-by: Shun Sakai <sorairolake@protonmail.ch>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: Chocolate Pie <106949016+chocolate-pie@users.noreply.github.com>
2023-08-15 02:52:38 +09:00

55 lines
1.1 KiB
Vue

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :maxWidth="340" :direction="'top'" :innerMargin="16" @closed="emit('closed')">
<div v-if="title || series">
<div v-if="title" :class="$style.title">{{ title }}</div>
<template v-if="series">
<div v-for="x in series">
<span :class="$style.color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
<span>{{ x.text }}</span>
</div>
</template>
</div>
</MkTooltip>
</template>
<script lang="ts" setup>
import { } from 'vue';
import MkTooltip from './MkTooltip.vue';
defineProps<{
showing: boolean;
x: number;
y: number;
title?: string;
series?: {
backgroundColor: string;
borderColor: string;
text: string;
}[];
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
}>();
</script>
<style lang="scss" module>
.title {
margin-bottom: 4px;
}
.color {
display: inline-block;
width: 8px;
height: 8px;
border-width: 1px;
border-style: solid;
margin-right: 8px;
}
</style>