UniqueSoft/swirl
3
0
Fork 0
mirror of https://github.com/cuigh/swirl synced 2024-12-28 14:51:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change color palette

Browse Source
This commit is contained in:
cuigh 2018-04-03 11:57:59 +08:00
parent 7b3b90f436
commit 68f288c69b
6 changed files with 141 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
assets/swirl/js/swirl.js
View File

@ -1161,16 +1161,21 @@ var Swirl;
},
xAxis: {
type: 'time',
splitNumber: 10,
splitLine: { show: false },
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: { show: false },
splitLine: {
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,

2
assets/swirl/js/swirl.js.map
View File

File diff suppressed because one or more lines are too long

79
assets/swirl/ts/core/chart.ts
View File

@ -53,16 +53,23 @@ namespace Swirl.Core {
},
xAxis: {
type: 'time',
splitNumber: 10,
splitLine: {show: false},
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {show: false},
// boundaryGap: [0, '100%'],
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;

10
biz/metric.go
View File

@ -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
}

2
views/index.jet
View File

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

2
views/service/stats.jet
View File

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