WellRenderer

One instance manages one or more SVG panels (multi-panel layouts for long wells). Call prepareSvg() once to initialise the DOM and preload textures, then call draw(profile) whenever the profile data changes.

Example

const renderer = new WellRenderer(
  [{ selector: '#well-svg', height: 600, width: 300, margins: { top: 20, right: 10, bottom: 20, left: 40 } }],
  { renderConfig: INTERACTIVE_RENDER_CONFIG },
);
await renderer.prepareSvg();
renderer.draw(profile);

Constructors

Constructor

new WellRenderer(svgs, options?): WellRenderer

Parameters

svgs

SvgInstance

One entry per SVG panel; multi-entry for split-panel layouts.

options?

classNames?

{ boreHole?: { group?: string; rect?: string; }; caves?: { contact?: string; fill?: string; group?: string; item?: string; }; cementPad?: { group?: string; item?: string; }; centralizer?: { group?: string; item?: string; }; columnHeaders?: { group?: string; rule?: string; text?: string; }; conflict?: { group?: string; rect?: string; }; constructionGroup?: string; constructionLabels?: { group?: string; }; fractures?: { group?: string; hitArea?: string; item?: string; line?: string; polyline?: string; }; geologicGroup?: string; highlights?: { constructionGroup?: string; fracturesGroup?: string; geologicGroup?: string; item?: string; label?: string; labelBg?: string; rect?: string; }; holeFill?: { group?: string; rect?: string; }; labels?: { lithology?: { depth?: string; divider?: string; group?: string; label?: string; }; }; legend?: { border?: string; caveFill?: string; constructionRect?: string; fracturePoly?: string; item?: string; label?: string; title?: string; }; lithology?: { group?: string; rect?: string; }; markers?: { fracture?: string; group?: string; lithology?: string; }; overlap?: { band?: string; group?: string; label?: string; }; overview?: { group?: string; item?: string; window?: string; }; pump?: { group?: string; item?: string; }; reduction?: { group?: string; item?: string; }; surfaceCase?: { group?: string; rect?: string; }; tooltip?: { primaryInfo?: string; root?: string; secondaryInfo?: string; title?: string; }; unitLabels?: { aqRect?: string; geoRect?: string; group?: string; text?: string; }; wellCase?: { group?: string; rect?: string; }; wellGroup?: string; wellScreen?: { group?: string; rect?: string; }; yAxis?: string; }

Override default BEM CSS class names.

classNames.boreHole?

{ group?: string; rect?: string; }

classNames.boreHole.group?

string

classNames.boreHole.rect?

string

classNames.caves?

{ contact?: string; fill?: string; group?: string; item?: string; }

classNames.caves.contact?

string

classNames.caves.fill?

string

classNames.caves.group?

string

classNames.caves.item?

string

classNames.cementPad?

{ group?: string; item?: string; }

classNames.cementPad.group?

string

classNames.cementPad.item?

string

classNames.centralizer?

{ group?: string; item?: string; }

classNames.centralizer.group?

string

classNames.centralizer.item?

string

classNames.columnHeaders?

{ group?: string; rule?: string; text?: string; }

classNames.columnHeaders.group?

string

classNames.columnHeaders.rule?

string

classNames.columnHeaders.text?

string

classNames.conflict?

{ group?: string; rect?: string; }

classNames.conflict.group?

string

classNames.conflict.rect?

string

classNames.constructionGroup?

string

classNames.constructionLabels?

{ group?: string; }

classNames.constructionLabels.group?

string

classNames.fractures?

{ group?: string; hitArea?: string; item?: string; line?: string; polyline?: string; }

classNames.fractures.group?

string

classNames.fractures.hitArea?

string

classNames.fractures.item?

string

classNames.fractures.line?

string

classNames.fractures.polyline?

string

classNames.geologicGroup?

string

classNames.highlights?

{ constructionGroup?: string; fracturesGroup?: string; geologicGroup?: string; item?: string; label?: string; labelBg?: string; rect?: string; }

classNames.highlights.constructionGroup?

string

classNames.highlights.fracturesGroup?

string

classNames.highlights.geologicGroup?

string

classNames.highlights.item?

string

classNames.highlights.label?

string

classNames.highlights.labelBg?

string

classNames.highlights.rect?

string

classNames.holeFill?

{ group?: string; rect?: string; }

classNames.holeFill.group?

string

classNames.holeFill.rect?

string

classNames.labels?

{ lithology?: { depth?: string; divider?: string; group?: string; label?: string; }; }

classNames.labels.lithology?

{ depth?: string; divider?: string; group?: string; label?: string; }

classNames.labels.lithology.depth?

string

classNames.labels.lithology.divider?

string

classNames.labels.lithology.group?

string

classNames.labels.lithology.label?

string

classNames.legend?

{ border?: string; caveFill?: string; constructionRect?: string; fracturePoly?: string; item?: string; label?: string; title?: string; }

classNames.legend.border?

string

classNames.legend.caveFill?

string

classNames.legend.constructionRect?

string

classNames.legend.fracturePoly?

string

classNames.legend.item?

string

classNames.legend.label?

string

classNames.legend.title?

string

classNames.lithology?

{ group?: string; rect?: string; }

classNames.lithology.group?

string

classNames.lithology.rect?

string

classNames.markers?

{ fracture?: string; group?: string; lithology?: string; }

classNames.markers.fracture?

string

classNames.markers.group?

string

classNames.markers.lithology?

string

classNames.overlap?

{ band?: string; group?: string; label?: string; }

classNames.overlap.band?

string

classNames.overlap.group?

string

classNames.overlap.label?

string

classNames.overview?

{ group?: string; item?: string; window?: string; }

classNames.overview.group?

string

classNames.overview.item?

string

classNames.overview.window?

string

classNames.pump?

{ group?: string; item?: string; }

classNames.pump.group?

string

classNames.pump.item?

string

classNames.reduction?

{ group?: string; item?: string; }

classNames.reduction.group?

string

classNames.reduction.item?

string

classNames.surfaceCase?

{ group?: string; rect?: string; }

classNames.surfaceCase.group?

