feat(i18n): new locale interface, and translation configs #1710
+628
−109
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -249,7 +249,7 @@ export class Bullet extends Component { | |
| animate | ||
| }) | ||
| ) | ||
| .attr('d', ({ datum: d, value }: { datum: any; value: any }) => { | ||
| /* | ||
| * Orientation support for horizontal/vertical bar charts | ||
| * Determine coordinates needed for a vertical set of paths | ||
|
|
@@ -336,14 +336,19 @@ export class Bullet extends Component { | |
| }) | ||
|
|
||
| const performanceAreaTitles = getProperty(options, 'bullet', 'performanceAreaTitles') | ||
| const matchingRangeIndex = ( | ||
| self.model as BulletChartModel | ||
| ).getMatchingRangeIndexForDatapoint(datum) | ||
|
|
||
| self.services.events.dispatchEvent(Events.Tooltip.SHOW, { | ||
| event, | ||
| hoveredElement, | ||
| items: [ | ||
| { | ||
| label: | ||
| getProperty(options, 'locale', 'translations', 'group') || | ||
| getProperty(options, 'tooltip', 'groupLabel') || | ||
| 'Group', | ||
| value: datum[groupMapsTo], | ||
| class: self.model.getColorClassName({ | ||
| classNameTypes: [ColorClassNameTypes.TOOLTIP], | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -55,13 +55,15 @@ export class CirclePack extends Component { | |
| .size([width, height]) | ||
| .padding((d: any) => { | ||
| // add 3 px to account for the stroke width 1.5px | ||
| return d.depth >= 1 | ||
| ? circlePackConfigs.padding.children + 3 | ||
| : circlePackConfigs.padding.mainGroup + 3 | ||
| }) | ||
|
|
||
| const nodeData = packLayout(root) | ||
| .descendants() | ||
| .splice(1) | ||
| .filter(node => { | ||
| // filter based on hierarchy level | ||
| return node.depth <= hierarchyLevel | ||
| }) | ||
|
|
@@ -258,7 +260,10 @@ export class CirclePack extends Component { | |
| const options = self.model.getOptions() | ||
| totalValue = [ | ||
| { | ||
| label: | ||
| get(options, 'locale.translations.total') || | ||
| get(options, 'tooltip.totalLabel') || | ||
| 'Total', | ||
| value: datum.value, | ||
| bold: true | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,9 +35,9 @@ export class Heatmap extends Component { | |
| eventsFragment.addEventListener(Events.Axis.LABEL_BLUR, this.handleAxisMouseOut) | ||
| } | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| render(animate = true) { | ||
| const svg = this.getComponentContainer({ withinChartClip: true }) | ||
| // Lower the chart so the axes are always visible | ||
|
|
@@ -102,7 +102,8 @@ export class Heatmap extends Component { | |
| `translate(${mainXScale(d[domainIdentifier])}, ${mainYScale(d[rangeIdentifier])})` | ||
| ) | ||
| .append('rect') | ||
| .attr('class', (d: any) => | ||
| this.model.getColorClassName({ | ||
| value: d.value, | ||
| originalClassName: `heat-${d.index}` | ||
| }) | ||
|
|
@@ -202,7 +203,8 @@ export class Heatmap extends Component { | |
| const self = this | ||
| const { cartesianScales } = this.services | ||
| const options = this.getOptions() | ||
| const totalLabel = | ||
| get(options, 'locale.translations.total') || get(options, 'tooltip.totalLabel') || 'Total' | ||
|
|
||
| const domainIdentifier = cartesianScales.getDomainIdentifier() | ||
| const rangeIdentifier = cartesianScales.getRangeIdentifier() | ||
|
|
@@ -252,7 +254,7 @@ export class Heatmap extends Component { | |
| value: datum[rangeIdentifier] | ||
| }, | ||
| { | ||
| label: totalLabel, | ||
| value: datum['value'], | ||
| color: hoveredElement.style('fill') | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,6 +1,6 @@ | ||||||
| import { extent, scaleLinear, select } from 'd3' | ||||||
| import cloud from 'd3-cloud' | ||||||
| import { debounce, get } from 'lodash-es' | ||||||
| import { Component } from '@/components/component' | ||||||
| import { DOMUtils } from '@/services/essentials/dom-utils' | ||||||
| import { Events, ColorClassNameTypes, RenderTypes } from '@/interfaces/enums' | ||||||
|
|
@@ -217,7 +217,8 @@ export class WordCloud extends Component { | |||||
| value: datum.value | ||||||
| }, | ||||||
| { | ||||||
| label: | ||||||
| get(options, 'locale.translations.group') || get(options, 'tooltip.groupLabel'), | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| value: datum[groupMapsTo], | ||||||
| class: self.model.getColorClassName({ | ||||||
| classNameTypes: [ColorClassNameTypes.TOOLTIP], | ||||||
|
|
||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -53,6 +53,7 @@ import { | |
| StackedBarOptions, | ||
| ToolbarOptions, | ||
| ZoomBarsOptions, | ||
| Locale | ||
| } from '@/interfaces/components' | ||
|
|
||
| /* | ||
|
|
@@ -70,6 +71,23 @@ const standardTruncationOptions = { | |
| numCharacter: 14 | ||
| } | ||
|
|
||
| /** | ||
| * Locale options | ||
| */ | ||
| const locale: Locale = { | ||
| code: navigator.language, // read from browser's navigator.language | ||
| number: value => value.toLocaleString(navigator.language), // based on code property if specified | ||
| date: value => value.toLocaleDateString(navigator.language), // based on code property if specified | ||
| translations: { | ||
| group: 'Group', | ||
| total: 'Total', | ||
| toolbarTabularModalTitle: 'Tabular representation', | ||
| toolbarExportAsCSV: 'Export to CSV', | ||
| toolbarExportAsJPG: 'Export to JPG', | ||
| toolbarExportAsPNG: 'Export to PNG' | ||
| } | ||
|
There was a problem hiding this comment. @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',
}
} |
||
| } | ||
|
|
||
| /** | ||
| * Legend options | ||
| */ | ||
|
|
@@ -179,6 +197,7 @@ const chart: BaseChartOptions = { | |
| theme: ChartTheme.WHITE, | ||
| tooltip: baseTooltip, | ||
| legend, | ||
| locale, | ||
| style: { | ||
| prefix: 'cc' | ||
| }, | ||
|
|
@@ -229,9 +248,9 @@ const chart: BaseChartOptions = { | |
| */ | ||
| const thematicChart: ThematicChartOptions = merge({}, chart, { | ||
| thematic: { | ||
| projection: Projection.geoNaturalEarth1 | ||
| } | ||
| }) | ||
|
|
||
| /** | ||
| * Options common to any chart with an axis | ||
|
|
@@ -474,10 +493,10 @@ const gaugeChart: GaugeChartOptions = merge({}, chart, { | |
| const donutChart: DonutChartOptions = merge({}, pieChart, { | ||
| donut: { | ||
| center: { | ||
| numberFontSize: radius => `${Math.min((radius / 100) * 24, 24)}px`, | ||
| titleFontSize: radius => `${Math.min((radius / 100) * 15, 15)}px`, | ||
| titleYPosition: radius => Math.min((radius / 80) * 20, 20), | ||
| numberFormatter: number => Math.floor(number).toLocaleString() | ||
| }, | ||
| alignment: Alignments.LEFT | ||
| } | ||
|
|
@@ -520,7 +539,7 @@ const radarChart: RadarChartOptions = merge({}, chart, { | |
| gridline: { | ||
| enabled: true | ||
| }, | ||
| valueFormatter: value => (value !== null && value !== undefined ? value : 'N/A') | ||
| } | ||
| } as RadarChartOptions) | ||
|
|
||
|
|
@@ -589,10 +608,10 @@ const heatmapChart: HeatmapChartOptions = merge({}, chart, { | |
| const choroplethChart: ChoroplethChartOptions = merge({}, thematicChart, { | ||
| choropleth: { | ||
| colorLegend: { | ||
| type: 'linear' | ||
| } | ||
| } | ||
| } as ChoroplethChartOptions) | ||
|
|
||
| export const options = { | ||
| alluvialChart, | ||
|
|
@@ -623,7 +642,7 @@ export const options = { | |
| thematicChart, | ||
| treeChart, | ||
| treemapChart, | ||
| wordCloudChart | ||
| } | ||
|
|
||
| export { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.