This tutorial demonstrates how to use DateTimeTickGenerator and AdaptiveDateTimeTickGenerator in an axis. Both DateTimeTickGenerator and AdaptiveDateTimeTickGenerator generate tick positions based on UTC date and time if no time zone offset is passed.
# DateTime Tick Generator
The datetime tick generator generates ticks and labels by setting zoom level manually. Time zone offset is optional.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { DateTimeTickGenerator, LabelMode } from "@int/geotoolkit/axis/DateTimeTickGenerator.ts";
import { DateZoomLevel } from "@int/geotoolkit/axis/DateZoomLevel.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { UnitFactory } from "@int/geotoolkit/util/UnitFactory.ts";
import { TimeZone } from "@int/geotoolkit/axis/TimeZone.ts";
import { Axis } from "@int/geotoolkit/axis/Axis.ts";
import { AxisHelper } from "/src/helpers/axis.ts";
function createAxis(tickGenerator, bounds, isUnit) {
const minDateValue = new Date(2e3, 0, 1, 0, 0, 0, 0);
minDateValue.setUTCHours(0, 0, 0, 0);
let minValue = minDateValue.getTime();
const maxDateValue = new Date(2e3, 5, 1, 0, 0, 0, 0);
maxDateValue.setUTCHours(0, 0, 0, 0);
let maxValue = maxDateValue.getTime();
if (isUnit) {
minValue /= 1e3;
maxValue /= 1e3;
}
tickGenerator.setLabelStyle("major", AxisHelper.axisColor()["style"]).setLabelStyle("minor", null).setLabelStyle("edge", AxisHelper.axisColor()["style"]).setTickStyle("major", AxisHelper.axisMajorTickColor()["style"]).setTickStyle("minor", AxisHelper.axisMinorTickColor()["style"]).setTickStyle("edge", AxisHelper.axisEdgeTickColor()["style"]);
return new Axis(tickGenerator).setAutoLabelRotation(true).setBaseLineStyle(AxisHelper.axisMajorTickColor()["style"]).setBounds(bounds).setModelLimits(new Rect(minValue, minValue, maxValue, maxValue));
}
function createScene(canvas) {
const parentGroup = new Group().addChild([
createAxis(
new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month),
new Rect(10, 30, 60, 570)
),
createAxis(
new DateTimeTickGenerator(6 * 3600 * 1e3, UnitFactory.getInstance().getUnit("ms")).setZoomLevel(DateZoomLevel.Month),
new Rect(70, 30, 120, 570)
),
createAxis(
new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month).setTimeZone(TimeZone.LocalTime),
new Rect(130, 30, 180, 570)
),
createAxis(
new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Week),
new Rect(190, 30, 240, 570)
),
createAxis(
new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month).setUnit(UnitFactory.getInstance().getUnit("s")),
new Rect(250, 30, 300, 570),
true
),
createAxis(
new DateTimeTickGenerator().setZoomLevel(DateZoomLevel.Month).setLabelMode(LabelMode.Between),
new Rect(310, 30, 390, 570)
)
]);
return new Plot({
"canvaselement": canvas,
"root": parentGroup
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Adaptive DateTime Tick Generator
The adaptive date time tick generator will automatically configure itself to create ticks at a reasonable interval.
import { DateUtil } from "@int/geotoolkit/util/DateUtil.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { AdaptiveDateTimeTickGenerator } from "@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator.ts";
import { Orientation } from "@int/geotoolkit/util/Orientation.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Axis } from "@int/geotoolkit/axis/Axis.ts";
import { AxisHelper } from "/src/helpers/axis.ts";
function createAxis(tickGenerator, bounds) {
const minDateValue = new Date(2e3, 0, 1, 0, 0, 0, 0);
minDateValue.setUTCHours(0, 0, 0, 0);
const minValue = minDateValue.getTime();
const maxDateValue = new Date(2e3, 5, 1, 0, 0, 0, 0);
maxDateValue.setUTCHours(0, 0, 0, 0);
const maxValue = maxDateValue.getTime();
tickGenerator.setLabelStyle("major", AxisHelper.axisColor()["style"]).setLabelStyle("minor", null).setLabelStyle("edge", AxisHelper.axisColor()["style"]).setTickStyle("major", AxisHelper.axisMajorTickColor()["style"]).setTickStyle("minor", AxisHelper.axisMinorTickColor()["style"]).setTickStyle("edge", AxisHelper.axisEdgeTickColor()["style"]);
return new Axis(tickGenerator).setAutoLabelRotation(true).setBaseLineStyle(AxisHelper.axisMajorTickColor()["style"]).setBounds(bounds).setModelLimits(new Rect(minValue, minValue, maxValue, maxValue));
}
function createFormatTickGenerator() {
return new AdaptiveDateTimeTickGenerator().setLabelGradeFormat("edge", "M-j, Y").setLabelGradeFormat("major", "M-j, Y<b\\r>H:i:s").setLabelGradeFormat("minor", "H:i:s");
}
function createTickGeneratorWithHandler() {
return new AdaptiveDateTimeTickGenerator().setFormatLabelHandler((tickGenerator, parent, orient, tickInfo, tickIndex, modelValue) => {
const tickType = tickInfo.getGrade();
if (tickType === "edge") {
if (orient === Orientation.Vertical) {
if (tickInfo.getContextTransformation().getScaleY() > 0) {
tickInfo.setAnchorType(tickIndex === 0 ? AnchorType.TopCenter : AnchorType.BottomCenter);
} else {
tickInfo.setAnchorType(tickIndex === 1 ? AnchorType.TopCenter : AnchorType.BottomCenter);
}
}
if (orient === Orientation.Horizontal) {
if (tickInfo.getContextTransformation().getScaleX() > 0) {
tickInfo.setAnchorType(tickIndex === 0 ? AnchorType.LeftCenter : AnchorType.RightCenter);
} else {
tickInfo.setAnchorType(tickIndex === 1 ? AnchorType.LeftCenter : AnchorType.RightCenter);
}
}
} else {
tickInfo.setAnchorType(AnchorType.Center);
}
if (tickType === "edge") {
return DateUtil.formatUTC(new Date(modelValue), "M-j, Y<b\\r>H:i:s");
} else if (tickType === "major") {
return DateUtil.formatUTC(new Date(modelValue), "M-j, Y<b\\r>H:i:s");
}
return DateUtil.formatUTC(new Date(modelValue), "H:i:s");
}).setLabelMaxText("edge", "Jan-31, 2000<br>00:00:00").setLabelMaxText("major", "Jan-31, 2000<br>00:00:00").setLabelMaxText("minor", "00:00:00");
}
function createScene(canvas) {
const parentGroup = new Group().addChild([
createAxis(new AdaptiveDateTimeTickGenerator(), new Rect(10, 30, 60, 570)),
createAxis(createFormatTickGenerator(), new Rect(70, 30, 120, 570)),
createAxis(createTickGeneratorWithHandler(), new Rect(130, 30, 180, 570))
]);
return new Plot({
"canvaselement": canvas,
"root": parentGroup
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));