Skip to content
Get Pro
Radial

Year Loop

A year wrapped into a loop. The record range and the normal range are radial bands, faint and stronger, with no edge strokes; this year’s line runs from January round to today and ends in a dot, over faint value rings.

$149 once · every Pro piece

Customize

Days that broke the record leave a scorch mark, a small accent spark just past the line: the only heat on the chart. Point at any day or step with the arrow keys: a spoke springs to it, a marker rides the line, and the centre reads the day, its value with rolling digits, how far it sits from normal, and the normal and record ranges. Pointing at a band or the line isolates it, both ways with the legend.

Install

npx shadcn@latest add @obsyde/year-loop

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { YearLoop } from '@/components/obsyde/ember/year-loop/YearLoop';

export function Example() {
  return (
    <YearLoop />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/year-loop/YearLoop.tsxcomponent
  • ember/year-loop/year-loop.cssstyles
  • ember/year-loop/YearLoopDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/radial.tsxshared
  • ember/viz-kit/radial.cssshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/chart.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
todayToday (day)number202
unitsUnits'fahrenheit' | 'celsius''fahrenheit'
scorchScorch recordsbooleantrue
ringsValue ringsbooleantrue
legendLegend'row' | 'none''row'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''gradient'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
statusStatus'ready' | 'loading' | 'empty''ready'
sizeSizenumber460
seedSeednumber5