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

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

superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx

@@ -543,7 +543,7 @@ class AnnotationLayer extends React.PureComponent {
               name="annotation-layer-title"
               label={t('Title Column')}
               description={t('Pick a title for you annotation.')}
-              options={[{ value: '', label: 'None' }].concat(columns)}
+              options={[{ value: '', label: t('None') }].concat(columns)}
               value={titleColumn}
               onChange={value => this.setState({ titleColumn: value })}
             />
@@ -566,9 +566,9 @@ class AnnotationLayer extends React.PureComponent {
               <CheckboxControl
                 hovered
                 name="annotation-override-time_range"
-                label="Override time range"
-                description={`This controls whether the "time_range" field from the current
-                  view should be passed down to the chart containing the annotation data.`}
+                label={t('Override time range')}
+                description={t(`This controls whether the "time_range" field from the current
+                  view should be passed down to the chart containing the annotation data.`)}
                 value={'time_range' in overrides}
                 onChange={v => {
                   delete overrides.time_range;
@@ -584,9 +584,9 @@ class AnnotationLayer extends React.PureComponent {
               <CheckboxControl
                 hovered
                 name="annotation-override-timegrain"
-                label="Override time grain"
-                description={`This controls whether the time grain field from the current
-                  view should be passed down to the chart containing the annotation data.`}
+                label={t('Override time grain')}
+                description={t(`This controls whether the time grain field from the current
+                  view should be passed down to the chart containing the annotation data.`)}
                 value={'time_grain_sqla' in overrides}
                 onChange={v => {
                   delete overrides.time_grain_sqla;
@@ -607,9 +607,9 @@ class AnnotationLayer extends React.PureComponent {
               <TextControl
                 hovered
                 name="annotation-layer-timeshift"
-                label="Time Shift"
-                description={`Time delta in natural language
-                  (example:  24 hours, 7 days, 56 weeks, 365 days)`}
+                label={t('Time Shift')}
+                description={t(`Time delta in natural language
+                  (example:  24 hours, 7 days, 56 weeks, 365 days)`)}
                 placeholder=""
                 value={overrides.time_shift}
                 onChange={v =>
@@ -708,8 +708,8 @@ class AnnotationLayer extends React.PureComponent {
           <CheckboxControl
             hovered
             name="annotation-layer-show-markers"
-            label="Show Markers"
-            description="Shows or hides markers for the time series"
+            label={t('Show Markers')}
+            description={t('Shows or hides markers for the time series')}
             value={showMarkers}
             onChange={v => this.setState({ showMarkers: v })}
           />
@@ -718,8 +718,8 @@ class AnnotationLayer extends React.PureComponent {
           <CheckboxControl
             hovered
             name="annotation-layer-hide-line"
-            label="Hide Line"
-            description="Hides the Line for the time series"
+            label={t('Hide Line')}
+            description={t('Hides the Line for the time series')}
             value={hideLine}
             onChange={v => this.setState({ hideLine: v })}
           />

superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx

@@ -112,7 +112,7 @@ const ColorSchemeControl = ({
       return [
         {
           value: 'dashboard',
-          label: 'dashboard',
+          label: t('dashboard'),
           customLabel: (
             <Tooltip title={DASHBOARD_ALERT}>{t('Dashboard scheme')}</Tooltip>
           ),

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

@@ -133,7 +133,7 @@ export default class FixedOrMetricControl extends React.Component {
                 )}
                 {this.state.type === controlTypes.metric && (
                   <span>
-                    <span>metric: </span>
+                    <span>{t('metric')}: </span>
                     <strong>
                       {this.state.metricValue
                         ? this.state.metricValue.label

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx

@@ -102,7 +102,7 @@ const AdhocMetricEditPopoverTitle: React.FC<AdhocMetricEditPopoverTitleProps> =
     }
 
     return (
-      <Tooltip placement="top" title="Click to edit label">
+      <Tooltip placement="top" title={t('Click to edit label')}>
         <span
           className="AdhocMetricEditPopoverTitle inline-editable"
           data-test="AdhocMetricEditTitle#trigger"

superset-frontend/src/explore/components/controls/SpatialControl.jsx

@@ -171,11 +171,11 @@ export default class SpatialControl extends React.Component {
         >
           <Row gutter={16}>
             <Col xs={24} md={12}>
-              Longitude
+              {t('Longitude')}
               {this.renderSelect('lonCol', spatialTypes.latlong)}
             </Col>
             <Col xs={24} md={12}>
-              Latitude
+              {t('Latitude')}
               {this.renderSelect('latCol', spatialTypes.latlong)}
             </Col>
           </Row>
@@ -206,7 +206,7 @@ export default class SpatialControl extends React.Component {
         >
           <Row gutter={16}>
             <Col xs={24} md={12}>
-              Column
+              {t('Column')}
               {this.renderSelect('geohashCol', spatialTypes.geohash)}
             </Col>
             <Col xs={24} md={12}>

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}
         >

superset-frontend/src/explore/components/controls/ViewportControl.jsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React from 'react';
+import { t } from '@superset-ui/core';
 import PropTypes from 'prop-types';
 import Popover from 'src/components/Popover';
 import { decimal2sexagesimal } from 'geolib';
@@ -107,7 +108,7 @@ export default class ViewportControl extends React.Component {
           trigger="click"
           placement="right"
           content={this.renderPopover()}
-          title="Viewport"
+          title={t('Viewport')}
         >
           <Label className="pointer">{this.renderLabel()}</Label>
         </Popover>