Skip to content

Commit

Permalink
goes part way to solving w3c#436. It is clear we have a lot more work…
Browse files Browse the repository at this point in the history 
… to do on this idea.
  • Loading branch information
@hamilton
hamilton committed Oct 13, 2015
1 parent 959b519 commit f484faa
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 27 deletions.
3 changes: 3 additions & 0 deletions dist/metricsgraphics.css
View file
Expand Up @@ -360,6 +360,9 @@ circle.mg-points-mono {
font-size: 0.65rem;
}

.mg-european-hours {
}

.mg-year-marker text {
fill: black;
font-size: 0.7rem;
Expand Down
45 changes: 33 additions & 12 deletions dist/metricsgraphics.js
View file
Expand Up @@ -159,6 +159,7 @@ MG.data_graphic = function(args) {
scalefns: {},
scales: {},
utc_time: false,
european_clock: false,
show_year_markers: false,
show_secondary_x_label: true,
target: '#viz',
Expand Down Expand Up @@ -1531,6 +1532,7 @@ function mg_default_bar_xax_format(args) {

function mg_get_time_frame(diff){
// diff should be (max_x - min_x) / 1000, in other words, the difference in seconds.
var time_frame;
if (diff < 10) {
time_frame = 'millis'
} else if (diff < 60) {
Expand Down Expand Up @@ -1566,15 +1568,13 @@ function mg_default_xax_format(args) {
}
var data = args.processed.original_data || args.data;
var test_point = mg_flatten_array(data)[0][args.processed.original_x_accessor || args.x_accessor]

return function(d) {
var diff;
var main_time_format;
var time_frame;

if (args.time_series) {
diff = (args.processed.max_x - args.processed.min_x) / 1000;

time_frame = mg_get_time_frame(diff);
main_time_format = mg_get_time_format(args.utc_time, diff);
}
Expand Down Expand Up @@ -1664,28 +1664,41 @@ function mg_add_x_tick_labels(g, args) {
ticks[0] = args.processed.min_x;
}

g.selectAll('.mg-xax-labels')
var labels = g.selectAll('.mg-xax-labels')
.data(ticks).enter()
.append('text')
.attr('x', function(d) { return args.scales.X(d).toFixed(2); })
.attr('y', (args.height - args.bottom + args.xax_tick_length * 7 / 3).toFixed(2))
.attr('dy', '.50em')
.attr('text-anchor', 'middle')
.text(function(d) {
return args.xax_units + args.processed.xax_format(d);
});
.attr('text-anchor', 'middle');

if (args.time_series && args.european_clock){
labels.append('tspan').classed('mg-european-hours', true).text(function(_d,i){
var d = new Date(_d);
if (i === 0) return d3.time.format('%H')(d);
else return ''
});
labels.append('tspan').classed('mg-european-minutes-seconds', true).text(function(_d,i){
var d = new Date(_d);
return ":" + args.processed.xax_format(d);
});
} else {
labels.text(function(d) {
return args.xax_units + args.processed.xax_format(d);
});
}

if (args.time_series && (args.show_years || args.show_secondary_x_label)) {
var secondary_marks,
secondary_function, yformat;

var time_frame = args.processed.x_time_frame;

switch(time_frame) {
case 'millis':
case 'seconds':
secondary_function = d3.time.days;
yformat = MG.time_format(args.utc_time, '%I %p');
if (args.european_clock) yformat = MG.time_format(args.utc_time, '%b %d');
else yformat = MG.time_format(args.utc_time, '%I %p');
break;
case 'less-than-a-day':
secondary_function = d3.time.days;
Expand Down Expand Up @@ -1733,7 +1746,6 @@ function mg_add_x_tick_labels(g, args) {
if (args.xax_start_at_min && i == 0) {
d = ticks[0];
}

return args.scales.X(d).toFixed(2);
})
.attr('y', (args.height - args.bottom + args.xax_tick_length * 7 / 1.3).toFixed(2))
Expand All @@ -1742,6 +1754,8 @@ function mg_add_x_tick_labels(g, args) {
.text(function(d) {
return yformat(new Date(d));
});
} else {

}
}

Expand Down Expand Up @@ -1827,7 +1841,7 @@ function mg_select_xax_format(args) {
args.processed.xax_format = mg_default_xax_format(args);
} else if (c === 'bar') {
args.processed.xax_format = mg_default_bar_xax_format(args);
}
}
}
}
}
Expand Down Expand Up @@ -1871,7 +1885,7 @@ function init(args) {
}

args.time_series = is_time_series();

var svg_width = args.width;
var svg_height = args.height;

Expand Down Expand Up @@ -4500,6 +4514,13 @@ MG.data_table = function(args) {
.attr('text-anchor', 'middle')
.text(args.missing_text);

this.windowListeners();

return this;
};

this.windowListeners = function() {
mg_window_listeners(this.args);
return this;
};

Expand Down
6 changes: 3 additions & 3 deletions dist/metricsgraphics.min.js
View file

Large diffs are not rendered by default.

36 changes: 36 additions & 0 deletions examples/charts/auto-time-formatting.htm
View file
Expand Up @@ -79,6 +79,30 @@
</div>
</div>


<div class='row trunk-section'>
<div class='col-lg-7 text-center'>
<div class='row'>
<div class='col-lg-12 text-center' id='european'></div>
</div>
</div>
<div class='col-lg-5'>

<pre><code class='javascript'>MG.data_graphic({
title: "European Clock",
description: 'By setting european_clock to true, you can default to European-style time. This is at the moment experimental, and the formatting may change.',
data: data1,
target: '#european',
european_clock: true,
width: 600,
height: 200,
right: 40
});
</code></pre>

</div>
</div>

<script>
MG._hooks = {};
function fake_data(length, seconds) {
Expand Down Expand Up @@ -112,6 +136,18 @@
var data3 = fake_data(75,60 * 60);
var data4 = fake_days(25);


MG.data_graphic({
title: "European Clock",
description: 'By setting european_clock to true, you can default to European-style time. This is at the moment experimental, and the formatting may change.',
data: data1,
target: '#european',
european_clock: true,
width: 600,
height: 200,
right: 40
});

MG.data_graphic({
title: "Less Than A Minute",
data: data1,
Expand Down
2 changes: 2 additions & 0 deletions examples/charts/lines.htm
View file
Expand Up @@ -156,6 +156,8 @@

<script>



d3.json('data/fake_users1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
Expand Down
1 change: 1 addition & 0 deletions src/js/common/data_graphic.js
View file
Expand Up @@ -75,6 +75,7 @@ MG.data_graphic = function(args) {
scalefns: {},
scales: {},
utc_time: false,
european_clock: false,
show_year_markers: false,
show_secondary_x_label: true,
target: '#viz',
Expand Down
2 changes: 1 addition & 1 deletion src/js/common/init.js
View file
Expand Up @@ -37,7 +37,7 @@ function init(args) {
}

args.time_series = is_time_series();

var svg_width = args.width;
var svg_height = args.height;

Expand Down
35 changes: 24 additions & 11 deletions src/js/common/x_axis.js
View file
Expand Up @@ -298,6 +298,7 @@ function mg_default_bar_xax_format(args) {

function mg_get_time_frame(diff){
// diff should be (max_x - min_x) / 1000, in other words, the difference in seconds.
var time_frame;
if (diff < 10) {
time_frame = 'millis'
} else if (diff < 60) {
Expand Down Expand Up @@ -333,15 +334,13 @@ function mg_default_xax_format(args) {
}
var data = args.processed.original_data || args.data;
var test_point = mg_flatten_array(data)[0][args.processed.original_x_accessor || args.x_accessor]

return function(d) {
var diff;
var main_time_format;
var time_frame;

if (args.time_series) {
diff = (args.processed.max_x - args.processed.min_x) / 1000;

time_frame = mg_get_time_frame(diff);
main_time_format = mg_get_time_format(args.utc_time, diff);
}
Expand Down Expand Up @@ -431,28 +430,41 @@ function mg_add_x_tick_labels(g, args) {
ticks[0] = args.processed.min_x;
}

g.selectAll('.mg-xax-labels')
var labels = g.selectAll('.mg-xax-labels')
.data(ticks).enter()
.append('text')
.attr('x', function(d) { return args.scales.X(d).toFixed(2); })
.attr('y', (args.height - args.bottom + args.xax_tick_length * 7 / 3).toFixed(2))
.attr('dy', '.50em')
.attr('text-anchor', 'middle')
.text(function(d) {
return args.xax_units + args.processed.xax_format(d);
});
.attr('text-anchor', 'middle');

if (args.time_series && args.european_clock){
labels.append('tspan').classed('mg-european-hours', true).text(function(_d,i){
var d = new Date(_d);
if (i === 0) return d3.time.format('%H')(d);
else return ''
});
labels.append('tspan').classed('mg-european-minutes-seconds', true).text(function(_d,i){
var d = new Date(_d);
return ":" + args.processed.xax_format(d);
});
} else {
labels.text(function(d) {
return args.xax_units + args.processed.xax_format(d);
});
}

if (args.time_series && (args.show_years || args.show_secondary_x_label)) {
var secondary_marks,
secondary_function, yformat;

var time_frame = args.processed.x_time_frame;

switch(time_frame) {
case 'millis':
case 'seconds':
secondary_function = d3.time.days;
yformat = MG.time_format(args.utc_time, '%I %p');
if (args.european_clock) yformat = MG.time_format(args.utc_time, '%b %d');
else yformat = MG.time_format(args.utc_time, '%I %p');
break;
case 'less-than-a-day':
secondary_function = d3.time.days;
Expand Down Expand Up @@ -500,7 +512,6 @@ function mg_add_x_tick_labels(g, args) {
if (args.xax_start_at_min && i == 0) {
d = ticks[0];
}

return args.scales.X(d).toFixed(2);
})
.attr('y', (args.height - args.bottom + args.xax_tick_length * 7 / 1.3).toFixed(2))
Expand All @@ -509,6 +520,8 @@ function mg_add_x_tick_labels(g, args) {
.text(function(d) {
return yformat(new Date(d));
});
} else {

}
}

Expand Down Expand Up @@ -594,7 +607,7 @@ function mg_select_xax_format(args) {
args.processed.xax_format = mg_default_xax_format(args);
} else if (c === 'bar') {
args.processed.xax_format = mg_default_bar_xax_format(args);
}
}
}
}
}

0 comments on commit f484faa

Please sign in to comment.