Add barColor prop to BarPlot component

keller-mark · Jan 7, 2019 · 60863b9 · 60863b9
1 parent 17892d2
commit 60863b9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/examples-src/App.vue b/examples-src/App.vue
@@ -159,6 +159,7 @@
         data="exposures_error_single_data"
         x="signature" 
         y="exposure_error"
+        barColor="gray"
         :getData="getData"
         :getScale="getScale"
         :clickHandler="exampleClickHandler"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-declarative-plots",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open ./examples-src/index.js",

diff --git a/src/components/plots/BarPlot.vue b/src/components/plots/BarPlot.vue
@@ -71,6 +71,7 @@ let uuid = 0;
  * @prop {string} x The x-scale variable key.
  * @prop {string} y The y-scale variable key.
  * @prop {number} barMarginX The value for the horizontal margin between bars. Default: 2
+ * @prop {string} barColor A color for all bars. Optional. If provided, overrides using the x scale for colors.
  * @extends mixin
  * 
  * @example
@@ -99,6 +100,9 @@ export default {
         'y': {
             type: String
         },
+        'barColor': {
+            type: String
+        },
         'barMarginX': {
             type: Number, 
             default: BAR_MARGIN_X_DEFAULT
@@ -277,7 +281,12 @@ export default {
                 const col = genColor();
                 colToNode[col] = { "x": d[vm.x], "y": d[vm.y] };
                 contextHidden.fillStyle = col;
-                context.fillStyle = xScale.color(d[vm.x]);
+                
+                if(vm.barColor !== undefined) {
+                    context.fillStyle = vm.barColor;
+                } else {
+                    context.fillStyle = xScale.color(d[vm.x]);
+                }
 
                 let height = vm.pHeight - y(d[vm.y]) - (vm.pHeight - yOfZero);
                 context.fillRect(x(d[vm.x]) + (barMarginX/2), y(d[vm.y]), barWidth - barMarginX, height);