About Components Okr Objective Result Goal Due Progress Current Score Row Contribution Home

Components

React OKR UI provides a collection of highly compositional components for a wide range of possible OKR UI requirements.

Here's a live example. Adjust values in the Playground area to test how the components work and it's props work.

Objective

Carve out a niche

Due date

Jan 1, 2022

progress

Key Result

Increase product revenue from 20% to 50%

Current

30%

33%

() => {
  // Setup metrics
  const metrics = [
    {
      id: '1',
      name: 'product revenue',
      prefix: '',
      suffix: '%',
      space: false, // Fix
      allowNegative: false,
      decimalScale: 2,
    },
  ]
  // Set grades
  const grades = [
    {
      id: '1',
      name: 'Fail',
      range: [0.0, 0.75],
      color: '#ef4444',
    },
    {
      id: '2',
      name: 'Pass',
      range: [0.75, 2.0],
      color: '#10b981',
    },
  ]
  return (
    <Okr metrics={metrics} grades={grades}>
      <Objective>
        <Row type="flex">
          <Goal label="Objective" text="Carve out a niche" />
          <Due
            label="Due date"
            date="2022/01/01"
            options={{ year: 'numeric', month: 'short', day: 'numeric' }}
          />
        </Row>
        <Progress label="progress" value={0.75} />
        <Result>
          <Row type="flex">
            <Goal
              label="Key Result"
              direction="increase"
              metricId="1"
              start={20}
              end={50}
            />
            <Row type="flex">
              <Current
                className="okr-mr-1"
                label="Current"
                metricId="1"
                value={30}
              />
              <Score
                className="okr-ml-1"
                direction="increase"
                start={20}
                end={50}
                current={30}
                circle
              />
            </Row>
          </Row>
        </Result>
      </Objective>
    </Okr>
  )
}

() => {
  // Setup metrics
  const metrics = [
    {
      id: '1',
      name: 'product revenue',
      prefix: '',
      suffix: '%',
      space: false, // Fix
      allowNegative: false,
      decimalScale: 2,
    },
  ]
  // Set grades
  const grades = [
    {
      id: '1',
      name: 'Fail',
      range: [0.0, 0.75],
      color: '#ef4444',
    },
    {
      id: '2',
      name: 'Pass',
      range: [0.75, 2.0],
      color: '#10b981',
    },
  ]
  return (
    <Okr metrics={metrics} grades={grades}>
      <Objective>
        <Row type="flex">
          <Goal label="Objective" text="Carve out a niche" />
          <Due
            label="Due date"
            date="2022/01/01"
            options={{ year: 'numeric', month: 'short', day: 'numeric' }}
          />
        </Row>
        <Progress label="progress" value={0.75} />
        <Result>
          <Row type="flex">
            <Goal
              label="Key Result"
              direction="increase"
              metricId="1"
              start={20}
              end={50}
            />
            <Row type="flex">
              <Current
                className="okr-mr-1"
                label="Current"
                metricId="1"
                value={30}
              />
              <Score
                className="okr-ml-1"
                direction="increase"
                start={20}
                end={50}
                current={30}
                circle
              />
            </Row>
          </Row>
        </Result>
      </Objective>
    </Okr>
  )
}

Okr

The <Okr> component acts as a general countainer wrapper:

<Okr metrics={metrics} grades={grades}>
    {children}
</Okr>

Properties

Okr has the properties:

metrics: i.e., the things you are measuring as results
grades: i.e., how scores are interpreted e.g., pass or fail

metrics

Array<{ "id": "string", "name": "string", "prefix": "string", "suffix": "string", "space": "Boolean", "allowNegative": "Boolean", "decimalScale": "number" }>

grades

Array<{ "id": "string", "name": "string", "range": "Array<number>", "color": "string" }>

Example metrics and grades

Here is some example configuration:

