Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Table Visualization] Replace table visualization with React and DataGrid #2863

Merged
merged 5 commits into from
Dec 28, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add some data-test-subj and fix PR comments
Signed-off-by: Anan Zhuang <ananzh@amazon.com>
ananzh committed Dec 16, 2022
commit 73a636a97413218b2f1a00a784b26dc59210fc81
Original file line number Diff line number Diff line change
@@ -50,8 +50,7 @@ export const TableVisComponent = ({
return (({ rowIndex, columnId }) => {
const rawContent = sortedRows[rowIndex][columnId];
const colIndex = columns.findIndex((col) => col.id === columnId);
const column = columns[colIndex];
const htmlContent = column.formatter.convert(rawContent, 'html');
const htmlContent = columns[colIndex].formatter.convert(rawContent, 'html');
const formattedContent = (
/*
* Justification for dangerouslySetInnerHTML:
@@ -119,8 +118,7 @@ export const TableVisComponent = ({

const footerCellValue = visConfig.showTotal
? ({ columnId }: { columnId: any }) => {
const colIndex = columns.findIndex((col) => col.id === columnId);
return columns[colIndex]?.formattedTotal || null;
return columns.find((col) => col.id === columnId)?.formattedTotal || null;
}
: undefined;

Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ export const getDataGridColumns = (
cols: FormattedColumn[],
table: Table,
event: IInterpreterRenderHandlers['event'],
columnsWidth: ColumnWidth[]
columnWidths: ColumnWidth[]
) => {
const filterBucket = (rowIndex: number, columnIndex: number, negate: boolean) => {
const foramttedColumnId = cols[columnIndex].id;
@@ -117,7 +117,7 @@ export const getDataGridColumns = (
]
: undefined;

const initialWidth = columnsWidth.find((c) => c.colIndex === colIndex);
const initialWidth = columnWidths.find((c) => c.colIndex === colIndex);

const dataGridColumn: EuiDataGridColumn = {
id: col.id,
Original file line number Diff line number Diff line change
@@ -132,6 +132,7 @@ function TableOptions({
paramName="showTotal"
value={stateParams.showTotal}
setValue={setValue}
data-test-subj="showTotal"
/>

<SelectOption
@@ -143,6 +144,7 @@ function TableOptions({
paramName="totalFunc"
value={stateParams.totalFunc}
setValue={setValue}
data-test-subj="totalFunctionOptions"
/>

<SelectOption
@@ -153,7 +155,7 @@ function TableOptions({
paramName="percentageCol"
value={stateParams.percentageCol}
setValue={setValue}
id="datatableVisualizationPercentageCol"
data-test-subj="datatableVisualizationPercentageCol"
/>
</EuiPanel>
);
2 changes: 1 addition & 1 deletion src/plugins/vis_type_table/public/types.ts
Original file line number Diff line number Diff line change
@@ -80,5 +80,5 @@ export interface TableUiState {
sort: SortColumn;
setSort: (sort: SortColumn) => void;
width: ColumnWidth[];
setWidth: (columnsWidth: ColumnWidth[]) => void;
setWidth: (columnWidths: ColumnWidth[]) => void;
}
Original file line number Diff line number Diff line change
@@ -110,26 +110,26 @@ export const InspectorDataGrid = ({ columns, data, dataGridAriaLabel }: Inspecto
}, [gridData, pagination]);

// Resize
const [columnsWidth, setColumnsWidth] = useState<Record<string, number>>({});
const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
joshuarrrr marked this conversation as resolved.
Show resolved Hide resolved

const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
({ columnId, width }) => {
setColumnsWidth({
...columnsWidth,
setColumnWidths({
...columnWidths,
[columnId]: width,
});
},
[columnsWidth]
[columnWidths]
);

return (
<EuiDataGrid
aria-label={dataGridAriaLabel}
columns={columns.map((column) => {
if (columnsWidth[column.id]) {
if (columnWidths[column.id]) {
return {
...column,
initialWidth: columnsWidth[column.id],
initialWidth: columnWidths[column.id],
};
}
return column;