From 82982896b3293624151ae9f2321013c7cc41df70 Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Tue, 16 Jan 2024 00:06:34 +0000
Subject: [PATCH] fix(viz): fixed table viz crash
---
libs/shared/lib/vis/index.tsx | 2 +
.../table_vis/components/Table.tsx | 37 +++++++++++++------
2 files changed, 28 insertions(+), 11 deletions(-)
diff --git a/libs/shared/lib/vis/index.tsx b/libs/shared/lib/vis/index.tsx
index 3abc7b697..27152704b 100644
--- a/libs/shared/lib/vis/index.tsx
+++ b/libs/shared/lib/vis/index.tsx
@@ -37,6 +37,8 @@ export const createVisualizationComponent = () => {
const VisualizationComponent: VISComponentType = Visualizations[vis.activeVisualization];
+ console.log('createVisualizationComponent', VisualizationComponent, vis);
+
React.useEffect(() => {
dispatch(addVisualization({ id: VisualizationComponent.displayName, settings: VisualizationComponent.localConfigSchema }));
}, [vis.activeVisualization]);
diff --git a/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx b/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
index d677c45be..0a30b7757 100644
--- a/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
@@ -25,8 +25,7 @@ type Data2RenderI = {
};
export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
- console.debug('show; ', showBarPlot);
- const maxUniqueValues = 350;
+ const maxUniqueValues = 69;
const barPlotNumBins = 10;
const [sortedData, setSortedData] = useState<AugmentedNodeAttributes[]>(data);
@@ -114,9 +113,14 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
numElements: 0,
};
- if (firstRowData.type[dataColumn] === 'string') {
+ if (
+ firstRowData.type[dataColumn] === 'string' ||
+ firstRowData.type[dataColumn] === 'date' ||
+ firstRowData.type[dataColumn] === 'duration' ||
+ firstRowData.type[dataColumn] === 'datetime' ||
+ firstRowData.type[dataColumn] === 'time'
+ ) {
const groupedData = d3.group(data, (d) => d.attribute[dataColumn]);
-
categoryCounts = Array.from(groupedData, ([category, items]) => ({
category: category as string,
count: items.length,
@@ -130,9 +134,19 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
newData2Render.data = categoryCounts;
newData2Render.showBarPlot = true;
}
+ } else if (firstRowData.type[dataColumn] === 'bool') {
+ const groupedData = d3.group(data, (d) => d.attribute[dataColumn]);
+
+ categoryCounts = Array.from(groupedData, ([category, items]) => ({
+ category: category as string,
+ count: items.length,
+ }));
+
+ newData2Render.numElements = categoryCounts.length;
+ newData2Render.data = categoryCounts;
+ newData2Render.showBarPlot = true;
- // number
- // perhaps check for other than string and number. eg. boolean
+ // number: float and int
} else if (firstRowData.type[dataColumn] === 'int' || firstRowData.type[dataColumn] === 'float') {
categoryCounts = data.map((obj) => ({
category: 'placeholder', // add something
@@ -141,6 +155,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
newData2Render.numElements = categoryCounts.length;
newData2Render.data = categoryCounts;
+ newData2Render.showBarPlot = true;
} else {
// there is also array type, when considering labels
const groupedData = d3.group(data, (d) => (d.attribute[dataColumn] as any)?.[0]);
@@ -213,11 +228,11 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
</tr>
</thead>
<tbody>
- {currentPage.currentData.map((item, index) => (
- <tr key={index}>
- {dataColumns.map((col, index) => (
- <td className="border-light" data-datatype={item.type[col]} key={index}>
- {item.attribute[col] as string}
+ {currentPage.currentData.map((item, rowIndex) => (
+ <tr key={rowIndex}>
+ {dataColumns.map((col, colIndex) => (
+ <td className="border-light" data-datatype={item.type[col]} key={colIndex}>
+ {item.attribute[col] !== undefined ? (item.attribute[col] as any).toString() : item.attribute[col]}
</td>
))}
</tr>
--
GitLab