52 lines
1 KiB
Vue
52 lines
1 KiB
Vue
<template>
|
|
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
|
|
<div v-if="title || series" class="qpcyisrl">
|
|
<div v-if="title" class="title">{{ title }}</div>
|
|
<template v-if="series">
|
|
<div v-for="x in series" class="series">
|
|
<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
|
|
<span>{{ x.text }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</MkTooltip>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import MkTooltip from './ui/tooltip.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" scoped>
|
|
.qpcyisrl {
|
|
> .title {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
> .series {
|
|
> .color {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|