Skip to content

Commit 0349301

Browse files
ChiragBellaraChiragBellara
committed
Added Data View toggle. Fixed CSS to improve readability. Changed CSS to Global Modules.
1 parent 0a836ef commit 0349301

4 files changed

Lines changed: 264 additions & 155 deletions

File tree

‎src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { Bar } from 'react-chartjs-2';
2-
import './ReviewsInsight.css';
2+
import styles from './ReviewsInsight.module.css';
33
import { useSelector } from 'react-redux';
4+
import Chart from 'chart.js/auto';
5+
import ChartDataLabels from 'chartjs-plugin-datalabels';
46

57
function ActionDoneGraph({ selectedTeams, teamData }) {
68
const darkMode = useSelector(state => state.theme.darkMode);
79

810
if (!selectedTeams || selectedTeams.length === 0) {
9-
return <div> </div>;
11+
return <div></div>;
1012
}
1113

1214
if (!teamData || Object.keys(teamData).length === 0) {
13-
return <div className="no-data-ri">No data available for Action Done Graph.</div>;
15+
return <div className={styles.noData}>No data available for Action Graph.</div>;
1416
}
1517

1618
const isAllTeams = selectedTeams.some(team => team.value === 'All');
@@ -54,6 +56,14 @@ function ActionDoneGraph({ selectedTeams, teamData }) {
5456
tooltip: {
5557
enabled: true,
5658
},
59+
datalabels: {
60+
color: darkMode ? '#fff' : '#000',
61+
font: { weight: 'bold', size: 11 },
62+
formatter: value => {
63+
if (!value) return 0;
64+
return value;
65+
},
66+
},
5767
},
5868
scales: {
5969
x: {
@@ -81,9 +91,11 @@ function ActionDoneGraph({ selectedTeams, teamData }) {
8191
};
8292

8393
return (
84-
<div className="ri-action-done-graph">
85-
<h2>PR: Action Done</h2>
86-
<div className="ri-graph">
94+
<div className={styles.riActionDoneGraph}>
95+
<h2 className={`${styles.heading} ${darkMode ? styles.darkModeForeground : ''}`}>
96+
PR: Action Done
97+
</h2>
98+
<div className={`${styles.riGraph} ${darkMode ? styles.riGraphDarkMode : ''}`}>
8799
<Bar data={data} options={options} />
88100
</div>
89101
</div>

‎src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import { Pie } from 'react-chartjs-2';
2-
import './ReviewsInsight.css';
2+
import styles from './ReviewsInsight.module.css';
33
import { useSelector } from 'react-redux';
4+
import Chart from 'chart.js/auto';
5+
import ChartDataLabels from 'chartjs-plugin-datalabels';
46

5-
function PRQualityGraph({ selectedTeams, qualityData }) {
7+
Chart.register(ChartDataLabels);
8+
9+
function PRQualityGraph({ selectedTeams, qualityData, isDataViewActive }) {
610
const darkMode = useSelector(state => state.theme.darkMode);
711

812
if (!selectedTeams || selectedTeams.length === 0) {
913
return <div> </div>;
1014
}
1115

1216
if (!qualityData || Object.keys(qualityData).length === 0) {
13-
return <div className="no-data-ri">No data available for Quality Graph.</div>;
17+
return <div className={styles.noData}>No data available for Quality Graph.</div>;
1418
}
1519

1620
const isAllTeams = selectedTeams.some(team => team.value === 'All');
@@ -20,18 +24,24 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
2024

2125
const generateChartData = team => {
2226
const teamQualityData = qualityData[team] || {};
27+
28+
const counts = [
29+
teamQualityData.NotApproved || 0,
30+
teamQualityData.LowQuality || 0,
31+
teamQualityData.Sufficient || 0,
32+
teamQualityData.Exceptional || 0,
33+
];
34+
35+
const total = counts.reduce((sum, v) => sum + v, 0);
36+
const values = isDataViewActive ? counts.map(v => (total ? (v / total) * 100 : 0)) : counts;
37+
2338
return {
2439
labels: ['Not Approved', 'Low Quality', 'Sufficient', 'Exceptional'],
2540
datasets: [
2641
{
2742
label: `PR Quality Distribution for ${team}`,
28-
data: [
29-
teamQualityData.NotApproved || 0,
30-
teamQualityData.LowQuality || 0,
31-
teamQualityData.Sufficient || 0,
32-
teamQualityData.Exceptional || 0,
33-
],
34-
backgroundColor: ['#DC3545', '#FFC107', '#28A745', '#007BFF'],
43+
data: values,
44+
backgroundColor: ['#DC3545', '#FFC107', '#28A745', '#5940CB'],
3545
hoverOffset: 4,
3646
},
3747
],
@@ -44,25 +54,39 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
4454
legend: {
4555
position: 'bottom',
4656
labels: {
47-
font: {
48-
size: 12,
49-
},
50-
color: !darkMode ? '#333' : '#fff',
57+
font: { size: 12 },
58+
color: darkMode ? '#fff' : '#333',
5159
},
5260
},
5361
tooltip: {
5462
enabled: true,
63+
callbacks: {
64+
label: ctx => (isDataViewActive ? `${ctx.raw.toFixed(1)}%` : ctx.raw),
65+
},
66+
},
67+
datalabels: {
68+
color: darkMode ? '#fff' : '#000',
69+
font: { weight: 'bold', size: 11 },
70+
formatter: value => {
71+
if (!value) return '';
72+
return isDataViewActive ? `${value}%` : value;
73+
},
5574
},
5675
},
5776
};
5877

5978
return (
60-
<div className="ri-quality-graph">
61-
<h2>PR Quality Distribution</h2>
62-
<div className="ri-charts">
79+
<div className={styles.riQualityGraph}>
80+
<h2 className={`${styles.heading} ${darkMode ? styles.darkModeForeground : ''}`}>
81+
PR Quality Distribution
82+
</h2>
83+
84+
<div className={`${styles.riCharts}`}>
6385
{teamsToDisplay.map(team => (
64-
<div key={team} className="ri-chart">
65-
<h3>{team}</h3>
86+
<div key={team} className={`${styles.riChart} ${darkMode ? styles.riChartDarkMode : ''}`}>
87+
<h3 className={`${styles.heading} ${darkMode ? styles.darkModeForeground : ''}`}>
88+
{team}
89+
</h3>
6690
<Pie data={generateChartData(team)} options={options} />
6791
</div>
6892
))}

‎src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx‎

Lines changed: 73 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
33
import Select from 'react-select';
4-
import './ReviewsInsight.css';
4+
import styles from './ReviewsInsight.module.css';
55
import ActionDoneGraph from './ActionDoneGraph';
66
import PRQualityGraph from './PRQualityGraph';
77
import { fetchReviewsInsights } from '../../../actions/prAnalytics/reviewsInsightsAction';
@@ -12,6 +12,7 @@ function ReviewsInsight() {
1212
const [selectedTeams, setSelectedTeams] = useState([]);
1313
const [teamData, setTeamData] = useState({});
1414
const [qualityData, setQualityData] = useState({});
15+
const [dataViewActive, setDataViewActive] = useState(false);
1516
const dispatch = useDispatch();
1617

1718
const { loading, data, error } = useSelector(state => state.reviewsInsights);
@@ -93,22 +94,43 @@ function ReviewsInsight() {
9394
];
9495

9596
return (
96-
<div className={`reviews-insight-container ${darkMode ? 'dark-mode' : ''}`}>
97-
<h1>PR Reviews Insights</h1>
97+
<div
98+
className={`${styles.reviewsInsightContainer} ${darkMode ? styles.darkModeForeground : ''} ${
99+
darkMode ? styles.darkModeBackground : ''
100+
}`}
101+
>
102+
<h1 className={darkMode ? styles.darkModeForeground : styles.heading}>PR Reviews Insights</h1>
98103

99-
<div className="ri-filters">
100-
<div className="ri-filter-item">
101-
<label htmlFor="ri-duration-filter">Duration:</label>
102-
<select id="ri-duration-filter" value={duration} onChange={handleDurationChange}>
104+
<div className={`${styles.riFilters} ${darkMode ? styles.darkModeForeground : ''}`}>
105+
<div className={`${styles.riFilterItem} ${darkMode ? styles.darkModeForeground : ''}`}>
106+
<label
107+
htmlFor="ri-duration-filter"
108+
className={`${styles.riFilterItemLabel} ${darkMode ? styles.darkModeForeground : ''}`}
109+
>
110+
Duration:
111+
</label>
112+
<select
113+
id="ri-duration-filter"
114+
value={duration}
115+
onChange={handleDurationChange}
116+
className={`${styles.riDurationFilter} ${
117+
darkMode ? styles.riDurationFilterDarkMode : ''
118+
}`}
119+
>
103120
<option value="Last Week">Last Week</option>
104121
<option value="Last 2 weeks">Last 2 weeks</option>
105122
<option value="Last Month">Last Month</option>
106123
<option value="All Time">All Time</option>
107124
</select>
108125
</div>
109126

110-
<div className="ri-filter-item">
111-
<label htmlFor="team-filter">Team Code:</label>
127+
<div className={`${styles.riFilterItem} ${darkMode ? styles.darkModeForeground : ''}`}>
128+
<label
129+
htmlFor="team-filter"
130+
className={`${styles.riFilterItemLabel} ${darkMode ? styles.darkModeForeground : ''}`}
131+
>
132+
Team Code:
133+
</label>
112134
<Select
113135
id="team-filter"
114136
isMulti
@@ -173,24 +195,58 @@ function ReviewsInsight() {
173195
}}
174196
/>
175197
</div>
198+
199+
<div className={`${styles.riFilterItem} ${darkMode ? styles.darkModeForeground : ''}`}>
200+
<span className={styles.riDataviewTitle}>Data View</span>
201+
<div className={styles.riToggleWrap}>
202+
<label className={styles.riSwitch}>
203+
<input
204+
type="checkbox"
205+
checked={dataViewActive}
206+
onChange={() => setDataViewActive(v => !v)}
207+
aria-label="Toggle data view: Percent vs Number"
208+
className={styles.riSwitchInput}
209+
/>
210+
<span className={`${styles.riSlider} ${darkMode ? styles.riSliderDarkMode : ''}`} />
211+
</label>
212+
213+
<span className={`${styles.modeLabel} ${darkMode ? styles.darkModeForeground : ''}`}>
214+
{dataViewActive ? 'PERCENT' : 'NUMBER'}
215+
</span>
216+
</div>
217+
</div>
176218
</div>
177219

178-
<div className="ri-selected-teams">
220+
<div>
179221
{selectedTeams.length === 0 ? (
180-
<p>No teams selected</p>
222+
<p className={`${styles.riSelectedTeams} ${darkMode ? styles.darkModeForeground : ''}`}>
223+
No teams selected
224+
</p>
181225
) : selectedTeams.some(team => team.value === 'All') ? (
182-
<p>Selected Teams: All Teams</p>
226+
<p className={`${styles.riSelectedTeams} ${darkMode ? styles.darkModeForeground : ''}`}>
227+
Selected Teams: All Teams
228+
</p>
183229
) : (
184-
<p>Selected Teams: {selectedTeams.map(team => team.label).join(', ')}</p>
230+
<p className={`${styles.riSelectedTeams} ${darkMode ? styles.darkModeForeground : ''}`}>
231+
Selected Teams: {selectedTeams.map(team => team.label).join(', ')}
232+
</p>
185233
)}
186234
</div>
187235

188-
{loading && <div className="ri-loading">Loading...</div>}
189-
{error && <div className="ri-error">{error}</div>}
236+
{loading && (
237+
<div className={`${styles.riLoading} ${darkMode ? styles.darkModeForeground : ''}`}>
238+
Loading...
239+
</div>
240+
)}
241+
{error && <div className={`${styles.riError}`}>{error}</div>}
190242
{!loading && !error && (
191-
<div className="ri-graphs">
243+
<div className={`${styles.riGraphs} ${darkMode ? styles.darkModeForeground : ''}`}>
192244
<ActionDoneGraph selectedTeams={selectedTeams} teamData={teamData} />
193-
<PRQualityGraph selectedTeams={selectedTeams} qualityData={qualityData} />
245+
<PRQualityGraph
246+
selectedTeams={selectedTeams}
247+
qualityData={qualityData}
248+
isDataViewActive={dataViewActive}
249+
/>
194250
</div>
195251
)}
196252
</div>

0 commit comments

Comments
 (0)