Address PR comments

elastic · Aug 19, 2021 · 3f30a29 · 3f30a29
1 parent 22d2839
commit 3f30a29
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/options/long_legend_options.tsx b/src/plugins/vis_default_editor/public/components/options/long_legend_options.tsx
@@ -12,6 +12,9 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
 import { SwitchOption } from './switch';
 
+const MAX_TRUNCATE_LINES = 5;
+const MIN_TRUNCATE_LINES = 1;
+
 export interface LongLegendOptionsProps {
   setValue: (paramName: 'maxLegendLines' | 'truncateLegend', value: boolean | number) => void;
   truncateLegend: boolean;
@@ -48,12 +51,16 @@ function LongLegendOptions({
         <EuiFieldNumber
           data-test-subj="timeSeriesEditorDataMaxLegendLines"
           value={maxLegendLines}
-          min={1}
-          max={5}
+          min={MIN_TRUNCATE_LINES}
+          max={MAX_TRUNCATE_LINES}
           fullWidth
           disabled={!Boolean(truncateLegend)}
           onChange={(e) => {
-            setValue('maxLegendLines', Number(e.target.value));
+            const val = Number(e.target.value);
+            setValue(
+              'maxLegendLines',
+              Math.min(MAX_TRUNCATE_LINES, Math.max(val, MIN_TRUNCATE_LINES))
+            );
           }}
         />
       </EuiFormRow>

diff --git a/src/plugins/vis_type_pie/public/editor/components/truncate_labels.tsx b/src/plugins/vis_type_pie/public/editor/components/truncate_labels.tsx
@@ -29,7 +29,9 @@ function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabe
       display="rowCompressed"
       labelAppend={
         <EuiIconTip
-          content="Number of characters for labels positioned outside the chart."
+          content={i18n.translate('visTypePie.controls.truncateTooltip', {
+            defaultMessage: 'Number of characters for labels positioned outside the chart.',
+          })}
           position="top"
           type="iInCircle"
           color="subdued"