mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-21 07:10:50 +08:00
02bbf9d8e2
- card_00_global_overview 输出 annualHeatmap（dailyCounts + highlights） - 新增 AnnualCalendarHeatmap：横向滚动网格 + 气泡 tooltip + 高光日文案 - GlobalOverviewChart 从 Radar 重构为 Heatmap；Card00 slide 下微调间距 - MessageCharsChart 复用 msg-bubble 样式，统一气泡外观
45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<div class="w-full">
|
|
<AnnualCalendarHeatmap
|
|
:year="year"
|
|
:daily-counts="annualDailyCounts"
|
|
:days="daysInYear"
|
|
:highlights="annualHighlights"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AnnualCalendarHeatmap from '~/components/wrapped/visualizations/AnnualCalendarHeatmap.vue'
|
|
|
|
const props = defineProps({
|
|
data: { type: Object, default: () => ({}) }
|
|
})
|
|
|
|
const year = computed(() => {
|
|
const v = props.data?.annualHeatmap?.year ?? props.data?.year ?? new Date().getFullYear()
|
|
const y = Number(v)
|
|
return Number.isFinite(y) ? y : new Date().getFullYear()
|
|
})
|
|
|
|
const daysInYear = computed(() => {
|
|
const d = Number(props.data?.annualHeatmap?.days || 0)
|
|
if (Number.isFinite(d) && d > 0) return d
|
|
const y = Number(year.value)
|
|
const isLeap = y % 4 === 0 && (y % 100 !== 0 || y % 400 === 0)
|
|
return isLeap ? 366 : 365
|
|
})
|
|
|
|
const annualDailyCounts = computed(() => {
|
|
const a = props.data?.annualHeatmap
|
|
const arr = a?.dailyCounts
|
|
return Array.isArray(arr) ? arr : []
|
|
})
|
|
|
|
const annualHighlights = computed(() => {
|
|
const a = props.data?.annualHeatmap
|
|
const hs = a?.highlights
|
|
return Array.isArray(hs) ? hs : []
|
|
})
|
|
</script>
|