Fix/issue 534 (#536)

* Update TableChart to use first row as titles when transposed

* Fix error when column title is the same than column value

* Allow the display of false values as string

---------

Co-authored-by: “Bastien <“[email protected]”>

Author: bastienhubert

README.md

@@ -50,7 +50,7 @@ To manually run linting of all your .ts and .tsx files, run:
 yarn run lint
 ```
 
-To manually run linting of all your .ts and .tsx staged files,  run:
+To manually run linting of all your .ts and .tsx staged files, run:
 ```
 yarn run lint-staged
 ```

src/chart/table/TableChart.tsx

@@ -114,19 +114,19 @@ export const NeoTableChart = (props: ChartProps) => {
   const actionableFields = actionsRules.map((r) => r.field);
 
   const columns = transposed
-    ? ['Field'].concat(records.map((r, j) => `Value${j == 0 ? '' : ` ${(j + 1).toString()}`}`)).map((key, i) => {
-        const value = key;
+    ? [records[0].keys[0]].concat(records.map((record) => record._fields[0]?.toString() || '')).map((key, i) => {
+        const uniqueKey = `${String(key)}_${i}`;
         return ApplyColumnType(
           {
             key: `col-key-${i}`,
-            field: generateSafeColumnKey(key),
+            field: generateSafeColumnKey(uniqueKey),
             headerName: generateSafeColumnKey(key),
             headerClassName: 'table-small-header',
             disableColumnSelector: true,
             flex: columnWidths && i < columnWidths.length ? columnWidths[i] : 1,
             disableClickEventBubbling: true,
           },
-          value,
+          key,
           actionableFields.includes(key)
         );
       })
@@ -166,15 +166,32 @@ export const NeoTableChart = (props: ChartProps) => {
     ...columns.filter((x) => x.field.startsWith(HIDDEN_COLUMN_PREFIX)).map((x) => ({ [x.field]: false }))
   );
 
+  const getTransposedRows = (records) => {
+    // Skip first key
+    const rowKeys = [...records[0].keys];
+    rowKeys.shift();
+
+    // Add values in rows
+    const rowsWithValues = rowKeys.map((key, i) =>
+      Object.assign(
+        { id: i, Field: key },
+        ...records.map((record, j) => ({
+          [`${record._fields[0]}_${j + 1}`]: RenderSubValue(record._fields[i + 1]),
+        }))
+      )
+    );
+
+    // Add field in rows
+    const rowsWithFieldAndValues = rowsWithValues.map((row, i) => ({
+      ...row,
+      [`${records[0].keys[0]}_${0}`]: rowKeys[i],
+    }));
+
+    return rowsWithFieldAndValues;
+  };
+
   const rows = transposed
-    ? records[0].keys.map((key, i) => {
-        return Object.assign(
-          { id: i, Field: key },
-          ...records.map((r, j) => ({
-            [`Value${j == 0 ? '' : ` ${(j + 1).toString()}`}`]: RenderSubValue(r._fields[i]),
-          }))
-        );
-      })
+    ? getTransposedRows(records)
     : records.map((record, rownumber) => {
         return Object.assign(
           { id: rownumber },

src/report/ReportRecordProcessing.tsx

@@ -214,7 +214,7 @@ function RenderArray(value) {
 }
 
 function RenderString(value) {
-  const str = value ? value.toString() : '';
+  const str = value?.toString() || '';
   if (str.startsWith('http') || str.startsWith('https')) {
     return (
       <TextLink externalLink target='_blank' href={str}>
@@ -331,6 +331,10 @@ export const rendererForType: any = {
     type: 'string',
     renderValue: (c) => RenderString(c.value),
   },
+  boolean: {
+    type: 'string',
+    renderValue: (c) => RenderString(c.value),
+  },
 };
 
 export function getRendererForValue(value) {