fix(RadialChart): Handle width and height prop correctly (#52)

Author: MarcusNotheis

packages/charts/src/components/DonutChart/index.tsx

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import { ChartInternalProps } from '../../interfaces/ChartInternalProps';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
-import { mergeConfig } from '../../util/utils';
+import { populateData } from '../../util/populateData';
+import { formatTooltipLabelForPieCharts, mergeConfig } from '../../util/utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { PieChart } from '../PieChart';
+import { Pie } from 'react-chartjs-2';
 import { withChartContainer } from '../ChartContainer/withChartContainer';
 import { PieChartPlaceholder } from '../PieChart/Placeholder';
 
@@ -20,15 +21,57 @@ export class DonutChart extends PureComponent<DonutChartPropTypes> {
   static LoadingPlaceholder = PieChartPlaceholder;
 
   render() {
-    const { options, ...otherProps } = this.props as DonutChartPropTypes & ChartInternalProps;
+    const {
+      labels,
+      datasets,
+      colors,
+      theme,
+      categoryAxisFormatter,
+      getDatasetAtEvent,
+      getElementAtEvent,
+      valueAxisFormatter,
+      options
+    } = this.props as DonutChartPropTypes & ChartInternalProps;
+
+    const doughnut = populateData(labels, datasets, colors, theme.theme, true);
 
     const mergedOptions = mergeConfig(
       {
-        cutoutPercentage: 70
+        cutoutPercentage: 70,
+        tooltips: {
+          callbacks: {
+            label: formatTooltipLabelForPieCharts(categoryAxisFormatter, valueAxisFormatter)
+          }
+        },
+        plugins: {
+          datalabels: {
+            anchor: 'center',
+            align: 'center',
+            offset: 0,
+            color: (context) => {
+              return parseInt(context.dataset.backgroundColor[context.datasetIndex], 16) > 0xffffff / 2
+                ? '#666'
+                : '#fff';
+            },
+            formatter: valueAxisFormatter
+          }
+        }
       },
       options
     );
 
-    return <PieChart innerChartRef={this.props.innerChartRef} {...otherProps} options={mergedOptions} />;
+    return (
+      <Pie
+        ref={this.props.innerChartRef}
+        data={doughnut}
+        height={this.props.height}
+        width={this.props.width}
+        options={mergedOptions}
+        // @ts-ignore
+        getDatasetAtEvent={getDatasetAtEvent}
+        // @ts-ignore
+        getElementAtEvent={getElementAtEvent}
+      />
+    );
   }
 }

packages/charts/src/components/RadialChart/demo.stories.tsx

@@ -1,9 +1,18 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { number, text } from '@storybook/addon-knobs';
+import React from 'react';
 import { RadialChart } from './index';
 
 function renderStory() {
-  return <RadialChart value={40} displayValue="40%" />;
+  return <RadialChart value={number('value', 40)} displayValue={text('displayValue', '40%')} />;
 }
 
-storiesOf('Charts | RadialChart', module).add('Default', renderStory);
+const renderInContainer = () => (
+  <div style={{ width: '100px', height: '100px', margin: '0 auto', position: 'relative' }}>
+    <RadialChart value={number('value', 90)} displayValue={text('displayValue', '90%')} width={100} height={100} />
+  </div>
+);
+
+storiesOf('Charts | RadialChart', module)
+  .add('Default', renderStory)
+  .add('In Container', renderInContainer);

packages/charts/src/components/RadialChart/index.tsx

@@ -18,7 +18,7 @@ export interface RadialChartPropTypes extends CommonProps {
   innerChartRef?: Ref<any>;
 }
 
-const styles = () => ({
+const styles = {
   radialChart: {
     position: 'relative'
   },
@@ -34,7 +34,7 @@ const styles = () => ({
     pointerEvents: 'none',
     fontSize: '2rem'
   }
-});
+};
 
 @withStyles(styles)
 export class RadialChart extends PureComponent<RadialChartPropTypes> {
@@ -46,7 +46,7 @@ export class RadialChart extends PureComponent<RadialChartPropTypes> {
   };
 
   render() {
-    const { maxValue, value, displayValue, classes, style, className, colors, options } = this
+    const { maxValue, value, displayValue, classes, style, className, colors, options, width, height } = this
       .props as RadialChartPropTypes & ChartInternalProps;
 
     const data = [value, maxValue - value];
@@ -66,23 +66,29 @@ export class RadialChart extends PureComponent<RadialChartPropTypes> {
       options
     );
 
+    const radialChartContainerStyles = {
+      width: `${width}px`,
+      height: `${height}px`,
+      ...style
+    };
+
     const outerClasses = StyleClassHelper.of(classes.radialChart);
     if (className) {
       outerClasses.put(className);
     }
 
     return (
-      <div className={outerClasses.toString()} style={style}>
+      <div className={outerClasses.toString()} style={radialChartContainerStyles}>
         <DonutChart
           innerChartRef={this.props.innerChartRef}
           datasets={[{ data }]}
           colors={colors}
           options={mergedOptions}
+          width={width}
+          height={height}
+          style={{ paddingTop: 0 }}
         />
-        <div
-          className={classes.content}
-          style={{ maxWidth: `${this.props.width}px`, maxHeight: `${this.props.height}px` }}
-        >
+        <div className={classes.content}>
           <h3
             style={{
               color: '#333333',