From 93d5891f5ae6956b76da51e5ef220d5d5afcc894 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Tue, 4 Mar 2025 09:58:27 -0500
Subject: [PATCH] make sure legend shows up
---
.../components/Experiment/Eval/Chart.tsx | 23 ++++++++++++-------
.../Experiment/Eval/ViewPlotModal.tsx | 6 ++---
2 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/src/renderer/components/Experiment/Eval/Chart.tsx b/src/renderer/components/Experiment/Eval/Chart.tsx
index 369c3be1..d3de4b8a 100644
--- a/src/renderer/components/Experiment/Eval/Chart.tsx
+++ b/src/renderer/components/Experiment/Eval/Chart.tsx
@@ -92,8 +92,15 @@ const Chart = ({ metrics, compareChart }) => {
};
return (
- <>
- <Box sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
+ <Box sx={{ border: '1px solid #e0e0e0', borderRadius: 8, p: 2 }}>
+ <Box
+ sx={{
+ display: 'flex',
+ gap: 2,
+ mb: 2,
+ alignItems: 'center',
+ }}
+ >
<FormControl sx={{ width: 200 }}>
<Select value={chartType} onChange={handleChartTypeChange}>
<Option value="bar">Bar</Option>
@@ -117,7 +124,7 @@ const Chart = ({ metrics, compareChart }) => {
{chartType === 'line' && (
<ResponsiveLine
data={getChartData()}
- margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+ margin={{ top: 50, right: 200, bottom: 80, left: 60 }}
xScale={{ type: 'point' }}
yScale={{
type: 'linear',
@@ -150,7 +157,7 @@ const Chart = ({ metrics, compareChart }) => {
pointBorderColor={{ from: 'serieColor' }}
legends={[
{
- anchor: 'bottom-right',
+ anchor: 'top-right',
direction: 'column',
justify: false,
translateX: 100,
@@ -223,12 +230,12 @@ const Chart = ({ metrics, compareChart }) => {
dotLabel="value"
dotLabelYOffset={-12}
legends={
- normalizedData.seriesKeys.length > 1
+ normalizedData.seriesKeys.length > 0
? [
{
- anchor: 'right',
+ anchor: 'top-right',
direction: 'column',
- translateX: 50,
+ translateX: -200,
translateY: 0,
itemWidth: 120,
itemHeight: 20,
@@ -250,7 +257,7 @@ const Chart = ({ metrics, compareChart }) => {
/>
)}
</div>
- </>
+ </Box>
);
};
diff --git a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
index 607cfec3..267812dd 100644
--- a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
+++ b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
@@ -35,9 +35,6 @@ export default function ViewPlotModal({
height: '100%',
}}
>
- <Typography level="h4" mb={2}>
- Chart
- </Typography>
<Box
sx={{
width: '100%',
@@ -48,6 +45,9 @@ export default function ViewPlotModal({
borderRadius: '8px',
boxShadow: 1,
p: 2,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
}}
>
<Chart metrics={parseJSON(data)} compareChart={compareChart} />
--
GitLab