From eac3333c0b918648f7192827e8a793f293e91bdf Mon Sep 17 00:00:00 2001
From: deep1401 <gandhi0869@gmail.com>
Date: Mon, 3 Mar 2025 08:50:42 -0800
Subject: [PATCH] Change plotting approach for Radarchart to avoid plotting
multiple Radarcharts on top of each other
---
.../components/Experiment/Eval/Chart.tsx | 113 +++++++++---------
1 file changed, 54 insertions(+), 59 deletions(-)
diff --git a/src/renderer/components/Experiment/Eval/Chart.tsx b/src/renderer/components/Experiment/Eval/Chart.tsx
index baea2121..97ba01d4 100644
--- a/src/renderer/components/Experiment/Eval/Chart.tsx
+++ b/src/renderer/components/Experiment/Eval/Chart.tsx
@@ -159,65 +159,60 @@ const Chart = ({ metrics, compareChart }) => {
/>
)}
{chartType === 'radar' && compareChart && (
- <div style={{ position: 'relative', height: '100%', width: '100%' }}>
- {Array.from(new Set(metrics.map(m => `${m.evaluator}-${m.job_id}`))).map((series, index) => {
- // Filter radar data for this specific evaluator-job combination
- const seriesRadarData = metrics
- .filter(m => `${m.evaluator}-${m.job_id}` === series)
- .map(metric => ({
- metric: metric.type,
- score: metric.score
- }));
-
-
- return (
- <div key={series} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
- <ResponsiveRadar
- data={seriesRadarData}
- keys={['score']}
- indexBy="metric"
- margin={{ top: 70, right: 80, bottom: 40, left: 80 }}
- gridShape="circular"
- gridLabelOffset={36}
- dotSize={10}
- dotColor={{ from: 'color' }}
- dotBorderWidth={2}
- dotBorderColor={{ from: 'color' }}
- colors={[`hsl(${index * 30 + 60}, 70%, 50%)`]} // Different color for each series
- fillOpacity={0.2}
- blendMode="normal"
- animate={true}
- motionConfig="wobbly"
- enableDotLabel={true}
- dotLabel="value"
- dotLabelYOffset={-12}
- legends={[
- {
- anchor: 'top-right',
- direction: 'column',
- translateX: 0,
- translateY: -40,
- itemWidth: 80,
- itemHeight: 20,
- itemTextColor: '#999',
- symbolSize: 12,
- symbolShape: 'circle',
- effects: [
- {
- on: 'hover',
- style: {
- itemTextColor: '#000'
- }
- }
- ],
- data: [{ id: series, label: series, color: `hsl(${index * 30 + 60}, 70%, 50%)` }]
- }
- ]}
- />
- </div>
- );
- })}
- </div>
+ <ResponsiveRadar
+ data={(() => {
+ // Group metrics by type
+ const metricsGroupedByType = {};
+ metrics.forEach(metric => {
+ const { type, evaluator, job_id, score } = metric;
+ const seriesKey = `${evaluator}-${job_id}`;
+
+ if (!metricsGroupedByType[type]) {
+ metricsGroupedByType[type] = { metric: type };
+ }
+ metricsGroupedByType[type][seriesKey] = score;
+ });
+ return Object.values(metricsGroupedByType);
+ })()}
+ keys={Array.from(new Set(metrics.map(m => `${m.evaluator}-${m.job_id}`)))}
+ indexBy="metric"
+ margin={{ top: 70, right: 170, bottom: 40, left: 80 }}
+ borderColor={{ from: 'color' }}
+ gridShape="circular"
+ gridLabelOffset={36}
+ dotSize={10}
+ dotColor={{ theme: 'background' }}
+ dotBorderWidth={2}
+ colors={{ scheme: 'nivo' }}
+ fillOpacity={0.25}
+ blendMode="multiply"
+ animate={true}
+ motionConfig="wobbly"
+ enableDotLabel={true}
+ dotLabel="value"
+ dotLabelYOffset={-12}
+ legends={[
+ {
+ anchor: 'right',
+ direction: 'column',
+ translateX: 50,
+ translateY: 0,
+ itemWidth: 120,
+ itemHeight: 20,
+ itemTextColor: '#999',
+ symbolSize: 12,
+ symbolShape: 'circle',
+ effects: [
+ {
+ on: 'hover',
+ style: {
+ itemTextColor: '#000'
+ }
+ }
+ ]
+ }
+ ]}
+ />
)}
{chartType === 'radar' && !compareChart && (
--
GitLab