innov
/
nightingale1
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

fix: graph legend is not available

This commit is contained in:
jsers 2020-06-17 11:10:19 +08:00
parent fc023fd833
commit 7003e3a03b
3 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/Graph/Graph/Legend.tsx
View File

@ -3,7 +3,7 @@ import { Table, Input, Button, Modal } from 'antd';
import { ColumnProps, TableRowSelection } from 'antd/es/table'; import { ColumnProps, TableRowSelection } from 'antd/es/table';
import Color from 'color'; import Color from 'color';
import _ from 'lodash'; import _ from 'lodash';
import { injectIntl } from 'react-intl'; import { injectIntl, WrappedComponentProps } from 'react-intl';
import clipboard from '@common/clipboard'; import clipboard from '@common/clipboard';
import ContextMenu from '@cpts/ContextMenu'; import ContextMenu from '@cpts/ContextMenu';
import { SerieInterface, PointInterface } from '../interface'; import { SerieInterface, PointInterface } from '../interface';
@ -13,7 +13,8 @@ type SelectedKeys = 'normal' | string[];
interface Props { interface Props {
style: any, style: any,
series: SerieInterface[], series: SerieInterface[],
onSelectedChange: (selectedKeys: string | string[], highlightedKeysClone: string[]) => void, comparisonOptions: any[],
onSelectedChange: (selectedKeys: string[], highlightedKeysClone: string[]) => void,
} }
interface State { interface State {
@ -36,7 +37,7 @@ interface LegendDataItem extends SerieInterface {
last: number | null, last: number | null,
} }
class Legend extends Component<Props, State> { class Legend extends Component<Props & WrappedComponentProps, State> {
static defaultProps = { static defaultProps = {
style: {}, style: {},
series: [], series: [],
@ -111,7 +112,7 @@ class Legend extends Component<Props, State> {
} }
this.setState({ highlightedKeys: highlightedKeysClone }, () => { this.setState({ highlightedKeys: highlightedKeysClone }, () => {
this.props.onSelectedChange(selectedKeys, highlightedKeysClone); this.props.onSelectedChange(selectedKeys as string[], highlightedKeysClone);
}); });
} }
@ -129,7 +130,7 @@ class Legend extends Component<Props, State> {
const { comparisonOptions, onSelectedChange } = this.props; const { comparisonOptions, onSelectedChange } = this.props;
const { searchText, selectedKeys, highlightedKeys } = this.state; const { searchText, selectedKeys, highlightedKeys } = this.state;
const counterSelectedKeys = highlightedKeys; const counterSelectedKeys = highlightedKeys;
const data = this.filterData(); const data = this.filterData() as any;
const firstData = data[0]; const firstData = data[0];
const columns: ColumnProps<LegendDataItem>[] = [ const columns: ColumnProps<LegendDataItem>[] = [
{ {
@ -216,9 +217,9 @@ class Legend extends Component<Props, State> {
const newRowSelection: TableRowSelection<LegendDataItem> = { const newRowSelection: TableRowSelection<LegendDataItem> = {
selectedRowKeys: selectedKeys === 'normal' ? _.map(data, o => o.id) : selectedKeys, selectedRowKeys: selectedKeys === 'normal' ? _.map(data, o => o.id) : selectedKeys,
onChange: (selectedRowKeys: string[]) => { onChange: (selectedRowKeys: (string | number)[]) => {
this.setState({ selectedKeys: selectedRowKeys }, () => { this.setState({ selectedKeys: selectedRowKeys as string[] }, () => {
onSelectedChange(selectedRowKeys, highlightedKeys); onSelectedChange(selectedRowKeys as string[], highlightedKeys);
}); });
}, },
}; };
@ -238,11 +239,11 @@ class Legend extends Component<Props, State> {
margin: '0 5px 5px 5px', margin: '0 5px 5px 5px',
}}> }}>
<Table <Table
rowKey={record => `${record.id}-${record.comparison}`} rowKey={record => record.id}
size="middle" size="middle"
rowSelection={newRowSelection} rowSelection={newRowSelection}
columns={columns} columns={columns}
dataSource={data} dataSource={data as any}
pagination={false} pagination={false}
scroll={{ y: 220 }} scroll={{ y: 220 }}
/> />

8
web/src/components/Graph/Graph/index.tsx
View File

@ -305,9 +305,9 @@ export default class Graph extends Component<Props, State> {
} }
handleLegendRowSelectedChange = (selectedKeys: string[], highlightedKeys: string[]) => { handleLegendRowSelectedChange = (selectedKeys: string[], highlightedKeys: string[]) => {
const { series } = this.state; const series = this.getZoomedSeries()
const newSeries = _.map(series, (serie, i) => { this.series = _.map(series, (serie, i) => {
const oldColor = _.get(serie, 'oldColor', serie.color); const oldColor = _.get(serie, 'oldColor', serie.color);
return { return {
...serie, ...serie,
@ -318,9 +318,7 @@ export default class Graph extends Component<Props, State> {
}; };
}); });
this.setState({ series: newSeries }, () => { this.updateHighcharts();
this.updateHighcharts();
});
} }
render() { render() {

7
web/src/components/Graph/util/normalizeSeries.tsx
View File

@ -16,11 +16,12 @@ export default function normalizeSeries(data: any[], graphConfig: GraphDataInter
counter = `,${o.counter.substring(o.counter.indexOf('/') + 1)}`; counter = `,${o.counter.substring(o.counter.indexOf('/') + 1)}`;
} }
const id = `${endpoint}${counter}`; const id = `${endpoint}${counter}-${comparison}`;
const name = `${endpoint}${counter}`;
const serie = { const serie = {
id, id,
name: id, name: name,
tags: id, tags: name,
data: o.values, data: o.values,
lineWidth: 2, lineWidth: 2,
color, color,