Move font_size config to style. Add font_family for various e…

…lements in style. Add ``googlefont:font`` support for style fonts.

demo/moulinrouge/tests.py

@@ -48,29 +48,35 @@ def test_unsorted():
 
     @app.route('/test/bar_links')
     def test_bar_links():
-        bar = Bar(style=styles['neon'])
+        bar = Bar(style=styles['default'](
+            font_family='googlefont:Raleway'))
         bar.js = ('http://l:2343/2.0.x/pygal-tooltips.js',)
-        bar.add('1234', [
+        bar.title = 'Wow ! Such Chart !'
+        bar.x_title = 'Many x labels'
+        bar.y_title = 'Much y labels'
+
+        bar.add('Red serie', [
             {'value': 10,
              'label': 'Ten',
              'xlink': 'http://google.com?q=10'},
-            {'value': 20,
-             'tooltip': 'Twenty',
+            {'value': 25,
+             'label': 'Twenty is a good number yada yda yda yada yada',
              'xlink': 'http://google.com?q=20'},
             30,
             {'value': 40,
              'label': 'Forty',
              'xlink': 'http://google.com?q=40'}
         ])
 
-        bar.add('4321', [40, {
+        bar.add('Blue serie', [40, {
             'value': 30,
             'label': 'Thirty',
             'xlink': 'http://google.com?q=30'
         }, 20, 10])
-        bar.x_labels = map(str, range(1, 5))
+        bar.x_labels = ['Yesterday', 'Today or any other day',
+                        'Tomorrow', 'Someday']
         bar.logarithmic = True
-        bar.zero = 1
+        # bar.zero = 1
         return bar.render_response()
 
     @app.route('/test/xy_links')
@@ -395,8 +401,8 @@ class LolConfig(Config):
             js = ['http://l:2343/2.0.x/pygal-tooltips.js']
 
         stacked = StackedBar(LolConfig())
-        stacked.add('1', [1, 2, 3])
-        stacked.add('2', [4, 5, 6])
+        stacked.add('', [1, 2, 3])
+        stacked.add('My beautiful serie of 2019', [4, 5, 6])
         return stacked.render_response()
 
     @app.route('/test/dateline')
@@ -628,7 +634,7 @@ def test_pie_serie_radius():
     @app.route('/test/half_pie')
     def test_half_pie():
         pie = Pie(half_pie=True)
-        for i in range(100):
+        for i in range(20):
             pie.add(str(i), i, inner_radius=.1)
         pie.legend_at_bottom = True
         pie.legend_at_bottom_columns = 4

docs/changelog.rst

@@ -31,6 +31,9 @@ Changelog
 * Rename in Style foreground_light as foreground_strong
 * Rename in Style foreground_dark as foreground_subtle
 * Add a ``render_data_uri`` method (#237)
+* Move ``font_size`` config to style
+* Add ``font_family`` for various elements in style
+* Add ``googlefont:font`` support for style fonts
 
 1.7.0
 =====

pygal/_compat.py

@@ -80,3 +80,8 @@ def timestamp(x):
         return x.timestamp()
     else:
         return time.mktime(x.utctimetuple())
+
+try:
+    from urllib import quote_plus
+except ImportError:
+    from urllib.parse import quote_plus

pygal/config.py

@@ -301,6 +301,10 @@ class Config(CommonConfig):
 
     tooltip_border_radius = Key(0, int, "Look", "Tooltip border radius")
 
+    tooltip_fancy_mode = Key(
+        True, bool, "Look", "Fancy tooltips",
+        "Print legend, x label in tooltip and use serie color for value.")
+
     inner_radius = Key(
         0, float, "Look", "Piechart inner radius (donut), must be <.9")
 
@@ -441,20 +445,6 @@ class Config(CommonConfig):
     no_data_text = Key(
         "No data", str, "Text", "Text to display when no data is given")
 
-    label_font_size = Key(10, int, "Text", "Label font size")
-
-    major_label_font_size = Key(10, int, "Text", "Major label font size")
-
-    value_font_size = Key(8, int, "Text", "Value font size")
-
-    tooltip_font_size = Key(16, int, "Text", "Tooltip font size")
-
-    title_font_size = Key(16, int, "Text", "Title font size")
-
-    legend_font_size = Key(14, int, "Text", "Legend font size")
-
-    no_data_font_size = Key(64, int, "Text", "No data text font size")
-
     print_values = Key(
         False, bool,
         "Text", "Print values when graph is in non interactive mode")

pygal/css/base.css

@@ -22,41 +22,43 @@
  * Font-sizes from config, override with care
  */
 
-{{ id }}.graph {
+{{ id }} {
   -webkit-user-select: none;
   -webkit-font-smoothing: antialiased;
+  font-family: {{ style.font_family }};
 }
 
 {{ id }}.title {
-  font-family: {{ style.font_family }};
-  font-size: {{ font_sizes.title }};
+  font-family: {{ style.title_font_family }};
+  font-size: {{ style.title_font_size }}px;
 }
 
 {{ id }}.legends .legend text {
-  font-family: {{ style.font_family }};
-  font-size: {{ font_sizes.legend }};
+  font-family: {{ style.legend_font_family }};
+  font-size: {{ style.legend_font_size }}px;
 }
 
 {{ id }}.axis text {
-  font-family: {{ style.font_family }};
-  font-size: {{ font_sizes.label }};
+  font-family: {{ style.label_font_family }};
+  font-size: {{ style.label_font_size }}px;
 }
 
 {{ id }}.axis text.major {
-  font-family: {{ style.font_family }};
-  font-size: {{ font_sizes.major_label }};
+  font-family: {{ style.major_label_font_family }};
+  font-size: {{ style.major_label_font_size }}px;
 }
 
 {{ id }}.series text {
-  font-family: {{ style.font_family }};
-  font-size: {{ font_sizes.value }};
+  font-family: {{ style.value_font_family }};
+  font-size: {{ style.value_font_size }}px;
 }
 
-{{ id }}.tooltip text {
-  font-family: {{ style.font_family }};
-  font-size: {{ font_sizes.tooltip }};
+{{ id }}.tooltip {
+  font-family: {{ style.tooltip_font_family }};
+  font-size: {{ style.tooltip_font_size }}px;
 }
 
 {{ id }}text.no_data {
-  font-size: {{ font_sizes.no_data }};
+  font-family: {{ style.no_data_font_family }};
+  font-size: {{ style.no_data_font_size }}px;
 }

pygal/css/graph.css

@@ -103,8 +103,8 @@
   fill: transparent;
 }
 
-{{ id }} text {
-  stroke: none;
+{{ id }} text, {{ id }} tspan {
+  stroke: none !important;
 }
 
 {{ id }}.series text.active {
@@ -118,7 +118,3 @@
 {{ id }}.tooltip text {
   fill-opacity: 1;
 }
-
-{{ id }}.tooltip text tspan.label {
-  fill-opacity: .8;
-}

pygal/css/style.css

@@ -112,10 +112,28 @@
   transition: opacity {{ style.transition }};
 }
 
-{{ id }}.tooltip text {
+{{ id }}.tooltip .label {
+  fill: {{ style.foreground }};
+}
+
+{{ id }}.tooltip .label {
+  fill: {{ style.foreground }};
+}
+
+{{ id }}.tooltip .legend {
+  font-size: .8em;
+  fill: {{ style.foreground_subtle }};
+}
+
+{{ id }}.tooltip .x_label {
+  font-size: .6em;
   fill: {{ style.foreground_strong }};
 }
 
+{{ id }}.tooltip .value {
+  font-size: 2em;
+}
+
 {{ id }}.map-element {
   fill: {{ style.foreground }};
   stroke: {{ style.foreground_subtle }} !important;