Forecast Handoff
Measured bars hand off to a dashed forecast at a "today" divider.
$149 once · every Pro piece
The forecast sits inside a widening confidence cone drawn as an ordered dither: stipple density is the probability, so the cone is dense along the forecast line, thins toward its edges and grows fainter as the horizon spreads the odds. A horizon dot and a quiet pill close the line. Today's bar is the one hot mark. The actuals can be bars or an area; the cone can also be a gradient wedge or a hatch. The tooltip switches from the measured value to the forecast with its likely range, and Shift + arrows jump between today and the horizon.
Install
npx shadcn@latest add @obsyde/forecast-handoffNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ForecastHandoff } from '@/components/obsyde/ember/forecast-handoff/ForecastHandoff';
export function Example() {
return (
<ForecastHandoff
actuals="bars"
cone="dither"
horizonDot
legend="row"
tooltip="panel"
/>
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/forecast-handoff/ForecastHandoff.tsxcomponentember/forecast-handoff/forecast-handoff.cssstylesember/forecast-handoff/ForecastHandoffDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/series.tsxsharedember/viz-kit/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
actualsActuals | 'bars' | 'area' | 'bars' |
coneCone | 'dither' | 'gradient' | 'pattern' | 'none' | 'dither' |
horizonHorizon | number | 12 |
uncertaintyUncertainty | number | 1 |
horizonDotHorizon dot | boolean | true |
legendLegend | 'row' | 'list' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'corner' | 'none' | 'panel' |
crosshairCrosshair | 'solid' | 'dashed' | 'gradient' | 'none' | 'solid' |
dotsDots | 'halo' | 'ring' | 'none' | 'halo' |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
revealReveal | 'sweep' | 'cool' | 'rise' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 270 |
pointsPoints | number | 24 |
seedSeed | number | 6 |