feat: add option to toggle value labels on bar charts

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}

src/components/react_canvas/utils/rendering_props_utils.test.ts

@@ -3,10 +3,12 @@ import {
   buildAreaPointProps,
   buildAreaProps,
   buildBarProps,
+  buildBarValueProps,
   buildLinePointProps,
   buildLineProps,
   buildPointStyleProps,
 } from './rendering_props_utils';
+import { Rotation } from '../../../lib/series/specs';
 
 describe('[canvas] Area Geometries props', () => {
   test('can build area point props', () => {
@@ -392,4 +394,74 @@ describe('[canvas] Bar Geometries', () => {
       opacity: 0.5,
     });
   });
+
+  // TODO: fix these tests
+  test.skip('can build bar value props', () => {
+    const valueArguments = {
+      x: 10,
+      y: 20,
+      barWidth: 30,
+      barHeight: 40,
+      displayValueStyle: {
+        fill: 'fill',
+        fontFamily: 'ff',
+        fontSize: 10,
+        padding: 5,
+        offsetX: 0,
+        offsetY: 0,
+      },
+      displayValue: {
+        text: 'foo',
+        width: 10,
+        height: 10,
+      },
+      chartDimensions: {
+        width: 10,
+        height: 10,
+        top: 0,
+        left: 0,
+      },
+      chartRotation: 0 as Rotation,
+    };
+
+    const basicProps = buildBarValueProps(valueArguments);
+    expect(basicProps).toEqual({
+      x: 10,
+      y: 20,
+      width: 30,
+      align: 'center',
+      fill: 'fill',
+      fontFamily: 'ff',
+      fontSize: 10,
+      padding: 5,
+    });
+
+    valueArguments.barHeight = 2;
+    const insufficientHeightBarProps = buildBarValueProps(valueArguments);
+    expect(insufficientHeightBarProps).toEqual({
+      x: 10,
+      y: 5,
+      width: 30,
+      align: 'center',
+      fill: 'fill',
+      fontFamily: 'ff',
+      fontSize: 10,
+      padding: 5,
+    });
+
+    valueArguments.y = 4;
+    valueArguments.barHeight = 20;
+    valueArguments.displayValueStyle.padding = -5;
+    const chartOverflowBarProps = buildBarValueProps(valueArguments);
+    expect(chartOverflowBarProps).toEqual({
+      x: 10,
+      y: 4,
+      width: 30,
+      align: 'center',
+      fill: 'fill',
+      fontFamily: 'ff',
+      fontSize: 10,
+      padding: 5,
+    });
+  });
 });

src/components/react_canvas/utils/rendering_props_utils.ts

@@ -1,5 +1,7 @@
 import { GeometryStyle } from '../../../lib/series/rendering';
