From 4d7ceab026b8cee6a3857c2e4f2b5ccdb42893e0 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 13 Dec 2024 16:47:42 +0100
Subject: [PATCH] ui: fix time mapping for charts

---
 .../Widgets/CustomMetricsWidgets/BarChart.tsx     |  4 ++--
 frontend/app/mstore/dashboardStore.ts             |  3 ++-
 frontend/app/mstore/types/widget.ts               |  6 +++---
 frontend/app/types/dashboard/helper.ts            | 15 ++++++++++-----
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BarChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BarChart.tsx
index ac1df5e77..135553d67 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BarChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BarChart.tsx
@@ -48,8 +48,8 @@ const PillBar = (props) => {
       <rect
         width={width}
         height={height}
-        rx={Math.min(width / 2, height / 2)}
-        ry={Math.min(width / 2, height / 2)}
+        rx={10}
+        ry={10}
         fill={fill}
       />
       {striped && (
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index 610547270..4c2edc59f 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -453,6 +453,7 @@ export default class DashboardStore {
     isComparison?: boolean
   ): Promise<any> {
     period = period.toTimestamps();
+    const density = data.density;
     const params = { ...period, ...data, key: metric.predefinedKey };
 
     if (!isComparison && metric.page && metric.limit) {
@@ -469,7 +470,7 @@ export default class DashboardStore {
 
       try {
         const data = await metricService.getMetricChartData(metric, params, isSaved);
-        resolve(metric.setData(data, period, isComparison));
+        resolve(metric.setData(data, period, isComparison, density));
       } catch (error) {
         reject(error);
       } finally {
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 140db5455..ee9c94ea8 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -294,7 +294,7 @@ export default class Widget {
         this.page = page;
     }
 
-    setData(data: { timestamp: number, [seriesName: string]: number}[], period: any, isComparison?: boolean) {
+    setData(data: { timestamp: number, [seriesName: string]: number}[], period: any, isComparison: boolean = false, density?: number) {
         if (!data) return;
         const _data: any = {};
         if (isComparison && this.metricType === TIMESERIES) {
@@ -335,7 +335,7 @@ export default class Widget {
             if (data.hasOwnProperty('chart')) {
                 _data['value'] = data.value;
                 _data['unit'] = data.unit;
-                _data['chart'] = getChartFormatter(period)(data.chart);
+                _data['chart'] = getChartFormatter(period, density)(data.chart);
                 _data['namesMap'] = data.chart
                     .map((i: any) => Object.keys(i))
                     .flat()
@@ -347,7 +347,7 @@ export default class Widget {
                         return unique;
                     }, []);
             } else {
-                _data['chart'] = getChartFormatter(period)(data);
+                _data['chart'] = getChartFormatter(period, density)(data);
                 _data['namesMap'] = Array.isArray(data)
                   ? data
                     .map((i) => Object.keys(i))
diff --git a/frontend/app/types/dashboard/helper.ts b/frontend/app/types/dashboard/helper.ts
index 97a7c17e8..f1bd7be1f 100644
--- a/frontend/app/types/dashboard/helper.ts
+++ b/frontend/app/types/dashboard/helper.ts
@@ -4,21 +4,26 @@ const WEEK = DAY * 8;
 const startWithZero = (num: number) => (num < 10 ? `0${ num }` : `${ num }`);
 const weekdays = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
 
-export const getTimeString = (ts, period) => {
+export const getTimeString = (ts, period, density,) => {
   const date = new Date(ts);
   const diff = period.endTimestamp - period.startTimestamp;
   if (diff <= DAY) {
-    var isPM = date.getHours() >= 12;
+    const isPM = date.getHours() >= 12;
     return `${ isPM ? date.getHours() - 12 : date.getHours() }:${ startWithZero(date.getMinutes()) } ${isPM? 'pm' : 'am'}`;
   }
   if (diff <= WEEK) {
-    return weekdays[ date.getDay() ];
+    if (density < 20) {
+      return weekdays[ date.getDay() ];
+    } else {
+      const isPM = date.getHours() >= 12;
+      return `${ isPM ? date.getHours() - 12 : date.getHours() }:${ startWithZero(date.getMinutes()) } ${isPM? 'pm' : 'am'}`;
+    }
   }
   return `${ date.getDate() }/${ startWithZero(date.getMonth() + 1) } `;
 };
 
-export const getChartFormatter = period => (data = []) =>
-  data.map(({ timestamp, ...rest }) => ({ time: getTimeString(timestamp, period), ...rest, timestamp }));
+export const getChartFormatter = (period, density) => (data = []) =>
+  data.map(({ timestamp, ...rest }) => ({ time: getTimeString(timestamp, period, density), ...rest, timestamp }));
 
 export const getStartAndEndTimestampsByDensity = (current: number, start: number, end: number, density: number) => {
   const diff = end - start;