1 files changed, 60 insertions, 52 deletions
diff --git a/src/Chart.tsx b/src/Chart.tsx
index d70e4f0..170b5fa 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -2,7 +2,9 @@ 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 { ResponsivePie } from '@nivo/pie';
+import { Doughnut } from 'react-chartjs-2';
+import 'chartjs-plugin-labels';
+import Color from 'color';
 import { defaultChartColor } from './theme';
 import { PatternGraphData } from './graph';
 
@@ -19,28 +21,22 @@ type PatternPieChartProps = {
 },
 height?: number | string,
 data: PatternGraphData[],
- radialLabelsLinkStrokeWidth?: number,
- radialLabelsLinkDiagonalLength?: number,
 borderWidth: number,
 labelFontSize : number,
- marginTop: number,
- marginBottom: number,
- marginLeft: number,
- marginRight: number,
- padAngle: number
+ paddingTop: number,
+ paddingBottom: number,
+ paddingLeft: number,
+ paddingRight: number,
 };
 
 export class PatternPieChart extends React.Component<PatternPieChartProps> {
 public static defaultProps = {
- radialLabelsLinkStrokeWidth: 1,
 borderWidth: 1,
- radialLabelsLinkDiagonalLength: 16,
 labelFontSize: 12,
- marginTop: 40,
- marginBottom: 40,
- marginLeft: 80,
- marginRight: 80,
- padAngle: 0.7
+ paddingTop: 0,
+ paddingBottom: 0,
+ paddingLeft: 0,
+ paddingRight: 0,
 };
 render() {
 let { height, data, labelFontSize } = this.props;
@@ -51,43 +47,55 @@ export class PatternPieChart extends React.Component<PatternPieChartProps> {
 }
 }
 };
- return (
- <ResponsivePie
- data={data.map(p => ({
- id: p.name,
- label: p.name,
- value: p.value,
- color: p.color ? p.color: defaultChartColor
- }))}
- margin={{
- top: this.props.marginTop,
- right: this.props.marginRight,
- bottom: this.props.marginBottom,
- left: this.props.marginLeft
- }}
- innerRadius={0.5}
- padAngle={this.props.padAngle}
- cornerRadius={3}
- colorBy={d => d.color as string}
- borderWidth={this.props.borderWidth}
- borderColor="inherit:darker(0.2)"
- radialLabelsSkipAngle={10}
- radialLabelsTextXOffset={6}
- radialLabelsTextColor="#333333"
- radialLabelsLinkOffset={0}
- radialLabelsLinkDiagonalLength={this.props.radialLabelsLinkDiagonalLength}
- radialLabelsLinkHorizontalLength={24}
- radialLabelsLinkStrokeWidth={this.props.radialLabelsLinkStrokeWidth}
- radialLabelsLinkColor="inherit"
- sliceLabel={(d) => `${d.value.toFixed(2)} hr`}
- slicesLabelsSkipAngle={10}
- slicesLabelsTextColor="#ffffff"
- animate={true}
- motionStiffness={90}
- motionDamping={15}
- theme={theme}
- tooltipFormat={v => `${v.toFixed(2)} hr`} />
- );
+ 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}} />
+ );
 }
 }