From 36de99c84040e4ac690766520fbbea112ba91dbf Mon Sep 17 00:00:00 2001
From: Ernest Okot <okot08@gmail.com>
Date: Wed, 23 Aug 2017 18:18:43 +0300
Subject: [PATCH] quickfix: added bar highlight feature

---
 index.html                      |  3 ++-
 src/factories/createBarChart.js | 29 +++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 03753449..2b77f93d 100644
--- a/index.html
+++ b/index.html
@@ -463,7 +463,8 @@ <h2>Devinit Charts</h2>
           },
           interactions: {
             enable: true,
-          }
+          },
+          highlight: ['Jan']
         },
         data: [
           {"Rainfall": 100, "Months": "Jan", color: 'red1'},
diff --git a/src/factories/createBarChart.js b/src/factories/createBarChart.js
index 52c532ac..9bfc3c0d 100644
--- a/src/factories/createBarChart.js
+++ b/src/factories/createBarChart.js
@@ -8,13 +8,17 @@ export default (element, plot, config) => {
   const chart = createLinearChart({element, plot, config});
 
   if (interactions.enable) {
-    plot.onAnchor(createBarInteraction(config.orientation, config.labeling));
+    plot.onAnchor(plot => {
+      setTimeout(() => {
+        createBarInteraction(config.orientation, config.labeling, config.highlight)(plot)
+      }, 500)
+    });
   }
 
   return chart;
 }
 
-const createBarInteraction = (orientation = 'vertical', labeling = {}) => {
+const createBarInteraction = (orientation = 'vertical', labeling = {}, highlight = []) => {
 
   const {
     prefix = '',
@@ -37,6 +41,26 @@ const createBarInteraction = (orientation = 'vertical', labeling = {}) => {
   };
 
   return plot => {
+    // QUICKFIX: Highlight some bars in a bar chart
+    if (highlight.length) {
+      plot.entities()
+        .filter(entity => highlight.indexOf(entity.datum.label) > -1)
+        .forEach(entity => {
+          const { x, y, width, height } = entity.selection.node().getBBox();
+
+          plot
+            .background()
+            .append('text')
+            .attr('class', 'plot-label hover-label')
+            .attr('x', orientation === 'vertical' ? x + ( width / 2 ) : width + x + 5)
+            .attr('y', orientation === 'horizontal' ? y + ( height / 2 ) : y - 10)
+            .attr('text-anchor', orientation === 'vertical' ? 'middle' : 'start')
+            .attr('style', `fill: ${entity.selection.attr("fill")}`)
+            .text(`${prefix}${approximate(entity.datum.value)}${suffix}`);
+        })
+    }
+
+
     const interaction = new Plottable.Interactions.Pointer()
       .onPointerExit(() => {
         reset(plot);
@@ -59,6 +83,7 @@ const createBarInteraction = (orientation = 'vertical', labeling = {}) => {
             .attr('x', orientation === 'vertical' ? x + ( width / 2 ) : width + x + 5)
             .attr('y', orientation === 'horizontal' ? y + ( height / 2 ) : y - 10)
             .attr('text-anchor', orientation === 'vertical' ? 'middle' : 'start')
+            .attr('style', `fill: ${entity.selection.attr("fill")}`)
             .text(`${prefix}${approximate(entity.datum.value)}${suffix}`);
 
           const fill = color(entity.selection.attr('initial-fill')).darker(0.7);