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

Swapped vertical and horizontal on the basic bar chart #100

Merged
merged 1 commit into from Jun 30, 2014
Merged

Swapped vertical and horizontal on the basic bar chart #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 10 additions & 10 deletions coffee/basic/bar.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,33 @@
class Epoch.Chart.Bar extends Epoch.Chart.Plot
defaults =
style: 'grouped'
orientation: 'horizontal'
orientation: 'vertical'
padding:
bar: 0.08
group: 0.1
outerPadding:
bar: 0.08
group: 0.1

vertical_specific =
horizontal_specific =
tickFormats:
top: Epoch.Formats.si
bottom: Epoch.Formats.si
left: Epoch.Formats.regular
right: Epoch.Formats.regular

vertical_defaults = Epoch.Util.defaults(vertical_specific, defaults)
horizontal_defaults = Epoch.Util.defaults(horizontal_specific, defaults)

constructor: (@options={}) ->
if @options.orientation == 'vertical'
@options = Epoch.Util.defaults(@options, vertical_defaults)
if @options.orientation == 'horizontal'
@options = Epoch.Util.defaults(@options, horizontal_defaults)
else
@options = Epoch.Util.defaults(@options, defaults)
super(@options)

# @return [Function] The scale used to generate the chart's x scale.
x: ->
if @options.orientation == 'horizontal'
if @options.orientation == 'vertical'
d3.scale.ordinal()
.domain(Epoch.Util.domain(@data))
.rangeRoundBands([0, @innerWidth()], @options.padding.group, @options.outerPadding.group)
Expand All @@ -47,7 +47,7 @@ class Epoch.Chart.Bar extends Epoch.Chart.Plot

# @return [Function] The y scale used to render the bar chart.
y: ->
if @options.orientation == 'horizontal'
if @options.orientation == 'vertical'
extent = @extent((d) -> d.y)
extent[0] = Math.min(0, extent[0])
d3.scale.linear()
Expand Down Expand Up @@ -83,8 +83,8 @@ class Epoch.Chart.Bar extends Epoch.Chart.Plot
@_drawVertical()
super()

# Draws the bar chart with a horizontal orientation
_drawHorizontal: ->
# Draws the bar chart with a vertical orientation
_drawVertical: ->
[x0, y] = [@x(), @y()]
x1 = @x1(x0)
height = @height - @margins.top - @margins.bottom
Expand Down Expand Up @@ -134,7 +134,7 @@ class Epoch.Chart.Bar extends Epoch.Chart.Plot
.remove()

# Draws the bar chart with a horizontal orientation
_drawVertical: ->
_drawHorizontal: ->
[x, y0] = [@x(), @y()]
y1 = @y1(y0)
width = @width - @margins.left - @margins.right
Expand Down
58 changes: 29 additions & 29 deletions test/basic/bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ <h1>Basic Bar Chart Test</h1>
<li><a href="#test-8">Layer Color Override</a></li>
<li><a href="#test-9">Categorical Color Switching</a></li>
<li><a href="#test-10">Multi Series without Labels</a></li>
<li><a href="#test-11">Vertically Oriented Single Series</a></li>
<li><a href="#test-12">Vertically Oriented Multi Series</a></li>
<li><a href="#test-13">Vertically Oriented Multi Series Transition</a></li>
<li><a href="#test-11">Horizontally Oriented Single Series</a></li>
<li><a href="#test-12">Horizontally Oriented Multi Series</a></li>
<li><a href="#test-13">Horizontally Oriented Multi Series Transition</a></li>
</ol>


Expand All @@ -46,11 +46,11 @@ <h2>1. Single Series</h2>
data[0].values.push({x: x, y: y});
}

