Skip to content

Commit 5d5d1a9

Browse files
ShrawanBKShrawanBK
committed
Refactor Dashboard Summary
1 parent 6ef5962 commit 5d5d1a9

File tree

6 files changed

+78
-17
lines changed

6 files changed

+78
-17
lines changed

client/src/views/Report/DonutChart/index.js renamed to client/src/views/CommonCharts/DonutChart/index.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export default function DonutChart(props) {
4343
const {
4444
data,
4545
colorScheme,
46+
donutChartHeight,
47+
donutChartWidth,
4648
} = props;
4749

4850
if (data.length <= 0) {
@@ -56,22 +58,24 @@ export default function DonutChart(props) {
5658
return (
5759
<div
5860
style={{
59-
width: '100%',
60-
height: 180,
61+
width: donutChartWidth,
62+
height: donutChartHeight,
63+
marginBottom: 12,
6164
}}
6265
>
6366
<ResponsiveContainer>
6467
<PieChart>
6568
<Pie
6669
data={data}
67-
innerRadius={65}
68-
outerRadius={85}
70+
innerRadius={donutChartHeight / 2.75}
71+
outerRadius={donutChartHeight / 2}
6972
dataKey="value"
7073
>
7174
{data.map((d, index) => (
7275
<Cell
7376
key={d.key}
7477
fill={colorScheme[index]}
78+
className={styles.cell}
7579
/>
7680
))}
7781
</Pie>
@@ -82,7 +86,14 @@ export default function DonutChart(props) {
8286
);
8387
}
8488

89+
DonutChart.defaultProps = {
90+
donutChartHeight: 180,
91+
donutChartWidth: '100%',
92+
};
93+
8594
DonutChart.propTypes = {
95+
donutChartHeight: PropTypes.number,
96+
donutChartWidth: PropTypes.string,
8697
data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
8798
colorScheme: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
8899
};

client/src/views/Report/DonutChart/styles.scss renamed to client/src/views/CommonCharts/DonutChart/styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@
1414
margin-bottom: 0;
1515
font-size: var(--font-size-super-large);
1616
}
17+
18+
.cell {
19+
cursor: pointer;
20+
}

‎client/src/views/Dashboard/Summary/index.js‎

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import LanguagePeopleGroupDisability from '#components/LanguagePeopleGroupDisabi
2121

2222
import { transformSoi } from '#utils/transform';
2323

24+
import DonutChartRecharts from '../../CommonCharts/DonutChart';
25+
2426
import styles from './styles.scss';
2527

2628
const propTypes = {
@@ -40,6 +42,8 @@ const defaultProps = {
4042
const droppedKey = 'total_no_of_rc_records_dropped_during_the_month';
4143
const rcAwayKey = 'total_rc_temporarily_away';
4244

45+
const donutChartHeight = 120;
46+
4347
const ageKeyMap = {
4448
'<=6': '0 - 6',
4549
'7-12': '7 - 12',
@@ -70,6 +74,7 @@ const legendColorSelector = d => d.color;
7074

7175
const donutColor = ['#41cf76', '#f44336'];
7276
const soiColorScheme = ['#ef5350', '#fff176', '#81c784'];
77+
7378
const sectionPercents = [0.75, 0.1, 0.15];
7479

7580
const getPercent = (data) => {
@@ -352,7 +357,7 @@ export default class Summary extends PureComponent {
352357
};
353358

354359
const primaryUneducated = {
355-
key: 'PrimaryEducated',
360+
key: 'PrimaryUneducated',
356361
value: this.getValueFromMap(educationMap, '@PrimarySchoolAgeNoEducation') || 0,
357362
label: 'Primary School Age RC Not Involved in Education',
358363
};
@@ -383,7 +388,7 @@ export default class Summary extends PureComponent {
383388

384389
const educated = education.filter(values => (
385390
values.key === 'PrimaryEducated'
386-
|| values.key === 'SecondaryEducated'
391+
|| values.key === 'SecondaryEducated'
387392
)).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
388393
value: 0,
389394
key: 'educated',
@@ -392,7 +397,7 @@ export default class Summary extends PureComponent {
392397

393398
const uneducated = education.filter(values => (
394399
values.key === '@SecondarySchoolAgeNoEducation'
395-
|| values.key === '@PrimarySchoolAgeNoEducation'
400+
|| values.key === '@PrimarySchoolAgeNoEducation'
396401
)).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
397402
value: 0,
398403
key: 'uneducated',
@@ -423,6 +428,18 @@ export default class Summary extends PureComponent {
423428
return getAgeDistribution(male[0]);
424429
});
425430

431+
getDonutDataWithName = memoize((donutData) => {
432+
if (isFalsy(donutData)) {
433+
return [];
434+
}
435+
436+
const dataWithName = donutData.map(data => ({
437+
...data,
438+
name: data.label,
439+
}));
440+
return dataWithName;
441+
});
442+
426443
render() {
427444
const {
428445
className,
@@ -462,6 +479,10 @@ export default class Summary extends PureComponent {
462479
const maleRCAgeDistribution = this.getMaleRcAge(registerChildByAgeAndGender);
463480
const rcData = this.getRcData(rc, presenceAndParticipation);
464481

482+
const healthNutritionWithName = this.getDonutDataWithName(healthNutrition);
483+
const educationInvolvementWithName = this.getDonutDataWithName(educationInvolvement);
484+
const childMonitoringVizDataWithName = this.getDonutDataWithName(childMonitoringVizData);
485+
465486
const infoText = `The data below is
466487
aggregated from sponsorship
467488
management report from ${noOfProjects}
@@ -497,7 +518,14 @@ export default class Summary extends PureComponent {
497518
<div className={styles.item}>
498519
<h3>Health / Nutrition</h3>
499520
<div className={styles.itemTableViz}>
500-
<DonutChart
521+
<DonutChartRecharts
522+
donutChartHeight={donutChartHeight}
523+
data={healthNutritionWithName}
524+
colorScheme={donutColor}
525+
className={styles.viz}
526+
donutChartWidth="50%"
527+
/>
528+
{/* <DonutChart
501529
className={styles.viz}
502530
data={healthNutrition}
503531
sideLengthRatio={0.2}
@@ -506,7 +534,7 @@ export default class Summary extends PureComponent {
506534
labelSelector={Summary.labelSelector}
507535
labelModifier={Summary.labelModifierSelector}
508536
colorScheme={donutColor}
509-
/>
537+
/> */}
510538
<ListView
511539
className={styles.table}
512540
data={percentHealth}
@@ -519,7 +547,13 @@ export default class Summary extends PureComponent {
519547
<div className={styles.item}>
520548
<h3>Education</h3>
521549
<div className={styles.itemTableViz}>
522-
<DonutChart
550+
<DonutChartRecharts
551+
donutChartHeight={donutChartHeight}
552+
data={educationInvolvementWithName}
553+
colorScheme={donutColor}
554+
donutChartWidth="50%"
555+
/>
556+
{/* <DonutChart
523557
className={styles.viz}
524558
data={educationInvolvement}
525559
sideLengthRatio={0.2}
@@ -528,20 +562,31 @@ export default class Summary extends PureComponent {
528562
labelSelector={Summary.labelSelector}
529563
labelModifier={Summary.labelModifierSelector}
530564
colorScheme={donutColor}
531-
/>
565+
/> */}
532566
<ListView
533567
className={styles.table}
534568
data={educationValues}
535569
rendererParams={this.tableParams}
536570
keySelector={Summary.tableKeySelector}
537571
renderer={KeyValue}
538572
/>
573+
539574
</div>
540575
</div>
541576
<div className={styles.item}>
542577
<h3>Child Monitoring Status</h3>
543578
<div className={styles.itemTableViz}>
544-
<DonutChart
579+
<DonutChartRecharts
580+
donutChartHeight={donutChartHeight}
581+
data={childMonitoringVizDataWithName}
582+
colorScheme={[
583+
'#41cf76',
584+
'#ef8c00',
585+
'#f44336',
586+
]}
587+
donutChartWidth="50%"
588+
/>
589+
{/* <DonutChart
545590
className={styles.viz}
546591
data={childMonitoringVizData}
547592
hideLabel
@@ -554,7 +599,7 @@ export default class Summary extends PureComponent {
554599
'#ef8c00',
555600
'#f44336',
556601
]}
557-
/>
602+
/> */}
558603
<ListView
559604
className={styles.table}
560605
data={percentChild}

‎client/src/views/Dashboard/Summary/styles.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,15 @@
4141
border: var(--width-separator-thin) solid var(--color-separator);
4242
background-color: var(--color-foreground);
4343
width: calc(100% - 2 * var(--spacing-medium));
44+
padding-top: var(--spacing-medium);
4445

4546
h3 {
4647
padding: var(--spacing-small) var(--spacing-medium);
4748
text-transform: capitalize;
4849
color: var(--color-accent);
4950
font-weight: var(--font-weight-bold);
51+
text-align: center;
52+
margin-bottom: var(--spacing-medium);
5053
}
5154

5255
.date {
@@ -90,8 +93,7 @@
9093
}
9194

9295
.viz {
93-
margin-left: -var(--spacing-medium);
94-
width: 180px;
96+
flex-grow: 0;
9597
}
9698

9799
.success {

‎client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -439,7 +439,6 @@ class TrendSummary extends React.PureComponent {
439439
data={soiData}
440440
/>
441441
)}
442-
{console.log('soiData---', soiData)}
443442
{/* <GroupedBarChart
444443
data={soiData}
445444
groupSelector={groupSelector}

‎client/src/views/Report/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import {
3838
triColorScheme,
3939
} from './report-utils';
4040

41-
import DonutChartReCharts from './DonutChart';
41+
import DonutChartReCharts from '../CommonCharts/DonutChart';
4242
import HorizontalBarRecharts from './HorizontalBar';
4343
import GroupedBarChartRecharts from './GroupedBarChart';
4444

0 commit comments

Comments
 (0)