playground
/
pygal
mirror of https://github.com/Kozea/pygal.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Add tooltips, working for lines

pull/8/head
Florian Mounier 13 years ago
parent
51e82fcbd4
commit
7f16330de9
8 changed files with 171 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pygal/config.py
  2. 45
      pygal/css/graph.css
  3. 4
      pygal/graph/bar.py
  4. 24
      pygal/graph/graph.py
  5. 17
      pygal/graph/line.py
  6. 36
      pygal/js/graph.coffee
  7. 73
      pygal/js/graph.js
  8. 7
      pygal/svg.py

14
pygal/config.py
Unescape View File

@ -44,7 +44,8 @@ class Config(object):
style = DefaultStyle
# Various font sizes
label_font_size = 10
values_font_size = 12
value_font_size = 8
tooltip_font_size = 20
title_font_size = 16
legend_font_size = 14
# Specify labels rotation angles in degrees
@ -92,12 +93,13 @@ class Config(object):
"""Can be updated with kwargs"""
self.__dict__.update(kwargs)
@property
def font_sizes(self):
def font_sizes(self, with_unit=True):
fs = FontSizes()
for name in dir(self):
if name.endswith('_font_size'):
setattr(fs,
name.replace('_font_size', ''),
'%dpx' % getattr(self, name))
setattr(
fs,
name.replace('_font_size', ''),
('%dpx' % getattr(self, name)
) if with_unit else getattr(self, name))
return fs

45
pygal/css/graph.css
Unescape View File

@ -58,12 +58,11 @@ text.no_data {
.legends .legend text {
font-family: monospace;
font-size: {{ font_sizes.legend }};
stroke: {{ style.foreground }};
fill: {{ style.foreground }};
fill-opacity: 1;
}
.legends .legend:hover text {
stroke: {{ style.foreground_light }};
fill: {{ style.foreground_light }};
}
@ -94,7 +93,6 @@ text.no_data {
stroke: {{ style.foreground_light }};
}
.axis .guide.line {
stroke: {{ style.foreground_dark }};
stroke-dasharray: 4,4;
@ -104,6 +102,11 @@ text.no_data {
stroke: {{ style.foreground }};
stroke-dasharray: 6,6;
}
.axis text.major {
stroke-width: 0.5px;
stroke: {{ style.foreground_light }};
fill: {{ style.foreground_light }};
}
.axis.{{ hidden }} .guide.line {
opacity: 0;
@ -122,15 +125,6 @@ text.no_data {
opacity: 1;
}
.dot circle {
stroke-width: 1px;
fill-opacity: 1;
}
.dot circle.active {
stroke-width: 5px;
}
.nofill {
fill: none;
}
@ -143,18 +137,35 @@ text.no_data {
fill-opacity: {{ style.opacity_hover }};
}
.dot {
stroke-width: 1px;
fill-opacity: 1;
}
.dot.active {
stroke-width: 5px;
}
.series text {
opacity: 0;
font-size: {{ font_sizes.values }};
text-anchor: middle;
stroke: {{ style.foreground_light }};
font-size: {{ font_sizes.value }};
stroke: none;
fill: {{ style.foreground_light }};
text-shadow: 0 0 16px {{ style.background }};
}
.series text.active {
opacity: 1;
}
#tooltip rect {
fill-opacity: 0.8;
fill: {{ style.background }};
stroke: {{ style.foreground_light }};
}
#tooltip text {
fill-opacity: 1;
fill: {{ style.foreground_light }};
font-size: {{ font_sizes.tooltip }};
}
{{ style.colors }}

4
pygal/graph/bar.py
Unescape View File

@ -76,10 +76,10 @@ class Bar(Graph):
id="active-%s" % tag,
class_='rect reactive')
if self._horizontal:
x += .3 * self.values_font_size
x += .3 * self.value_font_size
y += height / 2
else:
y += height / 2 + .3 * self.values_font_size
y += height / 2 + .3 * self.value_font_size
self.svg.transposable_node(
serie_node['overlay'], 'text',
x=x + bar_inner_width / 2,

24
pygal/graph/graph.py
Unescape View File

@ -41,6 +41,20 @@ class Graph(BaseGraph):
self.graph_node, class_="plot overlay",
transform="translate(%d, %d)" % (
self.margin.left, self.margin.top))
self.text_overlay = self.svg.node(
self.graph_node, class_="plot text-overlay",
transform="translate(%d, %d)" % (
self.margin.left, self.margin.top))
tooltip_overlay = self.svg.node(
self.graph_node, class_="tooltip-overlay",
transform="translate(%d, %d)" % (
self.margin.left, self.margin.top))
self.tooltip_node = self.svg.node(tooltip_overlay, id="tooltip")
self.svg.node(self.tooltip_node, 'rect',
id="tooltip-box",
rx=5, ry=5,
)
self.svg.node(self.tooltip_node, 'text')
def _x_axis(self):
if not self._x_labels:
@ -140,7 +154,11 @@ class Graph(BaseGraph):
def _serie(self, serie):
return dict(
plot=self.svg.node(
self.plot, class_='series serie-%d color-%d' % (serie, serie)),
self.plot,
class_='series serie-%d color-%d' % (serie, serie)),
overlay=self.svg.node(
self.overlay, class_='series serie-%d color-%d' % (
serie, serie)))
self.overlay,
class_='series serie-%d color-%d' % (serie, serie)),
text_overlay=self.svg.node(
self.text_overlay,
class_='series serie-%d color-%d' % (serie, serie)))

