fix: address CodeRabbit review feedback

Author: weinStag

src/components/ChartVisualization/ChartVisualization.react.js

@@ -5,6 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
+import PropTypes from 'lib/PropTypes';
 import React, { useMemo, useState } from 'react';
 import {
   Chart as ChartJS,
@@ -23,7 +24,7 @@ import { Bar, Line, Pie } from 'react-chartjs-2';
 import 'chartjs-adapter-date-fns';
 import styles from './ChartVisualization.scss';
 
-// Registrar os componentes necessários do Chart.js
+// Register necessary Chart.js components
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -48,7 +49,7 @@ const ChartVisualization = ({
 
   // Processar dados selecionados para determinar o tipo de visualização
   const chartData = useMemo(() => {
-    // Validação inicial mais rigorosa
+    // More rigorous initial validation
     if (!selectedData || selectedData.length === 0 || !selectedCells || !data || !Array.isArray(data)) {
       return null;
     }
@@ -207,7 +208,7 @@ const ChartVisualization = ({
 
       // Se múltiplas colunas, criar datasets separados para cada coluna
       if (colEnd > colStart) {
-        // CORREÇÃO: Em vez de calcular médias, mostrar todos os valores
+        // FIX: Instead of calculating averages, show all values
         const datasets = [];
 
         for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
@@ -297,7 +298,7 @@ const ChartVisualization = ({
           }
         };
       } else {
-        // Única coluna: usar índices das linhas como rótulos (MANTER COMO ESTÁ)
+        // Single column: use row indices as labels (KEEP AS IS)
         const columnName = order[colStart]?.name;
         if (columnName) {
           for (let rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
@@ -347,7 +348,7 @@ const ChartVisualization = ({
                 color: '#333'
               },
               legend: {
-                display: false // Uma coluna não precisa de legenda
+                display: false // Single column doesn't need legend
               },
               tooltip: {
                 backgroundColor: 'rgba(0, 0, 0, 0.8)',
@@ -390,13 +391,13 @@ const ChartVisualization = ({
         />
       );
     } else {
-      // Para number series, suportar bar, line e pie charts
+      // For number series, support bar, line and pie charts
       if (chartType === 'pie') {
-        // Para pie chart, verificar se temos dados válidos
+        // For pie chart, verify if we have valid data
         const values = chartData.data.datasets[0].data;
         const labels = chartData.data.labels;
 
-        // Filtrar valores válidos (> 0) para pie chart
+        // Filter valid values (> 0) for pie chart
         const validData = [];
         const validLabels = [];
         const validColors = [];
@@ -619,4 +620,18 @@ const ChartVisualization = ({
   );
 };
 
+ChartVisualization.propTypes = {
+  selectedData: PropTypes.array.isRequired,
+  selectedCells: PropTypes.shape({
+    list: PropTypes.instanceOf(Set),
+    rowStart: PropTypes.number.isRequired,
+    rowEnd: PropTypes.number.isRequired,
+    colStart: PropTypes.number.isRequired,
+    colEnd: PropTypes.number.isRequired,
+  }).isRequired,
+  data: PropTypes.array.isRequired,
+  order: PropTypes.array.isRequired,
+  columns: PropTypes.object.isRequired
+};
+
 export default ChartVisualization;

src/components/ChartVisualization/ChartVisualization.scss

@@ -127,24 +127,7 @@
   }
 }
 
-.noData {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: #999;
-  font-style: italic;
-  background: #f9f9f9;
-  border-radius: 8px;
-  margin: 20px;
-
-  p {
-    margin: 0;
-    font-size: 16px;
-  }
-}
-
-// Responsividade
+// Responsive design
 @media (max-width: 1200px) {
   .chartContainer {
     max-width: 100%;

src/components/Toolbar/Toolbar.react.js

@@ -38,7 +38,7 @@ const Stats = ({ data, classwiseCloudFunctions, className, appId, appName }) =>
     },
     {
       type: 'p99',
-      label: 'P999',
+      label: 'P99',
       getValue: data => {
         const sorted = data.sort((a, b) => a - b);
         return sorted[Math.floor(sorted.length * 0.99)];

src/components/Toolbar/Toolbar.scss

@@ -163,7 +163,7 @@ body:global(.expanded) {
 .dataControls {
   position: absolute;
   right: 20px;
-  bottom: 10px; // Movido para a mesma linha do stats
+  bottom: 10px; // Moved to the same line as stats
   display: flex;
   align-items: center;
   gap: 16px;
@@ -255,7 +255,7 @@ body:global(.expanded) {
   }
 
   .stats {
-    right: 80px; // Posição ajustada para mobile
+    right: 80px; // Position adjusted for mobile
     bottom: 10px;
     font-size: 12px;
     padding: 5px 8px;

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

@@ -46,8 +46,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
+      numericSelectedData: [], // Numeric data only for Sum operations
+      hasDateInSelection: false, // Flag to detect if there are dates in selection
       prevClassName: props.className,
       panelWidth: 300,
       isResizing: false,
@@ -588,7 +588,7 @@ export default class DataBrowser extends React.Component {
       for (let i = colStart; i <= colEnd; i++) {
         const name = this.state.order[i].name;
         const columnType = this.props.columns[name].type;
-        // Permitir Number, Date, String (que pode conter números) para visualização
+        // Allow Number, Date, String (which can contain numbers) for visualization
         if (columnType !== 'Number' && columnType !== 'Date' && columnType !== 'String') {
           validColumns = false;
           break;
@@ -597,7 +597,7 @@ export default class DataBrowser extends React.Component {
 
       const newSelection = new Set();
       const selectedData = [];
-      let hasDateColumns = false; // Flag para detectar se há colunas de data
+      let hasDateColumns = false; // Flag to detect if there are date columns
 
       for (let x = rowStart; x <= rowEnd; x++) {
         let rowData = null;
@@ -609,30 +609,30 @@ export default class DataBrowser extends React.Component {
             const value = rowData.attributes[this.state.order[y].name];
             const columnType = this.props.columns[this.state.order[y].name].type;
 
-            // Incluir diferentes tipos de dados para visualização
+            // Include different data types for visualization
             if (columnType === 'Number' && typeof value === 'number' && !isNaN(value)) {
               selectedData.push(value);
             } else if (columnType === 'Date' && value instanceof Date) {
               selectedData.push(value);
-              hasDateColumns = true; // Marcar que há datas
+              hasDateColumns = true; // Mark that there are dates
             } else if (columnType === 'Date' && typeof value === 'string' && !isNaN(Date.parse(value))) {
               selectedData.push(new Date(value));
-              hasDateColumns = true; // Marcar que há datas
+              hasDateColumns = true; // Mark that there are dates
             } else if (columnType === 'String' && typeof value === 'string') {
-              // Para strings, incluir apenas se puderem ser interpretadas como números
+              // For strings, include only if they can be interpreted as numbers
               const numValue = parseFloat(value);
               if (!isNaN(numValue)) {
                 selectedData.push(numValue);
               } else {
-                selectedData.push(value); // Incluir strings para labels em time series
+                selectedData.push(value); // Include strings for labels in time series
               }
             }
           }
           newSelection.add(`${x}-${y}`);
         }
       }
 
-      // Criar array apenas com números para operações de soma (excluindo datas)
+      // Create array with only numbers for sum operations (excluding dates)
       const numericData = selectedData.filter(value =>
         typeof value === 'number' && !isNaN(value)
       );
@@ -650,8 +650,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
+          numericSelectedData: numericData, // Numeric data only for Sum
+          hasDateInSelection: hasDateColumns, // Flag to know if there are dates
         });
       } else {
         this.setCurrent({ row, col });
@@ -660,8 +660,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
+        numericSelectedData: [], // Clear numeric data
+        hasDateInSelection: false, // Clear dates flag
         current: { row, col },
         firstSelectedCell: clickedCellKey,
       });

src/dashboard/Data/Browser/Databrowser.scss

@@ -19,22 +19,22 @@
 }
 
 .chartPanel {
-    position: fixed !important;
+    position: fixed;
     top: 262px;
     right: 0%;
     bottom: 40px;
-    width: 700px !important;
-    max-height: 620px !important;
-    height: auto !important;
-    background-color: red !important;
+    width: 700px;
+    max-height: 620px;
+    height: auto;
+    background-color: white;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 1000;
 
-    // Garantir que não seja colapsado
-    flex-shrink: 0 !important;
-    flex-grow: 0 !important;
-    min-width: 400px !important;
-    max-width: 800px !important;
+    // Ensure it doesn't collapse
+    flex-shrink: 0;
+    flex-grow: 0;
+    min-width: 400px;
+    max-width: 800px;
 }
 
 .chartPanelContainer {
@@ -57,7 +57,7 @@
     display: flex;
     flex-direction: column;
 
-    // Garantir que não seja colapsado
+    // Ensure it doesn't collapse
     flex-shrink: 0;
     flex-grow: 0;
 }