Merge branch '254-add-axis-labels-and-text-to-pdci-graphs' into 'master'

Add axis labels and text to PDCI graphs

Closes #254

See merge request genesys-pgr/genesys-ui!267

locales/en/translations.json

@@ -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)"
         }
       }
     },

src/institutes/translations.json

@@ -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)"
       }
     }
   },

src/institutes/ui/DisplayPage.tsx

@@ -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>

src/ui/common/bar-chart/index.tsx

@@ -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>
     );
 

src/ui/layout/PageLayout.tsx

@@ -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>
 );