mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
cleanup
This commit is contained in:
parent
6a8a60bcdf
commit
23c3e9d80a
@ -13,7 +13,7 @@ import { SortedTableData } from './sortable';
|
|||||||
interface Props extends PanelProps<Options> {}
|
interface Props extends PanelProps<Options> {}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
sortBy?: number; // but really is a number!
|
sortBy?: number;
|
||||||
sortDirection?: SortDirectionType;
|
sortDirection?: SortDirectionType;
|
||||||
data: SortedTableData;
|
data: SortedTableData;
|
||||||
}
|
}
|
||||||
@ -37,11 +37,8 @@ export class TablePanel extends Component<Props, State> {
|
|||||||
const { panelData, options } = this.props;
|
const { panelData, options } = this.props;
|
||||||
const { sortBy, sortDirection } = this.state;
|
const { sortBy, sortDirection } = this.state;
|
||||||
|
|
||||||
console.log('componentDidUpdate', this.props);
|
|
||||||
|
|
||||||
// Update the renderer if options change
|
// Update the renderer if options change
|
||||||
if (options !== prevProps.options) {
|
if (options !== prevProps.options) {
|
||||||
console.log('Options Changed, update renderer', options);
|
|
||||||
this.renderer = new TableRenderer(options.styles, this.state.data, this._rowGetter, this.props.replaceVariables);
|
this.renderer = new TableRenderer(options.styles, this.state.data, this._rowGetter, this.props.replaceVariables);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,7 +46,6 @@ export class TablePanel extends Component<Props, State> {
|
|||||||
if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) {
|
if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) {
|
||||||
const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC');
|
const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC');
|
||||||
this.setState({ data });
|
this.setState({ data });
|
||||||
console.log('Data Changed, update', data);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,21 +70,13 @@ export class TablePanel extends Component<Props, State> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
_headerRenderer = (header: TableHeaderProps): ReactNode => {
|
_headerRenderer = (header: TableHeaderProps): ReactNode => {
|
||||||
const dataKey = header.dataKey as any; // types say string, but it is number?
|
const dataKey = header.dataKey as any; // types say string, but it is number!
|
||||||
const { data, sortBy, sortDirection } = this.state;
|
const { data, sortBy, sortDirection } = this.state;
|
||||||
|
|
||||||
const col = data.getInfo()[dataKey];
|
const col = data.getInfo()[dataKey];
|
||||||
if (!col) {
|
|
||||||
return <div>??{dataKey}??</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isSorted = sortBy === dataKey;
|
|
||||||
|
|
||||||
console.log('header SORT', sortBy, isSorted);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{col.text} {isSorted && <SortIndicator sortDirection={sortDirection} />}
|
{col.text} {sortBy === dataKey && <SortIndicator sortDirection={sortDirection} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@ -101,12 +89,12 @@ export class TablePanel extends Component<Props, State> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { panelData, width, height, options } = this.props;
|
const { width, height, options } = this.props;
|
||||||
const { showHeader } = options;
|
const { showHeader } = options;
|
||||||
// const { sortBy, sortDirection } = this.state;
|
// const { sortBy, sortDirection } = this.state;
|
||||||
const { tableData } = panelData;
|
const { data } = this.state;
|
||||||
|
|
||||||
if (!tableData || tableData.rows.length < 1) {
|
if (!data) {
|
||||||
return <div>No Table Data...</div>;
|
return <div>No Table Data...</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -122,18 +110,21 @@ export class TablePanel extends Component<Props, State> {
|
|||||||
overscanRowCount={10}
|
overscanRowCount={10}
|
||||||
rowHeight={30}
|
rowHeight={30}
|
||||||
rowGetter={this._rowGetter}
|
rowGetter={this._rowGetter}
|
||||||
rowCount={tableData.rows.length}
|
rowCount={data.getCount()}
|
||||||
sort={this._sort}
|
sort={this._sort}
|
||||||
width={width}
|
width={width}
|
||||||
>
|
>
|
||||||
{tableData.columns.map((col, index) => {
|
{data.getInfo().map((col, index) => {
|
||||||
return (
|
return (
|
||||||
<Column
|
<Column
|
||||||
key={index}
|
key={index}
|
||||||
dataKey={index}
|
dataKey={index}
|
||||||
headerRenderer={this._headerRenderer}
|
headerRenderer={this._headerRenderer}
|
||||||
cellRenderer={this._cellRenderer}
|
cellRenderer={this._cellRenderer}
|
||||||
width={300}
|
width={150}
|
||||||
|
minWidth={50}
|
||||||
|
maxWidth={400}
|
||||||
|
flexGrow={1}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
Loading…
Reference in New Issue
Block a user