From e57a2fa36ff58c41ff8d844e98011891d9988c25 Mon Sep 17 00:00:00 2001
From: hrntsm <contact@hrntsm.com>
Date: Mon, 22 Apr 2024 19:35:31 +0900
Subject: [PATCH] Update legend position in Graph components

---
 optuna_dashboard/ts/components/GraphEdf.tsx                   | 4 ++++
 optuna_dashboard/ts/components/GraphHistory.tsx               | 4 ++++
 .../ts/components/GraphHyperparameterImportances.tsx          | 4 ++++
 optuna_dashboard/ts/components/GraphIntermediateValues.tsx    | 4 ++++
 optuna_dashboard/ts/components/GraphTimeline.tsx              | 4 ++++
 5 files changed, 20 insertions(+)

diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 88af0105..1c15f4a2 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -118,6 +118,10 @@ const plotEdf = (
       b: 50,
     },
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   const plotData: Partial<plotly.PlotData>[] = edfPlotInfos.map((h) => {
diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index a64204d3..55f070d4 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -259,6 +259,10 @@ const plotHistory = (
     },
     showlegend: historyPlotInfos.length === 1 ? false : true,
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   const getAxisX = (trial: Trial): number | Date => {
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index 1152f0da..33f6a4ea 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -130,6 +130,10 @@ const plotParamImportance = (
     bargroupgap: 0.1,
     uirevision: "true",
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   if (document.getElementById(plotDomId) === null) {
diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index 5dd6b198..3552f64a 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -61,6 +61,10 @@ const plotIntermediateValue = (
     },
     uirevision: "true",
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
   if (trials.length === 0) {
     plotly.react(plotDomId, [], layout)
diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
index ae30a75b..766d4951 100644
--- a/optuna_dashboard/ts/components/GraphTimeline.tsx
+++ b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -165,6 +165,10 @@ const plotTimeline = (
     },
     uirevision: "true",
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   const makeTrace = (bars: Trial[], state: string, color: string) => {