{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Groups","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":"groups","__idx":0},"children":["Groups"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TimeSeriesObjectGroups"]}," allows curves with the same unit to share the same curve axis and limits as part of a uniquely identified group. Groups are created through the TimeSeries widget and curves can be added to and removed from the group after creation. To create a Time Series widget, see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Basics/basics"},"children":["Time Series Basics"]}," tutorial."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-groups","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Groups/groups#createGroups"},"children":["#"]}," Create Groups"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create a new group, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createGroup"]},". An ID needs to be specified and can also be used to remove the group from the widget."]},{"$$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 { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { FillDirection } from \"@int/geotoolkit/widgets/timeseries/FillDirection.ts\";\nimport { FillType } from \"@int/geotoolkit/widgets/timeseries/FillType.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nconst groups = {\n  \"cali\": null,\n  \"gr\": null\n};\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [2, 1, 0, 3];\n  const names = [\"CALI\", \"CALI2\", \"GR\", \"GR2\"];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(124, 179, 66, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\",\n    \"rgba(180, 40, 40, 0.75)\"\n  ];\n  const fillStyles = [\n    { \"color\": \"rgba(21,101,192,0.5)\" },\n    { \"color\": \"rgba(239,108,0,0.5)\" }\n  ];\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      },\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"optoins\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"intervalbuttons\": {\n        \"visible\": false\n      }\n    };\n    return new TimeSeriesWidget(options);\n  }\n  function addCurves(widget2) {\n    curveIndice.forEach((curveIndex, index) => {\n      widget2.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"axisposition\": index < 2 ? \"right\" : \"left\"\n        }\n      });\n    });\n  }\n  function addFills(widget2) {\n    widget2.addFill(\n      \"//test//gr\",\n      \"//test//gr2\",\n      fillStyles[0],\n      FillType.CurveToCurve,\n      FillDirection.Top\n    );\n    widget2.addFill(\n      \"//test//gr\",\n      \"//test//gr2\",\n      fillStyles[1],\n      FillType.CurveToCurve,\n      FillDirection.Bottom\n    );\n  }\n  const widget = createWidget();\n  addCurves(widget);\n  addFills(widget);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction toggleGroup(widget, name) {\n  if (groups[name] == null) {\n    groups[name] = widget.createGroup({\n      \"id\": name + \"group\",\n      \"curveids\": [\"//test//\" + name, \"//test//\" + name + \"2\"],\n      \"min\": 0,\n      \"max\": 20,\n      \"curveaxis\": {\n        \"compact\": true,\n        \"position\": name === \"gr\" ? \"left\" : \"right\",\n        \"axiswidth\": 30,\n        \"autolabelrotation\": true\n      }\n    });\n    return;\n  }\n  widget.removeGroup(groups[name]);\n  groups[name] = null;\n}\nexport { createScene, toggleGroup };\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#/TimeSeries/Groups/groups?section=createGroups&extract=true","width":"100%","height":"516.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"adding-and-removing-curves","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Groups/groups#addingAndRemovingCurves"},"children":["#"]}," Adding And Removing Curves"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Curves can be added to and removed from existing TimeSeries widget groups after their creation using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addObject"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["removeObject"]}," methods."]},{"$$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 { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [3, 0, 5];\n  const names = [\"CALI\", \"CALI2\", \"CALI3\"];\n  const colors = [\n    \"rgba(239, 108, 0, 0.85)\",\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(124, 179, 66, 0.85)\"\n  ];\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      },\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"intervalbuttons\": {\n        \"visible\": false\n      }\n    };\n    return new TimeSeriesWidget(options);\n  }\n  function addCurves(widget2) {\n    curveIndice.forEach((curveIndex, index) => {\n      widget2.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          }\n        }\n      });\n    });\n  }\n  const widget = createWidget();\n  addCurves(widget);\n  widget.createGroup({\n    \"id\": \"addremoveCALIgroup\",\n    \"curveids\": [\"//test//cali\", \"//test//cali2\"],\n    \"min\": 7,\n    \"max\": 12,\n    \"curveaxis\": {\n      \"compact\": true,\n      \"position\": \"right\",\n      \"axiswidth\": 30,\n      \"autolabelrotation\": true,\n      \"tickgeneratoroptions\": {\n        \"major\": {\n          \"tickvisible\": false,\n          \"labelvisible\": false\n        }\n      }\n    }\n  });\n  widget.scaleModel(2);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction addCurveToGroup(widget) {\n  const timeSeriesObject = widget.getTimeSeriesObjectById(\"//test//cali3\");\n  const group = widget.getGroupById(\"addremoveCALIgroup\");\n  group.addObject(timeSeriesObject);\n}\nfunction removeCurveFromGroup(widget) {\n  const timeSeriesObject = widget.getTimeSeriesObjectById(\"//test//cali3\");\n  const group = widget.getGroupById(\"addremoveCALIgroup\");\n  group.removeObject(timeSeriesObject);\n}\nexport { addCurveToGroup, createScene, removeCurveFromGroup };\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#/TimeSeries/Groups/groups?section=addingAndRemovingCurves&extract=true","width":"100%","height":"548.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"changing-group-limits","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Groups/groups#changingGroupLimits"},"children":["#"]}," Changing Group Limits"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To change the visible range of a group, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setMin"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setMax"]}," to set the minimum and maximum values respectively."]},{"$$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 { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { ScrollBarType } from \"@int/geotoolkit/widgets/timeseries/ScrollBarType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nfunction createScene(canvas) {\n  const startDate = new Date(2013, 0, 1).getTime();\n  const endDate = new Date(2014, 0, 1).getTime();\n  const dataTableViews = getDataTables(startDate, endDate);\n  const curveIndice = [3, 0];\n  const names = [\"CALI\", \"CALI2\"];\n  const colors = [\n    \"rgba(239, 108, 0, 0.85)\",\n    \"rgba(21, 101, 192, 0.85)\"\n  ];\n  function createWidget() {\n    const options = {\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": true,\n        \"titlevisible\": true,\n        \"axiswidth\": 25,\n        \"compact\": true\n      },\n      \"curvelimits\": {\n        \"visible\": false\n      },\n      \"lastupdatedate\": {\n        \"followcursor\": true\n      },\n      \"scrollbar\": {\n        \"type\": ScrollBarType.Simple,\n        \"height\": 10,\n        \"options\": {\n          \"resizable\": true,\n          \"rounded\": true\n        }\n      },\n      \"intervalbuttons\": {\n        \"visible\": false\n      }\n    };\n    return new TimeSeriesWidget(options);\n  }\n  function addCurves(widget2) {\n    curveIndice.forEach((curveIndex, index) => {\n      widget2.addCurve({\n        \"name\": names[index],\n        \"uri\": \"//test//\" + names[index].toLowerCase(),\n        \"data\": dataTableViews[curveIndex],\n        \"properties\": {\n          \"autoscale\": true,\n          \"axisautolabelrotation\": true,\n          \"neatlimits\": true,\n          \"unit\": \"INS\",\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          }\n        }\n      });\n    });\n  }\n  const widget = createWidget();\n  addCurves(widget);\n  widget.createGroup({\n    \"id\": \"minmaxCALIgroup\",\n    \"curveids\": [\"//test//cali\", \"//test//cali2\"],\n    \"min\": 7,\n    \"max\": 12,\n    \"curveaxis\": {\n      \"compact\": true,\n      \"position\": \"right\",\n      \"axiswidth\": 30,\n      \"autolabelrotation\": true,\n      \"tickgeneratoroptions\": {\n        \"major\": {\n          \"tickvisible\": false,\n          \"labelvisible\": false\n        }\n      }\n    }\n  });\n  widget.scaleModel(2);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction changeMinMax(widget) {\n  const group = widget.getGroupById(\"minmaxCALIgroup\");\n  const min = group.getMin() === 7 ? 5 : 7;\n  const max = group.getMax() === 12 ? 15 : 12;\n  group.setMin(min);\n  group.setMax(max);\n}\nexport { changeMinMax, 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#/TimeSeries/Groups/groups?section=changingGroupLimits&extract=true","width":"100%","height":"548.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Groups","id":"groups","depth":1},{"value":"Create Groups","id":"create-groups","depth":3},{"value":"Adding And Removing Curves","id":"adding-and-removing-curves","depth":3},{"value":"Changing Group Limits","id":"changing-group-limits","depth":3}],"frontmatter":{"title":"Groups","seo":{"title":"Groups"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/time-series/groups","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}