{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Depth Index Conversion","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-index-conversion","__idx":0},"children":["Depth Index Conversion"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to switch Depth Index in WellBore and assumes familiarity with ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget"},"children":["WellLog Widget"]}," tutorial in WellLog.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"At any given point in WellBore, there will be two depths: MD (Measured Depth) and TVD (True Vertical Depth).",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"For a perfectly vertical WellBore, the values of TVD and MD are equal. However, WellBores are not always drilled perfectly vertical and it is possible that values of MD and TVD are different. At any given point, TVD is less than or equal to MD."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-and-display-data-table","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/DepthIndexConversion/mdToTvd#datatable"},"children":["#"]}," Create and display Data Table"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows steps to create DataTable and display data in a TableView. For more details, please refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Charts/TableView/tableViewWidget"},"children":["Table View"]}," tutorial. The main purpose is to illustrate whole data only."]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { LogCurveDataSource } from \"@int/geotoolkit/welllog/data/LogCurveDataSource.ts\";\nimport { TableView } from \"@int/geotoolkit/widgets/TableView.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { NumericalDataSeries } from \"@int/geotoolkit/data/NumericalDataSeries.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { TableViewDataSource } from \"/src/code/WellLog/DataAndTemplates/DepthIndexConversion/TableViewDataSource.ts\";\nclass TableWidget {\n  constructor(options) {\n    this.table = this.createDataTable();\n    this.widget = this.createTableWidget();\n    this.plot = new Plot({\n      \"canvaselement\": options.canvas,\n      \"root\": this.widget\n    });\n  }\n  dispose() {\n    if (this.plot) {\n      this.plot.dispose();\n    }\n  }\n  createDataTable() {\n    const md = new NumericalDataSeries({\n      \"name\": \"MD\",\n      \"unit\": \"ft\",\n      \"data\": [10, 12, 20, 27, 30, 35, 40, 42, 50, 55, 60, 67, 70, 75]\n    });\n    const tvd = new NumericalDataSeries({\n      \"name\": \"TVD\",\n      \"unit\": \"ft\",\n      \"data\": [8, 10, 15, 20, 25, 25, 30, 37, 40, 40, 42, 45, 50, 60]\n    });\n    const gr = new NumericalDataSeries({\n      \"name\": \"GR\",\n      \"data\": [6, 9, 7, 11, 10, 6, 7, 6, 9, 10, 11, 7, 10, 6]\n    });\n    const cali = new NumericalDataSeries({\n      \"name\": \"CALI\",\n      \"data\": [75, 100, 90, 50, 60, 95, 60, 75, 80, 100, 40, 67, 40, 80]\n    });\n    const series = [md, tvd, gr, cali];\n    const dataTable = new DataTable({\n      \"cols\": series\n    });\n    const depthsMD = dataTable.getColumn(0).toArray();\n    const depthsTVD = dataTable.getColumn(1).toArray();\n    const grValues = dataTable.getColumn(2).toArray();\n    const caliValues = dataTable.getColumn(3).toArray();\n    this.dataSourceMD = {\n      \"GR\": new LogCurveDataSource({\n        \"name\": \"GR\",\n        \"depths\": depthsMD,\n        \"values\": grValues\n      }),\n      \"CALI\": new LogCurveDataSource({\n        \"name\": \"CALI\",\n        \"depths\": depthsMD,\n        \"values\": caliValues\n      })\n    };\n    this.dataSourceTVD = {\n      \"GR\": new LogCurveDataSource({\n        \"name\": \"GR\",\n        \"depths\": depthsTVD,\n        \"values\": grValues\n      }),\n      \"CALI\": new LogCurveDataSource({\n        \"name\": \"CALI\",\n        \"depths\": depthsTVD,\n        \"values\": caliValues\n      })\n    };\n    const dataForTable = [depthsMD, depthsTVD, grValues, caliValues];\n    const tableOptions = {\n      rows: dataTable.getNumberOfRows(),\n      columns: dataTable.getNumberOfColumns(),\n      data: dataForTable\n    };\n    return new TableViewDataSource(tableOptions);\n  }\n  createTableWidget() {\n    const widget = new TableView({\n      \"bounds\": new Rect(0, 0, 800, 100),\n      \"horizontalscrollable\": \"floating\",\n      \"verticalscrollable\": \"floating\"\n    }).setData({\n      \"indexvisible\": false,\n      \"dataprovider\": this.table,\n      \"rows\": this.table.getRowsCount(),\n      \"cols\": this.table.getColumnsCount()\n    }).fitToWidth(true);\n    return widget;\n  }\n}\nexport { TableWidget };\n\ncreateScene();\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/DataAndTemplates/DepthIndexConversion/mdToTvd?section=datatable&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"index-conversion-in-welllog-widget","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/DepthIndexConversion/mdToTvd#indexwidget"},"children":["#"]}," Index Conversion in WellLog Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For displaying different Indexes in the WellLog widget, update the DataBinding and DepthsLimitis. For that, create DataBindingRegistry for MD and TVD index. DataBindingRegistery is attached to visuals. When the index value is changed, instead of disposing the plot and redrawing it, just change DataBinding and DepthLimits according to LogCurveDataSource."]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { LogCurveDataSource } from \"@int/geotoolkit/welllog/data/LogCurveDataSource.ts\";\nimport { NumericalDataSeries } from \"@int/geotoolkit/data/NumericalDataSeries.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { DataBindingRegistry } from \"@int/geotoolkit/data/DataBindingRegistry.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { LogAxis } from \"@int/geotoolkit/welllog/LogAxis.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nclass IndexWidget {\n  constructor(options) {\n    this.leftAxis = null;\n    this.rightAxis = null;\n    this.dataSourceMD = null;\n    this.dataSourceTVD = null;\n    this.createData();\n    this.createRegistry();\n    this.widget = this.createIndexWidget();\n    this.plot = new Plot({\n      \"canvaselement\": options.canvas,\n      \"root\": this.widget\n    });\n    this.widget.fitToHeight().fitToWidth();\n    this.setOrder(true);\n  }\n  dispose() {\n    if (this.plot) {\n      this.plot.dispose();\n    }\n  }\n  createData() {\n    const md = new NumericalDataSeries({\n      \"name\": \"MD\",\n      \"unit\": \"ft\",\n      \"data\": [10, 12, 20, 27, 30, 35, 40, 42, 50, 55, 60, 67, 70, 75]\n    });\n    const tvd = new NumericalDataSeries({\n      \"name\": \"TVD\",\n      \"unit\": \"ft\",\n      \"data\": [8, 10, 15, 20, 25, 25, 30, 37, 40, 40, 42, 45, 50, 60]\n    });\n    const gr = new NumericalDataSeries({\n      \"name\": \"GR\",\n      \"data\": [6, 9, 7, 11, 10, 6, 7, 6, 9, 10, 11, 7, 10, 6]\n    });\n    const cali = new NumericalDataSeries({\n      \"name\": \"CALI\",\n      \"data\": [75, 100, 90, 50, 60, 95, 60, 75, 80, 100, 40, 67, 40, 80]\n    });\n    const series = [md, tvd, gr, cali];\n    const dataTable = new DataTable({\n      \"cols\": series\n    });\n    const depthsMD = dataTable.getColumn(0).toArray();\n    const depthsTVD = dataTable.getColumn(1).toArray();\n    const grValues = dataTable.getColumn(2).toArray();\n    const caliValues = dataTable.getColumn(3).toArray();\n    this.dataSourceMD = {\n      \"GR\": new LogCurveDataSource({\n        \"name\": \"GR\",\n        \"depths\": depthsMD,\n        \"values\": grValues\n      }),\n      \"CALI\": new LogCurveDataSource({\n        \"name\": \"CALI\",\n        \"depths\": depthsMD,\n        \"values\": caliValues\n      })\n    };\n    this.dataSourceTVD = {\n      \"GR\": new LogCurveDataSource({\n        \"name\": \"GR\",\n        \"depths\": depthsTVD,\n        \"values\": grValues\n      }),\n      \"CALI\": new LogCurveDataSource({\n        \"name\": \"CALI\",\n        \"depths\": depthsTVD,\n        \"values\": caliValues\n      })\n    };\n  }\n  createRegistry() {\n    this.registryForMdIndex = new DataBindingRegistry();\n    this.registryForMdIndex.add({\n      accept: (node) => node instanceof LogCurve,\n      bind: (curve) => curve.setData(this.dataSourceMD[curve.getName()])\n    });\n    this.registryForTvdIndex = new DataBindingRegistry();\n    this.registryForTvdIndex.add({\n      accept: (node) => node instanceof LogCurve,\n      bind: (curve) => curve.setData(this.dataSourceTVD[curve.getName()])\n    });\n  }\n  createIndexWidget() {\n    const widget = createWellLogWidget().setDepthLimits(this.dataSourceMD.GR.getMinDepth(), this.dataSourceMD.GR.getMaxDepth()).setDataBinding(this.registryForMdIndex);\n    const leftIndex = widget.addTrack(TrackType.IndexTrack);\n    widget.addTrack(TrackType.LinearTrack).addChild([\n      new LogCurve().setName(\"CALI\").setLineStyle(KnownColors.Orange)\n    ]);\n    widget.addTrack(TrackType.LinearTrack).addChild([\n      new LogCurve().setName(\"GR\").setLineStyle(KnownColors.Green)\n    ]);\n    const rightIndex = widget.addTrack(TrackType.IndexTrack);\n    const getAxis = (track) => from(track).where((node) => node instanceof LogAxis).selectFirst();\n    this.leftAxis = getAxis(leftIndex).setName(\"MD\");\n    this.rightAxis = getAxis(rightIndex).setName(\"MD\");\n    return widget;\n  }\n  setOrder(value) {\n    const dataBinding = value ? this.registryForMdIndex : this.registryForTvdIndex;\n    const data = value ? this.dataSourceMD.GR : this.dataSourceTVD.GR;\n    const name = value ? \"MD\" : \"TVD\";\n    const minLimit = data.getMinDepth();\n    const maxLimit = data.getMaxDepth();\n    this.widget.setDataBinding(dataBinding);\n    this.widget.setDepthLimits(minLimit, maxLimit);\n    this.leftAxis.setName(name);\n    this.rightAxis.setName(name);\n  }\n}\nexport { IndexWidget };\n\ncreateScene();\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/DataAndTemplates/DepthIndexConversion/mdToTvd?section=indexwidget&extract=true","width":"100%","height":"510.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Depth Index Conversion","id":"depth-index-conversion","depth":1},{"value":"Create and display Data Table","id":"create-and-display-data-table","depth":3},{"value":"Index Conversion in WellLog Widget","id":"index-conversion-in-welllog-widget","depth":3}],"frontmatter":{"title":"Depth Index Conversion","seo":{"title":"Depth Index Conversion"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/data-and-templates/md-to-tvd","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}