string

classNames.surfaceCase.rect?

string

classNames.tooltip?

{ primaryInfo?: string; root?: string; secondaryInfo?: string; title?: string; }

classNames.tooltip.primaryInfo?

string

classNames.tooltip.root?

string

classNames.tooltip.secondaryInfo?

string

classNames.tooltip.title?

string

classNames.unitLabels?

{ aqRect?: string; geoRect?: string; group?: string; text?: string; }

classNames.unitLabels.aqRect?

string

classNames.unitLabels.geoRect?

string

classNames.unitLabels.group?

string

classNames.unitLabels.text?

string

classNames.wellCase?

{ group?: string; rect?: string; }

classNames.wellCase.group?

string

classNames.wellCase.rect?

string

classNames.wellGroup?

string

classNames.wellScreen?

{ group?: string; rect?: string; }

classNames.wellScreen.group?

string

classNames.wellScreen.rect?

string

classNames.yAxis?

string

locale?

"en" | "pt"

Locale for renderer-drawn text (diameter symbol, and any RenderConfig fields resolved via applyRenderLocale). Defaults to 'pt', matching the package's historical output.

onError?

(err) => void

Called when a draw error occurs (e.g., a renderer throws). Falls back to console.error if omitted.

onZoom?

(scale) => void

Called with the current zoom scale (1 = initial/fit) whenever the user zooms or pans, and whenever zoomBy/resetZoom are called. No-op if renderConfig.zoom/pan are both disabled.

renderConfig?

{ animation?: { duration?: number; ease?: { }; }; caves?: { amplitude?: { max?: number; min?: number; ratio?: number; }; pathSteps?: number; }; columnHeaders?: { active?: boolean; height?: number; labels?: { construction?: string; depth?: string; description?: string; lithology?: string; }; }; construction?: { casingShoe?: { active?: boolean; size?: number; }; cementPad?: { height?: number; widthRatio?: number; }; centralizer?: { markerHalfHeight?: number; }; pump?: { active?: boolean; bodyHeight?: number; bodyWidthRatio?: number; riserWidthRatio?: number; }; screenEnds?: { active?: boolean; }; surfaceCase?: { diameterPaddingRatio?: number; }; }; constructionLabels?: { active?: boolean; labelMaxWidth?: number; labelRadius?: number; labels?: { wellCasePrefix?: string; wellScreenPrefix?: string; wellScreenSlotPrefix?: string; }; side?: "left" | "right"; xOffset?: number; }; fractures?: { hitBuffer?: { single?: number; swarm?: number; }; swarm?: { lineCountBase?: number; lineCountVariance?: number; spread?: number; }; widthMultiplier?: number; }; geologic?: { xLeft?: number; xRightInset?: number; }; highlights?: { fill?: string; fillOpacity?: number; labelBackground?: string; labelColor?: string; labelFontSize?: number; labelPadding?: number; labelRadius?: number; padding?: number; stroke?: string; strokeDasharray?: string; strokeWidth?: number; }; labels?: { active?: boolean | ("lithology" | "fractures" | "caves" | undefined); caveLabelHeight?: number; caveLabelPadX?: number; continuation?: { active?: boolean; prefix?: string; }; depthTipHeight?: number; depthTipPadX?: number; descriptionMaxWidth?: number; descriptionXOffset?: number; fractureLabelLeaderGap?: number; fractureLabelPadX?: number; fractureLabelPadY?: number; lithology?: boolean | (LithologyLabelItem | undefined); stackingGap?: number; stackingLineHeight?: number; typeLabels?: { cave?: string; caveWater?: string; fracture?: string; fractureWater?: string; }; }; layout?: { pocoCenterRatio?: number; pocoWidthRatio?: number; }; legend?: { borderRadius?: number; height?: number; itemWidth?: number; labels?: { boreHole?: string; caveDry?: string; caveWet?: string; cementPad?: string; centralizer?: string; conflict?: string; fractureSingle?: string; fractureSwarm?: string; fractureWater?: string; holeFillGravel?: string; holeFillSeal?: string; pump?: string; reduction?: string; surfaceCase?: string; wellCase?: string; wellScreen?: string; }; maxWidth?: number; padding?: number; title?: string; }; markers?: { fractures?: boolean; lithology?: boolean; radius?: number; }; maxZoomScale?: number; minZoomScale?: number; overlap?: { label?: string; }; overview?: { active?: boolean; height?: number; width?: number; x?: number; }; pan?: boolean; textures?: { cave_dry?: { background?: string; size?: number; stroke?: string; }; cave_wet?: { background?: string; size?: number; stroke?: string; }; conflict?: { stroke?: string; }; gravel_pack?: { background?: string; size?: number; }; pad?: { background?: string; stroke?: string; }; seal?: { background?: string; }; surface_case?: { background?: string; orientation?: (string | undefined); shapeRendering?: string; size?: number; stroke?: string; strokeWidth?: number; }; well_screen?: { background?: string; size?: number; strokeWidth?: number; }; }; tooltipLabels?: { cave?: { title?: string; waterIntake?: string; }; cementPad?: { length?: string; thickness?: string; title?: string; width?: string; }; centralizer?: { depth?: string; spacing?: string; title?: string; }; common?: { description?: string; diameter?: string; from?: string; to?: string; type?: string; }; conflict?: { title?: string; }; fracture?: { azimuth?: string; depth?: string; dip?: string; title?: string; titleSwarm?: string; waterIntake?: string; }; geology?: { aquiferUnit?: string; geologicUnit?: string; title?: string; }; hole?: { title?: string; }; holeFill?: { title?: string; }; pump?: { intakeDepth?: string; model?: string; power?: string; riser?: string; title?: string; type_compressor_airlift?: string; type_hand_pump?: string; type_jet?: string; type_progressive_cavity?: string; type_submersible?: string; type_vertical_turbine?: string; }; reduction?: { title?: string; }; surfaceCase?: { title?: string; }; wellCase?: { title?: string; }; wellScreen?: { material?: string; slot?: string; slotType?: string; title?: string; }; }; tooltips?: false | (TooltipKey | undefined); unitLabels?: { active?: boolean; innerDividerWidth?: number; minHeightForText?: number; outerEdgeWidth?: number; stripWidth?: number; xOffset?: number; }; zoom?: boolean; zoomLevel?: number; }

