Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New progressbar gadget #80

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

New progressbar gadget #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32cb533
New progressbar graphene widget
Sep 18, 2014
b9ff2d9
ProgressBar documentation
Sep 18, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ and plug the Graphite data source. Don't worry - more about it
after this.


As of now, you can place 3 types of data-enabled widgets on your
dashboard: `TimeSeries`, `GaugeLabel`, and a `GaugeGadget`
As of now, you can place 4 types of data-enabled widgets on your
dashboard: `TimeSeries`, `GaugeLabel`, `ProgressBarGadget` and a `GaugeGadget`
You can have as many of these as you want, and you can also hook up
several widgets to the same data source.

Expand Down Expand Up @@ -199,6 +199,14 @@ description.
* `to` - end value of the gauge


### ProgressBarGadget

* `unit` - unit to display, example "km", or "req/s"
* `title` - progressbar title
* `type` - same as GaugeLabel
* `value_format` - value format
* `to` - end value of the progressbar

### TimeSeries

* `line_height` - visuals, default 16
Expand Down
70 changes: 70 additions & 0 deletions app/js/graphene.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,76 @@ class Graphene.TimeSeries extends Graphene.GraphiteModel



class Graphene.ProgressBarGadgetView extends Backbone.View
className: 'progressbar-gadget-view'
tagName: 'div'
initialize: ()->
@unit = @options.unit
@title = @options.title
@type = @options.type
@parent = @options.parent || '#parent'
@value_format = @options.value_format || ".3s"
@value_format = d3.format(@value_format)
@null_value = 0
@observer = @options.observer
@to = @options.to || 1
@multiplier = 100/@to

@vis = d3.select(@parent).append("div")
.attr("class", "pbview")
@area = @vis.append("div")
.attr("class", "progress").append("div")
.attr("class", "bar")
.attr("style", "width: 50%")
if @title
@area.append("div")
.attr("class", "label")
.text(@title)

@model.bind('change', @render)
console.log("PB view ")


by_type:(d)=>
switch @type
when "min" then d.ymin
when "max" then d.ymax
when "current" then d.last
else d.points[0][0] * @multiplier

render: ()=>
data = @model.get('data')
console.log data
datum = if data && data.length > 0 then data[0] else { ymax: @null_value, ymin: @null_value, points: [[@null_value, 0]] }

# let observer know about this
@observer(@by_type(datum)) if @observer

area = @area
metric_items = area.selectAll('div.metric')
.data([datum], (d)=> @by_type(d))

metric_items.exit().remove()

metric = metric_items.enter()
.insert('div', ":first-child")
.attr('class',"metric#{if @type then ' '+@type else ''}")

@area.attr("style", "width: "+@by_type(datum)+"%")

metric.text(@title)
metric.append('span')
.attr('class', 'value')
.text((d)=>" "+@value_format(@by_type(d)))
if @unit
metric.append('span')
.attr('class', 'unit')
.text(@unit)





class Graphene.GaugeGadgetView extends Backbone.View
className: 'gauge-gadget-view'
tagName: 'div'
Expand Down
4 changes: 2 additions & 2 deletions build/index.js
View file
Open in desktop

Large diffs are not rendered by default.

82 changes: 48 additions & 34 deletions example/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,20 @@
.span4{
text-align:center;
}

