Visual Components
/
/
/
Log Visuals
Last updated

Log Visuals

This Log Visuals tutorial demonstrates adding log visuals to the WellLog widget. Log visuals are graphical representation of data in the form of curves, fills, lithologies, markers, labels, etc.

# Marker

Create a widget, then add tracks and curves to it. Add a marker visual to the track and insert the widget in the plot. See the code below.

Please refer to Markers Tutorial for more details on marker styles, shapes etc.

import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { LogMarker } from "@int/geotoolkit/welllog/LogMarker.ts";
import { createCurve } from "/src/code/WellLog/utils/curveData.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createMarker(depth) {
  return new LogMarker().setDepthValue(depth, "Marker").setLineStyle({
    "color": "#ef6c00",
    "width": 2
  }).setTextStyle({
    "color": "#ef6c00",
    "font": "bold 15px Arial"
  });
}
function createScene(canvas) {
  const widget = createWellLogWidget({
    "track": {
      "header": {
        "visibletracktitle": true
      }
    }
  }).setAxisHeaderType(HeaderType.Simple).scale(0.5);
  widget.addTrack(TrackType.IndexTrack);
  widget.addTrack(TrackType.LinearTrack).addChild([
    createCurve(4500, 10, "GR", "#7cb342"),
    createCurve(4500, 10, "CALI", "#ef6c00"),
    createMarker(5e3)
  ]);
  widget.setHeaderHeight("auto");
  return new Plot({
    "canvaselement": canvas,
    "root": widget
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Composite Curve with Fill

Add a composite curve with left and right fill to the widget. It is necessary to specify a left and right reference point set to fill from the left and right sides. The fill colors also need to be specified. See the code below.

Please refer to Curve Fill Tutorial for more details on Fills.


.cg-tooltip-holder {
  position: relative;
}

.cg-tooltip {
  position: absolute;
  display: block;
  padding: 2px 12px 3px 7px;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: white !important;
  opacity: 0.9;
  color: #333333;
  border: solid 1px gray;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
  position: absolute;
  display: block;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 7px;
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #938e8e;
  opacity: 0.8;
  text-align: left;
  box-shadow: 3px 3px 10px #888;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cg-tooltip-container {
    border-radius: 0;
  }
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 5px solid  #938e8e;
  transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 4px solid transparent;
  border-left: 0;
  border-right: 4px solid #f7f7f7;
  transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid #938e8e;
  transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #f7f7f7;
  transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 5px solid #938e8e;
  transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 4px solid #f7f7f7;
  transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top: 5px solid #938e8e;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 4px solid #f7f7f7;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
  text-transform: none;
}

.cg-tooltip-item-name {
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}
.cg-tooltip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 100%;
  margin: 1px 0;
}
.cg-tooltip-title {
  font-size: 13px;
  height: 14px;
  text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
  margin-right: 0 !important;
}
.cg-tooltip-title-name {
  vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
  margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
  margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
    margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
  display: inline-flex;
  min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
  margin-right: 3px;
  background-color: transparent;
  display: block;
}
.cg-tooltip-symbol > img {
  display: block;
}
.cg-tooltip-list-cell {
  display: inline-flex;
}
.cg-tooltip-list-symbol {
  display: block;
  margin-right: 3px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
  border-radius: 4px;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  display: inline-block;
}
.cg-tooltip-title-legacy {
  font-weight: 900;
}

/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.4);
}

# Lithology

Add a lithology to the widget. A lithology is a graphical representation of a type of rock.

Please refer to Lithology Tutorial for more details on adding lithology to curves. See the code below.

import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LogLithology } from "@int/geotoolkit/welllog/LogLithology.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { loadResources } from "/src/helpers/resources.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
loadResources("patterns");
function createScene(canvas) {
  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).scale(0.5);
  widget.addTrack(TrackType.IndexTrack);
  const patternFactory = PatternFactory.getInstance();
  const fillStyles = {
    "chert": { "color": "#7cb342", "pattern": patternFactory.getPattern("chert") },
    "lime": { "color": "#fdd835", "pattern": patternFactory.getPattern("lime") },
    "shale": { "color": "#2196f3", "pattern": patternFactory.getPattern("shale") }
  };
  const titles = ["chert", "lime", "shale", "lime", "chert", "shale", "lime", "chert", "shale", "lime", "chert", "shale", "lime"];
  const lithology = new LogLithology({
    "depths": [4500, 4600, 4700, 4800, 4900, 5e3, 5100, 5200, 5300, 5400, 5500, 5600, 5700, 5800],
    "titles": titles,
    "fillstyles": titles.map((value) => fillStyles[value])
  });
  widget.addTrack(TrackType.LinearTrack).addChild(lithology);
  widget.getHeaderContainer().rebuild();
  widget.setHeaderHeight("auto");
  return new Plot({
    "canvaselement": canvas,
    "root": widget
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Curve Symbol

Add a curve symbol to the WellLog widget. See the example below.

import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createCurve } from "/src/code/WellLog/utils/curveData.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).scale(10);
  widget.addTrack(TrackType.IndexTrack);
  const symbol = new SymbolShape({
    "width": 10,
    "height": 10,
    "alignment": AnchorType.Center,
    "painter": DiamondPainter,
    "linestyle": "#ef6c00",
    "fillstyle": "#ef6c00"
  });
  widget.addTrack(TrackType.LinearTrack).addChild([
    createCurve(4500, 10, "GR", "#7cb342").setSymbol(symbol).setDisplayMode(["line", "symbol"]).setSymbolDecimationStep(1)
  ]);
  widget.setHeaderHeight("auto");
  return new Plot({
    "canvaselement": canvas,
    "root": widget
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

Log Cutoff

Logsinusoid