Ogoun
8 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";
|
||||
|
||||
(function(){
|
||||
var view = new window.WebServerMonitor.ViewModel(),
|
||||
requestChart,
|
||||
cpuChart,
|
||||
memoryChart;
|
||||
|
||||
view.inherit(function(){
|
||||
var gaugesPalette,
|
||||
chartsPalette,
|
||||
app = window.WebServerMonitor.app,
|
||||
colors,
|
||||
fonts,
|
||||
allSeries = app.allSeries;
|
||||
|
||||
return {
|
||||
applyTheme: function (theme, animation) {
|
||||
if (theme === 'dark') {
|
||||
gaugesPalette = ['#7cd2c7', '#f9d191', '#f9d191', '#fd7888', '#8b98c2'];
|
||||
chartsPalette = ['#58ffe8', '#5eceff', '#93a9ff'];
|
||||
colors = {
|
||||
fontColor:'#a7acbc',
|
||||
gridColor:'#515873',
|
||||
bkgColor: '#363E5B',
|
||||
needle: '#ffffff',
|
||||
shutter: {
|
||||
color: '#363e5b',
|
||||
opacity: 0.65
|
||||
}
|
||||
};
|
||||
fonts = {
|
||||
sliderMarker: {
|
||||
color: '#43474b',
|
||||
size: 11,
|
||||
weight: 400
|
||||
$(() => {
|
||||
let markersData = [];
|
||||
for(var r_idx in data['regions'])
|
||||
{
|
||||
var region = data['regions'][r_idx]
|
||||
for(var p_idx in region.points)
|
||||
{
|
||||
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, },}, );
|
||||
}
|
||||
};
|
||||
} 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
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
this.gaugeRequestsNumberOptions(app._createGaugeOptions(allSeries[36].y1,
|
||||
50,
|
||||
[{
|
||||
startValue: 0,
|
||||
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
|
||||
}
|
||||
const markerUrl = './img/map-marker.png';
|
||||
|
||||
const mapWidget = $('#map').dxMap({
|
||||
provider: 'bing',
|
||||
apiKey: {
|
||||
bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
|
||||
},
|
||||
zoom: 11,
|
||||
height: 440,
|
||||
width: '100%',
|
||||
controls: true,
|
||||
markerIconSrc: markerUrl,
|
||||
markers: markersData,
|
||||
type: 'roadmap'
|
||||
}).dxMap('instance');
|
||||
|
||||
$('#use-custom-markers').dxCheckBox({
|
||||
value: true,
|
||||
text: 'Use custom marker icons',
|
||||
onValueChanged(data) {
|
||||
mapWidget.option('markers', markersData);
|
||||
mapWidget.option('markerIconSrc', data.value ? markerUrl : null);
|
||||
},
|
||||
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');
|
||||
cpuChart = $('#CPUChartContainer').dxChart('instance');
|
||||
memoryChart = $('#memoryChartContainer').dxChart('instance');
|
||||
$('#show-tooltips').dxButton({
|
||||
text: 'Show all tooltips',
|
||||
onClick() {
|
||||
const newMarkers = $.map(markersData, (item) => $.extend(
|
||||
true,
|
||||
{},
|
||||
item,
|
||||
{ tooltip: { isShown: true } },
|
||||
));
|
||||
|
||||
function zoomChart(chart, args) {
|
||||
clearTimeout(chart.zoomTimeout);
|
||||
chart.zoomTimeout = setTimeout(function () {
|
||||
chart.getArgumentAxis().visualRange(args.value);
|
||||
}, 30);
|
||||
}
|
||||
}());
|
||||
mapWidget.option('markers', newMarkers);
|
||||
},
|
||||
});
|
||||
});
|
||||
@ -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