import React from 'react';
import { Theme, withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import cyan from '@material-ui/core/colors/cyan';
import { Doughnut } from 'react-chartjs-2';
import 'chartjs-plugin-labels';
import Color from 'color';
import { defaultChartColor } from './theme';
import { PatternGraphData } from './graph';
const styles = (theme: Theme) => ({
pieChart: {
margin: '0 auto',
}
});
type PatternPieChartProps = {
classes: {
patternTableWrapper: string,
pieChart: string
},
height?: number | string,
data: PatternGraphData[],
borderWidth: number,
labelFontSize : number,
paddingTop: number,
paddingBottom: number,
paddingLeft: number,
paddingRight: number,
};
export class PatternPieChart extends React.Component<PatternPieChartProps> {
public static defaultProps = {
borderWidth: 1,
labelFontSize: 12,
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
};
render() {
let { height, data, labelFontSize } = this.props;
const theme = {
labels: {
text: {
fontSize: labelFontSize
}
}
};
const colors = data.map(p => p.color ? p.color: defaultChartColor);
return (
<Doughnut data={(canvas: any) => {
return {
datasets: [{
data: data.map(p => p.value),
backgroundColor: colors,
borderWidth: data.map(() => this.props.borderWidth),
hoverBorderWidth: data.map(() => this.props.borderWidth),
hoverBorderColor: colors.map(c => Color(c).darken(0.2).string())
}],
labels: data.map(p => p.name)
};
}} options={{
tooltips: {
callbacks: {
label: (item: any, data: any) => (
`${data.labels[item.index]}: ` +
`${data.datasets[item.datasetIndex].data[item.index].toFixed(2)} hr`
)
}
},
plugins: {
labels: {
render: (args: any) => `${args.value.toFixed(2)} hr`,
fontColor: (data: any) => {
var rgb = Color(data.dataset.backgroundColor[data.index]).rgb().object();
var threshold = 140;
var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
return luminance > threshold ? 'black' : 'white';
},
arc: false,
overlap: false
}
},
legend: {
position: 'bottom'
},
layout: {
padding: {
left: this.props.paddingLeft,
right: this.props.paddingRight,
top: this.props.paddingTop,
bottom: this.props.paddingBottom
}
},
maintainAspectRatio: false,
responsive: true}} />
);
}
}
export const StyledPatternPieChart = withStyles(styles)(PatternPieChart);
type DoublePieChartProps = {
classes: {
patternTableWrapper: string,
pieChart: string
},
patternGraphData: PatternGraphData[],
calendarGraphData: PatternGraphData[]
};
function DoublePieChart(props: DoublePieChartProps) {
return (
<Grid container spacing={0}>
<Grid item md={12} lg={12} style={{height: 300}}>
<StyledPatternPieChart data={props.patternGraphData} />
</Grid>
<Grid item md={12} lg={12} style={{height: 300}}>
<StyledPatternPieChart data={props.calendarGraphData} />
</Grid>
</Grid>);
}
export const AnalyzePieChart = withStyles(styles)(DoublePieChart);