{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Localization","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":"localization","__idx":0},"children":["Localization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The localization of numbers, date and time in GeoToolkit can be changed easily with the use of locale settings. By default numbers, date and time are set in \"us\" locale. Locales can be updated to support localized language. This Localization tutorial shows how to update locale for numbers, date and time and how to simply update locale for all of these in TickGenerator. For more information on localization please visit the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/Localization/localization"},"children":["Localization"]}," tutorial in the WellLogWidgets section."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"how-to-update-locale","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Misc/Localization/localization#howToUpdateLocale"},"children":["#"]}," How to Update Locale"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to update Locale for numbers and date. The external Javascript Library MomentJS is used to change date and time formats."]},{"$$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 {DecimalFormat} from '@int/geotoolkit/util/DecimalFormat';\n\n// Update Locale for Date\n// Use MomentDateTimeFormatFactory to generate formator\nconst DateFormatFactory = new MomentDateTimeFormatFactory();\nconst DateFormator = DateFormatFactory.createFormat({'format': 'M j Y', 'locale': 'fr', 'timezone': 'America/Chicago'});\nconst Date = new Date('2018-1-12');\nconst formattedDate = DateFormator.format(rawDate);\n// Result: jan. 12 2018\n\n// Update Locale for Number\n// Setup Decimal formator\nconst NumberFormator = new DecimalFormat({'locale': 'ru'});\nconst Number = 2300.85;\nconst formattedNumber = NumberFormator.format(Number);\n// Result: 2 300,85\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"locales-in-tickgenerator","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Misc/Localization/localization#localesInTickGenerator"},"children":["#"]}," Locales in TickGenerator"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The AdaptiveDateTimeTickGenerator in different locales ( 'us', 'fr', 'ru', 'zh-cn' ) and the AdaptiveTickGenerator in different locales ( 'us', 'br', 'ru', 'zh-cn' ) are displayed below."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { DateTimeFormatFactory } from \"@int/geotoolkit/util/DateTimeFormatFactory.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { MomentDateTimeFormatFactory } from \"/src/code/Carnac/Misc/Localization/momentdatetimeformatfactory.ts\";\nimport { createAxis, createTitle } from \"/src/code/Carnac/Misc/Localization/common.ts\";\nfunction createScene(canvas) {\n  DateTimeFormatFactory.setDefault(new MomentDateTimeFormatFactory());\n  const parentGroup = new Group();\n  const fromDate = new Date(2e3, 0, 1, 0, 0, 0, 0);\n  fromDate.setUTCHours(0, 0, 0, 0);\n  const minDate = fromDate.getTime();\n  const toDate = new Date(2e3, 3, 1, 0, 0, 0, 0);\n  toDate.setUTCHours(0, 0, 0, 0);\n  const maxDate = toDate.getTime();\n  const minValue = 5432.5;\n  const maxValue = 5434.5;\n  let bounds = new Rect(10, 30, 380, 80);\n  const boundHeight = bounds.getHeight() + 10;\n  parentGroup.addChild([\n    createTitle(\"Adaptive Date Time TickGenerator\", bounds.getCenterX(), 10),\n    createAxis(true, minDate, maxDate, \"us\", void 0, Orientation.Horizontal).setBounds(bounds),\n    createAxis(true, minDate, maxDate, \"fr\", void 0, Orientation.Horizontal).setBounds(bounds.clone().setY(bounds.getY() + boundHeight)),\n    createAxis(true, minDate, maxDate, \"ru\", void 0, Orientation.Horizontal).setBounds(bounds.clone().setY(bounds.getY() + 2 * boundHeight)),\n    createAxis(true, minDate, maxDate, \"zh-cn\", void 0, Orientation.Horizontal).setBounds(bounds.clone().setY(bounds.getY() + 3 * boundHeight))\n  ]);\n  bounds = new Rect(410, 30, 790, 80);\n  parentGroup.addChild([\n    createTitle(\"Adaptive TickGenerator\", bounds.getCenterX(), 10),\n    createAxis(false, minValue, maxValue, \"us\", void 0, Orientation.Horizontal).setBounds(bounds),\n    createAxis(false, minValue, maxValue, \"br\", void 0, Orientation.Horizontal).setBounds(bounds.clone().setY(bounds.getY() + boundHeight)),\n    createAxis(false, minValue, maxValue, \"ru\", void 0, Orientation.Horizontal).setBounds(bounds.clone().setY(bounds.getY() + 2 * boundHeight)),\n    createAxis(false, minValue, maxValue, \"ch\", void 0, Orientation.Horizontal).setBounds(bounds.clone().setY(bounds.getY() + 3 * boundHeight))\n  ]);\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": parentGroup\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Misc/Localization/localization?section=localesInTickGenerator&extract=true","width":"100%","height":"353.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"time-zones-and-daylight-saving-time-in-adaptive-datetimetickgenerator","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Misc/Localization/localization#timeZones"},"children":["#"]}," Time Zones and Daylight Saving Time in Adaptive DateTimeTickGenerator"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The AdaptiveDateTimeTickGenerator in different Time Zones (\"UTC\", \"America/Chicago\", \"Europe/Paris\", \"Europe/Moscow\") is displayed below.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Daylight Saving Time ticks and labels are displayed in blue. Note that Daylight saving time 2013 in Houston began at 2:00 am Sunday, March 10.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"See list for available time zones : ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://en.wikipedia.org/wiki/List_of_tz_database_time_zones"},"children":["https://en.wikipedia.org/wiki/List_of_tz_database_time_zones"]}]},{"$$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 { Axis } from \"@int/geotoolkit/axis/Axis.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { DateTimeFormatFactory } from \"@int/geotoolkit/util/DateTimeFormatFactory.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { MomentDateTimeFormatFactory } from \"/src/code/Carnac/Misc/Localization/momentdatetimeformatfactory.ts\";\nimport __vite__cjsImport7_momentTimezone from \"/node_modules/.vite/deps/moment-timezone.js?v=6cbbe50f\"; const moment = __vite__cjsImport7_momentTimezone.__esModule ? __vite__cjsImport7_momentTimezone.default : __vite__cjsImport7_momentTimezone;\nimport { createAxis, createTitle } from \"/src/code/Carnac/Misc/Localization/common.ts\";\nfunction createScene(canvas) {\n  DateTimeFormatFactory.setDefault(new MomentDateTimeFormatFactory());\n  const parentGroup = new Group();\n  const minDate = new Date(Date.UTC(2013, 2, 10, 5, 0, 0, 0)).getTime();\n  const maxDate = new Date(Date.UTC(2013, 2, 10, 15, 0, 0, 0)).getTime();\n  const bounds = new Rect(150, 30, 260, 370);\n  const boundWidth = bounds.getWidth() + 10;\n  parentGroup.addChild([\n    createTitle(\"UTC\", bounds.getCenterX(), 10),\n    createAxis(true, minDate, maxDate, \"en\").setBounds(bounds),\n    createTitle(\"America/Chicago\", bounds.getCenterX() + boundWidth, 10),\n    createAxis(true, minDate, maxDate, \"en\", \"America/Chicago\").setBounds(bounds.clone().setX(bounds.getX() + boundWidth)),\n    createTitle(\"Europe/Paris\", bounds.getCenterX() + 2 * boundWidth, 10),\n    createAxis(true, minDate, maxDate, \"fr\", \"Europe/Paris\").setBounds(bounds.clone().setX(bounds.getX() + 2 * boundWidth)),\n    createTitle(\"Europe/Moscow\", bounds.getCenterX() + 3 * boundWidth, 10),\n    createAxis(true, minDate, maxDate, \"ru\", \"Europe/Moscow\").setBounds(bounds.clone().setX(bounds.getX() + 3 * boundWidth))\n  ]);\n  from(parentGroup).where((node) => node instanceof Axis).select((axis) => {\n    axis.getTickGenerator().setLabelGradeFormat(\"edge\", \"M j Y<b\\\\r/>H:i\").setLabelGradeFormat(\"major\", \"M j H:i\").setLabelGradeFormat(\"minor\", \"H:i\").setVisibleLabelGrade(\"minor\", true).setVisibleTickGrade(\"minor\", true).setTickSize(\"minor\", 10);\n    if (axis.getTickGenerator().getTimeZone() === \"America/Chicago\") {\n      const zone = moment.tz.zone(\"America/Chicago\");\n      axis.getTickGenerator().setDSTTimestamps(zone.untils).setLabelGradeFormat(\"dst\", \"l<b\\\\r/>M j <b\\\\r/>H:i\").setVisibleLabelGrade(\"dst\", true).setVisibleTickGrade(\"dst\", true).setTickSize(\"dst\", 15);\n    }\n  });\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": parentGroup\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Misc/Localization/localization?section=timeZones&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Localization","id":"localization","depth":1},{"value":"How to Update Locale","id":"how-to-update-locale","depth":3},{"value":"Locales in TickGenerator","id":"locales-in-tickgenerator","depth":3},{"value":"Time Zones and Daylight Saving Time in Adaptive DateTimeTickGenerator","id":"time-zones-and-daylight-saving-time-in-adaptive-datetimetickgenerator","depth":3}],"frontmatter":{"title":"Localization","seo":{"title":"Localization"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/misc/localization","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}