Ogoun
5 months ago
parent
df671f53a8
commit
343a43e7c3
|
After Width: | Height: | Size: 1.4 KiB |
@ -1,284 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
window.WebServerMonitor = window.WebServerMonitor || {};
|
|
||||||
|
|
||||||
window.WebServerMonitor.ViewModel = function (action) {
|
|
||||||
var themes = ['light', 'dark'],
|
|
||||||
themeIndex = (function () {
|
|
||||||
var themeName = window.location.href.match(/[?&]theme=([^&$]*)/);
|
|
||||||
themeName = themeName && themeName.length > 1 ? themeName[1] : themes[1];
|
|
||||||
return !Boolean($.inArray(themeName, themes));
|
|
||||||
})();
|
|
||||||
|
|
||||||
action = (action || "traffic") + ".html?theme=";
|
|
||||||
|
|
||||||
this.toggleTheme = function (index) {
|
|
||||||
themeIndex = !themeIndex;
|
|
||||||
var curTheme = themes[~~(themeIndex)];
|
|
||||||
$('body').removeClass().addClass(curTheme);
|
|
||||||
this.applyTheme(curTheme, false);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.goto = function () {
|
|
||||||
window.location = action + themes[~~themeIndex];
|
|
||||||
};
|
|
||||||
|
|
||||||
this.applyTheme = $.noop;
|
|
||||||
this.inherit = function (otherModel) {
|
|
||||||
var darkPalette = ['#46508c', '#556fa6', '#5d8dbc', '#62b7db', '#70cdd6', '#8ccebb'],
|
|
||||||
lightPalette = ['#737db5', '#7e93bf', '#8bafd2', '#90cce6', '#70cdd6', '#bae3d7'];
|
|
||||||
DevExpress.viz.registerPalette('Dark Palette', darkPalette);
|
|
||||||
DevExpress.viz.registerPalette('Light Palette', lightPalette);
|
|
||||||
$.extend(true, this, otherModel);
|
|
||||||
this.applyTheme(themes[~~(themeIndex)], true);
|
|
||||||
};
|
|
||||||
this.toggleTheme();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.WebServerMonitor.app = {};
|
|
||||||
|
|
||||||
(function (app) {
|
|
||||||
var j,
|
|
||||||
random = Math.random,
|
|
||||||
round = Math.round,
|
|
||||||
tmpArray = [],
|
|
||||||
countriesList = ['China', 'USA', 'Russia', 'Canada', 'Japan', 'Others'],
|
|
||||||
months = [],
|
|
||||||
days = [],
|
|
||||||
hours = [24],
|
|
||||||
date = new Date(),
|
|
||||||
baseDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7, 4, 0);
|
|
||||||
app.arrayForBarChart = [];
|
|
||||||
app.arrayForLineChart = [];
|
|
||||||
app.arrayForStackedBar = [];
|
|
||||||
|
|
||||||
var findHoursValue = function () {
|
|
||||||
var hoursValue = [],
|
|
||||||
k;
|
|
||||||
for (k = 0; k < 6; k++) {
|
|
||||||
hoursValue.push(~~(180 * random()));
|
|
||||||
}
|
|
||||||
return hoursValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
var findDayValue = function () {
|
|
||||||
var dayValue = [],
|
|
||||||
k;
|
|
||||||
for (k = 0; k < 6; k++) {
|
|
||||||
dayValue.push(~~(600 * random() + 200));
|
|
||||||
}
|
|
||||||
return dayValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
for (j = 1; j < 7; j++) {
|
|
||||||
hours[j] = (baseDate.getHours());
|
|
||||||
baseDate.setHours(baseDate.getHours() + 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (j = 0; j < 6; j++) {
|
|
||||||
months[j] = baseDate.getMonth() + 1;
|
|
||||||
days[j] = baseDate.getDate();
|
|
||||||
baseDate.setDate(baseDate.getDate() + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
tmpArray = $.map(countriesList, function (country) {
|
|
||||||
return {
|
|
||||||
country: country,
|
|
||||||
value: findDayValue(),
|
|
||||||
days: days,
|
|
||||||
hours: hours,
|
|
||||||
months: months,
|
|
||||||
hoursValue: findHoursValue()
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
app.arrayForBarChart = $.map(tmpArray, function (item) {
|
|
||||||
return {
|
|
||||||
country: item.country,
|
|
||||||
value: item.value[tmpArray[0].value.length - 1]
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
app.arrayForLineChart = (function () {
|
|
||||||
var date = new Date(),
|
|
||||||
lineChartData = [];
|
|
||||||
date.setDate(date.getDate() + 1);
|
|
||||||
date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0);
|
|
||||||
|
|
||||||
lineChartData.push({
|
|
||||||
hour: date,
|
|
||||||
y1: 0,
|
|
||||||
y2: 0,
|
|
||||||
y3: 0,
|
|
||||||
y4: 0,
|
|
||||||
y5: 0,
|
|
||||||
y6: 0
|
|
||||||
});
|
|
||||||
date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + 4, 0);
|
|
||||||
for (var i = 1; i < 6; i++) {
|
|
||||||
lineChartData.push({
|
|
||||||
hour: date,
|
|
||||||
y1: lineChartData[i - 1].y1 + ~~((app.arrayForBarChart[0].value / 10) + random() * 50),
|
|
||||||
y2: lineChartData[i - 1].y2 + ~~((app.arrayForBarChart[1].value / 10) + random() * 50),
|
|
||||||
y3: lineChartData[i - 1].y3 + ~~((app.arrayForBarChart[2].value / 10) + random() * 50),
|
|
||||||
y4: lineChartData[i - 1].y4 + ~~((app.arrayForBarChart[3].value / 10) + random() * 50),
|
|
||||||
y5: lineChartData[i - 1].y5 + ~~((app.arrayForBarChart[4].value / 10) + random() * 50),
|
|
||||||
y6: lineChartData[i - 1].y6 + ~~((app.arrayForBarChart[5].value / 10) + random() * 50)
|
|
||||||
});
|
|
||||||
date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + 4, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
return lineChartData;
|
|
||||||
})();
|
|
||||||
|
|
||||||
app.arrayForStackedBar = (function (arr) {
|
|
||||||
var data = [],
|
|
||||||
dataItem,
|
|
||||||
sum = [0, 0, 0, 0, 0, 0],
|
|
||||||
i,
|
|
||||||
j;
|
|
||||||
|
|
||||||
for (i = 0; i < 6; i++) {
|
|
||||||
for (j = 0; j < 6; j++) {
|
|
||||||
sum[i] += arr[j].value[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (i = 0; i < 6; i++) {
|
|
||||||
data[i] = {
|
|
||||||
day: arr[0].days[i] + '/' + arr[0].months[i],
|
|
||||||
y1: round((arr[0].value[i] / sum[i]) * 100),
|
|
||||||
y2: round((arr[1].value[i] / sum[i]) * 100),
|
|
||||||
y3: round((arr[2].value[i] / sum[i]) * 100),
|
|
||||||
y4: round((arr[3].value[i] / sum[i]) * 100),
|
|
||||||
y5: round((arr[4].value[i] / sum[i]) * 100),
|
|
||||||
y6: 0
|
|
||||||
};
|
|
||||||
|
|
||||||
dataItem = data[i];
|
|
||||||
|
|
||||||
dataItem.y6 = 100 - (dataItem.y1 + dataItem.y2 + dataItem.y3 + dataItem.y4 + dataItem.y5);
|
|
||||||
}
|
|
||||||
|
|
||||||
return data;
|
|
||||||
})(tmpArray);
|
|
||||||
|
|
||||||
var findRandomValue = function () {
|
|
||||||
var randomArray = [],
|
|
||||||
timeNow = new Date();
|
|
||||||
timeNow.setDate(timeNow.getDate() - 3);
|
|
||||||
timeNow.setHours(12);
|
|
||||||
timeNow.setMinutes(0);
|
|
||||||
for (var i = 0; i < 37; i++) {
|
|
||||||
randomArray.push({
|
|
||||||
x: new Date(timeNow.getFullYear(), timeNow.getMonth(), timeNow.getDate(), timeNow.getHours()),
|
|
||||||
y1: ~~(Math.random() * 200),
|
|
||||||
y2: ~~(Math.random() * 100),
|
|
||||||
y3: ~~(Math.random() * 1000)
|
|
||||||
});
|
|
||||||
timeNow.setHours(timeNow.getHours() + 2);
|
|
||||||
}
|
|
||||||
return randomArray;
|
|
||||||
};
|
|
||||||
|
|
||||||
app.allSeries = findRandomValue();
|
|
||||||
|
|
||||||
app._createGaugeOptions = function (gaugeValue, tickInterval, gaugeRanges, colors) {
|
|
||||||
var gaugeOptions = {
|
|
||||||
size: {
|
|
||||||
width: 210,
|
|
||||||
height: 175
|
|
||||||
},
|
|
||||||
margin: {
|
|
||||||
left: 10,
|
|
||||||
right: 10,
|
|
||||||
top: 10,
|
|
||||||
bottom: 10
|
|
||||||
},
|
|
||||||
containerBackgroundColor: colors.bkgColor,
|
|
||||||
scale: {
|
|
||||||
startValue: gaugeRanges[0].startValue,
|
|
||||||
endValue: gaugeRanges[3].endValue,
|
|
||||||
label: {
|
|
||||||
font: {
|
|
||||||
color: colors.fontColor
|
|
||||||
},
|
|
||||||
indentFromTick: 8
|
|
||||||
},
|
|
||||||
tick: {
|
|
||||||
color: 'none'
|
|
||||||
},
|
|
||||||
tickInterval: tickInterval
|
|
||||||
},
|
|
||||||
rangeContainer: {
|
|
||||||
width: 3,
|
|
||||||
ranges: gaugeRanges,
|
|
||||||
backgroundColor: 'none'
|
|
||||||
},
|
|
||||||
value: gaugeValue,
|
|
||||||
valueIndicator: {
|
|
||||||
offset: 5,
|
|
||||||
indentFromCenter: 7,
|
|
||||||
color: colors.needle
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return gaugeOptions;
|
|
||||||
};
|
|
||||||
|
|
||||||
app._createChartOptions = function (allSeries, maxValue, chartField, chartColor, colors, animation) {
|
|
||||||
var chartOptions = {
|
|
||||||
commonAxisSettings: {
|
|
||||||
visible: false,
|
|
||||||
tick: {
|
|
||||||
visible: false
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.gridColor,
|
|
||||||
opacity:1
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
font: {
|
|
||||||
color: colors.fontColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
margin: {
|
|
||||||
top: 5,
|
|
||||||
bottom: 5,
|
|
||||||
right: 36
|
|
||||||
},
|
|
||||||
argumentAxis: {
|
|
||||||
valueMarginsEnabled: false,
|
|
||||||
grid: { visible: true }
|
|
||||||
},
|
|
||||||
animation: animation,
|
|
||||||
commonPaneSettings: {
|
|
||||||
border: {
|
|
||||||
visible: true,
|
|
||||||
color: colors.gridColor,
|
|
||||||
opacity:1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: { visible: false },
|
|
||||||
dataSource: allSeries,
|
|
||||||
valueAxis: {
|
|
||||||
placeholderSize: 60,
|
|
||||||
valueMarginsEnabled: false,
|
|
||||||
visualRange: {
|
|
||||||
startValue: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
argumentField: 'x',
|
|
||||||
valueField: chartField,
|
|
||||||
type: 'area',
|
|
||||||
point: { visible: false },
|
|
||||||
color: chartColor,
|
|
||||||
style: { opacity: 0.38 }
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
return chartOptions;
|
|
||||||
};
|
|
||||||
}(window.WebServerMonitor.app));
|
|
||||||
}());
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,219 +1,54 @@
|
|||||||
"use strict";
|
$(() => {
|
||||||
|
let markersData = [];
|
||||||
(function(){
|
for(var r_idx in data['regions'])
|
||||||
var view = new window.WebServerMonitor.ViewModel(),
|
{
|
||||||
requestChart,
|
var region = data['regions'][r_idx]
|
||||||
cpuChart,
|
for(var p_idx in region.points)
|
||||||
memoryChart;
|
{
|
||||||
|
var point = region.points[p_idx];
|
||||||
|
var loc = point.gps.split(',');
|
||||||
|
var lat = parseFloat(loc[0].trim())
|
||||||
|
var lon = parseFloat(loc[1].trim())
|
||||||
|
markersData.push({ location: [lat, lon], tooltip: { text: point.name, },}, );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
view.inherit(function(){
|
const markerUrl = './img/map-marker.png';
|
||||||
var gaugesPalette,
|
|
||||||
chartsPalette,
|
|
||||||
app = window.WebServerMonitor.app,
|
|
||||||
colors,
|
|
||||||
fonts,
|
|
||||||
allSeries = app.allSeries;
|
|
||||||
|
|
||||||
return {
|
const mapWidget = $('#map').dxMap({
|
||||||
applyTheme: function (theme, animation) {
|
provider: 'bing',
|
||||||
if (theme === 'dark') {
|
apiKey: {
|
||||||
gaugesPalette = ['#7cd2c7', '#f9d191', '#f9d191', '#fd7888', '#8b98c2'];
|
bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
|
||||||
chartsPalette = ['#58ffe8', '#5eceff', '#93a9ff'];
|
},
|
||||||
colors = {
|
zoom: 11,
|
||||||
fontColor:'#a7acbc',
|
height: 440,
|
||||||
gridColor:'#515873',
|
width: '100%',
|
||||||
bkgColor: '#363E5B',
|
controls: true,
|
||||||
needle: '#ffffff',
|
markerIconSrc: markerUrl,
|
||||||
shutter: {
|
markers: markersData,
|
||||||
color: '#363e5b',
|
type: 'roadmap'
|
||||||
opacity: 0.65
|
}).dxMap('instance');
|
||||||
}
|
|
||||||
};
|
|
||||||
fonts = {
|
|
||||||
sliderMarker: {
|
|
||||||
color: '#43474b',
|
|
||||||
size: 11,
|
|
||||||
weight: 400
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
gaugesPalette = ['#76c8bd', '#f7c676', '#f7c676', '#c5819a', '#96a3d4'];
|
|
||||||
chartsPalette = ['#76c8bd', '#75c0e0', '#c5cce7'];
|
|
||||||
colors = {
|
|
||||||
fontColor: '#7f7f7f',
|
|
||||||
gridColor: '#e9e9e9',
|
|
||||||
bkgColor: '#ffffff',
|
|
||||||
needle: '#43474b',
|
|
||||||
shutter: {
|
|
||||||
color: 'white',
|
|
||||||
opacity: 0.65
|
|
||||||
}
|
|
||||||
};
|
|
||||||
fonts = {
|
|
||||||
sliderMarker: {
|
|
||||||
color: 'white',
|
|
||||||
size: 11,
|
|
||||||
weight: 400
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
$('#use-custom-markers').dxCheckBox({
|
||||||
}
|
value: true,
|
||||||
this.gaugeRequestsNumberOptions(app._createGaugeOptions(allSeries[36].y1,
|
text: 'Use custom marker icons',
|
||||||
50,
|
onValueChanged(data) {
|
||||||
[{
|
mapWidget.option('markers', markersData);
|
||||||
startValue: 0,
|
mapWidget.option('markerIconSrc', data.value ? markerUrl : null);
|
||||||
endValue: 48,
|
},
|
||||||
color: gaugesPalette[0]
|
});
|
||||||
}, {
|
|
||||||
startValue: 52,
|
|
||||||
endValue: 98,
|
|
||||||
color: gaugesPalette[1]
|
|
||||||
}, {
|
|
||||||
startValue: 102,
|
|
||||||
endValue: 148,
|
|
||||||
color: gaugesPalette[2]
|
|
||||||
}, {
|
|
||||||
startValue: 152,
|
|
||||||
endValue: 200,
|
|
||||||
color: gaugesPalette[3]
|
|
||||||
}],
|
|
||||||
colors));
|
|
||||||
this.gaugeCPUOptions(app._createGaugeOptions(allSeries[36].y2,
|
|
||||||
25,
|
|
||||||
[{
|
|
||||||
startValue: 0,
|
|
||||||
endValue: 24,
|
|
||||||
color: gaugesPalette[0]
|
|
||||||
}, {
|
|
||||||
startValue: 26,
|
|
||||||
endValue: 49,
|
|
||||||
color: gaugesPalette[1]
|
|
||||||
}, {
|
|
||||||
startValue: 51,
|
|
||||||
endValue: 74,
|
|
||||||
color: gaugesPalette[2]
|
|
||||||
}, {
|
|
||||||
startValue: 76,
|
|
||||||
endValue: 100,
|
|
||||||
color: gaugesPalette[3]
|
|
||||||
}],
|
|
||||||
colors));
|
|
||||||
this.gaugeMemoryConsumptionOptions(app._createGaugeOptions(allSeries[36].y3,
|
|
||||||
250,
|
|
||||||
[{
|
|
||||||
startValue: 0,
|
|
||||||
endValue: 240,
|
|
||||||
color: gaugesPalette[4]
|
|
||||||
}, {
|
|
||||||
startValue: 260,
|
|
||||||
endValue: 490,
|
|
||||||
color: gaugesPalette[4]
|
|
||||||
}, {
|
|
||||||
startValue: 510,
|
|
||||||
endValue: 740,
|
|
||||||
color: gaugesPalette[4]
|
|
||||||
}, {
|
|
||||||
startValue: 760,
|
|
||||||
endValue: 1000,
|
|
||||||
color: gaugesPalette[4]
|
|
||||||
}],
|
|
||||||
colors));
|
|
||||||
this.chartRequestsNumberOptions(app._createChartOptions(allSeries, 200, 'y1', chartsPalette[0], colors, animation));
|
|
||||||
this.chartCPUOptions(app._createChartOptions(allSeries, 100, 'y2', chartsPalette[1], colors, animation));
|
|
||||||
this.chartMemoryConsumptionOptions(app._createChartOptions(allSeries, 1000, 'y3', chartsPalette[2], colors, animation));
|
|
||||||
$('#rangeSelectorContainer').empty();
|
|
||||||
$('#rangeSelectorContainer').removeData();
|
|
||||||
$('#rangeSelectorContainer').dxRangeSelector({
|
|
||||||
containerBackgroundColor: colors.bkgColor,
|
|
||||||
margin: {
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0
|
|
||||||
},
|
|
||||||
minorTick: {
|
|
||||||
visible: true
|
|
||||||
},
|
|
||||||
tickInterval: {
|
|
||||||
hours: 12
|
|
||||||
},
|
|
||||||
scale: {
|
|
||||||
minorTickInterval: { hours: 4 },
|
|
||||||
minRange: 'hour',
|
|
||||||
tick: {
|
|
||||||
color: colors.gridColor,
|
|
||||||
opacity: 1
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
font: {
|
|
||||||
color: colors.fontColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataSource: allSeries,
|
|
||||||
behavior: {
|
|
||||||
callValueChanged: 'onMoving',
|
|
||||||
animationEnabled: false
|
|
||||||
},
|
|
||||||
indent: {
|
|
||||||
left: 60,
|
|
||||||
right: 60
|
|
||||||
},
|
|
||||||
sliderMarker: {
|
|
||||||
format: 'hour',
|
|
||||||
font: fonts.sliderMarker,
|
|
||||||
color: colors.needle
|
|
||||||
},
|
|
||||||
shutter: colors.shutter,
|
|
||||||
onValueChanged: function(e) {
|
|
||||||
zoomChart(requestChart, e);
|
|
||||||
zoomChart(cpuChart, e);
|
|
||||||
zoomChart(memoryChart, e);
|
|
||||||
},
|
|
||||||
chart: {
|
|
||||||
palette: chartsPalette,
|
|
||||||
commonSeriesSettings: {
|
|
||||||
type: 'area',
|
|
||||||
argumentField: 'x'
|
|
||||||
},
|
|
||||||
topIndent: 0,
|
|
||||||
bottomIndent: 0,
|
|
||||||
valueAxis: {
|
|
||||||
visualRange: {
|
|
||||||
startValue: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
valueField: 'y1'
|
|
||||||
}, {
|
|
||||||
valueField: 'y2'
|
|
||||||
}, {
|
|
||||||
valueField: 'y3'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
requestsNumber: allSeries[36].y1,
|
|
||||||
CPU: allSeries[36].y2,
|
|
||||||
memoryConsumption: allSeries[36].y3,
|
|
||||||
gaugeRequestsNumberOptions: ko.observable({}),
|
|
||||||
gaugeCPUOptions: ko.observable({}),
|
|
||||||
gaugeMemoryConsumptionOptions: ko.observable({}),
|
|
||||||
chartRequestsNumberOptions: ko.observable({}),
|
|
||||||
chartCPUOptions: ko.observable({}),
|
|
||||||
chartMemoryConsumptionOptions: ko.observable({})
|
|
||||||
};
|
|
||||||
}());
|
|
||||||
ko.applyBindings(view);
|
|
||||||
|
|
||||||
requestChart = $('#RequestChartContainer').dxChart('instance');
|
$('#show-tooltips').dxButton({
|
||||||
cpuChart = $('#CPUChartContainer').dxChart('instance');
|
text: 'Show all tooltips',
|
||||||
memoryChart = $('#memoryChartContainer').dxChart('instance');
|
onClick() {
|
||||||
|
const newMarkers = $.map(markersData, (item) => $.extend(
|
||||||
|
true,
|
||||||
|
{},
|
||||||
|
item,
|
||||||
|
{ tooltip: { isShown: true } },
|
||||||
|
));
|
||||||
|
|
||||||
function zoomChart(chart, args) {
|
mapWidget.option('markers', newMarkers);
|
||||||
clearTimeout(chart.zoomTimeout);
|
},
|
||||||
chart.zoomTimeout = setTimeout(function () {
|
});
|
||||||
chart.getArgumentAxis().visualRange(args.value);
|
});
|
||||||
}, 30);
|
|
||||||
}
|
|
||||||
}());
|
|
||||||
@ -1,249 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
var view = new window.WebServerMonitor.ViewModel("index");
|
|
||||||
view.inherit(function () {
|
|
||||||
var palette,
|
|
||||||
fontColor,
|
|
||||||
gridColor,
|
|
||||||
bkgColor,
|
|
||||||
app = window.WebServerMonitor.app,
|
|
||||||
labelTextColor,
|
|
||||||
labelColor;
|
|
||||||
return {
|
|
||||||
applyTheme: function (theme, animation) {
|
|
||||||
if (theme == 'dark') {
|
|
||||||
palette = 'Dark Palette';
|
|
||||||
fontColor = '#a7acbc';
|
|
||||||
gridColor = '#515873';
|
|
||||||
bkgColor = '#363E5B';
|
|
||||||
labelTextColor = '#363e5b';
|
|
||||||
labelColor = 'white';
|
|
||||||
} else {
|
|
||||||
palette = 'Light Palette';
|
|
||||||
fontColor = '#7f7f7f';
|
|
||||||
gridColor = '#e9e9e9';
|
|
||||||
bkgColor = '#ffffff';
|
|
||||||
labelTextColor = 'white';
|
|
||||||
labelColor = '#43474b';
|
|
||||||
}
|
|
||||||
this.pieChartOptions({
|
|
||||||
palette: palette,
|
|
||||||
size: {
|
|
||||||
height: 270
|
|
||||||
},
|
|
||||||
margin: {
|
|
||||||
top: 30
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
visible: false
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: true,
|
|
||||||
customizeText: function () {
|
|
||||||
return this.argumentText + '<br/>' + this.percentText;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
animation: animation,
|
|
||||||
dataSource: app.arrayForBarChart,
|
|
||||||
series: {
|
|
||||||
border: {
|
|
||||||
color: bkgColor,
|
|
||||||
width: 2,
|
|
||||||
visible: true
|
|
||||||
},
|
|
||||||
hoverStyle: {
|
|
||||||
border: {
|
|
||||||
color: bkgColor,
|
|
||||||
width: 2,
|
|
||||||
visible: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
argumentField: 'country',
|
|
||||||
valueField: 'value'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.barChartOptions({
|
|
||||||
commonAxisSettings: {
|
|
||||||
visible: false,
|
|
||||||
tick: {
|
|
||||||
visible: false
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: gridColor,
|
|
||||||
opacity:1
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
font: {
|
|
||||||
color: fontColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
animation: animation,
|
|
||||||
margin: {
|
|
||||||
right: 177
|
|
||||||
},
|
|
||||||
commonSeriesSettings: {
|
|
||||||
type: 'bar'
|
|
||||||
},
|
|
||||||
valueAxis: {
|
|
||||||
visualRange: {
|
|
||||||
startValue: 0,
|
|
||||||
endValue: 1000
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: { visible: false },
|
|
||||||
dataSource: app.arrayForBarChart,
|
|
||||||
series: [{
|
|
||||||
label: {
|
|
||||||
visible: true,
|
|
||||||
backgroundColor: labelColor,
|
|
||||||
font: {
|
|
||||||
color: labelTextColor,
|
|
||||||
size:11
|
|
||||||
}
|
|
||||||
},
|
|
||||||
argumentField: 'country',
|
|
||||||
valueField: 'value',
|
|
||||||
color: DevExpress.viz.getPalette(palette).simpleSet[2]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
this.stackedBarChartOptions({
|
|
||||||
palette: palette,
|
|
||||||
commonAxisSettings: {
|
|
||||||
visible: false,
|
|
||||||
tick: {
|
|
||||||
visible: false
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: gridColor,
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
font: {
|
|
||||||
color: fontColor
|
|
||||||
}
|
|
||||||
},
|
|
||||||
opacity: 1
|
|
||||||
},
|
|
||||||
animation: animation,
|
|
||||||
commonSeriesSettings: {
|
|
||||||
argumentField: 'day',
|
|
||||||
type: 'stackedBar'
|
|
||||||
},
|
|
||||||
valueAxis: {
|
|
||||||
inverted: true,
|
|
||||||
label: {
|
|
||||||
customizeText: function () {
|
|
||||||
return 100 - this.value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
margin: 30,
|
|
||||||
rowItemSpacing: 10,
|
|
||||||
markerSize: 20,
|
|
||||||
font: {
|
|
||||||
color:fontColor
|
|
||||||
}
|
|
||||||
},
|
|
||||||
margin: {
|
|
||||||
top: 16,
|
|
||||||
right: 41
|
|
||||||
},
|
|
||||||
dataSource: app.arrayForStackedBar,
|
|
||||||
series: [{
|
|
||||||
valueField: 'y1',
|
|
||||||
name: 'China'
|
|
||||||
}, {
|
|
||||||
valueField: 'y2',
|
|
||||||
name: 'USA'
|
|
||||||
}, {
|
|
||||||
valueField: 'y3',
|
|
||||||
name: 'Russia'
|
|
||||||
}, {
|
|
||||||
valueField: 'y4',
|
|
||||||
name: 'Canada'
|
|
||||||
}, {
|
|
||||||
valueField: 'y5',
|
|
||||||
name: 'Japan'
|
|
||||||
}, {
|
|
||||||
valueField: 'y6',
|
|
||||||
name: 'Others'
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
this.lineChartOptions({
|
|
||||||
palette: palette,
|
|
||||||
commonAxisSettings: {
|
|
||||||
visible: false,
|
|
||||||
tick: {
|
|
||||||
visible: false
|
|
||||||
},
|
|
||||||
valueMarginsEnabled: false,
|
|
||||||
grid: {
|
|
||||||
color: gridColor,
|
|
||||||
visible: true,
|
|
||||||
opacity: 1
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
font: {
|
|
||||||
color: fontColor
|
|
||||||
}
|
|
||||||
},
|
|
||||||
opacity: 1
|
|
||||||
},
|
|
||||||
animation: animation,
|
|
||||||
size: {
|
|
||||||
width: 400
|
|
||||||
},
|
|
||||||
margin: {
|
|
||||||
top: 16
|
|
||||||
},
|
|
||||||
commonSeriesSettings: {
|
|
||||||
argumentField: 'hour',
|
|
||||||
type: 'spline',
|
|
||||||
point: { visible: false }
|
|
||||||
},
|
|
||||||
commonPaneSettings: {
|
|
||||||
border: {
|
|
||||||
visible: true,
|
|
||||||
color: gridColor,
|
|
||||||
opacity:1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
argumentAxis: {
|
|
||||||
tickInterval: {
|
|
||||||
hours: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
valueAxis: {
|
|
||||||
visualRange: {
|
|
||||||
startValue: 0,
|
|
||||||
endValue: 500
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: { visible: false },
|
|
||||||
dataSource: app.arrayForLineChart,
|
|
||||||
series: [{
|
|
||||||
valueField: 'y1'
|
|
||||||
}, {
|
|
||||||
valueField: 'y2'
|
|
||||||
}, {
|
|
||||||
valueField: 'y3'
|
|
||||||
}, {
|
|
||||||
valueField: 'y4'
|
|
||||||
}, {
|
|
||||||
valueField: 'y5'
|
|
||||||
}, {
|
|
||||||
valueField: 'y6'
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
},
|
|
||||||
pieChartOptions: ko.observable({}),
|
|
||||||
barChartOptions: ko.observable({}),
|
|
||||||
stackedBarChartOptions: ko.observable({}),
|
|
||||||
lineChartOptions: ko.observable({})
|
|
||||||
};
|
|
||||||
}());
|
|
||||||
ko.applyBindings(view);
|
|
||||||
}());
|
|
||||||
Loading…
Reference in new issue