This tutorial demonstrates how to use the Deviated Schematics Widget for data visualization. The Deviated Schematics Widget is derived from geotoolkit/widgets/AnnotatedWidget and uses geotoolkit/schematics/data/WellBoreData as the data model. Familiarization with SchematicsWidget - Basics tutorial in CarnacJS will be beneficial.
# Widget Initialization
Widget initialization is similar to a vertical, non-deviated schematic widget. First, create a new instance of geotoolkit/schematics/widgets/DeviatedSchematicWidget. The only required parameter is the data object. data will contain the elements property that contains the WellBoreData and the trajectory property that provides data on how the well deviates.
After creating the DeviatedSchematicWidget object, instantiate a new geotoolkit/plot/Plot instance and add the widget as a root.
import { Axis } from "@int/geotoolkit/axis/Axis.ts";
import { NumberFormat } from "@int/geotoolkit/util/NumberFormat.ts";
import { from } from "@int/geotoolkit/selection/from.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import { DisplayMode } from "@int/geotoolkit/schematics/scene/WellBoreWithLabels.ts";
import { LocationType } from "@int/geotoolkit/schematics/labeling/LocationType.ts";
import { Trajectory2d } from "@int/geotoolkit/deviation/Trajectory2d.ts";
import data from "/src/assets/data/wellBoreData.json?import";
function createScene(canvas) {
function createWellBoreData() {
return new WellBoreData(data);
}
const wellBoreData = createWellBoreData();
const geometryBounds = wellBoreData.getGeometryBounds();
const minDepth = geometryBounds.getTop();
const maxDepth = geometryBounds.getBottom();
const trajectory = new Trajectory2d({
"data": {
"x": [0, 0, 200],
"y": [0, 250, 500],
"d": [minDepth, (minDepth + maxDepth) / 2, maxDepth]
}
});
const options = {
"north": {
"title": {
"text": "Deviated Schematics Widget"
}
},
"gap": {
"left": {
"size": "180px",
"resizable": false
},
"right": {
"size": "100px",
"resizable": false
},
"bottom": {
"size": "50px",
"resizable": false
}
},
"trajectory": {
"stations": {
"visible": true
}
},
"data": {
"elements": wellBoreData,
"trajectory": trajectory
}
};
const widget = new CompositeSchematicsWidget(options);
widget.setDisplayMode(DisplayMode.Deviated);
widget.setProperties({
"labeling": {
"defaultlocation": LocationType.Auto
}
});
from(widget).where((child) => child instanceof Axis).selectToArray().forEach((axis) => {
axis.getTickGenerator().setLabelFormat("major", new NumberFormat({ "maximumfractiondigits": 0 }));
});
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Data Initialization
Two objects are required to instantiate an instance of DeviatedSchematicsWidget:
- An
elementsobject, which is an object containing WellBoreData to draw the well schematic. Here we will use data from a separate file,wellboredata.jsonand create a new WellBoreData object. - A
trajectoryobject created by the Trajectory2d constructor.
# Changing Settings
Options can be provided to the widget either as a property in the initial constructor, or by using the setOptions() function after the widget object has been initialized. See the DeviatedSchematicWidget for a full list of settings that can be changed.