{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Horizontal Widget","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":"horizontal-widget","__idx":0},"children":["Horizontal Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog Horizontal Widget tutorial demonstrates how to create a horizontal WellLog widget. All the functionality is same as vertical WellLog widget except for the orientation. Similarly, manipulation of the properties of the objects, such as orientation of the text in the index track is also possible."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"initialization","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/HorizontalWidget/horizontalWidget#initialization"},"children":["#"]}," Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a widget and set its orientation to horizontal, then insert it into the plot. Refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget"},"children":["WellLog Widgets"]}," tutorial for basic information on creating vertical WellLog Widgets."]},{"$$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 { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogBarVisual } from \"@int/geotoolkit/welllog/LogBarVisual.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { HeaderType as LogAxisVisualHeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { LogAxis } from \"@int/geotoolkit/welllog/LogAxis.ts\";\nimport { PaperFormatFactory } from \"@int/geotoolkit/scene/exports/PaperFormatFactory.ts\";\nimport { ScalingOptions } from \"@int/geotoolkit/scene/exports/ScalingOptions.ts\";\nimport { HeaderComponent } from \"@int/geotoolkit/scene/exports/HeaderComponent.ts\";\nimport { FooterComponent } from \"@int/geotoolkit/scene/exports/FooterComponent.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { PdfExport } from \"@int/geotoolkit/pdf/PdfExport.ts\";\nimport { curveData } from \"/src/code/WellLog/utils/curveData.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nlet HorizontalWidget = null;\nfunction createTestData(from2, step, curveMnemonic) {\n  const depths = [];\n  const values = [];\n  const curveDat = curveData[curveMnemonic];\n  const amountOfPoints = curveDat.length;\n  for (let i = 0; i < amountOfPoints; i++) {\n    depths.push(i * step + from2);\n    values.push(curveDat[i]);\n  }\n  return new LogData({\n    \"name\": curveMnemonic,\n    \"depths\": depths,\n    \"values\": values\n  });\n}\nfunction createCurve(dataSource) {\n  const limits = MathUtil.calculateNeatLimits(dataSource.getMinValue(), dataSource.getMaxValue(), false, false);\n  return new LogCurve(dataSource).setNormalizationLimits(limits.getLow(), limits.getHigh());\n}\nfunction createLogBar() {\n  const depths = [\n    4500,\n    4516,\n    4532,\n    4548,\n    4564,\n    4580,\n    4596,\n    4612,\n    4628,\n    4644,\n    4660,\n    4676,\n    4692,\n    4708,\n    4724,\n    4740,\n    4756,\n    4772,\n    4788,\n    4804,\n    4820,\n    4836,\n    4852,\n    4868,\n    4884,\n    4900\n  ];\n  const values = [15, 25, 9, 35, 30, 25, 40, 25, 30, 35, 40, 100, 80, 90, 100, 90, 95, 90, 40, 90, 40, 35, 40, 35, 40, 35];\n  return new LogBarVisual({\n    \"data\": new LogData({\n      \"name\": \"BarChart\",\n      \"depths\": depths,\n      \"values\": values\n    }),\n    \"linestyle\": KnownColors.LightGrey,\n    \"fillstyle\": KnownColors.Orange\n  }).setEnableAutoLimits(false).setLimits(new Range(0, 150));\n}\nfunction addWidgetToCanvas(canvas, widget) {\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\").fitToWidth();\n  return plot;\n}\nfunction createHorizontalWidget() {\n  const widget = createWellLogWidget({\n    \"orientation\": Orientation.Horizontal\n  }).setAxisHeaderType(LogAxisVisualHeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack).setLayoutStyle({\n    \"minwidth\": 50,\n    \"maxwidth\": 50\n  });\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(createTestData(4500, 10, \"GR\")).setLineStyle(KnownColors.Green),\n    createCurve(createTestData(4500, 10, \"CALI\")).setLineStyle(KnownColors.Orange),\n    createLogBar()\n  ]);\n  let minDepth = Number.POSITIVE_INFINITY;\n  let maxDepth = Number.NEGATIVE_INFINITY;\n  from(widget).where((node) => node instanceof LogCurve).select((curve) => {\n    const limits = curve.getDataLimits();\n    minDepth = Math.min(limits.getTop(), minDepth);\n    maxDepth = Math.max(limits.getBottom(), maxDepth);\n  });\n  widget.setDepthLimits(minDepth, maxDepth);\n  from(widget).where((node) => node instanceof LogAxis).selectFirst().setAutoLabelRotation(false).getTickGenerator().setLabelRotationAngle(\"major\", -Math.PI / 2).setVisibleLabelGrade(\"edge\", false);\n  return widget;\n}\nfunction exportToPDF(widget, errorObj) {\n  if (!PdfExport.isSupported()) {\n    errorObj.show = true;\n    errorObj.text = \"Web Browser Does not support pdf export.\";\n    return;\n  }\n  widget.exportToPdf({\n    \"output\": \"Widget\",\n    \"printsettings\": {\n      \"paperformat\": PaperFormatFactory.getInstance().getPaper(\"Letter\"),\n      \"top\": 1,\n      \"bottom\": 1,\n      \"left\": 0.5,\n      \"right\": 0.5,\n      \"scaling\": ScalingOptions.AsIs,\n      \"keepaspectratio\": false,\n      \"continuous\": false,\n      \"units\": \"cm\"\n    },\n    \"limits\": {\n      \"start\": widget.getDepthLimits().getLow(),\n      \"end\": widget.getDepthLimits().getHigh()\n    },\n    \"header\": new HeaderComponent(600, 20, \"PDF Output\"),\n    \"footer\": new FooterComponent(600, 20)\n  });\n}\nfunction createScene(canvas) {\n  HorizontalWidget = createHorizontalWidget();\n  return addWidgetToCanvas(canvas, HorizontalWidget);\n}\nexport { createScene, exportToPDF };\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/AdditionalFunctionality/HorizontalWidget/horizontalWidget?section=initialization&extract=true","width":"100%","height":"423.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Close"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"manipulate-properties-in-widgets","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/HorizontalWidget/horizontalWidget#Manipulate"},"children":["#"]}," Manipulate Properties in Widgets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["User can easily manipulate properties of the objects in widgets, for example, changing the orientation of labels in the index track can be achieved as follows."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]}]},"headings":[{"value":"Horizontal Widget","id":"horizontal-widget","depth":1},{"value":"Initialization","id":"initialization","depth":3},{"value":"Manipulate Properties in Widgets","id":"manipulate-properties-in-widgets","depth":3}],"frontmatter":{"title":"Horizontal Widget","seo":{"title":"Horizontal Widget"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/horizontal-widget","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}