This tutorial demonstrates the Well Log curve's "value" display mode capabilities. It utilizes the built-in functions of the visual geotoolkit/welllog/LogCurve to enable or disable the value display of the curve. Several attributes like text style, color, alignment and location of the values can be modified. The curve can also display values as bars with different styles.
# Display Values on Curve
This example shows how to display curve values on the curve and how to change the displayed value's attributes such as color and font. A custom text formatter can be assigned while displaying the values.
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 { createCurve, generateData } from "/src/code/WellLog/Visuals/ValueCurve/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
const data = generateData();
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextStyle({
"color": "#757575",
"font": "bold 11px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextStyle({
"color": "#ef6c00",
"font": "bold 11px Roboto"
}).setValueFormat({
"maximumfractiondigits": 1,
"format": "#,###.0"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.getToolByName("cross-hair").setEnabled(false);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Customize Text Location
This example shows how to change the location of the displayed values on the track. Use the enum geotoolkit/util/AnchorType to define the location of the text.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { TextReference } from "@int/geotoolkit/welllog/LogCurve.ts";
import { createCurve, generateData } from "/src/code/WellLog/Visuals/ValueCurve/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
const data = generateData();
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextAnchorType(AnchorType.RightCenter).setTextReference(TextReference.Sample).setHideOverlappedValues(true).setTextStyle({
"color": "#1565c0",
"font": "bold 12px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextAnchorType(AnchorType.RightCenter).setTextReference(TextReference.Track).setHideOverlappedValues(true).setTextAutoAlignment(true).setTextAutoAlignmentOffset({ x: 5, y: 0 }).setTextStyle({
"color": "#1565c0",
"font": "bold 12px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.getToolByName("cross-hair").setEnabled(false);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Decimation Step
This example shows how the number of values displayed along the curve can be controlled by defining a decimation step. Decimation defines how much data is displayed. By default, decimation is set to 1, which displays all values. In the example below, decimation is set to 4, meaning that every fourth value is displayed.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { TextReference } from "@int/geotoolkit/welllog/LogCurve.ts";
import { createCurve, generateData } from "/src/code/WellLog/Visuals/ValueCurve/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
const data = generateData();
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextAnchorType(AnchorType.Center).setTextReference(TextReference.Track).setTextStyle({
"color": "#e64a19",
"font": "bold 12px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextAnchorType(AnchorType.Center).setTextReference(TextReference.Track).setTextDecimationStep(4).setTextStyle({
"color": "#e64a19",
"font": "bold 12px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.getToolByName("cross-hair").setEnabled(false);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Display Bars
This example shows how to display curve values as left or right aligned bars. Custom line styles (different from the curve's line style) can be assigned to the bars.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createCurve, generateData } from "/src/code/WellLog/Visuals/ValueCurve/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
const data = generateData(true);
const symbol = new SymbolShape({
"width": 10,
"height": 10,
"alignment": AnchorType.Center,
"painter": DiamondPainter,
"linestyle": "#000000",
"fillstyle": "#ff0000"
});
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setVisibleLine(false).setVisibleBar(true).setTextAnchorType(AnchorType.LeftCenter).setVisibleNullValueSymbol(true).setNullValueSymbol(symbol)
]);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setVisibleLine(false).setVisibleBar(true).setBarsRightAligned(true).setTextAnchorType(AnchorType.RightCenter).setBarLineStyle({
"color": "#757575",
"width": 2
}).setTextStyle({
"color": "#ef6c00",
"font": "bold 11px Roboto"
}).setTextDecimationStep(3).setVisibleNullValueSymbol(true).setNullValueSymbol(symbol)
]);
widget.addTrack(TrackType.IndexTrack);
widget.getToolByName("cross-hair").setEnabled(false);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));