{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Fluids","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":"fluids","__idx":0},"children":["Fluids"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The tutorial demonstrates how various fluids like 'mud', 'spacer fluid',etc. can be displayed in a wellbore using different fill styles. Fluids can be displayed in vertical and deviated mode."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fluids-in-vertical-schematics","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/Fluids/fluids#vertical"},"children":["#"]}," Fluids in Vertical Schematics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The section shows how to add several fluid components to a wellbore. Note that all the fluids are expected to look different from each other, so a 'subset' property for e.g 'Mud', 'Spacer Fluid'(which is optional in general case) is used when a 'fluid' component is being added to wellbore data collection. This subset property is later used by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wellBoreNode.setRenderingHints(renderingHints)"]}," to render fluid's subsets with their corresponding fill colors."]},{"$$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 { MultiDiameterComponentFactoryRegistry } from \"@int/geotoolkit/schematics/factory/MultiDiameterComponentFactoryRegistry.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { ViewMode } from \"@int/geotoolkit/schematics/scene/WellBoreNode.ts\";\nimport { LocationType } from \"@int/geotoolkit/schematics/labeling/LocationType.ts\";\nimport { AnimationStyle } from \"@int/geotoolkit/attributes/AnimationStyle.ts\";\nimport { CompositeSchematicsWidget } from \"@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts\";\nimport { getWellBoreData, mud, mudLevelFr } from \"/src/code/Schematics/Fluids/wellboreData_fluids.ts\";\nimport { FixedTrackWidthStrategy } from \"@int/geotoolkit/schematics/FixedTrackWidthStrategy.ts\";\nlet intervalID;\nlet plot = null;\nconst createScene = (canvas) => {\n  const factoryRegistry = new MultiDiameterComponentFactoryRegistry();\n  const wellBoreData = getWellBoreData();\n  const depths = [3780.9, 5100.1, 5350, 7768.8, 9220];\n  const markers = depths.map((depth) => ({\n    \"name\": \"marker\",\n    \"data\": {\n      \"description\": depth.toString(),\n      \"geometry\": { \"depth\": depth }\n    }\n  }));\n  wellBoreData.addComponents(markers);\n  const widget = new CompositeSchematicsWidget({\n    \"wellborenode\": {\n      \"viewmode\": ViewMode.Regular,\n      \"data\": wellBoreData,\n      \"registry\": factoryRegistry,\n      \"renderinghints\": {\n        \"fluid\": {\n          \"Mud\": { \"fillstyle\": { \"color\": \"rgb(191,127,127)\" } },\n          \"Spacer Fluid\": { \"fillstyle\": { \"color\": \"rgb(113,244,151)\" } },\n          \"Head Slurry\": { \"fillstyle\": { \"color\": \"rgb(127,127,127)\" } },\n          \"Tail Slurry\": { \"fillstyle\": { \"color\": \"rgb(80,80,80)\" } }\n        }\n      }\n    },\n    \"annotationssizes\": {\n      \"north\": 0,\n      \"south\": 0,\n      \"east\": 0,\n      \"west\": 0\n    },\n    \"labeling\": {\n      \"connectorshape\": null,\n      \"locationmap\": [\n        { \"component\": [\"marker\"], \"location\": LocationType.Left }\n      ]\n    },\n    \"trackwidthstrategy\": new FixedTrackWidthStrategy(100),\n    \"gap\": {\n      \"bottom\": {\n        \"visible\": true,\n        \"size\": 15\n      },\n      \"top\": {\n        \"visible\": true,\n        \"size\": 15\n      }\n    }\n  });\n  plot = new Plot({\n    \"root\": widget,\n    \"canvaselement\": canvas\n  });\n  if (!AnimationStyle.isAnimationEnabled())\n    return;\n  const step = 50;\n  const mudDepthTo = mud[\"data\"][\"geometry\"][\"depth\"][\"to\"];\n  const mudID = mud[\"data\"][\"id\"];\n  intervalID = window.setInterval(() => {\n    if (!wellBoreData)\n      return;\n    let curLevelFrom = mud[\"data\"][\"geometry\"][\"level\"][\"from\"];\n    if (curLevelFrom + step > mudDepthTo) {\n      curLevelFrom = mudLevelFr;\n    } else {\n      curLevelFrom += step;\n    }\n    wellBoreData.updateComponents({\n      \"name\": \"fluid\",\n      \"data\": {\n        \"id\": mudID,\n        \"geometry\": {\n          \"level\": {\n            \"from\": curLevelFrom\n          }\n        }\n      }\n    });\n  }, 250);\n};\nconst disposeScene = () => {\n  clearInterval(intervalID);\n  if (plot) {\n    plot.dispose();\n  }\n};\nexport { createScene, disposeScene };\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#/Schematics/Fluids/fluids?section=vertical&extract=true","width":"100%","height":"838.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fluids-in-deviated-schematics","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/Fluids/fluids#deviated"},"children":["#"]}," Fluids in Deviated Schematics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The section demonstrates how to display a wellbore with several fluid components in a deviated 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 { MultiDiameterComponentFactoryRegistry } from \"@int/geotoolkit/schematics/factory/MultiDiameterComponentFactoryRegistry.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { ViewMode } from \"@int/geotoolkit/schematics/scene/WellBoreNode.ts\";\nimport { Trajectory2d } from \"@int/geotoolkit/deviation/Trajectory2d.ts\";\nimport { LocationType } from \"@int/geotoolkit/schematics/labeling/LocationType.ts\";\nimport { Mode } from \"@int/geotoolkit/schematics/labeling/Mode.ts\";\nimport { CompositeSchematicsWidget, DisplayMode } from \"@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts\";\nimport { AnimationStyle } from \"@int/geotoolkit/attributes/AnimationStyle.ts\";\nimport { getWellBoreData, mud, mudLevelFr } from \"/src/code/Schematics/Fluids/wellboreData_fluids.ts\";\nlet intervalID;\nlet plot = null;\nconst createScene = (canvas) => {\n  const factoryRegistry = new MultiDiameterComponentFactoryRegistry();\n  const wellBoreData = getWellBoreData();\n  const depths = [3780.9, 5100.1, 5350, 7768.8, 9220];\n  const markers = depths.map((depth) => ({\n    \"name\": \"marker\",\n    \"data\": {\n      \"description\": depth.toString(),\n      \"geometry\": { \"depth\": depth }\n    }\n  }));\n  wellBoreData.addComponents(markers);\n  const geometryBounds = wellBoreData.getGeometryBounds();\n  const minDepth = geometryBounds.getTop();\n  const maxDepth = geometryBounds.getBottom();\n  const trajectory = new Trajectory2d({\n    \"data\": {\n      \"x\": [0, 0, 1500],\n      \"y\": [0, 2500, 5e3],\n      \"d\": [minDepth, (minDepth + maxDepth) / 2, maxDepth]\n    }\n  });\n  const labelingOptions = {\n    \"locationmap\": [\n      { \"component\": [\"marker\"], \"location\": LocationType.Left }\n    ],\n    \"connectorshape\": null,\n    \"defaultlocation\": LocationType.Auto,\n    \"mode\": Mode.Trajectory\n  };\n  const widget = new CompositeSchematicsWidget({\n    \"data\": {\n      \"elements\": wellBoreData,\n      \"trajectory\": trajectory\n    },\n    \"annotationssizes\": {\n      \"north\": 0,\n      \"south\": 0,\n      \"east\": 0,\n      \"west\": 0\n    },\n    \"wellborenode\": {\n      \"renderinghints\": {\n        \"fluid\": {\n          \"Mud\": { \"fillstyle\": { \"color\": \"rgb(191,127,127)\" } },\n          \"Spacer Fluid\": { \"fillstyle\": { \"color\": \"rgb(113,244,151)\" } },\n          \"Head Slurry\": { \"fillstyle\": { \"color\": \"rgb(127,127,127)\" } },\n          \"Tail Slurry\": { \"fillstyle\": { \"color\": \"rgb(80,80,80)\" } }\n        }\n      },\n      \"viewmode\": ViewMode.Regular,\n      \"registry\": factoryRegistry\n    },\n    \"deviation\": {\n      \"trackwidth\": 100\n    },\n    \"labeling\": labelingOptions,\n    \"tools\": {\n      \"crosshair\": {\n        \"enabled\": false\n      },\n      \"tooltip\": {\n        \"enabled\": false\n      }\n    },\n    \"gap\": {\n      \"left\": {\n        \"size\": \"80px\",\n        \"linestyle\": null\n      },\n      \"right\": {\n        \"size\": \"0px\",\n        \"linestyle\": null\n      },\n      \"top\": {\n        \"size\": \"10px\",\n        \"visible\": true,\n        \"linestyle\": null\n      },\n      \"bottom\": {\n        \"size\": \"40px\",\n        \"visible\": true,\n        \"linestyle\": null\n      }\n    }\n  });\n  widget.setDisplayMode(DisplayMode.Deviated);\n  plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.fitToBounds();\n  if (!AnimationStyle.isAnimationEnabled())\n    return;\n  const step = 50;\n  const mudDepthTo = mud[\"data\"][\"geometry\"][\"depth\"][\"to\"];\n  const mudID = mud[\"data\"][\"id\"];\n  intervalID = window.setInterval(() => {\n    if (!wellBoreData)\n      return;\n    let curLevelFrom = mud[\"data\"][\"geometry\"][\"level\"][\"from\"];\n    if (curLevelFrom + step > mudDepthTo) {\n      curLevelFrom = mudLevelFr;\n    } else {\n      curLevelFrom += step;\n    }\n    wellBoreData.updateComponents({\n      \"name\": \"fluid\",\n      \"data\": {\n        \"id\": mudID,\n        \"geometry\": {\n          \"level\": {\n            \"from\": curLevelFrom\n          }\n        }\n      }\n    });\n  }, 250);\n};\nconst disposeScene = () => {\n  clearInterval(intervalID);\n  if (plot) {\n    plot.dispose();\n  }\n};\nexport { createScene, disposeScene };\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#/Schematics/Fluids/fluids?section=deviated&extract=true","width":"100%","height":"888.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Fluids","id":"fluids","depth":1},{"value":"Fluids in Vertical Schematics","id":"fluids-in-vertical-schematics","depth":3},{"value":"Fluids in Deviated Schematics","id":"fluids-in-deviated-schematics","depth":3}],"frontmatter":{"title":"Fluids","seo":{"title":"Fluids"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/schematics/fluids","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}