Research-Dashboard/ResearchChart.jsx at main · Atri2-code/Research-Dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useMemo } from 'react';

const TOPIC_COLOURS = {
  'AI Safety':   '#1F4E79',
  'Economics':   '#D85A30',
  'Finance':     '#1D9E75',
  'Healthcare':  '#7F77DD',
  'Technology':  '#EF9F27',
};

export default function ResearchChart({ data }) {
  const topicCounts = useMemo(() => {
    const counts = {};
    data.forEach(r => {
      counts[r.topic] = (counts[r.topic] || 0) + 1;
    });
    return Object.entries(counts)
      .sort((a, b) => b[1] - a[1]);
  }, [data]);

  const citationsByTopic = useMemo(() => {
    const counts = {};
    data.forEach(r => {
      counts[r.topic] = (counts[r.topic] || 0) + r.citations;
    });
    return Object.entries(counts)
      .sort((a, b) => b[1] - a[1]);
  }, [data]);

  const maxCount    = Math.max(...topicCounts.map(([, c]) => c), 1);
  const maxCitations = Math.max(...citationsByTopic.map(([, c]) => c), 1);

  if (data.length === 0) return null;

  return (
    <div className="chart-row">

      {/* Papers by topic */}
      <div className="chart-card">
        <h3 className="chart-title">Papers by topic</h3>
        <div className="bar-list">
          {topicCounts.map(([topic, count]) => (
            <div key={topic} className="bar-row">
              <span className="bar-label">{topic}</span>
              <div className="bar-track">
                <div
                  className="bar-fill"
                  style={{
                    width: `${(count / maxCount) * 100}%`,
                    background: TOPIC_COLOURS[topic] || '#888'
                  }}
                />
              </div>
              <span className="bar-value">{count}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Citations by topic */}
      <div className="chart-card">
        <h3 className="chart-title">Citations by topic</h3>
        <div className="bar-list">
          {citationsByTopic.map(([topic, total]) => (
            <div key={topic} className="bar-row">
              <span className="bar-label">{topic}</span>
              <div className="bar-track">
                <div
                  className="bar-fill"
                  style={{
                    width: `${(total / maxCitations) * 100}%`,
                    background: TOPIC_COLOURS[topic] || '#888'
                  }}
                />
              </div>
              <span className="bar-value">{total.toLocaleString()}</span>
            </div>
          ))}
        </div>
      </div>

    </div>
  );
}