mirror of https://github.com/apache/superset.git
refactor: Remove usages of reactable from TimeTable (#11046)
* Use ListView instead of reactable * Refactor TimeTable * Spark column width fix
This commit is contained in:
parent
a879622e07
commit
f01b8a30f7
|
@ -17,6 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { css } from '@emotion/core';
|
||||
import React, { useState } from 'react';
|
||||
import { Alert } from 'react-bootstrap';
|
||||
import { Empty } from 'src/common/components';
|
||||
|
@ -37,7 +38,11 @@ import {
|
|||
} from './types';
|
||||
import { ListViewError, useListViewState } from './utils';
|
||||
|
||||
const ListViewStyles = styled.div`
|
||||
interface ListViewStylesProps {
|
||||
fullHeight: boolean;
|
||||
}
|
||||
|
||||
const ListViewStyles = styled.div<ListViewStylesProps>`
|
||||
text-align: center;
|
||||
|
||||
.superset-list-view {
|
||||
|
@ -48,8 +53,12 @@ const ListViewStyles = styled.div`
|
|||
padding-bottom: 48px;
|
||||
|
||||
.body {
|
||||
overflow: scroll;
|
||||
max-height: 64vh;
|
||||
${({ fullHeight }) =>
|
||||
!fullHeight &&
|
||||
css`
|
||||
overflow: scroll;
|
||||
max-height: 64vh;
|
||||
`};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -202,6 +211,9 @@ export interface ListViewProps<T extends object = any> {
|
|||
renderCard?: (row: T & { loading: boolean }) => React.ReactNode;
|
||||
cardSortSelectOptions?: Array<CardSortSelectOption>;
|
||||
defaultViewMode?: ViewModeType;
|
||||
sticky?: boolean;
|
||||
fullHeight?: boolean;
|
||||
manualSortBy?: boolean;
|
||||
}
|
||||
|
||||
function ListView<T extends object = any>({
|
||||
|
@ -221,6 +233,9 @@ function ListView<T extends object = any>({
|
|||
renderCard,
|
||||
cardSortSelectOptions,
|
||||
defaultViewMode = 'card',
|
||||
sticky = true,
|
||||
fullHeight = false,
|
||||
manualSortBy = true,
|
||||
}: ListViewProps<T>) {
|
||||
const {
|
||||
getTableProps,
|
||||
|
@ -244,8 +259,10 @@ function ListView<T extends object = any>({
|
|||
initialPageSize,
|
||||
initialSort,
|
||||
initialFilters: filters,
|
||||
manualSortBy,
|
||||
});
|
||||
const filterable = Boolean(filters.length);
|
||||
const withPagination = Boolean(count);
|
||||
if (filterable) {
|
||||
const columnAccessors = columns.reduce(
|
||||
(acc, col) => ({ ...acc, [col.accessor || col.id]: true }),
|
||||
|
@ -266,7 +283,7 @@ function ListView<T extends object = any>({
|
|||
);
|
||||
|
||||
return (
|
||||
<ListViewStyles>
|
||||
<ListViewStyles fullHeight={fullHeight}>
|
||||
<div className={`superset-list-view ${className}`}>
|
||||
<div className="header">
|
||||
{cardViewEnabled && (
|
||||
|
@ -350,6 +367,7 @@ function ListView<T extends object = any>({
|
|||
rows={rows}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
sticky={sticky}
|
||||
/>
|
||||
)}
|
||||
{!loading && rows.length === 0 && (
|
||||
|
@ -360,23 +378,25 @@ function ListView<T extends object = any>({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pagination-container">
|
||||
<Pagination
|
||||
totalPages={pageCount || 0}
|
||||
currentPage={pageCount ? pageIndex + 1 : 0}
|
||||
onChange={(p: number) => gotoPage(p - 1)}
|
||||
hideFirstAndLastPageLinks
|
||||
/>
|
||||
<div className="row-count-container">
|
||||
{!loading &&
|
||||
t(
|
||||
'%s-%s of %s',
|
||||
pageSize * pageIndex + (rows.length && 1),
|
||||
pageSize * pageIndex + rows.length,
|
||||
count,
|
||||
)}
|
||||
{withPagination && (
|
||||
<div className="pagination-container">
|
||||
<Pagination
|
||||
totalPages={pageCount || 0}
|
||||
currentPage={pageCount ? pageIndex + 1 : 0}
|
||||
onChange={(p: number) => gotoPage(p - 1)}
|
||||
hideFirstAndLastPageLinks
|
||||
/>
|
||||
<div className="row-count-container">
|
||||
{!loading &&
|
||||
t(
|
||||
'%s-%s of %s',
|
||||
pageSize * pageIndex + (rows.length && 1),
|
||||
pageSize * pageIndex + rows.length,
|
||||
count,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ListViewStyles>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -30,14 +30,19 @@ interface TableCollectionProps {
|
|||
rows: TableInstance['rows'];
|
||||
columns: TableInstance['column'][];
|
||||
loading: boolean;
|
||||
sticky: boolean;
|
||||
}
|
||||
|
||||
const Table = styled.table`
|
||||
interface TableProps {
|
||||
sticky: boolean;
|
||||
}
|
||||
|
||||
const Table = styled.table<TableProps>`
|
||||
border-collapse: separate;
|
||||
|
||||
th {
|
||||
background: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
position: sticky;
|
||||
position: ${({ sticky }) => sticky && 'sticky'};
|
||||
top: 0;
|
||||
|
||||
&:first-of-type {
|
||||
|
@ -199,9 +204,10 @@ export default function TableCollection({
|
|||
columns,
|
||||
rows,
|
||||
loading,
|
||||
sticky,
|
||||
}: TableCollectionProps) {
|
||||
return (
|
||||
<Table {...getTableProps()} className="table table-hover">
|
||||
<Table {...getTableProps()} sticky={sticky} className="table table-hover">
|
||||
<thead>
|
||||
{headerGroups.map(headerGroup => (
|
||||
<tr {...headerGroup.getHeaderGroupProps()}>
|
||||
|
|
|
@ -110,6 +110,7 @@ interface UseListViewConfig {
|
|||
Header: (conf: any) => React.ReactNode;
|
||||
Cell: (conf: any) => React.ReactNode;
|
||||
};
|
||||
manualSortBy: boolean;
|
||||
}
|
||||
|
||||
export function useListViewState({
|
||||
|
@ -122,6 +123,7 @@ export function useListViewState({
|
|||
initialSort = [],
|
||||
bulkSelectMode = false,
|
||||
bulkSelectColumnConfig,
|
||||
manualSortBy,
|
||||
}: UseListViewConfig) {
|
||||
const [query, setQuery] = useQueryParams({
|
||||
filters: JsonParam,
|
||||
|
@ -177,9 +179,9 @@ export function useListViewState({
|
|||
initialState,
|
||||
manualFilters: true,
|
||||
manualPagination: true,
|
||||
manualSortBy: true,
|
||||
autoResetFilters: false,
|
||||
pageCount: Math.ceil(count / initialPageSize),
|
||||
manualSortBy,
|
||||
},
|
||||
useFilters,
|
||||
useSortBy,
|
||||
|
|
|
@ -20,14 +20,14 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import Mustache from 'mustache';
|
||||
import { scaleLinear } from 'd3-scale';
|
||||
import { Table, Thead, Th, Tr, Td } from 'reactable-arc';
|
||||
import { formatNumber, formatTime } from '@superset-ui/core';
|
||||
import {
|
||||
InfoTooltipWithTrigger,
|
||||
MetricOption,
|
||||
} from '@superset-ui/chart-controls';
|
||||
import moment from 'moment';
|
||||
|
||||
import ListView from 'src/components/ListView';
|
||||
import { memoize } from 'lodash-es';
|
||||
import FormattedNumber from './FormattedNumber';
|
||||
import SparklineCell from './SparklineCell';
|
||||
import './TimeTable.less';
|
||||
|
@ -90,6 +90,68 @@ const defaultProps = {
|
|||
};
|
||||
|
||||
class TimeTable extends React.PureComponent {
|
||||
memoizedColumns = memoize(() => [
|
||||
{ accessor: 'metric', Header: 'Metric' },
|
||||
...this.props.columnConfigs.map((columnConfig, i) => ({
|
||||
accessor: columnConfig.key,
|
||||
cellProps: columnConfig.colType === 'spark' && { style: { width: '1%' } },
|
||||
Header: () => (
|
||||
<>
|
||||
{columnConfig.label}{' '}
|
||||
{columnConfig.tooltip && (
|
||||
<InfoTooltipWithTrigger
|
||||
tooltip={columnConfig.tooltip}
|
||||
label={`tt-col-${i}`}
|
||||
placement="top"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
sortType: (rowA, rowB, columnId) => {
|
||||
const rowAVal = rowA.values[columnId].props['data-value'];
|
||||
const rowBVal = rowB.values[columnId].props['data-value'];
|
||||
return rowAVal - rowBVal;
|
||||
},
|
||||
})),
|
||||
]);
|
||||
|
||||
memoizedRows = memoize(() => {
|
||||
const entries = Object.keys(this.props.data)
|
||||
.sort()
|
||||
.map(time => ({ ...this.props.data[time], time }));
|
||||
const reversedEntries = entries.concat().reverse();
|
||||
|
||||
return this.props.rows.map(row => {
|
||||
const valueField = row.label || row.metric_name;
|
||||
const cellValues = this.props.columnConfigs.reduce(
|
||||
(acc, columnConfig) => {
|
||||
if (columnConfig.colType === 'spark') {
|
||||
return {
|
||||
...acc,
|
||||
[columnConfig.key]: this.renderSparklineCell(
|
||||
valueField,
|
||||
columnConfig,
|
||||
entries,
|
||||
),
|
||||
};
|
||||
}
|
||||
return {
|
||||
...acc,
|
||||
[columnConfig.key]: this.renderValueCell(
|
||||
valueField,
|
||||
columnConfig,
|
||||
reversedEntries,
|
||||
),
|
||||
};
|
||||
},
|
||||
{},
|
||||
);
|
||||
return { ...row, ...cellValues, metric: this.renderLeftCell(row) };
|
||||
});
|
||||
});
|
||||
|
||||
initialSort = [{ id: 'metric', desc: false }];
|
||||
|
||||
renderLeftCell(row) {
|
||||
const { rowType, url } = this.props;
|
||||
const context = { metric: row };
|
||||
|
@ -107,10 +169,9 @@ class TimeTable extends React.PureComponent {
|
|||
return column.label;
|
||||
}
|
||||
|
||||
const metric = row;
|
||||
return (
|
||||
<MetricOption
|
||||
metric={metric}
|
||||
metric={row}
|
||||
url={fullUrl}
|
||||
showFormula={false}
|
||||
openInNewWindow
|
||||
|
@ -136,32 +197,27 @@ class TimeTable extends React.PureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Td
|
||||
column={column.key}
|
||||
key={column.key}
|
||||
value={sparkData[sparkData.length - 1]}
|
||||
>
|
||||
<SparklineCell
|
||||
width={parseInt(column.width, 10) || 300}
|
||||
height={parseInt(column.height, 10) || 50}
|
||||
data={sparkData}
|
||||
ariaLabel={`spark-${valueField}`}
|
||||
numberFormat={column.d3format}
|
||||
yAxisBounds={column.yAxisBounds}
|
||||
showYAxis={column.showYAxis}
|
||||
renderTooltip={({ index }) => (
|
||||
<SparklineCell
|
||||
width={parseInt(column.width, 10) || 300}
|
||||
height={parseInt(column.height, 10) || 50}
|
||||
data={sparkData}
|
||||
data-value={sparkData[sparkData.length - 1]}
|
||||
ariaLabel={`spark-${valueField}`}
|
||||
numberFormat={column.d3format}
|
||||
yAxisBounds={column.yAxisBounds}
|
||||
showYAxis={column.showYAxis}
|
||||
renderTooltip={({ index }) => (
|
||||
<div>
|
||||
<strong>{formatNumber(column.d3format, sparkData[index])}</strong>
|
||||
<div>
|
||||
<strong>{formatNumber(column.d3format, sparkData[index])}</strong>
|
||||
<div>
|
||||
{formatTime(
|
||||
column.dateFormat,
|
||||
moment.utc(entries[index].time).toDate(),
|
||||
)}
|
||||
</div>
|
||||
{formatTime(
|
||||
column.dateFormat,
|
||||
moment.utc(entries[index].time).toDate(),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Td>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -204,10 +260,9 @@ class TimeTable extends React.PureComponent {
|
|||
const color = colorFromBounds(v, column.bounds);
|
||||
|
||||
return (
|
||||
<Td
|
||||
column={column.key}
|
||||
<span
|
||||
key={column.key}
|
||||
value={v}
|
||||
data-value={v}
|
||||
style={
|
||||
color && {
|
||||
boxShadow: `inset 0px -2.5px 0px 0px ${color}`,
|
||||
|
@ -216,87 +271,34 @@ class TimeTable extends React.PureComponent {
|
|||
}
|
||||
>
|
||||
{errorMsg ? (
|
||||
<div>{errorMsg}</div>
|
||||
{ errorMsg }
|
||||
) : (
|
||||
<div style={{ color }}>
|
||||
<span style={{ color }}>
|
||||
<FormattedNumber num={v} format={column.d3format} />
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
);
|
||||
}
|
||||
|
||||
renderRow(row, entries, reversedEntries) {
|
||||
const { columnConfigs } = this.props;
|
||||
const valueField = row.label || row.metric_name;
|
||||
const leftCell = this.renderLeftCell(row);
|
||||
|
||||
return (
|
||||
<Tr key={leftCell}>
|
||||
<Td column="metric" data={leftCell}>
|
||||
{leftCell}
|
||||
</Td>
|
||||
{columnConfigs.map(c =>
|
||||
c.colType === 'spark'
|
||||
? this.renderSparklineCell(valueField, c, entries)
|
||||
: this.renderValueCell(valueField, c, reversedEntries),
|
||||
)}
|
||||
</Tr>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
height,
|
||||
data,
|
||||
columnConfigs,
|
||||
rowType,
|
||||
rows,
|
||||
} = this.props;
|
||||
|
||||
const entries = Object.keys(data)
|
||||
.sort()
|
||||
.map(time => ({ ...data[time], time }));
|
||||
const reversedEntries = entries.concat().reverse();
|
||||
|
||||
const defaultSort =
|
||||
rowType === 'column' && columnConfigs.length
|
||||
? {
|
||||
column: columnConfigs[0].key,
|
||||
direction: 'desc',
|
||||
}
|
||||
: false;
|
||||
const { className, height } = this.props;
|
||||
|
||||
return (
|
||||
<div className={`time-table ${className}`} style={{ height }}>
|
||||
<Table
|
||||
className="table table-no-hover"
|
||||
defaultSort={defaultSort}
|
||||
sortBy={defaultSort}
|
||||
sortable={columnConfigs.map(c => c.key)}
|
||||
>
|
||||
<Thead>
|
||||
<Th column="metric">Metric</Th>
|
||||
{columnConfigs.map((c, i) => (
|
||||
<Th
|
||||
key={c.key}
|
||||
column={c.key}
|
||||
width={c.colType === 'spark' ? '1%' : null}
|
||||
>
|
||||
{c.label}{' '}
|
||||
{c.tooltip && (
|
||||
<InfoTooltipWithTrigger
|
||||
tooltip={c.tooltip}
|
||||
label={`tt-col-${i}`}
|
||||
placement="top"
|
||||
/>
|
||||
)}
|
||||
</Th>
|
||||
))}
|
||||
</Thead>
|
||||
{rows.map(row => this.renderRow(row, entries, reversedEntries))}
|
||||
</Table>
|
||||
<ListView
|
||||
columns={this.memoizedColumns()}
|
||||
data={this.memoizedRows()}
|
||||
count={0}
|
||||
// we don't use pagination
|
||||
pageSize={0}
|
||||
initialSort={this.initialSort}
|
||||
fetchData={() => {}}
|
||||
loading={false}
|
||||
sticky={false}
|
||||
fullHeight
|
||||
manualSortBy={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue