[TSVB] Supports legends with long values

elastic · Aug 10, 2021 · b9243ad · b9243ad
1 parent eca7146
commit b9243ad
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 33 deletions.
diff --git a/src/plugins/vis_type_timeseries/common/types/panel_model.ts b/src/plugins/vis_type_timeseries/common/types/panel_model.ts
@@ -159,6 +159,8 @@ export interface Panel {
   series: Series[];
   show_grid: number;
   show_legend: number;
+  truncate_legend?: number;
+  max_lines_legend?: number;
   time_field?: string;
   time_range_mode?: string;
   tooltip_mode?: TOOLTIP_MODES;

diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.tsx b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.tsx
@@ -23,6 +23,7 @@ import {
   EuiFieldText,
   EuiTitle,
   EuiHorizontalRule,
+  EuiFieldNumber,
 } from '@elastic/eui';
 
 // @ts-expect-error not typed yet
@@ -352,63 +353,101 @@ export class TimeseriesPanelConfig extends Component<
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormRow
-                  label={i18n.translate('visTypeTimeseries.timeseries.optionsTab.showLegendLabel', {
-                    defaultMessage: 'Show legend?',
-                  })}
-                >
-                  <YesNo
-                    value={model.show_legend}
-                    name="show_legend"
-                    onChange={this.props.onChange}
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="visTypeTimeseries.timeseries.optionsTab.displayGridLabel"
+                    defaultMessage="Display grid"
                   />
-                </EuiFormRow>
+                </EuiFormLabel>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <YesNo value={model.show_grid} name="show_grid" onChange={this.props.onChange} />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel htmlFor={htmlId('legendPos')}>
+                <EuiFormLabel>
                   <FormattedMessage
-                    id="visTypeTimeseries.timeseries.optionsTab.legendPositionLabel"
-                    defaultMessage="Legend position"
+                    id="visTypeTimeseries.timeseries.optionsTab.tooltipMode"
+                    defaultMessage="Tooltip"
                   />
                 </EuiFormLabel>
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiComboBox
                   isClearable={false}
-                  id={htmlId('legendPos')}
-                  options={legendPositionOptions}
-                  selectedOptions={selectedLegendPosOption ? [selectedLegendPosOption] : []}
-                  onChange={handleSelectChange('legend_position')}
+                  id={htmlId('tooltipMode')}
+                  options={tooltipModeOptions}
+                  selectedOptions={selectedTooltipMode ? [selectedTooltipMode] : []}
+                  onChange={handleSelectChange('tooltip_mode')}
                   singleSelection={{ asPlainText: true }}
                 />
               </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiFlexGroup responsive={false} wrap={true} alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiFormRow
-                  label={i18n.translate(
-                    'visTypeTimeseries.timeseries.optionsTab.displayGridLabel',
-                    {
-                      defaultMessage: 'Display grid',
-                    }
-                  )}
-                >
-                  <YesNo value={model.show_grid} name="show_grid" onChange={this.props.onChange} />
-                </EuiFormRow>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="visTypeTimeseries.timeseries.optionsTab.showLegendLabel"
+                    defaultMessage="Show legend?"
+                  />
+                </EuiFormLabel>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <YesNo
+                  value={model.show_legend}
+                  name="show_legend"
+                  onChange={this.props.onChange}
+                />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiFormLabel>
                   <FormattedMessage
-                    id="visTypeTimeseries.timeseries.optionsTab.tooltipMode"
-                    defaultMessage="Tooltip"
+                    id="visTypeTimeseries.timeseries.optionsTab.truncateLegendLabel"
+                    defaultMessage="Truncate legend?"
+                  />
+                </EuiFormLabel>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <YesNo
+                  value={model.truncate_legend}
+                  name="truncate_legend"
+                  onChange={this.props.onChange}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="visTypeTimeseries.timeseries.optionsTab.maxLinesLabel"
+                    defaultMessage="Maximum legend lines"
+                  />
+                </EuiFormLabel>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiFieldNumber
+                  value={model.max_lines_legend}
+                  min={1}
+                  max={5}
+                  compressed
+                  disabled={!Boolean(model.truncate_legend)}
+                  onChange={(e) => {
+                    this.props.onChange({ max_lines_legend: Number(e.target.value) });
+                  }}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFormLabel htmlFor={htmlId('legendPos')}>
+                  <FormattedMessage
+                    id="visTypeTimeseries.timeseries.optionsTab.legendPositionLabel"
+                    defaultMessage="Legend position"
                   />
                 </EuiFormLabel>
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiComboBox
                   isClearable={false}
-                  id={htmlId('tooltipMode')}
-                  options={tooltipModeOptions}
-                  selectedOptions={selectedTooltipMode ? [selectedTooltipMode] : []}
-                  onChange={handleSelectChange('tooltip_mode')}
+                  id={htmlId('legendPos')}
+                  options={legendPositionOptions}
+                  selectedOptions={selectedLegendPosOption ? [selectedLegendPosOption] : []}
+                  onChange={handleSelectChange('legend_position')}
                   singleSelection={{ asPlainText: true }}
                 />
               </EuiFlexItem>

diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -238,6 +238,8 @@ class TimeseriesVisualization extends Component {
             showGrid={Boolean(model.show_grid)}
             legend={Boolean(model.show_legend)}
             legendPosition={model.legend_position}
+            truncateLegend={Boolean(model.truncate_legend)}
+            maxLegendLines={model.max_lines_legend}
             tooltipMode={model.tooltip_mode}
             xAxisFormatter={this.xAxisFormatter(interval)}
             annotations={this.prepareAnnotations()}

diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -52,6 +52,8 @@ export const TimeSeries = ({
   showGrid,
   legend,
   legendPosition,
+  truncateLegend,
+  maxLegendLines,
   tooltipMode,
   series,
   yAxis,
@@ -151,6 +153,9 @@ export const TimeSeries = ({
             background: {
               color: backgroundColor,
             },
+            legend: {
+              labelOptions: { maxLines: truncateLegend ? maxLegendLines ?? 1 : 0 },
+            },
           },
         ]}
         baseTheme={baseTheme}
@@ -194,6 +199,7 @@ export const TimeSeries = ({
             lines,
             data,
             hideInLegend,
+            truncateLegend,
             xScaleType,
             yScaleType,
             groupId,
@@ -227,6 +233,7 @@ export const TimeSeries = ({
                 name={getValueOrEmpty(seriesName)}
                 data={data}
                 hideInLegend={hideInLegend}
+                truncateLegend={truncateLegend}
                 bars={bars}
                 color={finalColor}
                 stackAccessors={stackAccessors}
@@ -252,6 +259,7 @@ export const TimeSeries = ({
                 name={getValueOrEmpty(seriesName)}
                 data={data}
                 hideInLegend={hideInLegend}
+                truncateLegend={truncateLegend}
                 lines={lines}
                 color={finalColor}
                 stackAccessors={stackAccessors}
@@ -314,6 +322,7 @@ TimeSeries.propTypes = {
   showGrid: PropTypes.bool,
   legend: PropTypes.bool,
   legendPosition: PropTypes.string,
+  truncateLegend: PropTypes.bool,
   series: PropTypes.array,
   yAxis: PropTypes.array,
   onBrush: PropTypes.func,

diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts
@@ -60,6 +60,8 @@ export const metricsVisDefinition = {
       axis_formatter: 'number',
       axis_scale: 'normal',
       show_legend: 1,
+      truncate_legend: 1,
+      max_lines_legend: 1,
       show_grid: 1,
       tooltip_mode: TOOLTIP_MODES.SHOW_ALL,
       drop_last_bucket: 0,