From 900312df7c5dd4a3fb509808bdd96c3c322a98d2 Mon Sep 17 00:00:00 2001
From: csirius <85753828+csirius@users.noreply.github.com>
Date: Fri, 24 Sep 2021 19:47:13 -0400
Subject: [PATCH] fix: tooltip scrolling and bar chart ordering issue (#218)

Signed-off-by: csirius <85753828+csirius@users.noreply.github.com>
---
 .../Entities/EntityExecutionsBarChart.tsx         | 15 ++++++++++-----
 src/components/common/BarChart.tsx                |  4 +++-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/src/components/Entities/EntityExecutionsBarChart.tsx
index b43103059..8895fb94b 100644
--- a/src/components/Entities/EntityExecutionsBarChart.tsx
+++ b/src/components/Entities/EntityExecutionsBarChart.tsx
@@ -35,7 +35,7 @@ export interface EntityExecutionsBarChartProps {
 }
 
 const getExecutionTimeData = (exectuions: Execution[], fillSize = 100) => {
-    const newExecutions = exectuions.map(execution => {
+    const newExecutions = exectuions.reverse().map(execution => {
         const duration = getWorkflowExecutionTimingMS(execution)?.duration || 1;
         return {
             value: duration,
@@ -71,10 +71,14 @@ const getExecutionTimeData = (exectuions: Execution[], fillSize = 100) => {
 };
 
 const getStartExecutionTime = (executions: Execution[]) => {
-    if (executions.length === 0 || !executions[0].closure.startedAt) {
+    if (executions.length === 0) {
         return '';
     }
-    return formatDateUTC(timestampToDate(executions[0].closure.startedAt));
+    const lastExecution = executions[executions.length - 1];
+    if (!lastExecution.closure.startedAt) {
+        return '';
+    }
+    return formatDateUTC(timestampToDate(lastExecution.closure.startedAt));
 };
 
 /**
@@ -90,7 +94,7 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
     const filtersState = useWorkflowExecutionFiltersState();
     const sort = {
         key: executionSortFields.createdAt,
-        direction: SortDirection.ASCENDING
+        direction: SortDirection.DESCENDING
     };
 
     const baseFilters = React.useMemo(
@@ -102,7 +106,8 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
         { domain, project },
         {
             sort,
-            filter: [...baseFilters, ...filtersState.appliedFilters]
+            filter: [...baseFilters, ...filtersState.appliedFilters],
+            limit: 100
         }
     );
 
diff --git a/src/components/common/BarChart.tsx b/src/components/common/BarChart.tsx
index 73b4abc55..e1cfc3c87 100644
--- a/src/components/common/BarChart.tsx
+++ b/src/components/common/BarChart.tsx
@@ -87,7 +87,9 @@ const BarChartItem: React.FC<BarChartItemProps> = ({
                 <Tooltip
                     title={tooltip}
                     TransitionComponent={Zoom}
-                    onMouseMove={e => setPosition({ x: e.pageX, y: e.pageY })}
+                    onMouseMove={e =>
+                        setPosition({ x: e.pageX, y: e.pageY - window.scrollY })
+                    }
                     PopperProps={{
                         anchorEl: {
                             clientHeight: 0,