Docs/CI

Gauges

Gauges are top level visual indicators useful for calling attention to things like preview builds, performance metrics, bundle sizes, and more.

Example

Gauges appear in the top left corner of branches once setup.

Usage

import { Gauge, Icons } from 'pierre';

const gauge = new Gauge('Docs', {
  icon: Icons.Trash,
  color: 'red',
  description: 'How bad is jacob at writing docs?',
});

export default async () => {
  // run some numbers
  gauge.update({
    value: 0.9, // real bad
  });
};

Gauges require an “identifier string” and the following optional interface:

export default class Gauge {
	constructor(name: string, props: GaugeProps = {})
  …
}

export interface GaugeProps {
  // themeable color
  color?: Color;

  // visual icon
  icon?: Icons;

  // number value (between 0-1);
  value?: number;

  // small label shown beneath a gauge
  label?: string;

  // description shown on hover
  description?: string;

  // link to an external asset or preview
  href?: string;
}

Icon and colors come from the Pierre design system. While not open sourced, you can use any color or icon from the system by name. Head to the Pierre Styleguide to find a list of colors and see all available icons.

Joyful code review

Pierre wants you to enjoy your code reviews. So, we built a ~NEW~*~ git platform. Join the waitlist to get early access.

ORRR… Skip the line! Join our Discord for early access
On this page