Fix legend sizing on area charts (#58083)

This commit is contained in:
Nick Partridge 2020-02-20 15:07:03 -06:00 committed by GitHub
parent 4cd809aa7d
commit 6b77c88e98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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}