feat: add option to toggle value labels on bar charts (#182)

src/components/react_canvas/bar_geometries.tsx

@@ -20,7 +20,7 @@ interface BarGeometriesDataState {
 export class BarGeometries extends React.PureComponent<
   BarGeometriesDataProps,
   BarGeometriesDataState
-> {
+  > {
   static defaultProps: Partial<BarGeometriesDataProps> = {
     animated: false,
   };
@@ -101,7 +101,11 @@ export class BarGeometries extends React.PureComponent<
           borderEnabled: border.visible,
           geometryStyle,
         });
-        return <Rect {...barProps} />;
+        return (
+          <React.Fragment key={index}>
+            <Rect {...barProps} />
+          </React.Fragment>
+        );
       }
     });
   }

src/components/react_canvas/bar_values.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Group, Rect, Text } from 'react-konva';
+import { BarGeometry } from '../../lib/series/rendering';
+import { Rotation } from '../../lib/series/specs';
+import { DisplayValueStyle } from '../../lib/themes/theme';
+import { Dimensions } from '../../lib/utils/dimensions';
+import { buildBarValueProps } from './utils/rendering_props_utils';
+
+interface BarValuesProps {
+  chartDimensions: Dimensions;
+  chartRotation: Rotation;
+  debug: boolean;
+  bars: BarGeometry[];
+  displayValueStyle: DisplayValueStyle;
+}
+
+export class BarValues extends React.PureComponent<BarValuesProps> {
+  render() {
+    const { chartDimensions } = this.props;
+
+    return (
+      <Group x={chartDimensions.left} y={chartDimensions.top}>
+        {this.renderBarValues()}
+      </Group>
+    );
+  }
+
+  private renderBarValues = () => {
+    const { bars, displayValueStyle, debug, chartRotation, chartDimensions } = this.props;
+    return bars.map((bar, index) => {
+      const { displayValue, x, y, height, width } = bar;
+      if (!displayValue) {
+        return;
+      }
+
+      const key = `bar-value-${index}`;
+      const displayValueProps = buildBarValueProps({
+        x,
+        y,
+        barHeight: height,
+        barWidth: width,
+        displayValueStyle,
+        displayValue,
+        chartRotation,
+        chartDimensions,
+      });
+
+      const debugProps = {
+        ...displayValueProps,
+        stroke: 'violet',
+        strokeWidth: 1,
+        fill: 'transparent',
+      };
+
+      return (
+        <Group key={key}>
+          {debug && <Rect {...debugProps} />}
+          {displayValue && <Text {...displayValueProps} />}
+        </Group>
+      );
+    });
+  }
+}

src/components/react_canvas/reactive_chart.tsx

@@ -10,6 +10,7 @@ import { Annotation } from './annotation';
 import { AreaGeometries } from './area_geometries';
 import { Axis } from './axis';
 import { BarGeometries } from './bar_geometries';
+import { BarValues } from './bar_values';
 import { Grid } from './grid';
 import { LineGeometries } from './line_geometries';
 
@@ -198,6 +199,22 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     return annotationComponents;
   }
 
+  renderBarValues = () => {
+    const { debug, chartDimensions, geometries, chartTheme, chartRotation } = this.props.chartStore!;
+    if (!geometries) {
+      return;
+    }
+    const props = {
+      debug,
+      chartDimensions,
+      chartRotation,
+      bars: geometries.bars,
+      // displayValue is guaranteed on style as part of the merged theme
+      displayValueStyle: chartTheme.barSeriesStyle.displayValue!,
+    };
+    return <BarValues {...props} />;
+  }
+
   renderBrushTool = () => {
     const { brushing, brushStart, brushEnd } = this.state;
     const { chartDimensions, chartRotation, chartTransform } = this.props.chartStore!;
@@ -360,19 +377,23 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
           <Layer hitGraphEnabled={false} listening={false}>
             {this.renderAnnotations()}
           </Layer>
+
+          <Layer hitGraphEnabled={false} listening={false} {...layerClippings}>
+            {this.renderBarValues()}
+          </Layer>
         </Stage>
       </div>
     );
   }
 
   private renderDebugChartBorders = () => {
-    const { chartDimensions, chartRotation, chartTransform } = this.props.chartStore!;
+    const { chartDimensions } = this.props.chartStore!;
     return (
       <Rect
-        x={chartDimensions.left + chartTransform.x}
-        y={chartDimensions.top + chartTransform.y}
-        width={[90, -90].includes(chartRotation) ? chartDimensions.height : chartDimensions.width}
-        height={[90, -90].includes(chartRotation) ? chartDimensions.width : chartDimensions.height}
+        x={chartDimensions.left}
+        y={chartDimensions.top}
+        width={chartDimensions.width}
+        height={chartDimensions.height}
         stroke="red"
         strokeWidth={4}
         listening={false}