Skip to content

Commit

Permalink
Merge pull request uber#138 from uber/donut-chart-example
Browse files Browse the repository at this point in the history
Donut chart example
jckr authored Sep 2, 2016
2 parents 48a26b3 + 708e561 commit 746e715
Showing 6 changed files with 83 additions and 26 deletions.
15 changes: 11 additions & 4 deletions src/example/main.js
Original file line number Diff line number Diff line change
@@ -45,10 +45,14 @@ import TreemapExample from './treemap/dynamic-treemap';
import StaticTable from './table/static-table';
import DynamicTable from './table/dynamic-table';
import SimpleRadialChart from './radial-chart/simple-radial-chart';
import DonutChartExample from './radial-chart/donut-chart';
import CustomRadiusRadialChart from './radial-chart/custom-radius-radial-chart';
import VerticalDiscreteColorLegendExample from './legends/vertical-discrete-color';
import HorizontalDiscreteColorLegendExample from './legends/horizontal-discrete-color';
import SearchableDiscreteColorLegendExample from './legends/searchable-discrete-color';
import VerticalDiscreteColorLegendExample
from './legends/vertical-discrete-color';
import HorizontalDiscreteColorLegendExample
from './legends/horizontal-discrete-color';
import SearchableDiscreteColorLegendExample
from './legends/searchable-discrete-color';
import ContinuousColorLegendExample from './legends/continuous-color';
import ContinuousSizeLegendExample from './legends/continuous-size';
import {isReactDOMSupported} from '../lib/utils/react-utils';
@@ -153,7 +157,10 @@ const examples = (
<h3>Simple Radial Chart</h3>
<SimpleRadialChart />
</section>

<section>
<h3>Simple Donut Chart</h3>
<DonutChartExample />
</section>
<section>
<h3>Custom Radius</h3>
<CustomRadiusRadialChart />
2 changes: 1 addition & 1 deletion src/example/plot/dynamic-crosshair.js
Original file line number Diff line number Diff line change
@@ -55,8 +55,8 @@ export default class DynamicCrosshair extends React.Component {

/**
* Event handler for onNearestX.
* @param {number} seriesIndex Index of the series.
* @param {Object} value Selected value.
* @param {index} index Index of the value in the data array.
* @private
*/
_onNearestX(value, {index}) {
39 changes: 39 additions & 0 deletions src/example/radial-chart/donut-chart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// Copyright (c) 2016 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import React from 'react';
import {RadialChart} from '../../';

export default function DonutChartExample() {
return (
<RadialChart
innerRadius={100}
radius={140}
data={[
{angle: 2},
{angle: 6},
{angle: 2},
{angle: 3},
{angle: 1}
]}
width={300}
height={300}/>
);
}
3 changes: 2 additions & 1 deletion src/lib/legends/discrete-color-legend-item.js
Original file line number Diff line number Diff line change
@@ -32,7 +32,8 @@ const defaultProps = {
disabled: false
};

function DiscreteColorLegendItem({onClick, title, color, disabled, orientation}) {
function DiscreteColorLegendItem({onClick, title, color, disabled,
orientation}) {
let className = `rv-discrete-color-legend-item ${orientation}`;
if (disabled) {
className += ' disabled';
4 changes: 3 additions & 1 deletion src/lib/legends/discrete-color-legend.js
Original file line number Diff line number Diff line change
@@ -60,7 +60,9 @@ function DiscreteColorLegend({items: initialItems, width, height,
onItemClick, orientation}) {
const updatedItems = fillItemsWithDefaults(initialItems);
return (
<div className={`rv-discrete-color-legend ${orientation}`} style={{width, height}}>
<div
className={`rv-discrete-color-legend ${orientation}`}
style={{width, height}}>
{updatedItems.map((item, i) =>
<DiscreteColorLegendItem
{...item}
46 changes: 27 additions & 19 deletions src/lib/radial-chart/radial-chart.js
Original file line number Diff line number Diff line change
@@ -87,10 +87,9 @@ class RadialChart extends React.Component {
constructor(props) {
super(props);
const data = assignColorsToData(props.data);
this.state = {
scaleProps: this._getAllScaleProps(props, data),
data
};
const scaleProps = this._getAllScaleProps(props, data);
const arc = this._getArcFromProps(scaleProps);
this.state = {scaleProps, data, arc};
this._sectionMouseOut = this._sectionMouseOut.bind(this);
this._sectionMouseOver = this._sectionMouseOver.bind(this);
this._sectionClick = this._sectionClick.bind(this);
@@ -104,7 +103,8 @@ class RadialChart extends React.Component {
if (!equal(nextscaleProps, scaleProps)) {
this.setState({
scaleProps: nextscaleProps,
data: nextData
data: nextData,
arc: this._getArcFromProps(scaleProps)
});
}
}
@@ -213,41 +213,49 @@ class RadialChart extends React.Component {
return getAttributeFunctor(this.state.scaleProps, attr);
}

/**
* Extract the arc function from the props.
* @param {Object} scaleProps Scale props.
* @returns {function} Arc function, null if radius is missing.
* @private
*/
_getArcFromProps(scaleProps) {
const radiusFunctor = getAttributeFunctor(scaleProps, 'radius');
const innerRadiusFunctor = getAttributeFunctor(scaleProps, 'innerRadius');
if (!radiusFunctor) {
return null;
}
return d3Shape.arc()
.outerRadius(radiusFunctor)
.innerRadius(innerRadiusFunctor);
}

render() {
const {width, height, animation} = this.props;

if (animation) {
return (
<Animation {...this.props} animatedProps={ANIMATED_PROPS}>
<RadialChart {...this.props} animation={null}/>
</Animation>
);
}
const {data} = this.state;
if (!data) {

const {data, arc} = this.state;
if (!data || !arc) {
return null;
}

const {innerWidth, innerHeight} = getInnerDimensions(
this.props,
DEFAULT_MARGINS
);
const pie = d3Shape.pie().sort(null).value(d => d.angle);

const radiusFunctor = this._getAttributeFunctor('radius');
const innerRadiusFunctor = this._getAttributeFunctor('innerRadius');
if (!radiusFunctor) {
return null;
}
const opacityFunctor = this._getAttributeFunctor('opacity');
const fillFunctor = this._getAttributeFunctor('fill') ||
this._getAttributeFunctor('color');
const strokeFunctor = this._getAttributeFunctor('stroke') ||
this._getAttributeFunctor('color');

const arc = d3Shape.arc()
.outerRadius(radiusFunctor)
.innerRadius(innerRadiusFunctor);
this._arc = arc;
const pie = d3Shape.pie().sort(null).value(d => d.angle);
const pieData = pie(data);

return (

0 comments on commit 746e715

Please sign in to comment.