fix: add breakpoints

Author: filipgutica

packages/analytics/analytics-echarts/sandbox/App.vue

@@ -152,7 +152,7 @@ const data = computed<ExploreResultV4>(() => {
     }
 
     .chart-container {
-      // height: 400px;
+      height: 400px;
       width: 100%;
     }
   }

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

@@ -352,7 +352,6 @@ export default function useExploreResultToEChartTimeseries({
         yAxis: {
           type: 'value',
           axisLine: { show: true },
-          splitLine: { show: true },
           name: 'Request count',
           nameGap: 50,
           nameLocation: 'middle',
@@ -362,7 +361,6 @@ export default function useExploreResultToEChartTimeseries({
           type: 'scroll',
           bottom: 0,
           left: 'center',
-          itemGap: 8,
         },
         series,
         toolbox: { show: false },
@@ -381,28 +379,31 @@ export default function useExploreResultToEChartTimeseries({
                 right: 0,
               },
               xAxis: {
-                name: '',
+                show: false,
               },
               yAxis: {
-                name: '',
+                show: false,
               },
               legend: { show: false },
             },
           },
           {
-            query: { minHeight: 200 },
+            query: { minHeight: 201 },
             option: {
               grid: {
-                bottom: 45,
-                top: 0,
-                left: 0,
-                right: 0,
+                top: 25,
+                left: 25,
+                right: 25,
+                bottom: 50,
+                containLabel: true,
               },
               xAxis: {
-                name: '@Timestamp per 5 minutes',
+                name: '@timestamp per 5 minutes',
+                show: true,
               },
               yAxis: {
                 name: 'Request count',
+                show: true,
               },
               legend: { show: true },
             },
@@ -411,34 +412,10 @@ export default function useExploreResultToEChartTimeseries({
             query: { maxWidth: 500 },
             option: {
               grid: {
-                bottom: 45,
-                top: 0,
                 left: 0,
-                right: 0,
-              },
-              xAxis: {
-                name: '',
               },
               yAxis: {
-                name: '',
-              },
-            },
-          },
-          {
-            query: { minWidth: 501 },
-            option: {
-              grid: {
-                top: 25,
-                left: 25,
-                right: 25,
-                bottom: 50,
-                containLabel: true,
-              },
-              xAxis: {
-                name: '@timestamp per 5 minutes',
-              },
-              yAxis: {
-                name: 'Request count',
+                show: false,
               },
             },
           },

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

@@ -155,7 +155,7 @@ import '@kong-ui-public/analytics-metric-provider/dist/style.css'
 import SimpleChartRenderer from './SimpleChartRenderer.vue'
 import BarChartRenderer from './BarChartRenderer.vue'
 import { DEFAULT_TILE_HEIGHT, INJECT_QUERY_PROVIDER } from '../constants'
-import TimeseriesChartRenderer from './TimeseriesChartRenderer.vue'
+// import TimeseriesChartRenderer from './TimeseriesChartRenderer.vue'
 import AnalyticsEchartsRenderer from './AnalyticsEchartsRenderer.vue'
 import GoldenSignalsRenderer from './GoldenSignalsRenderer.vue'
 import { KUI_ICON_SIZE_20, KUI_SPACE_70 } from '@kong/design-tokens'