feat(i18n): new locale interface, and translation configs

packages/core/src/components/axes/axis.ts

@@ -224,6 +224,7 @@ export class Axis extends Component {
 		// create the right ticks formatter
 		let formatter: any
 		const userProvidedFormatter = getProperty(axisOptions, 'ticks', 'formatter')
+		const { code, number: numberFormatter } = getProperty(options, 'locale')
 		if (isTimeScaleType) {
 			const timeInterval = computeTimeIntervalName(
 				axis.tickValues(),
@@ -232,23 +233,24 @@ export class Axis extends Component {
 
 			if (userProvidedFormatter === null) {
 				formatter = (t: number, i: number) =>
-					formatTick(t, i, axis.tickValues(), timeInterval, timeScaleOptions)
+					formatTick(t, i, axis.tickValues(), timeInterval, timeScaleOptions, options)
 			} else {
 				formatter = (t: number, i: number) => {
 					const defaultFormattedValue = formatTick(
 						t,
 						i,
 						axis.tickValues(),
 						timeInterval,
-						timeScaleOptions
+						timeScaleOptions,
+						options
 					)
 					return userProvidedFormatter(t, i, defaultFormattedValue)
 				}
 			}
 		} else {
 			if (userProvidedFormatter === null) {
 				if (scaleType === ScaleTypes.LINEAR) {
-					formatter = (t: any) => t.toLocaleString()
+					formatter = (t: any) => numberFormatter(t, code)
 				}
 			} else {
 				formatter = userProvidedFormatter

packages/core/src/components/axes/ruler-binned.ts

@@ -100,7 +100,10 @@ export class BinnedRuler extends Ruler {
 						...(getProperty(options, 'tooltip', 'showTotal') === true
 							? [
 									{
-										label: get(options, 'tooltip.totalLabel') || 'Total',
+										label:
+											get(options, 'locale.translations.total') ||
+											get(options, 'tooltip.totalLabel') ||
+											'Total',
 										value: activeDataGroupNames.reduce(
 											(accum: number, currentValue: any) =>
 												accum + parseFloat(get(sampleMatchData, `data.${currentValue}`)),

packages/core/src/components/axes/toolbar.ts

@@ -159,7 +159,7 @@ export class Toolbar extends Component {
 			.classed('cds--overflow-menu-options__option--disabled', (d: any) => d.shouldBeDisabled())
 			.attr('aria-disabled', (d: any) => d.shouldBeDisabled())
 			.selectAll('button')
-			.text((d: any) => d.text)
+			.text((d: any) => d.title)
 	}
 
 	isOverflowMenuOpen() {
@@ -367,7 +367,6 @@ export class Toolbar extends Component {
 	getControlConfigs() {
 		const numberOfIcons = getProperty(this.getOptions(), 'toolbar', 'numberOfIcons') - 1
 		const controls = getProperty(this.getOptions(), 'toolbar', 'controls')
-
 		const overflowSpecificControls: any[] = []
 		const buttonList: any[] = []
 		const overflowList: any[] = []
@@ -468,6 +467,12 @@ export class Toolbar extends Component {
 			!this.services.zoom.isEmptyState()
 
 		const displayData = this.model.getDisplayData()
+		const options = this.model.getOptions()
+		const { toolbarExportAsCSV, toolbarExportAsJPG, toolbarExportAsPNG } = getProperty(
+			options,
+			'locale',
+			'translations'
+		)
 
 		let controlConfig: any
 		switch (controlType) {
@@ -539,7 +544,7 @@ export class Toolbar extends Component {
 			case ToolbarControlTypes.EXPORT_CSV:
 				controlConfig = {
 					id: 'toolbar-export-CSV',
-					title: 'Export as CSV',
+					title: toolbarExportAsCSV,
 					shouldBeDisabled: () => false,
 					iconSVG: {
 						content: this.getControlIconByType(controlType)
@@ -550,7 +555,7 @@ export class Toolbar extends Component {
 			case ToolbarControlTypes.EXPORT_PNG:
 				controlConfig = {
 					id: 'toolbar-export-PNG',
-					title: 'Export as PNG',
+					title: toolbarExportAsPNG,
 					shouldBeDisabled: () => false,
 					iconSVG: {
 						content: this.getControlIconByType(controlType)
@@ -561,7 +566,7 @@ export class Toolbar extends Component {
 			case ToolbarControlTypes.EXPORT_JPG:
 				controlConfig = {
 					id: 'toolbar-export-JPG',
-					title: 'Export as JPG',
+					title: toolbarExportAsJPG,
 					shouldBeDisabled: () => false,
 					iconSVG: {
 						content: this.getControlIconByType(controlType)

packages/core/src/components/essentials/modal.ts

@@ -73,14 +73,21 @@ export class Modal extends Component {
 
 		const options = this.model.getOptions()
 
+		const { toolbarTabularModalTitle, tabularDownloadAsCSV } = getProperty(
+			options,
+			'locale',
+			'translations'
+		)
+
 		const chartprefix = getProperty(options, 'style', 'prefix')
 
 		const tableArray = this.model.getTabularDataArray()
 
 		return `
 		<div class="cds--modal-container cds--modal-container">
 			<div class="cds--modal-header cds--modal-header">
-				<p class="cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta" id="${id}__modal-title">Tabular representation</p>
+
+				<p class="cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta" id="modal-title">${toolbarTabularModalTitle}</p>
 
 				<p class="cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta" id="${id}__modal-description">${sanitizeText(
 					options.title
@@ -122,7 +129,7 @@ export class Modal extends Component {
 
 			<div class="cds--modal-footer cds--modal-footer">
 			  <div class="${carbonPrefix}--${chartprefix}-modal-footer-spacer"></div>
-			  <button class="cds--btn cds--btn--primary cds--btn cds--btn--primary" type="button" data-modal-primary-focus>Download as CSV</button>
+			  <button class="cds--btn cds--btn--primary cds--btn cds--btn--primary" type="button" data-modal-primary-focus>${tabularDownloadAsCSV}</button>
 			</div>
 		</div>`
 	}

packages/core/src/components/essentials/threshold.ts

@@ -201,7 +201,7 @@ export class Threshold extends Component {
 		const { value, axisPosition } = datum
 		const options = this.getOptions()
 		const scaleType = this.services.cartesianScales.getScaleTypeByPosition(axisPosition)
-
+		const { code, number: numberFormatter } = getProperty(options, 'locale')
 		// If scale is time, format the threshold date as the ticks format
 		if (scaleType === ScaleTypes.TIME) {
 			const isVertical = [AxisPositions.LEFT, AxisPositions.RIGHT].includes(axisPosition)
@@ -215,10 +215,10 @@ export class Threshold extends Component {
 				getProperty(timeScaleOptions, 'timeInterval')
 			)
 
-			return formatTick(value, 0, scale.ticks(), timeInterval, timeScaleOptions)
+			return formatTick(value, 0, scale.ticks(), timeInterval, timeScaleOptions, options)
 		}
 
-		return value.toLocaleString('en')
+		return numberFormatter(value, code)
 	}
 
 	appendThresholdLabel() {

packages/core/src/components/essentials/title-meter.ts

@@ -18,16 +18,17 @@ export class MeterTitle extends Title {
 		const options = this.getOptions()
 		const svg = this.getComponentContainer()
 		const { groupMapsTo } = options.data
-
+		const meterTitle = getProperty(options, 'locale', 'translations', 'meterTitle')
 		const proportional = getProperty(options, 'meter', 'proportional')
 
 		if (proportional) {
 			this.displayTotal()
 			this.displayBreakdownTitle()
 		} else {
 			// the title for a meter, is the label for that dataset
-			const title = svg.selectAll('text.meter-title').data([dataset[groupMapsTo]])
-
+			const title = svg
+				.selectAll('text.meter-title')
+				.data(meterTitle ? [meterTitle] : [dataset[groupMapsTo]])
 			title
 				.enter()
 				.append('text')
@@ -214,7 +215,7 @@ export class MeterTitle extends Title {
 	 */
 	appendPercentage() {
 		const dataValue = getProperty(this.model.getDisplayData(), 0, 'value')
-
+		const { code, number: numberFormatter } = getProperty(this.getOptions(), 'locale')
 		// use the title's position to append the percentage to the end
 		const svg = this.getComponentContainer()
 		const title = DOMUtils.appendOrSelect(svg, 'text.meter-title')
@@ -237,7 +238,7 @@ export class MeterTitle extends Title {
 			.append('text')
 			.classed('percent-value', true)
 			.merge(percentage as any)
-			.text((d: any) => `${d}%`)
+			.text((d: any) => `${numberFormatter(d, code)}%`)
 			.attr('x', +title.attr('x') + title.node().getComputedTextLength() + offset) // set the position to after the title
 			.attr('y', title.attr('y'))
 

packages/core/src/components/essentials/tooltip-axis.ts

@@ -73,7 +73,7 @@ export class AxisChartsTooltip extends Tooltip {
 			}
 
 			items.push({
-				label: options.tooltip.groupLabel,
+				label: get(options, 'locale.translations.group') || get(options, 'tooltip.groupLabel'),
 				value: datum[groupMapsTo],
 				color: this.model.getFillColor(datum[groupMapsTo]),
 				class: this.model.getColorClassName({
@@ -113,7 +113,10 @@ export class AxisChartsTooltip extends Tooltip {
 				// use the primary/only range id
 				const rangeIdentifier = cartesianScales.getRangeIdentifier()
 				items.push({
-					label: get(options, 'tooltip.totalLabel') || 'Total',
+					label:
+						get(options, 'locale.translations.total') ||
+						get(options, 'tooltip.totalLabel') ||
+						'Total',
 					value: data.reduce(
 						(accumulator: number, datum: any) => accumulator + datum[rangeIdentifier],
 						0

packages/core/src/components/essentials/tooltip.ts

@@ -1,5 +1,4 @@
 import { select, pointer } from 'd3'
-import { format } from 'date-fns/format'
 import Position, { PLACEMENTS } from '@carbon/utils-position' // position service
 import { getProperty, truncateLabel } from '@/tools'
 import { zoomBar as zoomBarConfigs, tooltips as tooltipConfigs } from '@/configuration'
@@ -182,25 +181,27 @@ export class Tooltip extends Component {
 	valueFormatter(value: any, label: string) {
 		const options = this.getOptions()
 		const valueFormatter = getProperty(options, 'tooltip', 'valueFormatter')
+		const { code, number: numberFormatter, date: dateFormatter } = getProperty(options, 'locale')
 
 		if (valueFormatter) {
 			return valueFormatter(value, label)
 		}
 
 		if (typeof value.getTime === 'function') {
-			return format(value, 'MMM d, yyyy')
+			return dateFormatter(value, code, { month: 'short', day: 'numeric', year: 'numeric' })
 		}
 
 		try {
 			// it's a correct ISO format Date string
 			if (typeof value === 'string' && /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(value)) {
-				return format(Date.parse(value), 'MMM d, yyyy')
+				const newDate = new Date(value)
+				return dateFormatter(newDate, code, { month: 'short', day: 'numeric', year: 'numeric' })
 			}
 		} catch (e) {
 			// not a valid ISO format string
 		}
 
-		return value.toLocaleString()
+		return numberFormatter(value, code)
 	}
 
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment

packages/core/src/components/graphs/alluvial.ts

@@ -252,6 +252,7 @@ export class Alluvial extends Component {
 				this.services.domUtils.generateElementIDString(`alluvial-node-title-${d.index}`)
 			)
 
+		const { code, number: numberFormatter } = getProperty(options, 'locale')
 		// Node title - text
 		textNode
 			.append('text')
@@ -267,7 +268,7 @@ export class Alluvial extends Component {
 			// shift 13 pixels down to fit background container
 			.attr('dy', 13)
 			.text((d: any) => {
-				return `${d.name} (${d.value})`
+				return `${d.name} (${numberFormatter(d.value, code)})`
 			})
 			.attr('aria-label', (d: any) => {
 				return `${d.name} (${d.value})`
@@ -327,6 +328,7 @@ export class Alluvial extends Component {
 	addLineEventListener() {
 		const options = this.getOptions()
 		const self = this
+		const { number: numberFormatter, code } = getProperty(this.getOptions(), 'locale')
 
 		// Set delay to counter flashy behaviour
 		const debouncedLineHighlight = debounce((link, event = 'mouseover') => {
@@ -379,7 +381,9 @@ export class Alluvial extends Component {
 					items: [
 						{
 							label: datum.target.name,
-							value: datum.value + (options.alluvial.units ? ` ${options.alluvial.units}` : ''),
+							value:
+								numberFormatter(datum.value, code) +
+								(options.alluvial.units ? ` ${options.alluvial.units}` : ''),
 							color: strokeColor,
 							labelIcon: self.getRightArrowIcon()
 						}

packages/core/src/components/graphs/boxplot.ts

@@ -1,5 +1,5 @@
 import { select } from 'd3'
-import { flipDomainAndRangeBasedOnOrientation, generateSVGPathString } from '@/tools'
+import { flipDomainAndRangeBasedOnOrientation, generateSVGPathString, getProperty } from '@/tools'
 import { boxplot as boxplotConfigs } from '@/configuration'
 import { BoxplotChartModel } from '@/model/boxplot'
 import { Component } from '@/components/component'
@@ -334,7 +334,9 @@ export class Boxplot extends Component {
 					hoveredElement,
 					items: [
 						{
-							label: options.tooltip.groupLabel,
+							label:
+								getProperty(options, 'locale', 'translations', 'group') ||
+								getProperty(options, 'tooltip', 'groupLabel'),
 							value: datum[groupMapsTo],
 							class: self.model.getColorClassName({
 								classNameTypes: [ColorClassNameTypes.TOOLTIP]
@@ -442,7 +444,9 @@ export class Boxplot extends Component {
 					hoveredElement,
 					items: [
 						{
-							label: options.tooltip.groupLabel,
+							label:
+								getProperty(options, 'locale', 'translations', 'group') ||
+								getProperty(options, 'tooltip', 'groupLabel'),
 							value: datum[groupMapsTo],
 							class: self.model.getColorClassName({
 								classNameTypes: [ColorClassNameTypes.TOOLTIP]

packages/core/src/components/graphs/bullet.ts

@@ -345,7 +345,10 @@ export class Bullet extends Component {
 					hoveredElement,
 					items: [
 						{
-							label: options.tooltip.groupLabel || 'Group',
+							label:
+								getProperty(options, 'locale', 'translations', 'group') ||
+								getProperty(options, 'tooltip', 'groupLabel') ||
+								'Group',
 							value: datum[groupMapsTo],
 							class: self.model.getColorClassName({
 								classNameTypes: [ColorClassNameTypes.TOOLTIP],

packages/core/src/components/graphs/circle-pack.ts

@@ -260,7 +260,10 @@ export class CirclePack extends Component {
 						const options = self.model.getOptions()
 						totalValue = [
 							{
-								label: get(options, 'tooltip.totalLabel') || 'Total',
+								label:
+									get(options, 'locale.translations.total') ||
+									get(options, 'tooltip.totalLabel') ||
+									'Total',
 								value: datum.value,
 								bold: true
 							}

packages/core/src/components/graphs/gauge.ts

@@ -199,7 +199,7 @@ export class Gauge extends Component {
 		const fontSize = valueFontSize(radius)
 		// Add the big number
 		const valueNumberGroup = DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number')
-
+		const { code, number: localeNumberFormatter } = getProperty(options, 'locale')
 		const numberFormatter = getProperty(options, 'gauge', 'numberFormatter')
 		const valueNumber = valueNumberGroup.selectAll('text.gauge-value-number').data([value])
 
@@ -210,7 +210,7 @@ export class Gauge extends Component {
 			.merge(valueNumber as any)
 			.style('font-size', `${fontSize}px`)
 			.attr('text-anchor', 'middle')
-			.text((d: any) => numberFormatter(d))
+			.text((d: any) => localeNumberFormatter(Number(numberFormatter(d)), code))
 
 		// add the percentage symbol beside the valueNumber
 		const { width: valueNumberWidth } = DOMUtils.getSVGElementSize(
@@ -245,7 +245,7 @@ export class Gauge extends Component {
 		const svg = this.getComponentContainer()
 		const options = this.getOptions()
 		const delta = this.getDelta()
-
+		const { code, number: localeNumberFormatter } = getProperty(options, 'locale')
 		if (!delta) {
 			const deltaGroup = svg.select('g.gauge-delta')
 
@@ -287,7 +287,9 @@ export class Gauge extends Component {
 				.merge(deltaNumber)
 				.attr('text-anchor', 'middle')
 				.style('font-size', `${deltaFontSize(radius)}px`)
-				.text((d: any) => `${numberFormatter(d)}${gaugeSymbol}`)
+				.text(
+					(d: any) => `${localeNumberFormatter(Number(numberFormatter(d)), code)}${gaugeSymbol}`
+				)
 
 			// Add the caret for the delta number
 			const { width: deltaNumberWidth } = DOMUtils.getSVGElementSize(