diff --git a/showcase/app.js b/showcase/app.js index b273191b0..e7cd62783 100644 --- a/showcase/app.js +++ b/showcase/app.js @@ -19,7 +19,7 @@ // THE SOFTWARE. import ReactDOM from 'react-dom'; -import React, {Component} from 'react'; +import React from 'react'; import document from 'global/document'; import {BrowserRouter, Route} from 'react-router-dom'; @@ -27,15 +27,13 @@ import {BrowserRouter, Route} from 'react-router-dom'; import ShowcaseApp from './showcase-app'; import '../src/styles/examples.scss'; -export default class App extends Component { - render() { - // using react-router to trigger react updates on url change - return ( - - - - ); - } +export default function App(props) { + // using react-router to trigger react updates on url change + return ( + + + + ); } const el = document.createElement('div'); diff --git a/showcase/axes/custom-axes-orientation.js b/showcase/axes/custom-axes-orientation.js index d177d178d..5fdc0e358 100644 --- a/showcase/axes/custom-axes-orientation.js +++ b/showcase/axes/custom-axes-orientation.js @@ -29,36 +29,34 @@ import { LineSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + + + ); } diff --git a/showcase/axes/custom-axes.js b/showcase/axes/custom-axes.js index 46f722d6e..9beae572f 100644 --- a/showcase/axes/custom-axes.js +++ b/showcase/axes/custom-axes.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import {XYPlot, XAxis, YAxis, MarkSeries} from 'index'; @@ -44,21 +44,19 @@ const WORDS = [ ]; -export default class Example extends Component { - render() { - return ( - - - `Value is ${v}`} tickLabelAngle={-90} /> - - v * v} /> - WORDS[v]} /> - - - ); - } +export default function Example(props) { + return ( + + + `Value is ${v}`} tickLabelAngle={-90} /> + + v * v} /> + WORDS[v]} /> + + + ); } diff --git a/showcase/axes/custom-axis.js b/showcase/axes/custom-axis.js index 45a87845d..ef5c21dc7 100644 --- a/showcase/axes/custom-axis.js +++ b/showcase/axes/custom-axis.js @@ -29,34 +29,32 @@ import { LineSeries } from 'index'; -export default class Example extends React.Component { - render() { - const axisStyle = { - ticks: { - fontSize: '14px', - color: '#333' - }, - title: { - fontSize: '16px', - color: '#333' - } - }; +export default function Example(props) { + const axisStyle = { + ticks: { + fontSize: '14px', + color: '#333' + }, + title: { + fontSize: '16px', + color: '#333' + } + }; - return ( - - - - `Value is ${v}`} - labelValues={[2]} - tickValues={[1, 1.5, 2, 3]} - style={axisStyle} - /> - - - - ); - } + return ( + + + + `Value is ${v}`} + labelValues={[2]} + tickValues={[1, 1.5, 2, 3]} + style={axisStyle} + /> + + + + ); } diff --git a/showcase/axes/decorative-axes-criss-cross.js b/showcase/axes/decorative-axes-criss-cross.js index 6c5abf570..2546d21fe 100644 --- a/showcase/axes/decorative-axes-criss-cross.js +++ b/showcase/axes/decorative-axes-criss-cross.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import {XYPlot, DecorativeAxis} from 'index'; @@ -29,30 +29,28 @@ const MARGIN = { bottom: 30 }; -export default class Example extends Component { - render() { - return ( - - - `¡${t}!`} - /> - - ); - } +export default function Example(props) { + return ( + + + `¡${t}!`} + /> + + ); } diff --git a/showcase/axes/parallel-coordinates-example.js b/showcase/axes/parallel-coordinates-example.js index 3ebd2e52a..c0a6bd1bc 100644 --- a/showcase/axes/parallel-coordinates-example.js +++ b/showcase/axes/parallel-coordinates-example.js @@ -65,33 +65,30 @@ const MARGIN = { bottom: 10 }; -// build a custom color scale -class ParallelCoordinatesExample extends React.Component { - render() { - return ( - - {mappedData.map((series, index) => { - return ; - })} - {mappedData[0].map((cell, index) => { - return ( - - ); - })} - - ); - } +function ParallelCoordinatesExample(props) { + return ( + + {mappedData.map((series, index) => { + return ; + })} + {mappedData[0].map((cell, index) => { + return ( + + ); + })} + + ); } export default ParallelCoordinatesExample; diff --git a/showcase/axes/static-crosshair.js b/showcase/axes/static-crosshair.js index ecf662311..c97f261d2 100644 --- a/showcase/axes/static-crosshair.js +++ b/showcase/axes/static-crosshair.js @@ -30,18 +30,16 @@ import { Crosshair } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + + + ); } diff --git a/showcase/axes/static-hints.js b/showcase/axes/static-hints.js index 3e5a338cd..ae2cbb09b 100644 --- a/showcase/axes/static-hints.js +++ b/showcase/axes/static-hints.js @@ -30,30 +30,28 @@ import { Hint } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - -
- This is a custom hint -
- for a non-existent value -
- - - ); - } +export default function Example(props) { + return ( + + + + + + + + +
+ This is a custom hint +
+ for a non-existent value +
+ + + ); } diff --git a/showcase/color/line-chart-many-colors.js b/showcase/color/line-chart-many-colors.js index 818225f52..40b82727c 100644 --- a/showcase/color/line-chart-many-colors.js +++ b/showcase/color/line-chart-many-colors.js @@ -39,24 +39,22 @@ for (let i = 0; i < 20; i++) { data.push({color: i, key: i, data: series, opacity: 0.8}); } -export default class Example extends React.Component { - render() { - return ( - - - - - - {data.map(props => ( - - ))} - - ); - } +export default function Example() { + return ( + + + + + + {data.map(props => ( + + ))} + + ); } diff --git a/showcase/misc/gradient-example.js b/showcase/misc/gradient-example.js index b74d3b6dd..3f3af10ff 100644 --- a/showcase/misc/gradient-example.js +++ b/showcase/misc/gradient-example.js @@ -31,45 +31,43 @@ import { Borders } from 'index'; -export default class GradientExample extends React.Component { - render() { - return ( - - - - - - - - - +export default function GradientExample(props) { + return ( + + + + + + + + + - - - - - - - ); - } + + + + + + + ); } diff --git a/showcase/misc/time-chart.js b/showcase/misc/time-chart.js index 3b7d8b3bd..7dc26c455 100644 --- a/showcase/misc/time-chart.js +++ b/showcase/misc/time-chart.js @@ -31,33 +31,31 @@ import { const MSEC_DAILY = 86400000; -export default class Example extends React.Component { - render() { - const timestamp = new Date('September 9 2017').getTime(); - return ( - - - - - - - - - - ); - } +export default function Example(props) { + const timestamp = new Date('September 9 2017').getTime(); + return ( + + + + + + + + + + ); } diff --git a/showcase/parallel-coordinates/basic-parallel-coordinates.js b/showcase/parallel-coordinates/basic-parallel-coordinates.js index 1d1e5b35d..3f525acd6 100644 --- a/showcase/parallel-coordinates/basic-parallel-coordinates.js +++ b/showcase/parallel-coordinates/basic-parallel-coordinates.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import {format} from 'd3-format'; import {ParallelCoordinates} from 'index'; @@ -60,31 +60,29 @@ const DATA = [ const basicFormat = format('.2r'); const wideFormat = format('.3r'); -export default class BasicParallelCoordinates extends Component { - render() { - return ( - wideFormat(t)} - margin={50} - colorRange={['#172d47', '#911116', '#998965']} - domains={[ - {name: 'mileage', domain: [0, 10]}, - { - name: 'price', - domain: [2, 16], - tickFormat: t => `$${basicFormat(t)}`, - getValue: d => d.price - }, - {name: 'safety', domain: [5, 10], getValue: d => d.safety}, - {name: 'performance', domain: [0, 10], getValue: d => d.performance}, - {name: 'interior', domain: [0, 7], getValue: d => d.interior}, - {name: 'warranty', domain: [10, 2], getValue: d => d.warranty} - ]} - showMarks - width={400} - height={300} - /> - ); - } +export default function BasicParallelCoordinates(props) { + return ( + wideFormat(t)} + margin={50} + colorRange={['#172d47', '#911116', '#998965']} + domains={[ + {name: 'mileage', domain: [0, 10]}, + { + name: 'price', + domain: [2, 16], + tickFormat: t => `$${basicFormat(t)}`, + getValue: d => d.price + }, + {name: 'safety', domain: [5, 10], getValue: d => d.safety}, + {name: 'performance', domain: [0, 10], getValue: d => d.performance}, + {name: 'interior', domain: [0, 7], getValue: d => d.interior}, + {name: 'warranty', domain: [10, 2], getValue: d => d.warranty} + ]} + showMarks + width={400} + height={300} + /> + ); } diff --git a/showcase/parallel-coordinates/brushed-parallel-coordinates.js b/showcase/parallel-coordinates/brushed-parallel-coordinates.js index 00662f725..721a42c9f 100644 --- a/showcase/parallel-coordinates/brushed-parallel-coordinates.js +++ b/showcase/parallel-coordinates/brushed-parallel-coordinates.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import {ParallelCoordinates} from 'index'; import IrisData from '../datasets/iris.json'; @@ -47,18 +47,16 @@ const domains = IrisData.reduce((acc, row) => { }); }, domainStructure); -export default class BrushedParallelCoordinates extends Component { - render() { - return ( - ({...d, color: SPECIES_COLORS[d.species]}))} - domains={domains} - margin={60} - width={600} - height={400} - /> - ); - } +export default function BrushedParallelCoordinates(props) { + return ( + ({...d, color: SPECIES_COLORS[d.species]}))} + domains={domains} + margin={60} + width={600} + height={400} + /> + ); } diff --git a/showcase/plot/area-chart-elevated.js b/showcase/plot/area-chart-elevated.js index a070e1c62..3723896ca 100644 --- a/showcase/plot/area-chart-elevated.js +++ b/showcase/plot/area-chart-elevated.js @@ -30,37 +30,35 @@ import { AreaSeries } from 'index'; -export default class AreaChartElevated extends React.Component { - render() { - return ( - - - - - - - - - - ); - } +export default function AreaChartElevated(props) { + return ( + + + + + + + + + + ); } diff --git a/showcase/plot/area-chart.js b/showcase/plot/area-chart.js index 1499b97d0..979d0d4c5 100644 --- a/showcase/plot/area-chart.js +++ b/showcase/plot/area-chart.js @@ -29,20 +29,18 @@ import { AreaSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + ); } diff --git a/showcase/plot/axis-with-turned-labels.js b/showcase/plot/axis-with-turned-labels.js index 0c4437756..2892092a0 100644 --- a/showcase/plot/axis-with-turned-labels.js +++ b/showcase/plot/axis-with-turned-labels.js @@ -29,29 +29,27 @@ import { VerticalBarSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + + ); } diff --git a/showcase/plot/custom-scales.js b/showcase/plot/custom-scales.js index 40e2483dc..d42a44241 100644 --- a/showcase/plot/custom-scales.js +++ b/showcase/plot/custom-scales.js @@ -29,22 +29,20 @@ import { LineSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + + + ); } diff --git a/showcase/plot/custom-svg-example.js b/showcase/plot/custom-svg-example.js index c459fc64b..b3c2993b5 100644 --- a/showcase/plot/custom-svg-example.js +++ b/showcase/plot/custom-svg-example.js @@ -29,40 +29,38 @@ import { CustomSVGSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - { - return ( - - - - {`x: ${positionInPixels.x}`} - {`y: ${positionInPixels.y}`} - - - ); - } +export default function Example(props) { + return ( + + + + + + { + return ( + + + + {`x: ${positionInPixels.x}`} + {`y: ${positionInPixels.y}`} + + + ); } - ]} - /> - - ); - } + } + ]} + /> + + ); } diff --git a/showcase/plot/custom-svg-root-level.js b/showcase/plot/custom-svg-root-level.js index 1093c5f2a..8ae5bd23b 100644 --- a/showcase/plot/custom-svg-root-level.js +++ b/showcase/plot/custom-svg-root-level.js @@ -29,36 +29,34 @@ import { CustomSVGSeries } from 'index'; -export default class CustomSVGRootLevelComponent extends React.Component { - render() { - return ( - - - - - - { - return ( - - - - {`x: ${positionInPixels.x}`} - {`y: ${positionInPixels.y}`} - - - ); - }} - data={[ - {x: 1, y: 10, size: 3}, - {x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}}, - {x: 2, y: 5}, - {x: 3, y: 15}, - {x: 2.5, y: 7} - ]} - /> - - ); - } +export default function CustomSVGRootLevelComponent(props) { + return ( + + + + + + { + return ( + + + + {`x: ${positionInPixels.x}`} + {`y: ${positionInPixels.y}`} + + + ); + }} + data={[ + {x: 1, y: 10, size: 3}, + {x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}}, + {x: 2, y: 5}, + {x: 3, y: 15}, + {x: 2.5, y: 7} + ]} + /> + + ); } diff --git a/showcase/plot/faux-radial-scatterplot.js b/showcase/plot/faux-radial-scatterplot.js index 415f47761..f413ba223 100644 --- a/showcase/plot/faux-radial-scatterplot.js +++ b/showcase/plot/faux-radial-scatterplot.js @@ -41,29 +41,27 @@ const margin = { const WIDTH = 300; const HEIGHT = 300; -export default class Example extends React.Component { - render() { - return ( - - - - - ({ - ...row, - x: Math.cos(row.theta) * row.r, - y: Math.sin(row.theta) * row.r - }))} - /> - - ); - } +export default function Example(props) { + return ( + + + + + ({ + ...row, + x: Math.cos(row.theta) * row.r, + y: Math.sin(row.theta) * row.r + }))} + /> + + ); } diff --git a/showcase/plot/grid.js b/showcase/plot/grid.js index a418b5335..6e437bf28 100644 --- a/showcase/plot/grid.js +++ b/showcase/plot/grid.js @@ -22,15 +22,13 @@ import React from 'react'; import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + ); } diff --git a/showcase/plot/heatmap-chart.js b/showcase/plot/heatmap-chart.js index 4e15e6d4d..c98baf8e4 100644 --- a/showcase/plot/heatmap-chart.js +++ b/showcase/plot/heatmap-chart.js @@ -22,30 +22,28 @@ import React from 'react'; import {XYPlot, XAxis, YAxis, HeatmapSeries} from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + ); } diff --git a/showcase/plot/histogram.js b/showcase/plot/histogram.js index 136006592..ebddcd26d 100644 --- a/showcase/plot/histogram.js +++ b/showcase/plot/histogram.js @@ -42,22 +42,20 @@ const DATA = [ {x0: ONE_DAY * 21, x: ONE_DAY * 24, y: 1} ].map(el => ({x0: el.x0 + timestamp, x: el.x + timestamp, y: el.y})); -export default class Example extends React.Component { - render() { - return ( - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + ); } diff --git a/showcase/plot/line-chart-with-style.js b/showcase/plot/line-chart-with-style.js index d8d15d8ae..c9b3b746a 100644 --- a/showcase/plot/line-chart-with-style.js +++ b/showcase/plot/line-chart-with-style.js @@ -30,43 +30,41 @@ import { LineSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + + + + ); } diff --git a/showcase/plot/linemark-chart.js b/showcase/plot/linemark-chart.js index 4b2f1fb92..180cc440b 100644 --- a/showcase/plot/linemark-chart.js +++ b/showcase/plot/linemark-chart.js @@ -29,29 +29,27 @@ import { LineMarkSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + + ); } diff --git a/showcase/plot/scatterplot.js b/showcase/plot/scatterplot.js index 5ba6923eb..5f9cc78e7 100644 --- a/showcase/plot/scatterplot.js +++ b/showcase/plot/scatterplot.js @@ -29,28 +29,26 @@ import { MarkSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + ); } diff --git a/showcase/plot/whisker-chart.js b/showcase/plot/whisker-chart.js index fc283b4cf..7612a10ee 100644 --- a/showcase/plot/whisker-chart.js +++ b/showcase/plot/whisker-chart.js @@ -29,25 +29,23 @@ import { WhiskerSeries } from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + + ); } diff --git a/showcase/plot/width-height-margin.js b/showcase/plot/width-height-margin.js index 265239212..431ffee9a 100644 --- a/showcase/plot/width-height-margin.js +++ b/showcase/plot/width-height-margin.js @@ -22,15 +22,13 @@ import React from 'react'; import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'index'; -export default class Example extends React.Component { - render() { - return ( - - - - - - - ); - } +export default function Example(props) { + return ( + + + + + + + ); } diff --git a/showcase/radar-chart/basic-radar-chart.js b/showcase/radar-chart/basic-radar-chart.js index 031cf2425..ff6b38cd8 100644 --- a/showcase/radar-chart/basic-radar-chart.js +++ b/showcase/radar-chart/basic-radar-chart.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import {format} from 'd3-format'; import RadarChart from 'radar-chart'; @@ -56,29 +56,27 @@ const DATA = [ const basicFormat = format('.2r'); const wideFormat = format('.3r'); -export default class BasicRadarChart extends Component { - render() { - return ( - wideFormat(t)} - startingAngle={0} - domains={[ - {name: 'mileage', domain: [0, 10]}, - { - name: 'price', - domain: [2, 16], - tickFormat: t => `$${basicFormat(t)}`, - getValue: d => d.price - }, - {name: 'safety', domain: [5, 10], getValue: d => d.safety}, - {name: 'performance', domain: [0, 10], getValue: d => d.performance}, - {name: 'interior', domain: [0, 7], getValue: d => d.interior}, - {name: 'warranty', domain: [10, 2], getValue: d => d.warranty} - ]} - width={400} - height={300} - /> - ); - } +export default function BasicRadarChart(props) { + return ( + wideFormat(t)} + startingAngle={0} + domains={[ + {name: 'mileage', domain: [0, 10]}, + { + name: 'price', + domain: [2, 16], + tickFormat: t => `$${basicFormat(t)}`, + getValue: d => d.price + }, + {name: 'safety', domain: [5, 10], getValue: d => d.safety}, + {name: 'performance', domain: [0, 10], getValue: d => d.performance}, + {name: 'interior', domain: [0, 7], getValue: d => d.interior}, + {name: 'warranty', domain: [10, 2], getValue: d => d.warranty} + ]} + width={400} + height={300} + /> + ); } diff --git a/showcase/radar-chart/four-quadrant-radar-chart.js b/showcase/radar-chart/four-quadrant-radar-chart.js index f066a2d15..c6c7bf8b7 100644 --- a/showcase/radar-chart/four-quadrant-radar-chart.js +++ b/showcase/radar-chart/four-quadrant-radar-chart.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import RadarChart from 'radar-chart'; @@ -41,27 +41,25 @@ const RADAR_PROPS = { width: 400 }; -export default class FourQuadrantRadarChart extends Component { - render() { - return ( - - ); - } +export default function FourQuadrantRadarChart(props) { + return ( + + ); } diff --git a/showcase/radial-chart/gradient-pie.js b/showcase/radial-chart/gradient-pie.js index b5df75b0a..e20c861bf 100644 --- a/showcase/radial-chart/gradient-pie.js +++ b/showcase/radial-chart/gradient-pie.js @@ -22,42 +22,40 @@ import React from 'react'; import {GradientDefs, RadialChart} from 'index'; -export default class GradientPie extends React.Component { - render() { - return ( - `url(#${d.gradientLabel})`} - data={[ - {angle: 1, gradientLabel: 'grad1'}, - {angle: 2, gradientLabel: 'grad2'}, - {angle: 5, gradientLabel: 'grad3'} - ]} - labelsRadiusMultiplier={1.1} - labelsStyle={{fontSize: 16, fill: '#222'}} - showLabels - style={{stroke: '#fff', strokeWidth: 2}} - width={400} - height={300} - > - - - - - - - - - - - - - - - - ); - } +export default function GradientPie(props) { + return ( + `url(#${d.gradientLabel})`} + data={[ + {angle: 1, gradientLabel: 'grad1'}, + {angle: 2, gradientLabel: 'grad2'}, + {angle: 5, gradientLabel: 'grad3'} + ]} + labelsRadiusMultiplier={1.1} + labelsStyle={{fontSize: 16, fill: '#222'}} + showLabels + style={{stroke: '#fff', strokeWidth: 2}} + width={400} + height={300} + > + + + + + + + + + + + + + + + + ); } diff --git a/showcase/radial-chart/simple-radial-chart.js b/showcase/radial-chart/simple-radial-chart.js index c4fe28387..e2c7899d0 100644 --- a/showcase/radial-chart/simple-radial-chart.js +++ b/showcase/radial-chart/simple-radial-chart.js @@ -22,29 +22,27 @@ import React from 'react'; import RadialChart from 'radial-chart'; -export default class SimpleRadialChart extends React.Component { - render() { - return ( - d.name} - data={[ - {angle: 1, color: '#89DAC1', name: 'green', opacity: 0.2}, - {angle: 2, color: '#F6D18A', name: 'yellow'}, - {angle: 5, color: '#1E96BE', name: 'cyan'}, - {angle: 3, color: '#DA70BF', name: 'magenta'}, - {angle: 5, color: '#F6D18A', name: 'yellow again'} - ]} - labelsRadiusMultiplier={1.1} - labelsStyle={{fontSize: 16, fill: '#222'}} - showLabels - style={{stroke: '#fff', strokeWidth: 2}} - width={400} - height={300} - /> - ); - } +export default function SimpleRadialChart(props) { + return ( + d.name} + data={[ + {angle: 1, color: '#89DAC1', name: 'green', opacity: 0.2}, + {angle: 2, color: '#F6D18A', name: 'yellow'}, + {angle: 5, color: '#1E96BE', name: 'cyan'}, + {angle: 3, color: '#DA70BF', name: 'magenta'}, + {angle: 5, color: '#F6D18A', name: 'yellow again'} + ]} + labelsRadiusMultiplier={1.1} + labelsStyle={{fontSize: 16, fill: '#222'}} + showLabels + style={{stroke: '#fff', strokeWidth: 2}} + width={400} + height={300} + /> + ); } diff --git a/showcase/showcase-app.js b/showcase/showcase-app.js index 55bf47aec..47e6764be 100644 --- a/showcase/showcase-app.js +++ b/showcase/showcase-app.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import ShowcaseDropdown from './showcase-components/showcase-dropdown'; @@ -104,60 +104,58 @@ const sectionNames = [ } ]; -class App extends Component { - render() { - const {forExample} = this.props; - const linkedSection = location.href.split('/#')[1]; - const foundSection = sectionNames.find( - section => section.link === linkedSection - ); +function App(props) { + const {forExample} = props; + const linkedSection = location.href.split('/#')[1]; + const foundSection = sectionNames.find( + section => section.link === linkedSection + ); - const filteredSections = sectionNames - .filter(section => { - // if at http://localhost:3001/, just return everything - if (!linkedSection) { - return section.showByDefault; - } - const showThisSection = - foundSection && section.link === foundSection.link; - const showDefaultSections = - (!foundSection || foundSection.root) && section.showByDefault; + const filteredSections = sectionNames + .filter(section => { + // if at http://localhost:3001/, just return everything + if (!linkedSection) { + return section.showByDefault; + } + const showThisSection = + foundSection && section.link === foundSection.link; + const showDefaultSections = + (!foundSection || foundSection.root) && section.showByDefault; - return showThisSection || showDefaultSections; - }) - .map(section => { - if (section.label || section.root) { - return
; - } - return ; - }); - return ( -
- {!forExample && ( -
-
- - react-vis - - { - const {label, link, name} = section; - const content = label ? ( -
{name}
- ) : ( - {name} - ); + return showThisSection || showDefaultSections; + }) + .map(section => { + if (section.label || section.root) { + return
; + } + return ; + }); + return ( +
+ {!forExample && ( +
+
+ + react-vis + + { + const {label, link, name} = section; + const content = label ? ( +
{name}
+ ) : ( + {name} + ); - return
  • {content}
    • ; - })} - /> -
    -
    - )} - {filteredSections} -
    - ); - } + return
  • {content}
    • ; + })} + /> +
    +
    + )} + {filteredSections} +
    + ); } App.propTypes = { diff --git a/showcase/showcase-components/showcase-button.js b/showcase/showcase-components/showcase-button.js index b7047c44c..957ca7979 100644 --- a/showcase/showcase-components/showcase-button.js +++ b/showcase/showcase-components/showcase-button.js @@ -21,15 +21,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -class ShowcaseButton extends React.Component { - render() { - const {buttonContent, onClick} = this.props; - return ( - - ); - } +function ShowcaseButton(props) { + const {buttonContent, onClick} = props; + return ( + + ); } ShowcaseButton.PropTypes = { diff --git a/showcase/showcase-sections/axes-showcase.js b/showcase/showcase-sections/axes-showcase.js index e46820e35..352ca0dea 100644 --- a/showcase/showcase-sections/axes-showcase.js +++ b/showcase/showcase-sections/axes-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; @@ -133,19 +133,17 @@ const DECORATIVE_AXES = [ } ]; -class AxesShowcase extends Component { - render() { - return ( -
    -

    Axes

    - {AXES.map(mapSection)} -

    Tooltips

    - {TOOLTIPS.map(mapSection)} -

    DecorativeAxis

    - {DECORATIVE_AXES.map(mapSection)} -
    - ); - } +function AxesShowcase(props) { + return ( +
    +

    Axes

    + {AXES.map(mapSection)} +

    Tooltips

    + {TOOLTIPS.map(mapSection)} +

    DecorativeAxis

    + {DECORATIVE_AXES.map(mapSection)} +
    + ); } export default AxesShowcase; diff --git a/showcase/showcase-sections/legends-showcase.js b/showcase/showcase-sections/legends-showcase.js index b9849c43a..a6730e369 100644 --- a/showcase/showcase-sections/legends-showcase.js +++ b/showcase/showcase-sections/legends-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; const { @@ -50,20 +50,18 @@ const CONTINOUS_SIZE_LEGEND = [ } ]; -class LegendsExample extends Component { - render() { - return ( -
    -

    Legends

    -

    Discrete color legend

    - {DISCRETE_LEGENDS.map(mapSection)} -

    Continuous color legend

    - {CONTINOUS_COLOR_LEGEND.map(mapSection)} -

    Continuous size legend

    - {CONTINOUS_SIZE_LEGEND.map(mapSection)} -
    - ); - } +function LegendsExample(props) { + return ( +
    +

    Legends

    +

    Discrete color legend

    + {DISCRETE_LEGENDS.map(mapSection)} +

    Continuous color legend

    + {CONTINOUS_COLOR_LEGEND.map(mapSection)} +

    Continuous size legend

    + {CONTINOUS_SIZE_LEGEND.map(mapSection)} +
    + ); } export default LegendsExample; diff --git a/showcase/showcase-sections/misc-showcase.js b/showcase/showcase-sections/misc-showcase.js index 51e038beb..e966f662b 100644 --- a/showcase/showcase-sections/misc-showcase.js +++ b/showcase/showcase-sections/misc-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; const { @@ -93,15 +93,13 @@ const MISC = [ } ]; -class MiscShowcase extends Component { - render() { - return ( -
    -

    Miscellaneous

    - {MISC.map(mapSection)} -
    - ); - } +function MiscShowcase(props) { + return ( +
    +

    Miscellaneous

    + {MISC.map(mapSection)} +
    + ); } export default MiscShowcase; diff --git a/showcase/showcase-sections/parallel-coordinates-showcase.js b/showcase/showcase-sections/parallel-coordinates-showcase.js index e5883ca00..f5b511d5b 100644 --- a/showcase/showcase-sections/parallel-coordinates-showcase.js +++ b/showcase/showcase-sections/parallel-coordinates-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; @@ -30,17 +30,14 @@ const PARALLEL_COORDINATES = [ componentName: 'BrushedParallelCoordinates' } ]; -/* eslint-enable max-len */ -class ParallelCoordinatesShowcase extends Component { - render() { - return ( -
    -

    Parallel Coordinates

    - {PARALLEL_COORDINATES.map(mapSection)} -
    - ); - } +function ParallelCoordinatesShowcase(props) { + return ( +
    +

    Parallel Coordinates

    + {PARALLEL_COORDINATES.map(mapSection)} +
    + ); } export default ParallelCoordinatesShowcase; diff --git a/showcase/showcase-sections/plots-showcase.js b/showcase/showcase-sections/plots-showcase.js index 4283d9670..9c9961ef0 100644 --- a/showcase/showcase-sections/plots-showcase.js +++ b/showcase/showcase-sections/plots-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import {showCase} from '../index'; import {mapSection} from '../showcase-components/showcase-utils'; @@ -251,24 +251,22 @@ const BASIC_COMPONENTS = [ } ]; -class PlotsShowcase extends Component { - render() { - const {forExample} = this.props; - return ( -
    -

    Plots

    - {!forExample && ( -
    - -
    - )} -

    Series Types

    - {PLOTS.map(mapSection)} -

    Basic Components

    - {BASIC_COMPONENTS.map(mapSection)} -
    - ); - } +function PlotsShowcase(props) { + const {forExample} = props; + return ( +
    +

    Plots

    + {!forExample && ( +
    + +
    + )} +

    Series Types

    + {PLOTS.map(mapSection)} +

    Basic Components

    + {BASIC_COMPONENTS.map(mapSection)} +
    + ); } PlotsShowcase.propTypes = { diff --git a/showcase/showcase-sections/radar-showcase.js b/showcase/showcase-sections/radar-showcase.js index f9ca7f67a..cd8c4fbc8 100644 --- a/showcase/showcase-sections/radar-showcase.js +++ b/showcase/showcase-sections/radar-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; @@ -26,15 +26,13 @@ const RADAR = [ } ]; -class RadarShowcase extends Component { - render() { - return ( -
    -

    Radar Chart

    - {RADAR.map(mapSection)} -
    - ); - } +function RadarShowcase(props) { + return ( +
    +

    Radar Chart

    + {RADAR.map(mapSection)} +
    + ); } export default RadarShowcase; diff --git a/showcase/showcase-sections/radial-showcase.js b/showcase/showcase-sections/radial-showcase.js index cec3cb99b..f16baa928 100644 --- a/showcase/showcase-sections/radial-showcase.js +++ b/showcase/showcase-sections/radial-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; @@ -35,17 +35,14 @@ const RADIAL = [ componentName: GradientPie } ]; -/* eslint-enable max-len */ -class RadialShowcase extends Component { - render() { - return ( -
    -

    Radial Chart

    - {RADIAL.map(mapSection)} -
    - ); - } +function RadialShowcase(props) { + return ( +
    +

    Radial Chart

    + {RADIAL.map(mapSection)} +
    + ); } export default RadialShowcase; diff --git a/showcase/showcase-sections/sankeys-showcase.js b/showcase/showcase-sections/sankeys-showcase.js index c82f41307..1d235accc 100644 --- a/showcase/showcase-sections/sankeys-showcase.js +++ b/showcase/showcase-sections/sankeys-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; @@ -42,15 +42,13 @@ const SANKEYS = [ } ]; -class SankeysSection extends Component { - render() { - return ( -
    -

    Sankeys

    - {SANKEYS.map(mapSection)} -
    - ); - } +function SankeysSection(props) { + return ( +
    +

    Sankeys

    + {SANKEYS.map(mapSection)} +
    + ); } export default SankeysSection; diff --git a/showcase/showcase-sections/sunburst-showcase.js b/showcase/showcase-sections/sunburst-showcase.js index bd8c7def4..5562d22ea 100644 --- a/showcase/showcase-sections/sunburst-showcase.js +++ b/showcase/showcase-sections/sunburst-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {showCase} from '../index'; import {mapSection} from '../showcase-components/showcase-utils'; @@ -46,15 +46,13 @@ const SUNBURSTS = [ } ]; -class SunburstSection extends Component { - render() { - return ( -
    -

    Sunbursts

    - {SUNBURSTS.map(mapSection)} -
    - ); - } +function SunburstSection(props) { + return ( +
    +

    Sunbursts

    + {SUNBURSTS.map(mapSection)} +
    + ); } export default SunburstSection; diff --git a/showcase/showcase-sections/treemap-showcase.js b/showcase/showcase-sections/treemap-showcase.js index 2c63a7f7c..1e3a820de 100644 --- a/showcase/showcase-sections/treemap-showcase.js +++ b/showcase/showcase-sections/treemap-showcase.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import {showCase} from '../index'; import {mapSection} from '../showcase-components/showcase-utils'; @@ -21,15 +21,13 @@ const TREEMAPS = [ } ]; -class TreemapShowcase extends Component { - render() { - return ( -
    -

    Treemap

    - {TREEMAPS.map(mapSection)} -
    - ); - } +function TreemapShowcase(props) { + return ( +
    +

    Treemap

    + {TREEMAPS.map(mapSection)} +
    + ); } export default TreemapShowcase; diff --git a/src/plot/borders.js b/src/plot/borders.js index f9e1b23d2..923dc5f3a 100644 --- a/src/plot/borders.js +++ b/src/plot/borders.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {PureComponent} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; @@ -46,57 +46,55 @@ const CLASSES = { top: 'rv-xy-plot__borders-top' }; -class Borders extends PureComponent { - render() { - const { - marginTop, - marginBottom, - marginLeft, - marginRight, - innerWidth, - innerHeight, - style, - className - } = this.props; - const height = innerHeight + marginTop + marginBottom; - const width = innerWidth + marginLeft + marginRight; - return ( - - - - - - - ); - } +function Borders(props) { + const { + marginTop, + marginBottom, + marginLeft, + marginRight, + innerWidth, + innerHeight, + style, + className + } = props; + const height = innerHeight + marginTop + marginBottom; + const width = innerWidth + marginLeft + marginRight; + return ( + + + + + + + ); } Borders.displayName = 'Borders'; diff --git a/src/plot/gradient-defs.js b/src/plot/gradient-defs.js index 777239b1c..a147605c2 100644 --- a/src/plot/gradient-defs.js +++ b/src/plot/gradient-defs.js @@ -18,20 +18,18 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {PureComponent} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; const predefinedClassName = 'rv-gradient-defs'; -class GradientDefs extends PureComponent { - render() { - const {className} = this.props; - return ( - - {this.props.children} - - ); - } +function GradientDefs(props) { + const {className} = props; + return ( + + {props.children} + + ); } GradientDefs.displayName = 'GradientDefs'; diff --git a/src/radar-chart/index.js b/src/radar-chart/index.js index f388643f5..9644205fa 100644 --- a/src/radar-chart/index.js +++ b/src/radar-chart/index.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import {scaleLinear} from 'd3-scale'; import {format} from 'd3-format'; @@ -173,68 +173,66 @@ function getPolygons(props) { }); } -class RadarChart extends Component { - render() { - const { - animation, - className, - children, - colorRange, - data, - domains, - height, - hideInnerMostValues, - margin, - onMouseLeave, - onMouseEnter, - startingAngle, - style, - tickFormat, - width - } = this.props; +function RadarChart(props) { + const { + animation, + className, + children, + colorRange, + data, + domains, + height, + hideInnerMostValues, + margin, + onMouseLeave, + onMouseEnter, + startingAngle, + style, + tickFormat, + width + } = props; - const axes = getAxes({ - domains, - animation, - hideInnerMostValues, - startingAngle, - style, - tickFormat - }); + const axes = getAxes({ + domains, + animation, + hideInnerMostValues, + startingAngle, + style, + tickFormat + }); - const polygons = getPolygons({ - animation, - colorRange, - domains, - data, - startingAngle, - style - }); - const labelSeries = ( - - ); - return ( - - {children} - {axes.concat(polygons).concat(labelSeries)} - - ); - } + const polygons = getPolygons({ + animation, + colorRange, + domains, + data, + startingAngle, + style + }); + const labelSeries = ( + + ); + return ( + + {children} + {axes.concat(polygons).concat(labelSeries)} + + ); } RadarChart.displayName = 'RadarChart'; diff --git a/src/radial-chart/index.js b/src/radial-chart/index.js index 167b00138..f6aa0b608 100644 --- a/src/radial-chart/index.js +++ b/src/radial-chart/index.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import {pie as pieBuilder} from 'd3-shape'; @@ -99,92 +99,90 @@ function getMaxRadius(width, height) { return Math.min(width, height) / 2 - DEFAULT_RADIUS_MARGIN; } -class RadialChart extends Component { - render() { - const { - animation, - className, - children, - colorType, - data, - getAngle, - getLabel, - getSubLabel, - height, - hideRootNode, - innerRadius, - labelsAboveChildren, - labelsRadiusMultiplier, - labelsStyle, - margin, - onMouseLeave, - onMouseEnter, - radius, - showLabels, - style, - width - } = this.props; - const mappedData = getWedgesToRender({ - data, - height, - hideRootNode, - width, - getAngle - }); - const radialDomain = getRadialDomain(mappedData); - const arcProps = { - colorType, - ...this.props, - animation, - radiusDomain: [0, radialDomain], - data: mappedData, - radiusNoFallBack: true, - style, - arcClassName: 'rv-radial-chart__series--pie__slice' - }; - if (radius) { - arcProps.radiusDomain = [0, 1]; - arcProps.radiusRange = [innerRadius || 0, radius]; - arcProps.radiusType = 'linear'; - } - const maxRadius = radius ? radius : getMaxRadius(width, height); - const defaultMargin = getRadialLayoutMargin(width, height, maxRadius); - - const labels = generateLabels( - mappedData, - { - getLabel, - getSubLabel - }, - labelsRadiusMultiplier - ); - return ( - - d.angle} /> - {showLabels && - !labelsAboveChildren && ( - - )} - {children} - {showLabels && - labelsAboveChildren && ( - - )} - - ); +function RadialChart(props) { + const { + animation, + className, + children, + colorType, + data, + getAngle, + getLabel, + getSubLabel, + height, + hideRootNode, + innerRadius, + labelsAboveChildren, + labelsRadiusMultiplier, + labelsStyle, + margin, + onMouseLeave, + onMouseEnter, + radius, + showLabels, + style, + width + } = props; + const mappedData = getWedgesToRender({ + data, + height, + hideRootNode, + width, + getAngle + }); + const radialDomain = getRadialDomain(mappedData); + const arcProps = { + colorType, + ...props, + animation, + radiusDomain: [0, radialDomain], + data: mappedData, + radiusNoFallBack: true, + style, + arcClassName: 'rv-radial-chart__series--pie__slice' + }; + if (radius) { + arcProps.radiusDomain = [0, 1]; + arcProps.radiusRange = [innerRadius || 0, radius]; + arcProps.radiusType = 'linear'; } + const maxRadius = radius ? radius : getMaxRadius(width, height); + const defaultMargin = getRadialLayoutMargin(width, height, maxRadius); + + const labels = generateLabels( + mappedData, + { + getLabel, + getSubLabel + }, + labelsRadiusMultiplier + ); + return ( + + d.angle} /> + {showLabels && + !labelsAboveChildren && ( + + )} + {children} + {showLabels && + labelsAboveChildren && ( + + )} + + ); } RadialChart.displayName = 'RadialChart'; diff --git a/src/sankey/index.js b/src/sankey/index.js index e97a27531..e66faa517 100644 --- a/src/sankey/index.js +++ b/src/sankey/index.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { sankey, @@ -33,151 +33,140 @@ const DEFAULT_MARGINS = { bottom: 20 }; -class Sankey extends Component { - render() { - const { - align, - animation, - children, - className, - hasVoronoi, - height, - hideLabels, - labelRotation, - layout, - links, - linkOpacity, +function Sankey(props) { + const { + align, + animation, + children, + className, + hasVoronoi, + height, + hideLabels, + labelRotation, + layout, + links, + linkOpacity, + margin, + nodePadding, + nodes, + nodeWidth, + onValueClick, + onValueMouseOver, + onValueMouseOut, + onLinkClick, + onLinkMouseOver, + onLinkMouseOut, + style, + width + } = props; + const nodesCopy = [...new Array(nodes.length)].map((e, i) => ({ + ...nodes[i] + })); + const linksCopy = [...new Array(links.length)].map((e, i) => ({ + ...links[i] + })); + + const {marginLeft, marginTop, marginRight, marginBottom} = getInnerDimensions( + { margin, - nodePadding, - nodes, - nodeWidth, - onValueClick, - onValueMouseOver, - onValueMouseOut, - onLinkClick, - onLinkMouseOver, - onLinkMouseOut, - style, + height, width - } = this.props; - const nodesCopy = [...new Array(nodes.length)].map((e, i) => ({ - ...nodes[i] - })); - const linksCopy = [...new Array(links.length)].map((e, i) => ({ - ...links[i] - })); - - const { - marginLeft, - marginTop, - marginRight, - marginBottom - } = getInnerDimensions( - { - margin, - height, - width - }, - DEFAULT_MARGINS - ); - const sankeyInstance = sankey() - .extent([ - [marginLeft, marginTop], - [width - marginRight, height - marginBottom - marginTop] - ]) - .nodeWidth(nodeWidth) - .nodePadding(nodePadding) - .nodes(nodesCopy) - .links(linksCopy) - .nodeAlign(ALIGNMENTS[align]) - .iterations(layout); - sankeyInstance(nodesCopy); + }, + DEFAULT_MARGINS + ); + const sankeyInstance = sankey() + .extent([ + [marginLeft, marginTop], + [width - marginRight, height - marginBottom - marginTop] + ]) + .nodeWidth(nodeWidth) + .nodePadding(nodePadding) + .nodes(nodesCopy) + .links(linksCopy) + .nodeAlign(ALIGNMENTS[align]) + .iterations(layout); + sankeyInstance(nodesCopy); - const nWidth = sankeyInstance.nodeWidth(); - const path = sankeyLinkHorizontal(); + const nWidth = sankeyInstance.nodeWidth(); + const path = sankeyLinkHorizontal(); - return ( - - {linksCopy.map((link, i) => ( - - ))} - + {linksCopy.map((link, i) => ( + + ))} + ({ + ...node, + y: node.y1 - marginTop, + y0: node.y0 - marginTop, + x: node.x1, + x0: node.x0, + color: node.color || DISCRETE_COLOR_RANGE[0], + sourceLinks: null, + targetLinks: null + }))} + style={style.rects} + onValueClick={onValueClick} + onValueMouseOver={onValueMouseOver} + onValueMouseOut={onValueMouseOut} + colorType="literal" + /> + {!hideLabels && ( + ({ - ...node, - y: node.y1 - marginTop, - y0: node.y0 - marginTop, - x: node.x1, - x0: node.x0, - color: node.color || DISCRETE_COLOR_RANGE[0], - sourceLinks: null, - targetLinks: null - }))} - style={style.rects} - onValueClick={onValueClick} - onValueMouseOver={onValueMouseOver} - onValueMouseOut={onValueMouseOut} - colorType="literal" + className={className} + rotation={labelRotation} + labelAnchorY="text-before-edge" + data={nodesCopy.map((node, i) => { + return { + x: node.x0 + (node.x0 < width / 2 ? nWidth + 10 : -10), + y: (node.y0 + node.y1) / 2 - marginTop, + label: node.name, + style: { + textAnchor: node.x0 < width / 2 ? 'start' : 'end', + dy: '-.5em', + ...style.labels + }, + // unfortunately this can not be ...node as the version + // found in nodesCopy is modified by the sankey process + ...nodes[i] + }; + })} /> - {!hideLabels && ( - { - return { - x: node.x0 + (node.x0 < width / 2 ? nWidth + 10 : -10), - y: (node.y0 + node.y1) / 2 - marginTop, - label: node.name, - style: { - textAnchor: node.x0 < width / 2 ? 'start' : 'end', - dy: '-.5em', - ...style.labels - }, - // unfortunately this can not be ...node as the version - // found in nodesCopy is modified by the sankey process - ...nodes[i] - }; - })} - /> - )} - {hasVoronoi && ( - d.x0 + (d.x1 - d.x0) / 2} - y={d => d.y0 + (d.y1 - d.y0) / 2} - /> - )} - {children} - - ); - } + )} + {hasVoronoi && ( + d.x0 + (d.x1 - d.x0) / 2} + y={d => d.y0 + (d.y1 - d.y0) / 2} + /> + )} + {children} + + ); } Sankey.defaultProps = { diff --git a/src/sankey/sankey-link.js b/src/sankey/sankey-link.js index ba5289604..619d22eba 100644 --- a/src/sankey/sankey-link.js +++ b/src/sankey/sankey-link.js @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {PureComponent} from 'react'; +import React from 'react'; import {DISCRETE_COLOR_RANGE} from 'theme'; import Animation from 'animation'; import {ANIMATED_SERIES_PROPS} from 'utils/series-utils'; @@ -26,42 +26,40 @@ import {ANIMATED_SERIES_PROPS} from 'utils/series-utils'; const DEFAULT_LINK_COLOR = DISCRETE_COLOR_RANGE[1]; const DEFAULT_LINK_OPACITY = 0.7; -class SankeyLink extends PureComponent { - render() { - const { - animation, - data, - node, - opacity, - color, - strokeWidth, - style, - onLinkClick, - onLinkMouseOver, - onLinkMouseOut - } = this.props; - if (animation) { - return ( - - - - ); - } +function SankeyLink(props) { + const { + animation, + data, + node, + opacity, + color, + strokeWidth, + style, + onLinkClick, + onLinkMouseOver, + onLinkMouseOut + } = props; + if (animation) { return ( - onLinkClick(node, e)} - onMouseOver={e => onLinkMouseOver(node, e)} - onMouseOut={e => onLinkMouseOut(node, e)} - strokeWidth={strokeWidth} - fill="none" - /> + + + ); } + return ( + onLinkClick(node, e)} + onMouseOver={e => onLinkMouseOver(node, e)} + onMouseOut={e => onLinkMouseOut(node, e)} + strokeWidth={strokeWidth} + fill="none" + /> + ); } SankeyLink.displayName = 'SankeyLink'; diff --git a/src/sunburst/index.js b/src/sunburst/index.js index 9e3cd7074..d73b2935d 100644 --- a/src/sunburst/index.js +++ b/src/sunburst/index.js @@ -123,81 +123,79 @@ function buildLabels(mappedData, accessors) { const NOOP = () => {}; -class Sunburst extends React.Component { - render() { - const { - getAngle, - getAngle0, - animation, - className, - children, - data, - height, - hideRootNode, - getLabel, - width, - getSize, - colorType - } = this.props; - const mappedData = getNodesToRender({ - data, - height, - hideRootNode, - width, - getSize - }); - const radialDomain = getRadialDomain(mappedData); - const margin = getRadialLayoutMargin(width, height, radialDomain); - - const labelData = buildLabels(mappedData, { - getAngle, - getAngle0, - getLabel, - getRadius0: d => d.radius0 - }); - - const hofBuilder = f => (e, i) => (f ? f(mappedData[e.index], i) : NOOP); - return ( - - ({ - ...row, - parent: null, - children: null, - index - })) - : mappedData, - _data: animation ? mappedData : null, - arcClassName: `${predefinedClassName}__series--radial__arc`, - ...LISTENERS_TO_OVERWRITE.reduce((acc, propName) => { - const prop = this.props[propName]; - acc[propName] = animation ? hofBuilder(prop) : prop; - return acc; - }, {}) - }} - /> - {labelData.length > 0 && ( - - )} - {children} - - ); - } +function Sunburst(props) { + const { + getAngle, + getAngle0, + animation, + className, + children, + data, + height, + hideRootNode, + getLabel, + width, + getSize, + colorType + } = props; + const mappedData = getNodesToRender({ + data, + height, + hideRootNode, + width, + getSize + }); + const radialDomain = getRadialDomain(mappedData); + const margin = getRadialLayoutMargin(width, height, radialDomain); + + const labelData = buildLabels(mappedData, { + getAngle, + getAngle0, + getLabel, + getRadius0: d => d.radius0 + }); + + const hofBuilder = f => (e, i) => (f ? f(mappedData[e.index], i) : NOOP); + return ( + + ({ + ...row, + parent: null, + children: null, + index + })) + : mappedData, + _data: animation ? mappedData : null, + arcClassName: `${predefinedClassName}__series--radial__arc`, + ...LISTENERS_TO_OVERWRITE.reduce((acc, propName) => { + const prop = props[propName]; + acc[propName] = animation ? hofBuilder(prop) : prop; + return acc; + }, {}) + }} + /> + {labelData.length > 0 && ( + + )} + {children} + + ); } Sunburst.displayName = 'Sunburst'; diff --git a/src/treemap/treemap-dom.js b/src/treemap/treemap-dom.js index 9e4523cb3..24d9741f7 100644 --- a/src/treemap/treemap-dom.js +++ b/src/treemap/treemap-dom.js @@ -21,52 +21,50 @@ import React from 'react'; import TreemapLeaf from './treemap-leaf'; -class TreemapDOM extends React.Component { - render() { - const { - animation, - className, - height, - hideRootNode, - getLabel, - mode, - nodes, - width, - scales, - style - } = this.props; - const useCirclePacking = mode === 'circlePack'; - return ( -
    - {nodes.map((node, index) => { - // throw out the rootest node - if (hideRootNode && !index) { - return null; - } +function TreemapDOM(props) { + const { + animation, + className, + height, + hideRootNode, + getLabel, + mode, + nodes, + width, + scales, + style + } = props; + const useCirclePacking = mode === 'circlePack'; + return ( +
    + {nodes.map((node, index) => { + // throw out the rootest node + if (hideRootNode && !index) { + return null; + } - const nodeProps = { - animation, - node, - getLabel, - ...this.props, - x0: useCirclePacking ? node.x : node.x0, - x1: useCirclePacking ? node.x : node.x1, - y0: useCirclePacking ? node.y : node.y0, - y1: useCirclePacking ? node.y : node.y1, - r: useCirclePacking ? node.r : 1, - scales, - style - }; - return ; - })} -
    - ); - } + const nodeProps = { + animation, + node, + getLabel, + ...props, + x0: useCirclePacking ? node.x : node.x0, + x1: useCirclePacking ? node.x : node.x1, + y0: useCirclePacking ? node.y : node.y0, + y1: useCirclePacking ? node.y : node.y1, + r: useCirclePacking ? node.r : 1, + scales, + style + }; + return ; + })} +
    + ); } TreemapDOM.displayName = 'TreemapDOM'; diff --git a/src/treemap/treemap-leaf.js b/src/treemap/treemap-leaf.js index 170424f82..899f0c9d6 100644 --- a/src/treemap/treemap-leaf.js +++ b/src/treemap/treemap-leaf.js @@ -39,65 +39,64 @@ const ANIMATED_PROPS = [ 'r' ]; -class TreemapLeaf extends React.Component { - render() { - const { - animation, - getLabel, - mode, - node, - onLeafClick, - onLeafMouseOver, - onLeafMouseOut, - r, - scales, - x0, - x1, - y0, - y1, - style - } = this.props; - - if (animation) { - return ( - - - - ); - } - const useCirclePacking = mode === 'circlePack'; - const background = scales.color(node); - const opacity = scales.opacity(node); - const color = getFontColorFromBackground(background); - const {data} = node; - const title = getLabel(data); - const leafStyle = { - top: useCirclePacking ? y0 - r : y0, - left: useCirclePacking ? x0 - r : x0, - width: useCirclePacking ? r * 2 : x1 - x0, - height: useCirclePacking ? r * 2 : y1 - y0, - background, - opacity, - color, - ...style, - ...node.data.style - }; +function TreemapLeaf(props) { + const { + animation, + getLabel, + mode, + node, + onLeafClick, + onLeafMouseOver, + onLeafMouseOut, + r, + scales, + x0, + x1, + y0, + y1, + style + } = props; + if (animation) { return ( -
    onLeafMouseOver(node, event)} - onMouseLeave={event => onLeafMouseOut(node, event)} - onClick={event => onLeafClick(node, event)} - style={leafStyle} - > -
    {title}
    -
    + + + ); } + const useCirclePacking = mode === 'circlePack'; + const background = scales.color(node); + const opacity = scales.opacity(node); + const color = getFontColorFromBackground(background); + const {data} = node; + const title = getLabel(data); + const leafStyle = { + top: useCirclePacking ? y0 - r : y0, + left: useCirclePacking ? x0 - r : x0, + width: useCirclePacking ? r * 2 : x1 - x0, + height: useCirclePacking ? r * 2 : y1 - y0, + background, + opacity, + color, + ...style, + ...node.data.style + }; + + return ( +
    onLeafMouseOver(node, event)} + onMouseLeave={event => onLeafMouseOut(node, event)} + onClick={event => onLeafClick(node, event)} + style={leafStyle} + > +
    {title}
    +
    + ); } + TreemapLeaf.propTypes = { animation: AnimationPropType, height: PropTypes.number.isRequired,