A Composite Log Curve is a graphical representation of log data that can be integrated into Log Tracks, offering a more convenient method for customizing and applying optional left and right fill to a curve, as opposed to the standard Log Curve.
# Create simple CompositeLogCurve
The following example shows how to create a composite log curve
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { CompositeLogCurve } from "@int/geotoolkit/welllog/CompositeLogCurve.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { curveData } from "/src/code/WellLog/utils/curveData.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createCompositeCurve(from, step, curveMnemonic, color) {
const values = curveData[curveMnemonic];
const depths = values.map((v, i) => from + i * step);
const data = new LogData(depths, values);
return new CompositeLogCurve(data).setName(curveMnemonic).setLineStyle(color);
}
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).scale(0.5);
widget.addTrack(TrackType.IndexTrack);
const curve = createCompositeCurve(4500, 10, "GR", "#7cb342");
widget.addTrack(TrackType.LinearTrack).addChild(curve);
widget.setHeaderHeight("auto");
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# CompositeLogCurve with fills
In this tutorial, we added a CompositeLogCurve with left and right fill options in the widget. To do so, you must set left and right reference points to specify the filling from both sides, and also specify the fill colors as well. Please refer to the provided code for details.
Please refer to Curve Fill Tutorial for more details on Fills.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { CompositeLogCurve } from "@int/geotoolkit/welllog/CompositeLogCurve.ts";
import { FillType } from "@int/geotoolkit/welllog/LogFill.ts";
import { LogReferenceLine } from "@int/geotoolkit/welllog/LogReferenceLine.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { curveData } from "/src/code/WellLog/utils/curveData.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createCompositeCurve(from, step, curveMnemonic, color) {
const values = curveData[curveMnemonic];
const depths = values.map((v, i) => from + i * step);
const data = new LogData(depths, values);
return new CompositeLogCurve(data).setName(curveMnemonic).setLeftReferencePointSet(new LogReferenceLine(0)).setRightReferencePointSet(new LogReferenceLine(1)).setLineStyle(color);
}
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).scale(0.5);
widget.addTrack(TrackType.IndexTrack);
const curve = createCompositeCurve(4500, 10, "GR", "#7cb342");
const rightFillStyle = "#dcedc8";
curve.getRightFill().setFillStyle(rightFillStyle).setRightFillStyle(rightFillStyle).setFillType(FillType.Left);
const leftFillStyle = "#ef6c00";
curve.getLeftFill().setFillStyle(leftFillStyle).setLeftFillStyle(leftFillStyle).setFillType(FillType.Right);
widget.addTrack(TrackType.LinearTrack).addChild(curve);
return {
plot: new Plot({
"canvaselement": canvas,
"root": widget
}),
curve
};
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# CompositeLogCurve with fills with pattern
In this tutorial, we've shown how to use a CompositeLogCurve in the widget. We've customized it to have both left and right fill options as well as fill patterns. The rest of the setup is similar to adding a simple LogFill to CompositeLogCurve. You can find the exact code examples below for more details.
Please refer to Curve Fill Tutorial for more details on Fills.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { CompositeLogCurve } from "@int/geotoolkit/welllog/CompositeLogCurve.ts";
import { FillType } from "@int/geotoolkit/welllog/LogFill.ts";
import { LogReferenceLine } from "@int/geotoolkit/welllog/LogReferenceLine.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { curveData } from "/src/code/WellLog/utils/curveData.ts";
import { loadResources } from "/src/helpers/resources.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
loadResources("patterns");
function createCompositeCurve(from, step, curveMnemonic, color) {
const values = curveData[curveMnemonic];
const depths = values.map((v, i) => from + i * step);
const data = new LogData(depths, values);
return new CompositeLogCurve(data).setName(curveMnemonic).setLeftReferencePointSet(new LogReferenceLine(0)).setRightReferencePointSet(new LogReferenceLine(1)).setLineStyle(color);
}
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).scale(0.5);
widget.addTrack(TrackType.IndexTrack);
const curve = createCompositeCurve(4500, 10, "GR", "#7cb342");
const patternFactory = PatternFactory.getInstance();
const rightFillStyle = { "color": "#dcedc8", "pattern": patternFactory.getPattern("chert") };
curve.getRightFill().setFillStyle(rightFillStyle).setRightFillStyle(rightFillStyle).setFillType(FillType.Left);
const leftFillStyle = { "color": "#ef6c00", "pattern": patternFactory.getPattern("shale") };
curve.getLeftFill().setFillStyle(leftFillStyle).setLeftFillStyle(leftFillStyle).setFillType(FillType.Right);
widget.addTrack(TrackType.LinearTrack).addChild(curve);
widget.setHeaderHeight("auto");
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));