From bdf0b678152196f845dc4aead55bb7770a4b60b2 Mon Sep 17 00:00:00 2001 From: Anton Bulyenov Date: Fri, 2 Sep 2016 10:43:09 -0700 Subject: [PATCH 1/2] Add the missing donut chart example Added the missing donut chart example. This PR fixes #83 --- src/example/main.js | 6 +++- src/example/radial-chart/donut-chart.js | 39 +++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/example/radial-chart/donut-chart.js diff --git a/src/example/main.js b/src/example/main.js index 3635b2cb3..a449d4016 100644 --- a/src/example/main.js +++ b/src/example/main.js @@ -45,6 +45,7 @@ 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'; @@ -153,7 +154,10 @@ const examples = (

Simple Radial Chart

- +
+

Simple Donut Chart

+ +

Custom Radius

diff --git a/src/example/radial-chart/donut-chart.js b/src/example/radial-chart/donut-chart.js new file mode 100644 index 000000000..7198882d0 --- /dev/null +++ b/src/example/radial-chart/donut-chart.js @@ -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 ( + + ); +} From 708e561cfd86fc734b7cd7c1183d2c85e3fa3c98 Mon Sep 17 00:00:00 2001 From: Anton Bulyenov Date: Fri, 2 Sep 2016 11:06:42 -0700 Subject: [PATCH 2/2] Performed ode style cleanup; moved the arc generation for the radial chart into the state (works faster now). --- src/example/main.js | 9 ++-- src/example/plot/dynamic-crosshair.js | 2 +- src/example/radial-chart/donut-chart.js | 12 ++--- src/lib/legends/discrete-color-legend-item.js | 3 +- src/lib/legends/discrete-color-legend.js | 4 +- src/lib/radial-chart/radial-chart.js | 46 +++++++++++-------- 6 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/example/main.js b/src/example/main.js index a449d4016..3e5e9c5b9 100644 --- a/src/example/main.js +++ b/src/example/main.js @@ -47,9 +47,12 @@ 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'; diff --git a/src/example/plot/dynamic-crosshair.js b/src/example/plot/dynamic-crosshair.js index b41f737dd..88eada021 100644 --- a/src/example/plot/dynamic-crosshair.js +++ b/src/example/plot/dynamic-crosshair.js @@ -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}) { diff --git a/src/example/radial-chart/donut-chart.js b/src/example/radial-chart/donut-chart.js index 7198882d0..df1bc9682 100644 --- a/src/example/radial-chart/donut-chart.js +++ b/src/example/radial-chart/donut-chart.js @@ -27,12 +27,12 @@ export default function DonutChartExample() { innerRadius={100} radius={140} data={[ - {angle: 2}, - {angle: 6}, - {angle: 2}, - {angle: 3}, - {angle: 1} - ]} + {angle: 2}, + {angle: 6}, + {angle: 2}, + {angle: 3}, + {angle: 1} + ]} width={300} height={300}/> ); diff --git a/src/lib/legends/discrete-color-legend-item.js b/src/lib/legends/discrete-color-legend-item.js index bbeb59222..ecfb4e0d6 100644 --- a/src/lib/legends/discrete-color-legend-item.js +++ b/src/lib/legends/discrete-color-legend-item.js @@ -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'; diff --git a/src/lib/legends/discrete-color-legend.js b/src/lib/legends/discrete-color-legend.js index 90ebf5fb0..b7fa838ce 100644 --- a/src/lib/legends/discrete-color-legend.js +++ b/src/lib/legends/discrete-color-legend.js @@ -60,7 +60,9 @@ function DiscreteColorLegend({items: initialItems, width, height, onItemClick, orientation}) { const updatedItems = fillItemsWithDefaults(initialItems); return ( -
+
{updatedItems.map((item, i) => @@ -223,31 +239,23 @@ class RadialChart extends React.Component { ); } - 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 (