{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Real-Time Data","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":"real-time-data","__idx":0},"children":["Real-Time Data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The WellLog widget allows simulation of real-time flow monitoring. The widget supports depth and time based data. See the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget"},"children":["WellLog Widget tutorial."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"While creating the curve, auto-update is set to 'true' so the data source is constantly updated with new samples. The tutorial also shows how a user can implement a cache to hold the data. If the collected data becomes too big, the cache can release the samples that were received first. The tutorial also shows how to handle limits and scrolling of the content based on realtime data. See the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/RealTimeServer/realTimeServer"},"children":["Real-time Server"]}," tutorial."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For information on big data, see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/BigData/bigData"},"children":["Big Data"]}," tutorial."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"depth-based-real-time","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/RealTimeData/realtime#depthbased"},"children":["#"]}," Depth-based Real-time"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a widget and insert the widget in the plot and provide real-time data."]},{"$$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 { DepthLimitsTypes } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { Events as WellogWidgetsEvents } from \"@int/geotoolkit/welllog/widgets/Events.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { ScrollToLocation } from \"@int/geotoolkit/welllog/TrackContainer.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { Elements, TrackingType } from \"@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts\";\nimport curveData from \"/src/helpers/curveData.json?import\";\nimport { defaults } from \"/src/helpers/defaults.js\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst TIME_REFRESH = 500;\nconst maxCachedSize = 500;\nlet startIndex = 0;\nconst startDepth = 5800;\nconst stepDepth = 0.5;\nconst DEPTH_OFFSET = \"20px\";\nclass DepthBasedWidget {\n  constructor(options) {\n    this.depthAutoScroll = false;\n    this.timer = null;\n    this.depthData = new LogData(\"CALI\");\n    this.curveData = curveData[\"CALI\"];\n    this.widget = this.createWidget();\n    this.plot = new Plot({\n      \"canvaselement\": options.canvas,\n      \"root\": this.widget\n    });\n    this.runData();\n  }\n  dispose() {\n    if (this.timer) {\n      clearInterval(this.timer);\n    }\n    if (this.plot) {\n      this.plot.dispose();\n    }\n  }\n  onLimitsChange(type, src, args) {\n    if (args[\"new\"].getHigh() < this.depthData.getMaxDepth()) {\n      this.depthAutoScroll = false;\n    } else {\n      this.depthAutoScroll = true;\n    }\n  }\n  createCurve(dataSource) {\n    return new LogCurve(dataSource, true).setLineStyle({\n      \"color\": KnownColors.Blue,\n      \"width\": 2\n    }).setNormalizationLimits(7, 12);\n  }\n  createWidget() {\n    const widget = createWellLogWidget({\n      \"scroll\": {\n        \"headerverticalscroll\": {\n          \"visible\": true,\n          \"options\": { \"resizable\": false }\n        },\n        \"trackverticalscroll\": {\n          \"visible\": true,\n          \"options\": { \"resizable\": false }\n        }\n      },\n      \"depthlimitsoptions\": {\n        \"type\": DepthLimitsTypes.Data,\n        \"offset\": {\n          \"bottom\": DEPTH_OFFSET\n        }\n      }\n    }).setAxisHeaderType(HeaderType.Simple).scale(10);\n    const header = widget.getHeaderContainer().getHeaderProvider().getHeaderProvider(LogCurve.getClassName()).clone();\n    const trackingElement = header.getElements().filter((e) => e[\"name\"] === Elements.Tracking)[0];\n    if (trackingElement != null) {\n      header.setElement({\n        [Elements.Tracking]: {\n          \"options\": {\n            \"default\": TrackingType.AlwaysLastValue\n          }\n        }\n      });\n    }\n    widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogCurve.getClassName(), header);\n    const index = widget.addTrack(TrackType.IndexTrack);\n    widget.setTrackOptions(index, { \"autolabelrotation\": false });\n    widget.addTrack(TrackType.LogTrack).addChild([\n      this.createCurve(this.depthData).setLineStyle(KnownColors.Green)\n    ]);\n    widget.addTrack(TrackType.LogTrack).addChild([\n      this.createCurve(this.depthData).setLineStyle(KnownColors.Orange).setNormalizationLimits(12, 7)\n    ]);\n    widget.on(WellogWidgetsEvents.VisibleDepthLimitsChanged, this.onLimitsChange.bind(this));\n    this.depthAutoScroll = true;\n    return widget;\n  }\n  runData() {\n    let index = 0;\n    const updateData = () => {\n      if (this.depthData != null) {\n        if (index >= this.curveData.length) {\n          this.depthData.clear();\n          index = 0;\n          startIndex = 0;\n        }\n        if (this.depthData.getSize() >= maxCachedSize) {\n          startIndex = index - maxCachedSize / 2;\n          this.depthData.trimValues(this.depthData.getMinDepth(), startDepth + startIndex * stepDepth);\n        }\n        const value = this.curveData[index];\n        const depth = startDepth + index * stepDepth;\n        this.depthData.addValue(depth, value);\n        if (this.depthAutoScroll) {\n          this.widget.scrollToIndex(this.widget.getDepthLimits().getHigh(), ScrollToLocation.BOTTOM, false);\n        }\n        index++;\n      }\n    };\n    this.timer = setInterval(updateData, TIME_REFRESH);\n  }\n  zoomIn() {\n    this.widget.scale(defaults.zoomInScale);\n  }\n  zoomOut() {\n    this.widget.scale(defaults.zoomOutScale);\n  }\n  fitToHeight() {\n    this.widget.fitToHeight();\n  }\n}\nexport { DepthBasedWidget };\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/RealTimeData/realtime?section=depthbased&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"time-based-real-time","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/RealTimeData/realtime#timebased"},"children":["#"]}," Time-based Real-time"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a widget and insert the widget in the plot and provide time-based data."]},{"$$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 { DepthLimitsTypes } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { ScrollToLocation } from \"@int/geotoolkit/welllog/TrackContainer.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { Events as WellogWidgetsEvents } from \"@int/geotoolkit/welllog/widgets/Events.ts\";\nimport { Elements, TrackingType } from \"@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts\";\nimport curveData from \"/src/helpers/curveData.json?import\";\nimport { defaults } from \"/src/helpers/defaults.js\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst TIME_REFRESH = 500;\nconst maxCachedSize = 500;\nlet startIndex = 0;\nconst stepTime = 1e4;\nconst startTime = 1598115847e3;\nconst TIME_OFFSET = \"10%\";\nclass TimeBasedWidget {\n  constructor(options) {\n    this.timeAutoScroll = false;\n    this.timer = null;\n    this.timeData = new LogData(\"CALI\");\n    this.curveData = curveData[\"CALI\"];\n    this.widget = this.createWidget();\n    this.plot = new Plot({\n      \"canvaselement\": options.canvas,\n      \"root\": this.widget\n    });\n    this.runData();\n  }\n  dispose() {\n    if (this.timer) {\n      clearInterval(this.timer);\n    }\n    if (this.plot) {\n      this.plot.dispose();\n    }\n  }\n  onLimitsChange(type, src, args) {\n    if (args[\"new\"].getHigh() < this.timeData.getMaxDepth()) {\n      this.timeAutoScroll = false;\n    } else {\n      this.timeAutoScroll = true;\n    }\n  }\n  createCurve(dataSource) {\n    return new LogCurve(dataSource, true).setLineStyle({\n      \"color\": KnownColors.Blue,\n      \"width\": 2\n    }).setNormalizationLimits(7, 12);\n  }\n  createWidget() {\n    const widget = createWellLogWidget({\n      \"indexunit\": \"ms\",\n      \"indextype\": \"time\",\n      \"depthlimitsoptions\": {\n        \"type\": DepthLimitsTypes.Data,\n        \"offset\": {\n          \"bottom\": TIME_OFFSET\n        }\n      }\n    }).setAxisHeaderType(HeaderType.Simple).scale(1e-3);\n    const header = widget.getHeaderContainer().getHeaderProvider().getHeaderProvider(LogCurve.getClassName()).clone();\n    const trackingElement = header.getElements().filter((e) => e[\"name\"] === Elements.Tracking)[0];\n    if (trackingElement != null) {\n      header.setElement({\n        [Elements.Tracking]: {\n          \"options\": {\n            \"default\": TrackingType.AlwaysLastValue\n          }\n        }\n      });\n    }\n    widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogCurve.getClassName(), header);\n    widget.addTrack(TrackType.IndexTrack);\n    widget.addTrack(TrackType.LogTrack).addChild([\n      this.createCurve(this.timeData).setLineStyle(KnownColors.Green)\n    ]);\n    widget.addTrack(TrackType.LogTrack).addChild([\n      this.createCurve(this.timeData).setLineStyle(KnownColors.Orange).setNormalizationLimits(12, 7)\n    ]);\n    widget.on(WellogWidgetsEvents.VisibleDepthLimitsChanged, this.onLimitsChange.bind(this));\n    this.timeAutoScroll = true;\n    this.widget = widget;\n    return widget;\n  }\n  runData() {\n    let index = 0;\n    const updateWidget = () => {\n      if (this.timeData != null) {\n        if (index >= this.curveData.length) {\n          this.timeData.clear();\n          index = 0;\n          startIndex = 0;\n        }\n        if (this.timeData.getSize() >= maxCachedSize) {\n          startIndex = index - maxCachedSize / 2;\n          this.timeData.trimValues(this.timeData.getMinDepth(), startTime + startIndex * stepTime);\n        }\n        const value = this.curveData[index];\n        const depth = startTime + index * stepTime;\n        this.timeData.addValue(depth, value);\n        if (this.timeAutoScroll) {\n          this.widget.scrollToIndex(this.widget.getDepthLimits().getHigh(), ScrollToLocation.CENTER, false);\n        }\n        index++;\n      }\n    };\n    this.timer = setInterval(updateWidget, TIME_REFRESH);\n  }\n  zoomIn() {\n    this.widget.scale(defaults.zoomInScale);\n  }\n  zoomOut() {\n    this.widget.scale(defaults.zoomOutScale);\n  }\n  fitToHeight() {\n    this.widget.fitToHeight();\n  }\n}\nexport { TimeBasedWidget };\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/RealTimeData/realtime?section=timebased&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Real-Time Data","id":"real-time-data","depth":1},{"value":"Depth-based Real-time","id":"depth-based-real-time","depth":3},{"value":"Time-based Real-time","id":"time-based-real-time","depth":3}],"frontmatter":{"title":"Real-Time Data","seo":{"title":"Real-Time Data"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/data-and-templates/realtime","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}