Build a Completion Treatment Plot

The completion treatment-plot example is a starting point for visualizing pressure, rate, and proppant concentration. Use it as charting reference inside a newly scaffolded completion app rather than hard-coding a well asset ID.

1. Start with a completion app

Follow Build a Completion UI App. Keep the generated AppContainer, AppHeader, manifest, settings, and test setup.

Use useAppCommons and usePadSelectorSelectedWells to derive the wells the customer selected. Each well's asset_id is the boundary for treatment-data requests.

2. Confirm the dataset

Treatment data is commonly stored in completion.wits, but the provider and field names can differ by customer integration. Confirm all of these in Dataset Explorer before writing the chart:

Value	Example
Provider	corva or the dataset owner's provider key
Dataset	completion.wits
Asset	A selected completion well's asset_id
Pressure field	data.wellhead_pressure
Rate field	data.slurry_flow_rate_in
Concentration field	data.total_proppant_concentration

Do not assume example field names exist in every customer dataset.

3. Keep curve configuration together

export const TREATMENT_CURVES = {
  pressure: {
    field: 'data.wellhead_pressure',
    label: 'Pressure',
    unit: 'psi',
  },
  rate: {
    field: 'data.slurry_flow_rate_in',
    label: 'Rate',
    unit: 'bpm',
  },
  concentration: {
    field: 'data.total_proppant_concentration',
    label: 'Proppant concentration',
    unit: 'ppg',
  },
};

Use Corva UI theme variables or the app's chart palette for colors. Keep customer-selectable curve visibility and units in app settings.

4. Load history, then subscribe

For each selected well:

1. Request recent records with corvaDataAPI.
2. Sort them by timestamp.
3. Render the initial chart.
4. Subscribe to new records with socketClient when the plot must be live.
5. Unsubscribe and clear or replace data when the selected wells change.

See Access Corva Data for the authenticated clients and Charting with Highcharts for chart lifecycle guidance.

5. Synchronize multiple charts deliberately

If pressure, rate, and concentration use separate chart instances, keep shared range or zoom state in the nearest common component. Memoize the context value so unrelated renders do not update every chart:

const chartControls = useMemo(
  () => ({ range, setRange }),
  [range]
);

return (
  <ChartsContext.Provider value={chartControls}>
    <PressureChart />
    <RateChart />
    <ConcentrationChart />
  </ChartsContext.Provider>
);

Test the plot with one well, multiple selected wells, a pad-mode change, no matching records, and a live update.