Permalink
Browse files

Some style and UI tweaks to new historical charting

  • Loading branch information...
1 parent 963b1a4 commit 1512a62db8e7fad68f4f519e087ff04b3174393e @kamens committed Sep 30, 2011
Showing with 56 additions and 305 deletions.
  1. +4 −5 plots.py
  2. BIN static/images/chart.png
  3. +0 −262 static/js/highcharts_gray_theme.js
  4. +8 −1 templates/base.html
  5. +28 −33 templates/dashboard.html
  6. +16 −4 templates/timeline.html
View
@@ -13,18 +13,17 @@ def __init__(self, name):
self.snapshots = []
class Timeline(RequestHandler):
-
- def post(self):
+ def get(self):
experiment_name = self.request.get("experiment_name")
if not experiment_name:
return
bingo_cache = BingoCache.get()
- experiment_model = bingo_cache.get_experiment(experiment_name)
+ experiment = bingo_cache.get_experiment(experiment_name)
- query = _GAEBingoSnapshotLog.all().ancestor(experiment_model)
+ query = _GAEBingoSnapshotLog.all().ancestor(experiment)
query.order('-time_recorded')
experiment_snapshots = query.fetch(1000)
@@ -57,7 +56,7 @@ def get_alternative_content_str(alt_num):
path = os.path.join(os.path.dirname(__file__), "templates/timeline.html")
self.response.out.write(
template.render(path, {
- "experiment_name": experiment_name,
+ "experiment": experiment,
"experiment_data": experiment_data,
})
)
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,262 +0,0 @@
-
-/**
- * Gray theme for Highcharts JS
- * @author Torstein Hønsi
- */
-
-Highcharts.theme = {
- colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
- "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
- chart: {
- backgroundColor: {
- linearGradient: [0, 0, 0, 400],
- stops: [
- [0, 'rgb(96, 96, 96)'],
- [1, 'rgb(16, 16, 16)']
- ]
- },
- borderWidth: 0,
- borderRadius: 15,
- plotBackgroundColor: null,
- plotShadow: false,
- plotBorderWidth: 0
- },
- title: {
- style: {
- color: '#FFF',
- font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
- }
- },
- subtitle: {
- style: {
- color: '#DDD',
- font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
- }
- },
- xAxis: {
- gridLineWidth: 0,
- lineColor: '#999',
- tickColor: '#999',
- labels: {
- style: {
- color: '#999',
- fontWeight: 'bold'
- }
- },
- title: {
- style: {
- color: '#AAA',
- font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
- }
- }
- },
- yAxis: {
- alternateGridColor: null,
- minorTickInterval: null,
- gridLineColor: 'rgba(255, 255, 255, .1)',
- lineWidth: 0,
- tickWidth: 0,
- labels: {
- style: {
- color: '#999',
- fontWeight: 'bold'
- }
- },
- title: {
- style: {
- color: '#AAA',
- font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
- }
- }
- },
- legend: {
- itemStyle: {
- color: '#CCC'
- },
- itemHoverStyle: {
- color: '#FFF'
- },
- itemHiddenStyle: {
- color: '#333'
- }
- },
- labels: {
- style: {
- color: '#CCC'
- }
- },
- tooltip: {
- backgroundColor: {
- linearGradient: [0, 0, 0, 50],
- stops: [
- [0, 'rgba(96, 96, 96, .8)'],
- [1, 'rgba(16, 16, 16, .8)']
- ]
- },
- borderWidth: 0,
- style: {
- color: '#FFF'
- }
- },
-
-
- plotOptions: {
- line: {
- dataLabels: {
- color: '#CCC'
- },
- marker: {
- lineColor: '#333'
- }
- },
- spline: {
- marker: {
- lineColor: '#333'
- }
- },
- scatter: {
- marker: {
- lineColor: '#333'
- }
- },
- candlestick: {
- lineColor: 'white'
- }
- },
-
- toolbar: {
- itemStyle: {
- color: '#CCC'
- }
- },
-
- navigation: {
- buttonOptions: {
- backgroundColor: {
- linearGradient: [0, 0, 0, 20],
- stops: [
- [0.4, '#606060'],
- [0.6, '#333333']
- ]
- },
- borderColor: '#000000',
- symbolStroke: '#C0C0C0',
- hoverSymbolStroke: '#FFFFFF'
- }
- },
-
- exporting: {
- buttons: {
- exportButton: {
- symbolFill: '#55BE3B'
- },
- printButton: {
- symbolFill: '#7797BE'
- }
- }
- },
-
- // scroll charts
- rangeSelector: {
- buttonTheme: {
- fill: {
- linearGradient: [0, 0, 0, 20],
- stops: [
- [0.4, '#888'],
- [0.6, '#555']
- ]
- },
- stroke: '#000000',
- style: {
- color: '#CCC',
- fontWeight: 'bold'
- },
- states: {
- hover: {
- fill: {
- linearGradient: [0, 0, 0, 20],
- stops: [
- [0.4, '#BBB'],
- [0.6, '#888']
- ]
- },
- stroke: '#000000',
- style: {
- color: 'white'
- }
- },
- select: {
- fill: {
- linearGradient: [0, 0, 0, 20],
- stops: [
- [0.1, '#000'],
- [0.3, '#333']
- ]
- },
- stroke: '#000000',
- style: {
- color: 'yellow'
- }
- }
- }
- },
- inputStyle: {
- backgroundColor: '#333',
- color: 'silver'
- },
- labelStyle: {
- color: 'silver'
- }
- },
-
- navigator: {
- handles: {
- backgroundColor: '#666',
- borderColor: '#AAA'
- },
- outlineColor: '#CCC',
- maskFill: 'rgba(16, 16, 16, 0.5)',
- series: {
- color: '#7798BF',
- lineColor: '#A6C7ED'
- }
- },
-
- scrollbar: {
- barBackgroundColor: {
- linearGradient: [0, 0, 0, 20],
- stops: [
- [0.4, '#888'],
- [0.6, '#555']
- ]
- },
- barBorderColor: '#CCC',
- buttonArrowColor: '#CCC',
- buttonBackgroundColor: {
- linearGradient: [0, 0, 0, 20],
- stops: [
- [0.4, '#888'],
- [0.6, '#555']
- ]
- },
- buttonBorderColor: '#CCC',
- rifleColor: '#FFF',
- trackBackgroundColor: {
- linearGradient: [0, 0, 0, 10],
- stops: [
- [0, '#000'],
- [1, '#333']
- ]
- },
- trackBorderColor: '#666'
- },
-
- // special colors for some of the demo examples
- legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
- legendBackgroundColorSolid: 'rgb(70, 70, 70)',
- dataLabelsColor: '#444',
- textColor: '#E0E0E0',
- maskColor: 'rgba(255,255,255,0.3)'
-};
-
-
View
@@ -4,7 +4,7 @@
<link rel="stylesheet" href="/gae_bingo/static/css/base.css" type="text/css" media="screen" />
<link rel="stylesheet" id="current-theme" href="/gae_bingo/static/css/style.css" type="text/css" media="screen" />
- <title>{% block title %}GAE/Bingo{% endblock %}</title>
+ <title>GAE/Bingo Experiments</title>
<style>
body {
@@ -37,6 +37,13 @@
display: inline;
margin-right: 0;
}
+
+ #main .plot-link-container {
+ float: right;
+ text-align: center;
+ position: relative;
+ top: 5px;
+ }
</style>
View
@@ -19,7 +19,7 @@
{% block body %}
<div id="main">
- <div id="header"><h1>GAE/Bingo Experiments</h1></div>
+ <div id="header"><h1><a href="/gae_bingo/dashboard">GAE/Bingo Experiments</a></h1></div>
{% if not experiment_results %}
<div class="experiment-container block">
@@ -30,39 +30,34 @@ <h3>No experiments yet.</h3>
{% for results in experiment_results %}
<div class="experiment-container block">
+ <div class="plot-link-container">
+ <nobr>
+ <a href="/gae_bingo/dashboard/plot_experiment?experiment_name={{ results.0.name|escape|urlencode }}"><img src="/gae_bingo/static/images/chart.png" /></a><br/>
+ <a href="/gae_bingo/dashboard/plot_experiment?experiment_name={{ results.0.name|escape|urlencode }}">View Plot</a>
+ </nobr>
+ </div>
+
+ <h2 class="experiment-title">{{ results.0.pretty_name|escape }}</h2>
+
+ {% if results.0.live %}
+ <p>
+ <strong>Status: </strong>
+ Running {{ results.0.dt_started|timesince }}
+ </p>
+ {% else %}
+ <form action="/gae_bingo/dashboard/control_experiment" method="POST">
+ <input type="hidden" name="experiment_name" value="{{ results.0.name|escape }}"/>
+ <p>
+ <strong>Status: </strong>
+ Ended manually.
+ You can <button type="submit" class="button delete-experiment" value="resume" name="action">resume this experiment</button> or,
+ if your testing code has been removed,
+ <button type="submit" class="button delete-experiment" value="delete" name="action">delete this experiment</button>
+ from the dashboard.
+ </p>
+ </form>
+ {% endif %}
-
- <table class="table"><tbody><tr>
- <td>
- <h2 class="experiment-title">{{ results.0.pretty_name|escape }}</h2>
-
- {% if results.0.live %}
- <p>
- <strong>Status: </strong>
- Running {{ results.0.dt_started|timesince }}
- </p>
- {% else %}
- <form action="/gae_bingo/dashboard/control_experiment" method="POST">
- <input type="hidden" name="experiment_name" value="{{ results.0.name|escape }}"/>
- <p>
- <strong>Status: </strong>
- Ended manually.
- You can <button type="submit" class="button delete-experiment" value="resume" name="action">resume this experiment</button> or,
- if your testing code has been removed,
- <button type="submit" class="button delete-experiment" value="delete" name="action">delete this experiment</button>
- from the dashboard.
- </p>
- </form>
- {% endif %}
- </td>
- <td align="right">
- <form action="/gae_bingo/dashboard/plot_experiment" method="POST">
- <input type="hidden" name="experiment_name" value="{{ results.0.name|escape }}"/>
- <button type="submit" class="button delete-experiment" name="action" value="choose_alternative">Plot this exepriment</button>
- </form>
- </td>
- </tr></tbody></table>
-
<table class="table">
<tbody>
<tr>
Oops, something went wrong.

0 comments on commit 1512a62

Please sign in to comment.