89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
import React, {useEffect} from "react";
|
|
import Highcharts from 'highcharts';
|
|
import factory from 'highcharts/modules/drilldown';
|
|
|
|
import {formatTimeAmount} from '../../util/formatters'
|
|
import {useTheme} from "../../hooks/themeHook";
|
|
import {withReducedSaturation} from "../../util/colors";
|
|
import {useMetadata} from "../../hooks/metadataHook";
|
|
import {useTranslation} from "react-i18next";
|
|
import Accessibility from "highcharts/modules/accessibility";
|
|
|
|
const WorldPie = ({id, worldSeries, gmSeries}) => {
|
|
const {t} = useTranslation();
|
|
const {gmPieColors} = useMetadata();
|
|
|
|
useEffect(() => {
|
|
factory(Highcharts)
|
|
}, []);
|
|
|
|
const {nightModeEnabled, graphTheming} = useTheme();
|
|
|
|
useEffect(() => {
|
|
const reduceColors = (series) => {
|
|
return series.map(slice => {
|
|
return {...slice, color: withReducedSaturation(slice.color)};
|
|
})
|
|
}
|
|
|
|
const pieSeries = {
|
|
name: t('html.label.worldPlaytime'),
|
|
colorByPoint: true,
|
|
data: nightModeEnabled ? reduceColors(worldSeries) : worldSeries
|
|
};
|
|
|
|
const defaultTitle = '';
|
|
const defaultSubtitle = t('html.text.clickToExpand');
|
|
Accessibility(Highcharts);
|
|
Highcharts.setOptions(graphTheming);
|
|
setTimeout(() => {
|
|
const chart = Highcharts.chart(id, {
|
|
chart: {
|
|
noData: t('html.label.noDataToDisplay'),
|
|
backgroundColor: 'transparent',
|
|
plotBackgroundColor: 'transparent',
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
type: 'pie',
|
|
events: {
|
|
drilldown: function (e) {
|
|
chart.setTitle({text: '' + e.point.name}, {text: ''});
|
|
},
|
|
drillup: function () {
|
|
chart.setTitle({text: defaultTitle}, {text: defaultSubtitle});
|
|
}
|
|
}
|
|
},
|
|
title: {text: defaultTitle},
|
|
subtitle: {
|
|
text: defaultSubtitle
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
showInLegend: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
formatter: function () {
|
|
return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';
|
|
}
|
|
},
|
|
series: [pieSeries],
|
|
drilldown: {
|
|
series: gmSeries.map(function (d) {
|
|
return {name: d.name, id: d.id, colors: gmPieColors, data: d.data}
|
|
})
|
|
}
|
|
});
|
|
}, 25)
|
|
}, [worldSeries, gmSeries, graphTheming, nightModeEnabled, id, gmPieColors, t]);
|
|
|
|
return (<div className="chart-pie" id={id}/>)
|
|
}
|
|
|
|
export default WorldPie; |