feat: add option to toggle value labels on bar charts

src/components/react_canvas/bar_geometries.tsx

@@ -1,11 +1,11 @@
 import { Group as KonvaGroup } from 'konva';
 import React from 'react';
-import { Group, Rect } from 'react-konva';
+import { Group, Rect, Text } from 'react-konva';
 import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../lib/series/legend';
 import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
 import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
-import { buildBarProps } from './utils/rendering_props_utils';
+import { buildBarProps, buildBarValueProps } from './utils/rendering_props_utils';
 
 interface BarGeometriesDataProps {
   animated?: boolean;
@@ -48,7 +48,7 @@ export class BarGeometries extends React.PureComponent<
       sharedStyle,
     } = this.props;
     return bars.map((bar, index) => {
-      const { x, y, width, height, color, seriesStyle } = bar;
+      const { displayValue, x, y, width, height, color, seriesStyle } = bar;
       const border = seriesStyle ? seriesStyle.border : style.border;
       const customOpacity = seriesStyle ? seriesStyle.opacity : undefined;
 
@@ -70,6 +70,15 @@ export class BarGeometries extends React.PureComponent<
 
       // min border depending on bar width bars with white border
       const borderEnabled = border.visible && width > border.strokeWidth * 7;
+
+      const displayValueProps = buildBarValueProps({
+        x,
+        y,
+        width,
+        height,
+        displayValueStyle: style.displayValue!, // displayValue is guaranteed on style as part of the merged theme
+      });
+
       if (this.props.animated) {
         return (
           <Group key={index}>
@@ -91,6 +100,7 @@ export class BarGeometries extends React.PureComponent<
                 return <animated.Rect {...barProps} />;
               }}
             </Spring>
+            {displayValue && <Text text={displayValue} {...displayValueProps} />}
           </Group>
         );
       } else {
@@ -106,7 +116,12 @@ export class BarGeometries extends React.PureComponent<
           borderEnabled,
           geometryStyle,
         });
-        return <Rect {...barProps} />;
+        return (
+          <React.Fragment key={index}>
+            <Rect {...barProps} />
+            {displayValue && <Text text={displayValue} {...displayValueProps} />}
+          </React.Fragment>
+        );
       }
     });
   }

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

@@ -6,6 +6,7 @@ import {
   buildLinePointProps,
   buildLineProps,
   buildPointStyleProps,
+  buildBarValueProps,
 } from './rendering_props_utils';
 
 describe('[canvas] Area Geometries props', () => {
@@ -392,4 +393,59 @@ describe('[canvas] Bar Geometries', () => {
       opacity: 0.5,
     });
   });
