feat: add chart toggle button in Toolbar component

Author: weinStag

src/components/Toolbar/Toolbar.react.js

@@ -38,7 +38,7 @@ const Stats = ({ data, classwiseCloudFunctions, className, appId, appName }) =>
     },
     {
       type: 'p99',
-      label: 'P99',
+      label: 'P999',
       getValue: data => {
         const sorted = data.sort((a, b) => a - b);
         return sorted[Math.floor(sorted.length * 0.99)];
@@ -125,6 +125,7 @@ const Stats = ({ data, classwiseCloudFunctions, className, appId, appName }) =>
 const Toolbar = props => {
   const action = useNavigationType();
   const navigate = useNavigate();
+
   let backButton;
   if (props.relation || (props.filters && props.filters.size && action !== NavigationType.Pop)) {
     backButton = (
@@ -146,13 +147,25 @@ const Toolbar = props => {
         </div>
       </div>
       {props?.selectedData?.length ? (
-        <Stats
-          data={props.selectedData}
-          classwiseCloudFunctions={props.classwiseCloudFunctions}
-          className={props.className}
-          appId={props.appId}
-          appName={props.appName}
-        />
+        <div className={styles.dataControls}>
+          <Stats
+            data={props.selectedData}
+            classwiseCloudFunctions={props.classwiseCloudFunctions}
+            className={props.className}
+            appId={props.appId}
+            appName={props.appName}
+          />
+          {props?.selectedData?.length > 1 && (
+            <button
+              onClick={props.toggleChartPanel}
+              className={styles.chartButton}
+              title={props.isChartPanelVisible ? 'Hide Data Visualization' : 'Show Data Visualization'}
+            >
+              <Icon width={16} height={16} fill="currentColor" name="analytics-outline" />
+              <span>{props.isChartPanelVisible ? 'Hide Chart' : 'Show Chart B'}</span>
+            </button>
+          )}
+        </div>
       ) : null}
       <div className={styles.actions}>{props.children}</div>
       {props.classwiseCloudFunctions &&

src/components/Toolbar/Toolbar.scss

@@ -87,16 +87,22 @@ body:global(.expanded) {
 }
 
 .stats {
-  position: absolute;
-  right: 20px;
-  bottom: 10px;
   background: $blue;
-  border-radius: 3px;
-  padding: 2px 6px;
+  border-radius: 6px;
+  padding: 8px 12px;
   font-size: 14px;
+  font-weight: 500;
   color: white;
-  box-shadow: none;
+  box-shadow: 0 2px 8px rgba(22, 156, 238, 0.3);
   border: none;
+  transition: all 0.3s ease;
+  z-index: 5;
+
+  &:hover {
+    background: #1976d2;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(22, 156, 238, 0.4);
+  }
 }
 
 .stats_popover_container {
@@ -153,3 +159,105 @@ body:global(.expanded) {
     }
   }
 }
+
+.dataControls {
+  position: absolute;
+  right: 20px;
+  bottom: 10px; // Movido para a mesma linha do stats
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  z-index: 10;
+}
+
+.chartButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #169cee, #1976d2);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(22, 156, 238, 0.3);
+
+  &:hover {
+    background: linear-gradient(135deg, #1976d2, #1565c0);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(22, 156, 238, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 6px rgba(22, 156, 238, 0.3);
+  }
+
+  svg {
+    flex-shrink: 0;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+  }
+}
+
+// Responsividade para o botão do gráfico
+@media (max-width: 968px) {
+  .stats {
+    right: 120px; // Menor distância em telas médias
+  }
+}
+
+@media (max-width: 768px) {
+  .dataControls {
+    right: 15px;
+    bottom: 10px;
+    gap: 12px;
+  }
+
+  .chartButton {
+    padding: 6px 12px;
+    font-size: 12px;
+    gap: 6px;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .stats {
+    right: 110px; // Ajustado para telas menores
+    bottom: 10px;
+    padding: 6px 10px;
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .dataControls {
+    right: 10px;
+    bottom: 10px;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .chartButton {
+    padding: 5px 8px;
+    font-size: 11px;
+
+    // Em telas muito pequenas, mostra apenas o ícone
+    span {
+      display: none;
+    }
+  }
+
+  .stats {
+    right: 80px; // Posição ajustada para mobile
+    bottom: 10px;
+    font-size: 12px;
+    padding: 5px 8px;
+  }
+}