text: import React from 'react';
  import { useIntl } from 'react-intl';
  import CheckVisible from 'components/helpers/CheckVisible';
  import BarChart from './BarChart';
  
  export default function PageviewsChart({ websiteId, data, unit, records, className }) {
    const intl = useIntl();
  
    const handleUpdate = chart => {
      const {
        data: { datasets },
      } = chart;
  
      datasets[0].data = data.uniques;
      datasets[1].data = data.pageviews;
  
      chart.update();
    };
  
    if (!data) {
      return null;
    }
  
    return (
      <CheckVisible>
        {visible => (
          <BarChart
            className={className}
            chartId={websiteId}
            datasets={[
              {
                label: intl.formatMessage({
                  id: 'metrics.unique-visitors',
                  defaultMessage: 'Unique visitors',
                }),
                data: data.uniques,
                lineTension: 0,
                backgroundColor: 'rgb(38, 128, 235, 0.4)',
                borderColor: 'rgb(13, 102, 208, 0.4)',
                borderWidth: 1,
              },
              {
                label: intl.formatMessage({
                  id: 'metrics.page-views',
                  defaultMessage: 'Page views',
                }),
                data: data.pageviews,
                lineTension: 0,
                backgroundColor: 'rgb(38, 128, 235, 0.2)',
                borderColor: 'rgb(13, 102, 208, 0.2)',
                borderWidth: 1,
              },
            ]}
            unit={unit}
            records={records}
            animationDuration={visible ? 300 : 0}
            onUpdate={handleUpdate}
          />
        )}
      </CheckVisible>
    );
  }
  