Fix truncate labels to work only for slice labels positioned outside …

…the chart
elastic · Aug 13, 2021 · 3ac0065 · 3ac0065
1 parent 1b644c5
commit 3ac0065
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/src/plugins/vis_type_pie/public/editor/components/pie.tsx b/src/plugins/vis_type_pie/public/editor/components/pie.tsx
@@ -283,7 +283,13 @@ const PieOptions = (props: PieOptionsProps) => {
             />
           </>
         )}
-        <TruncateLabelsOption value={stateParams.labels.truncate} setValue={setLabels} />
+        <TruncateLabelsOption
+          value={stateParams.labels.truncate}
+          setValue={setLabels}
+          disabled={
+            props.showElasticChartsOptions && stateParams.labels.position === LabelPositions.INSIDE
+          }
+        />
       </EuiPanel>
     </>
   );

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
@@ -8,7 +8,7 @@
 
 import React, { ChangeEvent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { EuiFormRow, EuiFieldNumber, EuiIconTip } from '@elastic/eui';
 
 export interface TruncateLabelsOptionProps {
   disabled?: boolean;
@@ -27,6 +27,14 @@ function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabe
       })}
       fullWidth
       display="rowCompressed"
+      labelAppend={
+        <EuiIconTip
+          content="Number of characters for labels positioned outside the chart."
+          position="top"
+          type="iInCircle"
+          color="subdued"
+        />
+      }
     >
       <EuiFieldNumber
         data-test-subj="pieLabelTruncateInput"

diff --git a/src/plugins/vis_type_pie/public/utils/get_config.ts b/src/plugins/vis_type_pie/public/utils/get_config.ts
@@ -63,6 +63,7 @@ export const getConfig = (
     config.linkLabel = {
       maxCount: Number.POSITIVE_INFINITY,
       maximumSection: Number.POSITIVE_INFINITY,
+      maxTextLength: visParams.labels.truncate ?? undefined,
     };
   }
 

diff --git a/src/plugins/vis_type_pie/public/utils/get_layers.ts b/src/plugins/vis_type_pie/public/utils/get_layers.ts
@@ -151,12 +151,7 @@ export const getLayers = (
       showAccessor: (d: Datum) => d !== EMPTY_SLICE,
       nodeLabel: (d: unknown) => {
         if (col.format) {
-          const formattedLabel = formatter.deserialize(col.format).convert(d) ?? '';
-          if (visParams.labels.truncate && formattedLabel.length <= visParams.labels.truncate) {
-            return formattedLabel;
-          } else {
-            return `${formattedLabel.slice(0, Number(visParams.labels.truncate))}\u2026`;
-          }
+          return formatter.deserialize(col.format).convert(d) ?? '';
         }
         return String(d);
       },