{"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":["This WellLog Localization tutorial shows how to change the displayed WellLog widget language (Locale). The following example provides four locales: US English (en), French (fr), Russian (ru), Chinese (cn) and demonstrates PDF export with the Locale. The Localization widget uses a third party library MomentJS to change Locales. Please visit the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Misc/Localization/localization"},"children":["Localization"]}," tutorial in the WellLogWidgets section."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"how-to-change-locale","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/Localization/localization#howToChangeLocale"},"children":["#"]}," How to Change Locale"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Using the third party library MomentJS, set the default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/util/DateTimeFormatFactory"]}," to MomentDateTimeFormat-Factory.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Then, set the Locale for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/axis/AdaptiveDateTimeTickGenerator()"]},"."]},{"$$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 {DateTimeFormatFactory} from '@int/geotoolkit/util/DateTimeFormatFactory';\nimport {TrackType} from '@int/geotoolkit/welllog/widgets/TrackType';\nimport {LogAxis} from '@int/geotoolkit/welllog/LogAxis';\nimport {AdaptiveDateTimeTickGenerator} from '@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator';\n\n// Change default DateTimeFormatFactory\nDateTimeFormatFactory.setDefault(new MomentDateTimeFormatFactory());\n\n// Set Locales for AdaptiveDateTimeTickGenerator\nconst logAxis = new LogAxis()\n    .setName('Time');\nlogAxis.setTickGenerator(new AdaptiveDateTimeTickGenerator()\n    .setLocale('en'));\n\n// Another approach to set locale and name for existing track\n// setTrackOptions API can also be used to set locale and name for track By following way\nwidget.setIndexType('time');\nconst _leftTrack = widget.addTrack(TrackType.IndexTrack);\n_leftTrack.setDepthLimits(minValue, maxValue).setWidth(50);\nwidget.setTrackOptions(_leftTrack, {\n    'axis': {\n        'locale': 'en',\n        'name': 'time'\n    }\n});\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"welllog-widget-in-different-locales","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/Localization/localization#locale"},"children":["#"]}," WellLog Widget In Different Locales"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click the Change Language radio buttons at the bottom of the image to display the language needed."]},{"$$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 { DateTimeFormatFactory } from \"@int/geotoolkit/util/DateTimeFormatFactory.ts\";\nimport { MomentDateTimeFormatFactory } from \"/src/code/WellLog/AdditionalFunctionality/Localization/momentdatetimeformatfactory.ts\";\nimport { TextStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { LogCurveDataSource } from \"@int/geotoolkit/welllog/data/LogCurveDataSource.ts\";\nimport { DataBindingRegistry } from \"@int/geotoolkit/data/DataBindingRegistry.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogAxis } from \"@int/geotoolkit/welllog/LogAxis.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { LogTrack } from \"@int/geotoolkit/welllog/LogTrack.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { FontSubType } from \"@int/geotoolkit/pdf/FontSubType.ts\";\nimport { HttpClient } from \"@int/geotoolkit/http/HttpClient.ts\";\nimport robotoFont from \"/src/assets/fonts/roboto.ttf?import\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst httpClient = HttpClient.getInstance().getHttp();\nconst CUSTOM_TEXT_STYLE = new TextStyle({\n  \"font\": \"10px roboto\"\n});\nclass Localization {\n  constructor(canvas, useDateTime) {\n    DateTimeFormatFactory.setDefault(new MomentDateTimeFormatFactory());\n    this._useDateTime = useDateTime;\n    this._widget = this.createWidget();\n    this._curFont = robotoFont;\n    this._base64Font = \"\";\n    this._plot = new Plot({\n      \"canvaselement\": canvas,\n      \"root\": this._widget\n    });\n    this._widget.fitToHeight();\n  }\n  createBasicWidget() {\n    return createWellLogWidget();\n  }\n  createTestData(minDepth, maxDepth) {\n    const depths = [];\n    for (let i = 0; i < 20; i++) {\n      depths[i] = minDepth + i * (maxDepth - minDepth) / 19;\n    }\n    return {\n      \"GR\": new LogCurveDataSource({\n        \"name\": \"GR\",\n        \"depths\": depths,\n        \"values\": [40, 45, 65, 75, 50, 80, 40, 95, 100, 45, 50, 55, 80, 48, 50, 75, 82, 50, 73, 75]\n      }),\n      \"CALI\": new LogCurveDataSource({\n        \"name\": \"CALI\",\n        \"depths\": depths,\n        \"values\": [6, 8, 10, 10, 6, 9, 11, 7, 6, 9, 7, 8, 11, 6, 9, 7, 8, 11, 6, 10]\n      })\n    };\n  }\n  createWidget() {\n    let minValue = new Date(2e3, 0, 1, 0, 0, 0, 0).getTime();\n    let maxValue = new Date(2e3, 5, 1, 0, 0, 0, 0).getTime();\n    if (this._useDateTime === false) {\n      minValue = 0;\n      maxValue = 1e3;\n    }\n    const dataSource = this.createTestData(minValue, maxValue);\n    const registry = new DataBindingRegistry().add({\n      accept: function(node) {\n        return node instanceof LogCurve;\n      },\n      bind: function(curve) {\n        const id = curve.getId();\n        curve.setData(dataSource[id]);\n      }\n    });\n    const widget = this.createBasicWidget().setIndexType(this._useDateTime ? \"time\" : \"depth\").setDeviceUnit(\"cm\").setIndexUnit(this._useDateTime ? \"ms\" : \"m\").setDepthLimits(minValue, maxValue).setVisibleDepthLimits(minValue, maxValue).setDataBinding(registry);\n    const headerProvider = widget.getHeaderContainer().getHeaderProvider();\n    const curveAxisHeader = headerProvider.getHeaderProvider(LogCurve.getClassName());\n    if (curveAxisHeader != null) {\n      headerProvider.registerHeaderProvider(LogCurve.getClassName(), curveAxisHeader.clone().setTextStyle(CUSTOM_TEXT_STYLE));\n    }\n    const logAxisHeader = headerProvider.getHeaderProvider(LogAxis.getClassName());\n    if (logAxisHeader != null) {\n      headerProvider.registerHeaderProvider(LogAxis.getClassName(), logAxisHeader.clone().setDisplayValueTextStyle(CUSTOM_TEXT_STYLE));\n    }\n    widget.addTrack(WellLogTrackType.IndexTrack).setWidth(70);\n    widget.addTrack(WellLogTrackType.LinearTrack).addChild([\n      new LogCurve().setId(\"CALI\").setLineStyle(KnownColors.Orange)\n    ]);\n    widget.addTrack(WellLogTrackType.LinearTrack).addChild([\n      new LogCurve().setId(\"GR\").setLineStyle(KnownColors.Green)\n    ]);\n    widget.addTrack(WellLogTrackType.IndexTrack).setWidth(70);\n    from(widget).where((node) => node instanceof LogTrack).select((track) => {\n      widget.setTrackOptions(track, {\n        \"axis\": {\n          \"locale\": \"en\",\n          \"name\": this._useDateTime ? \"Time\" : \"Depth\"\n        }\n      });\n    });\n    from(widget).where((node) => node instanceof LogAxis).select((axis) => {\n      const tickGenerator = axis.getTickGenerator();\n      tickGenerator.setLabelStyle(\"edge\", CUSTOM_TEXT_STYLE);\n      tickGenerator.setLabelStyle(\"major\", CUSTOM_TEXT_STYLE);\n    });\n    return widget;\n  }\n  updateValuesOfWidget(time, locale, caliName, grName) {\n    from(this._widget).where((node) => node instanceof LogTrack).select((track) => {\n      this._widget.setTrackOptions(track, {\n        \"axis\": {\n          \"locale\": locale,\n          \"name\": time\n        }\n      });\n    });\n    from(this._widget).where((node) => node instanceof LogCurve).select((node) => {\n      if (node.getId() === \"CALI\") {\n        node.setName(caliName);\n      } else {\n        node.setName(grName);\n      }\n    });\n  }\n  parseScale(pdfPrintSettings) {\n    if (pdfPrintSettings[\"scale\"] == null) {\n      return void 0;\n    }\n    const scaleParts = pdfPrintSettings[\"scale\"].split(\":\");\n    if (this._useDateTime) {\n      switch (scaleParts[1]) {\n        case \"10min\":\n          return 10;\n        case \"30min\":\n          return 30;\n        case \"1h\":\n          return 1 * 60;\n        case \"5h\":\n          return 5 * 60;\n        case \"10h\":\n          return 10 * 60;\n        case \"1d\":\n          return 24 * 60;\n        case \"1w\":\n          return 7 * 24 * 60;\n        case \"2w\":\n          return 14 * 24 * 60;\n        case \"4w\":\n          return 4 * 7 * 24 * 60;\n      }\n    } else {\n      switch (scaleParts[1]) {\n        case \"10m\":\n          return 10;\n        case \"50m\":\n          return 50;\n        case \"100m\":\n          return 100;\n        case \"1km\":\n          return 1e3;\n        case \"10km\":\n          return 1e4;\n      }\n    }\n    return void 0;\n  }\n  createExportToPdfOptions(options) {\n    const pdfPrintSettings = options[\"printSettings\"];\n    const scale = this.parseScale(pdfPrintSettings);\n    const limits = this._widget.getDepthLimits();\n    return {\n      \"output\": \"Widget\",\n      \"printsettings\": pdfPrintSettings,\n      \"deviceunit\": \"cm\",\n      \"indexunit\": this._useDateTime ? \"min\" : \"m\",\n      \"scale\": scale,\n      \"limits\": {\n        \"start\": limits.getLow(),\n        \"end\": limits.getHigh()\n      },\n      \"progress\": options[\"progress\"]\n    };\n  }\n  exportWidgetToPdfWithCustomFont(pdfPrintSettings) {\n    const options = this.createExportToPdfOptions(pdfPrintSettings);\n    return new Promise((resolve, reject) => {\n      if (this._base64Font.length > 0) {\n        resolve();\n        return;\n      }\n      httpClient.get(this._curFont, {\n        \"responsetype\": \"blob\"\n      }).then((result) => {\n        const reader = new FileReader();\n        reader.readAsDataURL(result[\"data\"]);\n        reader.onloadend = () => {\n          this._base64Font = reader.result.split(\",\")[1];\n          resolve();\n        };\n        reader.onerror = reject;\n      }, reject);\n    }).then(() => {\n      options[\"embededfonts\"] = [{\n        subtype: FontSubType.TrueType,\n        fontname: \"roboto\",\n        fontweight: \"normal\",\n        fontstyle: \"normal\",\n        fontbase64encodedfile: this._base64Font,\n        encoding: \"Identity-H\"\n      }];\n      return this._widget.exportToPdf(options);\n    });\n  }\n  setFont(value) {\n    if (this._curFont === value)\n      return;\n    this._curFont = value;\n    this._base64Font = \"\";\n  }\n  getPlot() {\n    return this._plot;\n  }\n}\nfunction createScene(canvas) {\n  return new Localization(canvas, true);\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#/WellLog/AdditionalFunctionality/Localization/localization?section=locale&extract=true","width":"100%","height":"805.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Localization","id":"localization","depth":1},{"value":"How to Change Locale","id":"how-to-change-locale","depth":3},{"value":"WellLog Widget In Different Locales","id":"welllog-widget-in-different-locales","depth":3}],"frontmatter":{"title":"Localization","seo":{"title":"Localization"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/localization","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}