fix: statistics previous period chart is unclear (#3654)

Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>

extensions/statistics/js/src/admin/components/StatisticsWidget.tsx

@@ -17,13 +17,12 @@ import type Mithril from 'mithril';
 import dayjs from 'dayjs';
 import dayjsUtc from 'dayjs/plugin/utc';
 import dayjsLocalizedFormat from 'dayjs/plugin/localizedFormat';
+// @ts-expect-error No typings available
+import { Chart } from 'frappe-charts';
 
 dayjs.extend(dayjsUtc);
 dayjs.extend(dayjsLocalizedFormat);
 
-// @ts-expect-error No typings available
-import { Chart } from 'frappe-charts';
-
 interface IPeriodDeclaration {
   start: number;
   end: number;
@@ -374,7 +373,16 @@ export default class StatisticsWidget extends DashboardWidget {
       m.redraw();
     }
 
-    const datasets = [{ values: lastPeriod }, { values: thisPeriod }];
+    const datasets = [
+      {
+        name: extractText(app.translator.trans('flarum-statistics.admin.statistics.current_period')),
+        values: thisPeriod,
+      },
+      {
+        name: extractText(app.translator.trans('flarum-statistics.admin.statistics.previous_period')),
+        values: lastPeriod,
+      },
+    ];
     const data = {
       labels,
       datasets,
@@ -394,8 +402,9 @@ export default class StatisticsWidget extends DashboardWidget {
         },
         lineOptions: {
           hideDots: 1,
+          regionFill: 1,
         },
-        colors: ['black', app.forum.attribute('themePrimaryColor')],
+        colors: [app.forum.attribute('themePrimaryColor'), 'black'],
       });
     } else {
       this.chart.update(data);

extensions/statistics/less/admin.less

@@ -93,16 +93,12 @@
   }
 
   .chart-container {
-    .dataset-0 {
+    .dataset-1 {
       opacity: 0.2;
     }
     .chart-legend {
       display: none;
     }
-    // Hide the "last period" data from the tooltip
-    .graph-svg-tip ul.data-point-list > li:first-child {
-      display: none;
-    }
   }
 
   &-viewFull {
@@ -198,6 +194,10 @@
       min-width: 90px;
       flex: 1;
       font-weight: 600;
+
+      &:nth-child(2) {
+        border-top-color: #5a5a5a !important;
+      }
     }
   }
   strong {

extensions/statistics/locale/en.yml

@@ -35,3 +35,5 @@ flarum-statistics:
       users_heading: => core.ref.users
       view_full: View more statistics
       no_data: There is no data available for this date range.
+      current_period: Current period
+      previous_period: Previous period