ui: adjust large legends for usage logs (PROJQUAY-7384) (quay#2978)

adjust large legends for usage logs
Marcusk19 · Jun 26, 2024 · 1d4865a · 1d4865a
1 parent 6c371c5
commit 1d4865a
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/web/src/routes/UsageLogs/UsageLogsGraph.tsx b/web/src/routes/UsageLogs/UsageLogsGraph.tsx
@@ -91,13 +91,15 @@ export default function UsageLogsGraph(props: UsageLogsGraphProps) {
             x: [new Date(props.starttime), new Date(props.endtime)],
             y: [0, maxRange],
           }}
-          legendOrientation="vertical"
-          legendPosition="right"
+          legendOrientation={
+            getLegendData().length >= 12 ? 'horizontal' : 'vertical'
+          }
+          legendPosition={getLegendData().length >= 12 ? 'bottom' : 'right'}
           legendData={getLegendData()}
           legendAllowWrap
           name="usage-logs-graph"
           padding={{
-            bottom: 50,
+            bottom: 10 * getLegendData().length,
             left: 80,
             right: 500, // Adjusted to accommodate legend
             top: 50,