17
pygal/graph/line.py
Unescape View File

@ -48,15 +48,14 @@ class Line(Graph):
if self.show_dots:
dots = self.svg.node(serie_node['overlay'], class_="dots")
for i, (x, y) in enumerate(view_values):
dot = self.svg.node(dots, class_='dot')
tag = '%d_%d' % (serie.index, i)
self.svg.node(dot, 'circle', cx=x, cy=y, r=2.5,
id="active-%s" % tag,
class_='reactive')
self.svg.node(dot, 'text', x=x, y=y,
id="reactive-%s" % tag,
class_='reactive-text'
).text = self._get_value(serie.points, i)
val = self._get_value(serie.points, i)
self.svg.node(dots, 'circle', cx=x, cy=y, r=2.5,
class_='dot reactive tooltip-trigger')
self.svg.node(dots, 'desc').text = val
self.svg.node(serie_node['text_overlay'], 'text',
x=x + self.value_font_size,
y=y + self.value_font_size,
).text = val
if self.stroke:
if self.interpolate:

36
pygal/js/graph.coffee
Unescape View File

@ -1,4 +1,9 @@
_ = (x) -> document.querySelectorAll(x)
__ = (x) -> document.getElementById(x)
padding = 5
tooltip_timeout = 0
tooltip_font_size = parseInt("{{ font_sizes.tooltip }}")
add_class = (e, class_name) ->
return if not e
@ -15,6 +20,8 @@ rm_class = (e, class_name) ->
cn.splice(i, 1)
e.setAttribute('class', cn.join(' '))
svg = (tag) -> document.createElementNS('http://www.w3.org/2000/svg', tag)
activate = (elements...) ->
for element in elements
add_class(element, 'active')
@ -36,15 +43,44 @@ hover = (elts, over, out) ->
elt.addEventListener('mouseover', over.bind(elt) , false)
elt.addEventListener('mouseout', out.bind(elt) , false)
tooltip = (elt) ->
clearTimeout(tooltip_timeout)
_tooltip = __('tooltip')
_text = _tooltip.getElementsByTagName('text')[0]
_rect = _tooltip.getElementsByTagName('rect')[0]
_text.textContent = elt.nextElementSibling.textContent
w = _text.offsetWidth + 2 * padding
h = _text.offsetHeight + 2 * padding
_rect.setAttribute('width', w)
_rect.setAttribute('height', h)
_text.setAttribute('x', padding)
_text.setAttribute('y', padding + tooltip_font_size)
x = elt.getAttribute('cx') || elt.getAttribute('x')
y = elt.getAttribute('cy') || elt.getAttribute('y')
if x - w > 0
x -= w
if y - h > 0
y -= h
_tooltip.setAttribute('transform', "translate(#{x} #{y})")
untooltip = ->
tooltip_timeout = setTimeout (->
__('tooltip').setAttribute('transform', 'translate(-100000, -100000)')), 1000
@svg_load = ->
for text in _('.text-overlay .series')
text.setAttribute('display', 'none')
hover _('.reactive-text'), (-> activate(@, active(@))), (-> deactivate(@, active(@)))
hover _('.reactive'), (-> activate(@, reactive(@))), (-> deactivate(@, reactive(@)))
hover _('.activate-serie'), (
->
num = this.id.replace('activate-serie-', '')
_('.text-overlay .serie-' + num)[0].setAttribute('display', 'inline')
for element in _('.serie-' + num + ' .reactive')
activate(element, reactive(element))), (
->
num = this.id.replace('activate-serie-', '')
_('.text-overlay .serie-' + num)[0].setAttribute('display', 'none')
for element in _('.serie-' + num + ' .reactive')
deactivate(element, reactive(element)))
hover _('.tooltip-trigger'), (-> tooltip(@)), (-> untooltip())