Rendering behaviour (zoom, pan, animation, layout). Defaults to INTERACTIVE_RENDER_CONFIG.

renderConfig.animation?

{ duration?: number; ease?: { }; }

renderConfig.animation.duration?

number

renderConfig.animation.ease?

{ }

renderConfig.caves?

{ amplitude?: { max?: number; min?: number; ratio?: number; }; pathSteps?: number; }

renderConfig.caves.amplitude?

{ max?: number; min?: number; ratio?: number; }

renderConfig.caves.amplitude.max?

number

renderConfig.caves.amplitude.min?

number

renderConfig.caves.amplitude.ratio?

number

renderConfig.caves.pathSteps?

number

renderConfig.columnHeaders?

{ active?: boolean; height?: number; labels?: { construction?: string; depth?: string; description?: string; lithology?: string; }; }

Column titles drawn in the panel's top margin, over a rule that sits construction.cementPad.height px above the drawing area (clear of the pad). The top margin must hold height plus that.

renderConfig.columnHeaders.active?

boolean

renderConfig.columnHeaders.height?

number

Height of the header row, taken from the top margin.

renderConfig.columnHeaders.labels?

{ construction?: string; depth?: string; description?: string; lithology?: string; }

renderConfig.columnHeaders.labels.construction?

string

renderConfig.columnHeaders.labels.depth?

string

renderConfig.columnHeaders.labels.description?

string

Shown only when lithology annotations are drawn.

renderConfig.columnHeaders.labels.lithology?

string

renderConfig.construction?

{ casingShoe?: { active?: boolean; size?: number; }; cementPad?: { height?: number; widthRatio?: number; }; centralizer?: { markerHalfHeight?: number; }; pump?: { active?: boolean; bodyHeight?: number; bodyWidthRatio?: number; riserWidthRatio?: number; }; screenEnds?: { active?: boolean; }; surfaceCase?: { diameterPaddingRatio?: number; }; }

renderConfig.construction.casingShoe?

{ active?: boolean; size?: number; }

Casing shoe: a filled triangle outside each wall where the casing / screen string really ends (not at panel cuts or joints).

renderConfig.construction.casingShoe.active?

boolean

renderConfig.construction.casingShoe.size?

number

Triangle leg in pixels (constant regardless of zoom).

renderConfig.construction.cementPad?

{ height?: number; widthRatio?: number; }

Fixed-size pad drawn above the surface as two slabs around the outermost pipe, with break lines at the outer ends (not to scale). The profile's cement_pad width and thickness don't change it (they only show in the tooltip).

renderConfig.construction.cementPad.height?

number

Pad height in pixels (constant regardless of zoom).

renderConfig.construction.cementPad.widthRatio?

number

Pad width as a ratio of the construction column width; widened when the pipe opening needs it.

renderConfig.construction.centralizer?

{ markerHalfHeight?: number; }

renderConfig.construction.centralizer.markerHalfHeight?

number

Half the marker height in pixels (constant regardless of zoom).

renderConfig.construction.pump?

{ active?: boolean; bodyHeight?: number; bodyWidthRatio?: number; riserWidthRatio?: number; }

Current pump + riser layer (.well v2.3 pump_installations).

renderConfig.construction.pump.active?

boolean

Whether the current pump is drawn.

renderConfig.construction.pump.bodyHeight?

number

Pump body height in pixels (constant regardless of zoom); the body ends at intake_depth.

renderConfig.construction.pump.bodyWidthRatio?

number

Pump body width as a fraction of the casing/screen diameter at the intake.

renderConfig.construction.pump.riserWidthRatio?

number

Riser width as a fraction of the casing diameter, used when riser_diameter is absent.

renderConfig.construction.screenEnds?

{ active?: boolean; }

Screen ends: a dashed line across the pipe at the top and base of every screen (not at panel cuts). Styled by theme.wellScreenendStrokeWidth / endDasharray.

renderConfig.construction.screenEnds.active?

boolean

renderConfig.construction.surfaceCase?

{ diameterPaddingRatio?: number; }

renderConfig.construction.surfaceCase.diameterPaddingRatio?

number

renderConfig.constructionLabels?

{ active?: boolean; labelMaxWidth?: number; labelRadius?: number; labels?: { wellCasePrefix?: string; wellScreenPrefix?: string; wellScreenSlotPrefix?: string; }; side?: "left" | "right"; xOffset?: number; }

renderConfig.constructionLabels.active?

boolean

renderConfig.constructionLabels.labelMaxWidth?

number

renderConfig.constructionLabels.labelRadius?

number

renderConfig.constructionLabels.labels?

{ wellCasePrefix?: string; wellScreenPrefix?: string; wellScreenSlotPrefix?: string; }

renderConfig.constructionLabels.labels.wellCasePrefix?

string

renderConfig.constructionLabels.labels.wellScreenPrefix?

string

renderConfig.constructionLabels.labels.wellScreenSlotPrefix?

string

renderConfig.constructionLabels.side?

"left" | "right"

left (default): each label ends xOffset px left of its own casing wall. right: labels start xOffset px right of the construction column, in one aligned column.

renderConfig.constructionLabels.xOffset?

number

renderConfig.fractures?

{ hitBuffer?: { single?: number; swarm?: number; }; swarm?: { lineCountBase?: number; lineCountVariance?: number; spread?: number; }; widthMultiplier?: number; }

renderConfig.fractures.hitBuffer?

{ single?: number; swarm?: number; }

renderConfig.fractures.hitBuffer.single?

number

renderConfig.fractures.hitBuffer.swarm?

number

renderConfig.fractures.swarm?

{ lineCountBase?: number; lineCountVariance?: number; spread?: number; }

renderConfig.fractures.swarm.lineCountBase?

number

renderConfig.fractures.swarm.lineCountVariance?

number

renderConfig.fractures.swarm.spread?

number

