fix: heatmap data (#394)

This commit is contained in:
boojack 2022-11-01 22:06:02 +08:00 committed by GitHub
parent 55dee0df7e
commit 006cb56d28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 45 deletions

View File

@ -104,11 +104,11 @@ func aclMiddleware(s *Server, next echo.HandlerFunc) echo.HandlerFunc {
} }
} }
if common.HasPrefixes(path, "/api/memo/all", "/api/memo/:memoId", "/api/memo/amount", "/api/memo/stats") && c.Request().Method == http.MethodGet { if common.HasPrefixes(path, "/api/memo/all", "/api/memo/:memoId", "/api/memo/amount") && c.Request().Method == http.MethodGet {
return next(c) return next(c)
} }
if common.HasPrefixes(path, "/api/memo", "/api/tag", "/api/shortcut") && c.Request().Method == http.MethodGet { if common.HasPrefixes(path, "/api/memo", "/api/tag", "/api/shortcut", "/api/memo/stats") && c.Request().Method == http.MethodGet {
if _, err := strconv.Atoi(c.QueryParam("creatorId")); err == nil { if _, err := strconv.Atoi(c.QueryParam("creatorId")); err == nil {
return next(c) return next(c)
} }

View File

@ -257,33 +257,24 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
memoFind := &api.MemoFind{ memoFind := &api.MemoFind{
RowStatus: &normalStatus, RowStatus: &normalStatus,
} }
if userID, err := strconv.Atoi(c.QueryParam("userId")); err == nil { if creatorID, err := strconv.Atoi(c.QueryParam("creatorId")); err == nil {
memoFind.CreatorID = &userID memoFind.CreatorID = &creatorID
}
if memoFind.CreatorID == nil {
return echo.NewHTTPError(http.StatusBadRequest, "Missing user id to find memo")
} }
currentUserID, ok := c.Get(getUserIDContextKey()).(int) currentUserID, ok := c.Get(getUserIDContextKey()).(int)
if !ok { if !ok {
if memoFind.CreatorID == nil {
return echo.NewHTTPError(http.StatusBadRequest, "Missing user id to find memo")
}
memoFind.VisibilityList = []api.Visibility{api.Public} memoFind.VisibilityList = []api.Visibility{api.Public}
} else { } else {
if memoFind.CreatorID == nil { if *memoFind.CreatorID != currentUserID {
memoFind.CreatorID = &currentUserID
} else {
memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected} memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected}
} else {
memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected, api.Privite}
} }
} }
visibilitListStr := c.QueryParam("visibility")
if visibilitListStr != "" {
visibilityList := []api.Visibility{}
for _, visibility := range strings.Split(visibilitListStr, ",") {
visibilityList = append(visibilityList, api.Visibility(visibility))
}
memoFind.VisibilityList = visibilityList
}
list, err := s.Store.FindMemoList(ctx, memoFind) list, err := s.Store.FindMemoList(ctx, memoFind)
if err != nil { if err != nil {
return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch memo list").SetInternal(err) return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch memo list").SetInternal(err)

View File

@ -28,16 +28,17 @@ interface DailyUsageStat {
} }
const UsageHeatMap = () => { 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 todayTimeStamp = utils.getDateStampByDate(Date.now());
const todayDay = new Date(todayTimeStamp).getDay() + 1; const todayDay = new Date(todayTimeStamp).getDay() + 1;
const nullCell = new Array(7 - todayDay).fill(0); const nullCell = new Array(7 - todayDay).fill(0);
const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay; const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP; 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(() => { useEffect(() => {
getMemoStats(userService.getCurrentUserId()) getMemoStats(userService.getCurrentUserId())
.then(({ data: { data } }) => { .then(({ data: { data } }) => {
@ -97,12 +98,12 @@ const UsageHeatMap = () => {
count <= 0 count <= 0
? "" ? ""
: count <= 1 : count <= 1
? "stat-day-L1-bg" ? "stat-day-l1-bg"
: count <= 2 : count <= 2
? "stat-day-L2-bg" ? "stat-day-l2-bg"
: count <= 4 : count <= 4
? "stat-day-L3-bg" ? "stat-day-l3-bg"
: "stat-day-L4-bg"; : "stat-day-l4-bg";
return ( return (
<div <div

View File

@ -91,7 +91,7 @@ export function getMemoList(memoFind?: MemoFind) {
} }
export function getMemoStats(userId: UserId) { 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) { export function getMemoById(id: MemoId) {

View File

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