Skip to content
GitLab
Commit 12fc4c41 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Climate at origin site 

- several style fixes
- added labels and more entries to charts, few translations fixes
parent 9d485c9f
Hide whitespace changes
Inline Side-by-side
locales/en/translations.json
View file @ 12fc4c41
......@@ -392,7 +392,9 @@
"relatedResources": "Related resources",
"imageGallery": "Image gallery",
"MCPD": "MCPD",
"zip": "ZIP"
"zip": "ZIP",
"climateAtCollection": "Climate at origin",
"additionalInfo": "Bioclimatic variables"
},
"browse": {
"title": "Accession browser",
......@@ -429,7 +431,33 @@
"bio16": "Precipitation of Wettest Quarter [mm]",
"bio17": "Precipitation of Driest Quarter [mm]",
"bio18": "Precipitation of Warmest Quarter [mm]",
"bio19": "Precipitation of Coldest Quarter [mm]"
"bio19": "Precipitation of Coldest Quarter [mm]",
"monthlyPrecipitation": "Monthly precipitation",
"precipitation": "Precipitation",
"monthlyTemp": "Monthly temperature",
"tMin": "Minimal temperature",
"tMean": "Mean temperature",
"tMax": "Maximal temperature",
"label": {
"prec": "Monthly precipitation [mm]",
"tmin": "Minimum temperature [°C]",
"tmean": "Mean temperature [°C]",
"tmax": "Maximum temperature [°C]"
},
"month": {
"1": "Jan",
"2": "Feb",
"3": "Mar",
"4": "Apr",
"5": "May",
"6": "Jun",
"7": "Jul",
"8": "Aug",
"9": "Sep",
"10": "Oct",
"11": "Nov",
"12": "Dec"
}
},
"common": {
"modelName": "Accession",
......
package-lock.json
View file @ 12fc4c41
......@@ -2602,6 +2602,44 @@
"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz",
"integrity": "sha1-lCg191Dk7GGjCOYMLvjMEBEgLvw="
},
"chart.js": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
"integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
"requires": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"chartjs-color": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
"integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
"requires": {
"chartjs-color-string": "^0.5.0",
"color-convert": "^0.5.3"
},
"dependencies": {
"color-convert": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
}
}
},
"chartjs-color-string": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
"integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
"requires": {
"color-name": "^1.0.0"
}
},
"chartkick": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/chartkick/-/chartkick-3.0.2.tgz",
"integrity": "sha512-EJmf7ikPKisW0/naKckCKXq1DW+K5VeCOpqXtWqsCauR+3DhnK/xV1/PEtJovCxH3vPuo/aUU7GwirU6FzBxdw=="
},
"chokidar": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
......@@ -2900,8 +2938,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "0.3.0",
......@@ -13180,6 +13217,14 @@
"section-iterator": "^2.0.0"
}
},
"react-chartkick": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/react-chartkick/-/react-chartkick-0.3.0.tgz",
"integrity": "sha512-ZA0X8XUCPhEN/xbsLR+Xrs3hGpHCBscZZR7uwVCNDQWiEceKkTNY9W2ET8sx1beY2x0ixvNtBoc31InGfFIdQg==",
"requires": {
"chartkick": "^3.0.0"
}
},
"react-ckeditor-component": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/react-ckeditor-component/-/react-ckeditor-component-1.1.0.tgz",
......
src/accessions/translations.json
View file @ 12fc4c41
......@@ -57,7 +57,9 @@
"relatedResources": "Related resources",
"imageGallery": "Image gallery",
"MCPD": "MCPD",
"zip": "ZIP"
"zip": "ZIP",
"climateAtCollection": "Climate at origin",
"additionalInfo": "Bioclimatic variables"
},
"browse": {
"title": "Accession browser",
......@@ -94,7 +96,33 @@
"bio16": "Precipitation of Wettest Quarter [mm]",
"bio17": "Precipitation of Driest Quarter [mm]",
"bio18": "Precipitation of Warmest Quarter [mm]",
"bio19": "Precipitation of Coldest Quarter [mm]"
"bio19": "Precipitation of Coldest Quarter [mm]",
"monthlyPrecipitation": "Monthly precipitation",
"precipitation": "Precipitation",
"monthlyTemp": "Monthly temperature",
"tMin": "Minimal temperature",
"tMean": "Mean temperature",
"tMax": "Maximal temperature",
"label": {
"prec": "Monthly precipitation [mm]",
"tmin": "Minimum temperature [°C]",
"tmean": "Mean temperature [°C]",
"tmax": "Maximum temperature [°C]"
},
"month": {
"1": "Jan",
"2": "Feb",
"3": "Mar",
"4": "Apr",
"5": "May",
"6": "Jun",
"7": "Jul",
"8": "Aug",
"9": "Sep",
"10": "Oct",
"11": "Nov",
"12": "Dec"
}
},
"common": {
"modelName": "Accession",
......
src/accessions/ui/DisplayPage.tsx
View file @ 12fc4c41
......@@ -38,6 +38,9 @@ import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
import Button from '@material-ui/core/Button/Button';
import AuditedInfo from 'ui/common/AuditedInfo';
import Authorize from 'ui/common/authorized/Authorize';
import TemperatureChart from './c/TemperatureChart';
import PrecipitationChart from './c/PrecipitationChart';
import ClimateTable from './c/ClimateTable';
const styles = (theme) => ({
pageSection: {
......@@ -322,6 +325,30 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</PageSection>
}
{ accession.geo && accession.geo.climate &&
<PageSection title={ t('accessions.public.p.display.climateAtCollection') }>
<GridContainer className="container-spacing-vertical">
<TemperatureChart halfWidth climate={ accession.geo.climate }/>
<PrecipitationChart halfWidth climate={ accession.geo.climate }/>
</GridContainer>
<div>
<ClimateTable climate={ accession.geo.climate }/>
</div>
</PageSection>
}
{ accession.geo && accession.geo.climate &&
<PageSection title={ t('accessions.public.p.display.additionalInfo') }>
<Properties>
{ [...Array(19).keys()].map((i) => (
<PropertiesItem md numeric key={ `month-${i}` } title={ t(`accessions.climate.bio${i + 1}`) }>
{ accession.geo.climate[`bio${i + 1}`] && Number(accession.geo.climate[`bio${i + 1}`]).toFixed(1) }
</PropertiesItem>
)) }
</Properties>
</PageSection>
}
{ accession.remarks && accession.remarks.length > 0 && <PageSection title={ t('accessions.public.p.display.remarks') }>
<Properties>
{ accession.remarks && accession.remarks.map((remark) => (
......
src/accessions/ui/c/ClimateTable.tsx 0 → 100644
View file @ 12fc4c41
import * as React from 'react';
import { translate } from 'react-i18next';
import Table from '@material-ui/core/Table';
import { TableHead } from '@material-ui/core';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import TableBody from '@material-ui/core/TableBody';
const climateKeys = ['tmin', 'tmean', 'tmax', 'prec'];
const ClimateTable = ({ climate, t }) => {
return (
<Table padding="none">
<TableHead>
<TableRow>
<TableCell/>
{ [...Array(12).keys()].map((i) => <TableCell key={ `month-${i}` }><b>{ t(`accessions.climate.month.${i + 1}`) }</b></TableCell>) }
</TableRow>
</TableHead>
<TableBody>
{ climateKeys.map((key) => (
<TableRow key={ key }>
<TableCell>{ t(`accessions.climate.label.${key}`) }</TableCell>
{ [...Array(12).keys()].map((i) => <TableCell key={ `${key}-${i}` }>{ climate[`${key}${i + 1}`] ? Number(climate[`${key}${i + 1}`]).toFixed(1) : '—' }</TableCell>) }
</TableRow>
)) }
</TableBody>
</Table>
);
};
export default translate()(ClimateTable);
src/accessions/ui/c/PrecipitationChart.tsx 0 → 100644
View file @ 12fc4c41
import * as React from 'react';
import { translate } from 'react-i18next';
import { ColumnChart } from 'react-chartkick';
import { Grid } from '@material-ui/core';
require('chart.js');
const chartColor = '#8888ee';
const PrecipitationChart = ({ halfWidth = false, climate, t }) => {
const precipitation = {
name: t('accessions.climate.precipitation'),
data: {},
color: chartColor,
};
for (let i = 1; i <= 12; i++) {
precipitation.data[t(`accessions.climate.month.${ i }`)] = climate[`prec${ i }`];
}
const maxValue = Math.max(...Object.keys(precipitation.data).map((key) => precipitation.data[key]));
const minValue = Math.min(...Object.keys(precipitation.data).map((key) => precipitation.data[key]));
const stepAmounts = 5;
const stepSize = Math.round((maxValue - minValue) / stepAmounts);
const chartOptions = {
scales: {
yAxes: [{
ticks: {
max: Math.round(maxValue + stepSize),
min: Math.round(minValue - stepSize),
stepSize,
},
}],
},
};
return (
<Grid item lg={ halfWidth ? 6 : 12 } md={ 12 }>
<div className="mb-15">
<h3 className="pt-5 ml-20"><b>{ t('accessions.climate.monthlyPrecipitation') }</b></h3>
<ColumnChart library={ chartOptions } suffix=" mm" data={ [precipitation] }/>
</div>
</Grid>
);
};
export default translate()(PrecipitationChart);
src/accessions/ui/c/TemperatureChart.tsx 0 → 100644
View file @ 12fc4c41
import * as React from 'react';
import { translate } from 'react-i18next';
import { AreaChart } from 'react-chartkick';
import { Grid } from '@material-ui/core';
require('chart.js');
const chartColor = '#ee8888';
const TemperatureChart = ({ halfWidth = false, climate, t }) => {
const minData = {
name: t('accessions.climate.tMin'),
data: {},
dataset: { fill: '+1', pointRadius: 0, borderColor: '#fff0' },
color: chartColor,
};
const meanData = {
name: t('accessions.climate.tMean'),
data: {},
dataset: { fill: false, pointRadius: 0 },
color: chartColor,
};
const maxData = {
name: t('accessions.climate.tMax'),
data: {},
dataset: { fill: '-1', pointRadius: 0, borderColor: '#fff0' },
color: chartColor,
};
for (let i = 1; i <= 12; i++) {
minData.data[t(`accessions.climate.month.${ i }`)] = climate[`tmin${ i }`];
meanData.data[t(`accessions.climate.month.${ i }`)] = climate[`tmean${ i }`];
maxData.data[t(`accessions.climate.month.${ i }`)] = climate[`tmax${ i }`];
}
const maxValue = Math.max(...Object.keys(maxData.data).map((key) => maxData.data[key]));
const minValue = Math.min(...Object.keys(minData.data).map((key) => minData.data[key]));
const stepAmounts = 5;
const stepSize = Math.round((maxValue - minValue) / stepAmounts);
const chartOptions = {
scales: {
yAxes: [{
ticks: {
max: Math.round(maxValue + stepSize),
min: 0,
stepSize,
},
}],
},
};
return (
<Grid item lg={ halfWidth ? 6 : 12 } md={ 12 }>
<div className="mb-15">
<h3 className="pt-5 ml-20"><b>{ t('accessions.climate.monthlyTemp') }</b></h3>
<AreaChart library={ chartOptions } suffix="°C" data={ [minData, meanData, maxData] }/>
</div>
</Grid>
);
};
export default translate()(TemperatureChart);
src/ui/common/Properties.tsx
View file @ 12fc4c41
......@@ -53,6 +53,7 @@ interface IItemProps extends React.ClassAttributes<any> {
// classes: any;
title?: any;
small?: boolean;
md?: boolean;
keepEmpty?: boolean;
numeric?: boolean;
t: any;
......@@ -64,20 +65,20 @@ interface IItemProps extends React.ClassAttributes<any> {
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
public render() {
const { keepEmpty, small, numeric, title, classes, className, children, t, style } = this.props;
const { keepEmpty, small, md, numeric, title, classes, className, children, t, style } = this.props;
if (!keepEmpty && ! children) {
return null;
}
const hasTitle: boolean = title !== null && title;
return (
<Grid item xs={ 12 } md={ small ? 3 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` }>
<Grid item xs={ 12 } md={ small ? 3 : md ? 6 : 12 } lg={ md ? 4 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` }>
<Grid container style={ small ? {height: '100%' } : {} } spacing={ 0 }>
{ hasTitle && (
<Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
<Grid item xs={ (small || md) && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 10 : 4) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
{ title && typeof title === 'string' ? t(title) : title }
</Grid>
) }
<Grid item xs={ !hasTitle ? 12 : small && numeric ? 4 : 6 } md={ !hasTitle ? 12 : small ? 12 : (numeric ? 3 : 9) } style={ style }
<Grid item xs={ !hasTitle ? 12 : (small || md) && numeric ? 4 : 6 } md={ !hasTitle ? 12 : small ? 12 : (numeric ? 2 : 8) } style={ style }
className={ style ? `${style}` : `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
{ children }
</Grid>
......
Supports Markdown
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