fix(discover): Refactor Truncation in Echarts Legend (#10004)

src/sentry/static/sentry/app/components/charts/baseChart.jsx

@@ -54,9 +54,6 @@ class BaseChart extends React.Component {
     // Chart legend
     legend: SentryTypes.EChartsLegend,
 
-    // Chart legend truncate labels
-    truncateLegend: PropTypes.bool,
-
     // Chart height
     height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
@@ -111,7 +108,6 @@ class BaseChart extends React.Component {
     renderer: 'svg',
     notMerge: true,
     lazyUpdate: false,
-    truncateLegend: true,
     onChartReady: () => {},
     options: {},
 
@@ -141,7 +137,6 @@ class BaseChart extends React.Component {
       grid,
       tooltip,
       legend,
-      truncateLegend,
       series,
       yAxis,
       xAxis,
@@ -187,7 +182,7 @@ class BaseChart extends React.Component {
           color: colors || this.getColorPalette(),
           grid: Grid(grid),
           tooltip: tooltip !== null ? Tooltip({isGroupedByDate, ...tooltip}) : null,
-          legend: legend ? Legend({...legend, truncateLegend}) : null,
+          legend: legend ? Legend({...legend}) : null,
           yAxis: yAxis !== null ? YAxis(yAxis) : null,
           xAxis:
             xAxis !== null

src/sentry/static/sentry/app/components/charts/components/legend.jsx

@@ -1,15 +1,15 @@
 import 'echarts/lib/component/legend';
 import 'echarts/lib/component/legendScroll';
 
-export default function Legend({truncateLegend, ...props} = {}) {
+export default function Legend({truncate, ...props} = {}) {
   return {
     show: true,
     type: 'scroll',
     padding: 0,
-    formatter: truncateLegend
+    formatter: truncate
       ? function(name) {
-          if (name.length > 80) {
-            return name.substring(0, 80) + '...';
+          if (name.length > truncate) {
+            return name.substring(0, truncate) + '...';
           } else {
             return name;
           }

src/sentry/static/sentry/app/sentryTypes.jsx

@@ -685,6 +685,7 @@ export const EChartsGrid = PropTypes.shape({
 export const EChartsLegend = PropTypes.shape({
   // Show legend on chart
   show: PropTypes.bool,
+  truncate: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 });
 
 export const SeriesUnit = PropTypes.shape({

src/sentry/static/sentry/app/views/organizationDiscover/result/index.jsx

@@ -120,7 +120,7 @@ export default class Result extends React.Component {
       byDayQuery.data && getChartDataByDay(byDayQuery.data.data, byDayQuery.query);
 
     const legendData = byDayChartData
-      ? {data: byDayChartData.map(entry => entry.seriesName)}
+      ? {data: byDayChartData.map(entry => entry.seriesName), truncate: 80}
       : null;
 
     const tooltipOptions = {
@@ -144,7 +144,7 @@ export default class Result extends React.Component {
               series={basicChartData}
               height={300}
               tooltip={tooltipOptions}
-              legend={{data: [baseQuery.query.aggregations[0][2]]}}
+              legend={{data: [baseQuery.query.aggregations[0][2]], truncate: 80}}
               renderer="canvas"
             />
           </ChartWrapper>
@@ -155,7 +155,7 @@ export default class Result extends React.Component {
               series={basicChartData}
               height={300}
               tooltip={tooltipOptions}
-              legend={{data: [baseQuery.query.aggregations[0][2]]}}
+              legend={{data: [baseQuery.query.aggregations[0][2]], truncate: 80}}
               renderer="canvas"
             />
           </ChartWrapper>