YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: heatmap data (#394)

Browse Source
This commit is contained in:
boojack
2022-11-01 22:06:02 +08:00
committed by GitHub
parent 55dee0df7e
commit 006cb56d28
5 changed files with 31 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/UsageHeatMap.tsx
View File

@ -28,16 +28,17 @@ interface DailyUsageStat {
}
const UsageHeatMap = () => {
const { memos } = useAppSelector((state) => state.memo);
const [allStat, setAllStat] = useState<DailyUsageStat[]>([]);
const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
const containerElRef = useRef<HTMLDivElement>(null);
const todayTimeStamp = utils.getDateStampByDate(Date.now());
const todayDay = new Date(todayTimeStamp).getDay() + 1;
const nullCell = new Array(7 - todayDay).fill(0);
const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
const { memos } = useAppSelector((state) => state.memo);
const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp));
const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
const containerElRef = useRef<HTMLDivElement>(null);
useEffect(() => {
getMemoStats(userService.getCurrentUserId())
.then(({ data: { data } }) => {
@ -97,12 +98,12 @@ const UsageHeatMap = () => {
count <= 0
? ""
: count <= 1
? "stat-day-L1-bg"
? "stat-day-l1-bg"
: count <= 2
? "stat-day-L2-bg"
? "stat-day-l2-bg"
: count <= 4
? "stat-day-L3-bg"
: "stat-day-L4-bg";
? "stat-day-l3-bg"
: "stat-day-l4-bg";
return (
<div

2
web/src/helpers/api.ts
View File

@ -91,7 +91,7 @@ export function getMemoList(memoFind?: MemoFind) {
}
export function getMemoStats(userId: UserId) {
return axios.get<ResponseObject<number[]>>(`/api/memo/stats?userId=${userId}`);
return axios.get<ResponseObject<number[]>>(`/api/memo/stats?creatorId=${userId}`);
}
export function getMemoById(id: MemoId) {

28
web/src/less/usage-heat-map.less
View File

@ -1,10 +1,5 @@
@import "./mixin.less";
@stat-day-L1-bg: #9be9a8;
@stat-day-L2-bg: #40c463;
@stat-day-L3-bg: #30a14e;
@stat-day-L4-bg: #216e39;
.usage-heat-map-wrapper {
@apply flex flex-row justify-start items-center w-full h-32 flex-wrap pr-6 pb-3 shrink-0;
@ -25,33 +20,32 @@
> .stat-wrapper {
> .stat-container {
@apply block rounded-sm;
@apply block rounded-sm bg-gray-200;
width: 14px;
height: 14px;
background-color: @bg-lightgray;
&.null {
@apply bg-transparent;
@apply bg-gray-200;
}
&.stat-day-L1-bg {
background-color: @stat-day-L1-bg !important;
&.stat-day-l1-bg {
@apply bg-green-400;
}
&.stat-day-L2-bg {
background-color: @stat-day-L2-bg !important;
&.stat-day-l2-bg {
@apply bg-green-500;
}
&.stat-day-L3-bg {
background-color: @stat-day-L3-bg !important;
&.stat-day-l3-bg {
@apply bg-green-600;
}
&.stat-day-L4-bg {
background-color: @stat-day-L4-bg !important;
&.stat-day-l4-bg {
@apply bg-green-700;
}
&.today {
border: 1px solid black;
@apply border border-black;
}
}
}