renderConfig.fractures.widthMultiplier?

number

renderConfig.geologic?

{ xLeft?: number; xRightInset?: number; }

renderConfig.geologic.xLeft?

number

renderConfig.geologic.xRightInset?

number

renderConfig.highlights?

{ fill?: string; fillOpacity?: number; labelBackground?: string; labelColor?: string; labelFontSize?: number; labelPadding?: number; labelRadius?: number; padding?: number; stroke?: string; strokeDasharray?: string; strokeWidth?: number; }

renderConfig.highlights.fill?

string

renderConfig.highlights.fillOpacity?

number

renderConfig.highlights.labelBackground?

string

renderConfig.highlights.labelColor?

string

renderConfig.highlights.labelFontSize?

number

renderConfig.highlights.labelPadding?

number

renderConfig.highlights.labelRadius?

number

renderConfig.highlights.padding?

number

renderConfig.highlights.stroke?

string

renderConfig.highlights.strokeDasharray?

string

renderConfig.highlights.strokeWidth?

number

renderConfig.labels?

{ active?: boolean | ("lithology" | "fractures" | "caves" | undefined); caveLabelHeight?: number; caveLabelPadX?: number; continuation?: { active?: boolean; prefix?: string; }; depthTipHeight?: number; depthTipPadX?: number; descriptionMaxWidth?: number; descriptionXOffset?: number; fractureLabelLeaderGap?: number; fractureLabelPadX?: number; fractureLabelPadY?: number; lithology?: boolean | (LithologyLabelItem | undefined); stackingGap?: number; stackingLineHeight?: number; typeLabels?: { cave?: string; caveWater?: string; fracture?: string; fractureWater?: string; }; }

renderConfig.labels.active?

boolean | ("lithology" | "fractures" | "caves" | undefined)

false = hide all; true = show all; array = show only listed types

renderConfig.labels.caveLabelHeight?

number

renderConfig.labels.caveLabelPadX?

number

renderConfig.labels.continuation?

{ active?: boolean; prefix?: string; }

Marks layers and construction items that start above the panel (they continue from the previous one): ↑ {prefix} · from–to on lithology annotations, a leading ↑ on construction labels.

renderConfig.labels.continuation.active?

boolean

renderConfig.labels.continuation.prefix?

string

renderConfig.labels.depthTipHeight?

number

renderConfig.labels.depthTipPadX?

number

renderConfig.labels.descriptionMaxWidth?

number

renderConfig.labels.descriptionXOffset?

number

renderConfig.labels.fractureLabelLeaderGap?

number

renderConfig.labels.fractureLabelPadX?

number

renderConfig.labels.fractureLabelPadY?

number

renderConfig.labels.lithology?

boolean | (LithologyLabelItem | undefined)

Fine-grained lithology sub-item control; true = depth, description and dividers

renderConfig.labels.stackingGap?

number

renderConfig.labels.stackingLineHeight?

number

renderConfig.labels.typeLabels?

{ cave?: string; caveWater?: string; fracture?: string; fractureWater?: string; }

renderConfig.labels.typeLabels.cave?

string

renderConfig.labels.typeLabels.caveWater?

string

renderConfig.labels.typeLabels.fracture?

string

renderConfig.labels.typeLabels.fractureWater?

string

renderConfig.layout?

{ pocoCenterRatio?: number; pocoWidthRatio?: number; }

renderConfig.layout.pocoCenterRatio?

number

renderConfig.layout.pocoWidthRatio?

number

renderConfig.legend?

{ borderRadius?: number; height?: number; itemWidth?: number; labels?: { boreHole?: string; caveDry?: string; caveWet?: string; cementPad?: string; centralizer?: string; conflict?: string; fractureSingle?: string; fractureSwarm?: string; fractureWater?: string; holeFillGravel?: string; holeFillSeal?: string; pump?: string; reduction?: string; surfaceCase?: string; wellCase?: string; wellScreen?: string; }; maxWidth?: number; padding?: number; title?: string; }

renderConfig.legend.borderRadius?

number

renderConfig.legend.height?

number

renderConfig.legend.itemWidth?

number

renderConfig.legend.labels?

{ boreHole?: string; caveDry?: string; caveWet?: string; cementPad?: string; centralizer?: string; conflict?: string; fractureSingle?: string; fractureSwarm?: string; fractureWater?: string; holeFillGravel?: string; holeFillSeal?: string; pump?: string; reduction?: string; surfaceCase?: string; wellCase?: string; wellScreen?: string; }

renderConfig.legend.labels.boreHole?

string

renderConfig.legend.labels.caveDry?

string

renderConfig.legend.labels.caveWet?

string

renderConfig.legend.labels.cementPad?

string

renderConfig.legend.labels.centralizer?

string

renderConfig.legend.labels.conflict?

string

renderConfig.legend.labels.fractureSingle?

string

renderConfig.legend.labels.fractureSwarm?

string

renderConfig.legend.labels.fractureWater?

string

renderConfig.legend.labels.holeFillGravel?

string

renderConfig.legend.labels.holeFillSeal?

string

renderConfig.legend.labels.pump?

string

renderConfig.legend.labels.reduction?

string

renderConfig.legend.labels.surfaceCase?

string

renderConfig.legend.labels.wellCase?

string

renderConfig.legend.labels.wellScreen?

string

renderConfig.legend.maxWidth?

number

renderConfig.legend.padding?

number

renderConfig.legend.title?

string

renderConfig.markers?

{ fractures?: boolean; lithology?: boolean; radius?: number; }

Circled 1-based index on each lithology layer, F{n} next to each fracture.

renderConfig.markers.fractures?

boolean

renderConfig.markers.lithology?

boolean

renderConfig.markers.radius?

number

renderConfig.maxZoomScale?

number

Upper bound for zoom scale, enforced for wheel/drag and zoomBy/resetZoom alike (default 150 = 15000%).

renderConfig.minZoomScale?

number

Lower bound for zoom scale, enforced for wheel/drag and zoomBy/resetZoom alike (default 0 = 0%).

renderConfig.overlap?

{ label?: string; }