// Metrics
const metrics = [
    {
        id: "1",
        name: "product revenue",
        prefix: "",
        suffix: "%",
        space: false, // Fix
        allowNegative: false,
        decimalScale: 2,
    },
];
// Grades
const grades = [
    {
        id: "1",
        name: "Fail",
        range: [0.0, 0.75],
        color: "#ef4444",
    },
    {
        id: "2",
        name: "Pass",
        range: [0.75, 2.0],
        color: "#10b981",
    },
];

Objective

The <Objective> component provides a wrapper for each objective:

<Objective className="card">{children}</Objective>

Properties

The component takes a className and passes it on to the component:

className

string

Result

The <Result> component provides a wrapper for each result:

<Result className="card">{children}</Result>

Properties

The component takes a className and passes it on to the component.

className

string

Goal

The <Goal> component displays the goal text, either by processing the result object properties or simply taking objective text.

Objective

Carve out a niche

Key Result

Increase churn from 20% to 50%

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Goal label="Objective" text="Carve out a niche" />
    <Result>
      <Goal
        label="Key Result"
        direction="increase"
        metricId="1"
        start={20}
        end={50}
      />
    </Result>
  </Objective>
</Okr>

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Goal label="Objective" text="Carve out a niche" />
    <Result>
      <Goal
        label="Key Result"
        direction="increase"
        metricId="1"
        start={20}
        end={50}
      />
    </Result>
  </Objective>
</Okr>

Properties

The component takes objective properties to calculate the goal or simply text. It also includes an optional label:

label

string

text

string

direction

"increase" │ "decrease" │ "maintain" │ "attain"

metricId

string

start

number

end

number

Due

Input any parsable date string (or timestamp) to display the date. Customize using options:

Due date

Jan 1, 2022

<Due
  label="Due date"
  date="2022/01/01"
  options={{ year: 'numeric', month: 'short', day: 'numeric' }}
/>

<Due
  label="Due date"
  date="2022/01/01"
  options={{ year: 'numeric', month: 'short', day: 'numeric' }}
/>

Progress

Progress indicator for objectives, calculated from result scores or input as a percentage value.

progress

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Progress label="progress" value={0.75} />
    <Progress label="progress" results={results} />
  </Objective>
</Okr>

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Progress label="progress" value={0.75} />
    <Progress label="progress" results={results} />
  </Objective>
</Okr>

Properties

Takes either a percentage value, or an array of results.

label

string

value

number

results

Array<{ "id": "string", "metricId": "string", "direction": "string", "start": "number", "end": "number", "current": "number" }>

className

string

Results example

Here is how to structure your results in an array:

const results = [
        id: "1",
        metricId: "1",
        direction: "increase",
        start: 50,
        end: 10,
        current: 20,
    },
]

Current

Display the current result value.

Current

30%

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Result>
      <Current label="Current" metricId="1" value={30} />
    </Result>
  </Objective>
</Okr>

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Result>
      <Current label="Current" metricId="1" value={30} />
    </Result>
  </Objective>
</Okr>

Properties

Takes the current value from the result and the metricId to format the number.

label

string

value

number

metricId

string

className

string

Score

Score the result based on start, end (goal), and current value.

score

33%

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Result>
      <Score
        label="score"
        direction="increase"
        start={20}
        end={50}
        current={30}
        circle
      />
    </Result>
  </Objective>
</Okr>

<Okr metrics={metrics} grades={grades}>
  <Objective>
    <Result>
      <Score
        label="score"
        direction="increase"
        start={20}
        end={50}
        current={30}
        circle
      />
    </Result>
  </Objective>
</Okr>

Properties

Takes result properties, as well as a label, and className. Can display as a circle which uses the score grade to determine its background color.

label

string

direction

"increase" │ "decrease" │ "maintain" │ "attain"

start

number

end

number

current

number

circle

bool

className

string

Row

A flex row utility component (very optional).

<Row type="flex">{children}</Row>

Properties

Use to layout your row using flex or wrap.

kind

"wrap" │ "flex"

Components

Carve out a niche

Increase product revenue from 20% to 50%

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Okr

Carve out a niche

Increase churn from 20% to 50%

Okr