Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: calendar-graph #699

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

refactor: calendar-graph #699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe00575
refactor: calendar-graph
orangelckc May 20, 2024
034d741
test: basic render data case
orangelckc May 20, 2024
1f3948c
fix: adjust style and spell error
fengstats May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 153 additions & 86 deletions apps/client/components/Home/CalendarGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,117 +1,184 @@
<template>
<div class="flex justify-between">
<div class="flex">
<!-- 左侧打卡图 -->
<div
class="min-w-0 flex-1 rounded-md border border-gray-300 px-2 py-4 text-xs dark:border-gray-700"
class="flex min-h-40 flex-1 flex-col overflow-hidden rounded-lg border border-gray-300 p-4 dark:border-gray-700"
>
<div class="w-full overflow-x-auto">
<table
class="mx-auto mb-2"
ref="calendarTable"
>
<thead>
<th></th>
<th
v-for="{ colSpan, month } in thead"
class="text-left font-normal"
:colspan="colSpan"
:key="month"
<div
v-if="renderData.length"
class="mx-auto w-fit max-w-full text-xs"
>
<div class="flex justify-center overflow-x-auto pr-1">
<!-- 星期标签 -->
<div
class="hidden shrink-0 flex-col md:flex"
:style="{
gap: `${cellMargin}px`,
marginTop: `${cellSize + graphMargin}px`,
marginRight: `${graphMargin}px`,
}"
>
<span
v-for="item in renderWeekLabels"
:style="{
height: `${cellSize}px`,
lineHeight: `${cellSize}px`,
}"
>{{ item }}</span
>
{{ month }}
</th>
</thead>
<tbody>
<tr
v-for="(row, i) in tbody"
:key="weeksZh[i]"
</div>

<div class="flex flex-col">
<!-- 月份标签 -->
<div
class="flex items-center"
:style="{
marginBottom: `${graphMargin}px`,
gap: `${cellMargin}px`,
}"
>
<td class="relative hidden w-8 md:block">
<span class="absolute">{{ i % 2 !== 0 ? weeksZh[i] : "" }}</span>
</td>
<td
v-for="(cell, j) in row"
class="m-0"
:key="j"
<span
v-for="item in renderMonthLabels"
class="whitespace-nowrap"
:style="{
width: `${cellSize}px`,
height: `${cellSize}px`,
lineHeight: `${cellSize}px`,
}"
>{{ item.label }}</span
>
<div
class="cell block"
:class="cell?.bg"
:data-tippy-content="cell?.tips"
@mouseenter="(e) => $calendarTippy(e, calendarTable)"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 打卡图表 -->
<div
ref="calendarTable"
class="flex flex-col flex-wrap"
:style="{
height: `${graphHeight}px`,
gap: `${cellMargin}px`,
}"
>
<div
class="cell"
:style="{
width: `${cellSize}px`,
height: `${cellSize}px`,
backgroundColor: item.bgColor,
}"
v-for="item in renderData"
:key="item.date"
:data-tippy-content="item.tip"
@mouseenter="(e) => $calendarTippy(e, calendarTable)"
/>
</div>
</div>
</div>

<div class="mt-2 flex justify-between px-1">
<span class="justify-self-end text-sm dark:text-gray-400">
一共学习了 <span class="font-semibold">{{ totalCount }}</span> 次</span
<div
class="flex items-center justify-between"
:style="{
marginTop: `${graphMargin}px`,
}"
>
<div class="flex items-center gap-1 text-xs">
<div class="text-gray-500">更少</div>
<div class="cell"></div>
<div class="cell low"></div>
<div class="cell moderate"></div>
<div class="cell high"></div>
<div class="cell higher"></div>
<div class="text-gray-500">更多</div>
<span class="text-sm dark:text-gray-400">
{{ renderTips?.summaryFn(totalCount) }}
</span>
<div class="flex items-center gap-1">
<div class="text-gray-500">{{ renderTips?.less }}</div>
<div
class="cell h-2.5 w-2.5"
v-for="item in renderLegends"
:style="{ backgroundColor: item }"
></div>
<div class="text-gray-500">{{ renderTips?.more }}</div>
</div>
</div>
</div>

<div
v-else
class="loading loading-dots loading-md m-auto"
></div>
</div>

