modified
pages/summary.js
@@ -43,6 +43,8 @@ const Summary = () => { }; useEffect(() => { if (state.log.length <= 0) return; const chart = new Chart(canvasRef.current, { type: "bar", data: {
@@ -54,17 +56,8 @@ const Summary = () => { }, ], }, options: { scales: { y: { beginAtZero: true, }, }, }, }); chart.canvas.parentNode.style.height = "400px"; return () => { chart.destroy(); };
@@ -73,14 +66,20 @@ const Summary = () => { return ( <Page title="Summary"> <Grid> <Main> <Title>Summary</Title> <p>Total number of hours spent across all tags.</p> <TotalTime>{getTotalTime(state.log)} hours</TotalTime> <p>The number of hours you've spent per-tag.</p> <CanvasWrapper> <canvas ref={canvasRef} /> </CanvasWrapper> <Main className={state.log.length <= 0 ? "empty" : ""} tabIndex="1"> {state.log.length > 0 ? ( <> <Title>Summary</Title> <p>Total number of hours spent across all tags.</p> <TotalTime>{getTotalTime(state.log)} hours</TotalTime> <p>The number of hours you've spent per-tag.</p> <CanvasWrapper> <canvas ref={canvasRef} /> </CanvasWrapper> </> ) : ( <Nothing>Your log is empty.</Nothing> )} </Main> </Grid> </Page>
@@ -98,6 +97,14 @@ const Grid = styled.div`const Main = styled.main` grid-area: 1/2; &.empty { grid-area: 1/2; display: flex; align-items: center; justify-content: center; flex-direction: column; }`;const Title = styled.h1`
@@ -110,6 +117,7 @@ const Title = styled.h1`const CanvasWrapper = styled.div` background-color: white; padding: 0.25rem; margin-bottom: 2rem;`;const TotalTime = styled.div`
@@ -117,3 +125,24 @@ const TotalTime = styled.div` font-weight: 900; margin-bottom: 3rem;`;const Nothing = styled.div` font-weight: 100; font-size: 2.5em; text-align: center; position: relative; &:after { content: ""; position: absolute; width: 100%; left: 0; bottom: -15px; height: 3px; background-color: ${(props) => props.theme.colors.three}; } @media (${(props) => props.theme.breakpoint}) { font-size: 1.4em; }`;