fix: analytics chart kebab menu positioning (#1785)

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))

packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts

@@ -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()

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>

packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue

@@ -19,6 +19,7 @@
       >
         <canvas
           ref="canvas"
+          class="chart-canvas"
         />
       </div>
     </div>

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)"

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}",