PrecipitationChart.tsx 1.38 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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);