Commit c84765e6 authored by Oleksii Savran's avatar Oleksii Savran

Add axis labels and text to PDCI graphs

PDCI stats fix
parent 7726267c
......@@ -1555,14 +1555,19 @@
"representedGenera": "Most represented Genera",
"representedSpecies": "Most represented Species",
"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",
"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",
"browseFiles": "Browse files",
"MCPD": "MCPD",
"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 @@
"representedGenera": "Most represented Genera",
"representedSpecies": "Most represented Species",
"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",
"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",
"browseFiles": "Browse files",
"MCPD": "MCPD",
"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';
const styles = (theme) => ({
italicProperties: {
fontStyle: 'italic' as 'italic',
}
},
pdciSubHeader: {
fontSize: '1rem',
color: 'black',
marginTop: '15px',
},
});
/*tslint:enable*/
......@@ -268,10 +273,31 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
{ institute.pdciStats && institute.pdciStats.histogram && institute.pdciStats.histogram.length > 0 &&
<PageSection title={ t('institutes.public.p.display.PDCI') }>
<BarChart data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }/>
<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>
<Link to="/content/passport-data-completeness-index">{ t('institutes.public.p.display.readPDCI') }</Link>
<PageSection
title={ t('institutes.public.p.display.PDCI') }
subheader={
<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>
}
</PageContents>
......
......@@ -9,19 +9,44 @@ const defaultChartColor = '#88ba42';
const spacingQuota = 7;
const style = (theme) => ({
root: {
flex: {
display: 'flex' as 'flex',
direction: 'ltr' as 'ltr',
},
/*tslint:disable*/
measureSection: {
'& > div': {
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*/
});
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 = {
measures: [],
......@@ -71,7 +96,7 @@ class BarChart extends React.Component<any> {
public render() {
this.getMeasures();
const {data, classes} = this.props;
const {data, classes, xLabel, yLabel} = this.props;
const {measures} = this.state;
if (!data || data.length === 0) {
......@@ -79,16 +104,28 @@ class BarChart extends React.Component<any> {
}
return (
<div className={ classes.root }>
<div className={ classes.measureSection }>
<div>{ measures[0] }</div>
<div>{ measures[1] }</div>
<div>{ measures[2] }</div>
<div>{ measures[3] }</div>
<div>
<div className={ classes.flex }>
<div className={ `${classes.measureSection} ${yLabel ? classes.withAxes : ''}` }>
{ yLabel &&
<div className={ classes.yLabel }>
{ 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>
<BarGrid>
{ data.map((item, i) => (this.renderBar(item, i, data.length))) }
</BarGrid>
{ xLabel &&
<div className={ classes.xLabel }>
{ xLabel }
</div>
}
</div>
);
......
......@@ -91,9 +91,9 @@ const Section1 = ({classes, className = '', title, children = null}) => children
</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 }>
<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>
</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