chore: Localization of several charts and elements (#22150)

Co-authored-by: ashumeiko <ashumeiko@ashumeiko.com>

superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx

@@ -61,17 +61,17 @@ const defaultProps = {
 };
 
 const comparisonTypeOptions = [
-  { value: 'value', label: 'Actual value', key: 'value' },
-  { value: 'diff', label: 'Difference', key: 'diff' },
-  { value: 'perc', label: 'Percentage', key: 'perc' },
-  { value: 'perc_change', label: 'Percentage change', key: 'perc_change' },
+  { value: 'value', label: t('Actual value'), key: 'value' },
+  { value: 'diff', label: t('Difference'), key: 'diff' },
+  { value: 'perc', label: t('Percentage'), key: 'perc' },
+  { value: 'perc_change', label: t('Percentage change'), key: 'perc_change' },
 ];
 
 const colTypeOptions = [
-  { value: 'time', label: 'Time comparison', key: 'time' },
-  { value: 'contrib', label: 'Contribution', key: 'contrib' },
-  { value: 'spark', label: 'Sparkline', key: 'spark' },
-  { value: 'avg', label: 'Period average', key: 'avg' },
+  { value: 'time', label: t('Time comparison'), key: 'time' },
+  { value: 'contrib', label: t('Contribution'), key: 'contrib' },
+  { value: 'spark', label: t('Sparkline'), key: 'spark' },
+  { value: 'avg', label: t('Period average'), key: 'avg' },
 ];
 
 const StyledRow = styled(Row)`
@@ -192,28 +192,28 @@ export default class TimeSeriesColumnControl extends React.Component {
     return (
       <div id="ts-col-popo" style={{ width: 320 }}>
         {this.formRow(
-          'Label',
-          'The column header label',
+          t('Label'),
+          t('The column header label'),
           'time-lag',
           <Input
             value={this.state.label}
             onChange={this.onTextInputChange.bind(this, 'label')}
-            placeholder="Label"
+            placeholder={t('Label')}
           />,
         )}
         {this.formRow(
-          'Tooltip',
-          'Column header tooltip',
+          t('Tooltip'),
+          t('Column header tooltip'),
           'col-tooltip',
           <Input
             value={this.state.tooltip}
             onChange={this.onTextInputChange.bind(this, 'tooltip')}
-            placeholder="Tooltip"
+            placeholder={t('Tooltip')}
           />,
         )}
         {this.formRow(
-          'Type',
-          'Type of comparison, value difference or percentage',
+          t('Type'),
+          t('Type of comparison, value difference or percentage'),
           'col-type',
           <Select
             ariaLabel={t('Type')}
@@ -225,52 +225,52 @@ export default class TimeSeriesColumnControl extends React.Component {
         <hr />
         {this.state.colType === 'spark' &&
           this.formRow(
-            'Width',
-            'Width of the sparkline',
+            t('Width'),
+            t('Width of the sparkline'),
             'spark-width',
             <Input
               value={this.state.width}
               onChange={this.onTextInputChange.bind(this, 'width')}
-              placeholder="Width"
+              placeholder={t('Width')}
             />,
           )}
         {this.state.colType === 'spark' &&
           this.formRow(
-            'Height',
-            'Height of the sparkline',
+            t('Height'),
+            t('Height of the sparkline'),
             'spark-width',
             <Input
               value={this.state.height}
               onChange={this.onTextInputChange.bind(this, 'height')}
-              placeholder="Height"
+              placeholder={t('Height')}
             />,
           )}
         {['time', 'avg'].indexOf(this.state.colType) >= 0 &&
           this.formRow(
-            'Time lag',
-            'Number of periods to compare against',
+            t('Time lag'),
+            t('Number of periods to compare against'),
             'time-lag',
             <Input
               value={this.state.timeLag}
               onChange={this.onTextInputChange.bind(this, 'timeLag')}
-              placeholder="Time Lag"
+              placeholder={t('Time Lag')}
             />,
           )}
         {['spark'].indexOf(this.state.colType) >= 0 &&
           this.formRow(
-            'Time ratio',
-            'Number of periods to ratio against',
+            t('Time ratio'),
+            t('Number of periods to ratio against'),
             'time-ratio',
             <Input
               value={this.state.timeRatio}
               onChange={this.onTextInputChange.bind(this, 'timeRatio')}
-              placeholder="Time Ratio"
+              placeholder={t('Time Ratio')}
             />,
           )}
         {this.state.colType === 'time' &&
           this.formRow(
-            'Type',
-            'Type of comparison, value difference or percentage',
+            t('Type'),
+            t('Type of comparison, value difference or percentage'),
             'comp-type',
             <Select
               ariaLabel={t('Type')}
@@ -281,8 +281,10 @@ export default class TimeSeriesColumnControl extends React.Component {
           )}
         {this.state.colType === 'spark' &&
           this.formRow(
-            'Show Y-axis',
-            'Show Y-axis on the sparkline. Will display the manually set min/max if set or min/max values in the data otherwise.',
+            t('Show Y-axis'),
+            t(
+              'Show Y-axis on the sparkline. Will display the manually set min/max if set or min/max values in the data otherwise.',
+            ),
             'show-y-axis-bounds',
             <CheckboxControl
               value={this.state.showYAxis}
@@ -291,8 +293,8 @@ export default class TimeSeriesColumnControl extends React.Component {
           )}
         {this.state.colType === 'spark' &&
           this.formRow(
-            'Y-axis bounds',
-            'Manually set min/max values for the y-axis.',
+            t('Y-axis bounds'),
+            t('Manually set min/max values for the y-axis.'),
             'y-axis-bounds',
             <BoundsControl
               value={this.state.yAxisBounds}
@@ -301,10 +303,10 @@ export default class TimeSeriesColumnControl extends React.Component {
           )}
         {this.state.colType !== 'spark' &&
           this.formRow(
-            'Color bounds',
-            `Number bounds used for color encoding from red to blue.
-              Reverse the numbers for blue to red. To get pure red or blue,
-              you can enter either only min or max.`,
+            t('Color bounds'),
+            t(`Number bounds used for color encoding from red to blue.
+               Reverse the numbers for blue to red. To get pure red or blue,
+               you can enter either only min or max.`),
             'bounds',
             <BoundsControl
               value={this.state.bounds}
@@ -312,24 +314,24 @@ export default class TimeSeriesColumnControl extends React.Component {
             />,
           )}
         {this.formRow(
-          'Number format',
-          'Optional d3 number format string',
+          t('Number format'),
+          t('Optional d3 number format string'),
           'd3-format',
           <Input
             value={this.state.d3format}
             onChange={this.onTextInputChange.bind(this, 'd3format')}
-            placeholder="Number format string"
+            placeholder={t('Number format string')}
           />,
         )}
         {this.state.colType === 'spark' &&
           this.formRow(
-            'Date format',
-            'Optional d3 date format string',
+            t('Date format'),
+            t('Optional d3 date format string'),
             'date-format',
             <Input
               value={this.state.dateFormat}
               onChange={this.onTextInputChange.bind(this, 'dateFormat')}
-              placeholder="Date format string"
+              placeholder={t('Date format string')}
             />,
           )}
         <ButtonBar>
@@ -356,7 +358,7 @@ export default class TimeSeriesColumnControl extends React.Component {
         <ControlPopover
           trigger="click"
           content={this.renderPopover()}
-          title="Column Configuration"
+          title={t('Column Configuration')}
           visible={this.state.popoverVisible}
           onVisibleChange={this.onPopoverVisibleChange}
         >