From 3ac0065ab582cf2b0f6580f4f5100d88a069507a Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Fri, 13 Aug 2021 12:47:04 +0300
Subject: [PATCH] Fix truncate labels to work only for slice labels positioned
 outside the chart

---
 .../vis_type_pie/public/editor/components/pie.tsx      |  8 +++++++-
 .../public/editor/components/truncate_labels.tsx       | 10 +++++++++-
 src/plugins/vis_type_pie/public/utils/get_config.ts    |  1 +
 src/plugins/vis_type_pie/public/utils/get_layers.ts    |  7 +------
 4 files changed, 18 insertions(+), 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
index 2e64874d1b57c..3bf28ba58d4eb 100644
--- 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
index e6eb56725753c..194df8097c1e6 100644
--- 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
index a8a4edb01cd9c..40f8f84b127f9 100644
--- 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
index b995df83c0bb0..42c4650419c6b 100644
--- 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);
       },