Band over the depths a panel repeats (SvgInstance.repeatedTo).

renderConfig.overlap.label?

string

{range} is replaced by the repeated depth range, e.g. 116–124 m.

renderConfig.overview?

{ active?: boolean; height?: number; width?: number; x?: number; }

Mini-map: the whole well's lithology drawn as a thin column in the panel's left margin, with a window outlining the panel's depth range.

renderConfig.overview.active?

boolean

renderConfig.overview.height?

number

Height in pixels; capped at the panel's drawing height.

renderConfig.overview.width?

number

renderConfig.overview.x?

number

Left edge in SVG coordinates.

renderConfig.pan?

boolean

renderConfig.textures?

{ cave_dry?: { background?: string; size?: number; stroke?: string; }; cave_wet?: { background?: string; size?: number; stroke?: string; }; conflict?: { stroke?: string; }; gravel_pack?: { background?: string; size?: number; }; pad?: { background?: string; stroke?: string; }; seal?: { background?: string; }; surface_case?: { background?: string; orientation?: (string | undefined); shapeRendering?: string; size?: number; stroke?: string; strokeWidth?: number; }; well_screen?: { background?: string; size?: number; strokeWidth?: number; }; }

renderConfig.textures.cave_dry?

{ background?: string; size?: number; stroke?: string; }

renderConfig.textures.cave_dry.background?

string

renderConfig.textures.cave_dry.size?

number

renderConfig.textures.cave_dry.stroke?

string

renderConfig.textures.cave_wet?

{ background?: string; size?: number; stroke?: string; }

renderConfig.textures.cave_wet.background?

string

renderConfig.textures.cave_wet.size?

number

renderConfig.textures.cave_wet.stroke?

string

renderConfig.textures.conflict?

{ stroke?: string; }

renderConfig.textures.conflict.stroke?

string

renderConfig.textures.gravel_pack?

{ background?: string; size?: number; }

renderConfig.textures.gravel_pack.background?

string

renderConfig.textures.gravel_pack.size?

number

renderConfig.textures.pad?

{ background?: string; stroke?: string; }

renderConfig.textures.pad.background?

string

renderConfig.textures.pad.stroke?

string

renderConfig.textures.seal?

{ background?: string; }

renderConfig.textures.seal.background?

string

renderConfig.textures.surface_case?

{ background?: string; orientation?: (string | undefined); shapeRendering?: string; size?: number; stroke?: string; strokeWidth?: number; }

renderConfig.textures.surface_case.background?

string

renderConfig.textures.surface_case.orientation?

(string | undefined)

renderConfig.textures.surface_case.shapeRendering?

string

renderConfig.textures.surface_case.size?

number

renderConfig.textures.surface_case.stroke?

string

renderConfig.textures.surface_case.strokeWidth?

number

renderConfig.textures.well_screen?

{ background?: string; size?: number; strokeWidth?: number; }

renderConfig.textures.well_screen.background?

string

renderConfig.textures.well_screen.size?

number

renderConfig.textures.well_screen.strokeWidth?

number

renderConfig.tooltipLabels?

{ cave?: { title?: string; waterIntake?: string; }; cementPad?: { length?: string; thickness?: string; title?: string; width?: string; }; centralizer?: { depth?: string; spacing?: string; title?: string; }; common?: { description?: string; diameter?: string; from?: string; to?: string; type?: string; }; conflict?: { title?: string; }; fracture?: { azimuth?: string; depth?: string; dip?: string; title?: string; titleSwarm?: string; waterIntake?: string; }; geology?: { aquiferUnit?: string; geologicUnit?: string; title?: string; }; hole?: { title?: string; }; holeFill?: { title?: string; }; pump?: { intakeDepth?: string; model?: string; power?: string; riser?: string; title?: string; type_compressor_airlift?: string; type_hand_pump?: string; type_jet?: string; type_progressive_cavity?: string; type_submersible?: string; type_vertical_turbine?: string; }; reduction?: { title?: string; }; surfaceCase?: { title?: string; }; wellCase?: { title?: string; }; wellScreen?: { material?: string; slot?: string; slotType?: string; title?: string; }; }

Resolved (plain-string) tooltip titles/field labels — see TooltipLabels.

renderConfig.tooltipLabels.cave?

{ title?: string; waterIntake?: string; }

renderConfig.tooltipLabels.cave.title?

string

renderConfig.tooltipLabels.cave.waterIntake?

string

renderConfig.tooltipLabels.cementPad?

{ length?: string; thickness?: string; title?: string; width?: string; }

renderConfig.tooltipLabels.cementPad.length?

string

renderConfig.tooltipLabels.cementPad.thickness?

string

renderConfig.tooltipLabels.cementPad.title?

string

renderConfig.tooltipLabels.cementPad.width?

string

renderConfig.tooltipLabels.centralizer?

{ depth?: string; spacing?: string; title?: string; }

renderConfig.tooltipLabels.centralizer.depth?

string

renderConfig.tooltipLabels.centralizer.spacing?

string

renderConfig.tooltipLabels.centralizer.title?

string

renderConfig.tooltipLabels.common?

{ description?: string; diameter?: string; from?: string; to?: string; type?: string; }

renderConfig.tooltipLabels.common.description?

string

renderConfig.tooltipLabels.common.diameter?

string

renderConfig.tooltipLabels.common.from?

string

renderConfig.tooltipLabels.common.to?

string

renderConfig.tooltipLabels.common.type?

string

renderConfig.tooltipLabels.conflict?

{ title?: string; }

renderConfig.tooltipLabels.conflict.title?

string

renderConfig.tooltipLabels.fracture?

{ azimuth?: string; depth?: string; dip?: string; title?: string; titleSwarm?: string; waterIntake?: string; }

renderConfig.tooltipLabels.fracture.azimuth?

string

renderConfig.tooltipLabels.fracture.depth?

string

renderConfig.tooltipLabels.fracture.dip?

string

renderConfig.tooltipLabels.fracture.title?

string

renderConfig.tooltipLabels.fracture.titleSwarm?

string

renderConfig.tooltipLabels.fracture.waterIntake?

string

