63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
import React, {useEffect} from 'react';
|
|
import {useTranslation} from "react-i18next";
|
|
import {useTheme} from "../../hooks/themeHook";
|
|
import {withReducedSaturation} from "../../util/colors";
|
|
import Accessibility from "highcharts/modules/accessibility";
|
|
import Highcharts from "highcharts";
|
|
|
|
const GroupPie = ({id, groups, colors, 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 series = groups.map(group => {
|
|
return {name: t(group.name), y: group.y}
|
|
});
|
|
const pieSeries = {
|
|
name: name,
|
|
colorByPoint: true,
|
|
colors: getColors(),
|
|
data: series
|
|
};
|
|
|
|
Accessibility(Highcharts);
|
|
Highcharts.setOptions(graphTheming);
|
|
Highcharts.chart(id, {
|
|
chart: {
|
|
noData: t('html.label.noDataToDisplay'),
|
|
backgroundColor: 'transparent',
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
type: 'pie'
|
|
},
|
|
title: {text: ''},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
showInLegend: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
formatter: function () {
|
|
return '<b>' + this.point.name + ':</b> ' + this.y;
|
|
}
|
|
},
|
|
series: [pieSeries]
|
|
});
|
|
}, [id, colors, groups, name, graphTheming, nightModeEnabled, t]);
|
|
|
|
return (<div className="chart-area" id={id}/>);
|
|
};
|
|
|
|
export default GroupPie; |