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

RiyaJethwa · 2023-12-27T14:44:05Z

Updates

Addition of locale interface
Ability to change modal title
Ability to change group and total label which was previously hardcoded
Ability to change toolbar labels

Demo screenshot or recording

… implementation of translations property

netlify · 2023-12-27T14:44:10Z

✅ Deploy Preview for carbon-charts-angular ready!

Name	Link
🔨 Latest commit	`ab1a29c`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-charts-angular/deploys/65ca4c28d44a4400087f6577
😎 Deploy Preview	https://deploy-preview-1710--carbon-charts-angular.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-12-27T14:44:10Z

✅ Deploy Preview for carbon-charts-react ready!

Name	Link
🔨 Latest commit	`ab1a29c`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-charts-react/deploys/65ca4c284cbdd900081cacc0
😎 Deploy Preview	https://deploy-preview-1710--carbon-charts-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-12-27T14:44:10Z

✅ Deploy Preview for carbon-charts-core ready!

Name	Link
🔨 Latest commit	`ab1a29c`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-charts-core/deploys/65ca4c281f22470008ae08f5
😎 Deploy Preview	https://deploy-preview-1710--carbon-charts-core.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

RiyaJethwa · 2023-12-27T14:44:29Z

I have read the DCO document and I hereby sign the DCO.

nstuyvesant · 2023-12-27T19:53:19Z

packages/core/src/interfaces/charts.ts

+	/**
+	 * Locale configuration
+	 */
+	locale?:Locale


Add space after colon

nstuyvesant · 2023-12-27T19:53:58Z

packages/core/src/interfaces/components.ts

+	date?: (value: Date) => string
+	translations?: {
+	  group?: string // used by Tooltip and Toolbar / Tabular Representation
+	  total?:string // ditto


add space after colon

…ormatter to table and tooltip

…erface

theiliad · 2024-02-02T03:34:54Z

packages/core/src/configuration.ts

+		toolbarExportAsJPG: 'Export to JPG',
+		toolbarExportAsPNG: 'Export to PNG',
+		tabularDownloadAsCSV: 'Download as CSV'
+	}


@RiyaJethwa pls make this object a bit more organized, could be this way

{ group: 'Group', total: 'Total', tabularRep: { title: "Tabular representation'", downloadAsCSV: 'Download as CSV' }, toolbar: { exportAsCSV: 'Export to CSV', exportAsJPG: 'Export to JPG', exportAsPNG: 'Export to PNG', } }

theiliad · 2024-02-02T03:36:51Z

packages/core/src/services/time-series.ts

-
-	return format(date, formatString, { locale })
+	const { code, optionsObject } = localeObject
+	if (interval === 'quarterly') {


could you explain this piece pls? it seems like we're formatting date values using our number locale formatter

theiliad · 2024-02-02T03:37:26Z

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')


Suggested change

const { code, number: numberFormatter } = getProperty(options, 'locale')

const { code: localeCode, number: numberFormatter } = getProperty(options, 'locale')

pls use more readable names. it's clear on this line that you're pulling a locale code, but in another line in this file when you will pass code into a function, it's not clear (from the name) what code is

ok I'll keep this in mind, I have updated to localeCode.

theiliad · 2024-02-02T03:41:40Z

packages/core/src/services/time-series.ts

@@ -84,8 +84,10 @@ export function formatTick(
 	i: number,
 	allTicks: Array<number>,
 	interval: string,
-	timeScaleOptions: TimeScaleOptions
+	timeScaleOptions: TimeScaleOptions,
+	options


Suggested change

options

localeOptions

let's just pass options.locale into this function rather than the full options

theiliad · 2024-02-02T03:43:59Z

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')


let's try to organize these better (e.g. options.locale.translations.meter.title

theiliad · 2024-02-02T03:51:38Z

packages/core/src/configuration.ts

+		},
+		pp: {
+			obj: {},
+			type: 'time'
+		},
+		'MMM d, p': {
+			obj: {
+				month: 'short',
+				day: 'numeric',
+				hour: 'numeric',
+				minute: '2-digit'
+			},
+			type: 'time'
+		},
+		p: {
+			obj: {
+				hour: 'numeric',
+				minute: '2-digit'
+			},
+			type: 'time'
+		},
+		'MMM d, h:mm:ss.SSS a': {
+			obj: {
+				month: 'short',
+				day: 'numeric',
+				hour: 'numeric',
+				minute: '2-digit',
+				fractionalSecondDigits: 3
+			},
+			type: 'time'
+		},
+		'h:mm:ss.SSS a': {
+			obj: {
+				hour: 'numeric',
+				minute: '2-digit',
+				fractionalSecondDigits: 3
+			},
+			type: 'time'
+		},
+		'MMM d': {
+			obj: {
+				month: 'short',
+				day: 'numeric'
+			},
+			type: 'date'
+		},
+		d: {
+			obj: {
+				day: 'numeric'
+			},
+			type: 'date'
+		},
+		'MMM d, hh a': {
+			obj: {
+				month: 'short',
+				day: 'numeric',
+				hour: '2-digit'
+			},
+			type: 'time'
+		},
+		'hh a': {
+			obj: {
+				hour: '2-digit'
+			},
+			type: 'time'
+		},
+		'MMM yyyy': {
+			obj: {
+				month: 'short',
+				year: 'numeric'
+			},
+			type: 'date'
+		},
+		MMM: {
+			obj: {
+				month: 'short'
+			},
+			type: 'date'
+		},
+		'eee, MMM d': {
+			obj: {
+				weekday: 'short',
+				month: 'short',
+				day: 'numeric'
+			},
+			type: 'date'
+		},
+		eee: {
+			obj: {
+				weekday: 'short'
+			},
+			type: 'date'
+		},
+		yyyy: {
+			obj: {
+				year: 'numeric'
+			},
+			type: 'date'
+		}
+	},


