NuKVM/xen-orchestra
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

horizon : add label, center label vertically, add a checkbox to

Browse Source 
synchronize scales
This commit is contained in:
Florent BEAUCHAMP
2015-09-24 21:15:43 +02:00
parent ef5d2a7654
commit 2be1399eda
3 changed files with 70 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/dashboard/health/index.js
+14 -8
View File
@@ -262,6 +262,7 @@ export default angular.module('dashboard.health', [
let ctrl, stats
ctrl = this
ctrl.synchronizescale = true
ctrl.objects = xoApi.all
ctrl.chosen = []
this.prepareTypeFilter = function (selection) {
@@ -276,6 +277,7 @@ export default angular.module('dashboard.health', [
this.prepareMetrics = function (objects) {
ctrl.chosen = objects
ctrl.selectedMetric = null
ctrl.loadingMetrics = true
xoAggregate
.refreshStats(ctrl.chosen, 2)
@@ -298,17 +300,21 @@ export default angular.module('dashboard.health', [
ctrl.stats = {}
// compute a global extent => the chart will have the same scale
forEach(stats.details, function (stat, object_id) {
forEach(stat[ctrl.selectedMetric], function (val) {
if (!isNaN(val.value)) {
max = Math.max(val.value || 0, max)
}
if (ctrl.synchronizescale) {
forEach(stats.details, function (stat, object_id) {
forEach(stat[ctrl.selectedMetric], function (val) {
if (!isNaN(val.value)) {
max = Math.max(val.value || 0, max)
}
})
})
})
ctrl.extents = [min, max]
ctrl.extents = [min, max]
} else {
ctrl.extents = null
}
forEach(stats.details, function (stat, object_id) {
const label = find(ctrl.chosen, {id: object_id})
ctrl.stats[ctrl.selectedMetric + ' ' + label.name_label] = stat[ctrl.selectedMetric]
ctrl.stats[label.name_label] = stat[ctrl.selectedMetric]
})
}
})
app/modules/dashboard/health/view.jade
+18 -12
View File
@@ -9,7 +9,7 @@
.panel-heading.panel-title
i.fa.fa-fire
| Weekly Heatmap
.panel-body(ng-controller="HealthHeatmap as heatmap")
.panel-body(ng-controller='HealthHeatmap as heatmap')
| {{heatmap.toto}}
form
.grid-sm
@@ -24,7 +24,7 @@
div
i(class = 'xo-icon-{{ object.type | lowercase }}')
| {{ object.name_label }}
span(ng-if="(object.type === 'SR' || object.type === 'VM') && object.$container")
span(ng-if='(object.type === "SR" || object.type === "VM") && object.$container')
| ({{ (object.$container | resolve).name_label }})
//- br
.btn-group(role = 'group')
@@ -54,7 +54,7 @@
span(ng-if = '!object._ignored') {{ object.name_label }}
del(ng-if = 'object._ignored') {{ object.name_label }}
|   
weekheatmap(ng-if = 'heatmap.selectedMetric', chart-data="heatmap.selectedMetric")
weekheatmap(ng-if = 'heatmap.selectedMetric', chart-data='heatmap.selectedMetric')
.grid-sm
.grid-cell
.panel.panel-default
@@ -80,7 +80,7 @@
div
i(class = 'xo-icon-{{ object.type | lowercase }}')
| {{ object.name_label }}
span(ng-if="(object.type === 'SR' || object.type === 'VM') && object.$container")
span(ng-if='(object.type === "SR" || object.type === "VM") && object.$container')
| ({{ (object.$container | resolve).name_label }})
//- br
.btn-group(role = 'group')
@@ -102,6 +102,12 @@
ui-select(ng-model = 'cubism.selectedMetric',ng-change='cubism.prepareStat()')
ui-select-match(placeholder = 'Choose a metric') {{ $select.selected }}
ui-select-choices(repeat = 'metric in cubism.metrics | filter:$select.search | orderBy:["key"]') {{ metric }}
input#cb-syncrhonize-scale(
type='checkbox'
ng-model='cubism.synchronizescale'
ng-change='cubism.prepareStat()'
)
label(for="cb-syncrhonize-scale") synchronize scale
br
p.text-center(ng-if = 'cubism.chosen.length')
span(ng-repeat = 'object in cubism.chosen', ng-class = '{"text-danger": object._ignored}')
@@ -117,25 +123,26 @@
// step='1000*5'
// size='168'
// )
.grid-sm(ng-repeat="stat in cubism.stats" ng-if="!cubism.loadingMetrics")
div(style="flex:1")
span {{ cubism.chosen[$index].name_label }}
div(
ng-repeat='(label,stat) in cubism.stats'
ng-if='!cubism.loadingMetrics'
style='position:relative'
)
horizon(
ng-if='$first'
chart-data='stat'
show-axis='true'
axis-orientation='top'
selected='cubism.selected'
style="overflow:hidden;flex:11"
extent='cubism.extents'
label='{{label}}'
)
horizon(
ng-if='$middle'
chart-data='stat'
selected='cubism.selected'
style="overflow:hidden;flex:11"
extent='cubism.extents'
label='{{label}}'
)
horizon(
ng-if='$last && !$first'
@@ -143,7 +150,6 @@
show-axis='true'
axis-orientation='bottom'
selected='cubism.selected'
style="overflow:hidden;flex:11"
extent='cubism.extents'
label='{{label}}'
)
app/node_modules/xo-horizon/index.js
Generated Vendored
+38 -16
View File
@@ -146,21 +146,10 @@ export default angular.module('xoHorizon', [])
})
}
scope.$watch('selected', function (newVal) {
if (newVal) {
hoverDate(newVal)
}
})
scope.$watch(function () {
return scope.chartData
}, function (newVal) {
function redraw () {
let splittedData, counter, extent
if (!newVal || !newVal.length) {
return
}
data = newVal
extent = scope.extent || d3
.extent(newVal, function (d) {
.extent(data, function (d) {
return d.value
})
extent = [Math.min(0, extent[0]), Math.max(0, extent[1])]
@@ -169,13 +158,13 @@ export default angular.module('xoHorizon', [])
splittedData = []
for (counter = 0; counter < nbSteps; counter++) {
splittedData[counter] = []
var d = new Date(newVal[0].date)
var d = new Date(data[0].date)
splittedData[counter].push({
date: d,
value: 0
})
}
forEach(newVal, function (datum) {
forEach(data, function (datum) {
for (counter = 0; counter < nbSteps; counter++) {
let d, value
d = new Date(datum.date)
@@ -189,7 +178,7 @@ export default angular.module('xoHorizon', [])
})
for (counter = 0; counter < nbSteps; counter++) {
const d = new Date(newVal[newVal.length - 1].date)
const d = new Date(data[data.length - 1].date)
splittedData[counter].push({
date: d,
value: 0
@@ -214,6 +203,8 @@ export default angular.module('xoHorizon', [])
}
bottomaxis.selectAll('text').style({fill: 'black', stroke: 'transparent'})
}
svg.selectAll('.horizon-area').remove()
forEach(splittedData, function (oneSplitted) {
svg
.append('path')
@@ -228,8 +219,39 @@ export default angular.module('xoHorizon', [])
.attr('d', line)
})
const label = svg.append('text')
.style({
'font-size': '125%',
'font-weight': 'bold'
})
const bbox = label.node().getBBox()
label.attr('dx', 5)
.attr('dy', (height + margin.bottom - bbox.height) / 2)
.text(attrs.label)
svg.select('.overlay').moveToFront()
svg.select('.hover-container').moveToFront()
}
scope.$watch('selected', function (newVal) {
if (newVal) {
hoverDate(newVal)
}
})
scope.$watch(function () {
return scope.chartData
}, function (newVal) {
console.log(' change data')
if (!newVal || !newVal.length) {
return
}
data = newVal
redraw()
})
scope.$watch(function () {
return scope.extent
}, function (newVal) {
console.log(' change extent')
redraw()
})
}
}).name