Asset Detail Card

Detail panel shown when clicking an asset on the map. Auto-generates sections from the asset's properties. Includes a production chart when time series data is available.

Preview

Both cards are auto-generated from sample well properties. The producing well follows a continuous decline, while the shut-in well has a clear transition to sustained zero production.

import {
  sampleProducingAsset,
  sampleShutInAsset,
} from "@aai-agency/og-components/sample-data";

<AssetDetailCard asset={sampleProducingAsset} />
<AssetDetailCard asset={sampleShutInAsset} />

Installation

bash

pnpm add @aai-agency/og-components

The detail card is built into the Map component via the showDetailCard prop. It can also be used standalone.

Usage

tsx

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

// The card auto-generates sections from whatever
// properties exist on the asset. No configuration needed.
export function WellDetail({ asset, onClose }) {
  return (
    <AssetDetailCard
      asset={asset}
      onClose={onClose}
    />
  );
}

Custom Sections

tsx

// Pass custom sections for explicit control:
<AssetDetailCard
  asset={asset}
  sections={[
    {
      id: "reservoir",
      title: "Reservoir Data",
      fields: [
        { key: "properties.porosity", label: "Porosity", format: "percentage" },
        { key: "properties.netPay", label: "Net Pay", format: "number", unit: "ft" },
      ],
    },
  ]}
  onClose={onClose}
/>

Props

Prop	Type	Default	Description
`asset`	`Asset \| null`	-	The asset to display. Pass null to hide the card.
`onClose`	`() => void`	-	Callback when the close button is clicked.
`sections`	`AssetDetailSection[]`	-	Custom sections to display. Auto-generated from asset data if omitted.
`typeConfigs`	`Map<string, AssetTypeConfig>`	-	Per-type display configuration for labels and colors.
`renderHeader`	`(asset: Asset) => ReactNode`	-	Custom header renderer.
`renderBody`	`(asset: Asset) => ReactNode`	-	Custom body renderer (replaces all default content).
`renderSection`	`(section, asset) => ReactNode`	-	Custom renderer for individual sections.
`onBack`	`() => void`	-	Shows a back arrow when provided. Used for navigation from selection summary.
`mobileBreakpoint`	`number`	`768`	Width threshold for mobile drawer vs desktop panel.

PreviousMap

NextCharts