add three new visual options

* **titlePosition** - 'above' or 'below' * **titleFontFamily** - customize font-family for the title * **valueFontFamily** - customize font-family for the value
toorshia · Jan 25, 2016 · 5ba12ff · 5ba12ff
1 parent 9416009
commit 5ba12ff
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,12 @@ JustGage is a handy JavaScript plugin for generating and animating nice &amp; cl
 
 ###Update log
 
+######January ?, 2016.
+ * **titlePosition** - 'above' or 'below'
+ * **titleFontFamily** - customize font-family for the title
+ * **valueFontFamily** - customize font-family for the value
+
+
 ######January 5, 2016.
  * **donut pointer** - render configurable triangle pointer in donut mode - demo at http://justgage.com/examples/pointer.html
 

diff --git a/justgage.js b/justgage.js
@@ -73,11 +73,22 @@ JustGage = function(config) {
     // color of gauge title
     titleFontColor: kvLookup('titleFontColor', config, dataset, "#999999"),
 
+    // titleFontFamily : string
+    // color of gauge title
+    titleFontFamily: kvLookup('titleFontFamily', config, dataset, "sans-serif"),
+
+    // titlePosition : string
+    // 'above' or 'below'
+    titlePosition: kvLookup('titlePosition', config, dataset, "above"),
 
     // valueFontColor : string
     // color of label showing current value
     valueFontColor: kvLookup('valueFontColor', config, dataset, "#010101"),
 
+    // valueFontFamily : string
+    // color of label showing current value
+    valueFontFamily: kvLookup('valueFontFamily', config, dataset, "Arial"),
+
     // symbol : string
     // special symbol to show next to value
     symbol: kvLookup('symbol', config, dataset, ''),
@@ -375,11 +386,15 @@ JustGage = function(config) {
     // delta
     dx = (canvasW - widgetW) / 2;
     dy = (canvasH - widgetH) / 2;
+    if (obj.config.titlePosition === 'below') {
+      // shift whole thing down
+      dy -= (widgetH / 6.4);
+    }
 
     // title
     titleFontSize = ((widgetH / 8) > obj.config.titleMinFontSize) ? (widgetH / 10) : obj.config.titleMinFontSize;
     titleX = dx + widgetW / 2;
-    titleY = dy + widgetH / 6.4;
+    titleY = dy + (obj.config.titlePosition === 'below' ? (widgetH * 1.07) : (widgetH / 6.4));
 
     // value
     valueFontSize = ((widgetH / 6.5) > obj.config.valueMinFontSize) ? (widgetH / 6.5) : obj.config.valueMinFontSize;
@@ -647,7 +662,7 @@ JustGage = function(config) {
   obj.txtTitle.attr({
     "font-size": obj.params.titleFontSize,
     "font-weight": "bold",
-    "font-family": "Arial",
+    "font-family": obj.config.titleFontFamily,
     "fill": obj.config.titleFontColor,
     "fill-opacity": "1"
   });
@@ -658,7 +673,7 @@ JustGage = function(config) {
   obj.txtValue.attr({
     "font-size": obj.params.valueFontSize,
     "font-weight": "bold",
-    "font-family": "Arial",
+    "font-family": obj.config.valueFontFamily,
     "fill": obj.config.valueFontColor,
     "fill-opacity": "0"
   });