<!-- 右侧年份选项 -->
<!-- TODO: 多年份选择还没做，目前只有 2024，先写死了 -->
<div
v-for="year in yearOptions"
class="btn btn-sm tw-btn-blue ml-6 hidden pr-7 xl:flex"
:key="year.value"
>
{{ year.label }}
<!-- 右侧年份选择 -->
<div class="ml-6 hidden flex-col gap-2 md:flex">
<div
v-for="item in yearOptions"
class="btn btn-sm"
:class="{
'tw-btn-blue': item === currentYear,
}"
:key="item"
@click="getUserRecord(item)"
>
{{ item }}
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import dayjs from "dayjs";
import { computed, ref, watch } from "vue";

import type { CalendarData, EmitsType } from "~/composables/user/calendarGraph";
import { useCalendarGraph } from "~/composables/user/calendarGraph";
import type { CalendarData } from "~/composables/user/calendarGraph";
import { useDarkMode } from "~/composables/darkMode";
import { Locale, useCalendarGraph } from "~/composables/user/calendarGraph";

const props = defineProps<{ data: CalendarData[]; totalCount: number }>();
const emits = defineEmits<EmitsType>();
const calendarTable = ref<HTMLTableElement>();
const props = defineProps<{
data: CalendarData[];
totalCount: number;
yearOptions: number[];
}>();

const { initTable, renderBody, thead, tbody, weeksZh, yearOptions } = useCalendarGraph(emits);
const emits = defineEmits<{
(event: "toggleYear", year?: number): void;
}>();

onMounted(() => {
initTable();
});
const { darkMode } = useDarkMode();
const { renderData, reRender, renderMonthLabels, renderLegends, renderWeekLabels, renderTips } =
useCalendarGraph();

watchEffect(() => {
tbody.value = renderBody(props.data);
});
</script>
const MIN_GRAPH_MARGIN = 12;

<style scoped>
.cell {
@apply mt-[2px] h-[12px] w-[12px] rounded-sm border-gray-200 bg-gray-200 hover:scale-125 hover:border hover:border-blue-400 dark:bg-gray-700 dark:hover:border-gray-50;
}
const calendarTable = ref<HTMLTableElement>();
const currentYear = ref(dayjs().year());
// 单个格子的大小和间距
const cellSize = ref(12);
const cellMargin = ref(2);

.low {
@apply bg-[#9be9a8] dark:bg-[#0e4429];
}
// 7.25 个格子 + 7 个间距块
const graphHeight = computed(() => cellSize.value * 7.25 + cellMargin.value * 7);
const graphMargin = computed(() => Math.min(MIN_GRAPH_MARGIN, cellSize.value / 2));

.moderate {
@apply bg-[#40c463] dark:bg-[#006d32];
function getUserRecord(year = dayjs().year()) {
// renderData.value = [];
currentYear.value = year;
emits("toggleYear", year);
}

.high {
@apply bg-[#30a14e] dark:bg-[#26a641];
}
// 以下状态更新时重新渲染打卡图
watch(
[() => props.data, darkMode],
([data, theme]) => {
getUserRecord(currentYear.value);
// 自定义配置属性
reRender({
data,
theme,
locale: Locale.ZH_CN,
beginDay: "sunday",
separate: "odd",
year: currentYear.value,
// formatFn: (date) => date,
});
},
{ immediate: true },
);
</script>

.higher {
@apply bg-[#216e39] dark:bg-[#39d353];
<style scoped>
.cell {
@apply rounded-sm border-gray-200 hover:scale-125 hover:border hover:border-blue-400 dark:hover:border-gray-50;
}
</style>
3 changes: 2 additions & 1 deletion apps/client/components/Home/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
class="mt-10"
:data="learnRecord.list"
:totalCount="learnRecord.totalCount"
:yearOptions="yearOptions"
@toggleYear="toggleYear"
/>
</div>
Expand All @@ -53,7 +54,7 @@ import { type CalendarData } from "~/composables/user/calendarGraph";
import { useUserStore } from "~/store/user";

const userStore = useUserStore();
const { learnRecord, setupLearnRecord, setQueryYear } = useLearnRecord();
const { learnRecord, setupLearnRecord, setQueryYear, yearOptions } = useLearnRecord();
const { toggleYear } = useCalendarGraph();

function useCalendarGraph() {
Expand Down
4 changes: 4 additions & 0 deletions apps/client/composables/learnRecord.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ const learnRecord = ref<UserLearnRecordResponse>({
list: [],
totalCount: 0,
});

const yearOptions = ref([2024, 2023, 2022]);

let isSetup = false;

export function useLearnRecord() {
Expand Down Expand Up @@ -39,6 +42,7 @@ export function useLearnRecord() {

return {
learnRecord,
yearOptions,
updateLearnRecord,
setQueryYear,
setupLearnRecord,
Expand Down
Loading
Loading