A Tick Curve is an alternative to Log Curves as a visual representation of Log Data. Unlike a Log Curve, which is composed of a single continuous curve, a Tick Curve is a collection of ticks and labels.
In the examples below, the same LogData is represented as a LogCurve (with values shown) in the left track, and the corresponding TickCurve in the right track.
# Basic Tick Curve
The example below is a visualization of a Log Curve and a Tick Curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TickCurve } from "@int/geotoolkit/welllog/TickCurve.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.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/TickCurve/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget({
"tools": {
"crosshair": {
"enabled": false
}
}
}).setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 500);
widget.addTrack(TrackType.IndexTrack);
const data = generateData();
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextAnchorType(AnchorType.LeftCenter).setTextStyle({
"color": "#757575",
"font": "bold 11px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
new TickCurve(data).setVisibleValue(true)
]);
widget.addTrack(TrackType.IndexTrack);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Custom Categories & Category Callback
Each Tick Curve is composed of two parts: 'categories', which are defined via setCategories, that define the visual properties of the ticks and a 'callback' function, defined via setCategoryCallback, that determines to which defined category a tick belongs.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TickCurve } from "@int/geotoolkit/welllog/TickCurve.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.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/TickCurve/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget({
"tools": {
"crosshair": {
"enabled": false
}
}
}).setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 500);
widget.addTrack(TrackType.IndexTrack);
const data = generateData();
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(data).setVisibleValue(true).setTextAnchorType(AnchorType.LeftCenter).setTextStyle({
"color": "#757575",
"font": "bold 11px Roboto"
})
]);
widget.addTrack(TrackType.IndexTrack);
const middle = (data.getMaxValue() + data.getMinValue()) / 2;
widget.addTrack(TrackType.LinearTrack).addChild([
new TickCurve(data).setVisibleValue(true).setCategories([{
"key": "long",
"length": 15,
"linestyle": {
"color": "red",
"width": 2,
"pixelsnapmode": true
},
"textstyle": {
"color": "#757575",
"font": "bold 11px Roboto"
}
}, {
"key": "short",
"length": 7,
"linestyle": {
"color": "red",
"pixelsnapmode": true
},
"textstyle": {
"color": "#757575",
"font": "normal 9px Roboto"
}
}]).setCategoryCallback((index, depth, value) => value < middle ? "short" : "long")
]);
widget.addTrack(TrackType.IndexTrack);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));