.progress {
margin: 0 auto;
width: 108px;
background-image: -webkit-linear-gradient(top, #F90, #F90);
}

.progress .bar{
text-align: left;
padding-left: 5px;
background-color: #dd0000;
background-image: -webkit-gradient(linear, 0 0,0 100%, from(#dd0000), to(#dd0000));
}

</style>
</head>
<body>
Expand All @@ -54,40 +68,40 @@
<div id="hero-one" class="span4">
</div>
<div id="hero-two" class="span4">
<svg id="graphite" title="graphite" width="347.409px" height="115.278px" viewBox="0 0 347.409 115.278" enable-background="new 0 0 347.409 115.278"
xml:space="preserve">
<g>
<polygon fill="none" stroke-miterlimit="10" points="2.448,58.482 12.782,40.279 35.115,40.279
44.782,58.482 34.782,77.696 12.782,77.696 "/>
<polyline fill="none" stroke-miterlimit="10" points="34.782,77.696 44.782,96.238
34.782,114.777 12.448,114.777 "/>
</g>
<polyline fill="none" stroke-miterlimit="10" points="84.157,40.445 61.823,40.445
51.157,58.945 62.157,77.445 "/>
<polyline fill="none" stroke-miterlimit="10" points="94.698,77.611 84.032,58.612
94.698,40.279 116.032,40.279 126.365,58.945 116.365,77.611 "/>
<g>
<polygon fill="none" stroke-miterlimit="10" points="142.989,77.945 132.989,58.945
142.989,39.945 165.598,39.945 175.655,58.945 165.598,77.945 "/>
<polyline fill="none" stroke-miterlimit="10" points="142.989,77.945 132.989,96.445
142.989,114.945 "/>
</g>
<polyline fill="none" stroke-miterlimit="10" points="193.655,2.778 182.655,21.443
193.655,40.448 182.655,58.434 193.655,77.777 "/>
<polyline fill="none" stroke-miterlimit="10" points="193.655,40.448 215.655,40.448
225.322,58.773 215.655,77.777 "/>
<g>
<polyline fill="none" stroke-miterlimit="10" points="243.095,115.111 232.095,96.777
243.095,78.445 232.095,59.111 243.095,41.445 "/>
<line fill="none" stroke-miterlimit="10" x1="243.095" y1="78.445" x2="265.235" y2="78.445"/>
</g>
<polyline fill="none" stroke-miterlimit="10" points="276.08,77.611 265.414,58.612
276.08,40.279 297.414,40.279 307.746,58.945 297.746,77.611 "/>
<line fill="none" stroke-miterlimit="10" x1="265.414" y1="21.276" x2="276.414" y2="39.944"/>
<g>
<polyline fill="none" stroke-miterlimit="10" points="325.269,115.278 314.269,96.944
325.269,78.612 314.269,59.278 325.269,41.613 "/>
<line fill="none" stroke-miterlimit="10" x1="325.269" y1="78.612" x2="347.409" y2="78.612"/>
<svg id="graphite" title="graphite" width="347.409px" height="115.278px" viewBox="0 0 347.409 115.278" enable-background="new 0 0 347.409 115.278"
xml:space="preserve">
<g>
<polygon fill="none" stroke-miterlimit="10" points="2.448,58.482 12.782,40.279 35.115,40.279
44.782,58.482 34.782,77.696 12.782,77.696 "/>
<polyline fill="none" stroke-miterlimit="10" points="34.782,77.696 44.782,96.238
34.782,114.777 12.448,114.777 "/>
</g>
<polyline fill="none" stroke-miterlimit="10" points="84.157,40.445 61.823,40.445
51.157,58.945 62.157,77.445 "/>
<polyline fill="none" stroke-miterlimit="10" points="94.698,77.611 84.032,58.612
94.698,40.279 116.032,40.279 126.365,58.945 116.365,77.611 "/>
<g>
<polygon fill="none" stroke-miterlimit="10" points="142.989,77.945 132.989,58.945
142.989,39.945 165.598,39.945 175.655,58.945 165.598,77.945 "/>
<polyline fill="none" stroke-miterlimit="10" points="142.989,77.945 132.989,96.445
142.989,114.945 "/>
</g>
<polyline fill="none" stroke-miterlimit="10" points="193.655,2.778 182.655,21.443
193.655,40.448 182.655,58.434 193.655,77.777 "/>
<polyline fill="none" stroke-miterlimit="10" points="193.655,40.448 215.655,40.448
225.322,58.773 215.655,77.777 "/>
<g>
<polyline fill="none" stroke-miterlimit="10" points="243.095,115.111 232.095,96.777
243.095,78.445 232.095,59.111 243.095,41.445 "/>
<line fill="none" stroke-miterlimit="10" x1="243.095" y1="78.445" x2="265.235" y2="78.445"/>
</g>
<polyline fill="none" stroke-miterlimit="10" points="276.08,77.611 265.414,58.612
276.08,40.279 297.414,40.279 307.746,58.945 297.746,77.611 "/>
<line fill="none" stroke-miterlimit="10" x1="265.414" y1="21.276" x2="276.414" y2="39.944"/>
<g>
<polyline fill="none" stroke-miterlimit="10" points="325.269,115.278 314.269,96.944
325.269,78.612 314.269,59.278 325.269,41.613 "/>
<line fill="none" stroke-miterlimit="10" x1="325.269" y1="78.612" x2="347.409" y2="78.612"/>
</g><br/><br/>
<h2>A <a href="">D3.js</a>, <a href="">Backbone.js</a> based <a
href="">Graphite</a> Dashboard Toolkit.</h2>
Expand Down
25 changes: 25 additions & 0 deletions example/example-dash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,18 @@
}
}
},
"CPU": {
source: "http://localhost:4567/",
ProgressBarGadget: {
parent: "#hero-one",
title: "CPU",
to: 1000,
unit: "%",
observer: function(data){
console.log("Progress observing " +data);
}
}
},


"Total Installs": {
Expand All @@ -38,6 +50,19 @@
title: "Cl1"
}
},
"CTR": {
source: "http://localhost:4567/",
ProgressBarGadget: {
parent: "#hero-three",
title: "CTR",
to: 1000,
unit: "%",
observer: function(data){
console.log("Progress observing " +data);
}
}
},

"New Message": {
source: "http://localhost:4567/",
TimeSeries: {
Expand Down