As mentioned in the WellLog Introduction , LogFills are also log visuals (graphical representations of log data) added to the LogTracks. In this tutorial, create different types of fills for WellLog curves. A fill needs two curves or reference lines passed into the constructor and a fill style to be assigned before the fill will display. Fills can be solid colors, gradients, or fillstyles (patterns and images).
# Simple Fill
A simple fill uses a continuous solid color, gradient or pattern (fillstyle) to fill only the space between the left track border and the curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.ts";
import { LogFill } from "@int/geotoolkit/welllog/LogFill.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 { createCurve, data } from "/src/code/WellLog/Visuals/CurveFill/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);
let orangeCurve, redCurve;
widget.addTrack(TrackType.LinearTrack).addChild([
orangeCurve = createCurve(data[0], "#ef6c00"),
new LogFill({
"curve1": orangeCurve,
"fillstyle": "#ef6c00"
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
redCurve = createCurve(data[1], "#e64a19"),
orangeCurve = createCurve(data[0], "#ef6c00"),
new LogFill({
"curve2": redCurve,
"curve1": orangeCurve,
"fillstyle": new LinearGradientStyle({
"startcolor": "#ffe0b2",
"endcolor": "#ff7043",
"startpoint": new Point(0.75, 0),
"endpoint": new Point(0, 0.1)
})
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
orangeCurve = createCurve(data[0], "#ef6c00"),
new LogFill({
"curve1": 0.5,
"curve2": orangeCurve,
"fillstyle": {
"color": "#ffe0b2",
"pattern": PatternFactory.getInstance().getPattern("lime")
}
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Left Fill
A left fill uses a continuous solid color, gradient or pattern (fillstyle) to fill only the space to the left of the curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.ts";
import { FillType, LogFill } from "@int/geotoolkit/welllog/LogFill.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 { createCurve, data } from "/src/code/WellLog/Visuals/CurveFill/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);
let greenCurve, blueCurve;
widget.addTrack(TrackType.LinearTrack).addChild([
greenCurve = createCurve(data[0], "#7cb342"),
new LogFill({
"curve1": greenCurve,
"curve2": void 0,
"fillstyle": "#dcedc8",
"filltype": FillType.Left
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
blueCurve = createCurve(data[1], "#2196f3"),
greenCurve = createCurve(data[0], "#7cb342"),
new LogFill({
"curve1": greenCurve,
"curve2": blueCurve,
"filltype": FillType.Left,
"fillstyle": new LinearGradientStyle({
"startcolor": "#7cb342",
"endcolor": "#2196f3",
"startpoint": new Point(0.75, 0),
"endpoint": new Point(0, 0.1)
})
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
greenCurve = createCurve(data[0], "#7cb342"),
new LogFill({
"curve1": greenCurve,
"curve2": 0.5,
"filltype": FillType.Left,
"fillstyle": {
"color": "#dcedc8",
"pattern": PatternFactory.getInstance().getPattern("lime")
}
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Right Fill
A right fill uses a continuous solid color, gradient or pattern (fillstyle) to fill only the space to the right of the curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.ts";
import { FillType, LogFill } from "@int/geotoolkit/welllog/LogFill.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 { createCurve, data } from "/src/code/WellLog/Visuals/CurveFill/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);
let darkgrayCurve, grayCurve;
widget.addTrack(TrackType.LinearTrack).addChild([
darkgrayCurve = createCurve(data[0], "#757575"),
new LogFill({
"curve1": darkgrayCurve,
"fillstyle": "#bdbdbd",
"filltype": FillType.Right
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
grayCurve = createCurve(data[1], "#bdbdbd"),
darkgrayCurve = createCurve(data[0], "#757575"),
new LogFill({
"curve1": darkgrayCurve,
"curve2": grayCurve,
"filltype": FillType.Right,
"fillstyle": new LinearGradientStyle({
"startcolor": "#eeeeee",
"endcolor": "#757575",
"startpoint": new Point(0.75, 0),
"endpoint": new Point(0, 0.1)
})
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
darkgrayCurve = createCurve(data[0], "#757575"),
new LogFill({
"curve1": darkgrayCurve,
"curve2": 0.5,
"filltype": FillType.Right,
"fillstyle": {
"color": "#bdbdbd",
"pattern": PatternFactory.getInstance().getPattern("lime")
}
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Dual Fill
A dual fill uses two different solid colors, gradients or patterns (fillstyles) to fill both the spaces to the left and to the right of the curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.ts";
import { FillType, LogFill } from "@int/geotoolkit/welllog/LogFill.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 { createCurve, data } from "/src/code/WellLog/Visuals/CurveFill/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);
let orangeCurve, darkgrayCurve;
widget.addTrack(TrackType.LinearTrack).addChild([
orangeCurve = createCurve(data[0], "#ef6c00"),
new LogFill({
"curve1": orangeCurve,
"filltype": FillType.Dual,
"leftfillstyle": "yellow",
"rightfillstyle": "orange"
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
darkgrayCurve = createCurve(data[1], "#757575"),
orangeCurve = createCurve(data[0], "#ef6c00"),
new LogFill({
"curve1": orangeCurve,
"curve2": darkgrayCurve,
"filltype": FillType.Dual,
"leftfillstyle": new LinearGradientStyle({
"startcolor": "#eeeeee",
"endcolor": "#757575",
"startpoint": new Point(0.75, 0),
"endpoint": new Point(0, 0.1)
}),
"rightfillstyle": new LinearGradientStyle({
"startcolor": "#ef6c00",
"endcolor": "#fdd835",
"startpoint": new Point(0.75, 0),
"endpoint": new Point(0, 0.1)
})
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const pattern = PatternFactory.getInstance().getPattern("lime");
widget.addTrack(TrackType.LinearTrack).addChild([
orangeCurve = createCurve(data[0], "#ef6c00"),
new LogFill({
"curve1": orangeCurve,
"curve2": 0.5,
"filltype": FillType.Dual,
"leftfillstyle": {
"color": "#fdd835",
"pattern": pattern
},
"rightfillstyle": {
"color": "#ef6c00",
"pattern": pattern
}
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Gradient Fill
A gradient fill (blending one color into another color) uses log data and the ColorProvider to specify the gradient fill colors to fill both the spaces to the left and to the right of the curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { DiscreteGradientColorProvider } from "@int/geotoolkit/util/DiscreteGradientColorProvider.ts";
import { LogGradientStyle } from "@int/geotoolkit/welllog/attributes/LogGradientStyle.ts";
import { FillType, LogFill } from "@int/geotoolkit/welllog/LogFill.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 { createCurve, data } from "/src/code/WellLog/Visuals/CurveFill/data.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createGradientStyle(curve, scale) {
const colorProvider = new DiscreteGradientColorProvider({ "bins": 255 }).setScale(scale, 0, 1);
return new LogGradientStyle().setColorProvider(colorProvider).setLogData(curve.getDataSource());
}
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
let redCurve, darkgrayCurve;
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"filltype": FillType.Negative,
"leftfillstyle": createGradientStyle(redCurve, KnownScales.Gray)
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
darkgrayCurve = createCurve(data[1], "#757575"),
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"curve2": darkgrayCurve,
"filltype": FillType.Dual,
"leftfillstyle": createGradientStyle(redCurve, KnownScales.Gray).setTransparency(150),
"rightfillstyle": createGradientStyle(darkgrayCurve, KnownScales.Orange).setTransparency(150)
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const pattern = PatternFactory.getInstance().getPattern("lime");
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"curve2": 0.5,
"filltype": FillType.Dual,
"leftfillstyle": createGradientStyle(redCurve, KnownScales.Gray).setColor("#757575").setPattern(pattern).setRenderBackground(true).setTransparency(150),
"rightfillstyle": createGradientStyle(redCurve, KnownScales.Orange).setColor("#ef6c00").setPattern(pattern).setRenderBackground(true).setTransparency(150)
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"curve2": 0.5,
"filltype": FillType.Dual,
"leftfillstyle": createGradientStyle(redCurve, KnownScales.Gray).setColor(KnownColors.Transparent).setForegroundColor("#757575").setPattern(pattern).setRenderForeground(true),
"rightfillstyle": createGradientStyle(redCurve, KnownScales.Orange).setForegroundColor("#757575").setColor(KnownColors.Transparent).setPattern(pattern).setRenderForeground(true)
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Discrete Fill
A discrete uses log data and array of FillStyles to specify the fill color for each range.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { FillType as LogDiscreteStyleFillType, LogDiscreteStyle } from "@int/geotoolkit/welllog/attributes/LogDiscreteStyle.ts";
import { FillType, LogFill } from "@int/geotoolkit/welllog/LogFill.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 { FillStyle } from "@int/geotoolkit/attributes/FillStyle.ts";
import { DiscreteGradientColorProvider } from "@int/geotoolkit/util/DiscreteGradientColorProvider.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { createCurve, data } from "/src/code/WellLog/Visuals/CurveFill/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);
let redCurve, darkgrayCurve;
widget.addTrack(TrackType.LinearTrack).addChild([
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"filltype": FillType.Negative,
"leftfillstyle": new LogDiscreteStyle({
"type": LogDiscreteStyleFillType.Continuous,
"ranges": [
[0, 30],
[30, 50],
[50, 70],
[70, 90],
[90, 100]
],
"fillstyles": [
new FillStyle("yellowgreen", PatternFactory.getInstance().getPattern("volc")),
new FillStyle("green", PatternFactory.getInstance().getPattern("shale")),
new FillStyle("blueviolet", PatternFactory.getInstance().getPattern("salt")),
new FillStyle("gray", PatternFactory.getInstance().getPattern("lime")),
new FillStyle("orange", PatternFactory.getInstance().getPattern("sand"))
]
}).setLogData(redCurve.getDataSource())
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
darkgrayCurve = createCurve(data[1], "#757575"),
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"curve2": darkgrayCurve,
"filltype": FillType.Dual,
"leftfillstyle": new LogDiscreteStyle({
"type": LogDiscreteStyleFillType.Discrete,
"codes": [0, 30, 50, 70, 90, 120],
"fillstyles": [
new FillStyle("yellowgreen", PatternFactory.getInstance().getPattern("volc")),
new FillStyle("green", PatternFactory.getInstance().getPattern("shale")),
new FillStyle("blueviolet", PatternFactory.getInstance().getPattern("salt")),
new FillStyle("gray", PatternFactory.getInstance().getPattern("lime")),
new FillStyle("orange", PatternFactory.getInstance().getPattern("sand"))
]
}).setLogData(redCurve.getDataSource()),
"rightfillstyle": new LogDiscreteStyle({
"type": LogDiscreteStyleFillType.Discrete,
"codes": [0, 30, 50, 70, 90, 120],
"fillstyles": [
new FillStyle("yellowgreen", PatternFactory.getInstance().getPattern("volc")),
new FillStyle("green", PatternFactory.getInstance().getPattern("shale")),
new FillStyle("blueviolet", PatternFactory.getInstance().getPattern("salt")),
new FillStyle("gray", PatternFactory.getInstance().getPattern("lime")),
new FillStyle("orange", PatternFactory.getInstance().getPattern("sand"))
]
}).setLogData(darkgrayCurve.getDataSource())
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
redCurve = createCurve(data[0], "#e64a19"),
new LogFill({
"curve1": redCurve,
"curve2": 0.5,
"filltype": FillType.Dual,
"leftfillstyle": new LogDiscreteStyle({
"type": LogDiscreteStyleFillType.ColorProvider,
"colorprovider": new DiscreteGradientColorProvider({ "bins": 255 }).setScale(KnownScales.Gray, data[0].getMinValue(), data[0].getMaxValue())
}).setLogData(redCurve.getDataSource()),
"rightfillstyle": new LogDiscreteStyle({
"type": LogDiscreteStyleFillType.ColorProvider,
"colorprovider": new DiscreteGradientColorProvider({ "bins": 255 }).setScale(KnownScales.Orange, data[1].getMinValue(), data[1].getMaxValue())
}).setLogData(redCurve.getDataSource())
})
].reverse());
widget.addTrack(TrackType.IndexTrack);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));