+
+  test('can build bar value props', () => {
+    const valueArguments = {
+      x: 10,
+      y: 20,
+      width: 30,
+      height: 40,
+      displayValueStyle: {
+        fill: 'fill',
+        fontFamily: 'ff',
+        fontSize: 10,
+        padding: 5,
+      },
+    };
+
+    const basicProps = buildBarValueProps(valueArguments);
+    expect(basicProps).toEqual({
+      x: 10,
+      y: 20,
+      width: 30,
+      align: 'center',
+      fill: 'fill',
+      fontFamily: 'ff',
+      fontSize: 10,
+      padding: 5,
+    });
+
+    valueArguments.height = 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.height = 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,5 @@
 import { GeometryStyle } from '../../../lib/series/rendering';
-import { AreaStyle, LineStyle, PointStyle } from '../../../lib/themes/theme';
+import { AreaStyle, LineStyle, PointStyle, TextStyle } from '../../../lib/themes/theme';
 import { GlobalKonvaElementProps } from '../globals';
 
 export interface PointStyleProps {
@@ -153,6 +153,43 @@ export function buildBarProps({
   };
 }
 
+export function buildBarValueProps({
+  x,
+  y,
+  width,
+  height,
+  displayValueStyle,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  displayValueStyle: TextStyle;
+}): TextStyle & {
+  x: number;
+  y: number;
+  width: number;
+  align: string;
+} {
+  const { fontSize, padding } = displayValueStyle;
+  const displayValueTextHeight = fontSize + padding;
+  const displayValueY = height >= displayValueTextHeight ? y : y - displayValueTextHeight;
+
+  // if padding is less than 0, then text will appear above bar
+  // this checks if there is enough space above the bar to render the value
+  // if not, render the value within the bar
+  const textPadding = (padding < 0 && y < fontSize) ? -padding : padding;
+
+  return {
+    x,
+    y: displayValueY,
+    width,
+    align: 'center',
+    ...displayValueStyle,
+    padding: textPadding,
+  };
+}
+
 export function buildLinePointProps({
   lineIndex,
   pointIndex,

src/lib/series/rendering.bars.test.ts

@@ -1,9 +1,11 @@
 import { computeSeriesDomains } from '../../state/utils';
+import { identity } from '../utils/commons';
 import { getGroupId, getSpecId } from '../utils/ids';
 import { ScaleType } from '../utils/scales/scales';
 import { renderBars } from './rendering';
 import { computeXScale, computeYScales } from './scales';
 import { BarSeriesSpec } from './specs';
+
 const SPEC_ID = getSpecId('spec_1');
 const GROUP_ID = getGroupId('group_1');
 
@@ -14,19 +16,114 @@ describe('Rendering bars', () => {
       groupId: GROUP_ID,
       seriesType: 'bar',
       yScaleToDataExtent: false,
-      data: [[0, 10], [1, 5]],
+      data: [[-200, 0], [0, 10], [1, 5]], // first datum should be skipped as it's out of domain
       xAccessor: 0,
       yAccessors: [1],
       xScaleType: ScaleType.Ordinal,
       yScaleType: ScaleType.Linear,
     };
     const barSeriesMap = new Map();
     barSeriesMap.set(SPEC_ID, barSeriesSpec);
-    const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map());
+    const customDomain = [0, 1];
+    const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), customDomain);
     const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100);
     const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0);
 
-    test('Can render two bars', () => {
+    test('Can render two bars within domain', () => {
+      const { barGeometries } = renderBars(
+        0,
+        barSeriesDomains.formattedDataSeries.nonStacked[0].dataSeries[0].data,
+        xScale,
+        yScales.get(GROUP_ID)!,
+        'red',
+        SPEC_ID,
+        [],
+      );
+
+      expect(barGeometries[0]).toEqual({
+        x: 0,
+        y: 0,
+        width: 50,
+        height: 100,
+        color: 'red',
+        value: {
+          accessor: 'y1',
+          x: 0,
+          y: 10,
+        },
+        geometryId: {
+          specId: SPEC_ID,
+          seriesKey: [],
+        },
+      });
+      expect(barGeometries[1]).toEqual({
+        x: 50,
+        y: 50,
+        width: 50,
+        height: 50,
+        color: 'red',
+        value: {
+          accessor: 'y1',
+          x: 1,
+          y: 5,
+        },
+        geometryId: {
+          specId: SPEC_ID,
+          seriesKey: [],
+        },
+      });
+      expect(barGeometries.length).toBe(2);
+    });
+    test('Can render bars with value labels', () => {
+      const valueFormatter = identity;
+      const { barGeometries } = renderBars(
+        0,
+        barSeriesDomains.formattedDataSeries.nonStacked[0].dataSeries[0].data,
+        xScale,
+        yScales.get(GROUP_ID)!,
+        'red',
+        SPEC_ID,
+        [],
+        valueFormatter,
+      );
+
+      expect(barGeometries[0]).toEqual({
+        x: 0,
+        y: 0,
+        width: 50,
+        height: 100,
+        color: 'red',
+        value: {
+          accessor: 'y1',
+          x: 0,
+          y: 10,
+        },
+        geometryId: {
+          specId: SPEC_ID,
+          seriesKey: [],
+        },
+        displayValue: 10,
+      });
+      expect(barGeometries[1]).toEqual({
+        x: 50,
+        y: 50,
+        width: 50,
+        height: 50,
+        color: 'red',
+        value: {
+          accessor: 'y1',
+          x: 1,
+          y: 5,
+        },
+        geometryId: {
+          specId: SPEC_ID,
+          seriesKey: [],
+        },
+        displayValue: 5,
+      });
+    });
+    test('Can render bars with alternating value labels', () => {
+      const valueFormatter = identity;
       const { barGeometries } = renderBars(
         0,
         barSeriesDomains.formattedDataSeries.nonStacked[0].dataSeries[0].data,
@@ -35,6 +132,8 @@ describe('Rendering bars', () => {
         'red',
         SPEC_ID,
         [],
+        valueFormatter,
+        true,
       );
       expect(barGeometries[0]).toEqual({
         x: 0,
@@ -51,6 +150,7 @@ describe('Rendering bars', () => {
           specId: SPEC_ID,
           seriesKey: [],
         },
+        displayValue: 10,
       });
       expect(barGeometries[1]).toEqual({
         x: 50,

src/lib/series/rendering.ts

@@ -16,6 +16,7 @@ import { CurveType, getCurveFactory } from './curves';
 import { LegendItem } from './legend';
 import { DataSeriesDatum } from './series';
 import { belongsToDataSeries } from './series_utils';
+import { TickFormatter } from './specs';
 
 export interface GeometryId {
   specId: SpecId;
@@ -53,6 +54,7 @@ export interface BarGeometry {
   width: number;
   height: number;
   color: string;
+  displayValue?: any;
   geometryId: GeometryId;
   value: GeometryValue;
   seriesStyle?: CustomBarSeriesStyle;
@@ -173,6 +175,8 @@ export function renderBars(
   color: string,
   specId: SpecId,
   seriesKey: any[],
+  valueFormatter?: TickFormatter,
+  alternatingValueLabel?: boolean,
   seriesStyle?: CustomBarSeriesStyle,
 ): {
   barGeometries: BarGeometry[];
@@ -210,7 +214,16 @@ export function renderBars(
     }
     const x = xScale.scale(datum.x) + xScale.bandwidth * orderIndex;
     const width = xScale.bandwidth;
+
+    const formattedDisplayValue = valueFormatter ? valueFormatter(initialY1) : undefined;
+
+    // only show displayValue for even bars if showOverlappingValue is false
+    const displayValue = alternatingValueLabel ?
+      (barGeometries.length % 2 === 0 ? formattedDisplayValue : undefined)
+      : formattedDisplayValue;
+
     const barGeometry: BarGeometry = {
+      displayValue,
       x,
       y, // top most value
       width,

src/lib/series/specs.ts

@@ -51,6 +51,10 @@ export interface SeriesSpec {
   hideInLegend?: boolean;
   /** Index per series to sort by */
   sortIndex?: number;
+  /** Show value label in chart element */
+  showValueLabel?: boolean;
+  /** If value labels are shown, skips every other label */
+  alternatingValueLabel?: boolean;
 }
 
 export type CustomSeriesColorsMap = Map<DataSeriesColorsValues, string>;

src/lib/themes/dark_theme.ts

@@ -60,6 +60,13 @@ export const DARK_THEME: Theme = {
       strokeWidth: 2,
       visible: false,
     },
+    displayValue: {
+      fontSize: 10,
+      fontStyle: 'normal',
+      fontFamily: `'Open Sans', Helvetica, Arial, sans-serif`,
+      padding: 5,
+      fill: 'white',
+    },
   },
   sharedStyle: DEFAULT_GEOMETRY_STYLES,
   scales: {