Legends

A profile uses symbols for materials and features: gravel pack and seal, casing and screen, fractures that yield water, dry and wet caves. A legend explains them. @welldot/render offers a ready-made legend panel and the building blocks for your own.

A legend panel

<svg id="legend"></svg>

renderer.renderLegend('#legend', well);

renderLegend(selector, well) draws a horizontal legend with only the entries the well needs, labelled from renderConfig.legend.labels (English after applyRenderLocale(config, 'en'), see Locale and units).

Without a renderer instance, drawWellLegend does the same:

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

const { legend } = applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en');
drawWellLegend('#legend', well, { config: legend });

It sets the SVG to 0 × 0 when the well needs no legend entry. Without config the labels are the Portuguese defaults.

Your own layout

To put the legend in a table, an HTML list or a PDF, list the entries and draw each symbol on its own:

import { drawWellLegendSymbol, getWellLegendItems } from '@welldot/render';

const items = getWellLegendItems(well); // [{ key: 'boreHole', label: '…' }, …] in display order

const list = document.querySelector('#legend-list')!;
items.forEach((item, i) => {
  const li = document.createElement('li');
  li.innerHTML = `<svg id="symbol-${i}"></svg> <span>${item.label}</span>`;
  list.append(li);
  drawWellLegendSymbol(`#symbol-${i}`, item);
});

Each symbol is a 28 × 16 px SVG with every texture it uses defined inside, so its outerHTML renders on its own, for example when embedded in a PDF. On a renderer instance, renderer.getLegendItems(well) and renderer.renderLegendSymbol(selector, item) do the same with the renderer's labels and theme.

Entry keys are the keys of renderConfig.legend.labels: boreHole, surfaceCase, holeFillGravel, holeFillSeal, wellCase, wellScreen, reduction, centralizer, pump, cementPad, fractureSingle, fractureSwarm, fractureWater, caveDry, caveWet, conflict.

Lithology swatches

Lithology layers are explained by their description rather than a fixed legend. To show a layer's fill next to its description in a table, draw a swatch after prepareSvg():

well.lithology.forEach((layer, i) => {
  renderer.renderLithologySwatch(`#swatch-${i}`, layer, 12); // a 12 × 12 px square
});