-import { AreaStyle, LineStyle, PointStyle } from '../../../lib/themes/theme';
+import { Rotation } from '../../../lib/series/specs';
+import { AreaStyle, DisplayValueStyle, LineStyle, PointStyle } from '../../../lib/themes/theme';
+import { Dimensions } from '../../../lib/utils/dimensions';
 import { GlobalKonvaElementProps } from '../globals';
 
 export interface PointStyleProps {
@@ -153,6 +155,129 @@ export function buildBarProps({
   };
 }
 
+export function buildBarValueProps({
+  x,
+  y,
+  barHeight,
+  barWidth,
+  displayValueStyle,
+  displayValue,
+  chartRotation,
+  chartDimensions,
+}: {
+  x: number;
+  y: number;
+  barHeight: number;
+  barWidth: number;
+  displayValueStyle: DisplayValueStyle;
+  displayValue: {
+    text: string;
+    width: number;
+    height: number;
+    hideClippedValue?: boolean;
+    isValueContainedInElement?: boolean;
+  };
+  chartRotation: Rotation;
+  chartDimensions: Dimensions;
+}): DisplayValueStyle & {
+  x: number;
+  y: number;
+  align: string;
+  text: string;
+  width: number;
+  height: number;
+} {
+  const chartHeight = chartDimensions.height;
+  const chartWidth = chartDimensions.width;
+  const { padding } = displayValueStyle;
+  const elementHeight = displayValue.isValueContainedInElement ? barHeight : displayValue.height;
+
+  const displayValueHeight = elementHeight + padding;
+  const displayValueWidth = displayValue.width + padding;
+
+  const displayValueY = barHeight >= displayValueHeight ? y : y - displayValueHeight;
+  const displayValueX = displayValueWidth > barWidth ?
+    x - Math.abs(barWidth - displayValueWidth) / 2
+    : x + Math.abs(barWidth - displayValueWidth) / 2;
+
+  const rotatedDisplayValueX = displayValueHeight > barWidth ?
+    x - Math.abs(barWidth - displayValueHeight) / 2
+    : x + Math.abs(barWidth - displayValueHeight) / 2;
+
+  const displayValueOffsetY = displayValueStyle.offsetY || 0;
+  const displayValueOffsetX = displayValueStyle.offsetX || 0;
+
+  const props = {
+    align: 'center',
+    verticalAlign: 'top',
+    ...displayValueStyle,
+    text: displayValue.text,
+    width: displayValueWidth,
+    height: displayValueHeight,
+    offsetY: displayValueOffsetY,
+    x: displayValueX,
+    y: displayValueY,
+  };
+
+  switch (chartRotation) {
+    case 0:
+      props.x = displayValueX;
+      props.y = displayValueY;
+      break;
+    case 180:
+      props.x = chartWidth - displayValueX - displayValueWidth;
+      props.y = chartHeight - displayValueY - displayValueHeight;
+      props.verticalAlign = 'bottom';
+      break;
+    case 90:
+      props.x = (barHeight >= displayValueWidth) ?
+        chartWidth - displayValueY - displayValueWidth
+        : chartWidth - displayValueY;
+      props.y = rotatedDisplayValueX;
+      props.verticalAlign = 'middle';
+
+      if (displayValue.isValueContainedInElement) {
+        props.x = chartWidth - y - barHeight;
+        props.y = x;
+        props.width = barHeight >= displayValueWidth ? barHeight : 0;
+        props.height = displayValue.height <= barWidth ? barWidth : 0;
+        props.align = 'right';
+      }
+      break;
+    case -90:
+      props.x = (barHeight >= displayValueWidth) ? displayValueY : displayValueY - displayValueWidth;
+      props.y = chartHeight - rotatedDisplayValueX - displayValueHeight;
+      props.verticalAlign = 'middle';
+
+      if (displayValue.isValueContainedInElement) {
+        props.x = y;
+        props.y = chartHeight - x - barWidth;
+        props.width = barHeight >= displayValueWidth ? barHeight : 0;
+        props.height = displayValue.height <= barWidth ? barWidth : 0;
+        props.align = 'left';
+      }
+      break;
+  }
+
+  const clipHeight = displayValue.isValueContainedInElement ? displayValue.height : props.height;
+  const clipWidth = displayValue.isValueContainedInElement ? displayValue.width : props.width;
+
+  const clipOffsetY = chartRotation === 180 ? barHeight - displayValue.height : 0;
+  const clipOffsetX = chartRotation === 90 ? barHeight - displayValue.width : 0;
+
+  const isOverflowX = props.x + clipWidth - displayValueOffsetX > chartWidth
+    || props.x + clipOffsetX - displayValueOffsetX < 0;
+  const isOverflowY = props.y + clipHeight - displayValueOffsetY > chartHeight
+    || props.y + clipOffsetY - displayValueOffsetY < 0;
+
+  if (displayValue.hideClippedValue && (isOverflowX || isOverflowY)) {
+    props.width = 0;
+    props.height = 0;
+  }
+
+  return props;
+}
+
 export function buildLinePointProps({
   lineIndex,
   pointIndex,