TemperatureChart.tsx 1.83 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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);