LogBarVisual is another type of visual supported by WellLogJS. A LogBarVisual needs a well log data source either passed into its constructor or set using the setData method. The visual will not render if there is no data associated with it.
Properties like LineStyle, FillStyle, BarWidth(s), BarSpacing, etc. can be modified. The limits are calculated automatically by default, but manual limits can be set by disabling autolimits.
# Example Log Bar Visuals
Here are three examples of LogBarVisuals: default (left), manual limits with custom bar widths (center), and overlapping bar widths using device units (right). See the code below.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { UnitFactory } from "@int/geotoolkit/util/UnitFactory.ts";
import { Range } from "@int/geotoolkit/util/Range.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { LogBarVisual } from "@int/geotoolkit/welllog/LogBarVisual.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { ScaleType } from "@int/geotoolkit/welllog/data/ScaleType.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { DiscreteGradientColorProvider } from "@int/geotoolkit/util/DiscreteGradientColorProvider.ts";
import { LogGradientStyle } from "@int/geotoolkit/welllog/attributes/LogGradientStyle.ts";
import { loadResources } from "/src/helpers/resources.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
loadResources("patterns");
function buildLogGradientStyle(data, scale) {
const colorProvider = new DiscreteGradientColorProvider({ "bins": 255 }).setScale(scale || KnownScales.Autumn, data.getMinValue(), data.getMaxValue());
return new LogGradientStyle().setColorProvider(colorProvider).setLogData(data);
}
function createScene(canvas) {
const widget = createWellLogWidget({
"tools": {
"crosshair": {
"enabled": false
}
}
}).setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 500);
const depths = [
100,
116,
132,
148,
164,
180,
196,
212,
228,
244,
260,
276,
292,
308,
324,
340,
356,
372,
388,
404,
420,
436,
452,
468,
484,
500
];
const data1 = new LogData({
"name": "CALI",
"depths": depths,
"values": [20, 25, 30, 35, 30, 25, 40, 25, 30, 35, 40, 100, 80, 90, 100, 90, 95, 90, 40, 90, 40, 35, 40, 35, 40, 35]
});
const curve1 = new LogCurve(data1).setScaleType(ScaleType.Logarithmic).setLineStyle({
"color": "#2196f3",
"width": 2
});
const min = curve1.getMinimumNormalizationLimit(), max = curve1.getMaximumNormalizationLimit();
curve1.setNormalizationLimits(max, min);
const logBarVisual1 = new LogBarVisual({
"data": data1,
"linestyle": {
"color": "#2196f3",
"width": 2,
"pixelsnapmode": true
},
"fillstyle": "#ef6c00"
}).setScaleType(ScaleType.Logarithmic).setReverse(true);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LogTrack).addChild([
logBarVisual1,
curve1
]);
const data2 = new LogData({
"name": "GR",
"depths": depths,
"values": [80, 75, 80, 60, 75, 60, 90, 75, 85, 70, 80, 50, 45, 50, 45, 50, 90, 10, 80, 76, 79, 40, 35, 40, 100, 80]
});
const curve2 = new LogCurve(data2).setLineStyle({
"color": "#ef6c00",
"width": 2
}).setNormalizationLimits(0, 150);
const logBarVisual2 = new LogBarVisual({
"data": data2,
"linestyle": {
"color": "#ef6c00",
"width": 2,
"pixelsnapmode": true
},
"fillstyle": {
"color": "#fdd835",
"pattern": PatternFactory.getInstance().getPattern("lime")
},
"limits": new Range(0, 150),
"enableautolimits": false,
"barwidth": [5, 10, 15, 10, 5, 10, 15, 10, 5, 10, 15, 10, 5, 10, 15, 10, 5, 10, 15, 10, 5, 10, 15, 10, 5, 10]
});
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
logBarVisual2,
curve2
]);
const curve3 = new LogCurve(data1).setLineStyle("#e64a19");
const logBarVisual3 = new LogBarVisual({
"data": data1,
"linestyle": {
"color": "#e64a19",
"pixelsnapmode": true
},
"fillstyle": {
"color": "#ef6c00",
"pattern": PatternFactory.getInstance().getPattern("siltstone")
},
"unit": UnitFactory.getInstance().getUnit("px"),
"barspacing": 10,
"barwidth": 30
}).setGradientFillStyle(buildLogGradientStyle(data1));
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
logBarVisual3,
curve3
]);
widget.addTrack(TrackType.IndexTrack);
widget.setHeaderHeight("auto");
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Stacked Bar
This example shows how to create a geotoolkit/welllog/LogBarVisual with stacked bar.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Range } from "@int/geotoolkit/util/Range.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { LogBarVisual } from "@int/geotoolkit/welllog/LogBarVisual.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.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);
const depths = [
100,
116,
132,
148,
164,
180,
196,
212,
228,
244,
260,
276,
292,
308,
324,
340,
356,
372,
388,
404,
420,
436,
452,
468,
484
];
const depths2 = [100, 132, 148, 164, 180, 196, 212, 228, 244, 260, 276, 292, 308, 324, 340, 356, 388, 404, 420, 436, 452, 468, 484];
const data1 = new LogData({
"name": "CALI",
"depths": depths,
"values": [20, 25, 30, 35, 30, 25, 40, 25, 30, 35, 40, 100, 80, 90, 100, 90, 95, 90, 40, 90, 40, 35, 40, 35, 40]
});
const logBarVisual1 = new LogBarVisual({
"data": data1,
"linestyle": {
"color": "#2196f3",
"width": 3,
"pixelsnapmode": true
},
"enableautolimits": false,
"limits": new Range(0, 400),
"fillstyle": KnownColors.Orange
});
const data2 = new LogData({
"name": "GR",
"depths": depths2,
"values": [80, 75, 80, 60, 75, 60, 90, 75, 85, 70, 80, 50, 45, 50, 45, 50, 90, 10, 80, 76, 79, 40, 35]
});
const logBarVisual2 = new LogBarVisual({
"data": data2,
"linestyle": {
"color": "#2196f3",
"width": 3,
"pixelsnapmode": true
},
"fillstyle": {
"color": "#fdd835"
},
"limits": new Range(0, 400),
"enableautolimits": false
});
const logBarVisual3 = new LogBarVisual({
"data": data1,
"linestyle": {
"color": "#2196f3",
"width": 3,
"pixelsnapmode": true
},
"fillstyle": KnownColors.Green,
"enableautolimits": false,
"limits": new Range(0, 400)
});
const logBarVisual4 = new LogBarVisual({
"data": data2,
"linestyle": {
"color": "#2196f3",
"width": 3,
"pixelsnapmode": true
},
"fillstyle": {
"color": KnownColors.Violet
},
"limits": new Range(0, 400),
"enableautolimits": false
});
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).setWidth(400).addChild([
logBarVisual1,
logBarVisual2,
logBarVisual3,
logBarVisual4
]);
logBarVisual2.setReferenceBar(logBarVisual1);
logBarVisual3.setReferenceBar(logBarVisual2);
logBarVisual4.setReferenceBar(logBarVisual3);
widget.addTrack(TrackType.IndexTrack);
widget.setHeaderHeight("auto");
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));