{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Reference line","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":"reference-line","__idx":0},"children":["Reference line"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial describes how to create and connect ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}," and apply it in various use cases."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-referenceline","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/ReferenceLine/referenceLine#createReferenceLine"},"children":["#"]}," Create ReferenceLine"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create a basic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," and connect ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," to an axis associated with a curve (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesLine"]},") or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObject"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Reference line value is defined as a y axis number."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    widget.addCurve({\n      \"name\": \"CALI\",\n      \"uri\": \"//test//cali\",\n      \"data\": dataTableViews[1],\n      \"properties\": {\n        \"autoscale\": true,\n        \"axisautolabelrotation\": true,\n        \"neatlimits\": true,\n        \"unit\": \"INS\",\n        \"linestyle\": {\n          \"color\": KnownColors.Green,\n          \"width\": 2\n        }\n      },\n      \"referencelines\": [\n        {\n          \"id\": \"refline\",\n          \"value\": 80,\n          \"linestyle\": {\n            \"color\": KnownColors.DarkGreen,\n            \"width\": 2\n          },\n          \"text\": {\n            \"textstyle\": KnownColors.DarkGreen,\n            \"offset\": {\n              \"left\": 10\n            }\n          }\n        }\n      ]\n    });\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/ReferenceLine/referenceLine?section=createReferenceLine&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"referenceline-with-fills","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/ReferenceLine/referenceLine#referenceLineWithFills"},"children":["#"]}," ReferenceLine with Fills"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create and use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," alongs with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addFill"]}," in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}," to add fills below or above a curve."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," can be created before hand, then connect with a curve (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesLine"]},") or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObject"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a value passed as reference line value when calling ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addFill"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesWidget"]}," automatically find the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["first"]}," connected ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," with the same value and fill up to the reference line."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { FillDirection } from \"@int/geotoolkit/widgets/timeseries/FillDirection.ts\";\nimport { FillType } from \"@int/geotoolkit/widgets/timeseries/FillType.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [2];\n  const names = [\"GR\"];\n  const lineColors = [\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  const fillStyles = [\n    { \"color\": \"rgba(239,108,0,0.5)\" },\n    { \"color\": \"rgba(253,216,53,0.25)\" }\n  ];\n  function addFills(widget) {\n    widget.addFill(\n      \"//test//gr\",\n      80,\n      fillStyles[0],\n      FillType.CurveToReferenceLine,\n      FillDirection.Bottom\n    );\n    widget.addFill(\n      \"//test//gr\",\n      80,\n      fillStyles[1],\n      FillType.CurveToReferenceLine,\n      FillDirection.Top\n    );\n  }\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": lineColors[index],\n            \"width\": 2\n          }\n        }\n      });\n    });\n    addFills(widget);\n    widget.addReferenceLine({\n      \"value\": 80,\n      \"linestyle\": {\n        \"color\": KnownColors.DarkRed,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.DarkRed,\n        \"offset\": {\n          \"left\": 10\n        }\n      },\n      \"connect\": \"//test//gr\"\n    });\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/ReferenceLine/referenceLine?section=referenceLineWithFills&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"referenceline-with-groups","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/ReferenceLine/referenceLine#referenceLineWithGroups"},"children":["#"]}," ReferenceLine with Groups"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObjectGroup"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Just like connecting ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," with a curve (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesLine"]},") or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObject"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"It works similarly as long as we connect the reference line with one of the curve added in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObjectGroup"]},"."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [0, 3, 1, 2];\n  const names = [\"CALI1\", \"CALI2\", \"GR1\", \"GR2\"];\n  const lineColors = [\n    KnownColors.Orange,\n    KnownColors.Yellow,\n    KnownColors.Blue,\n    KnownColors.Violet\n  ];\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": lineColors[index],\n            \"width\": 2\n          }\n        }\n      });\n    });\n    widget.addReferenceLine({\n      \"id\": \"cali-reference-line\",\n      \"value\": 8,\n      \"linestyle\": {\n        \"color\": KnownColors.Red,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.Red,\n        \"offset\": {\n          \"left\": 10\n        }\n      }\n    });\n    widget.addReferenceLine({\n      \"id\": \"gr-reference-line\",\n      \"value\": 70,\n      \"linestyle\": {\n        \"color\": KnownColors.DarkBlue,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.DarkBlue,\n        \"offset\": {\n          \"left\": 10\n        }\n      }\n    });\n    widget.createGroup({\n      \"curveids\": [\"//test//cali1\", \"//test//cali2\"],\n      \"min\": 4,\n      \"max\": 12,\n      \"id\": \"//test//cali-group\",\n      \"curveaxis\": {\n        \"compact\": true,\n        \"axiswidth\": 30,\n        \"autolabelrotation\": true,\n        \"axiscolor\": KnownColors.Red\n      },\n      \"referencelines\": [\n        \"cali-reference-line\",\n        {\n          \"value\": 9.5,\n          \"linestyle\": {\n            \"color\": KnownColors.DarkRed,\n            \"width\": 2\n          },\n          \"text\": {\n            \"textstyle\": KnownColors.DarkRed,\n            \"offset\": {\n              \"left\": 10\n            }\n          },\n          \"connect\": \"//test//cali2\"\n        }\n      ]\n    });\n    widget.createGroup({\n      \"curveids\": [\"//test//gr1\", \"//test//gr2\"],\n      \"min\": 0,\n      \"max\": 300,\n      \"id\": \"//test//gr-group\",\n      \"curveaxis\": {\n        \"compact\": true,\n        \"axiswidth\": 30,\n        \"autolabelrotation\": true,\n        \"axiscolor\": KnownColors.DarkBlue\n      },\n      \"referencelines\": [\"gr-reference-line\"]\n    });\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/ReferenceLine/referenceLine?section=referenceLineWithGroups&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-referenceline","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/ReferenceLine/referenceLine#customizeReferenceLine"},"children":["#"]}," Customize ReferenceLine"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to customized ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," styles and options."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Events as TimeSeriesWidgetEvent } from \"@int/geotoolkit/widgets/timeseries/Events.ts\";\nimport { FillDirection } from \"@int/geotoolkit/widgets/timeseries/FillDirection.ts\";\nimport { FillType } from \"@int/geotoolkit/widgets/timeseries/FillType.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [2, 3];\n  const names = [\"GR\", \"DLT\"];\n  const lineColors = [\n    KnownColors.Orange,\n    KnownColors.Blue\n  ];\n  const fillStyles = [\n    { \"color\": \"rgba(233, 214, 0, 0.37)\" },\n    { \"color\": \"rgba(235, 92, 2, 0.25)\" },\n    { \"color\": \"rgba(5, 183, 247, 0.32)\" }\n  ];\n  const refLinesColors = {\n    \"//test//gr\": [\n      KnownColors.DarkOrange,\n      KnownColors.DarkOrange\n    ],\n    \"//test//dlt\": [\n      KnownColors.DarkBlue\n    ]\n  };\n  const refLines = [\n    {\n      \"value\": 80,\n      \"linestyle\": {\n        \"color\": KnownColors.Gray,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.Gray,\n        \"offset\": {\n          \"left\": 10\n        }\n      },\n      \"connect\": \"//test//gr\"\n    },\n    {\n      \"id\": \"//test//gr//referenceline2\",\n      \"value\": 100,\n      \"linestyle\": {\n        \"color\": KnownColors.Gray,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.Gray,\n        \"offset\": {\n          \"left\": 10\n        }\n      },\n      \"connect\": \"//test//gr\"\n    },\n    {\n      \"value\": 8.5,\n      \"linestyle\": {\n        \"color\": KnownColors.Gray,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.Gray,\n        \"offset\": {\n          \"left\": 10\n        }\n      },\n      \"connect\": \"//test//dlt\"\n    }\n  ];\n  function addFills(widget) {\n    widget.addFill(\n      \"//test//gr\",\n      80,\n      fillStyles[0],\n      FillType.CurveToReferenceLine,\n      FillDirection.Bottom\n    );\n    widget.addFill(\n      \"//test//gr\",\n      100,\n      fillStyles[1],\n      FillType.CurveToReferenceLine,\n      FillDirection.Top\n    );\n    widget.addFill(\n      \"//test//dlt\",\n      null,\n      fillStyles[2],\n      FillType.CurveToBaseLine,\n      FillDirection.Bottom\n    );\n  }\n  function configSelectionTool(widget) {\n    const refLineIds = widget.getReferenceLineIds();\n    widget.on(TimeSeriesWidgetEvent.onSelectionChanged, (eventType, sender, eventArgs) => {\n      refLineIds.forEach(\n        (id) => widget.setReferenceLineOptions(id, {\n          \"linestyle\": {\n            \"color\": KnownColors.Gray\n          },\n          \"text\": {\n            \"textstyle\": {\n              \"color\": KnownColors.Gray\n            }\n          }\n        })\n      );\n      const tsObjId = eventArgs.getId();\n      if (tsObjId == null) {\n        return;\n      }\n      const _refLineIds = widget.getReferenceLineIds(tsObjId);\n      if (_refLineIds.length > 0) {\n        _refLineIds.forEach((id, index) => {\n          if (_refLineIds.indexOf(id) >= 0) {\n            widget.setReferenceLineOptions(id, {\n              \"linestyle\": {\n                \"color\": refLinesColors[tsObjId][index]\n              },\n              \"text\": {\n                \"textstyle\": {\n                  \"color\": refLinesColors[tsObjId][index]\n                }\n              }\n            });\n          }\n        });\n      }\n    });\n  }\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    curveIndice.forEach((curveIndex, index) => {\n      widget.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"unit\": \"INS\",\n          \"neatlimits\": true,\n          \"linestyle\": {\n            \"color\": lineColors[index],\n            \"width\": 2\n          }\n        }\n      });\n    });\n    refLines.forEach((refLine) => widget.addReferenceLine(refLine));\n    addFills(widget);\n    configSelectionTool(widget);\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/ReferenceLine/referenceLine?section=customizeReferenceLine&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"referenceline-with-real-time-data","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/ReferenceLine/referenceLine#referenceLineWithRealTimeData"},"children":["#"]}," ReferenceLine with real-time data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create a basic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," and connect ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReferenceLine"]}," to an axis associated with a curve (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesLine"]},") or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObject"]}," when the data becomes avaible."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { DataTableView } from \"@int/geotoolkit/data/DataTableView.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { FillType } from \"@int/geotoolkit/widgets/timeseries/FillType.ts\";\nimport { FillDirection } from \"@int/geotoolkit/widgets/timeseries/FillDirection.ts\";\nimport { data as Data } from \"/src/code/TimeSeries/data.ts\";\nlet interval = null;\nlet timeout = null;\nfunction createScene(canvas) {\n  const startDate = new Date().getTime();\n  const dataTable = getDataTableView([], \"\", [], \"\");\n  function getDataTableView(values, valueUnit, indices, indexUnit) {\n    const dataTable2 = new DataTable({\n      \"cols\": [\n        { \"type\": \"number\", \"data\": indices.slice() },\n        { \"type\": \"number\", \"data\": values.slice() }\n      ]\n    });\n    dataTable2.getColumn(0).setUnit(indexUnit);\n    dataTable2.getColumn(1).setUnit(valueUnit);\n    const dataTableView = new DataTableView(dataTable2);\n    return {\n      \"datatable\": dataTable2,\n      \"datatableview\": dataTableView\n    };\n  }\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate - 5 * 60 * 1e3, 0, startDate, 1)),\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      }\n    };\n    const widget = new TimeSeriesWidget(options);\n    widget.scaleModel(2);\n    widget.addReferenceLine({\n      \"id\": \"refline\",\n      \"value\": 87,\n      \"linestyle\": {\n        \"color\": KnownColors.DarkGreen,\n        \"width\": 2\n      },\n      \"text\": {\n        \"textstyle\": KnownColors.DarkGreen,\n        \"offset\": {\n          \"left\": 10\n        }\n      }\n    });\n    timeout = window.setTimeout(() => {\n      widget.addCurve({\n        \"name\": \"CALI\",\n        \"uri\": \"//test//cali\",\n        \"data\": dataTable[\"datatableview\"],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": KnownColors.Green,\n            \"width\": 2\n          }\n        }\n      });\n      const refLineValue = widget.getReferenceLineOptions(\"refline\")[\"value\"];\n      widget.addFill(\n        \"//test//cali\",\n        refLineValue,\n        \"rgba(253,216,53,0.5)\",\n        FillType.CurveToReferenceLine,\n        FillDirection.Top\n      );\n      widget.addFill(\n        \"//test//cali\",\n        refLineValue,\n        \"rgba(239,108,0,0.5)\",\n        FillType.CurveToReferenceLine,\n        FillDirection.Bottom\n      );\n      widget.connectReferenceLine(\"refline\", \"//test//cali\");\n      let counter = 0;\n      let index = 0;\n      const range = new Range(startDate - 5 * 60 * 1e3, startDate);\n      const data = Data[1];\n      const MAX_DATA_LENGTH = 350;\n      const MAX_INDEX = 1e3;\n      interval = window.setInterval(() => {\n        const dataIndex = startDate + counter * 1e3;\n        const currentRange = widget.getVisibleRange();\n        range.setRange(dataIndex - 5 * 60 * 1e3, dataIndex);\n        dataTable[\"datatable\"].addRow([dataIndex, data[index]]);\n        const length = dataTable[\"datatableview\"].getNumberOfRows();\n        if (length > MAX_DATA_LENGTH) {\n          dataTable[\"datatable\"].removeRows(0);\n        }\n        widget.setRange(range);\n        widget.setVisibleRange(new Range(dataIndex - (currentRange.getHigh() - currentRange.getLow()), dataIndex));\n        index++;\n        if (index >= MAX_INDEX) {\n          index = 0;\n        }\n        counter++;\n      }, 100);\n    }, 1e3);\n    return widget;\n  }\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nfunction dispose() {\n  clearTimeout(timeout);\n  clearInterval(interval);\n}\nexport { createScene, dispose };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/TimeSeries/ReferenceLine/referenceLine?section=referenceLineWithRealTimeData&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Reference line","id":"reference-line","depth":1},{"value":"Create ReferenceLine","id":"create-referenceline","depth":3},{"value":"ReferenceLine with Fills","id":"referenceline-with-fills","depth":3},{"value":"ReferenceLine with Groups","id":"referenceline-with-groups","depth":3},{"value":"Customize ReferenceLine","id":"customize-referenceline","depth":3},{"value":"ReferenceLine with real-time data","id":"referenceline-with-real-time-data","depth":3}],"frontmatter":{"title":"Reference line","seo":{"title":"Reference line"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/time-series/reference-line","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}