{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Stacked Fill","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":"stacked-fill","__idx":0},"children":["Stacked Fill"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The StackedLogFill is another log visual (graphical representations of log data) added to the LogTracks. A fill needs a set of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/welllog/data/LogData"]}," objects passed into the constructor and a fill style assigned before the fill will display. Fills can be solid colors, gradients, or fillstyles (patterns and images)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"simple-stackedlogfill-with-regular-depths-and-all-positive-values","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/StackedFill/stackedFill#withoutNullValues"},"children":["#"]}," Simple StackedLogFill with regular depths and all positive values"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In a simple fill case, continuous solid colors, gradient, patterns or images can be used to fill only the space between the reference line and curves. The first track displays a simple fill, in which the fill style is assigned to the space between the log curve and base line.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"The second track displays a StackedLogFill in which values for the log curve are aggregated over depth and fill style is assigned between the log curve and baseline for the first curve and between two log curves for the other log curves."]},{"$$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 { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { LogReferenceLine } from \"@int/geotoolkit/welllog/LogReferenceLine.ts\";\nimport { createCurve, createSelectionTool, createStackedFill, generateData } from \"/src/code/WellLog/Visuals/StackedFill/util.ts\";\nimport { SizeConstraint } from \"@int/geotoolkit/layout/SizeConstraint.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createScene(canvas) {\n  const data = generateData(false);\n  const widget = createWellLogWidget({\n    \"track\": {\n      \"header\": {\n        \"visibletracktitle\": true\n      }\n    }\n  }).setDepthLimits(90, 510);\n  createSelectionTool(widget);\n  const microPositionStep = 1 / data.length;\n  widget.addTrack(TrackType.IndexTrack).setName(\"\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Original curves with microposition\").addChild(data.map((src, i) => {\n    const curve = createCurve(i, src, new LogReferenceLine(microPositionStep * i), new LogReferenceLine(microPositionStep * i)).setNormalizationLimits(0, 100).setMicroPosition(microPositionStep * i, microPositionStep * (i + 1));\n    return curve;\n  })).getHeader().setCss([\n    \".geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\",\n    \" orientation: vertical;\",\n    \" layoutstyle-constraint: \" + SizeConstraint.NoConstraint + \";\",\n    \" layoutstyle-height: 150;\",\n    \"}\"\n  ].join(\"\"));\n  const stackedFill = createStackedFill(data).setName(\"Simple Stacked Fill\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Stacked Fill\").addChild(stackedFill);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\");\n  widget.fitToHeight();\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/StackedFill/stackedFill?section=withoutNullValues&extract=true","width":"100%","height":"888.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"stackedlogfill-support-irregular-data-with-nullnan-and-negative-values","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/StackedFill/stackedFill#withNullValues"},"children":["#"]}," StackedLogFill support irregular data with Null/NaN and negative values"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This section demonstrates how null or NaN values are handled in simple fill and StackedLogFill.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"In simple fill cases, fill is applied between log curves and the reference line. In the stackedLogFill, for discontinuity part, fill is applied between previously available log curve value or reference line if the value is not present for any previous logcurves."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first track displays a simple fill, in which the fill style is assigned to the space between the log curve and base line.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Second track demonstrates fills with reference curves. And the rest of the tracks display StackedLogFill with different Gap stacking mode."]},{"$$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 { LogReferenceLine } from \"@int/geotoolkit/welllog/LogReferenceLine.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { createCurve, createSelectionTool, createStackedFill, generateData } from \"/src/code/WellLog/Visuals/StackedFill/util.ts\";\nimport { GapStackingMode } from \"@int/geotoolkit/welllog/StackedLogFill.ts\";\nimport { SizeConstraint } from \"@int/geotoolkit/layout/SizeConstraint.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createScene(canvas) {\n  const data = generateData(true);\n  const widget = createWellLogWidget({\n    \"track\": {\n      \"header\": {\n        \"visibletracktitle\": true\n      }\n    }\n  }).setDepthLimits(90, 510);\n  createSelectionTool(widget);\n  const microPositionStep = 1 / data.length;\n  widget.addTrack(TrackType.IndexTrack).setName(\"\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Original curves with microposition\").addChild(data.map((src, i) => {\n    let zero2 = microPositionStep * i;\n    if (src.getMinValue() < 0) {\n      zero2 += microPositionStep * Math.abs(src.getMinValue()) / (100 - src.getMinValue());\n    }\n    const curve = createCurve(i, src, new LogReferenceLine(zero2), new LogReferenceLine(zero2)).setNormalizationLimits(0, 100).setMicroPosition(microPositionStep * i, microPositionStep * (i + 1));\n    if (src.getMinValue() < 0) {\n      curve.setNormalizationLimits(src.getMinValue(), 100);\n    }\n    return curve;\n  })).getHeader().setCss([\n    \".geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\",\n    \" orientation: vertical;\",\n    \" layoutstyle-constraint: \" + SizeConstraint.NoConstraint + \";\",\n    \" layoutstyle-height: 175;\",\n    \"}\"\n  ].join(\"\"));\n  const stackedFill1 = createStackedFill(data).setName(\"Keep Samples mode\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Stacked Fill\").addChild(stackedFill1);\n  const stackedFill2 = createStackedFill(data).setGapStackingMode(GapStackingMode.RemoveSamples).setName(\"Remove Samples mode\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Stacked Fill\").addChild(stackedFill2);\n  widget.getHeaderContainer().getHeaderProvider().getHeader(stackedFill2).setVertical(true, 130);\n  const min = stackedFill1.getMinimumNormalizationLimit();\n  const max = stackedFill1.getMaximumNormalizationLimit();\n  const zero = -min / (max - min);\n  let prevCurve = null;\n  let leftRef = new LogReferenceLine(zero);\n  let rightRef = new LogReferenceLine(zero);\n  const curves = data.map((src, i) => {\n    const curve = createCurve(i, src, leftRef, rightRef, true).setReferenceCurve(prevCurve).setNormalizationLimits(min, max).setDisplayMode([\"line\", \"symbol\", \"value\"]);\n    prevCurve = curve;\n    leftRef = curve;\n    rightRef = null;\n    return curve;\n  });\n  widget.insertTrack(2, TrackType.LinearTrack).setName(\"Stacked with using reference\").addChild(curves);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\");\n  widget.fitToHeight();\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/StackedFill/stackedFill?section=withNullValues&extract=true","width":"100%","height":"888.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"stackedlogfill-support-irregular-data-with-gaps","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/StackedFill/stackedFill#withGap"},"children":["#"]}," StackedLogFill support irregular data with Gaps"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This section demonstrates how Gap value is handled in simple fill and StackedLogFill.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"This is almost the same situation like previous, but instead of NaN values we process Gap between indexes."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first track displays a simple fill, in which the fill style is assigned to the space between the log curve and base line.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Second track demonstrates fills with reference curves. And the rest of the tracks display StackedLogFill with different Gap stacking mode."]},{"$$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 { LogReferenceLine } from \"@int/geotoolkit/welllog/LogReferenceLine.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { createCurve, createSelectionTool, createStackedFill, generateData } from \"/src/code/WellLog/Visuals/StackedFill/util.ts\";\nimport { GapStackingMode } from \"@int/geotoolkit/welllog/StackedLogFill.ts\";\nimport { SizeConstraint } from \"@int/geotoolkit/layout/SizeConstraint.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createScene(canvas) {\n  const data = generateData(false, true);\n  const widget = createWellLogWidget({\n    \"track\": {\n      \"header\": {\n        \"visibletracktitle\": true\n      }\n    }\n  }).setDepthLimits(90, 510);\n  createSelectionTool(widget);\n  const microPositionStep = 1 / data.length;\n  widget.addTrack(TrackType.IndexTrack).setName(\"\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Original curves with microposition\").addChild(data.map((src, i) => {\n    let zero2 = microPositionStep * i;\n    if (src.getMinValue() < 0) {\n      zero2 += microPositionStep * Math.abs(src.getMinValue()) / (100 - src.getMinValue());\n    }\n    const curve = createCurve(i, src, new LogReferenceLine(zero2), new LogReferenceLine(zero2)).setGapValue(50).setNormalizationLimits(0, 100).setMicroPosition(microPositionStep * i, microPositionStep * (i + 1));\n    if (src.getMinValue() < 0) {\n      curve.setNormalizationLimits(src.getMinValue(), 100);\n    }\n    return curve;\n  })).getHeader().setCss([\n    \".geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\",\n    \" orientation: vertical;\",\n    \" layoutstyle-constraint: \" + SizeConstraint.NoConstraint + \";\",\n    \" layoutstyle-height: 175;\",\n    \"}\"\n  ].join(\"\"));\n  const stackedFill1 = createStackedFill(data).setGapValue(50).setName(\"Keep Samples mode\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Stacked Fill\").addChild(stackedFill1);\n  const stackedFill2 = createStackedFill(data).setGapValue(50).setGapStackingMode(GapStackingMode.RemoveSamples).setName(\"Remove Samples mode\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Stacked Fill\").addChild(stackedFill2);\n  widget.getHeaderContainer().getHeaderProvider().getHeader(stackedFill2).setVertical(true, 130);\n  const min = stackedFill1.getMinimumNormalizationLimit();\n  const max = stackedFill1.getMaximumNormalizationLimit();\n  const zero = -min / (max - min);\n  let prevCurve = null;\n  let leftRef = new LogReferenceLine(zero);\n  let rightRef = new LogReferenceLine(zero);\n  const curves = data.map((src, i) => {\n    const curve = createCurve(i, src, leftRef, rightRef, true).setGapValue(50).setReferenceCurve(prevCurve).setNormalizationLimits(min, max).setDisplayMode([\"line\", \"symbol\", \"value\"]);\n    prevCurve = curve;\n    leftRef = curve;\n    rightRef = null;\n    return curve;\n  });\n  widget.insertTrack(2, TrackType.LinearTrack).setName(\"Stacked with using reference\").addChild(curves);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\");\n  widget.fitToHeight();\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/StackedFill/stackedFill?section=withGap&extract=true","width":"100%","height":"888.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"stacked-curves","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/StackedFill/stackedFill#stackedCurves"},"children":["#"]}," Stacked Curves"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This section demonstrates how to stack LogCurves one to another."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first track displays non stacked curves without fills. The second track contains curves with the same datasources, but stacked one to another."]},{"$$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 { LogReferenceLine } from \"@int/geotoolkit/welllog/LogReferenceLine.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { CompositeLogCurve } from \"@int/geotoolkit/welllog/CompositeLogCurve.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { getCurveData } from \"/src/code/WellLog/utils/stackedCurveData.ts\";\nimport { SizeConstraint } from \"@int/geotoolkit/layout/SizeConstraint.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst stackedFillColors = [\n  \"rgba(254, 246, 187, 0.5)\",\n  \"rgba(242, 220, 215, 0.5)\",\n  \"rgba(149, 202, 158, 0.5)\",\n  \"rgba(166, 210, 229, 0.5)\",\n  \"rgba(61, 55, 229, 0.5)\"\n];\nconst lineColors = [\"#212121\", \"#2196f3\", \"#fdd835\", \"#e64a19\", \"#3d37e5\"];\nfunction createScene(canvas) {\n  const curveNames = [\"POTA\", \"SLT\", \"SLX\", \"THOR\", \"URAN\"];\n  const curveValues = curveNames.map((mnemonic) => getCurveData(mnemonic));\n  const maxIndex = Math.min.apply(null, curveValues.map((values) => values.length));\n  const depths = [];\n  const from = 4500, step = 5;\n  for (let i = 0; i < maxIndex; i++) {\n    depths.push(i * step + from);\n  }\n  const curves = [];\n  for (let i = 0; i < curveNames.length; i++) {\n    const dataSource = new LogData({\n      \"name\": curveNames[i],\n      \"depths\": depths,\n      \"values\": curveValues[i]\n    });\n    const compositeLogCurve = new CompositeLogCurve(dataSource).setNormalizationLimits(0, 1).setLineStyle(lineColors[i]);\n    curves.push(compositeLogCurve);\n    const leftReference = i > 0 ? curves[i - 1] : new LogReferenceLine(0);\n    compositeLogCurve.setLeftReferencePointSet(leftReference);\n    if (stackedFillColors[i] != null) {\n      compositeLogCurve.getLeftFill().setFillStyle(stackedFillColors[i]);\n    }\n    if (i > 0) {\n      compositeLogCurve.setReferenceCurve(leftReference);\n    }\n  }\n  const widget = createWellLogWidget({\n    \"track\": {\n      \"header\": {\n        \"visibletracktitle\": true\n      }\n    }\n  }).setDepthLimits(depths[0], depths[depths.length - 1]);\n  widget.addTrack(TrackType.IndexTrack).setName(\"\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Regular curves\").addChild(curves.map(\n    (curve) => new LogCurve(curve.getDataSource()).setLineStyle(curve.getLineStyle())\n  ));\n  const microPositionStep = 1 / curves.length;\n  widget.addTrack(TrackType.IndexTrack).setName(\"\");\n  widget.addTrack(TrackType.LinearTrack).setName(\"Original curves with microposition\").addChild(curves.map(\n    (curve, i) => new LogCurve(curve.getDataSource()).setMicroPosition(microPositionStep * i, microPositionStep * (i + 1)).setLineStyle(curve.getLineStyle())\n  )).getHeader().setCss([\n    \".geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\",\n    \" orientation: vertical;\",\n    \" layoutstyle-constraint: \" + SizeConstraint.NoConstraint + \";\",\n    \" layoutstyle-height: 220;\",\n    \"}\"\n  ].join(\"\"));\n  widget.addTrack(TrackType.LinearTrack).setName(\"Stacked with using reference\").addChild(curves);\n  widget.addTrack(TrackType.IndexTrack).setName(\"\");\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\");\n  widget.fitToHeight();\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/Visuals/StackedFill/stackedFill?section=stackedCurves&extract=true","width":"100%","height":"888.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Stacked Fill","id":"stacked-fill","depth":1},{"value":"Simple StackedLogFill with regular depths and all positive values","id":"simple-stackedlogfill-with-regular-depths-and-all-positive-values","depth":3},{"value":"StackedLogFill support irregular data with Null/NaN and negative values","id":"stackedlogfill-support-irregular-data-with-nullnan-and-negative-values","depth":3},{"value":"StackedLogFill support irregular data with Gaps","id":"stackedlogfill-support-irregular-data-with-gaps","depth":3},{"value":"Stacked Curves","id":"stacked-curves","depth":3}],"frontmatter":{"title":"Stacked Fill","seo":{"title":"Stacked Fill"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/visuals/stacked-fill","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}