73
pygal/js/graph.js
Unescape View File

@ -1,6 +1,6 @@
// Generated by CoffeeScript 1.2.1-pre
(function() {
var activate, active, add_class, deactivate, hover, reactive, rm_class, _,
var activate, active, add_class, deactivate, hover, padding, reactive, rm_class, svg, tooltip, tooltip_font_size, tooltip_timeout, untooltip, _, __,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
__slice = [].slice;
@ -8,6 +8,16 @@
return document.querySelectorAll(x);
};
__ = function(x) {
return document.getElementById(x);
};
padding = 5;
tooltip_timeout = 0;
tooltip_font_size = parseInt("{{ font_sizes.tooltip }}");
add_class = function(e, class_name) {
var cn;
if (!e) return;
@ -27,6 +37,10 @@
return e.setAttribute('class', cn.join(' '));
};
svg = function(tag) {
return document.createElementNS('http://www.w3.org/2000/svg', tag);
};
activate = function() {
var element, elements, _i, _len, _results;
elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
@ -76,7 +90,39 @@
return _results;
};
tooltip = function(elt) {
var h, w, x, y, _rect, _text, _tooltip;
clearTimeout(tooltip_timeout);
_tooltip = __('tooltip');
_text = _tooltip.getElementsByTagName('text')[0];
_rect = _tooltip.getElementsByTagName('rect')[0];
_text.textContent = elt.nextElementSibling.textContent;
w = _text.offsetWidth + 2 * padding;
h = _text.offsetHeight + 2 * padding;
_rect.setAttribute('width', w);
_rect.setAttribute('height', h);
_text.setAttribute('x', padding);
_text.setAttribute('y', padding + tooltip_font_size);
x = elt.getAttribute('cx') || elt.getAttribute('x');
y = elt.getAttribute('cy') || elt.getAttribute('y');
if (x - w > 0) x -= w;
if (y - h > 0) y -= h;
return _tooltip.setAttribute('transform', "translate(" + x + " " + y + ")");
};
untooltip = function() {
return tooltip_timeout = setTimeout((function() {
return __('tooltip').setAttribute('transform', 'translate(-100000, -100000)');
}), 1000);
};
this.svg_load = function() {
var text, _i, _len, _ref;
_ref = _('.text-overlay .series');
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
text = _ref[_i];
text.setAttribute('display', 'none');
}
hover(_('.reactive-text'), (function() {
return activate(this, active(this));
}), (function() {
@ -87,27 +133,34 @@
}), (function() {
return deactivate(this, reactive(this));
}));
return hover(_('.activate-serie'), (function() {
var element, num, _i, _len, _ref, _results;
hover(_('.activate-serie'), (function() {
var element, num, _j, _len2, _ref2, _results;
num = this.id.replace('activate-serie-', '');
_ref = _('.serie-' + num + ' .reactive');
_('.text-overlay .serie-' + num)[0].setAttribute('display', 'inline');
_ref2 = _('.serie-' + num + ' .reactive');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
element = _ref[_i];
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
element = _ref2[_j];
_results.push(activate(element, reactive(element)));
}
return _results;
}), (function() {
var element, num, _i, _len, _ref, _results;
var element, num, _j, _len2, _ref2, _results;
num = this.id.replace('activate-serie-', '');
_ref = _('.serie-' + num + ' .reactive');
_('.text-overlay .serie-' + num)[0].setAttribute('display', 'none');
_ref2 = _('.serie-' + num + ' .reactive');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
element = _ref[_i];
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
element = _ref2[_j];
_results.push(deactivate(element, reactive(element)));
}
return _results;
}));
return hover(_('.tooltip-trigger'), (function() {
return tooltip(this);
}), (function() {
return untooltip();
}));
};
}).call(this);

7
pygal/svg.py
Unescape View File

@ -51,14 +51,17 @@ class Svg(object):
templ = template(
f.read(),
style=self.graph.style,
font_sizes=self.graph.font_sizes,
font_sizes=self.graph.font_sizes(),
hidden='y' if self.graph._horizontal else 'x')
style.text = templ.decode('utf-8')
def add_script(self, js):
script = self.node(self.root, 'script', type='text/javascript')
with open(js) as f:
script.text = f.read()
templ = template(
f.read(),
font_sizes=self.graph.font_sizes(False))
script.text = templ.decode('utf-8')
def node(self, parent=None, tag='g', attrib=None, **extras):
if parent is None:

Write Preview
Loading…
Cancel
Save