This Schematics tutorial demonstrates how to initialize schematics components' data with custom (there: 'date-time') property and use the property as corresponding component's visibility criteria.
# Data initialization
Schematics data is stored in a WellBoreData object which is a container to hold all the schematics components. The WellBoreData object uses its addComponent method to accumulate components.
To use custom 'date-time'property it should be passed to addComponent method just the same way as 'geometry' or 'description' (see "WELLBOREDATA WITH DATE-TIME" tab in "Wellbore visualization" section below).
# Wellbore visualization
Using the 'date-time' property as corresponding component's visibility criteria is demonstrated in updateComponentsVisibility method (see "MAIN" tab in the section's code snippet).
Feb-1, 2000
Feb-17, 2000
1
17
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Mode as LabelingMode } from "@int/geotoolkit/schematics/labeling/Mode.ts";
import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import { getWellBoreData } from "/src/code/Schematics/DateTimeSupport/wellboredataWithDateTime.ts";
let wellBoreNode;
const createScene = (canvas, minDate, maxDate) => {
const data = getWellBoreData(minDate, maxDate);
const widget = new CompositeSchematicsWidget({
"annotationssizes": {
"north": 30,
"south": 0
},
"gap": {
"left": {
"size": "30"
},
"right": {
"size": "30"
},
"top": {
"size": "0"
},
"bottom": {
"size": "0"
}
},
"labeling": { "mode": LabelingMode.NoLabels },
"data": {
"elements": data
}
});
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
wellBoreNode = widget.getWellBoreWithLabels().getWellBoreNode();
return plot;
};
function updateComponentsVisibility(values) {
if (wellBoreNode == null)
return;
wellBoreNode.setNotification(false);
wellBoreNode.getComponents().forEach((node) => {
const dateTime = node.getData()["date-time"];
if (dateTime != null) {
node.setVisible(dateTime >= values[0] && dateTime <= values[1]);
}
});
wellBoreNode.setNotification(true);
wellBoreNode.invalidate(void 0, true);
}
export { createScene, updateComponentsVisibility };
createScene(document.querySelector('[ref="plot"]'), minTime, maxTime);