fix(bi): Fixed resizing of data viz tiles and some css fixes for BI (#…

…20139) Fixed resizing of data viz tiles and some css fixes for BI
PostHog · Feb 5, 2024 · 2fc91f2 · 2fc91f2
1 parent 08b2f71
commit 2fc91f2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Chart.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Chart.tsx
@@ -1,5 +1,6 @@
 import './Chart.scss'
 
+import clsx from 'clsx'
 import { useValues } from 'kea'
 
 import { dataVisualizationLogic } from '../dataVisualizationLogic'
@@ -16,7 +17,11 @@ export const Chart = (): JSX.Element => {
                     <SideBar />
                 </div>
             )}
-            <div className="w-full flex flex-1 overflow-auto">
+            <div
+                className={clsx('w-full h-full flex-1 overflow-auto', {
+                    'pt-[46px]': showEditingUI,
+                })}
+            >
                 <LineGraph />
             </div>
         </div>

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
@@ -28,7 +28,7 @@ export const LineGraph = (): JSX.Element => {
 
     // TODO: Extract this logic out of this component and inject values in
     // via props. Make this a purely presentational component
-    const { xData, yData, presetChartHeight, visualizationType } = useValues(dataVisualizationLogic)
+    const { xData, yData, presetChartHeight, visualizationType, showEditingUI } = useValues(dataVisualizationLogic)
     const isBarChart = visualizationType === ChartDisplayType.ActionsBar
 
     const { goalLines } = useValues(displayLogic)
@@ -273,6 +273,8 @@ export const LineGraph = (): JSX.Element => {
         <div
             className={clsx('rounded bg-bg-light relative flex flex-1 flex-col p-2', {
                 DataVisualization__LineGraph: presetChartHeight,
+                'h-full': !presetChartHeight,
+                border: showEditingUI,
             })}
         >
             <div className="flex flex-1 w-full h-full overflow-hidden">

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/SideBar.tsx b/frontend/src/queries/nodes/DataVisualization/Components/SideBar.tsx
@@ -19,7 +19,7 @@ const TABS_TO_CONTENT = {
 }
 
 const ContentWrapper = ({ children }: { children: JSX.Element }): JSX.Element => {
-    return <div className="SideBar bg-bg-light border p-4">{children}</div>
+    return <div className="SideBar bg-bg-light border p-4 rounded-t-none border-t-0">{children}</div>
 }
 
 export const SideBar = (): JSX.Element => {