Added bar chart activity interpretation and fixed tabs

client/src/components/graphs/BarChart/index.tsx

 
-import { formatDate } from 'timely';
+import { formatDate, addTime } from 'timely';
 
 import { Activity } from 'adapters/common';
 
@@ -10,11 +10,18 @@ export interface ChartItem {
     value: number;
 }
 
-export function parseActivity(activity: Activity[]): ChartItem[] {
-    return activity.map(item => ({
-        label: formatDate(new Date(item.day), 'none', 'short'),
-        value: item.time
-    }));
+export function parseActivity(activity: Activity[], startDate?: Date): ChartItem[] {
+    const results = [];
+    let date = startDate ?? new Date(activity.map(act => act.day).reduce((a, b) => a < b ? a : b));
+    while (date <= new Date()) {
+        const day = date.toISOString().substr(0, 10);
+        results.push({
+            label: formatDate(date, 'none', 'short'),
+            value: activity.find(item => item.day === day)?.time ?? 0,
+        });
+        date = addTime(date, 1, 'day');
+    }
+    return results;
 }
 
 interface Props {
@@ -33,12 +40,14 @@ export default function BarChart({ data, unit, multiplier }: Props) {
                         {
                             data.map((item) => (
                                 <div key={item.label} className="bar" style={{
-                                    height: (item.value / maxValue) * 100 + '%',
+                                    height: ((item.value / maxValue) * 95 + 5) + '%',
                                     width: 'calc(' + Math.min(100 / data.length, 25) + '% - 10px)'
                                 }}>
-                                    <div className="label">
-                                        {item.label}
-                                    </div>
+                                    { data.length < 10 &&
+                                        <div className="label">
+                                            {item.label}
+                                        </div>
+                                    }
                                     <div className="tooltip">
                                         {(item.value * (multiplier ?? 1)).toFixed(2) + (unit ?? '')} 
                                     </div>

client/src/components/navigation/Sidebar/index.tsx

@@ -24,12 +24,10 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
 
     useEffect(() => {
         if (isLoggedIn()) {
-            getCurrentUser().then((user) => {
-                setUser(user);
-                getUserActivity(subtractTime(new Date(), 1, 'week'), new Date()).then((a) =>
-                    setActivity(parseActivity(a))
-                );
-            }).catch(() => { });
+            getCurrentUser().then(setUser).catch(() => { });
+            getUserActivity(subtractTime(new Date(), 1, 'week'))
+                .then(parseActivity)
+                .then(setActivity);
         }
     }, [])
 

client/src/components/navigation/Tabs/index.tsx

 
 import { ReactNode } from 'react';
-import { NavLink, Route } from 'react-router-dom';
+import { NavLink, Route, matchPath } from 'react-router-dom';
 
 import './tabs.scss';
 
@@ -20,7 +20,17 @@ export default function Tabs({ tabs }: Props) {
         <>
             <nav className="tabs-container">
                 {tabs.map((tab) => (
-                    <NavLink key={tab.label} className="tab" exact activeClassName="active" to={tab.link ?? tab.route}>
+                    <NavLink
+                        key={tab.label}
+                        className="tab"
+                        activeClassName="active"
+                        to={tab.link ?? tab.route}
+                        isActive={(_, location) =>
+                            matchPath(location.pathname, { path: tab.route, exact: true })
+                                ? true
+                                : false
+                        }
+                    >
                         {tab.label}
                     </NavLink>
                 ))}