This repository has no description
add new score breakdown card
author
damedotblog
date
(Feb 17, 2025, 11:52 AM -0500)
commit
0f210ea5
0f210ea506e2cd60d455d3cbf82f2eecff72d9ec
parent
37615413
37615413c0ae0513ba3c986c21ad3297abce7405
+134
-24
+21
-13
src/components/UserProfile/UserProfile.js
+21
-13
src/components/UserProfile/UserProfile.js
···
13
13
import AltTextCard from "./components/AltTextCard";
14
14
import RawDataCard from "./components/RawDataCard";
15
15
import ActivityCard from "./components/ActivityCard";
16
+
import ScoreBreakdownCard from "./components/ScoreBreakdownCard";
16
17
17
18
import "react-grid-layout/css/styles.css";
18
19
import "react-resizable/css/styles.css";
···
46
47
{ i: "PostTypeCard", x: 0, y: 6, w: 1, h: cardHeights.PostTypeCard || 6, static: true },
47
48
{ i: "AltTextCard", x: 1, y: 6, w: 1, h: cardHeights.AltTextCard || 6, static: true },
48
49
{ i: "ActivityCard", x: 0, y: 12, w: 1, h: cardHeights.ActivityCard || 8, static: true },
49
-
{ i: "RawDataCard", x: 1, y: 12, w: 1, h: cardHeights.RawDataCard || 8, static: true },
50
+
{ i: "ScoreBreakdownCard", x: 1, y: 12, w: 1, h: cardHeights.ScoreBreakdownCard || 8, static: true },
51
+
{ i: "RawDataCard", x: 0, y: 20, w: 2, h: cardHeights.RawDataCard || 8, static: true },
50
52
],
51
53
xs: [
52
54
{ i: "ProfileCard", x: 0, y: 0, w: 1, h: cardHeights.ProfileCard || 6, static: true },
···
54
56
{ i: "PostTypeCard", x: 0, y: 12, w: 1, h: cardHeights.PostTypeCard || 6, static: true },
55
57
{ i: "AltTextCard", x: 0, y: 18, w: 1, h: cardHeights.AltTextCard || 6, static: true },
56
58
{ i: "ActivityCard", x: 0, y: 24, w: 1, h: cardHeights.ActivityCard || 8, static: true },
57
-
{ i: "RawDataCard", x: 0, y: 32, w: 1, h: cardHeights.RawDataCard || 8, static: true },
59
+
{ i: "ScoreBreakdownCard", x: 0, y: 32, w: 1, h: cardHeights.ScoreBreakdownCard || 8, static: true },
60
+
{ i: "RawDataCard", x: 0, y: 40, w: 1, h: cardHeights.RawDataCard || 8, static: true },
58
61
]
59
62
});
60
63
···
208
211
</div>
209
212
210
213
<ResponsiveGridLayout
211
-
className="layout"
212
-
layouts={getLayouts()}
213
-
breakpoints={breakpoints}
214
-
cols={cols}
215
-
rowHeight={50}
216
-
margin={[20, 20]}
217
-
isDraggable={false}
218
-
isResizable={false}
219
-
useCSSTransforms={true}
220
-
onLayoutChange={() => updateCardHeights()}
221
-
>
214
+
className="layout"
215
+
layouts={getLayouts()}
216
+
breakpoints={breakpoints}
217
+
cols={cols}
218
+
rowHeight={50}
219
+
margin={[20, 20]}
220
+
isDraggable={false}
221
+
isResizable={false}
222
+
useCSSTransforms={true}
223
+
onLayoutChange={() => updateCardHeights()}
224
+
>
222
225
<div key="ProfileCard" className="grid-item" ref={el => cardRefs.current.ProfileCard = el}>
223
226
<Card title="Profile">
224
227
<ProfileCard />
···
242
245
<div key="ActivityCard" className="grid-item" ref={el => cardRefs.current.ActivityCard = el}>
243
246
<Card title="Activity Overview">
244
247
<ActivityCard />
248
+
</Card>
249
+
</div>
250
+
<div key="ScoreBreakdownCard" className="grid-item" ref={el => cardRefs.current.ScoreBreakdownCard = el}>
251
+
<Card title="Score Breakdown">
252
+
<ScoreBreakdownCard />
245
253
</Card>
246
254
</div>
247
255
<div key="RawDataCard" className="grid-item" ref={el => cardRefs.current.RawDataCard = el}>
+1
-1
src/components/UserProfile/components/AltTextCard.js
+1
-1
src/components/UserProfile/components/AltTextCard.js
+111
-10
src/components/UserProfile/components/ScoreBreakdownCard.js
+111
-10
src/components/UserProfile/components/ScoreBreakdownCard.js
···
1
-
// frontend/src/components/UserProfile/components/ScoreBreakdownCard.js
1
+
import React, { useContext, PureComponent } from 'react';
2
+
import { Treemap, ResponsiveContainer } from 'recharts';
3
+
import { AccountDataContext } from "../UserProfile";
4
+
5
+
// Custom colors for the two main categories
6
+
const COLORS = ['#0056b3', '#003366'];
7
+
8
+
// CustomizedContent component for the treemap
9
+
class CustomizedContent extends PureComponent {
10
+
render() {
11
+
const { root, depth, x, y, width, height, index, name, value } = this.props;
12
+
13
+
return (
14
+
<g>
15
+
<rect
16
+
x={x}
17
+
y={y}
18
+
width={width}
19
+
height={height}
20
+
style={{
21
+
fill: depth < 2 ? COLORS[Math.floor((index / root.children.length) * 2)] : '#ffffff10',
22
+
stroke: '#fff',
23
+
strokeWidth: 2 / (depth + 1e-10),
24
+
strokeOpacity: 1 / (depth + 1e-10),
25
+
}}
26
+
/>
27
+
{
28
+
width > 50 && height > 30 && (
29
+
<text
30
+
x={x + width / 2}
31
+
y={y + height / 2}
32
+
textAnchor="middle"
33
+
fill="#fff"
34
+
fontSize={depth === 1 ? 16 : 14}
35
+
className="select-none"
36
+
>
37
+
{name}
38
+
{depth === 2 && (
39
+
<tspan x={x + width / 2} y={y + height / 2 + 20}>
40
+
{value}
41
+
</tspan>
42
+
)}
43
+
</text>
44
+
)
45
+
}
46
+
</g>
47
+
);
48
+
}
49
+
}
50
+
51
+
const ScoreBreakdownCard = () => {
52
+
const accountData = useContext(AccountDataContext);
53
+
54
+
if (!accountData) {
55
+
return <div>Loading score breakdown...</div>;
56
+
}
57
+
58
+
// Prepare the data for the treemap
59
+
const data = [
60
+
{
61
+
name: 'Bluesky Score',
62
+
children: [
63
+
{ name: 'Posts', size: accountData.blueskyScore * 0.4 },
64
+
{ name: 'Engagement', size: accountData.blueskyScore * 0.3 },
65
+
{ name: 'Profile', size: accountData.blueskyScore * 0.2 },
66
+
{ name: 'Alt Text', size: accountData.blueskyScore * 0.1 },
67
+
],
68
+
},
69
+
{
70
+
name: 'ATProto Score',
71
+
children: [
72
+
{ name: 'Collections', size: accountData.atprotoScore * 0.35 },
73
+
{ name: 'Security', size: accountData.atprotoScore * 0.25 },
74
+
{ name: 'Domain', size: accountData.atprotoScore * 0.25 },
75
+
{ name: 'PDS', size: accountData.atprotoScore * 0.15 },
76
+
],
77
+
},
78
+
];
2
79
3
-
// Atproto Breakdown
4
-
// 1. Activity
5
-
// 2. Decentralization
6
-
// 3.
80
+
return (
81
+
<div className="w-full h-full min-h-[400px] p-4">
82
+
<div className="flex justify-between items-center mb-4">
83
+
<div className="text-lg font-semibold">
84
+
Total Score: {accountData.combinedScore}
85
+
</div>
86
+
<div className="flex space-x-4">
87
+
<div>
88
+
<span className="font-medium">Bluesky: </span>
89
+
{accountData.blueskyScore}
90
+
</div>
91
+
<div>
92
+
<span className="font-medium">ATProto: </span>
93
+
{accountData.atprotoScore}
94
+
</div>
95
+
</div>
96
+
</div>
97
+
98
+
<div className="h-[350px]">
99
+
<ResponsiveContainer width="100%" height="100%">
100
+
<Treemap
101
+
data={data}
102
+
dataKey="size"
103
+
aspectRatio={4 / 3}
104
+
stroke="#fff"
105
+
content={<CustomizedContent colors={COLORS} />}
106
+
/>
107
+
</ResponsiveContainer>
108
+
</div>
109
+
</div>
110
+
);
111
+
};
7
112
8
-
// Bluesky Breakdown
9
-
// 1. Activity
10
-
// 2. Social Graph
11
-
// 3. Profile
12
-
// 4. Age
113
+
export default ScoreBreakdownCard;