renderConfig.tooltipLabels.geology?

{ aquiferUnit?: string; geologicUnit?: string; title?: string; }

renderConfig.tooltipLabels.geology.aquiferUnit?

string

renderConfig.tooltipLabels.geology.geologicUnit?

string

renderConfig.tooltipLabels.geology.title?

string

renderConfig.tooltipLabels.hole?

{ title?: string; }

renderConfig.tooltipLabels.hole.title?

string

renderConfig.tooltipLabels.holeFill?

{ title?: string; }

renderConfig.tooltipLabels.holeFill.title?

string

renderConfig.tooltipLabels.pump?

{ intakeDepth?: string; model?: string; power?: string; riser?: string; title?: string; type_compressor_airlift?: string; type_hand_pump?: string; type_jet?: string; type_progressive_cavity?: string; type_submersible?: string; type_vertical_turbine?: string; }

renderConfig.tooltipLabels.pump.intakeDepth?

string

renderConfig.tooltipLabels.pump.model?

string

renderConfig.tooltipLabels.pump.power?

string

renderConfig.tooltipLabels.pump.riser?

string

renderConfig.tooltipLabels.pump.title?

string

renderConfig.tooltipLabels.pump.type_compressor_airlift?

string

renderConfig.tooltipLabels.pump.type_hand_pump?

string

renderConfig.tooltipLabels.pump.type_jet?

string

renderConfig.tooltipLabels.pump.type_progressive_cavity?

string

renderConfig.tooltipLabels.pump.type_submersible?

string

renderConfig.tooltipLabels.pump.type_vertical_turbine?

string

renderConfig.tooltipLabels.reduction?

{ title?: string; }

renderConfig.tooltipLabels.reduction.title?

string

renderConfig.tooltipLabels.surfaceCase?

{ title?: string; }

renderConfig.tooltipLabels.surfaceCase.title?

string

renderConfig.tooltipLabels.wellCase?

{ title?: string; }

renderConfig.tooltipLabels.wellCase.title?

string

renderConfig.tooltipLabels.wellScreen?

{ material?: string; slot?: string; slotType?: string; title?: string; }

renderConfig.tooltipLabels.wellScreen.material?

string

renderConfig.tooltipLabels.wellScreen.slot?

string

renderConfig.tooltipLabels.wellScreen.slotType?

string

renderConfig.tooltipLabels.wellScreen.title?

string

renderConfig.tooltips?

false | (TooltipKey | undefined)

undefined = show all; false or = show none; array = show only listed keys

renderConfig.unitLabels?

{ active?: boolean; innerDividerWidth?: number; minHeightForText?: number; outerEdgeWidth?: number; stripWidth?: number; xOffset?: number; }

renderConfig.unitLabels.active?

boolean

Show geologic_unit and aquifer_unit strips to the left of the lithology column

renderConfig.unitLabels.innerDividerWidth?

number

Stroke width of divider lines between adjacent segments of different units

renderConfig.unitLabels.minHeightForText?

number

renderConfig.unitLabels.outerEdgeWidth?

number

Stroke width of the top/bottom boundary (and page-clip edges in multi-SVG rendering)

renderConfig.unitLabels.stripWidth?

number

renderConfig.unitLabels.xOffset?

number

X position of the first (leftmost) strip in geologic group coordinates

renderConfig.zoom?

boolean

renderConfig.zoomLevel?

number

Initial zoom scale applied on first render (1 = fit all, 2 = start 2× zoomed in).

theme?

{ boreHole?: { fill?: string; opacity?: number; stroke?: string; strokeDasharray?: string; strokeWidth?: number; }; cave?: { contactStrokeWidth?: number; dryStroke?: string; fillOpacity?: number; wetStroke?: string; }; cementPad?: { stroke?: string; strokeWidth?: number; }; centralizer?: { fill?: string; stroke?: string; strokeWidth?: number; }; columnHeaders?: { color?: string; fontFamily?: string; fontSize?: number; fontWeight?: string | number; ruleStroke?: string; ruleStrokeWidth?: number; }; conflict?: { stroke?: string; strokeWidth?: number; }; constructionLabels?: { fontFamily?: string; fontSize?: number; fontWeight?: string | number; labelColor?: string; labelFill?: string; }; fracture?: { dryStroke?: string; single?: { crackStrokeWidth?: number; mainStrokeWidth?: number; }; swarm?: { centralStrokeWidth?: number; sideStrokeWidthBase?: number; sideStrokeWidthVariance?: number; }; wetStroke?: string; }; holeFill?: { stroke?: string; strokeWidth?: number; }; labels?: { annotationBg?: string; annotationBgOpacity?: number; annotationBorderColor?: string; annotationRadius?: number; bodyColor?: string; bodyFont?: string; bodyFontWeight?: string | number; caveLabelFontSize?: number; color?: string; depthTipFill?: string; depthTipRadius?: number; dividerStroke?: string; dividerStrokeDasharray?: string; dividerStrokeWidth?: number; fontSize?: number; fractureLabelFontSize?: number; headerFont?: string; headerFontWeight?: string | number; scaleFont?: string; scaleFontSize?: number; }; legend?: { borderStrokeWidth?: number; fontFamily?: string; fontSize?: number; fractureSideStrokeWidth?: number; fractureStrokeWidth?: number; itemStrokeWidth?: number; labelFontWeight?: string | number; titleFontWeight?: string | number; }; lithology?: { stroke?: string; strokeWidth?: number; }; lithologyTexture?: { size?: number; stroke?: string; strokeWidth?: number; }; markers?: { color?: string; fill?: string; fontFamily?: string; fontSize?: number; fontWeight?: string | number; stroke?: string; strokeWidth?: number; }; overlap?: { fontFamily?: string; fontSize?: number; labelColor?: string; ruleStroke?: string; size?: number; stroke?: string; strokeWidth?: number; }; overview?: { emptyFill?: string; stroke?: string; strokeWidth?: number; windowStroke?: string; windowStrokeWidth?: number; }; pump?: { fill?: string; riserFill?: string; riserStroke?: string; riserStrokeWidth?: number; stroke?: string; strokeWidth?: number; }; reduction?: { fill?: string; stroke?: string; strokeWidth?: number; }; surfaceCase?: { stroke?: string; strokeWidth?: number; }; unitLabels?: { aquiferFill?: string; fontFamily?: string; fontSize?: number; fontWeight?: string | number; geologicFill?: string; stroke?: string; strokeWidth?: number; }; wellCase?: { fill?: string; stroke?: string; strokeWidth?: number; }; wellScreen?: { endDasharray?: string; endStrokeWidth?: number; stroke?: string; strokeWidth?: number; }; }

