Segregate Labels (#24)

* issue/7 Adding ability for negative numbers Adding a minimum bar height to avoid ugly math when the value is zero * adding labels and fixing minimum bar height * fixing labels to be a separate component to the bars. * patching from upstream * adding label size back in
DeviaVir · Jun 1, 2020 · f7e332c · f7e332c
1 parent e10ce60
commit f7e332c
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 95 deletions.
diff --git a/dist/vue-bars.common.js b/dist/vue-bars.common.js
@@ -52,18 +52,18 @@ function generateGradientStepsCss (from, to, count) {
 
 /**
  *  Calculate the coordinate
- * @param  {number[]|object[]}  arr
- * @param  {object}             boundary
+ * @param {number[]|object[]} inArr
+ * @param {object} boundary
+ * @param {object} props
+ * @param {boolean} hasLabels
  * @return {object[]}
  */
-function genPoints (inArr, ref, ref$1) {
+function genPoints (inArr, ref, ref$1, hasLabels) {
   var minX = ref.minX;
   var minY = ref.minY;
   var maxX = ref.maxX;
   var maxY = ref.maxY;
   var minBarHeight = ref.minBarHeight;
-  var labelRotate = ref.labelRotate;
-  var labelSize = ref.labelSize;
   var max = ref$1.max;
   var min = ref$1.min;
 
@@ -73,7 +73,7 @@ function genPoints (inArr, ref, ref$1) {
   var absMaxVal = Math.abs(maxValue);
   var absMinVal = Math.abs(minValue);
   var gridX = (maxX - minX) / (arr.length - 1);
-  var labelHeight = 20;
+  var labelHeight = hasLabels ? 20 : 0;
 
   var delta = 0;
   if (minValue < 0 && maxValue < 0) {
@@ -89,15 +89,13 @@ function genPoints (inArr, ref, ref$1) {
   var zeroLine = minValue < 0 ? absMinVal : 0;
 
   return arr.map(function (value, index) {
-    var label = typeof inArr[index].title !== 'undefined' ? inArr[index].title : '';
-    var title = typeof inArr[index].value === 'number' ? inArr[index].value : inArr[index];
+    var title = typeof inArr[index] === 'number' ? inArr[index] : inArr[index].title;
     var height = Math.abs(value);
     var barHeight = (height * heightMultiplier - yAdjust > minBarHeight ? height * heightMultiplier - yAdjust : minBarHeight);
     return {
       x: index * gridX + minX,
       y: maxY - barHeight - (value >= 0 || value === 0 && minValue >= 0 ? zeroLine * heightMultiplier : zeroLine * heightMultiplier - barHeight) - labelHeight - yAdjust,
       height: barHeight,
-      label: label,
       title: title
     }
   })
@@ -106,10 +104,6 @@ function genPoints (inArr, ref, ref$1) {
 function genBars (_this, arr, h) {
   var ref = _this.boundary;
   var maxX = ref.maxX;
-  var maxY = ref.maxY;
-  var labelRotate = ref.labelRotate;
-  var labelColor = ref.labelColor;
-  var labelSize = ref.labelSize;
   var totalWidth = (maxX) / (arr.length - 1);
   if (!_this.barWidth) {
     _this.barWidth = totalWidth - (_this.padding || 5);
@@ -149,6 +143,25 @@ function genBars (_this, arr, h) {
       h('title', {}, [item.title])
     ])
   });
+  return rects
+}
+
+function genLabels (_this, arr, labels, h) {
+  var ref = _this.labelProps;
+  var maxX = ref.maxX;
+  var maxY = ref.maxY;
+  var labelRotate = ref.labelRotate;
+  var labelSize = ref.labelSize;
+  var labelColor = ref.labelColor;
+  var totalWidth = (maxX) / (arr.length - 1);
+  if (!_this.barWidth) {
+    _this.barWidth = totalWidth - (_this.padding || 5);
+  }
+  if (!_this.rounding) {
+    _this.rounding = 2;
+  }
+
+  var offsetX = (totalWidth - _this.barWidth) / 2;
   var translateOffsetX = labelRotate >= 0 ? 10 : -10;
   var xaxis = h(
     'g',
@@ -160,6 +173,7 @@ function genBars (_this, arr, h) {
     },
     arr.map(function (item, index) {
       var labelOffsetX = labelRotate < 0 ? item.x + offsetX : item.x - offsetX;
+      var title = labels[index];
       return h(
         'g',
         {
@@ -174,33 +188,38 @@ function genBars (_this, arr, h) {
             {
               attrs: {
                 class: 'v-bars--label-text',
-                style: ("text-anchor:middle; fill:" + labelColor + "; font-size: " + labelSize + "em;"),
-                title: item.title
+                style: ("text-anchor:middle; fill:" + labelColor + "; font-size:" + labelSize + "em;"),
+                title: title
               }
             },
             [
-              item.label
+              title
             ]
           )
         ]
       )
     })
   );
-  return rects.concat(xaxis);
+  return xaxis
 }
 
 var Path = {
-  props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min'],
+  props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
 
   render: function render (h) {
     var ref = this;
     var data = ref.data;
     var boundary = ref.boundary;
     var max = ref.max;
     var min = ref.min;
-    var points = genPoints(data, boundary, { max: max, min: min });
+    var labelData = ref.labelData;
+    var points = genPoints(data, boundary, { max: max, min: min }, labelData.length);
+    var labels = genLabels(this, points, labelData, h);
     var bars = genBars(this, points, h);
 
+    if (labels.children.length) {
+      bars = bars.concat(labels);
+    }
     return h(
       'g',
       {
@@ -245,9 +264,13 @@ var Bars = {
       type: Number,
       default: 3
     },
+    labelData: {
+      type: Array,
+      default: function () { return []; }
+    },
     labelRotate: {
       type: Number,
-      default: 0
+      default: -45
     },
     labelSize: {
       type: Number,
@@ -278,15 +301,23 @@ var Bars = {
       minY: padding,
       maxX: viewWidth - padding,
       maxY: viewHeight - padding,
-      minBarHeight: this.minBarHeight,
+      minBarHeight: this.minBarHeight
+    };
+    var labelProps = {
+      minX: padding,
+      minY: padding,
+      maxX: viewWidth - padding,
+      maxY: viewHeight - padding,
+      labelData: this.labelData,
       labelRotate: this.labelRotate,
-      labelColor: this.labelColor,
-      labelSize: this.labelSize
+      labelSize: this.labelSize,
+      labelColor: this.labelColor
     };
     var props = this.$props;
 
     props.boundary = boundary;
     props.id = 'vue-bars-' + this._uid;
+    props.labelProps = labelProps;
 
     return h('svg', {
       attrs: {

diff --git a/dist/vue-bars.esm.js b/dist/vue-bars.esm.js
@@ -50,18 +50,18 @@ function generateGradientStepsCss (from, to, count) {
 
 /**
  *  Calculate the coordinate
- * @param  {number[]|object[]}  arr
- * @param  {object}             boundary
+ * @param {number[]|object[]} inArr
+ * @param {object} boundary
+ * @param {object} props
+ * @param {boolean} hasLabels
  * @return {object[]}
  */
-function genPoints (inArr, ref, ref$1) {
+function genPoints (inArr, ref, ref$1, hasLabels) {
   var minX = ref.minX;
   var minY = ref.minY;
   var maxX = ref.maxX;
   var maxY = ref.maxY;
   var minBarHeight = ref.minBarHeight;
-  var labelRotate = ref.labelRotate;
-  var labelSize = ref.labelSize;
   var max = ref$1.max;
   var min = ref$1.min;
 
@@ -71,7 +71,7 @@ function genPoints (inArr, ref, ref$1) {
   var absMaxVal = Math.abs(maxValue);
   var absMinVal = Math.abs(minValue);
   var gridX = (maxX - minX) / (arr.length - 1);
-  var labelHeight = 20;
+  var labelHeight = hasLabels ? 20 : 0;
 
   var delta = 0;
   if (minValue < 0 && maxValue < 0) {
@@ -87,15 +87,13 @@ function genPoints (inArr, ref, ref$1) {
   var zeroLine = minValue < 0 ? absMinVal : 0;
 
   return arr.map(function (value, index) {
-    var label = typeof inArr[index].title !== 'undefined' ? inArr[index].title : '';
-    var title = typeof inArr[index].value === 'number' ? inArr[index].value : inArr[index];
+    var title = typeof inArr[index] === 'number' ? inArr[index] : inArr[index].title;
     var height = Math.abs(value);
     var barHeight = (height * heightMultiplier - yAdjust > minBarHeight ? height * heightMultiplier - yAdjust : minBarHeight);
     return {
       x: index * gridX + minX,
       y: maxY - barHeight - (value >= 0 || value === 0 && minValue >= 0 ? zeroLine * heightMultiplier : zeroLine * heightMultiplier - barHeight) - labelHeight - yAdjust,
       height: barHeight,
-      label: label,
       title: title
     }
   })
@@ -104,10 +102,6 @@ function genPoints (inArr, ref, ref$1) {
 function genBars (_this, arr, h) {
   var ref = _this.boundary;
   var maxX = ref.maxX;
-  var maxY = ref.maxY;
-  var labelRotate = ref.labelRotate;
-  var labelColor = ref.labelColor;
-  var labelSize = ref.labelSize;
   var totalWidth = (maxX) / (arr.length - 1);
   if (!_this.barWidth) {
     _this.barWidth = totalWidth - (_this.padding || 5);
@@ -147,6 +141,25 @@ function genBars (_this, arr, h) {
       h('title', {}, [item.title])
     ])
   });
+  return rects
+}
+
+function genLabels (_this, arr, labels, h) {
+  var ref = _this.labelProps;
+  var maxX = ref.maxX;
+  var maxY = ref.maxY;
+  var labelRotate = ref.labelRotate;
+  var labelSize = ref.labelSize;
+  var labelColor = ref.labelColor;
+  var totalWidth = (maxX) / (arr.length - 1);
+  if (!_this.barWidth) {
+    _this.barWidth = totalWidth - (_this.padding || 5);
+  }
+  if (!_this.rounding) {
+    _this.rounding = 2;
+  }
+
+  var offsetX = (totalWidth - _this.barWidth) / 2;
   var translateOffsetX = labelRotate >= 0 ? 10 : -10;
   var xaxis = h(
     'g',
@@ -158,6 +171,7 @@ function genBars (_this, arr, h) {
     },
     arr.map(function (item, index) {
       var labelOffsetX = labelRotate < 0 ? item.x + offsetX : item.x - offsetX;
+      var title = labels[index];
       return h(
         'g',
         {
@@ -173,32 +187,37 @@ function genBars (_this, arr, h) {
               attrs: {
                 class: 'v-bars--label-text',
                 style: ("text-anchor:middle; fill:" + labelColor + "; font-size:" + labelSize + "em;"),
-                title: item.title
+                title: title
               }
             },
             [
-              item.label
+              title
             ]
           )
         ]
       )
     })
   );
-  return rects.concat(xaxis);
+  return xaxis
 }
 
 var Path = {
-  props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min'],
+  props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
 
   render: function render (h) {
     var ref = this;
     var data = ref.data;
     var boundary = ref.boundary;
     var max = ref.max;
     var min = ref.min;
-    var points = genPoints(data, boundary, { max: max, min: min });
+    var labelData = ref.labelData;
+    var points = genPoints(data, boundary, { max: max, min: min }, labelData.length);
+    var labels = genLabels(this, points, labelData, h);
     var bars = genBars(this, points, h);
 
+    if (labels.children.length) {
+      bars = bars.concat(labels);
+    }
     return h(
       'g',
       {
@@ -243,18 +262,22 @@ var Bars = {
       type: Number,
       default: 3
     },
+    labelData: {
+      type: Array,
+      default: function () { return []; }
+    },
     labelRotate: {
       type: Number,
       default: -45
     },
-    labelColor: {
-      type: String,
-      default: '#999999'
-    },
     labelSize: {
       type: Number,
       default: 0.7
     },
+    labelColor: {
+      type: String,
+      default: '#999999'
+    },
     height: Number,
     width: Number,
     padding: {
@@ -276,15 +299,23 @@ var Bars = {
       minY: padding,
       maxX: viewWidth - padding,
       maxY: viewHeight - padding,
-      minBarHeight: this.minBarHeight,
+      minBarHeight: this.minBarHeight
+    };
+    var labelProps = {
+      minX: padding,
+      minY: padding,
+      maxX: viewWidth - padding,
+      maxY: viewHeight - padding,
+      labelData: this.labelData,
       labelRotate: this.labelRotate,
-      labelColor: this.labelColor,
-      labelSize: this.labelSize
+      labelSize: this.labelSize,
+      labelColor: this.labelColor
     };
     var props = this.$props;
 
     props.boundary = boundary;
     props.id = 'vue-bars-' + this._uid;
+    props.labelProps = labelProps;
 
     return h('svg', {
       attrs: {