simple-billboard

Simple Billboard

This simple billboard is used to replace the standard New Relic <Billboard> component for greater control over the way it's displayed. You can use <SimpleBillboard> to show KPI's in any container.

Usage

Here is the import statement to load this component from "@newrelic/nr-labs-components" library:

    import { SimpleBillboard } from "@newrelic/nr-labs-components"

and the code snippet to use the component:

    <SimpleBillboard
      metric={{
        value: 1373,
      }}
      title={{
        name: 'Unique Sessions',
      }}
    />

Props

"SimpleBillboard" accepts a shape property as input:

    SimpleBillboard.propTypes = {
      metric: PropTypes.shape({
        value: PropTypes.number,            // required - metric value
        previousValue: PropTypes.number,    // optional - value for a different time window for comparison
        prefix: PropTypes.string,           // optional - metric prefix (i.e. '$')
        suffix: PropTypes.string,           // optional - metric suffix
        className: PropTypes.string,        // optional - SCSS class name - gets appended to existing JSX classes for displaying the metric value
        compareClassName: PropTypes.string, // optional - SCSS class name - gets appended to existing JSX classes for displaying the metric compare with percent difference
        style: PropTypes.object,            // optional - SCSS style - gets added to JSX for metric value
      }),
      statusTrend: PropTypes.shape({
        className: PropTypes.string,        // optional - SCSS class name for trend icon
        style: PropTypes.object,            // optional - SCSS style for trend icon
      }),
      title: PropTypes.shape({
        name: PropTypes.string,             // required - metric name
        style: PropTypes.object,            // optional - SCSS class name for metric name
        className: PropTypes.string,        // optional - SCSS style for metric name
        toolTip: PropTypes.bool             // optional - enable tool tip for metric name (default: false)
      }),
    };

Required attributes:

    metric.value
    title.name

• At a minimum SimpleBillboard component requires the metric name and a single value to show on the billboard.
• If you also pass a previousValue attribute to SimpleBillboard, it compares the 2 values and shows an up/down trend, as well as the percent difference between the two values.

Examples

Here is an example of how to invoke the billboard component. At minimum, you only need to provide the required attributes of metric property (metric.name & matric.value).

...
import { SimpleBillboard } from "@newrelic/nr-labs-components"
...

const Nerdlet = (props) => {
  ...


  return (
    <>
      ...
      <SimpleBillboard
        metric={{ value: props.metric.value }}
        title={{ name: props.title.name }}
      />
      ...
    </>
  )
}

Here is another example which uses all required and optional properties.

...
import { SimpleBillboard } from "@newrelic/nr-labs-components"
...

const Nerdlet = (props) => {
  ...


  return (
    <>
      ...
      <SimpleBillboard
        metric={{
          value: props.metric.value,
          previousValue: props.metric.previousValue,
          prefix: props.metric.prefix,
          suffix: props.metric.suffix,
          className: props.metric.className,
          compareClassName: props.metric.compareClassName,
          style: {color: props.metric.value > props.metric.previousValue ? 'blue' : 'red'},
        }}
        statusTred={{
          className: props.statusTrend.className,
          style: {fill: props.metric.value > props.metric.previousValue ? 'blue' : 'red'},
        }}
        title={{
          name: props.title.name,
          className: props.title.className,
          style={{ color: props.metric.value > props.metric.previousValue ? 'darkgreen' : 'red' }},
        }}
      />
      ...
    </>
  )
}