{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Depth and Time Axis","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"depth-and-time-axis","__idx":0},"children":["Depth and Time Axis"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this WellLog Depth and Time tutorial, create two axes in WellLog Widget. One displays time and other displays depth."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-depth-and-time-axis","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/DepthAndTime/depthAndTime#createAxis"},"children":["#"]}," Create Depth and Time Axis"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to create depth axis and related time axes based on DateTimeTickGenerator from WellLog, which uses LogDrillingSectionContainer. LogDrillingSectionContainer keeps relation between depth intervals and time intervals for each section. This object is used by tick genrator to generate adaptive time ticks and labels."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType, LogAxisVisualHeader } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { TrackFactory } from \"@int/geotoolkit/welllog/TrackFactory.ts\";\nimport { BorderStrategy } from \"@int/geotoolkit/welllog/BorderStrategy.ts\";\nimport { LogAxis } from \"@int/geotoolkit/welllog/LogAxis.ts\";\nimport { DateTimeTickGenerator } from \"@int/geotoolkit/welllog/axis/DateTimeTickGenerator.ts\";\nimport { LogDrillingSectionContainer } from \"@int/geotoolkit/welllog/data/LogDrillingSectionContainer.ts\";\nimport { LogDrillingSection } from \"@int/geotoolkit/welllog/data/LogDrillingSection.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { curveData } from \"/src/code/WellLog/utils/curveData.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createCurve(from, step, curveMnemonic, color) {\n  const values = curveData[curveMnemonic];\n  const depths = values.map((v, i) => from + i * step);\n  const data = new LogData(depths, values);\n  return new LogCurve(data).setName(curveMnemonic).setLineStyle(color);\n}\nfunction createTime(fromDepth, toDepth, depthStep, fromTime, timeStep) {\n  const depths = [];\n  const time = [];\n  let i = 0;\n  for (let depth = fromDepth; depth < toDepth; depth += depthStep, i++) {\n    depths[i] = depth;\n    time[i] = fromTime + timeStep * i;\n  }\n  return { time, depths };\n}\nfunction prepareTimeIntervals(depthAndTime, majorDepth) {\n  const container = new LogDrillingSectionContainer();\n  const depths = depthAndTime.depths;\n  const time = depthAndTime.time;\n  let startDepth = depthAndTime.depths[0];\n  let startTime = depthAndTime.time[0];\n  let currentDepth = startDepth;\n  let currentTime = startTime;\n  for (let i = 0; i < depths.length; ++i) {\n    currentDepth = depths[i];\n    currentTime = time[i];\n    if (currentDepth - startDepth >= majorDepth) {\n      container.addSection(new LogDrillingSection(startDepth, currentDepth, {\n        \"break\": false,\n        \"date\": new Date(startTime)\n      }, {\n        \"break\": false,\n        \"date\": new Date(currentTime)\n      }, null));\n      startTime = currentTime;\n      startDepth = currentDepth;\n    }\n  }\n  return container;\n}\nfunction createTimeAxis(widget, depthAndTime, majorDepthStep) {\n  const track = TrackFactory.getInstance().createTrack(TrackType.AnnotationTrack, {\n    \"width\": 50,\n    \"name\": \"Time\",\n    \"indextype\": \"time\",\n    \"borderstrategy\": BorderStrategy.BorderOnTop,\n    \"border\": {\n      \"color\": \"#DFE0E3\",\n      \"visible\": true\n    }\n  });\n  const tickGenerator = new DateTimeTickGenerator({\n    \"dttrajectory\": prepareTimeIntervals(depthAndTime, majorDepthStep),\n    \"major\": {\n      \"labelstyle\": {\n        \"color\": \"#9e9e9e\",\n        \"baseline\": BaseLineStyle.Middle,\n        \"alignment\": AlignmentStyle.Center,\n        \"font\": \"12px Roboto\"\n      },\n      \"labelangle\": -Math.PI / 2,\n      \"tickstyle\": {\n        \"color\": \"#9e9e9e\",\n        \"width\": 3\n      },\n      \"ticksize\": 5\n    },\n    \"sections\": {\n      \"labelstyle\": {\n        \"color\": \"#9e9e9e\",\n        \"baseline\": BaseLineStyle.Middle,\n        \"alignment\": AlignmentStyle.Center,\n        \"font\": \"12px Roboto\"\n      },\n      \"labelangle\": -Math.PI / 2,\n      \"tickstyle\": {\n        \"color\": \"#9e9e9e\",\n        \"width\": 3\n      },\n      \"ticksize\": 5\n    }\n  });\n  const axis = new LogAxis(tickGenerator);\n  track.addChild(axis);\n  const provider = widget.getHeaderContainer().getHeaderProvider();\n  const header = new LogAxisVisualHeader(axis);\n  header.setHeaderType(HeaderType.Custom);\n  header.setDisplayString(\"Time\");\n  provider.registerHeader(axis, header);\n  return track;\n}\nfunction createScene(canvas) {\n  const twoHours = 2 * 60 * 60 * 1e3;\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).scale(0.5);\n  const depthAndTime = createTime(4500, 1e4, 10, new Date(2010, 11, 17).valueOf(), twoHours);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild(createCurve(4500, 10, \"GR\", \"#7cb342\"));\n  widget.addTrack(createTimeAxis(widget, depthAndTime, 200));\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/AdditionalFunctionality/DepthAndTime/depthAndTime?section=createAxis&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Depth and Time Axis","id":"depth-and-time-axis","depth":1},{"value":"Create Depth and Time Axis","id":"create-depth-and-time-axis","depth":3}],"frontmatter":{"title":"Depth and Time Axis","seo":{"title":"Depth and Time Axis"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/depth-and-time","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}