Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Value in legend #101353

Merged
merged 5 commits into from
Jun 7, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,18 @@ export interface LegendSettingsPopoverProps {
* Callback on nested switch status change
*/
onNestedLegendChange?: (event: EuiSwitchEvent) => void;
/**
* value in legend status
*/
valueInLegend?: boolean;
/**
* Callback on value in legend status change
*/
onValueInLegendChange?: (event: EuiSwitchEvent) => void;
/**
* If true, value in legend switch is rendered
*/
renderValueInLegendSwitch?: boolean;
}

const toggleButtonsIcons = [
Expand Down Expand Up @@ -86,6 +98,9 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
renderNestedLegendSwitch,
nestedLegend,
onNestedLegendChange = () => {},
valueInLegend,
onValueInLegendChange = () => {},
renderValueInLegendSwitch,
}) => {
return (
<ToolbarPopover
Expand Down Expand Up @@ -155,6 +170,26 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
/>
</EuiFormRow>
)}
{renderValueInLegendSwitch && (
<EuiFormRow
display="columnCompressedSwitch"
label={i18n.translate('xpack.lens.shared.valueInLegendLabel', {
defaultMessage: 'Show value',
})}
>
<EuiSwitch
compressed
label={i18n.translate('xpack.lens.shared.valueInLegendLabel', {
defaultMessage: 'Show value',
})}
data-test-subj="lens-legend-show-value"
showLabel={false}
disabled={mode === 'hide'}
checked={!!valueInLegend}
onChange={onValueInLegendChange}
/>
</EuiFormRow>
)}
</ToolbarPopover>
);
};

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 31 additions & 0 deletions x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,7 @@ const createArgsWithLayers = (layers: LayerArgs[] = [sampleLayer]): XYArgs => ({
position: Position.Top,
},
valueLabels: 'hide',
valuesInLegend: false,
axisTitlesVisibilitySettings: {
type: 'lens_xy_axisTitlesVisibilityConfig',
x: true,
Expand Down Expand Up @@ -839,6 +840,36 @@ describe('xy_expression', () => {
expect(component.find(Settings).prop('xDomain')).toEqual({ minInterval: 101 });
});

test('disabled legend extra by default', () => {
const { data, args } = sampleArgs();
const component = shallow(<XYChart {...defaultProps} data={data} args={args} />);
expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
});

test('ignores legend extra for ordinal chart', () => {
const { data, args } = sampleArgs();
const component = shallow(
<XYChart {...defaultProps} data={data} args={{ ...args, valuesInLegend: true }} />
);
expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
});

test('shows legend extra for histogram chart', () => {
const { args } = sampleArgs();
const component = shallow(
<XYChart
{...defaultProps}
data={dateHistogramData}
args={{
...args,
layers: [dateHistogramLayer],
valuesInLegend: true,
}}
/>
);
expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(true);
});

test('it renders bar', () => {
const { data, args } = sampleArgs();
const component = shallow(
Expand Down
10 changes: 9 additions & 1 deletion x-pack/plugins/lens/public/xy_visualization/expression.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,13 @@ export const xyChart: ExpressionFunctionDefinition<
defaultMessage: 'Hide endzone markers for partial data',
}),
},
valuesInLegend: {
types: ['boolean'],
default: false,
help: i18n.translate('xpack.lens.xyChart.valuesInLegend.help', {
defaultMessage: 'Show values in legend',
}),
},
},
fn(data: LensMultiTable, args: XYArgs) {
return {
Expand Down Expand Up @@ -365,6 +372,7 @@ export function XYChart({
hideEndzones,
yLeftExtent,
yRightExtent,
valuesInLegend,
} = args;
const chartTheme = chartsThemeService.useChartsTheme();
const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
Expand Down Expand Up @@ -602,7 +610,6 @@ export function XYChart({
: legend.isVisible
}
legendPosition={legend.position}
showLegendExtra={false}
theme={{
...chartTheme,
barSeriesStyle: {
Expand All @@ -622,6 +629,7 @@ export function XYChart({
xDomain={xDomain}
onBrushEnd={renderMode !== 'noInteractivity' ? brushHandler : undefined}
onElementClick={renderMode !== 'noInteractivity' ? clickHandler : undefined}
showLegendExtra={isHistogramViz && valuesInLegend}
/>

<Axis
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ export const buildExpression = (
],
valueLabels: [state?.valueLabels || 'hide'],
hideEndzones: [state?.hideEndzones || false],
valuesInLegend: [state?.valuesInLegend || false],
layers: validLayers.map((layer) => {
const columnToLabel = getColumnToLabelMap(layer, datasourceLayers[layer.layerId]);

Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/lens/public/xy_visualization/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,7 @@ export interface XYArgs {
curveType?: XYCurveType;
fillOpacity?: number;
hideEndzones?: boolean;
valuesInLegend?: boolean;
}

export type XYCurveType = 'LINEAR' | 'CURVE_MONOTONE_X';
Expand All @@ -488,6 +489,7 @@ export interface XYState {
curveType?: XYCurveType;
fillOpacity?: number;
hideEndzones?: boolean;
valuesInLegend?: boolean;
}

export type State = XYState;
Expand Down
17 changes: 17 additions & 0 deletions x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,15 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
});
};

const nonOrdinalXAxis = state?.layers.every(
(layer) =>
!layer.xAccessor ||
getScaleType(
props.frame.datasourceLayers[layer.layerId].getOperationForColumnId(layer.xAccessor),
ScaleType.Linear
) !== 'ordinal'
);

// only allow changing endzone visibility if it could show up theoretically (if it's a time viz)
const onChangeEndzoneVisiblity = state?.layers.every(
(layer) =>
Expand Down Expand Up @@ -323,6 +332,14 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
legend: { ...state.legend, position: id as Position },
});
}}
renderValueInLegendSwitch={nonOrdinalXAxis}
valueInLegend={state?.valuesInLegend}
onValueInLegendChange={() => {
setState({
...state,
valuesInLegend: !state.valuesInLegend,
});
}}
/>
</EuiFlexGroup>
</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,7 @@ function buildSuggestion({
yTitle: currentState?.yTitle,
yRightTitle: currentState?.yRightTitle,
hideEndzones: currentState?.hideEndzones,
valuesInLegend: currentState?.valuesInLegend,
yLeftExtent: currentState?.yLeftExtent,
yRightExtent: currentState?.yRightExtent,
axisTitlesVisibilitySettings: currentState?.axisTitlesVisibilitySettings || {
Expand Down