Visual theme overrides. Merged on top of DEFAULT_WELL_THEME.

theme.boreHole?

{ fill?: string; opacity?: number; stroke?: string; strokeDasharray?: string; strokeWidth?: number; }

theme.boreHole.fill?

string

theme.boreHole.opacity?

number

theme.boreHole.stroke?

string

theme.boreHole.strokeDasharray?

string

theme.boreHole.strokeWidth?

number

theme.cave?

{ contactStrokeWidth?: number; dryStroke?: string; fillOpacity?: number; wetStroke?: string; }

theme.cave.contactStrokeWidth?

number

theme.cave.dryStroke?

string

theme.cave.fillOpacity?

number

theme.cave.wetStroke?

string

theme.cementPad?

{ stroke?: string; strokeWidth?: number; }

theme.cementPad.stroke?

string

theme.cementPad.strokeWidth?

number

theme.centralizer?

{ fill?: string; stroke?: string; strokeWidth?: number; }

theme.centralizer.fill?

string

theme.centralizer.stroke?

string

theme.centralizer.strokeWidth?

number

theme.columnHeaders?

{ color?: string; fontFamily?: string; fontSize?: number; fontWeight?: string | number; ruleStroke?: string; ruleStrokeWidth?: number; }

theme.columnHeaders.color?

string

theme.columnHeaders.fontFamily?

string

theme.columnHeaders.fontSize?

number

theme.columnHeaders.fontWeight?

string | number

theme.columnHeaders.ruleStroke?

string

theme.columnHeaders.ruleStrokeWidth?

number

theme.conflict?

{ stroke?: string; strokeWidth?: number; }

theme.conflict.stroke?

string

theme.conflict.strokeWidth?

number

theme.constructionLabels?

{ fontFamily?: string; fontSize?: number; fontWeight?: string | number; labelColor?: string; labelFill?: string; }

theme.constructionLabels.fontFamily?

string

theme.constructionLabels.fontSize?

number

theme.constructionLabels.fontWeight?

string | number

theme.constructionLabels.labelColor?

string

theme.constructionLabels.labelFill?

string

theme.fracture?

{ dryStroke?: string; single?: { crackStrokeWidth?: number; mainStrokeWidth?: number; }; swarm?: { centralStrokeWidth?: number; sideStrokeWidthBase?: number; sideStrokeWidthVariance?: number; }; wetStroke?: string; }

theme.fracture.dryStroke?

string

theme.fracture.single?

{ crackStrokeWidth?: number; mainStrokeWidth?: number; }

theme.fracture.single.crackStrokeWidth?

number

theme.fracture.single.mainStrokeWidth?

number

theme.fracture.swarm?

{ centralStrokeWidth?: number; sideStrokeWidthBase?: number; sideStrokeWidthVariance?: number; }

theme.fracture.swarm.centralStrokeWidth?

number

theme.fracture.swarm.sideStrokeWidthBase?

number

theme.fracture.swarm.sideStrokeWidthVariance?

number

theme.fracture.wetStroke?

string

theme.holeFill?

{ stroke?: string; strokeWidth?: number; }

theme.holeFill.stroke?

string

theme.holeFill.strokeWidth?

number

theme.labels?

{ annotationBg?: string; annotationBgOpacity?: number; annotationBorderColor?: string; annotationRadius?: number; bodyColor?: string; bodyFont?: string; bodyFontWeight?: string | number; caveLabelFontSize?: number; color?: string; depthTipFill?: string; depthTipRadius?: number; dividerStroke?: string; dividerStrokeDasharray?: string; dividerStrokeWidth?: number; fontSize?: number; fractureLabelFontSize?: number; headerFont?: string; headerFontWeight?: string | number; scaleFont?: string; scaleFontSize?: number; }

theme.labels.annotationBg?

string

theme.labels.annotationBgOpacity?

number

theme.labels.annotationBorderColor?

string

theme.labels.annotationRadius?

number

theme.labels.bodyColor?

string

theme.labels.bodyFont?

string

theme.labels.bodyFontWeight?

string | number

theme.labels.caveLabelFontSize?

number

theme.labels.color?

string

theme.labels.depthTipFill?

string

theme.labels.depthTipRadius?

number

theme.labels.dividerStroke?

string

theme.labels.dividerStrokeDasharray?

string

theme.labels.dividerStrokeWidth?

number

theme.labels.fontSize?

number

theme.labels.fractureLabelFontSize?

number

theme.labels.headerFont?

string

theme.labels.headerFontWeight?

string | number

theme.labels.scaleFont?

string

theme.labels.scaleFontSize?

number

theme.legend?

{ borderStrokeWidth?: number; fontFamily?: string; fontSize?: number; fractureSideStrokeWidth?: number; fractureStrokeWidth?: number; itemStrokeWidth?: number; labelFontWeight?: string | number; titleFontWeight?: string | number; }

theme.legend.borderStrokeWidth?

number

theme.legend.fontFamily?

string

theme.legend.fontSize?

number

theme.legend.fractureSideStrokeWidth?

number

theme.legend.fractureStrokeWidth?

number

theme.legend.itemStrokeWidth?

number

theme.legend.labelFontWeight?

string | number

theme.legend.titleFontWeight?

string | number

theme.lithology?

{ stroke?: string; strokeWidth?: number; }

theme.lithology.stroke?

string

theme.lithology.strokeWidth?

number

theme.lithologyTexture?

{ size?: number; stroke?: string; strokeWidth?: number; }

theme.lithologyTexture.size?

number

