fix: typecheck

Author: filipgutica

packages/analytics/analytics-echarts/src/components/BaseAnalyticsEcharts.vue

@@ -56,15 +56,13 @@ import type { ECBasicOption } from 'echarts/types/dist/shared'
 const {
   option,
   enableBrush = false,
-  zoom = false,
   granularity = undefined,
   zoomActionItems = undefined,
   theme = 'light',
   renderMode = 'svg',
 } = defineProps<{
   option: ECBasicOption
   enableBrush?: boolean
-  zoom?: boolean
   granularity?: GranularityValues
   zoomActionItems?: ZoomActionItem[]
   theme?: 'light' | 'dark'

packages/analytics/analytics-echarts/src/components/CrossSectionChart.vue

@@ -42,7 +42,7 @@ const { option } = composables.useExploreResultToEChartCrossSectional({
   exploreResult: toRef(() => data),
   chartType: toRef(() => type),
   stacked: toRef(() => stacked),
-  colorPalette,
+  colorPalette: toRef(() => colorPalette),
   tooltipState,
 })
 </script>

packages/analytics/analytics-echarts/src/composables/useExploreResultToEChartTimeseries.ts

@@ -12,7 +12,7 @@ import {
 import composables from '.'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import type { TooltipState } from 'src/components/ChartTooltip.vue'
-import type { Threshold, ThresholdType } from 'src/components/AnalyticsEcharts.vue'
+import type { ThresholdType, Threshold } from 'src/types'
 
 // types
 type DatasetLabel = { id: string, name: string }

packages/analytics/analytics-echarts/src/composables/useExploreResultToEchartCrossSectional.ts

@@ -24,7 +24,7 @@ export default function useExploreResultToEChartCrossSectional({
   chartType: Ref<ReportChartTypes>
   tooltipState: Ref<TooltipState>
   stacked?: Ref<boolean>
-  colorPalette?: Ref<string[]> | Ref<Record<string, string>>
+  colorPalette?: Ref<string[] | Record<string, string> | undefined>
 }) {
   const { i18n } = composables.useI18n()
 
@@ -40,7 +40,6 @@ export default function useExploreResultToEChartCrossSectional({
       const dimensionKeys = display && Object.keys(display)
       const isMultiMetric = metricNames && metricNames.length > 1
       const hasDimensions = display && dimensionKeys && dimensionKeys.length > 0
-      const isMultiDimension = hasDimensions && dimensionKeys.length > 1
 
       if (!records.length || !metricNames) {
         return { series: [], xAxis: {}, yAxis: {} }
@@ -201,6 +200,11 @@ export default function useExploreResultToEChartCrossSectional({
             data,
             itemStyle: { color: baseColor },
             stack: stacked.value ? 'total' : undefined,
+            label: {
+              show: true,
+              position: stacked.value ? 'inside' : 'top',
+              formatter: '{c}',
+            },
             selectedMode: 'single', // or 'multiple' if you want multi-select
             select: {
               itemStyle: {
@@ -238,6 +242,11 @@ export default function useExploreResultToEChartCrossSectional({
             itemStyle: { color: baseColor },
             stack: stacked.value ? 'total' : undefined,
             isSegmentEmpty: dimension.id === 'empty',
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c} requests',
+            },
             selectedMode: 'single', // or 'multiple' if you want multi-select
             select: {
               itemStyle: {
@@ -327,7 +336,6 @@ export default function useExploreResultToEChartCrossSectional({
             type: 'value',
             axisLine: { show: true },
           },
-        selectedMode: 'single',
         series,
       } as ECBasicOption
     } catch (err) {

packages/analytics/analytics-echarts/src/utils/colors.ts

@@ -1,5 +1,5 @@
 import { KUI_COLOR_BACKGROUND_NEUTRAL, KUI_COLOR_TEXT_DANGER, KUI_COLOR_TEXT_WARNING_WEAK } from '@kong/design-tokens'
-import type { ThresholdType } from 'src/components/AnalyticsEcharts.vue'
+import type { ThresholdType } from '../types'
 interface AnalyticsChartColors {
   [dimensionValue: string]: string
 }

packages/analytics/dashboard-renderer/src/components/AnalyticsEchartsRenderer.vue

@@ -8,7 +8,7 @@
     @chart-data="onChartData"
   >
     <div class="analytics-chart">
-      <AnalyticsEcharts
+      <TimeseriesChart
         :data="data"
         :stacked="chartOptions.stacked ?? false"
         :threshold="chartOptions.threshold"
@@ -25,7 +25,7 @@
 import type { RendererProps } from '../types'
 import QueryDataProvider from './QueryDataProvider.vue'
 import { computed } from 'vue'
-import { AnalyticsEcharts } from '@kong-ui-public/analytics-echarts'
+import { TimeseriesChart } from '@kong-ui-public/analytics-echarts'
 import type { AbsoluteTimeRangeV4, ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
 
 const props = defineProps<RendererProps<any> & { extraProps?: Record<string, any> }>()