mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Fix legend sizing on area charts (#58083)
This commit is contained in:
parent
4cd809aa7d
commit
6b77c88e98
1 changed files with 36 additions and 31 deletions
|
@ -53,6 +53,7 @@ export interface VisLegendState {
|
|||
open: boolean;
|
||||
labels: any[];
|
||||
tableAggs: any[];
|
||||
filterableLabels: Set<string>;
|
||||
selectedLabel: string | null;
|
||||
}
|
||||
|
||||
|
@ -68,6 +69,7 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
|
|||
open,
|
||||
labels: [],
|
||||
tableAggs: [],
|
||||
filterableLabels: new Set(),
|
||||
selectedLabel: null,
|
||||
};
|
||||
}
|
||||
|
@ -133,40 +135,43 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
|
|||
}));
|
||||
};
|
||||
|
||||
// Most of these functions were moved directly from the old Legend class. Not a fan of this.
|
||||
setLabels = (data: any, type: string): Promise<void> =>
|
||||
setFilterableLabels = (items: LegendItem[]): Promise<void> =>
|
||||
new Promise(async resolve => {
|
||||
let labels = [];
|
||||
if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) {
|
||||
const legendLabels = this.props.vislibVis.getLegendLabels();
|
||||
if (legendLabels) {
|
||||
labels = map(legendLabels, label => {
|
||||
return { label };
|
||||
});
|
||||
const filterableLabels = new Set<string>();
|
||||
items.forEach(async item => {
|
||||
const canFilter = await this.canFilter(item);
|
||||
if (canFilter) {
|
||||
filterableLabels.add(item.label);
|
||||
}
|
||||
} else {
|
||||
if (!data) return [];
|
||||
data = data.columns || data.rows || [data];
|
||||
});
|
||||
|
||||
labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data);
|
||||
}
|
||||
|
||||
const labelsConfig = await Promise.all(
|
||||
labels.map(async label => ({
|
||||
...label,
|
||||
canFilter: await this.canFilter(label),
|
||||
}))
|
||||
);
|
||||
|
||||
this.setState(
|
||||
{
|
||||
labels: labelsConfig,
|
||||
},
|
||||
resolve
|
||||
);
|
||||
this.setState({ filterableLabels }, resolve);
|
||||
});
|
||||
|
||||
refresh = async () => {
|
||||
setLabels = (data: any, type: string) => {
|
||||
let labels = [];
|
||||
if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) {
|
||||
const legendLabels = this.props.vislibVis.getLegendLabels();
|
||||
if (legendLabels) {
|
||||
labels = map(legendLabels, label => {
|
||||
return { label };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (!data) return [];
|
||||
data = data.columns || data.rows || [data];
|
||||
|
||||
labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data);
|
||||
}
|
||||
|
||||
this.setFilterableLabels(labels);
|
||||
|
||||
this.setState({
|
||||
labels,
|
||||
});
|
||||
};
|
||||
|
||||
refresh = () => {
|
||||
const vislibVis = this.props.vislibVis;
|
||||
if (!vislibVis || !vislibVis.visConfig) {
|
||||
this.setState({
|
||||
|
@ -193,7 +198,7 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
|
|||
}
|
||||
|
||||
this.setState({ tableAggs: getTableAggs(this.props.vis) });
|
||||
await this.setLabels(this.props.visData, vislibVis.visConfigArgs.type);
|
||||
this.setLabels(this.props.visData, vislibVis.visConfigArgs.type);
|
||||
};
|
||||
|
||||
highlight = (event: BaseSyntheticEvent) => {
|
||||
|
@ -241,7 +246,7 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
|
|||
key={item.label}
|
||||
anchorPosition={anchorPosition}
|
||||
selected={this.state.selectedLabel === item.label}
|
||||
canFilter={item.canFilter}
|
||||
canFilter={this.state.filterableLabels.has(item.label)}
|
||||
onFilter={this.filter}
|
||||
onSelect={this.toggleDetails}
|
||||
legendId={this.legendId}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue