Fixed a bug in the BarChart

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

 
-import { formatDate, addTime } from 'timely';
+import { formatDate, addTime, currentTime, subtractTime } from 'timely';
 
 import { Activity } from 'adapters/common';
 
@@ -11,17 +11,22 @@ export interface ChartItem {
 }
 
 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');
+    if (activity.length !== 0) {
+        const results = [];
+        let date = startDate ?? new Date(activity.map(act => act.day).reduce((a, b) => a < b ? a : b));
+        const isLong = date < subtractTime(currentTime(), 40, 'day');
+        while (date <= currentTime()) {
+            const day = date.toISOString().substr(0, 10);
+            results.push({
+                label: isLong ? formatDate(date, 'month', undefined, false) : formatDate(date, 'none', 'short'),
+                value: activity.find(item => item.day === day)?.time ?? 0,
+            });
+            date = addTime(date, 1, 'day');
+        }
+        return results;
+    } else {
+        return [];
     }
-    return results;
 }
 
 interface Props {
@@ -32,18 +37,31 @@ interface Props {
 
 export default function BarChart({ data, unit, multiplier }: Props) {
     let maxValue = data.map(e => e.value).sort((a, b) => b - a)[0];
+
     return (
         <div className="bar-chart-container">
             {
                 data.length > 0 ? (
                     <div className="bar-chart">
                         {
-                            data.map((item) => (
-                                <div key={item.label} className="bar" style={{
-                                    height: ((item.value / maxValue) * 95 + 5) + '%',
-                                    width: 'calc(' + Math.min(100 / data.length, 25) + '% - 10px)'
-                                }}>
-                                    { data.length < 10 &&
+                            data.map((item, i) => (
+                                <div
+                                    key={i}
+                                    className="bar"
+                                    style={{
+                                        height: ((item.value / maxValue) * 95 + 5) + '%',
+                                        width: Math.min((data.length < 40 ? 90 : 100) / data.length, 25) + '%'
+                                    }}
+                                >
+                                    { (
+                                        data.length < 10
+                                            ? true
+                                            : (data.length < 40
+                                                ? (i % 7) === (data.length % 7 - 1)
+                                                : data.length < 400
+                                                    && i !== 0 && item.label !== data[i - 1]?.label
+                                            )
+                                      ) &&
                                         <div className="label">
                                             {item.label}
                                         </div>

client/src/components/ui/Tooltip/tooltip.scss

@@ -14,6 +14,7 @@
     }
 
     .tooltip {
+        white-space: nowrap;
         visibility: hidden;
         position: absolute;
         opacity: 0;

client/src/timely.ts

@@ -132,7 +132,7 @@ export function formatTime(date: Date, precision: Unit = 'minute'): string {
     return result;
 }
 
-export function formatDate(date: Date, precision: Unit = 'day', weekday?: 'short' | 'full'): string {
+export function formatDate(date: Date, precision: Unit = 'day', weekday?: 'short' | 'full', year = true): string {
     let result = '';
     if (weekday === 'short') {
         result += WEEKDAYS[date.getDay()].substr(0, 3);
@@ -151,7 +151,7 @@ export function formatDate(date: Date, precision: Unit = 'day', weekday?: 'short
         }
         result += MONTHS[date.getMonth()];
     }
-    if (UNITS[precision] <= UNITS['year']) {
+    if (year && UNITS[precision] <= UNITS['year']) {
         if (result.length !== 0) {
             result += ' ';
         }