Change color palette

assets/swirl/js/swirl.js

@@ -1161,16 +1161,21 @@ var Swirl;
                     },
                     xAxis: {
                         type: 'time',
+                        splitNumber: 10,
                         splitLine: { show: false },
                     },
                     yAxis: {
                         type: 'value',
-                        boundaryGap: [0, '100%'],
+                        splitLine: {
-                        splitLine: { show: false },
+                            lineStyle: {
+                                type: "dashed",
+                            },
+                        },
                         axisLabel: {
                             formatter: this.formatValue.bind(this),
                         },
                     },
+                    color: this.getColors(),
                 };
                 this.config(opt);
                 this.chart = echarts.init(this.$elem.find("div.card-content").get(0));
@@ -1217,6 +1222,39 @@ var Swirl;
                         return value.toFixed(2);
                 }
             }
+            getColors() {
+                let colors = [
+                    '#00d1b2',
+                    '#209cee',
+                    '#3272dc',
+                    '#23d160',
+                    '#ffdd57',
+                    '#ff3860',
+                    '#363636',
+                    '#c23531',
+                    '#2f4554',
+                    '#61a0a8',
+                    '#d48265',
+                    '#91c7ae',
+                    '#749f83',
+                    '#ca8622',
+                    '#bda29a',
+                    '#6e7074',
+                    '#546570',
+                    '#c4ccd3',
+                ];
+                this.shuffle(colors);
+                return colors;
+            }
+            shuffle(a) {
+                let len = a.length;
+                for (let i = 0; i < len - 1; i++) {
+                    let index = Math.floor(Math.random() * (len - i));
+                    let temp = a[index];
+                    a[index] = a[len - i - 1];
+                    a[len - i - 1] = temp;
+                }
+            }
         }
         Core.Chart = Chart;
         class GaugeChart extends Chart {
@@ -1335,10 +1373,28 @@ var Swirl;
                             return html;
                         },
                     },
+                    yAxis: {
+                        max: 'dataMax',
+                    },
                 });
             }
             setData(d) {
-                d.series.forEach((s) => s.type = this.opts.type);
+                if (!d.series) {
+                    return;
+                }
+                d.series.forEach((s) => {
+                    s.type = this.opts.type;
+                    s.areaStyle = {
+                        opacity: 0.3,
+                    };
+                    s.smooth = true;
+                    s.showSymbol = false;
+                    s.lineStyle = {
+                        normal: {
+                            width: 1,
+                        }
+                    };
+                });
                 this.chart.setOption({
                     legend: {
                         data: d.legend,

assets/swirl/ts/core/chart.ts

@@ -53,16 +53,23 @@ namespace Swirl.Core {
                 },
                 xAxis: {
                     type: 'time',
+                    splitNumber: 10,
                     splitLine: {show: false},
                 },
                 yAxis: {
                     type: 'value',
-                    boundaryGap: [0, '100%'],
+                    // boundaryGap: [0, '100%'],
-                    splitLine: {show: false},
+                    splitLine: {
+                        // show: false,
+                        lineStyle: {
+                            type: "dashed",
+                        },
+                    },
                     axisLabel: {
                         formatter: this.formatValue.bind(this),
                     },
                 },
+                color: this.getColors(),
             };
             this.config(opt);
             this.chart = echarts.init(<HTMLDivElement>this.$elem.find("div.card-content").get(0));
@@ -112,6 +119,48 @@ namespace Swirl.Core {
                     return value.toFixed(2);
             }
         }
+
+        private getColors(): string[] {
+            // ECharts default colors
+            // let colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
+            // let colors = [
+            //     '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
+            //     '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
+            //     '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
+            // ];
+            let colors = [
+                '#00d1b2',
+                '#209cee',
+                '#3272dc',
+                '#23d160',
+                '#ffdd57',
+                '#ff3860',
+                '#363636',
+                '#c23531',
+                '#2f4554',
+                '#61a0a8',
+                '#d48265',
+                '#91c7ae',
+                '#749f83',
+                '#ca8622',
+                '#bda29a',
+                '#6e7074',
+                '#546570',
+                '#c4ccd3',
+            ];
+            this.shuffle(colors);
+            return colors;
+        }
+
+        private shuffle(a: any) {
+            let len = a.length;
+            for (let i = 0; i < len - 1; i++) {
+                let index = Math.floor(Math.random() * (len - i));
+                let temp = a[index];
+                a[index] = a[len - i - 1];
+                a[len - i - 1] = temp;
+            }
+        }
     }
 
     /**
@@ -240,16 +289,36 @@ namespace Swirl.Core {
                     formatter: (params: any) => {
                         let html = params[0].axisValueLabel + '<br/>';
                         for (let i = 0; i < params.length; i++) {
-                            html += params[i].marker + params[i].seriesName +': ' + this.formatValue(params[i].value[1]) + '<br/>';
+                            html += params[i].marker + params[i].seriesName + ': ' + this.formatValue(params[i].value[1]) + '<br/>';
                         }
                         return html;
                     },
                 },
+                yAxis: {
+                    // min: 'dataMin',
+                    max: 'dataMax',
+                },
             });
         }
 
         setData(d: any): void {
-            d.series.forEach((s: any) => s.type = this.opts.type);
+            if (!d.series) {
+                return;
+            }
+
+            d.series.forEach((s: any) => {
+                s.type = this.opts.type;
+                s.areaStyle = {
+                    opacity: 0.3,
+                };
+                s.smooth = true;
+                s.showSymbol = false;
+                s.lineStyle = {
+                    normal: {
+                        width: 1,
+                    }
+                };
+            });
             this.chart.setOption({
                 legend: {
                     data: d.legend,
@@ -283,7 +352,7 @@ namespace Swirl.Core {
 
     export class ChartDashboard {
         private $panel: JQuery;
-        private opts: ChartDashboardOptions;
+        private readonly opts: ChartDashboardOptions;
         private charts: Chart[] = [];
         private timer: number;
         private dlg: ChartDialog;

biz/metric.go

@@ -138,15 +138,15 @@ func (b *metricBiz) GetVector(query, label string, t time.Time) (data *model.Cha
 
 func (b *metricBiz) calcStep(period time.Duration) (step time.Duration) {
 	if period >= times.Day {
-		step = 20 * time.Minute
+		step = 8 * time.Minute
 	} else if period >= 12*time.Hour {
-		step = 10 * time.Minute
+		step = 4 * time.Minute
 	} else if period >= 6*time.Hour {
-		step = 5 * time.Minute
+		step = 2 * time.Minute
 	} else if period >= 3*time.Hour {
-		step = 3 * time.Minute
-	} else {
 		step = time.Minute
+	} else {
+		step = 30 * time.Second
 	}
 	return
 }

views/index.jet

@@ -64,7 +64,7 @@
     {{yield infobox(style="primary", icon="server", text=i18n("home.stack"), url="/stack/task/", count=.StackCount)}}
   </div>
   <hr>
-  <nav class="level">
+  <nav class="level is-mobile">
     <div class="level-left">
       <div class="level-item">
         <p class="subtitle is-5">

views/service/stats.jet

@@ -43,7 +43,7 @@
 <section class="section">
   <div class="container">
     {{ if .Charts }}
-    <nav class="level">
+    <nav class="level is-mobile">
       <form>
         <div class="level-left">
           <div class="level-item">