feat: integrate resizable chart panel in DataBrowser

- Add ResizableBox for chart panel
- Fixed positioning to prevent UI collapse
- Toggle functionality for chart visibility
- Proper state management for panel width

Author: weinStag

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

@@ -82,6 +82,9 @@ const BrowserToolbar = ({
   classwiseCloudFunctions,
   appId,
   appName,
+
+  toggleChartPanel,
+  isChartPanelVisible,
 }) => {
   const selectionLength = Object.keys(selection).length;
   const isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -280,6 +283,8 @@ const BrowserToolbar = ({
       classwiseCloudFunctions={classwiseCloudFunctions}
       appId={appId}
       appName={appName}
+      toggleChartPanel={toggleChartPanel}
+      isChartPanelVisible={isChartPanelVisible}
     >
       {onAddRow && (
         <a className={classes.join(' ')} onClick={onClick}>

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

@@ -15,6 +15,7 @@ import { ResizableBox } from 'react-resizable';
 import styles from './Databrowser.scss';
 
 import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
+import ChartVisualization from '../../../components/ChartVisualization/ChartVisualization.react';
 
 /**
  * DataBrowser renders the browser toolbar and data table
@@ -49,6 +50,8 @@ export default class DataBrowser extends React.Component {
       isResizing: false,
       maxWidth: window.innerWidth - 300,
       showAggregatedData: true,
+      isChartPanelVisible: false,
+      chartPanelWidth: 400,
     };
 
     this.handleResizeDiv = this.handleResizeDiv.bind(this);
@@ -67,6 +70,7 @@ export default class DataBrowser extends React.Component {
     this.setSelectedObjectId = this.setSelectedObjectId.bind(this);
     this.setContextMenu = this.setContextMenu.bind(this);
     this.handleCellClick = this.handleCellClick.bind(this);
+    this.toggleChartPanelVisibility = this.toggleChartPanelVisibility.bind(this);
     this.saveOrderTimeout = null;
   }
 
@@ -210,6 +214,12 @@ export default class DataBrowser extends React.Component {
     }
   }
 
+  toggleChartPanelVisibility() {
+    this.setState(prevState => ({
+      isChartPanelVisible: !prevState.isChartPanelVisible
+    }));
+  }
+
   getAllClassesSchema(schema) {
     const allClasses = Object.keys(schema.data.get('classes').toObject());
     const schemaSimplifiedData = {};
@@ -610,9 +620,7 @@ export default class DataBrowser extends React.Component {
         firstSelectedCell: clickedCellKey,
       });
     }
-  }
-
-  render() {
+  }  render() {
     const {
       className,
       count,
@@ -682,6 +690,31 @@ export default class DataBrowser extends React.Component {
               </div>
             </ResizableBox>
           )}
+          {this.state.isChartPanelVisible && this.state.selectedData.length > 1 && (
+            <ResizableBox
+              width={this.state.chartPanelWidth}
+              height={Infinity}
+              minConstraints={[400, Infinity]}
+              maxConstraints={[800, Infinity]}
+              onResizeStart={() => this.setState({ isResizing: true })}
+              onResizeStop={(event, { size }) => this.setState({
+                isResizing: false,
+                chartPanelWidth: size.width
+              })}
+              onResize={(event, { size }) => this.setState({ chartPanelWidth: size.width })}
+              resizeHandles={['w']}
+              className={styles.chartPanel}
+            >
+              <div className={styles.chartPanelContainer}>
+                <ChartVisualization
+                  selectedData={this.state.selectedData}
+                  selectedCells={this.state.selectedCells}
+                  data={this.props.data}
+                  order={this.state.order}
+                />
+              </div>
+            </ResizableBox>
+          )}
         </div>
 
         <BrowserToolbar
@@ -711,6 +744,8 @@ export default class DataBrowser extends React.Component {
           allClassesSchema={this.state.allClassesSchema}
           togglePanel={this.togglePanelVisibility}
           isPanelVisible={this.state.isPanelVisible}
+          toggleChartPanel={this.toggleChartPanelVisibility}
+          isChartPanelVisible={this.state.isChartPanelVisible}
           appId={this.props.app.applicationId}
           appName={this.props.appName}
           {...other}

src/dashboard/Data/Browser/Databrowser.scss

@@ -18,6 +18,51 @@
     }
 }
 
+.chartPanel {
+    position: fixed !important;
+    top: 262px;
+    right: 0%;
+    bottom: 40px;
+    width: 700px !important;
+    max-height: 620px !important;
+    height: auto !important;
+    background: 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;
+}
+
+.chartPanelContainer {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.chartPanelContainerCustom {
+    position: fixed;
+    width: 600px;
+    height: auto;
+    min-height: 400px;
+    background: white;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    // Garantir que não seja colapsado
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
 .aggregationPanelContainer{
     height: 100%;
     overflow: auto;