feat: make button from PR #2529 work parallel with graphs

Author: weinStag

src/components/ChartVisualization/ChartVisualization.react.js

@@ -60,47 +60,70 @@ const ChartVisualization = ({
     }
 
     // Determinar se é time series de forma mais rigorosa
-    // Time series só se: primeira coluna é data E temos múltiplas colunas E a primeira coluna É REALMENTE data
-    const firstColumnName = order[colStart]?.name;
+    // Time series se: temos múltiplas colunas E pelo menos uma coluna é data
     let isTimeSeries = false;
+    let dateColumnName = null;
+    let dateColumnIndex = -1;
 
-    // Só considerar time series se temos múltiplas colunas E a primeira coluna é explicitamente data/datetime
-    if (colEnd > colStart && firstColumnName && columns) {
-      // Verificar primeiro o tipo da coluna no schema
-      const firstColumnType = columns[firstColumnName]?.type;
-      const isDateColumn = firstColumnType === 'Date' ||
-                          /^(date|time|created|updated|when|at)$/i.test(firstColumnName) ||
-                          firstColumnName.toLowerCase().includes('date') ||
-                          firstColumnName.toLowerCase().includes('time');
-
-      if (isDateColumn) {
-        // Verificar se a primeira coluna contém realmente datas válidas
-        let dateCount = 0;
-        const totalRows = Math.min(3, rowEnd - rowStart + 1); // Verificar até 3 linhas
-
-        for (let rowIndex = rowStart; rowIndex < rowStart + totalRows; rowIndex++) {
-          const value = data[rowIndex]?.attributes[firstColumnName];
-          if (value instanceof Date ||
-              (typeof value === 'string' && !isNaN(Date.parse(value)) && new Date(value).getFullYear() > 1900)) {
-            dateCount++;
-          }
+    // Procurar por qualquer coluna de data na seleção (não apenas a primeira)
+    if (colEnd > colStart && columns) {
+      for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
+        const columnName = order[colIndex]?.name;
+        if (!columnName) {
+          continue;
         }
 
-        isTimeSeries = dateCount >= totalRows * 0.6; // 60% devem ser datas válidas (mais permissivo)
+        // Verificar o tipo da coluna no schema
+        const columnType = columns[columnName]?.type;
+        const isDateColumn = columnType === 'Date' ||
+                            /^(date|time|created|updated|when|at)$/i.test(columnName) ||
+                            columnName.toLowerCase().includes('date') ||
+                            columnName.toLowerCase().includes('time');
+
+        if (isDateColumn) {
+          // Verificar se a coluna contém realmente datas válidas
+          let dateCount = 0;
+          const totalRows = Math.min(3, rowEnd - rowStart + 1); // Verificar até 3 linhas
+
+          for (let rowIndex = rowStart; rowIndex < rowStart + totalRows; rowIndex++) {
+            const value = data[rowIndex]?.attributes[columnName];
+            if (value instanceof Date ||
+                (typeof value === 'string' && !isNaN(Date.parse(value)) && new Date(value).getFullYear() > 1900)) {
+              dateCount++;
+            }
+          }
+
+          if (dateCount >= totalRows * 0.6) { // 60% devem ser datas válidas
+            isTimeSeries = true;
+            dateColumnName = columnName;
+            dateColumnIndex = colIndex;
+            break; // Encontrou uma coluna de data válida
+          }
+        }
       }
     }
 
     if (isTimeSeries && colEnd > colStart) {
-      // Time Series: primeira coluna é data, outras são números
+      // Time Series: usar a coluna de data encontrada, outras são números
       const datasets = [];
+      let datasetIndex = 0;
+
+      // Criar um dataset para cada coluna numérica (exceto a coluna de data)
+      for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
+        // Pular a coluna de data
+        if (colIndex === dateColumnIndex) {
+          continue;
+        }
 
-      // Criar um dataset para cada coluna numérica
-      for (let colIndex = colStart + 1; colIndex <= colEnd; colIndex++) {
         const columnName = order[colIndex]?.name;
+        if (!columnName) {
+          continue;
+        }
+
         const dataPoints = [];
 
         for (let rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
-          const timeValue = data[rowIndex]?.attributes[firstColumnName];
+          const timeValue = data[rowIndex]?.attributes[dateColumnName];
           const numericValue = data[rowIndex]?.attributes[columnName];
 
           if (timeValue && typeof numericValue === 'number' && !isNaN(numericValue)) {
@@ -115,10 +138,11 @@ const ChartVisualization = ({
           datasets.push({
             label: columnName,
             data: dataPoints,
-            borderColor: `hsl(${(colIndex - colStart) * 60}, 70%, 50%)`,
-            backgroundColor: `hsla(${(colIndex - colStart) * 60}, 70%, 50%, 0.1)`,
+            borderColor: `hsl(${datasetIndex * 60}, 70%, 50%)`,
+            backgroundColor: `hsla(${datasetIndex * 60}, 70%, 50%, 0.1)`,
             tension: 0.1
           });
+          datasetIndex++;
         }
       }
 
@@ -139,7 +163,7 @@ const ChartVisualization = ({
               },
               title: {
                 display: true,
-                text: firstColumnName
+                text: dateColumnName
               }
             },
             y: {
@@ -172,7 +196,9 @@ const ChartVisualization = ({
 
         for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
           const columnName = order[colIndex]?.name;
-          if (!columnName) continue;
+          if (!columnName) {
+            continue;
+          }
 
           // Coletar todos os valores desta coluna
           const columnValues = [];

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -45,6 +45,8 @@ export default class DataBrowser extends React.Component {
       selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
       firstSelectedCell: null,
       selectedData: [],
+      numericSelectedData: [], // Dados apenas numéricos para operações Sum
+      hasDateInSelection: false, // Flag para detectar se há datas na seleção
       prevClassName: props.className,
       panelWidth: 300,
       isResizing: false,
@@ -92,6 +94,8 @@ export default class DataBrowser extends React.Component {
         selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
         firstSelectedCell: null,
         selectedData: [],
+        numericSelectedData: [],
+        hasDateInSelection: false,
       });
     } else if (
       Object.keys(props.columns).length !== Object.keys(this.props.columns).length ||
@@ -581,6 +585,8 @@ export default class DataBrowser extends React.Component {
 
       const newSelection = new Set();
       const selectedData = [];
+      let hasDateColumns = false; // Flag para detectar se há colunas de data
+
       for (let x = rowStart; x <= rowEnd; x++) {
         let rowData = null;
         if (validColumns) {
@@ -596,8 +602,10 @@ export default class DataBrowser extends React.Component {
               selectedData.push(value);
             } else if (columnType === 'Date' && value instanceof Date) {
               selectedData.push(value);
+              hasDateColumns = true; // Marcar que há datas
             } else if (columnType === 'Date' && typeof value === 'string' && !isNaN(Date.parse(value))) {
               selectedData.push(new Date(value));
+              hasDateColumns = true; // Marcar que há datas
             } else if (columnType === 'String' && typeof value === 'string') {
               // Para strings, incluir apenas se puderem ser interpretadas como números
               const numValue = parseFloat(value);
@@ -612,6 +620,11 @@ export default class DataBrowser extends React.Component {
         }
       }
 
+      // Criar array apenas com números para operações de soma (excluindo datas)
+      const numericData = selectedData.filter(value =>
+        typeof value === 'number' && !isNaN(value)
+      );
+
       if (newSelection.size > 1) {
         this.setCurrent(null);
         this.props.setLoadingInfoPanel(false);
@@ -625,6 +638,8 @@ export default class DataBrowser extends React.Component {
           },
           selectedObjectId: undefined,
           selectedData,
+          numericSelectedData: numericData, // Dados apenas numéricos para Sum
+          hasDateInSelection: hasDateColumns, // Flag para saber se há datas
         });
       } else {
         this.setCurrent({ row, col });
@@ -633,6 +648,8 @@ export default class DataBrowser extends React.Component {
       this.setState({
         selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
         selectedData: [],
+        numericSelectedData: [], // Limpar dados numéricos
+        hasDateInSelection: false, // Limpar flag de datas
         current: { row, col },
         firstSelectedCell: clickedCellKey,
       });
@@ -757,7 +774,7 @@ export default class DataBrowser extends React.Component {
           editCloneRows={editCloneRows}
           onCancelPendingEditRows={onCancelPendingEditRows}
           order={this.state.order}
-          selectedData={this.state.selectedData}
+          selectedData={this.state.hasDateInSelection ? this.state.numericSelectedData : this.state.selectedData}
           allClasses={Object.keys(this.props.schema.data.get('classes').toObject())}
           allClassesSchema={this.state.allClassesSchema}
           togglePanel={this.togglePanelVisibility}