Production Chart

Time series chart for oil, gas, and water production data. Dual Y-axis, clickable legend, hover tooltips, and zoom brush. Powered by uPlot for 60fps rendering.

Preview

36 months of sample production data. Oil and water on the left axis, gas on the right.

<ProductionChart
  series={sampleTimeSeries}
  height={350}
/>

Installation

bash

pnpm add @aai-agency/og-components

Usage

tsx

import { ProductionChart } from "@aai-agency/og-components";

// Pass the timeSeries array from any asset
export function WellProduction({ asset }) {
  return (
    <ProductionChart
      series={asset.properties.timeSeries}
      height={350}
    />
  );
}

Props

Prop	Type	Default	Description
`series`	`TimeSeries[]`	-	Array of time series data. Each series has id, fluidType (oil/gas/water), curveType (actual/forecast), unit, frequency, and data points.
`height`	`number`	`220`	Chart height in pixels.
`width`	`number`	-	Chart width in pixels. Fills container width if omitted.
`showForecast`	`boolean`	`true`	Show forecast series with dashed lines.
`colors`	`Record<string, string>`	-	Custom color map by fluidType. Defaults: oil=#22c55e, gas=#ef4444, water=#3b82f6.
`labels`	`Record<string, string>`	-	Custom label map by fluidType.
`rightAxisFluids`	`string[]`	`["gas"]`	Which fluid types use the right Y-axis.

PreviousAsset Detail Card