From c837883ce780610c39368e7697d8fc793e519888 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Tue, 12 Nov 2024 23:26:59 -0800
Subject: [PATCH 1/3] fix: analytics chart kebab menu positioning

show kebab menu on hover only
if there's no title overlap canvas and show on hover
---
 .../sandbox/pages/TimeSeriesChartDemo.vue     |  6 +-
 .../src/components/AnalyticsChart.vue         | 80 ++++++++++++++++---
 .../chart-types/StackedBarChart.vue           |  1 +
 .../chart-types/TimeSeriesChart.vue           |  2 +
 .../analytics-chart/src/locales/en.json       |  1 +
 .../sandbox/pages/RendererDemo.vue            |  1 -
 6 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
index 5bb3b3da73..37b93931d9 100644
--- a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
+++ b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
@@ -203,7 +203,6 @@
         :allow-csv-export="true"
         :chart-data="(exploreResult)"
         :chart-options="analyticsChartOptions"
-        chart-title="Request count by Status Code"
         :go-to-explore="(exploreLink)"
         :legend-position="legendPosition"
         :show-annotations="showAnnotationsToggle"
@@ -251,7 +250,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, inject } from 'vue'
+import { computed, ref, watch, inject, provide } from 'vue'
 import {
   AnalyticsChart,
   ChartLegendPosition,
@@ -266,6 +265,8 @@ import { lookupStatusCodeColor } from '../../src/utils/customColors'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
 import { generateMultipleMetricTimeSeriesData, generateSingleMetricTimeSeriesData } from '@kong-ui-public/analytics-utilities'
 import CodeText from '../CodeText.vue'
+import { INJECT_QUERY_PROVIDER } from '../../src/constants'
+import useEvaluateFeatureFlag from '../../src/composables/useEvauluateFeatureFlag'
 
 enum Metrics {
   TotalRequests = 'TotalRequests',
@@ -332,6 +333,7 @@ const exportCsv = () => {
 }
 
 const exploreLink: string = 'https://cloud.konghq.tech/us/analytics/explorer'
+provide(INJECT_QUERY_PROVIDER, { evaluateFeatureFlagFn: () => true })
 
 const exploreResultText = ref('')
 const hasError = computed(() => !isValidJson(exploreResultText.value))
diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
index 62b27ec561..d47b42c8dd 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="analytics-chart-shell">
+  <div
+    class="analytics-chart-shell"
+    :class="{ 'is-hovering': isHovering }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
     <div
-      v-if="showChartHeader"
       class="chart-header"
     >
       <div
@@ -43,10 +47,17 @@
         class="dropdown"
         data-testid="chart-action-menu"
       >
-        <MoreIcon
-          :color="KUI_COLOR_TEXT_NEUTRAL"
-          :size="KUI_ICON_SIZE_40"
-        />
+        <button
+          appearance="none"
+          :aria-label="i18n.t('more_actions')"
+          class="kebab-action-menu"
+          data-testid="kebab-action-menu"
+        >
+          <MoreIcon
+            :color="KUI_COLOR_TEXT_NEUTRAL"
+            :size="KUI_ICON_SIZE_40"
+          />
+        </button>
         <template #items>
           <KDropdownItem
             v-if="!!goToExplore"
@@ -158,7 +169,7 @@ import { msToGranularity } from '@kong-ui-public/analytics-utilities'
 import type { AbsoluteTimeRangeV4, ExploreAggregations, ExploreResultV4, GranularityValues } from '@kong-ui-public/analytics-utilities'
 import { hasMillisecondTimestamps, defaultStatusCodeColors } from '../utils'
 import TimeSeriesChart from './chart-types/TimeSeriesChart.vue'
-import { KUI_COLOR_TEXT_NEUTRAL, KUI_COLOR_TEXT_WARNING, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_COLOR_TEXT_WARNING, KUI_ICON_SIZE_40, KUI_SPACE_70 } from '@kong/design-tokens'
 import { MoreIcon, WarningIcon } from '@kong/icons'
 import CsvExportModal from './CsvExportModal.vue'
 import CsvExportButton from './CsvExportButton.vue'
@@ -249,6 +260,8 @@ const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
 const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
 
 const rawChartData = toRef(props, 'chartData')
+const isHovering = ref(false)
+
 
 const computedChartData = computed(() => {
   return isTimeSeriesChart.value
@@ -364,10 +377,6 @@ const hasValidChartData = computed(() => {
   return props.chartData && props.chartData.meta && props.chartData.data.length
 })
 
-const showChartHeader = computed(() => {
-  return (hasValidChartData.value && resultSetTruncated.value && maxEntitiesShown.value) || props.chartTitle || (props.allowCsvExport && hasValidChartData.value)
-})
-
 const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData.value) || !!props.goToExplore || props.showMenu)
 
 const timeSeriesGranularity = computed<GranularityValues>(() => {
@@ -429,6 +438,22 @@ const chartTooltipSortFn = computed(() => {
   }
 })
 
+const chartHeaderPosition = computed(() => {
+  return props.chartTitle || !hasKebabMenuAccess || (resultSetTruncated.value && maxEntitiesShown.value) ? 'relative' : 'absolute'
+})
+
+const chartHeaderWidth = computed(() => {
+  return chartHeaderPosition.value === 'relative' ? '100%' : KUI_SPACE_70
+})
+
+const handleMouseEnter = () => {
+  isHovering.value = true
+}
+
+const handleMouseLeave = () => {
+  isHovering.value = false
+}
+
 provide('showLegendValues', showLegendValues)
 provide('legendPosition', toRef(props, 'legendPosition'))
 
@@ -440,8 +465,16 @@ provide('legendPosition', toRef(props, 'legendPosition'))
 
 .analytics-chart-shell {
   height: 100%;
+  position: relative;
   width: 100%;
 
+  &.is-hovering {
+    .chart-header :deep(.popover-trigger-wrapper) {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
   .analytics-chart-parent {
     height: inherit;
     width: inherit;
@@ -458,6 +491,15 @@ provide('legendPosition', toRef(props, 'legendPosition'))
     display: flex;
     justify-content: flex-start;
     padding-bottom: var(--kui-space-60, $kui-space-60);
+    position: v-bind('chartHeaderPosition');
+    right: 0;
+    width: v-bind('chartHeaderWidth');
+    z-index: 999;
+
+    &:hover :deep(.popover-trigger-wrapper) {
+      opacity: 1;
+      visibility: visible;
+    }
 
     .chart-header-icons-wrapper {
       display: flex;
@@ -493,6 +535,21 @@ provide('legendPosition', toRef(props, 'legendPosition'))
     margin-left: var(--kui-space-auto, $kui-space-auto);
     margin-right: var(--kui-space-0, $kui-space-0);
 
+    :deep(.popover-trigger-wrapper) {
+      opacity: 0;
+      transform: fade(0, -10px);
+      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
+      visibility: hidden;
+    }
+
+    .kebab-action-menu {
+      background: $kui-color-background-transparent;
+      border: none;
+      color: inherit;
+      cursor: pointer;
+      height: 100%;
+    }
+
     li.k-dropdown-item {
       a {
         text-decoration: none;
@@ -512,5 +569,4 @@ provide('legendPosition', toRef(props, 'legendPosition'))
     }
   }
 }
-
 </style>
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
index beab916d2b..9018efab56 100644
--- a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
@@ -19,6 +19,7 @@
       >
         <canvas
           ref="canvas"
+          class="chart-canvas"
         />
       </div>
     </div>
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
index fe2003cf19..f63df36ddb 100644
--- a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
@@ -13,6 +13,7 @@
         :key="remountLineKey"
         ref="chartInstance"
         :chart-id="chartID"
+        class="chart-canvas"
         :data="(chartData as any)"
         data-testid="time-series-line-chart"
         :options="(options as any)"
@@ -23,6 +24,7 @@
         :key="remountBarKey"
         ref="chartInstance"
         :chart-id="chartID"
+        class="chart-canvas"
         :data="(chartData as any)"
         data-testid="time-series-bar-chart"
         :options="(options as any)"
diff --git a/packages/analytics/analytics-chart/src/locales/en.json b/packages/analytics/analytics-chart/src/locales/en.json
index 485f7f7390..582419e104 100644
--- a/packages/analytics/analytics-chart/src/locales/en.json
+++ b/packages/analytics/analytics-chart/src/locales/en.json
@@ -6,6 +6,7 @@
   "debug": "debug",
   "total": "Total",
   "jumpToExplore": "Open in Explorer",
+  "more_actions": "More actions",
   "chartUnits": {
     "ms": "ms",
     "bytes": "Byte{plural}",
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 7fa1fb0ac9..42315629be 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -153,7 +153,6 @@ const dashboardConfig: DashboardConfig = {
     {
       definition: {
         chart: {
-          chartTitle: 'Timeseries line chart of mock data',
           type: 'timeseries_line',
         },
         query: {

From 98223e3c49cab389346417a07bc22719d1428dc2 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Sun, 17 Nov 2024 23:21:07 -0800
Subject: [PATCH 2/3] fix: component test

---
 .../analytics-chart/src/components/AnalyticsChart.cy.ts    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
index fdb0f693d2..364f36e460 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
@@ -302,7 +302,7 @@ describe('<AnalyticsChart />', () => {
     })
   })
 
-  it('Renders an "Export" button, and tabulated data in the modal preview', () => {
+  it.only('Renders an "Export" button, and tabulated data in the modal preview', () => {
     cy.mount(AnalyticsChart, {
       props: {
         allowCsvExport: true,
@@ -316,8 +316,11 @@ describe('<AnalyticsChart />', () => {
 
     cy.getTestId('chart-action-menu').should('exist')
 
+    cy.get('.chart-header').trigger('mouseenter')
+    cy.getTestId('kebab-action-menu').should('be.visible')
+
     // eslint-disable-next-line cypress/unsafe-to-chain-command
-    cy.getTestId('chart-action-menu').click().then(() => {
+    cy.getTestId('kebab-action-menu').click().then(() => {
       cy.getTestId('chart-jump-to-explore').should('not.exist')
 
       cy.getTestId('csv-export-button').click()

From fe391cea3c2c9620c6732caa38a68a892b4f2917 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 18 Nov 2024 15:22:24 -0800
Subject: [PATCH 3/3] fix: address comments

---
 .../analytics-chart/src/components/AnalyticsChart.cy.ts         | 2 +-
 .../analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
index 364f36e460..9cf34dff62 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
@@ -302,7 +302,7 @@ describe('<AnalyticsChart />', () => {
     })
   })
 
-  it.only('Renders an "Export" button, and tabulated data in the modal preview', () => {
+  it('Renders an "Export" button, and tabulated data in the modal preview', () => {
     cy.mount(AnalyticsChart, {
       props: {
         allowCsvExport: true,
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 42315629be..7fa1fb0ac9 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -153,6 +153,7 @@ const dashboardConfig: DashboardConfig = {
     {
       definition: {
         chart: {
+          chartTitle: 'Timeseries line chart of mock data',
           type: 'timeseries_line',
         },
         query: {