diff --git a/src/renderer/components/Experiment/Eval/Chart.tsx b/src/renderer/components/Experiment/Eval/Chart.tsx index 369c3be1eeb68238039d8cdf50ad41316b4cb57d..d3de4b8acd2f7af937b7df9dfe66ee7e55c75b03 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 607cfec3c234a2b4919b507b9f991fd6b957d01c..267812dd7978e25ee09ad033046c2bb001e7eca2 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} />