$('#test-1 .epoch').epoch({
$('#test-1 .epoch').epoch({
type: 'bar',
data: data,
tickFormats: {
bottom: function(d) {
bottom: function(d) {
return parseFloat(d).toFixed(1);
}
}
Expand All @@ -77,11 +77,11 @@ <h2>2. Single Series II</h2>
data[0].values.push({x: x, y: y});
}

$('#test-2 .epoch').epoch({
type: 'bar',
$('#test-2 .epoch').epoch({
type: 'bar',
data: data,
tickFormats: {
bottom: function(d) {
bottom: function(d) {
return parseFloat(d).toFixed(1);
}
}
Expand Down Expand Up @@ -120,9 +120,9 @@ <h2>3. Multi-series Plot</h2>
data[1].values.push({x: x, y: 2*x});
data[2].values.push({x: x, y: 3*x});
}
$('#test-3 .epoch').epoch({
type: 'bar',

$('#test-3 .epoch').epoch({
type: 'bar',
data: data
});
});
Expand Down Expand Up @@ -163,7 +163,7 @@ <h2>4. Multi-series Plot II</h2>
$('#test-4 .epoch').epoch({ type: 'bar', data: data });
});
</script>


<!-- Test 5 -->
<div id="test-5" class="test">
Expand Down Expand Up @@ -193,7 +193,7 @@ <h2>5. Single Series Transition</h2>
data1[0].values.push({x: x1, y: y1});
data2[0].values.push({x: x2, y: y2});
}

var chart = $('#test-5 .epoch').epoch({
type: 'bar',
data: data1
Expand Down Expand Up @@ -296,7 +296,7 @@ <h2>7. Single Series to Multi Series Transition</h2>
$(function() {
var data1 = [{label: 'A', values: []}],
data2 = [
{label: 'A', values: []},
{label: 'A', values: []},
{label: 'B', values: []},
{label: 'C', values: []}
],
Expand All @@ -311,8 +311,8 @@ <h2>7. Single Series to Multi Series Transition</h2>
data2[2].values.push({x: x, y: x * Math.log(x)});
}

var chart = $('#test-7 .epoch').epoch({
type: 'bar',
var chart = $('#test-7 .epoch').epoch({
type: 'bar',
data: data1,
tickFormats: {
bottom: function(d) { return d.toFixed(1); }
Expand Down Expand Up @@ -344,7 +344,7 @@ <h2>8. Layer Color Override</h2>
<script>
$(function() {
var data = [
{label: 'A', values: []},
{label: 'A', values: []},
{label: 'B', values: []},
{label: 'C', values: []}
],
Expand Down Expand Up @@ -388,7 +388,7 @@ <h2>9. Categorical Color Switching</h3>
<script>
$(function() {
var data = [
{label: 'A', values: []},
{label: 'A', values: []},
{label: 'B', values: []},
{label: 'C', values: []},
{label: 'D', values: []},
Expand All @@ -407,7 +407,7 @@ <h2>9. Categorical Color Switching</h3>
}

$('#test-9 .epoch').epoch({
type: 'bar',
type: 'bar',
data: data,
tickFormats: {
bottom: function(d) { return d.toFixed(1); }
Expand Down Expand Up @@ -458,15 +458,15 @@ <h2>10. Multi Series without Labels</h2>

<!-- Test 11 -->
<div id="test-11" class="test">
<h2>11. Vertically Oriented Single Series</h2>
<h2>11. Horizontally Oriented Single Series</h2>
<p>
Correctly render the single series plot of:
<ul>
<li>A - 20</li>
<li>B - 30</li>
<li>C - 60</li>
</ul>
using a vertical orientation.
using a horizontal orientation.
</p>
<div class="epoch"></div>
</div>
Expand All @@ -480,23 +480,23 @@ <h2>11. Vertically Oriented Single Series</h2>

$('#test-11 .epoch').epoch({
type: 'bar',
orientation: 'vertical',
orientation: 'horizontal',
data: data
});
});
</script>

<!-- Test 12 -->
<div id="test-12" class="test">
<h2>12. Vertically Oriented Multi Series</h2>
<h2>12. Horizontally Oriented Multi Series</h2>
<p>
Correctly render the multi series plot of:
<ul>
<li>A - 10, 30</li>
<li>B - 20, 50</li>
<li>C - 60, 10</li>
</ul>
using a vertical orientation.
using a horizontal orientation.
</p>
<div class="epoch"></div>
</div>
Expand All @@ -509,17 +509,17 @@ <h2>12. Vertically Oriented Multi Series</h2>

$('#test-12 .epoch').epoch({
type: 'bar',
orientation: 'vertical',
orientation: 'horizontal',
data: data
});
});
</script>

<!-- Test 13 -->
<div id="test-13" class="test">
<h2>13. Vertically Oriented Multi Series Transition</h2>
<h2>13. Horizontally Oriented Multi Series Transition</h2>
<p>
Correctly render the vertically oriented multi series plot of:
Correctly render the Horizontally oriented multi series plot of:
<ul>
<li>A - 10, 10</li>
<li>B - 20, 20</li>
Expand Down Expand Up @@ -551,7 +551,7 @@ <h2>13. Vertically Oriented Multi Series Transition</h2>

var chart = $('#test-13 .epoch').epoch({
type: 'bar',
orientation: 'vertical',
orientation: 'horizontal',
data: data1
});

Expand All @@ -562,4 +562,4 @@ <h2>13. Vertically Oriented Multi Series Transition</h2>
});
</script>
</body>
</html>
</html>