From 2ae79593733896220924c43e0fc15c52d6c323dc Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Thu, 20 Feb 2025 17:00:14 -0500
Subject: [PATCH] improve look of charts
---
.../components/Experiment/Eval/Chart.tsx | 27 ++++++++++++-------
.../Experiment/Eval/ViewPlotModal.tsx | 3 +++
2 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/src/renderer/components/Experiment/Eval/Chart.tsx b/src/renderer/components/Experiment/Eval/Chart.tsx
index 39f5d724..4d625224 100644
--- a/src/renderer/components/Experiment/Eval/Chart.tsx
+++ b/src/renderer/components/Experiment/Eval/Chart.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
import { ResponsiveLine } from '@nivo/line';
import { ResponsiveBar } from '@nivo/bar';
import { ResponsiveRadar } from '@nivo/radar';
-import { Select, Option } from '@mui/joy';
+import { Select, Option, FormControl } from '@mui/joy';
const Chart = ({ metrics }) => {
- const [chartType, setChartType] = useState('line');
+ const [chartType, setChartType] = useState('bar');
const handleChartTypeChange = (event, newValue) => {
setChartType(newValue);
@@ -40,13 +40,15 @@ const Chart = ({ metrics }) => {
}));
return (
- <div>
- <Select value={chartType} onChange={handleChartTypeChange}>
- <Option value="line">Line</Option>
- <Option value="bar">Bar</Option>
- <Option value="radar">Radar</Option>
- </Select>
- <div style={{ height: 400 }}>
+ <>
+ <FormControl sx={{ width: 200 }}>
+ <Select value={chartType} onChange={handleChartTypeChange}>
+ <Option value="bar">Bar</Option>
+ <Option value="line">Line</Option>
+ <Option value="radar">Radar</Option>
+ </Select>
+ </FormControl>
+ <div style={{ height: 400, width: '100%' }}>
{chartType === 'line' && (
<ResponsiveLine
data={lineData}
@@ -104,6 +106,8 @@ const Chart = ({ metrics }) => {
legendPosition: 'middle',
legendOffset: -40,
}}
+ colors={{ scheme: 'nivo' }}
+ colorBy="indexValue"
/>
)}
{chartType === 'radar' && (
@@ -123,10 +127,13 @@ const Chart = ({ metrics }) => {
blendMode="multiply"
animate={true}
motionConfig="wobbly"
+ enableDotLabel={true}
+ dotLabel="value"
+ dotLabelYOffset={-12}
/>
)}
</div>
- </div>
+ </>
);
};
diff --git a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
index c804f4c8..9ffb898e 100644
--- a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
+++ b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
@@ -27,6 +27,8 @@ export default function ViewPlotModal({ open, onClose, jobId, score }) {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
+ width: '100%',
+ height: '100%',
}}
>
<Typography level="h4" mb={2}>
@@ -35,6 +37,7 @@ export default function ViewPlotModal({ open, onClose, jobId, score }) {
<Box
sx={{
width: '100%',
+ height: '100%',
maxWidth: '800px',
maxHeight: '80vh',
overflowY: 'auto',
--
GitLab