{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Animations","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":"animations","__idx":0},"children":["Animations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial describes how to add basic animation to a Time Series Widget. To create the basic Time Series Widget, please refer to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Basics/basics"},"children":["Time Series Basics"]}," tutorial."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"animation","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Animations/animations#animation"},"children":["#"]}," Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example demonstrates a basic Time Series widget with the added animation and easing function ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'EaseOutBack'"]},"."]},{"$$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 { DateUtil } from \"@int/geotoolkit/util/DateUtil.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { LineStyle, Patterns } from \"@int/geotoolkit/attributes/LineStyle.ts\";\nimport { AnimationStyle } from \"@int/geotoolkit/attributes/AnimationStyle.ts\";\nimport { Direction } from \"@int/geotoolkit/layout/HorizontalPriorityLayout.ts\";\nimport { AdaptiveDateTimeTickGenerator } from \"@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator.ts\";\nimport { DateTimeFormat } from \"@int/geotoolkit/util/DateTimeFormat.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { DataTableView } from \"@int/geotoolkit/data/DataTableView.ts\";\nimport { Functions } from \"@int/geotoolkit/animation/Easing.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nconst timeouts = [];\nlet interval;\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 = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const units = [\"INS\", \"API\"];\n  const limits = [{\n    \"min\": 0,\n    \"max\": 15\n  }, {\n    \"min\": 0,\n    \"max\": 150\n  }];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(239, 108, 0, 0.85)\"\n  ];\n  const style = new AnimationStyle([{\n    \"attributename\": \"data\",\n    \"begin\": \"auto\",\n    \"duration\": 1500,\n    \"function\": Functions.EaseOutBack\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          ...limits[index],\n          \"autoscale\": false,\n          \"neatlimits\": true,\n          \"unit\": units[index],\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"axisposition\": index % 2 === 0 ? \"right\" : \"left\"\n        }\n      });\n    });\n  }\n  function customizeCSS(widget2) {\n    widget2.setAnimationStyle(style);\n    const css = `\n            *[cssclass~=\"layoutgroup\"]{\n                fillstyle: #284258;\n            }\n            .TimeSeriesWidget {\n                tooltips-tooltipoptions-textcolor: #e1dcdc;\n            }\n            .geotoolkit.axis.Axis {\n                tickgenerator-edge-labelstyle-color: rgba(255,255,255, 1);\n            }\n        `;\n    widget2.setCss(css);\n  }\n  function createWidget() {\n    const options = {\n      \"curvelimits\": {\n        \"visible\": false\n      },\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": false,\n        \"axiswidth\": 60,\n        \"textcolor\": \"#ffffff\",\n        \"tickgeneratoroptions\": {\n          \"major\": {\n            \"labelvisible\": true\n          }\n        },\n        \"titlevisible\": false,\n        \"compact\": false\n      },\n      \"cursor\": {\n        \"linestyle\": {\n          \"color\": \"rgba(255,255,255,1)\",\n          \"width\": 0.5,\n          \"pattern\": Patterns.Solid\n        }\n      },\n      \"intervalbuttons\": {\n        \"visible\": false\n      },\n      \"lastupdatedate\": {\n        \"visible\": false\n      },\n      \"legends\": {\n        \"direction\": Direction.RightToLeft,\n        \"legendoptions\": {\n          \"fillstyle\": \"#284258\",\n          \"linestyle\": \"#284258\"\n        }\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"scrollbar\": {\n        \"visible\": false\n      },\n      \"southaxis\": {\n        \"color\": \"#ffffff\",\n        \"font\": \"12px Arial\",\n        \"height\": 30,\n        \"tickgenerator\": new AdaptiveDateTimeTickGenerator().setFormatLabelHandler((tickgen, parent, orient, info, index, value) => DateUtil.formatUTC(new Date(value), \"M d\"))\n      },\n      \"title\": {\n        \"text\": \"\",\n        \"height\": 20,\n        \"color\": \"#ffffff\",\n        \"visible\": true,\n        \"padding\": [0, 0, 0, 5]\n      },\n      \"tooltips\": {\n        \"selectionradius\": Number.POSITIVE_INFINITY,\n        \"tooltipoptions\": {\n          \"index\": {\n            \"name\": \"\",\n            \"visible\": true,\n            \"formatter\": new DateTimeFormat({ \"format\": \"M d\" }),\n            \"textcolor\": \"#e1dcdc\"\n          },\n          \"textcolor\": \"#e1dcdc\"\n        },\n        \"fillstyle\": \"rgba(100,100,100,0.8)\",\n        \"linestyle\": LineStyle.Empty\n      },\n      \"visiblerange\": {\n        \"visible\": false\n      }\n    };\n    return new TimeSeriesWidget(options);\n  }\n  function setDataWidget(curves, dataTableView, widget2) {\n    curves.forEach((curve, index) => {\n      const timeSeriesObject = widget2.getTimeSeriesObjectById(curve);\n      if (timeSeriesObject != null) {\n        timeSeriesObject.setData(dataTableView[index]);\n      }\n    });\n  }\n  function addAnimations(widget2) {\n    const arrayZeros = new Array(1e3).fill(0);\n    const dataTable = [];\n    const dataTableView = [];\n    for (let i = 0; i < 2; i++) {\n      dataTable[i] = new DataTable({ \"cols\": [\n        { \"type\": \"number\", \"data\": dataTableViews[i].getDataTable().getColumn(0).toArray() },\n        { \"type\": \"number\", \"data\": arrayZeros }\n      ] });\n      dataTableView[i] = new DataTableView(dataTable[i]);\n    }\n    const curves = widget2.getCurves();\n    widget2.getTool().getToolByName(\"manipulatorTools.cursor\").setEnabled(false);\n    timeouts.push(window.setTimeout(() => {\n      setDataWidget(curves, dataTableViews, widget2);\n      widget2.updateState();\n    }, 300));\n    timeouts.push(window.setTimeout(() => {\n      widget2.getTool().getToolByName(\"manipulatorTools.cursor\").setEnabled(true);\n    }, 1800));\n    interval = window.setInterval(() => {\n      widget2.getTool().getToolByName(\"manipulatorTools.cursor\").setEnabled(false);\n      widget2.setAnimationStyle(null);\n      setDataWidget(curves, dataTableView, widget2);\n      widget2.setAnimationStyle(style);\n      timeouts.push(window.setTimeout(() => {\n        setDataWidget(curves, dataTableViews, widget2);\n        widget2.updateState();\n      }, 1e3));\n      timeouts.push(window.setTimeout(() => {\n        widget2.getTool().getToolByName(\"manipulatorTools.cursor\").setEnabled(true);\n      }, 2500));\n    }, 5e3);\n  }\n  const widget = createWidget();\n  addCurves(widget);\n  customizeCSS(widget);\n  addAnimations(widget);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction dispose() {\n  timeouts.forEach((timeout) => {\n    clearTimeout(timeout);\n  });\n  clearInterval(interval);\n}\nexport { createScene, dispose };\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/Animations/animations?section=animation&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"symbol-animation","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/TimeSeries/Animations/animations#symbolAnimation"},"children":["#"]}," Symbol Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example demonstrates the symbol animation for the Time Series 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 { DateUtil } from \"@int/geotoolkit/util/DateUtil.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { TimeSeriesWidget } from \"@int/geotoolkit/widgets/TimeSeriesWidget.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Patterns } from \"@int/geotoolkit/attributes/LineStyle.ts\";\nimport { AnimationStyle } from \"@int/geotoolkit/attributes/AnimationStyle.ts\";\nimport { Direction } from \"@int/geotoolkit/layout/HorizontalPriorityLayout.ts\";\nimport { AdaptiveDateTimeTickGenerator } from \"@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { ToolTipTool } from \"@int/geotoolkit/controls/tools/ToolTipTool.ts\";\nimport { Point } from \"@int/geotoolkit/util/Point.ts\";\nimport { getDataTables } from \"/src/code/TimeSeries/data.ts\";\nimport { MarkerFactory } from \"/src/code/TimeSeries/Animations/markerFactory.ts\";\nfunction createToolTipTool(widget, tooltip) {\n  const markers = [];\n  const manipulatorLayer = from(widget).where('node => id(node) == \"manipulator_layer\"').selectFirst();\n  const style = \"margin-right: 5px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\";\n  return new ToolTipTool({\n    \"divelement\": tooltip,\n    \"layer\": widget,\n    \"init\": () => {\n      const duration = 500;\n      const style2 = new AnimationStyle([{\n        \"attributename\": \"width\",\n        \"duration\": duration,\n        \"begin\": \"auto\"\n      }, {\n        \"attributename\": \"height\",\n        \"duration\": duration,\n        \"begin\": \"auto\"\n      }, {\n        \"attributename\": \"visible\",\n        \"duration\": duration,\n        \"begin\": \"auto\"\n      }]);\n      widget.getCurves().forEach(\n        () => markers.push(\n          new MarkerFactory(() => new SymbolShape({\n            \"ax\": 0,\n            \"ay\": 0,\n            \"width\": 15,\n            \"height\": 15,\n            \"sizeisindevicespace\": true,\n            \"linestyle\": {\n              \"color\": \"white\",\n              \"width\": 3,\n              \"shadow\": {\n                \"enable\": true,\n                \"blur\": 5,\n                \"color\": \"gray\"\n              }\n            },\n            \"fillstyle\": {\n              \"color\": \"transparent\"\n            },\n            \"painter\": CirclePainter,\n            \"animationstyle\": style2\n          }), style2)\n        )\n      );\n      manipulatorLayer.insertChild(0, new Group().addChild(markers).setVerticalFlip(true));\n    },\n    \"callback\": (pt) => {\n      const lineData = widget.hitTest(pt);\n      const results = [];\n      lineData.forEach((data, index) => {\n        const marker = markers[index];\n        marker.setVisible(true);\n        const curve = data[\"curve\"];\n        let symbolPoint = new Point(data[\"position\"], data[\"value\"]);\n        if (curve.getWorldTransform() != null) {\n          symbolPoint = curve.getWorldTransform().transformPoint(symbolPoint, symbolPoint);\n        }\n        marker.showMarker(symbolPoint, data[\"symbol\"].getFillStyle().getColor(), CirclePainter);\n        const timeSeriesObject = widget.getTimeSeriesObjectById(data[\"id\"]);\n        const formatter = timeSeriesObject.getTooltipOptions()[\"formatter\"];\n        const color = data[\"symbol\"].getFillStyle().getColor();\n        results.push(`<span style=\"${style} background-color: ${color}\"></span><b>` + data[\"name\"] + \"</b> <br>Date: \" + DateUtil.formatUTC(new Date(data[\"position\"]), \"M j H:i\") + \"<br>\" + data[\"name\"] + \": \" + formatter.format(data[\"originalvalue\"]) + (data[\"originalunit\"] != null ? \" (\" + data[\"originalunit\"] + \")\" : \"\") + \"<br>\");\n      });\n      return results.join(\"<br>\");\n    }\n  });\n}\nfunction createScene(canvas, tooltip) {\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 = [0, 1];\n  const names = [\"CALI\", \"GR\"];\n  const units = [\"INS\", \"API\"];\n  const limits = [{\n    \"min\": 0,\n    \"max\": 15\n  }, {\n    \"min\": 0,\n    \"max\": 150\n  }];\n  const colors = [\n    \"rgba(21, 101, 192, 0.85)\",\n    \"rgba(255, 0, 0, 0.85)\"\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          ...limits[index],\n          \"autoscale\": false,\n          \"neatlimits\": true,\n          \"unit\": units[index],\n          \"linestyle\": {\n            \"color\": colors[index],\n            \"width\": 2\n          },\n          \"axisposition\": index % 2 === 0 ? \"right\" : \"left\"\n        }\n      });\n    });\n  }\n  function customizeCSS(widget2) {\n    const css = `\n            .geotoolkit.axis.Axis {\n              tickgenerator-edge-labelstyle-color: rgba(0,0,0, 1);\n            }\n        `;\n    widget2.setCss(css);\n  }\n  function createWidget() {\n    const options = {\n      \"curvelimits\": {\n        \"visible\": false\n      },\n      \"curvesymbol\": {\n        \"visible\": false\n      },\n      \"curveaxis\": {\n        \"visible\": true,\n        \"autocoloraxis\": true,\n        \"autocolorlabel\": false,\n        \"axiswidth\": 60,\n        \"textcolor\": \"#ffffff\",\n        \"tickgeneratoroptions\": {\n          \"major\": {\n            \"labelvisible\": true\n          }\n        },\n        \"titlevisible\": false,\n        \"compact\": false\n      },\n      \"cursor\": {\n        \"linestyle\": {\n          \"color\": \"rgba(255,255,255,1)\",\n          \"width\": 0.5,\n          \"pattern\": Patterns.Solid\n        }\n      },\n      \"intervalbuttons\": {\n        \"visible\": false\n      },\n      \"lastupdatedate\": {\n        \"visible\": false\n      },\n      \"legends\": {\n        \"direction\": Direction.RightToLeft\n      },\n      \"model\": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),\n      \"scrollbar\": {\n        \"visible\": false\n      },\n      \"southaxis\": {\n        \"color\": \"#ffffff\",\n        \"font\": \"10px Arial\",\n        \"height\": 30,\n        \"tickgenerator\": new AdaptiveDateTimeTickGenerator().setFormatLabelHandler((tickgen, parent, orient, info, index, value) => DateUtil.formatUTC(new Date(value), \"M d Y\"))\n      },\n      \"title\": {\n        \"text\": \"\",\n        \"height\": 20,\n        \"color\": \"#ffffff\",\n        \"visible\": true,\n        \"padding\": [0, 0, 0, 5]\n      },\n      \"tooltips\": {\n        \"visible\": false\n      },\n      \"visiblerange\": {\n        \"visible\": false\n      }\n    };\n    return new TimeSeriesWidget(options);\n  }\n  const widget = createWidget();\n  addCurves(widget);\n  customizeCSS(widget);\n  widget.connectTool(createToolTipTool(widget, tooltip));\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'), document.querySelector('[ref=\"tooltip\"]'));\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/Animations/animations?section=symbolAnimation&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Animations","id":"animations","depth":1},{"value":"Animation","id":"animation","depth":3},{"value":"Symbol Animation","id":"symbol-animation","depth":3}],"frontmatter":{"title":"Animations","seo":{"title":"Animations"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/time-series/animations","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}