Add shadows to vbars

pygal/bar.py

@@ -90,6 +90,38 @@ class VerticalBar(Bar):
     """ Vertical bar graph """
     top_align = top_font = 1
 
+    def add_defs(self, defs):
+        """
+        Override and place code to add defs here. TODO: what are defs?
+        """
+        for id in range(12):
+            idn = 'light%d' % (id + 1)
+            light = node(defs, 'linearGradient', {
+                'id': idn,
+                'x1': 0,
+                'x2': '50%',
+                'y1': 0,
+                'y2': '100%'})
+            node(light, 'stop',
+                 {'class': 'upGradientLight %s' % idn, 'offset': 0})
+            node(light, 'stop',
+                 {'class': 'downGradientLight %s' % idn, 'offset': '100%'})
+
+        shadow = node(defs, 'linearGradient', {
+            'id': 'shadow',
+            'x1': 0,
+            'x2': '100%',
+            'y1': 0,
+            'y2': 0})
+        node(shadow, 'stop',
+             {'offset': 0, 'stop-color': '#aaa', 'stop-opacity': 0.7})
+        node(shadow, 'stop',
+             {'offset': '2%', 'stop-color': '#fff', 'stop-opacity': 0})
+        node(shadow, 'stop',
+             {'offset': '98%', 'stop-color': '#fff', 'stop-opacity': 0})
+        node(shadow, 'stop',
+             {'offset': '100%', 'stop-color': '#aaa', 'stop-opacity': .7})
+
     def get_x_labels(self):
         return self.get_field_labels()
 

pygal/css/bar.css

@@ -10,61 +10,118 @@
     fill: #000000;
 }
 
+.upGradientLight {
+  stop-opacity: 0.4;
+}
+
+.downGradientLight {
+  stop-opacity: 0.7;
+}
+
 .key, .fill {
-    fill-opacity: 0.5;
-    stroke: none;
-    stroke-width: 1px;
+    fill-opacity: 0.9;
+    stroke: url(#shadow);
+    stroke-width: 2px;
     -webkit-transition: 250ms;
 }
 
 .fill:hover {
-    fill-opacity: 0.25;
+    fill-opacity: 0.5;
 }
 
 .key1, .fill1 {
-    fill: #ff0000;
+    fill: url(#light1);
 }
 
 .key2, .fill2 {
-    fill: #0000ff;
+    fill: url(#light2);
 }
 
 .key3, .fill3 {
-    fill: #00ff00;
+    fill: url(#light3);
 }
 
 .key4, .fill4 {
-    fill: #ffcc00;
+    fill: url(#light4);
 }
 
 .key5, .fill5 {
-    fill: #00ccff;
+    fill: url(#light5);
 }
 
 .key6, .fill6 {
-    fill: #ff00ff;
+    fill: url(#light6);
 }
 
 .key7, .fill7 {
-    fill: #00ffff;
+    fill: url(#light7);
 }
 
 .key8, .fill8 {
-    fill: #ffff00;
+    fill: url(#light8);
 }
 
 .key9, .fill9 {
-    fill: #cc6666;
+    fill: url(#light9);
 }
 
 .key10, .fill10 {
-    fill: #663399;
+    fill: url(#light10);
 }
 
 .key11, .fill11 {
-    fill: #339900;
+    fill: url(#light11);
 }
 
 .key12, .fill12 {
-    fill: #9966FF;
+    fill: url(#light12);
+}
+
+
+.light1 {
+  stop-color: #ff0000;
+}
+
+.light2 {
+  stop-color: #0000ff;
+}
+
+.light3 {
+  stop-color: #00ff00;
+}
+
+.light4 {
+  stop-color: #ffcc00;
+}
+
+.light5 {
+  stop-color: #00ccff;
+}
+
+.light6 {
+  stop-color: #ff00ff;
+}
+
+.light7 {
+  stop-color: #00ffff;
+}
+
+.light8 {
+  stop-color: #ffff00;
+}
+
+.light9 {
+  stop-color: #cc6666;
+}
+
+.light10 {
+  stop-color: #663399;
+}
+
+.light11 {
+  stop-color: #339900;
+}
+
+.light12 {
+  stop-color: #9966FF;
 }

pygal/css/graph.css

@@ -1,7 +1,7 @@
 /* Base styles for pygal graphs */
 
 * {
-  font-family: monospace;
+  font-family: helvetica;
 }
 .svgBackground{
   fill:#ffffff;
@@ -36,6 +36,7 @@
 }
 
 .xAxisLabels{
+  font-family: monospace;
   text-anchor: middle;
   fill: #000000;
   font-size: %(x_label_font_size)dpx;
@@ -43,6 +44,7 @@
 }
 
 .yAxisLabels{
+  font-family: monospace;
   text-anchor: end;
   fill: #000000;
   font-size: %(y_label_font_size)dpx;

pygal/graph.py

@@ -242,7 +242,7 @@ class Graph(object):
         text = node(self.graph, 'text', {'class': 'xAxisLabels'})
         text.text = label
 
-        x = index * label_width
+        x = index * label_width + self.x_label_offset(label_width)
         y = self.graph_height + self.x_label_font_size + 3
 
         if self.stagger_x_labels and (index % 2):