{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Log Cutoff Visual","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":"log-cutoff-visual","__idx":0},"children":["Log Cutoff Visual"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogCutoffVisual"]}," is another type of visual supported by WellLogJS. A LogCutoffVisual needs a well log data source either passed into its constructor or set using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setData"]}," method. The visual will not render if there is no data associated with it.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Properties like LineStyle, FillStyle, Cutoff etc. can be modified. The limits are calculated automatically by default, but manual limits can be set by disabling autolimits."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-log-cutoff-visuals","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/LogCutoff/logCutoff#logCutoffVisual"},"children":["#"]}," Example Log Cutoff Visuals"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here are three examples of LogCutoff: continuous (left), discrete visual (center), and categorized (right), categorized mode supports continuous and discrete mode as well. See the code below."]},{"$$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 { LogLinearValueGrid } from \"@int/geotoolkit/welllog/LogLinearValueGrid.ts\";\nimport { CutoffMode, DisplayMode as CutoffDisplayMode, LogCutoffVisual } from \"@int/geotoolkit/welllog/LogCutoffVisual.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { InterpolationType } from \"@int/geotoolkit/data/DataStepInterpolation.ts\";\nimport { FillStyle } from \"@int/geotoolkit/attributes/FillStyle.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createSymbol(color) {\n  const size = 6;\n  return new SymbolShape(\n    0,\n    0,\n    size,\n    size,\n    AnchorType.Center,\n    false,\n    CirclePainter\n  ).setLineStyle({\n    \"color\": color,\n    \"width\": 1\n  }).setFillStyle(\"white\");\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 500);\n  const logData = new LogData({\n    \"name\": \"Step curve\",\n    \"depths\": [100, 116, 132, 148, 164, 180, 196, 212, 228, 244, 260, 276, 292, 308, 324, 340, 356, 372, 388, 404, 420, 436, 452, 468, 484, 500],\n    \"values\": [0, 0, 10, 10, 10, 20, 10, 30, 30, 10, 10, 10, 20, 20, 30, 70, 30, 30, 50, 30, 10, 60, 40, 10, 0, 0]\n  });\n  const min = 0;\n  const max = 100;\n  const logCurve = new LogCurve(logData).setInterpolationType(InterpolationType.EndStep).setLineStyle({\n    \"color\": \"blue\",\n    \"width\": 2,\n    \"shadow\": {\n      \"enable\": true,\n      \"blur\": 3,\n      \"color\": \"white\"\n    }\n  }).setDisplayMode([\"line\", \"symbol\"]).setSymbol(createSymbol(\"blue\")).setNormalizationLimits(min, max);\n  const logCuttoffVisual = new LogCutoffVisual({\n    \"cutoffmode\": CutoffMode.Continuous,\n    \"data\": logData,\n    \"linestyle\": null,\n    \"fillstyle\": \"orange\"\n  }).setNormalizationLimits(min, max).setCutOff({\n    \"names\": [\"First Part\", \"Second Section\", \"Third Section\", \"Best Intervals\"],\n    \"ranges\": [0, 16, 38, 54, 100],\n    \"fillstyles\": [\n      new FillStyle(\"#92D050\"),\n      new FillStyle(\"#FF3232\"),\n      new FillStyle(\"#27E2FF\"),\n      new FillStyle(\"#0065B0\")\n    ]\n  });\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    logCuttoffVisual.setName(\"Continuous mode\"),\n    logCurve\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    logCuttoffVisual.clone().setName(\"Discrete mode\").setCutoffMode(CutoffMode.Discrete),\n    logCurve.clone()\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.AnnotationTrack).addChild([\n    new LogCutoffVisual({\n      \"name\": \"Categorized mode\",\n      \"data\": {\n        \"name\": \"Signal curve\",\n        \"depths\": [100, 116, 132, 148, 164, 180, 196, 212, 228, 244, 260, 276, 292, 308, 324, 340, 356, 372, 388, 404, 420, 436, 452, 468, 484, 500],\n        \"values\": [\"A\", \"B\", \"D\", \"D-1\", \"D-2\", \"D-4\", \"C\", \"B\", \"C\", \"G\", \"G\", \"G\", \"E\", \"E\", \"J-is-out-of-index\", \"K-is-out-of-range\", \"G\", \"G\", \"H\", \"F\", \"H\", \"H\", \"H\", \"G\", \"F\", \"D\"]\n      },\n      \"cutoffmode\": CutoffMode.Discrete,\n      \"displaymode\": CutoffDisplayMode.Categorized,\n      \"linestyle\": null\n    }).setName(\"Categorized mode\").setCutOff({\n      \"names\": [\n        \"Cutoff A\",\n        \"Cutoff B\",\n        \"Cutoff C\",\n        'Cutoff <b>D</b> <span style=\"color:#0065B0\">[1..4]</span>',\n        \"Cutoff E\",\n        \"Cutoff F\",\n        \"Cutoff G\",\n        \"Cutoff H\"\n      ],\n      \"codes\": [\"A\", \"B\", \"C\", [\"D\", \"D-1\", \"D-2\", \"D-4\"], \"E\", \"F\", \"G\", \"H\"],\n      \"fillstyles\": [\n        new FillStyle(\"#92D050\"),\n        new FillStyle(\"#FF3232\"),\n        new FillStyle(\"#27E2FF\"),\n        new FillStyle(\"#0065B0\"),\n        new FillStyle(\"#E26714\"),\n        new FillStyle(\"#ABF55B\"),\n        new FillStyle(\"#AFDDFF\"),\n        new FillStyle(\"#FF7DFF\")\n      ]\n    }),\n    new LogLinearValueGrid().setSelectable(false).setLineStyle({\n      \"color\": \"gray\",\n      \"pixelsnapmode\": true\n    }).setLinesCount(9)\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.setCss({\n    \"css\": [\n      \".geotoolkit.welllog.header.LogCutoffVisualHeader {\",\n      \"   linestyle-color: gray;\",\n      \"   linestyle-pixelsnapmode: true;\",\n      \"   subtitle-padding-top: 15px;\",\n      \"   subtitle-padding-left: 5px;\",\n      \"   subtitle-padding-right: 5px;\",\n      \"   subtitle-padding-bottom: 5px;\",\n      \"   subtitle-icon-margins-top: 15px;\",\n      \"   subtitle-icon-size: 12;\",\n      \"}\",\n      '.geotoolkit.welllog.LogTrack[cssclass!=\"INDEX_TRACK\"] {',\n      \"   linestyle-color: gray;\",\n      \"   linestyle-pixelsnapmode: true;\",\n      \"   clipping : false;\",\n      \"}\"\n    ].join(\"\")\n  });\n  widget.getToolByName(\"cross-hair\").setEnabled(false);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\").fitToWidth().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/LogCutoff/logCutoff?section=logCutoffVisual&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"additional-options-available-for-log-cutoff-visuals","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/LogCutoff/logCutoff#logCutoffHorizontal"},"children":["#"]}," Additional options available for Log Cutoff Visuals"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here is an example of additional settings you can apply to LogCutoff visual and the header. See the code below."]},{"$$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 { LogLinearValueGrid } from \"@int/geotoolkit/welllog/LogLinearValueGrid.ts\";\nimport { CutoffMode, DisplayMode as CutoffDisplayMode, LogCutoffVisual, StepMode } from \"@int/geotoolkit/welllog/LogCutoffVisual.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { InterpolationType } from \"@int/geotoolkit/data/DataStepInterpolation.ts\";\nimport { FillStyle } from \"@int/geotoolkit/attributes/FillStyle.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { VerticalAlignment } from \"@int/geotoolkit/util/VerticalAlignment.ts\";\nimport { HorizontalAlignment } from \"@int/geotoolkit/util/HorizontalAlignment.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createSymbol(color) {\n  const size = 6;\n  return new SymbolShape(\n    0,\n    0,\n    size,\n    size,\n    AnchorType.Center,\n    false,\n    CirclePainter\n  ).setLineStyle({\n    \"color\": color,\n    \"width\": 1\n  }).setFillStyle(\"white\");\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setOrientation(Orientation.Horizontal).setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 500);\n  const logData = new LogData({\n    \"name\": \"Cutoff curve\",\n    \"depths\": [100, 116, 132, 148, 164, 180, 196, 212, 228, 244, 260, 276, 292, 308, 324, 340, 356, 372, 388, 404, 420, 436, 452, 468, 484, 500],\n    \"values\": [0, 0, 10, 10, 10, 20, 10, 30, 30, 10, 10, 10, 20, 20, 30, 70, 30, 30, 50, 30, 10, 60, 40, 10, 0, 0]\n  });\n  const min = 0;\n  const max = 100;\n  const logCurve = new LogCurve(logData).setInterpolationType(InterpolationType.EndStep).setLineStyle({\n    \"color\": \"blue\",\n    \"width\": 2,\n    \"shadow\": {\n      \"enable\": true,\n      \"blur\": 3,\n      \"color\": \"white\"\n    }\n  }).setDisplayMode([\"line\", \"symbol\"]).setSymbol(createSymbol(\"blue\")).setNormalizationLimits(min, max);\n  const logCuttoffVisual = new LogCutoffVisual({\n    \"cutoffmode\": CutoffMode.Continuous,\n    \"data\": logData,\n    \"linestyle\": null,\n    \"fillstyle\": \"orange\"\n  }).setNormalizationLimits(min, max).setCutOff({\n    \"names\": [\"First Part\", \"Second Section\", \"Third Section\", \"Best Intervals\"],\n    \"ranges\": [0, 16, 38, 54, 100],\n    \"fillstyles\": [\n      new FillStyle(\"#92D050\"),\n      new FillStyle(\"#FF3232\"),\n      new FillStyle(\"#27E2FF\"),\n      new FillStyle(\"#0065B0\")\n    ]\n  });\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    logCuttoffVisual.setName('Continuous mode<br/><i style=\"color:gray\">End-step</i>'),\n    logCurve\n  ]);\n  widget.getHeaderContainer().getHeaderProvider().getHeader(logCuttoffVisual).setTitleAlignment(HorizontalAlignment.Left).setSubTitleAlignment(VerticalAlignment.Top);\n  widget.addTrack(TrackType.IndexTrack);\n  let logCuttoffVisual2;\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    logCuttoffVisual2 = logCuttoffVisual.clone().setName('Discrete mode<br/><i style=\"color:gray\">Srart-step, reversed</i>').setHorizontalFlip(true).setCutoffMode(CutoffMode.Discrete).setStepMode(StepMode.StartStep),\n    logCurve.clone().setInterpolationType(InterpolationType.StartStep).setHorizontalFlip(true)\n  ]);\n  widget.getHeaderContainer().getHeaderProvider().getHeader(logCuttoffVisual2).setTitleAlignment(HorizontalAlignment.Right).setSubTitleIconAlignment(VerticalAlignment.Top).setSubTitleAlignment(VerticalAlignment.Bottom).setSubTitleIconSize(15).setSubTitleIconRadius(8);\n  widget.addTrack(TrackType.IndexTrack);\n  let logCuttoffVisual3;\n  widget.addTrack(TrackType.AnnotationTrack).addChild([\n    logCuttoffVisual3 = new LogCutoffVisual({\n      \"name\": \"Categorized mode\",\n      \"data\": {\n        \"name\": \"Signal curve\",\n        \"depths\": [100, 116, 132, 148, 164, 180, 196, 212, 228, 244, 260, 276, 292, 308, 324, 340, 356, 372, 388, 404, 420, 436, 452, 468, 484, 500],\n        \"values\": [\"A\", \"B\", \"D\", \"D-1\", \"D-2\", \"D-4\", \"C\", \"B\", \"C\", \"G\", \"G\", \"G\", \"E\", \"E\", \"J-is-out-of-index\", \"K-is-out-of-range\", \"G\", \"G\", \"H\", \"F\", \"H\", \"H\", \"H\", \"G\", \"F\", \"D\"]\n      },\n      \"cutoffmode\": CutoffMode.Discrete,\n      \"displaymode\": CutoffDisplayMode.Categorized,\n      \"linestyle\": null\n    }).setName(\"Categorized mode\").setCutOff({\n      \"names\": [\n        \"Cutoff A\",\n        \"Cutoff B\",\n        \"Cutoff C\",\n        '<span style=\"color:white\">Cutoff <b>D</b> <i>[1..4]</i></span>',\n        \"Cutoff E\",\n        \"Cutoff F\",\n        \"Cutoff G\",\n        \"Cutoff H\"\n      ],\n      \"codes\": [\"A\", \"B\", \"C\", [\"D\", \"D-1\", \"D-2\", \"D-4\"], \"E\", \"F\", \"G\", \"H\"],\n      \"fillstyles\": [\n        new FillStyle(\"#92D050\"),\n        new FillStyle(\"#FF3232\"),\n        new FillStyle(\"#27E2FF\"),\n        new FillStyle(\"#0065B0\"),\n        new FillStyle(\"#E26714\"),\n        new FillStyle(\"#ABF55B\"),\n        new FillStyle(\"#AFDDFF\"),\n        new FillStyle(\"#FF7DFF\")\n      ]\n    }).setHorizontalFlip(true),\n    new LogLinearValueGrid().setSelectable(false).setLineStyle({\n      \"color\": \"gray\",\n      \"pixelsnapmode\": true\n    }).setLinesCount(9)\n  ]);\n  widget.getHeaderContainer().getHeaderProvider().getHeader(logCuttoffVisual3).setSubTitleIconAlignment(VerticalAlignment.Center).setSubTitleAlignment(VerticalAlignment.Center);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.setCss({\n    \"css\": [\n      \".geotoolkit.welllog.header.LogCutoffVisualHeader {\",\n      \"   linestyle-color: gray;\",\n      \"   linestyle-pixelsnapmode: true;\",\n      \"   title-size-min: 40;\",\n      \"   subtitle-size-min: 140;\",\n      \"   subtitle-padding: 5px;\",\n      \"   subtitle-icon-size: 15;\",\n      \"}\",\n      '.geotoolkit.welllog.LogTrack[cssclass!=\"INDEX_TRACK\"] {',\n      \"   linestyle-color: gray;\",\n      \"   linestyle-pixelsnapmode: true;\",\n      \"   clipping : false;\",\n      \"}\"\n    ].join(\"\")\n  });\n  widget.getToolByName(\"cross-hair\").setEnabled(false);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\").fitToWidth().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/LogCutoff/logCutoff?section=logCutoffHorizontal&extract=true","width":"100%","height":"888.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Log Cutoff Visual","id":"log-cutoff-visual","depth":1},{"value":"Example Log Cutoff Visuals","id":"example-log-cutoff-visuals","depth":3},{"value":"Additional options available for Log Cutoff Visuals","id":"additional-options-available-for-log-cutoff-visuals","depth":3}],"frontmatter":{"title":"Log Cutoff Visual","seo":{"title":"Log Cutoff Visual"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/visuals/log-cutoff","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}