theme.lithologyTexture.stroke?

string

theme.lithologyTexture.strokeWidth?

number

theme.markers?

{ color?: string; fill?: string; fontFamily?: string; fontSize?: number; fontWeight?: string | number; stroke?: string; strokeWidth?: number; }

theme.markers.color?

string

theme.markers.fill?

string

theme.markers.fontFamily?

string

theme.markers.fontSize?

number

theme.markers.fontWeight?

string | number

theme.markers.stroke?

string

theme.markers.strokeWidth?

number

theme.overlap?

{ fontFamily?: string; fontSize?: number; labelColor?: string; ruleStroke?: string; size?: number; stroke?: string; strokeWidth?: number; }

theme.overlap.fontFamily?

string

theme.overlap.fontSize?

number

theme.overlap.labelColor?

string

theme.overlap.ruleStroke?

string

theme.overlap.size?

number

Spacing of the hatch lines in pixels.

theme.overlap.stroke?

string

theme.overlap.strokeWidth?

number

theme.overview?

{ emptyFill?: string; stroke?: string; strokeWidth?: number; windowStroke?: string; windowStrokeWidth?: number; }

theme.overview.emptyFill?

string

Fill of layers without a color.

theme.overview.stroke?

string

theme.overview.strokeWidth?

number

theme.overview.windowStroke?

string

Outline of the window marking the panel's depth range.

theme.overview.windowStrokeWidth?

number

theme.pump?

{ fill?: string; riserFill?: string; riserStroke?: string; riserStrokeWidth?: number; stroke?: string; strokeWidth?: number; }

Current pump body and its riser pipe (.well v2.3 pump_installations).

theme.pump.fill?

string

theme.pump.riserFill?

string

Riser interior: a tone between the casing's and the body's, so the riser reads as part of the pump, not as a casing.

theme.pump.riserStroke?

string

theme.pump.riserStrokeWidth?

number

theme.pump.stroke?

string

theme.pump.strokeWidth?

number

theme.reduction?

{ fill?: string; stroke?: string; strokeWidth?: number; }

theme.reduction.fill?

string

theme.reduction.stroke?

string

theme.reduction.strokeWidth?

number

theme.surfaceCase?

{ stroke?: string; strokeWidth?: number; }

theme.surfaceCase.stroke?

string

theme.surfaceCase.strokeWidth?

number

theme.unitLabels?

{ aquiferFill?: string; fontFamily?: string; fontSize?: number; fontWeight?: string | number; geologicFill?: string; stroke?: string; strokeWidth?: number; }

theme.unitLabels.aquiferFill?

string

theme.unitLabels.fontFamily?

string

theme.unitLabels.fontSize?

number

theme.unitLabels.fontWeight?

string | number

theme.unitLabels.geologicFill?

string

theme.unitLabels.stroke?

string

theme.unitLabels.strokeWidth?

number

theme.wellCase?

{ fill?: string; stroke?: string; strokeWidth?: number; }

theme.wellCase.fill?

string

theme.wellCase.stroke?

string

theme.wellCase.strokeWidth?

number

theme.wellScreen?

{ endDasharray?: string; endStrokeWidth?: number; stroke?: string; strokeWidth?: number; }

theme.wellScreen.endDasharray?

string

theme.wellScreen.endStrokeWidth?

number

Width of the dashed line at each screen's top and base.

theme.wellScreen.stroke?

string

theme.wellScreen.strokeWidth?

number

units?

Units

Active measurement units (length and diameter).

Returns

WellRenderer

Properties

classes

classes: ComponentsClassNames = DEFAULT_COMPONENTS_CLASS_NAMES

Methods

clear()

clear(): void

Removes everything drawn on every panel (layers, labels, axis, highlights) and keeps the structure prepareSvg() built, so the next draw() needs no new prepareSvg(). draw() calls it for an empty well.

Returns

void

draw()

draw(profile, options?): void

Renders the well profile into all configured SVG panels. Layers the profile no longer has are removed; an empty well (isWellEmpty) clears the panels (see clear).

Parameters

profile

RenderableWell

The well data to render.

options?

highlights?

Highlights

Highlight overlays to display on top of the profile.

locale?

"en" | "pt"

Override the instance-level locale for this render.

units?

Units

Override the instance-level measurement units for this render.

Returns

void

getLegendItems()

getLegendItems(profile): WellLegendItem

Lists the legend entries profile needs, labeled from renderConfig.legend.labels.

Parameters

profile

Well

Returns

WellLegendItem

getZoomScale()

getZoomScale(): number

Current zoom scale factor of the first panel (1 = initial/fit). Returns 1 if zoom/pan is disabled or prepareSvg() hasn't run yet.

Returns

number

prepareSvg()

prepareSvg(): Promise<void>

Initialises the SVG DOM structure and preloads FGDC textures. Must be called once before the first draw().

Returns

Promise<void>

renderLegend()

renderLegend(selector, profile): void

Renders a standalone legend into the element matched by selector.

Parameters

selector

string

profile

Well

Returns

void

renderLegendSymbol()

renderLegendSymbol(selector, item): void

Renders one legend entry's symbol (see getLegendItems) into its own SVG matched by selector, with the textures it needs defined inside.

Parameters

selector

string

item

WellLegendItem

Returns

void

renderLithologySwatch()

renderLithologySwatch(selector, layer, size?): void

Renders one lithology layer's fill as a size×size square into its own SVG matched by selector, with its texture defined inside (e.g. for a swatch in a PDF table). Call after prepareSvg(), which loads the FGDC textures.

Parameters

selector

string

layer

Lithology

size?

number = 10

Returns

void

resetZoom()

resetZoom(): void

Resets zoom/pan on every panel back to renderConfig.zoomLevel (defaults to 1, i.e. the initial fit-to-container view).

Returns

void

zoomBy()

zoomBy(factor): void

Multiplies the current zoom scale by factor (e.g. 1.25 to zoom in, 1 / 1.25 to zoom out) on every panel. No-op if both renderConfig.zoom and renderConfig.pan are disabled (no zoom behavior was attached).

Parameters

factor

number

Returns

void