what is this object? what does it do?

There are formats for date string, but this is a work in progress since it is a draft PR.

theiliad · 2024-02-02T03:52:32Z

packages/core/src/interfaces/components.ts

+export interface Locale {
+	code?: string // BCP 47 language tag
+	number?: (value: number, language: string) => string
+	date?: (value: Date, language: string, options) => string


what is the type for options? is it Intl.DateTimeFormatOptions?

theiliad · 2024-02-02T03:52:34Z

packages/core/src/interfaces/components.ts

+	code?: string // BCP 47 language tag
+	number?: (value: number, language: string) => string
+	date?: (value: Date, language: string, options) => string
+	time?: (value: Date, language: string, options) => string


what is the type for options? is it Intl.DateTimeFormatOptions?

theiliad · 2024-02-02T03:53:13Z

packages/core/src/model/binned-charts.ts

 		const binnedStackedData = this.getBinnedStackedData()
-
-    const headers = [
+		console.log(code)


console.log

theiliad · 2024-02-02T03:56:56Z

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

@@ -217,7 +217,8 @@ export class WordCloud extends Component {
 							value: datum.value
 						},
 						{
-							label: options.tooltip.groupLabel,
+							label:
+								get(options, 'locale.translations.group') || get(options, 'tooltip.groupLabel'),


Suggested change

get(options, 'locale.translations.group') || get(options, 'tooltip.groupLabel'),

get(options, 'locale.translations.group') || get(options, 'tooltip.groupLabel') || 'Group',

…erface

MathiasWP · 2024-02-13T14:07:59Z

This release made our app crash when server side rendering @carbon/charts-svelte:

ReferenceError: navigator is not defined
  File "../../../../../../../../../../../../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@carbon/charts/dist/color-scale-utils-eeC25Jjh.mjs", line 1867, col 9, in <anonymous>
    code: navigator.language,

nstuyvesant · 2024-02-13T14:42:53Z

@MathiasWP -Surprised to hear that @carbon/charts-svelte ever worked with SSR as its dependencies expect to run in a browser due to the APIs and modules it uses (html-to-image, dompurify, etc.).

I use @carbon/charts-svelte with a SvelteKit web app (adapter-node) and use export const prerender = false for routes that use the charts.

dabrad26 · 2024-02-27T19:20:03Z

I believe this PR has broken the use of numberFormatter for some charts.

numberFormatter?: (value: number) => string;

These are wrapped in a Number type which is causing NaN to be rendered for most uses.

ManudeepHegde · 2025-01-27T13:33:12Z

I don't understand how this PR fixed the issue posted on
#1673

Am i missing something here or it is still an open issue?

feat(localeInterface):addition of locale interface in options and and…

fbbfde3

… implementation of translations property

RiyaJethwa requested review from theiliad and a team as code owners December 27, 2023 14:44

nstuyvesant reviewed Dec 27, 2023

View reviewed changes

packages/core/src/interfaces/charts.ts Outdated

/**

* Locale configuration

*/

locale?:Locale

Copy link

Contributor

nstuyvesant Dec 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add space after colon

nstuyvesant reviewed Dec 27, 2023

View reviewed changes

RiyaJethwa added 9 commits December 28, 2023 11:40

formatting rectified

b54bc7a

Merge branch 'master' into enhancement-localeInterface

4894219

Merge branch 'master' into enhancement-localeInterface

1701c4e

feat(localeOptions):updated translations prop and addition of numberF…

568da6a

…ormatter to table and tooltip

Merge branch 'carbon-design-system:master' into enhancement-localeInt…

b8813a6

…erface

fix(type):deleted unrequired imports

d7ef3df

fix(type):updated branch

0ca33ac

feat(localeOptions):updated locale object and locale conversion for axis

40b9032

Merge branch 'carbon-design-system:master' into enhancement-localeInt…

4fae08f

…erface

theiliad requested changes Feb 2, 2024

View reviewed changes

theiliad mentioned this pull request Feb 2, 2024

fix(model-csvFile-#1468):time level precision not availabe in date #1673

Closed

RiyaJethwa added 6 commits February 3, 2024 08:12

Merge branch 'carbon-design-system:master' into enhancement-localeInt…

57cf915

…erface

fix(localeInterface):axis ticks format

04bc907

Merge branch 'carbon-design-system:master' into enhancement-localeInt…

f6259bb

…erface

fix(type):updated branch

2db59ad

fix(localeInterface):change in optionsObject property structure

e799a2a

fix(localeInterface):added locale demo

2d8273d

theiliad changed the title ~~feat(localeInterface):addition of locale interface in options and and implementation of translations property~~ feat(i18n): new locale interface, and translation configs Feb 8, 2024

RiyaJethwa added 2 commits February 12, 2024 22:12

fix(localeInterface):date translation for modal and colorScale

72459c4

fix(model):removing unused imports

ab1a29c

theiliad approved these changes Feb 13, 2024

View reviewed changes

theiliad merged commit 60ef1ec into carbon-design-system:master Feb 13, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

RiyaJethwa commented Dec 27, 2023

netlify bot commented Dec 27, 2023 •

edited

Loading

netlify bot commented Dec 27, 2023 •

edited

Loading

netlify bot commented Dec 27, 2023 •

edited

Loading

RiyaJethwa commented Dec 27, 2023

nstuyvesant Dec 27, 2023

nstuyvesant Dec 27, 2023

theiliad Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

RiyaJethwa Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

RiyaJethwa Feb 2, 2024 •

edited

Loading

theiliad Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

theiliad Feb 2, 2024

MathiasWP commented Feb 13, 2024 •

edited

Loading

nstuyvesant commented Feb 13, 2024

dabrad26 commented Feb 27, 2024

ManudeepHegde commented Jan 27, 2025

	const { code, number: numberFormatter } = getProperty(options, 'locale')
	const { code: localeCode, number: numberFormatter } = getProperty(options, 'locale')

	get(options, 'locale.translations.group') \|\| get(options, 'tooltip.groupLabel'),
	get(options, 'locale.translations.group') \|\| get(options, 'tooltip.groupLabel') \|\| 'Group',

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

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

Conversation

RiyaJethwa commented Dec 27, 2023

Updates

Demo screenshot or recording

netlify bot commented Dec 27, 2023 • edited Loading

✅ Deploy Preview for carbon-charts-angular ready!

netlify bot commented Dec 27, 2023 • edited Loading

✅ Deploy Preview for carbon-charts-react ready!

netlify bot commented Dec 27, 2023 • edited Loading

✅ Deploy Preview for carbon-charts-core ready!

RiyaJethwa commented Dec 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RiyaJethwa Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MathiasWP commented Feb 13, 2024 • edited Loading

nstuyvesant commented Feb 13, 2024

dabrad26 commented Feb 27, 2024

ManudeepHegde commented Jan 27, 2025

netlify bot commented Dec 27, 2023 •

edited

Loading

netlify bot commented Dec 27, 2023 •

edited

Loading

netlify bot commented Dec 27, 2023 •

edited

Loading

RiyaJethwa Feb 2, 2024 •

edited

Loading

MathiasWP commented Feb 13, 2024 •

edited

Loading