Commit c84765e6 authored by Oleksii Savran's avatar Oleksii Savran
Browse files

Add axis labels and text to PDCI graphs

PDCI stats fix
parent 7726267c
...@@ -1555,14 +1555,19 @@ ...@@ -1555,14 +1555,19 @@
"representedGenera": "Most represented Genera", "representedGenera": "Most represented Genera",
"representedSpecies": "Most represented Species", "representedSpecies": "Most represented Species",
"lastUpdates": "Last updates of passport data", "lastUpdates": "Last updates of passport data",
"PDCI": "PDCI: Passport data completeness index", "PDCI": "Passport Data Completeness Index (PDCI)",
"readPDCI": "Read about Passport Data Completeness Index", "readPDCI": "Read about Passport Data Completeness Index",
"pdciScore": "Average PDCI score for {{count, number}} accessions is {{avg, number}}, with minimum score of {{min, number}} and maximum score of {{max, number}}.", "pdciScore": "Average PDCI score for {{count, number}} accessions is {{avg, number}}, with minimum score of {{min, number}} and maximum score of {{max, number}}.",
"browseAccessions": "Browse accessions", "browseAccessions": "Browse accessions",
"browseFiles": "Browse files", "browseFiles": "Browse files",
"MCPD": "MCPD", "MCPD": "MCPD",
"PDCI_short": "PDCI", "PDCI_short": "PDCI",
"zip": "ZIP" "zip": "ZIP",
"pdciDescription1": "Genesys uses the PDCI as an indicator of the completeness of published passport data. The PDCI uses the presence or absence of data points in the documentation of a genebank accession, taking into account the presence or value of other data points ",
"pdciDescription2": ". For example, a wild accession should have a well-defined collection site but no variety name. The PDCI ranges from 0 to 10, where 0 is the minimum score assigned to rather incomplete passport records and 10 is the maximum score assigned to very complete passport records. Any type of accession, wild, landrace, breeding material or modern variety, can attain the PDCI’s maximal score.",
"pdciDescriptionLink": "(van Hintum et al. 2011)",
"pdciYLabel": "Number of passport records",
"pdciXLabel": "Passport Data Completeness Index (PDCI)"
} }
} }
}, },
......
...@@ -26,14 +26,19 @@ ...@@ -26,14 +26,19 @@
"representedGenera": "Most represented Genera", "representedGenera": "Most represented Genera",
"representedSpecies": "Most represented Species", "representedSpecies": "Most represented Species",
"lastUpdates": "Last updates of passport data", "lastUpdates": "Last updates of passport data",
"PDCI": "PDCI: Passport data completeness index", "PDCI": "Passport Data Completeness Index (PDCI)",
"readPDCI": "Read about Passport Data Completeness Index", "readPDCI": "Read about Passport Data Completeness Index",
"pdciScore": "Average PDCI score for {{count, number}} accessions is {{avg, number}}, with minimum score of {{min, number}} and maximum score of {{max, number}}.", "pdciScore": "Average PDCI score for {{count, number}} accessions is {{avg, number}}, with minimum score of {{min, number}} and maximum score of {{max, number}}.",
"browseAccessions": "Browse accessions", "browseAccessions": "Browse accessions",
"browseFiles": "Browse files", "browseFiles": "Browse files",
"MCPD": "MCPD", "MCPD": "MCPD",
"PDCI_short": "PDCI", "PDCI_short": "PDCI",
"zip": "ZIP" "zip": "ZIP",
"pdciDescription1": "Genesys uses the PDCI as an indicator of the completeness of published passport data. The PDCI uses the presence or absence of data points in the documentation of a genebank accession, taking into account the presence or value of other data points ",
"pdciDescription2": ". For example, a wild accession should have a well-defined collection site but no variety name. The PDCI ranges from 0 to 10, where 0 is the minimum score assigned to rather incomplete passport records and 10 is the maximum score assigned to very complete passport records. Any type of accession, wild, landrace, breeding material or modern variety, can attain the PDCI’s maximal score.",
"pdciDescriptionLink": "(van Hintum et al. 2011)",
"pdciYLabel": "Number of passport records",
"pdciXLabel": "Passport Data Completeness Index (PDCI)"
} }
} }
}, },
......
...@@ -39,7 +39,12 @@ import BlurbText from 'cms/ui/c/BlurbText'; ...@@ -39,7 +39,12 @@ import BlurbText from 'cms/ui/c/BlurbText';
const styles = (theme) => ({ const styles = (theme) => ({
italicProperties: { italicProperties: {
fontStyle: 'italic' as 'italic', fontStyle: 'italic' as 'italic',
} },
pdciSubHeader: {
fontSize: '1rem',
color: 'black',
marginTop: '15px',
},
}); });
/*tslint:enable*/ /*tslint:enable*/
...@@ -268,10 +273,31 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -268,10 +273,31 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
} }
{ institute.pdciStats && institute.pdciStats.histogram && institute.pdciStats.histogram.length > 0 && { institute.pdciStats && institute.pdciStats.histogram && institute.pdciStats.histogram.length > 0 &&
<PageSection title={ t('institutes.public.p.display.PDCI') }> <PageSection
<BarChart data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }/> title={ t('institutes.public.p.display.PDCI') }
<p className="mt-20">{ t('institutes.public.p.display.pdciScore', { count: institute.pdciStats.count, avg: institute.pdciStats.avg, min: institute.pdciStats.min, max: institute.pdciStats.max }) }</p> subheader={
<Link to="/content/passport-data-completeness-index">{ t('institutes.public.p.display.readPDCI') }</Link> <div className={ classes.pdciSubHeader }>
{ t('institutes.public.p.display.pdciDescription1') }
<a href="https://www.cambridge.org/core/journals/plant-genetic-resources/article/quality-indicators-for-passport-data-in-ex-situ-genebanks/AD391E5CF32DD41BFB49C1FE1D457E2C">
{ t('institutes.public.p.display.pdciDescriptionLink') }
</a>
{ t('institutes.public.p.display.pdciDescription2') }
</div>
}
>
<BarChart
data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }
yLabel={ t('institutes.public.p.display.pdciYLabel') }
xLabel={ t('institutes.public.p.display.pdciXLabel') }
/>
<div className="mt-20">
{ t('institutes.public.p.display.pdciScore', {
count: institute.pdciStats.count,
avg: institute.pdciStats.avg.toFixed(2),
min: institute.pdciStats.min.toFixed(2),
max: institute.pdciStats.max.toFixed(2),
}) }
</div>
</PageSection> </PageSection>
} }
</PageContents> </PageContents>
......
...@@ -9,19 +9,44 @@ const defaultChartColor = '#88ba42'; ...@@ -9,19 +9,44 @@ const defaultChartColor = '#88ba42';
const spacingQuota = 7; const spacingQuota = 7;
const style = (theme) => ({ const style = (theme) => ({
root: { flex: {
display: 'flex' as 'flex', display: 'flex' as 'flex',
direction: 'ltr' as 'ltr',
}, },
/*tslint:disable*/ /*tslint:disable*/
measureSection: { measureSection: {
'& > div': { '& > div': {
marginBottom: `calc(${measureMargin}px - 1em)`, marginBottom: `calc(${measureMargin}px - 1em)`,
} },
position: 'relative' as 'relative',
},
withAxes: {
paddingLeft: '25px',
},
yLabel: {
transform: 'rotate(270deg)',
transformOrigin: `${chartHeight / 2}px ${chartHeight / 2}px`,
position: 'absolute' as 'absolute',
whiteSpace: 'pre' as 'pre',
width: `${chartHeight}px`,
textAlign: 'center' as 'center',
left: 0,
}, },
xLabel: {
width: '100%',
textAlign: 'center' as 'center',
}
/*tslint:enable*/ /*tslint:enable*/
}); });
class BarChart extends React.Component<any> { interface IBarChartProps extends React.ClassAttributes<any> {
classes: any;
data: any[];
xLabel?: string;
yLabel?: string;
}
class BarChart extends React.Component<IBarChartProps, any> {
public state = { public state = {
measures: [], measures: [],
...@@ -71,7 +96,7 @@ class BarChart extends React.Component<any> { ...@@ -71,7 +96,7 @@ class BarChart extends React.Component<any> {
public render() { public render() {
this.getMeasures(); this.getMeasures();
const {data, classes} = this.props; const {data, classes, xLabel, yLabel} = this.props;
const {measures} = this.state; const {measures} = this.state;
if (!data || data.length === 0) { if (!data || data.length === 0) {
...@@ -79,16 +104,28 @@ class BarChart extends React.Component<any> { ...@@ -79,16 +104,28 @@ class BarChart extends React.Component<any> {
} }
return ( return (
<div className={ classes.root }> <div>
<div className={ classes.measureSection }> <div className={ classes.flex }>
<div>{ measures[0] }</div> <div className={ `${classes.measureSection} ${yLabel ? classes.withAxes : ''}` }>
<div>{ measures[1] }</div> { yLabel &&
<div>{ measures[2] }</div> <div className={ classes.yLabel }>
<div>{ measures[3] }</div> { yLabel }
</div>
}
<div>{ measures[0] }</div>
<div>{ measures[1] }</div>
<div>{ measures[2] }</div>
<div>{ measures[3] }</div>
</div>
<BarGrid>
{ data.map((item, i) => (this.renderBar(item, i, data.length))) }
</BarGrid>
</div> </div>
<BarGrid> { xLabel &&
{ data.map((item, i) => (this.renderBar(item, i, data.length))) } <div className={ classes.xLabel }>
</BarGrid> { xLabel }
</div>
}
</div> </div>
); );
......
...@@ -91,9 +91,9 @@ const Section1 = ({classes, className = '', title, children = null}) => children ...@@ -91,9 +91,9 @@ const Section1 = ({classes, className = '', title, children = null}) => children
</Card> </Card>
); );
const Section2 = ({classes, title, action = null, children = null}) => children && ( const Section2 = ({classes, title, action = null, children = null, subheader = null}) => children && (
<Card className={ classes.section }> <Card className={ classes.section }>
<CardHeader classes={ { title: classes.sectionTitle, action: classes.sectionAction } } title={ title } action={ action } /> <CardHeader classes={ { title: classes.sectionTitle, action: classes.sectionAction } } title={ title } action={ action } subheader={ subheader }/>
<CardContent>{ children }</CardContent> <CardContent>{ children }</CardContent>
</Card> </Card>
); );
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment