support legend pageable in history data charts (#1414)

Signed-off-by: tomsun28 <tomsun28@outlook.com>
apache · Jan 16, 2024 · 5a93ff1 · 5a93ff1
1 parent 03db338
commit 5a93ff1
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts
@@ -230,28 +230,26 @@ export class MonitorDataChartComponent implements OnInit {
             if (!isInterval || legend.length > 1) {
               if (legend.length > 1) {
                 this.lineHistoryTheme.legend = {
-                  orient: 'vertical',
+                  type: 'scroll',
+                  orient: 'horizontal',
                   align: 'auto',
-                  right: '10%',
-                  top: '10%',
+                  bottom: 40,
+                  pageIconSize: 10,
+                  pageButtonGap: 10,
+                  pageButtonPosition: 'end',
                   data: legend
                 };
               }
               this.lineHistoryTheme.series = [];
-              let maxLegend = 5;
               let valueKeyArr = Object.keys(values);
               for (let index = 0; index < valueKeyArr.length; index++) {
-                if (maxLegend-- <= 0) {
-                  break;
-                }
                 let key = valueKeyArr[index];
                 let seriesData: Array<{ value: any }> = [];
                 values[key].forEach((item: { time: number; origin: any }) => {
                   seriesData.push({
                     value: [item.time, item.origin]
                   });
                 });
-                // @ts-ignore
                 this.lineHistoryTheme.series.push({
                   name: key,
                   type: 'line',