59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import React, {useEffect} from 'react';
|
|
import {useTranslation} from "react-i18next";
|
|
import {useTheme} from "../../hooks/themeHook";
|
|
import {withReducedSaturation} from "../../util/colors";
|
|
import Highcharts from "highcharts";
|
|
import Accessibility from "highcharts/modules/accessibility";
|
|
|
|
const GroupBarGraph = ({id, groups, colors, horizontal, name}) => {
|
|
const {t} = useTranslation();
|
|
const {nightModeEnabled, graphTheming} = useTheme();
|
|
|
|
useEffect(() => {
|
|
const reduceColors = (colorsToReduce) => colorsToReduce.map(color => withReducedSaturation(color));
|
|
|
|
function getColors() {
|
|
const actualColors = colors ? colors : groups.map(group => group.color);
|
|
return nightModeEnabled ? reduceColors(actualColors) : actualColors;
|
|
}
|
|
|
|
const bars = groups.map(group => group.y);
|
|
const categories = groups.map(group => t(group.name));
|
|
const barSeries = {
|
|
name: name,
|
|
colorByPoint: true,
|
|
data: bars,
|
|
colors: getColors()
|
|
};
|
|
|
|
Accessibility(Highcharts);
|
|
Highcharts.setOptions(graphTheming);
|
|
Highcharts.chart(id, {
|
|
chart: {
|
|
noData: t('html.label.noDataToDisplay'),
|
|
type: horizontal ? 'bar' : 'column'
|
|
},
|
|
title: {text: ''},
|
|
xAxis: {
|
|
categories: categories,
|
|
title: {text: ''}
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
title: {text: '', align: 'high'},
|
|
labels: {overflow: 'justify'}
|
|
},
|
|
legend: {enabled: false},
|
|
plotOptions: {
|
|
bar: {
|
|
dataLabels: {enabled: true}
|
|
}
|
|
},
|
|
series: [barSeries]
|
|
})
|
|
}, [id, groups, colors, horizontal, name, graphTheming, nightModeEnabled, t]);
|
|
|
|
return (<div id={id} className="chart-area"/>);
|
|
};
|
|
|
|
export default GroupBarGraph |