Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/layout changes #82

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { isNotDefined } from '@togglecorp/fujs';

import {
PieChart,
Expand All @@ -15,7 +16,7 @@ const CustomTooltip = ({ active, payload }) => {
if (!active) {
return null;
}
if (payload.length <= 0) {
if (isNotDefined(payload) || payload.length <= 0) {
return null;
}

Expand Down Expand Up @@ -43,9 +44,12 @@ export default function DonutChart(props) {
const {
data,
colorScheme,
donutChartHeight,
donutChartWidth,
} = props;

if (data.length <= 0) {

if (isNotDefined(data) || data.length <= 0) {
return (
<div>
Nothings to show.
Expand All @@ -56,22 +60,24 @@ export default function DonutChart(props) {
return (
<div
style={{
width: '100%',
height: 180,
width: donutChartWidth,
height: donutChartHeight,
marginBottom: 12,
}}
>
<ResponsiveContainer>
<PieChart>
<Pie
data={data}
innerRadius={65}
outerRadius={85}
innerRadius={donutChartHeight / 2.75}
outerRadius={donutChartHeight / 2}
dataKey="value"
>
{data.map((d, index) => (
<Cell
key={d.key}
fill={colorScheme[index]}
className={styles.cell}
/>
))}
</Pie>
Expand All @@ -82,7 +88,14 @@ export default function DonutChart(props) {
);
}

DonutChart.defaultProps = {
donutChartHeight: 180,
donutChartWidth: '100%',
};

DonutChart.propTypes = {
donutChartHeight: PropTypes.number,
donutChartWidth: PropTypes.string,
data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
colorScheme: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
};
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,7 @@
margin-bottom: 0;
font-size: var(--font-size-super-large);
}

.cell {
cursor: pointer;
}
83 changes: 83 additions & 0 deletions client/src/views/Dashboard/GroupedBarChart/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react';
import PropTypes from 'prop-types';
import { isNotDefined } from '@togglecorp/fujs';

import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
Legend,
ResponsiveContainer,
ComposedChart,
Line,
} from 'recharts';

function CustomizedLabel(props) {
const { x, y, width, value } = props;
return (
<text
x={x + width / 3}
y={y}
dy={-8}
fontSize={10}
>
{value}
</text>
);
}

export default function GroupedBarChart(props) {
const {
data,
lineKey,
} = props;

if (isNotDefined(data) || isNotDefined(data.values) || data.values.length <= 0) {
return (
<div>Nothing to show</div>
);
}

return (
<ResponsiveContainer
height={250}
width="100%"
>
<ComposedChart
data={data.values}
margin={{ top: 50 }}
>
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Legend align="center" />
{data.columns.map(column => (
<Bar
dataKey={column}
key={column}
fill={data.colors[column]}
label={<CustomizedLabel />}
style={{ cursor: 'pointer' }}
/>
))}
{!!lineKey && (
<Line
dataKey={lineKey}
stroke="#0591fb"
/>
)}
</ComposedChart>
</ResponsiveContainer>
);
}

GroupedBarChart.defaultProps = {
lineKey: '',
};

GroupedBarChart.propTypes = {
data: PropTypes.object.isRequired,
lineKey: PropTypes.string,
};
63 changes: 54 additions & 9 deletions client/src/views/Dashboard/Summary/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import LanguagePeopleGroupDisability from '#components/LanguagePeopleGroupDisabi

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

import DonutChartRecharts from '../../CommonCharts/DonutChart';

import styles from './styles.scss';

const propTypes = {
Expand All @@ -40,6 +42,8 @@ const defaultProps = {
const droppedKey = 'total_no_of_rc_records_dropped_during_the_month';
const rcAwayKey = 'total_rc_temporarily_away';

const donutChartHeight = 120;

const ageKeyMap = {
'<=6': '0 - 6',
'7-12': '7 - 12',
Expand Down Expand Up @@ -70,6 +74,7 @@ const legendColorSelector = d => d.color;

const donutColor = ['#41cf76', '#f44336'];
const soiColorScheme = ['#ef5350', '#fff176', '#81c784'];

const sectionPercents = [0.75, 0.1, 0.15];

const mvcIndicatorKeySelector = d => d.label;
Expand Down Expand Up @@ -366,7 +371,7 @@ export default class Summary extends PureComponent {
};

const primaryUneducated = {
key: 'PrimaryUnEducated',
key: 'PrimaryUneducated',
value: this.getValueFromMap(educationMap, '@PrimarySchoolAgeNoEducation') || 0,
label: 'Primary School Age RC Not Involved in Education',
};
Expand Down Expand Up @@ -397,7 +402,7 @@ export default class Summary extends PureComponent {

const educated = education.filter(values => (
values.key === 'PrimaryEducated'
|| values.key === 'SecondaryEducated'
|| values.key === 'SecondaryEducated'
)).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
value: 0,
key: 'educated',
Expand All @@ -406,7 +411,7 @@ export default class Summary extends PureComponent {

const uneducated = education.filter(values => (
values.key === '@SecondarySchoolAgeNoEducation'
|| values.key === '@PrimarySchoolAgeNoEducation'
|| values.key === '@PrimarySchoolAgeNoEducation'
)).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
value: 0,
key: 'uneducated',
Expand Down Expand Up @@ -635,6 +640,18 @@ export default class Summary extends PureComponent {
].filter(v => v.value);
})

getDonutDataWithName = memoize((donutData) => {
if (isFalsy(donutData)) {
return [];
}

const dataWithName = donutData.map(data => ({
...data,
name: data.label,
}));
return dataWithName;
});

render() {
const {
className,
Expand Down Expand Up @@ -682,6 +699,10 @@ export default class Summary extends PureComponent {
mostVulnerableChildrenVulnerabilityMarker,
);

const healthNutritionWithName = this.getDonutDataWithName(healthNutrition);
const educationInvolvementWithName = this.getDonutDataWithName(educationInvolvement);
const childMonitoringVizDataWithName = this.getDonutDataWithName(childMonitoringVizData);
Comment on lines +702 to +704
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling the same memoized function with three different values consecutively results in cache miss every time.


const infoText = `The data below is
aggregated from sponsorship
management report from ${noOfProjects}
Expand Down Expand Up @@ -717,7 +738,14 @@ export default class Summary extends PureComponent {
<div className={styles.item}>
<h3>Health / Nutrition</h3>
<div className={styles.itemTableViz}>
<DonutChart
<DonutChartRecharts
donutChartHeight={donutChartHeight}
data={healthNutritionWithName}
colorScheme={donutColor}
className={styles.viz}
donutChartWidth="50%"
/>
{/* <DonutChart
className={styles.viz}
data={healthNutrition}
sideLengthRatio={0.2}
Expand All @@ -726,7 +754,7 @@ export default class Summary extends PureComponent {
labelSelector={Summary.labelSelector}
labelModifier={Summary.labelModifierSelector}
colorScheme={donutColor}
/>
/> */}
<ListView
className={styles.table}
data={percentHealth}
Expand All @@ -739,7 +767,13 @@ export default class Summary extends PureComponent {
<div className={styles.item}>
<h3>Education</h3>
<div className={styles.itemTableViz}>
<DonutChart
<DonutChartRecharts
donutChartHeight={donutChartHeight}
data={educationInvolvementWithName}
colorScheme={donutColor}
donutChartWidth="50%"
/>
{/* <DonutChart
className={styles.viz}
data={educationInvolvement}
sideLengthRatio={0.2}
Expand All @@ -748,20 +782,31 @@ export default class Summary extends PureComponent {
labelSelector={Summary.labelSelector}
labelModifier={Summary.labelModifierSelector}
colorScheme={donutColor}
/>
/> */}
<ListView
className={styles.table}
data={educationValues}
rendererParams={this.tableParams}
keySelector={Summary.tableKeySelector}
renderer={KeyValue}
/>

</div>
</div>
<div className={styles.item}>
<h3>Child Monitoring Status</h3>
<div className={styles.itemTableViz}>
<DonutChart
<DonutChartRecharts
donutChartHeight={donutChartHeight}
data={childMonitoringVizDataWithName}
colorScheme={[
'#41cf76',
'#ef8c00',
'#f44336',
]}
donutChartWidth="50%"
/>
{/* <DonutChart
className={styles.viz}
data={childMonitoringVizData}
hideLabel
Expand All @@ -774,7 +819,7 @@ export default class Summary extends PureComponent {
'#ef8c00',
'#f44336',
]}
/>
/> */}
<ListView
className={styles.table}
data={percentChild}
Expand Down
6 changes: 4 additions & 2 deletions client/src/views/Dashboard/Summary/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,15 @@
border: var(--width-separator-thin) solid var(--color-separator);
background-color: var(--color-foreground);
width: calc(100% - 2 * var(--spacing-medium));
padding-top: var(--spacing-medium);

h3 {
padding: var(--spacing-small) var(--spacing-medium);
text-transform: capitalize;
color: var(--color-accent);
font-weight: var(--font-weight-bold);
text-align: center;
margin-bottom: var(--spacing-medium);
}

.date {
Expand Down Expand Up @@ -90,8 +93,7 @@
}

.viz {
margin-left: -var(--spacing-medium);
width: 180px;
flex-grow: 0;
}

.success {
Expand Down
Loading