quickfix: added bar highlight feature

devinit · Aug 23, 2017 · 36de99c · 36de99c
1 parent 466648a
commit 36de99c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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);