mirror of https://gitee.com/bigwinds/arangodb
dahsboard refactoring
This commit is contained in:
scottashton
parent
dc164ec6d2
commit
1da96a0826
|
|
@ -48,18 +48,18 @@
|
|||
},
|
||||
|
||||
mapStatToFigure : {
|
||||
numberOfThreads : ["times", "numberOfThreadsCurrent"],
|
||||
numberOfThreads : ["times", "numberOfThreads"],
|
||||
residentSize : ["times", "residentSizePercent"],
|
||||
virtualSize : ["times", "virtualSize"],
|
||||
pageFaults : ["times", "majorPageFaultsPerSecond", "minorPageFaultsPerSecond"],
|
||||
systemUserTime : ["times", "cpuSystemTime", "cpuUserTime"],
|
||||
httpConnections : ["times", "clientConnectionsCurrent"],
|
||||
httpConnections : ["times", "clientConnections"],
|
||||
totalTime : ["times", "avgQueueTime", "avgRequestTime", "avgIoTime"],
|
||||
dataTransfer : ["times", "bytesSentPerSecond", "bytesReceivedPerSecond"],
|
||||
requests : ["times", "getsPerSecond", "putsPerSecond", "postsPerSecond",
|
||||
"deletesPerSecond", "patchesPerSecond", "headsPerSecond",
|
||||
"optionsPerSecond", "othersPerSecond"],
|
||||
requestsAsync : ["times", "asyncsPerSecond"]
|
||||
requestsAsync : ["times", "asyncPerSecond"]
|
||||
},
|
||||
|
||||
//colors for dygraphs
|
||||
|
|
@ -104,13 +104,13 @@
|
|||
axes: {
|
||||
y: {
|
||||
valueFormatter: function (y) {
|
||||
return y.toPrecision(3);
|
||||
return parseFloat(y.toPrecision(3));
|
||||
},
|
||||
axisLabelFormatter: function (y) {
|
||||
if (y === 0) {
|
||||
return 0;
|
||||
}
|
||||
return y.toPrecision(3);
|
||||
return parseFloat(y.toPrecision(3));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,13 +126,13 @@
|
|||
axes: {
|
||||
y: {
|
||||
valueFormatter: function (y) {
|
||||
return y.toPrecision(3);
|
||||
return parseFloat(y.toPrecision(3));
|
||||
},
|
||||
axisLabelFormatter: function (y) {
|
||||
if (y === 0) {
|
||||
return 0;
|
||||
}
|
||||
return y.toPrecision(3);
|
||||
return parseFloat(y.toPrecision(3));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -229,7 +229,9 @@
|
|||
showRangeSelector: true,
|
||||
interactionModel: null,
|
||||
showLabelsOnHighlight: true,
|
||||
highlightCircleSize: 3
|
||||
highlightCircleSize: 3,
|
||||
legend : "always",
|
||||
labelsDiv : document.getElementById("detailLegend")
|
||||
}
|
||||
);
|
||||
if (figure === "pageFaults") {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<% if (!hideFooter) { %>
|
||||
<div class="modal-footer">
|
||||
<%
|
||||
_.each(buttons, function(value, key){
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
<button id="modalButton<%=key%>" class="button-<%=type%>" <%=disabled%>><%=title%></button>
|
||||
<%});%>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="alert alert-error modal-delete-confirmation" id="modal-delete-confirmation">
|
||||
<strong>Really delete?</strong>
|
||||
<button id="modal-confirm-delete" class="button-danger pull-right modal-confirm-delete">Yes</button>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<script id="modalGraph.ejs" type="text/template">
|
||||
<div id="lineChartDetail" class="modalChartDetail"></div>
|
||||
<div id="lineChartDetail" class="modalChartDetail"></div>
|
||||
<div class="dashboard-detailLegend">
|
||||
<div class="dashboard-legend-inner" id="detailLegend"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<% } %>
|
||||
<% var smallChart = function(name) { %>
|
||||
<div class="dashboard-small-chart dashboard-chart" id="<%= name %>Container">
|
||||
<div id="<%= name %>" class="dashboard-interior-chart">
|
||||
<div id="<%= name %>" class="dashboard-interior-chart">
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div class="dashboard-legend">
|
||||
|
|
@ -24,10 +24,14 @@
|
|||
<div class="dashboard-subtitle-bar">current</div>
|
||||
<div class="dashboard-subtitle-bar">15-min-avg</div>
|
||||
<div class="dashboard-tendency">
|
||||
<div class="dashboard-figure">
|
||||
<span id="<%= name %>Current"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-tendency">
|
||||
<div class="dashboard-figure">
|
||||
<span id="<%= name %>Average"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
|
@ -61,12 +65,12 @@
|
|||
<div class="dashboard-tendency-chart dashboard-half-height-chart">
|
||||
<% tendency("Number of threads", "numberOfThreads"); %>
|
||||
</div>
|
||||
<div class="dashboard-tendency-chart dashboard-half-height-chart">
|
||||
<div class="dashboard-tendency-chart dashboard-half-height-chart dashboard-chart" id="residentSizeChartContainer">
|
||||
<div class="dashboard-title-bar">Resident Size</div>
|
||||
<div id="residentSizeChart">
|
||||
<svg>
|
||||
</svg>
|
||||
<div class="residentSize">
|
||||
<div class="dashboard-figure residentSize">
|
||||
<span id="residentSizeTotal"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,13 +84,13 @@
|
|||
<div class="dashboard-half-title-bar">Major Page Faults</div>
|
||||
<div class="dashboard-half-title-bar">System User Time in seconds</div>
|
||||
</div>
|
||||
<div class="dashboard-medium-chart dashboard-chart" id="<%= name %>Container">
|
||||
<div class="dashboard-medium-chart dashboard-chart" id="pageFaultsChartContainer">
|
||||
<div id="pageFaultsChart" class="dashboard-interior-chart"></div>
|
||||
<div class="dashboard-legend">
|
||||
<div class="dashboard-legend-inner" id="pageFaultsChartLegend"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-medium-chart dashboard-chart" id="<%= name %>Container">
|
||||
<div class="dashboard-medium-chart dashboard-chart" id="systemUserTimeChartContainer">
|
||||
<div id="systemUserTimeChart" class="dashboard-interior-chart"></div>
|
||||
<div class="dashboard-legend">
|
||||
<div class="dashboard-legend-inner" id="systemUserTimeChartLegend"></div>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
tableTemplate: templateEngine.createTemplate("modalTable.ejs"),
|
||||
el: "#modalPlaceholder",
|
||||
contentEl: "#modalContent",
|
||||
hideFooter: false,
|
||||
confirm: {
|
||||
list: "#modal-delete-confirmation",
|
||||
yes: "#modal-confirm-delete",
|
||||
|
|
@ -168,7 +169,8 @@
|
|||
};
|
||||
},
|
||||
|
||||
show: function(templateName, title, buttons, tableContent, advancedContent) {
|
||||
show: function(templateName, title, buttons, tableContent, advancedContent,
|
||||
events) {
|
||||
var self = this, lastBtn, closeButtonFound = false;
|
||||
buttons = buttons || [];
|
||||
// Insert close as second from right
|
||||
|
|
@ -188,7 +190,8 @@
|
|||
}
|
||||
$(this.el).html(this.baseTemplate.render({
|
||||
title: title,
|
||||
buttons: buttons
|
||||
buttons: buttons,
|
||||
hideFooter: this.hideFooter
|
||||
}));
|
||||
_.each(buttons, function(b, i) {
|
||||
if (b.disabled || !b.callback) {
|
||||
|
|
@ -231,6 +234,9 @@
|
|||
});
|
||||
}
|
||||
});//handle select2
|
||||
if (events) {
|
||||
this.delegateEvents(events);
|
||||
}
|
||||
|
||||
$("#modal-dialog").modal("show");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
window.newDashboardView = Backbone.View.extend({
|
||||
el: '#content',
|
||||
interval: 15000, // in milliseconds
|
||||
interval: 10000, // in milliseconds
|
||||
defaultFrame: 20 * 60 * 1000,
|
||||
defaultDetailFrame: 14 * 24 * 60 * 60 * 1000,
|
||||
history: {},
|
||||
|
|
@ -44,50 +44,65 @@
|
|||
"queueTimeDistributionPercent", "requestTimeDistributionPercent"
|
||||
],
|
||||
dataTransferDistribution: [
|
||||
"bytesReceivedDistributionPercent", "bytesSentDistributionPercent"]
|
||||
"bytesSentDistributionPercent", "bytesReceivedDistributionPercent"]
|
||||
},
|
||||
|
||||
|
||||
barChartsElementNames: {
|
||||
queueTimeDistributionPercent: "Queue Time",
|
||||
requestTimeDistributionPercent: "Request Time",
|
||||
bytesReceivedDistributionPercent: "Bytes received",
|
||||
bytesSentDistributionPercent: "Bytes sent"
|
||||
bytesSentDistributionPercent: "Bytes sent",
|
||||
bytesReceivedDistributionPercent: "Bytes received"
|
||||
|
||||
},
|
||||
|
||||
showDetail: function (e) {
|
||||
var self = this;
|
||||
console.log(e);
|
||||
|
||||
getDetailFigure : function (e) {
|
||||
var figure = $(e.currentTarget).attr("id").replace(/ChartContainer/g, "");
|
||||
figure = figure.replace(/DistributionContainer/g, "");
|
||||
figure = figure.replace(/Container/g, "");
|
||||
console.log(figure);
|
||||
this.getStatistics(figure);
|
||||
var options = this.dygraphConfig.getDetailChartConfig(figure);
|
||||
if (figure === "asyncRequests") {
|
||||
figure = "requestsAsync";
|
||||
} else if (figure === "clientConnections") {
|
||||
figure = "httpConnections";
|
||||
}
|
||||
return figure;
|
||||
},
|
||||
|
||||
showDetail: function (e) {
|
||||
var self = this,
|
||||
figure = this.getDetailFigure(e), options;
|
||||
this.getStatistics(figure);
|
||||
this.detailGraphFigure = figure;
|
||||
options = this.dygraphConfig.getDetailChartConfig(figure);
|
||||
window.modalView.hideFooter = true;
|
||||
window.modalView.show(
|
||||
"modalGraph.ejs",
|
||||
options.header,
|
||||
[window.modalView.createCloseButton(
|
||||
this.hidden.bind(this)
|
||||
)
|
||||
]
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
this.events
|
||||
|
||||
);
|
||||
|
||||
options = this.dygraphConfig.getDetailChartConfig(figure);
|
||||
window.modalView.hideFooter = false;
|
||||
|
||||
$('#modal-dialog').on('hidden', function () {
|
||||
self.hidden();
|
||||
});
|
||||
$('.modal-body').css({"max-height": "90%" });
|
||||
$('#modal-dialog').toggleClass("modalChartDetail", true);
|
||||
$('#modal-body').toggleClass("modal-body", true);
|
||||
|
||||
var dimensions = self.getCurrentSize("#lineChartDetail");
|
||||
options.height = dimensions.height;
|
||||
options.width = dimensions.width;
|
||||
|
||||
self.detailGraph = new Dygraph(
|
||||
options.height = dimensions.height * 0.85;
|
||||
options.width = dimensions.width * 0.88;
|
||||
this.detailGraph = new Dygraph(
|
||||
document.getElementById("lineChartDetail"),
|
||||
self.history[figure],
|
||||
this.history[figure],
|
||||
options
|
||||
);
|
||||
|
||||
},
|
||||
|
||||
hidden: function () {
|
||||
|
|
@ -137,7 +152,7 @@
|
|||
this.prepareResidentSize();
|
||||
this.updateTendencies();
|
||||
Object.keys(this.graphs).forEach(function (f) {
|
||||
self.updateLineChart(f);
|
||||
self.updateLineChart(f, false);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -153,26 +168,24 @@
|
|||
updateDateWindow: function (graph, isDetailChart) {
|
||||
var t = new Date().getTime();
|
||||
var borderLeft, borderRight;
|
||||
/* if (isDetailChart) {
|
||||
} else {
|
||||
}
|
||||
*/
|
||||
return [new Date().getTime() - this.defaultFrame, new Date().getTime()];
|
||||
if (isDetailChart && graph.dateWindow_) {
|
||||
borderLeft = graph.dateWindow_[0];
|
||||
borderRight = t - graph.dateWindow_[1] - this.interval * 5 > 0 ?
|
||||
graph.dateWindow_[1] : t;
|
||||
return [borderLeft, borderRight];
|
||||
}
|
||||
return [t - this.defaultFrame, t];
|
||||
|
||||
|
||||
},
|
||||
|
||||
updateLineChart: function (figure, isDetailChart) {
|
||||
|
||||
var opts = {
|
||||
var g = isDetailChart ? this.detailGraph : this.graphs[figure],
|
||||
opts = {
|
||||
file: this.history[figure],
|
||||
dateWindow: this.updateDateWindow(isDetailChart)
|
||||
dateWindow: this.updateDateWindow(g, isDetailChart)
|
||||
};
|
||||
if (isDetailChart) {
|
||||
this.detailGraph.updateOptions(opts);
|
||||
} else {
|
||||
this.graphs[figure].updateOptions(opts);
|
||||
}
|
||||
g.updateOptions(opts);
|
||||
},
|
||||
|
||||
mergeDygraphHistory: function (newData, i) {
|
||||
|
|
@ -305,7 +318,6 @@
|
|||
{async: false}
|
||||
).done(
|
||||
function (d) {
|
||||
console.log("got result", d);
|
||||
self.mergeHistory(d, !!figure);
|
||||
}
|
||||
);
|
||||
|
|
@ -313,19 +325,26 @@
|
|||
},
|
||||
|
||||
prepareResidentSize: function () {
|
||||
var dimensions = this.getCurrentSize('#residentSizeChart'),
|
||||
var dimensions = this.getCurrentSize('#residentSizeChartContainer'),
|
||||
self = this;
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.multiBarHorizontalChart()
|
||||
.width(dimensions.width * 0.3)
|
||||
.height(dimensions.height)
|
||||
/*.width(dimensions.width * 0.3)
|
||||
.height(dimensions.height)*/
|
||||
.x(function (d) {
|
||||
return d.label;
|
||||
})
|
||||
.y(function (d) {
|
||||
return d.value;
|
||||
})
|
||||
.margin({left: 80})
|
||||
.width(dimensions.width)
|
||||
.height(dimensions.height)
|
||||
.margin({
|
||||
//top: dimensions.height / 8,
|
||||
right: dimensions.width / 10
|
||||
//bottom: dimensions.height / 22,
|
||||
//left: dimensions.width / 6*/
|
||||
})
|
||||
.showValues(true)
|
||||
.showYAxis(true)
|
||||
.showXAxis(false)
|
||||
|
|
@ -335,18 +354,13 @@
|
|||
.stacked(true)
|
||||
.showControls(false);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(function (d) {return d + "%";});
|
||||
chart.xAxis.showMaxMin(false);
|
||||
chart.yAxis.showMaxMin(false);
|
||||
d3.select('#residentSizeChart svg')
|
||||
.datum(self.history.residentSizeChart)
|
||||
.call(chart)
|
||||
.append("text")
|
||||
.attr("x", 20)
|
||||
.attr("y", 16)
|
||||
.style("font-size", "20px")
|
||||
.style("font-weight", 400)
|
||||
.style("font-family", "Open Sans");
|
||||
|
||||
.call(chart);
|
||||
nv.utils.windowResize(chart.update);
|
||||
});
|
||||
$("#residentSizeTotal").text(
|
||||
|
|
@ -356,17 +370,16 @@
|
|||
|
||||
|
||||
prepareD3Charts: function () {
|
||||
//distribution bar charts
|
||||
var v, self = this, barCharts = {
|
||||
totalTimeDistribution: [
|
||||
"queueTimeDistributionPercent", "requestTimeDistributionPercent"],
|
||||
dataTransferDistribution: [
|
||||
"bytesReceivedDistributionPercent", "bytesSentDistributionPercent"]
|
||||
"bytesSentDistributionPercent", "bytesReceivedDistributionPercent"]
|
||||
};
|
||||
|
||||
_.each(Object.keys(barCharts), function (k) {
|
||||
var dimensions = self.getCurrentSize('#' + k + 'Container svg');
|
||||
nv.addGraph(function () {
|
||||
console.log('#' + k + ' svg');
|
||||
var chart = nv.models.multiBarHorizontalChart()
|
||||
.x(function (d) {
|
||||
return d.label;
|
||||
|
|
@ -374,8 +387,14 @@
|
|||
.y(function (d) {
|
||||
return d.value;
|
||||
})
|
||||
//.margin({top: 30, right: 20, bottom: 50, left: 175})
|
||||
.margin({left: 80})
|
||||
.width(dimensions.width)
|
||||
.height(dimensions.height)
|
||||
.margin({
|
||||
top: dimensions.height / 8,
|
||||
right: dimensions.width / 35,
|
||||
bottom: dimensions.height / 22,
|
||||
left: dimensions.width / 6
|
||||
})
|
||||
.showValues(false)
|
||||
.showYAxis(true)
|
||||
.showXAxis(true)
|
||||
|
|
@ -384,27 +403,25 @@
|
|||
.showLegend(false)
|
||||
.showControls(false);
|
||||
|
||||
/*chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));*/
|
||||
/**/
|
||||
/**/
|
||||
chart.xAxis.showMaxMin(false);
|
||||
chart.yAxis.showMaxMin(false);
|
||||
/*chart.xAxis
|
||||
.tickFormat(d3.format(',.2f'));*/
|
||||
chart.yAxis
|
||||
.tickFormat(function (d) {return Math.round(d* 100 * 100) / 100 + "%";});
|
||||
|
||||
|
||||
d3.select('#' + k + 'Container svg')
|
||||
.datum(self.history[k])
|
||||
.call(chart)
|
||||
.append("text")
|
||||
.attr("x", 20)
|
||||
.attr("y", 16)
|
||||
.style("font-size", "20px")
|
||||
.style("font-weight", 400)
|
||||
.style("font-family", "Open Sans")
|
||||
.text("Distribution");
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
if ($('#' + k + "Legend")[0].children.length === 0) {
|
||||
d3.select('#' + k + 'Container svg')
|
||||
.append("text")
|
||||
.attr("x", dimensions.width * 0.6)
|
||||
.attr("y", dimensions.height / 12)
|
||||
.style("font-size", dimensions.height / 12 + "px")
|
||||
.style("font-weight", 400)
|
||||
.classed("distributionHeader", true)
|
||||
.style("font-family", "Open Sans")
|
||||
.text("Distribution");
|
||||
var v1 = self.history[k][0].key;
|
||||
var v2 = self.history[k][1].key;
|
||||
$('#' + k + "Legend").append(
|
||||
|
|
@ -430,6 +447,7 @@
|
|||
},
|
||||
|
||||
stopUpdating: function () {
|
||||
console.log("stoping any update");
|
||||
this.isUpdating = false;
|
||||
},
|
||||
|
||||
|
|
@ -441,6 +459,11 @@
|
|||
self.isUpdating = true;
|
||||
self.timer = window.setInterval(function () {
|
||||
self.getStatistics();
|
||||
if (self.isUpdating === false) {
|
||||
console.log("no chart rendering");
|
||||
return;
|
||||
}
|
||||
console.log("chart rendering");
|
||||
self.updateCharts();
|
||||
},
|
||||
self.interval
|
||||
|
|
@ -455,6 +478,7 @@
|
|||
dimensions = self.getCurrentSize(g.maindiv_.id);
|
||||
g.resize(dimensions.width, dimensions.height);
|
||||
});
|
||||
this.prepareD3Charts();
|
||||
},
|
||||
|
||||
template: templateEngine.createTemplate("newDashboardView.ejs"),
|
||||
|
|
|
|||
|
|
@ -116,9 +116,10 @@
|
|||
}
|
||||
|
||||
.modalChartDetail {
|
||||
height: 570px;
|
||||
margin-left: 0;
|
||||
width: 70%;
|
||||
height: 500px;
|
||||
position: fixed;
|
||||
padding-left: 10px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ $dashboard-padding: 28px;
|
|||
@extend %pull-left;
|
||||
border-left: 1px solid $c-black;
|
||||
margin-left: -1px;
|
||||
cursor:pointer;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
|
|
@ -12,6 +13,9 @@ $dashboard-padding: 28px;
|
|||
}
|
||||
}
|
||||
|
||||
.detailChart {
|
||||
@extend %pull-left;
|
||||
}
|
||||
.dashboard-interior-chart {
|
||||
@extend %pull-left;
|
||||
height: $dashboard-height - $dashboard-padding;
|
||||
|
|
@ -51,9 +55,25 @@ $dashboard-padding: 28px;
|
|||
|
||||
.dashboard-legend-inner {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-detailLegend {
|
||||
@extend %pull-left;
|
||||
height: $dashboard-height;
|
||||
width: $legend-width;
|
||||
position: fixed;
|
||||
left: 90%;
|
||||
top: 40%;
|
||||
|
||||
.dashboard-legend-inner {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-half-height-legend {
|
||||
@extend %pull-left;
|
||||
height: $dashboard-height / 2;
|
||||
|
|
@ -120,9 +140,8 @@ $dashboard-padding: 28px;
|
|||
@extend %dashboard-chart-box;
|
||||
font-size: 25px;
|
||||
height: ($dashboard-height + $dashboard-padding) / 2 - 36px - 36px - 2px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 15%;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -133,3 +152,11 @@ $dashboard-padding: 28px;
|
|||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.dashboard-figure {
|
||||
@extend %pull-left;
|
||||
margin-bottom: 10%;
|
||||
margin-top: 7%;
|
||||
margin-left: 19%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1369,7 +1369,7 @@ textarea,
|
|||
.fa-plus-square-o:before {
|
||||
content: "\f196"; }
|
||||
|
||||
ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboard-interior-chart, .dashboard-legend, .dashboard-half-height-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboardModal, .pagination-line li a {
|
||||
ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency, .detailChart, .dashboard-interior-chart, .dashboard-legend, .dashboard-detailLegend, .dashboard-half-height-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboard-figure, .dashboardModal, .pagination-line li a {
|
||||
float: left; }
|
||||
|
||||
div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol {
|
||||
|
|
@ -2733,9 +2733,10 @@ div.breadcrumb a.disabledBread {
|
|||
opacity: .4; }
|
||||
|
||||
.modalChartDetail {
|
||||
height: 570px;
|
||||
margin-left: 0;
|
||||
width: 70%; }
|
||||
height: 500px;
|
||||
position: fixed;
|
||||
padding-left: 10px;
|
||||
width: 90%; }
|
||||
|
||||
.modal {
|
||||
border-radius: 0 !important; }
|
||||
|
|
@ -3006,7 +3007,8 @@ pre.gv-object-view {
|
|||
|
||||
.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency {
|
||||
border-left: 1px solid black;
|
||||
margin-left: -1px; }
|
||||
margin-left: -1px;
|
||||
cursor: pointer; }
|
||||
.dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-tendency-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child {
|
||||
border-left: 0;
|
||||
margin-left: 0; }
|
||||
|
|
@ -3033,7 +3035,18 @@ pre.gv-object-view {
|
|||
height: 250px;
|
||||
width: 200px; }
|
||||
.dashboard-legend .dashboard-legend-inner {
|
||||
padding-top: 20px; }
|
||||
padding-top: 20px;
|
||||
padding-left: 20px; }
|
||||
|
||||
.dashboard-detailLegend {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
position: fixed;
|
||||
left: 90%;
|
||||
top: 40%; }
|
||||
.dashboard-detailLegend .dashboard-legend-inner {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px; }
|
||||
|
||||
.dashboard-half-height-legend {
|
||||
height: 125px;
|
||||
|
|
@ -3080,12 +3093,11 @@ pre.gv-object-view {
|
|||
width: 50%; }
|
||||
|
||||
.dashboard-tendency {
|
||||
height: 65px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
top: 15%; }
|
||||
height: 65px;
|
||||
top: 15%;
|
||||
text-align: center;
|
||||
width: 50%; }
|
||||
|
||||
.dashboard-row {
|
||||
border: 1px solid black;
|
||||
|
|
@ -3093,6 +3105,12 @@ pre.gv-object-view {
|
|||
margin-left: -1px;
|
||||
margin-right: -1px; }
|
||||
|
||||
.dashboard-figure {
|
||||
margin-bottom: 10%;
|
||||
margin-top: 7%;
|
||||
margin-left: 19%;
|
||||
text-align: center; }
|
||||
|
||||
.dashboardModal {
|
||||
-moz-border-radius: 8px !important;
|
||||
-webkit-border-radius: 8px !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue