Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Proper layout for day/hour selector charts

  • Loading branch information...
commit 082611fc6164f270ebf3777db1f10ebb11b95583 1 parent 6b89e5d
@assaf authored
Showing with 54 additions and 38 deletions.
  1. +29 −26 server/public/stylesheets/screen.css
  2. +25 −12 server/views/split/show.eco
View
55 server/public/stylesheets/screen.css
@@ -218,25 +218,27 @@ ol.activities + aside {
}
.split-test .meta {
color: #444;
+ text-align: center;
}
.split-test .alternative {
- width: 480px;
+ width: 460px;
float: left;
+ -webkit-box-shadow: 4px 4px 16px #ccc;
}
-.split-test .alternative:odd {
- margin-right: 8px;
+.split-test .alternative:nth-child(odd) {
+ margin-right: 20px;
}
-.split-test .alternative:even {
- margin-left: 8px;
+.split-test .alternative:nth-child(even) {
+ margin-left: 10px;
}
.split-test .alternative h2 {
text-align: center;
- font-size: 18pt;
+ font-size: 22pt;
}
.split-test .alternative big {
text-align: center;
display: block;
- font-size: 36pt;
+ font-size: 72pt;
}
.split-test .alternative small {
text-align: center;
@@ -250,8 +252,23 @@ ol.activities + aside {
content: " participants";
}
.split-test .alternative .chart {
- width: 420px;
- height: 200px;
+ float: left;
+ height: 140px;
+}
+.split-test .alternative .chart .title {
+}
+.split-test .alternative .chart.days {
+ width: 120px;
+ margin: 32px 0 32px 30px;
+}
+.split-test .alternative .chart.hours {
+ margin: 32px 30px 32px 20px;
+ width: 260px;
+}
+.split-test .alternative .chart:after {
+ content: " ";
+ display: block;
+ clear: both;
}
@@ -284,7 +301,9 @@ ol.activities + aside {
.reset {
padding-left: 1em;
font-size: smaller;
- color: #ccc;
+ color: blue;
+ float: right;
+ cursor: pointer;
}
.background.bar {
@@ -315,19 +334,3 @@ ol.activities + aside {
stroke: #666;
}
-#hour-chart {
- width: 260px;
-}
-
-#day-chart {
- width: 90px;
-}
-
-#date-chart {
- width: 920px;
-}
-
-#verb-chart {
- width: 220px;
-}
-
View
37 server/views/split/show.eco
@@ -1,11 +1,11 @@
<div class="split-test">
<h1><%= @title %></h1>
- <div id="alternatives" class="alternatives"></div>
<p class="meta">This test was started <%= Date.create(@created).relative() %></p>
+ <div id="alternatives" class="alternatives"></div>
</div>
<script>
$(function() {
- var DAYS = ["S", "M", "T", "W", "T ", "F", "S "];
+ var DAYS = ["S", "M", "T", "W", "T", "F", "S"];
var testId = document.location.pathname.split("/").last();
$.getJSON("/v1/split/" + testId + "/data", function(alternatives) {
@@ -45,7 +45,7 @@ $(function() {
}
var xfilter = crossfilter(alternative.data),
- day = xfilter.dimension(function(d) { return DAYS[Date.create(d.time).getDay()]; }),
+ day = xfilter.dimension(function(d) { return Date.create(d.time).getDay(); }),
days = day.group().reduce(reduceAdd, reduceRemove, reduceInitial).order(value),
hour = xfilter.dimension(function(d) { return Date.create(d.time).getHours(); }),
hours = hour.group().reduce(reduceAdd, reduceRemove, reduceInitial).order(value),
@@ -57,18 +57,20 @@ $(function() {
el.append("big");
el.append("small");
el.append("div").attr("class", "chart days")
- .append("h3").attr("class", "title");
+ .append("div").attr("class", "title").text("Day of week");
el.append("div").attr("class", "chart hours")
- .append("h3").attr("class", "title");
+ .append("div").attr("class", "title").text("Time of day");
// Now let's do some charts.
var charts = [
- barChart(resetChart) // Day
+ barChart() // Day
.dimension(day).group(days).value(value)
- .x(d3.scale.ordinal().domain(DAYS).range(d3.range(0, 80, 10))),
- barChart(resetChart) // Hour
+ .x(d3.scale.linear().domain([0, 7]).rangeRound([0, 10 * 8]))
+ .reset(resetChart),
+ barChart() // Hour
.dimension(hour).group(hours).value(value)
.x(d3.scale.linear().domain([0, 24]).rangeRound([0, 10 * 24]))
+ .reset(resetChart)
];
// Renders the specified chart or list.
@@ -77,7 +79,6 @@ $(function() {
converted = value.converted;
d3.select(this).call(method);
el.select("small").text(value.participants);
- console.log(converted)
if (isNaN(converted))
el.select("big").text("N/A");
else
@@ -100,7 +101,11 @@ $(function() {
}
- function barChart(resetChart) {
+
+
+
+
+ function barChart() {
if (!barChart.id) barChart.id = 0;
var margin = { top: 10, right: 10, bottom: 20, left:10 },
@@ -113,7 +118,8 @@ $(function() {
brushDirty,
dimension,
group,
- round;
+ round,
+ reset;
function chart(div) {
var width = d3.last(x.range()),
@@ -133,7 +139,8 @@ $(function() {
.style("display", "none");
div.select(".title a").on("click", function() {
d3.event.preventDefault();
- resetChart(id)
+ if (reset)
+ reset(id);
});
g = div.append("svg")
@@ -299,6 +306,12 @@ $(function() {
return chart;
};
+ chart.reset = function(_) {
+ if (!arguments.length) return reset;
+ reset = _;
+ return chart;
+ };
+
return d3.rebind(chart, brush, "on");
}
Please sign in to comment.
Something went wrong with that request. Please try again.