welldotdocs
Getting started

First use

Draw a .well file into an SVG element with WellRenderer, from parsing the file to redrawing when the data changes.

This page draws a well on a plain HTML page. The same steps apply inside any framework.

1. An SVG element

<svg id="profile"></svg>

The renderer sizes the element itself: its width is the panel width plus the left and right margins, and its height the panel height plus the top and bottom margins.

2. Parse the file

import { parseWell } from '@welldot/core';

// a file served with your page, e.g. an example well downloaded from welldot.org/examples
const response = await fetch('/wells/extremoz-rn-barreiras-raso.well');
const well = parseWell(await response.text());

parseWell validates the file and upgrades v1 files, so the renderer always receives a valid v2 Well (Parsing and validating).

3. Create the renderer and draw

import {
  INTERACTIVE_RENDER_CONFIG,
  WellRenderer,
  applyRenderLocale,
} from '@welldot/render';

const margins = { top: 24, right: 16, bottom: 20, left: 48 };

const renderer = new WellRenderer(
  [{ selector: '#profile', width: 420, height: 640, margins }],
  {
    locale: 'en',
    renderConfig: applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'),
    onError: error => console.error(error),
  },
);

await renderer.prepareSvg();
renderer.draw(well);
  • The first argument lists the panels. One panel draws the whole well; Panels and layout splits long wells over several.
  • INTERACTIVE_RENDER_CONFIG turns on zoom, pan, tooltips and animation.
  • The renderer's labels default to Portuguese. locale: 'en' with applyRenderLocale(config, 'en') switches every drawn word to English (Locale and units).
  • prepareSvg() builds the SVG structure and loads the texture patterns. Call it once, after the element exists.
  • draw(well) renders the profile. Drawing errors are reported to onError, not thrown.

The result looks like this:

Live previewextremoz-rn-barreiras-raso.well

4. Redraw on change

Call draw again with the new data. Layers the well no longer has are removed, and changes animate:

well.well_screen.push({
  from: 20,
  to: 24,
  type: 'stainless_steel',
  diameter: 219,
  screen_slot: 0.75,
});
renderer.draw(well);

To keep animations stable while editing, give array items a key (see RenderableWell in the API reference). Keys are for the renderer only; strip them before saving the file.

renderer.clear() empties every panel and keeps the structure, so the next draw needs no new prepareSvg.

Next

Installation

Panels and layout