+
{label}
);
diff --git a/packages/charts/src/components/legend/legend.tsx b/packages/charts/src/components/legend/legend.tsx
index f93fcecb71..0bb39812e9 100644
--- a/packages/charts/src/components/legend/legend.tsx
+++ b/packages/charts/src/components/legend/legend.tsx
@@ -103,6 +103,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
toggleDeselectSeriesAction: props.onToggleDeselectSeriesAction,
colorPicker: config.legendColorPicker,
action: config.legendAction,
+ labelOptions: legend.labelOptions,
};
const positionStyle = legendPositionStyle(config, size, chartDimensions, containerDimensions);
return (
diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx
index 201a983eed..5c5723a5ba 100644
--- a/packages/charts/src/components/legend/legend_item.tsx
+++ b/packages/charts/src/components/legend/legend_item.tsx
@@ -30,6 +30,7 @@ import {
} from '../../state/actions/legend';
import { Color, LayoutDirection } from '../../utils/common';
import { deepEqual } from '../../utils/fast_deep_equal';
+import { LegendLabelOptions } from '../../utils/themes/theme';
import { Color as ItemColor } from './color';
import { renderExtra } from './extra';
import { Label as ItemLabel } from './label';
@@ -45,6 +46,7 @@ export interface LegendItemProps {
positionConfig: LegendPositionConfig;
extraValues: Map
;
showExtra: boolean;
+ labelOptions: LegendLabelOptions;
colorPicker?: LegendColorPicker;
action?: LegendAction;
onClick?: LegendItemListener;
@@ -113,19 +115,19 @@ export class LegendListItem extends Component
/**
* Returns click function only if toggleable or click listern is provided
*/
- handleLabelClick = (legendItemId: SeriesIdentifier[]): MouseEventHandler | undefined => {
+ onLabelToggle = (legendItemId: SeriesIdentifier[]): ((negate: boolean) => void) | undefined => {
const { item, onClick, toggleDeselectSeriesAction, totalItems } = this.props;
if (totalItems <= 1 || (!item.isToggleable && !onClick)) {
return;
}
- return ({ shiftKey }) => {
+ return (negate) => {
if (onClick) {
onClick(legendItemId);
}
if (item.isToggleable) {
- toggleDeselectSeriesAction(legendItemId, shiftKey);
+ toggleDeselectSeriesAction(legendItemId, negate);
}
};
};
@@ -163,7 +165,16 @@ export class LegendListItem extends Component
}
render() {
- const { extraValues, item, showExtra, colorPicker, totalItems, action: Action, positionConfig } = this.props;
+ const {
+ extraValues,
+ item,
+ showExtra,
+ colorPicker,
+ totalItems,
+ action: Action,
+ positionConfig,
+ labelOptions,
+ } = this.props;
const { color, isSeriesHidden, isItemHidden, seriesIdentifiers, label, pointStyle } = item;
if (isItemHidden) return null;
@@ -189,19 +200,22 @@ export class LegendListItem extends Component
data-ech-series-name={label}
>
-
+
+
+
1 && item.isToggleable}
- onClick={this.handleLabelClick(seriesIdentifiers)}
+ onToggle={this.onLabelToggle(seriesIdentifiers)}
isSeriesHidden={isSeriesHidden}
/>
{extra && !isSeriesHidden && renderExtra(extra)}
diff --git a/packages/charts/src/components/tooltip/_tooltip.scss b/packages/charts/src/components/tooltip/_tooltip.scss
index 9e53efaa00..a8890837d4 100644
--- a/packages/charts/src/components/tooltip/_tooltip.scss
+++ b/packages/charts/src/components/tooltip/_tooltip.scss
@@ -46,8 +46,7 @@
}
&__label {
- overflow-wrap: break-word;
- word-wrap: break-word;
+ hyphens: auto;
min-width: 1px;
flex: 1 1 auto;
}
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index 3e45e79f86..f09f1b3b93 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -170,6 +170,9 @@ export const DARK_THEME: Theme = {
horizontalHeight: 64,
spacingBuffer: 10,
margin: 0,
+ labelOptions: {
+ maxLines: 1,
+ },
},
crosshair: {
band: {
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index 4221264954..54d25a179b 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -170,6 +170,9 @@ export const LIGHT_THEME: Theme = {
horizontalHeight: 64,
spacingBuffer: 10,
margin: 0,
+ labelOptions: {
+ maxLines: 1,
+ },
},
crosshair: {
band: {
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index b6cff2f933..b78753a4fd 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -199,6 +199,19 @@ export interface BackgroundStyle {
*/
color: string;
}
+
+/** @public */
+export interface LegendLabelOptions {
+ /**
+ * Sets maxlines allowable before truncating
+ *
+ * Setting value to `0` will _never_ truncate the text
+ *
+ * @defaultValue 1
+ */
+ maxLines: number;
+}
+
/** @public */
export interface LegendStyle {
/**
@@ -225,6 +238,10 @@ export interface LegendStyle {
* TODO: make SimplePadding when after axis changes are added
*/
margin: number;
+ /**
+ * Options to control legend labels
+ */
+ labelOptions: LegendLabelOptions;
}
/** @public */
export interface Theme {
diff --git a/storybook/stories/legend/10_sunburst.tsx b/storybook/stories/legend/10_sunburst.tsx
index f6b2d2c189..deeb2eae35 100644
--- a/storybook/stories/legend/10_sunburst.tsx
+++ b/storybook/stories/legend/10_sunburst.tsx
@@ -39,7 +39,8 @@ export const Example = () => {
max: 3,
step: 1,
});
- const legendStrategy = select('legendStrategy', LegendStrategy, LegendStrategy.Key);
+ const legendStrategy = select('legendStrategy', LegendStrategy, LegendStrategy.Key as LegendStrategy);
+ const maxLines = number('max legend label lines', 1, { min: 0, step: 1 });
return (
@@ -50,6 +51,7 @@ export const Example = () => {
legendStrategy={legendStrategy}
legendMaxDepth={legendMaxDepth}
baseTheme={useBaseTheme()}
+ theme={{ legend: { labelOptions: { maxLines } } }}
/>
);
+const getLabelOptionKnobs = (): LegendLabelOptions => {
+ const group = 'Label options';
+
+ return {
+ maxLines: number('max label lines', 1, { min: 0, step: 1 }, group),
+ };
+};
+
export const Example = () => {
- const hideActions = boolean('Hide legend action', false);
- const showLegendExtra = !boolean('Hide legend extra', false);
- const showColorPicker = !boolean('Hide color picker', true);
- const legendPosition = getPositionKnob('Legend position');
- const euiPopoverPosition = getEuiPopoverPositionKnob();
+ const hideActions = boolean('Hide legend action', false, 'Legend');
+ const showLegendExtra = !boolean('Hide legend extra', false, 'Legend');
+ const showColorPicker = !boolean('Hide color picker', true, 'Legend');
+ const legendPosition = getPositionKnob('Legend position', undefined, 'Legend');
+ const euiPopoverPosition = getEuiPopoverPositionKnob(undefined, undefined, 'Legend');
+ const labelOptions = getLabelOptionKnobs();
return (
(
margin: number('legend margins', 20, {
min: 0,
}),
+ labelOptions: {
+ maxLines: number('max legend label lines', 2, { min: 0, step: 1 }),
+ },
},
}}
baseTheme={useBaseTheme()}
diff --git a/storybook/stories/legend/13_inside_chart.tsx b/storybook/stories/legend/13_inside_chart.tsx
index f4ad558cf9..17702db472 100644
--- a/storybook/stories/legend/13_inside_chart.tsx
+++ b/storybook/stories/legend/13_inside_chart.tsx
@@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
-import { select, boolean, number } from '@storybook/addon-knobs';
+import { select, boolean, number, text } from '@storybook/addon-knobs';
import React from 'react';
import {
@@ -76,6 +76,7 @@ export const Example = () => {
LayoutDirection.Vertical,
'Legend',
);
+ const maxLines = number('max label lines', 1, { min: 0, step: 1 }, 'Legend');
return (
@@ -89,6 +90,9 @@ export const Example = () => {
floating,
floatingColumns,
}}
+ theme={{
+ legend: { labelOptions: { maxLines } },
+ }}
baseTheme={useBaseTheme()}
/>
@@ -110,7 +114,7 @@ export const Example = () => {
if (i >= seriesWithLongName * 10 && i < seriesWithLongName * 10 + 10) {
return {
...d,
- g: 'long name',
+ g: text('long label', 'long name', 'Legend'),
};
}
return d;
diff --git a/storybook/stories/legend/8_spacing_buffer.tsx b/storybook/stories/legend/8_spacing_buffer.tsx
index d1b85715f9..6e0069e22c 100644
--- a/storybook/stories/legend/8_spacing_buffer.tsx
+++ b/storybook/stories/legend/8_spacing_buffer.tsx
@@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
-import { number } from '@storybook/addon-knobs';
+import { boolean, number } from '@storybook/addon-knobs';
import React from 'react';
import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } from '@elastic/charts';
@@ -17,8 +17,12 @@ export const Example = () => {
const theme: PartialTheme = {
legend: {
spacingBuffer: number('legend buffer value', 80),
+ labelOptions: {
+ maxLines: number('max legend label lines', 0, { min: 0, step: 1 }),
+ },
},
};
+ const longLabels = boolean('use long labels', false);
return (
@@ -27,7 +31,7 @@ export const Example = () => {
Number(d).toFixed(2)} />
{
]}
/>
+export const getPositionKnob = (name = 'chartRotation', defaultValue: Position = Position.Right, group?: string) =>
select(
name,
{
@@ -111,6 +111,7 @@ export const getPositionKnob = (name = 'chartRotation', defaultValue: Position =
Bottom: Position.Bottom,
},
defaultValue,
+ group,
);
export const getPlacementKnob = (name = 'placement', defaultValue?: Placement, groupId?: string) => {
@@ -158,6 +159,7 @@ export const getStickToKnob = (name = 'stickTo', defaultValue = TooltipStickTo.M
export const getEuiPopoverPositionKnob = (
name = 'Popover position',
defaultValue: PopoverAnchorPosition = 'leftCenter',
+ group?: string,
) =>
select(
name,
@@ -176,6 +178,7 @@ export const getEuiPopoverPositionKnob = (
rightDown: 'rightDown',
},
defaultValue,
+ group,
);
export function arrayKnobs(name: string, values: (string | number)[]): (string | number)[] {