fix: single column in chart grid (#122)

* fix: single column in chart grid * fix: css fix Co-authored-by: Emily Bonar <emilykbonar@gmail.com> --------- Co-authored-by: Emily Bonar <emilykbonar@gmail.com>
determined-ai · Apr 17, 2024 · f128822 · f128822
1 parent d3dd1f6
commit f128822
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 32 deletions.
diff --git a/src/DesignKit.tsx b/src/DesignKit.tsx
@@ -1182,34 +1182,43 @@ const ChartsSection: React.FC = () => {
           x-axis range. There will be a linear/log scale switch, and if multiple X-axis options are
           provided, an X-axis switch.
         </p>
-        {createChartGrid({
-          chartsProps: [
-            {
-              series: [line1],
-              showLegend: true,
-              title: 'Sample1',
-              xAxis,
-              xLabel: xAxis,
-            },
-            {
-              series: [line2, line3],
-              showLegend: true,
-              title: 'Sample2',
-              xAxis,
-              xLabel: xAxis,
-            },
-            {
-              series: [line1, line2, line3],
-              showLegend: true,
-              title: 'Sample3',
-              xAxis,
-              xLabel: xAxis,
-            },
-          ],
-          handleError,
-          onXAxisChange: setXAxis,
-          xAxis: xAxis,
-        })}
+        <div style={{ height: 600 }}>
+          {createChartGrid({
+            chartsProps: [
+              {
+                series: [line1],
+                showLegend: true,
+                title: 'Sample1',
+                xAxis,
+                xLabel: xAxis,
+              },
+              {
+                series: [line2, line3],
+                showLegend: true,
+                title: 'Sample2',
+                xAxis,
+                xLabel: xAxis,
+              },
+              {
+                series: [line1, line2, line3],
+                showLegend: true,
+                title: 'Sample3',
+                xAxis,
+                xLabel: xAxis,
+              },
+              ...Array.from(Array(10), (_, i) => ({
+                series: [line1, line2, line3],
+                showLegend: true,
+                title: `Sample${i + 4}`,
+                xAxis,
+                xLabel: xAxis,
+              })),
+            ],
+            handleError,
+            onXAxisChange: setXAxis,
+            xAxis: xAxis,
+          })}
+        </div>
         <hr />
         <strong>Loading</strong>
         {createChartGrid({

diff --git a/src/kit/LineChart.module.scss b/src/kit/LineChart.module.scss
@@ -1,14 +1,15 @@
 .gridBase {
   height: 100%;
+  min-height: 150px;
   overflow: auto;
 
   .filterContainer {
-    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
   }
   .gridContainer {
     display: grid;
     gap: var(--spacing-xl);
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    grid-template-columns: auto;
 
     .gridItem {
       flex: 1;

diff --git a/src/kit/internal/UPlot/UPlotChart.module.scss b/src/kit/internal/UPlot/UPlotChart.module.scss
@@ -1,13 +1,25 @@
 .base {
-  margin-bottom: 10px;
-  margin-top: 10px;
+  padding-block: var(--spacing-lg);
   position: relative;
 
   :global(.u-legend .u-marker) {
     height: 2px;
   }
   :global(.u-legend) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xl);
+    margin: 0;
     text-align: left;
+
+    * {
+      margin: 0;
+    }
+    th {
+      align-items: center;
+      display: flex;
+      gap: 4px;
+    }
   }
 }
 .base.dark {