diff --git a/docs/custom-svg-series.md b/docs/custom-svg-series.md index ca2bed590..294115317 100644 --- a/docs/custom-svg-series.md +++ b/docs/custom-svg-series.md @@ -101,3 +101,11 @@ Callback is triggered with two arguments. `value` is the data point, `info` obje - `index` is the index of the data point in the array of data; - `event` is the event object. See [interaction](interaction.md) + +#### onValueMouseOver (optional) +Type: `function(d, {event})` +`mouseover` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property. + +#### onValueMouseOut (optional) +Type: `function(d, {event})` +`mouseout` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property. diff --git a/docs/radar-chart.md b/docs/radar-chart.md index 00c396dbb..ba88e5152 100644 --- a/docs/radar-chart.md +++ b/docs/radar-chart.md @@ -145,3 +145,23 @@ Specify the tick format for all axes. Will be over-ridden by tickFormats specifi Type: `number` The angle of the first axis in radians. Defaults to PI / 2. + +#### renderAxesOverPolygons (optional) +Type: `boolean` +By default, the axes are rendered beneath the data (polygons) on the radar chart. Setting this to true will reverse the rendering, drawing the axes on top. This can be useful if you have a lot of data or your polygons have high opacity. + +#### onValueMouseOver (optional) +Type: `function(d, {event})` +`mouseover` event handler for the elements corresponding separate data points, where each data point is a point on the radar chart. First argument received, `d`, is the relevant data point, including the `domain`, `name`, and `value` of the data point. The second argument is the `event` property. + +#### onValueMouseOut (optional) +Type: `function(d, {event})` +`mouseout` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property. + +#### onSeriesMouseOver (optional) +Type: `function(d, {event})` +`mouseover` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property. + +#### onSeriesMouseOut (optional) +Type: `function(d, {event})` +`mouseout` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property. diff --git a/showcase/index.js b/showcase/index.js index 4df0d4d5a..f4a99ba8a 100644 --- a/showcase/index.js +++ b/showcase/index.js @@ -140,6 +140,8 @@ import ArcSeriesExample from './radial-chart/arc-series-example'; import BasicRadarChart from './radar-chart/basic-radar-chart'; import AnimatedRadarChart from './radar-chart/animated-radar-chart'; import FourQuadrantRadarChart from './radar-chart/four-quadrant-radar-chart'; +import RadarChartWithTooltips from './radar-chart/radar-chart-with-tooltips'; +import RadarChartSeriesTooltips from './radar-chart/radar-chart-series-tooltips'; import BasicParallelCoordinates from './parallel-coordinates/basic-parallel-coordinates'; import AnimatedParallelCoordinates from './parallel-coordinates/animated-parallel-coordinates'; @@ -270,6 +272,8 @@ const mainShowCase = { AnimatedRadarChart, BasicRadarChart, FourQuadrantRadarChart, + RadarChartWithTooltips, + RadarChartSeriesTooltips, BasicParallelCoordinates, AnimatedParallelCoordinates, diff --git a/showcase/plot/custom-svg-all-the-marks.js b/showcase/plot/custom-svg-all-the-marks.js index 2499c1ed0..30e5a9a7a 100644 --- a/showcase/plot/custom-svg-all-the-marks.js +++ b/showcase/plot/custom-svg-all-the-marks.js @@ -26,7 +26,8 @@ import { YAxis, VerticalGridLines, HorizontalGridLines, - CustomSVGSeries + CustomSVGSeries, + Hint } from 'index'; import ShowcaseButton from '../showcase-components/showcase-button'; @@ -52,12 +53,21 @@ function generateData(reversed) { const DATA = generateData(false); const REVERSED_DATA = generateData(true); +const tipStyle = { + display: 'flex', + color: '#fff', + background: '#000', + alignItems: 'center', + padding: '5px' +}; + export default class Example extends React.Component { state = { reverse: false }; render() { - const {reverse} = this.state; + const {reverse, hoveredCell} = this.state; + return (
{ + this.setState({hoveredCell: v}); + }} + onValueMouseOut={v => this.setState({hoveredCell: false})} /> + {hoveredCell && ( + +
+ {hoveredCell.customComponent} +
+ + )}
); diff --git a/showcase/radar-chart/radar-chart-series-tooltips.js b/showcase/radar-chart/radar-chart-series-tooltips.js new file mode 100644 index 000000000..218ce819d --- /dev/null +++ b/showcase/radar-chart/radar-chart-series-tooltips.js @@ -0,0 +1,110 @@ +// Copyright (c) 2016 - 2017 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, {Component} from 'react'; +import {format} from 'd3-format'; + +import RadarChart from 'radar-chart'; +import {Hint} from 'index'; + + +const DATA = [ + { + name: 'Mercedes', + mileage: 7, + price: 10, + safety: 8, + performance: 9, + interior: 7, + warranty: 7 + }, + { + name: 'Honda', + mileage: 8, + price: 6, + safety: 9, + performance: 6, + interior: 3, + warranty: 9 + }, + { + name: 'Chevrolet', + mileage: 5, + price: 4, + safety: 6, + performance: 4, + interior: 5, + warranty: 6 + } +]; + +const basicFormat = format('.2r'); +const wideFormat = format('.3r'); + +const tipStyle = { + display: 'flex', + color: '#fff', + background: '#000', + alignItems: 'center', + padding: '5px' +}; + +export default class BasicRadarChart extends Component { + state = { + hoveredCell: false + }; + + render() { + const {hoveredCell} = this.state; + + 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} + onSeriesMouseOver={(data) => { + this.setState({hoveredCell: data.event[0]}); + }} + onSeriesMouseOut={() => this.setState({hoveredCell: false})} + > + {hoveredCell && ( + +
{hoveredCell.name}
+ + )} + + ); + } +} diff --git a/showcase/radar-chart/radar-chart-with-tooltips.js b/showcase/radar-chart/radar-chart-with-tooltips.js new file mode 100644 index 000000000..35fe75fa2 --- /dev/null +++ b/showcase/radar-chart/radar-chart-with-tooltips.js @@ -0,0 +1,193 @@ +// Copyright (c) 2016 - 2017 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, {Component} from 'react'; +import RadarChart from 'radar-chart'; +import {Hint} from 'index'; + +// The first 6 data elements here are to simulate a 'spider' type of radar chart - +// similar to CircularGridLines, but straight edges instead. +const DATA = [ + { + name: 'Spider5', + mileage: 5, + price: 5, + safety: 5, + performance: 5, + interior: 5, + warranty: 5, + fill: '#f8f8f8', + stroke: '#cccccc' + }, + { + name: 'Spider4', + mileage: 4, + price: 4, + safety: 4, + performance: 4, + interior: 4, + warranty: 4, + fill: 'white', + stroke: '#cccccc' + }, + { + name: 'Spider3', + mileage: 3, + price: 3, + safety: 3, + performance: 3, + interior: 3, + warranty: 3, + fill: '#f8f8f8', + stroke: '#cccccc' + }, + { + name: 'Spider2', + mileage: 2, + price: 2, + safety: 2, + performance: 2, + interior: 2, + warranty: 2, + fill: 'white', + stroke: '#cccccc' + }, + { + name: 'Spider1', + mileage: 1, + price: 1, + safety: 1, + performance: 1, + interior: 1, + warranty: 1, + fill: '#f8f8f8', + stroke: '#cccccc' + }, + { + name: 'Spider0', + mileage: 0.1, + price: 0.1, + safety: 0.1, + performance: 0.1, + interior: 0.1, + warranty: 0.1, + fill: '#f8f8f8', + stroke: '#cccccc' + }, + { + name: 'Mercedes', + mileage: 3, + price: 4, + safety: 5, + performance: 1.5, + interior: 4, + warranty: 4.5, + fill: 'rgba(114,172,240,0.5)', + stroke: 'rgba(114,172,240,0.2)' + } +]; + +const tipStyle = { + display: 'flex', + color: '#fff', + background: '#000', + alignItems: 'center', + padding: '5px' +}; + +export default class RadarChartWithTooltips extends Component { + state = { + hoveredCell: false + }; + + render() { + const {hoveredCell} = this.state; + + return ( + { + return ''; + }} + domains={[ + { + name: 'mileage', + domain: [0, 5], + tickFormat: t => { + if (t < 5 && t > 0) { + return Math.round(t); + } + return ''; + } + }, + { + name: 'price', + domain: [0, 5], + getValue: d => d.price + }, + {name: 'safety', domain: [0, 5], getValue: d => d.safety}, + {name: 'performance', domain: [0, 5], getValue: d => d.performance}, + {name: 'interior', domain: [0, 5], getValue: d => d.interior}, + {name: 'warranty', domain: [0, 5], getValue: d => d.warranty} + ]} + width={300} + height={300} + onValueMouseOver={v => { + this.setState({hoveredCell: v}); + }} + onValueMouseOut={v => this.setState({hoveredCell: false})} + style={{ + polygons: { + strokeWidth: 1, + strokeOpacity: 0.8, + fillOpacity: 0.8 + }, + labels: { + textAnchor: 'middle' + }, + axes: { + line: { + fillOpacity: 0.8, + strokeWidth: 0.5, + strokeOpacity: 0.8 + }, + ticks: { + fillOpacity: 0, + strokeOpacity: 0 + }, + text: {} + } + }} + colorRange={['transparent']} + hideInnerMostValues={false} + renderAxesOverPolygons={true} + > + {hoveredCell && + hoveredCell.dataName === 'Mercedes' && ( + +
+ {hoveredCell.domain}: {hoveredCell.value} +
+ + )} + + ); + } +} diff --git a/showcase/showcase-links.js b/showcase/showcase-links.js index dfd9de667..c05b8249c 100644 --- a/showcase/showcase-links.js +++ b/showcase/showcase-links.js @@ -136,6 +136,11 @@ export const SHOWCASE_LINKS = { 'https://github.com/uber/react-vis/blob/master/showcase/radar-chart/basic-radar-chart.js', FourQuadrantRadarChart: 'https://github.com/uber/react-vis/blob/master/showcase/radar-chart/four-quadrant-radar-chart.js', + RadarChartWithTooltips: + 'https://github.com/uber/react-vis/blob/master/showcase/radar-chart/radar-chart-with-tooltips.js', + RadarChartSeriesTooltips: + 'https://github.com/uber/react-vis/blob/master/showcase/radar-chart/radar-chart-series-tooltips.js', + // RADIAL CHART SHOWCASE LINKS SimpleRadialChart: 'https://github.com/uber/react-vis/blob/master/showcase/radial-chart/simple-radial-chart.js', diff --git a/showcase/showcase-sections/plots-showcase.js b/showcase/showcase-sections/plots-showcase.js index 9c9961ef0..617f47f43 100644 --- a/showcase/showcase-sections/plots-showcase.js +++ b/showcase/showcase-sections/plots-showcase.js @@ -208,7 +208,7 @@ const PLOTS = [ componentName: 'CustomSVGExample' }, { - name: 'Custom SVG - All The Mark', + name: 'Custom SVG - All The Marks (with tooltips)', component: CustomSVGAllTheMarks, componentName: 'CustomSVGAllTheMarks' }, diff --git a/showcase/showcase-sections/radar-showcase.js b/showcase/showcase-sections/radar-showcase.js index cd8c4fbc8..b5be2cc2f 100644 --- a/showcase/showcase-sections/radar-showcase.js +++ b/showcase/showcase-sections/radar-showcase.js @@ -2,27 +2,36 @@ import React from 'react'; import {mapSection} from '../showcase-components/showcase-utils'; import {showCase} from '../index'; -const {AnimatedRadarChart, BasicRadarChart, FourQuadrantRadarChart} = showCase; +const { + AnimatedRadarChart, + BasicRadarChart, + FourQuadrantRadarChart, + RadarChartWithTooltips, + RadarChartSeriesTooltips, +} = showCase; -const RADAR = [ - { - name: 'Basic Radar Chart', - component: BasicRadarChart, - componentName: 'BasicRadarChart', - sourceLink: - 'https://github.com/uber/react-vis/blob/master/src/radar-chart/index.js', - docsLink: - 'http://uber.github.io/react-vis/documentation/other-charts/radar-chart' - }, - { - name: 'Animated Radar Chart', - component: AnimatedRadarChart, - componentName: 'AnimatedRadarChart' - }, - { - name: 'Four Quadrant Radar Chart', - component: FourQuadrantRadarChart, - componentName: 'FourQuadrantRadarChart' +const RADAR = [{ + name: 'Basic Radar Chart', + component: BasicRadarChart, + componentName: 'BasicRadarChart', + sourceLink: 'https://github.com/uber/react-vis/blob/master/src/radar-chart/index.js', + docsLink: 'http://uber.github.io/react-vis/documentation/other-charts/radar-chart' +}, { + name: 'Animated Radar Chart', + component: AnimatedRadarChart, + componentName: 'AnimatedRadarChart' +}, { + name: 'Four Quadrant Radar Chart', + component: FourQuadrantRadarChart, + componentName: 'FourQuadrantRadarChart' +}, { + name: 'Radar Chart with Tooltips', + component: RadarChartWithTooltips, + componentName: 'RadarChartWithTooltips' +}, { + name: 'Radar Chart with Series Tooltips', + component: RadarChartSeriesTooltips, + componentName: 'RadarChartSeriesTooltips' } ]; diff --git a/src/plot/series/custom-svg-series.js b/src/plot/series/custom-svg-series.js index 02240f4d9..64caba59a 100644 --- a/src/plot/series/custom-svg-series.js +++ b/src/plot/series/custom-svg-series.js @@ -46,7 +46,7 @@ function predefinedComponents(type, size = 2, style = DEFAULT_STYLE) { case 'star': const starPoints = [...new Array(5)] .map((c, index) => { - const angle = (index / 5) * Math.PI * 2; + const angle = index / 5 * Math.PI * 2; const innerAngle = angle + Math.PI / 10; const outerAngle = angle - Math.PI / 10; // ratio of inner polygon to outer polgyon @@ -89,13 +89,14 @@ function getInnerComponent({ defaultType, positionInPixels, positionFunctions, - style + style, + propsSize }) { const {size} = customComponent; const aggStyle = {...style, ...(customComponent.style || {})}; const innerComponent = customComponent.customComponent; if (!innerComponent && typeof defaultType === 'string') { - return predefinedComponents(defaultType, size, aggStyle); + return predefinedComponents(defaultType, size || propsSize, aggStyle); } // if default component is a function if (!innerComponent) { @@ -119,7 +120,8 @@ class CustomSVGSeries extends AbstractSeries { innerWidth, marginLeft, marginTop, - style + style, + size } = this.props; if (!data || !innerWidth || !innerHeight) { @@ -146,13 +148,16 @@ class CustomSVGSeries extends AbstractSeries { positionInPixels, defaultType: customComponent, positionFunctions: {x, y}, - style + style, + propsSize: size }); return ( this._valueMouseOverHandler(seriesComponent, e)} + onMouseLeave={e => this._valueMouseOutHandler(seriesComponent, e)} > {innerComponent} @@ -181,14 +186,18 @@ CustomSVGSeries.propTypes = { ).isRequired, marginLeft: PropTypes.number, marginTop: PropTypes.number, - style: PropTypes.object + style: PropTypes.object, + size: PropTypes.number, + onValueMouseOver: PropTypes.func, + onValueMouseOut: PropTypes.func }; CustomSVGSeries.defaultProps = { ...AbstractSeries.defaultProps, animation: false, customComponent: 'circle', - style: {} + style: {}, + size: 2 }; export default CustomSVGSeries; diff --git a/src/plot/series/polygon-series.js b/src/plot/series/polygon-series.js index 8566639b1..50ded24e8 100644 --- a/src/plot/series/polygon-series.js +++ b/src/plot/series/polygon-series.js @@ -70,8 +70,8 @@ class PolygonSeries extends AbstractSeries { this._seriesMouseOverHandler(data, e), + onMouseOut: e => this._seriesMouseOutHandler(data, e), onClick: this._seriesClickHandler, onContextMenu: this._seriesRightClickHandler, fill: color || DEFAULT_COLOR, diff --git a/src/radar-chart/index.js b/src/radar-chart/index.js index 9644205fa..79dcb680f 100644 --- a/src/radar-chart/index.js +++ b/src/radar-chart/index.js @@ -27,6 +27,7 @@ import {AnimationPropType} from 'animation'; import XYPlot from 'plot/xy-plot'; import {DISCRETE_COLOR_RANGE} from 'theme'; import {MarginPropType} from 'utils/chart-utils'; +import MarkSeries from 'plot/series/mark-series'; import PolygonSeries from 'plot/series/polygon-series'; import LabelSeries from 'plot/series/label-series'; import DecorativeAxis from 'plot/axis/decorative-axis'; @@ -137,11 +138,9 @@ function getLabels(props) { * @return {Array} the plotted axis components */ function getPolygons(props) { - const {animation, colorRange, domains, data, style, startingAngle} = props; + const {animation, colorRange, domains, data, style, startingAngle, onSeriesMouseOver, onSeriesMouseOut} = props; const scales = domains.reduce((acc, {domain, name}) => { - acc[name] = scaleLinear() - .domain(domain) - .range([0, 1]); + acc[name] = scaleLinear().domain(domain).range([0, 1]); return acc; }, {}); @@ -152,7 +151,7 @@ function getPolygons(props) { const angle = (index / domains.length) * Math.PI * 2 + startingAngle; // dont let the radius become negative const radius = Math.max(scales[name](dataPoint), 0); - return {x: radius * Math.cos(angle), y: radius * Math.sin(angle)}; + return {x: radius * Math.cos(angle), y: radius * Math.sin(angle), name: row.name}; }); return ( @@ -168,11 +167,79 @@ function getPolygons(props) { row.color || row.fill || colorRange[rowIndex % colorRange.length], ...style.polygons }} + onSeriesMouseOver={onSeriesMouseOver} + onSeriesMouseOut={onSeriesMouseOut} /> ); }); } +/** + * Generate circles at the polygon points for Hover functionality + * @param {Object} props + - props.animation {Boolean} + - props.data {Array} array of object specifying what values are to be plotted + - props.domains {Array} array of object specifying the way each axis is to be plotted + - props.startingAngle {number} the initial angle offset + - props.style {object} style object for the whole chart + - props.onValueMouseOver {function} function to call on mouse over a polygon point + - props.onValueMouseOver {function} function to call when mouse leaves a polygon point + * @return {Array} the plotted axis components + */ +function getPolygonPoints(props) { + const { + animation, + domains, + data, + startingAngle, + style, + onValueMouseOver, + onValueMouseOut + } = props; + if (!onValueMouseOver) { + return; + } + const scales = domains.reduce((acc, {domain, name}) => { + acc[name] = scaleLinear() + .domain(domain) + .range([0, 1]); + return acc; + }, {}); + return data.map((row, rowIndex) => { + const mappedData = domains.map(({name, getValue}, index) => { + const dataPoint = getValue ? getValue(row) : row[name]; + // error handling if point doesn't exist + const angle = (index / domains.length) * Math.PI * 2 + startingAngle; + // dont let the radius become negative + const radius = Math.max(scales[name](dataPoint), 0); + return { + x: radius * Math.cos(angle), + y: radius * Math.sin(angle), + domain: name, + value: dataPoint, + dataName: row.name + }; + }); + + return ( + + ); + }); +} + function RadarChart(props) { const { animation, @@ -189,49 +256,75 @@ function RadarChart(props) { startingAngle, style, tickFormat, - width + width, + renderAxesOverPolygons, + onValueMouseOver, + onValueMouseOut, + onSeriesMouseOver, + onSeriesMouseOut } = 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, + onSeriesMouseOver, + onSeriesMouseOut +}); + +const polygonPoints = getPolygonPoints({ + animation, + colorRange, + domains, + data, + startingAngle, + style, + onValueMouseOver, + onValueMouseOut +}); + +const labelSeries = ( + +); +return ( + + {children} + {!renderAxesOverPolygons && + axes + .concat(polygons) + .concat(labelSeries) + .concat(polygonPoints)} + {renderAxesOverPolygons && + polygons + .concat(labelSeries) + .concat(axes) + .concat(polygonPoints)} + ); } @@ -259,7 +352,12 @@ RadarChart.propTypes = { polygons: PropTypes.object }), tickFormat: PropTypes.func, - width: PropTypes.number.isRequired + width: PropTypes.number.isRequired, + renderAxesOverPolygons: PropTypes.bool, + onValueMouseOver: PropTypes.func, + onValueMouseOut: PropTypes.func, + onSeriesMouseOver: PropTypes.func, + onSeriesMouseOut: PropTypes.func }; RadarChart.defaultProps = { className: '', @@ -283,7 +381,8 @@ RadarChart.defaultProps = { fillOpacity: 0.1 } }, - tickFormat: DEFAULT_FORMAT + tickFormat: DEFAULT_FORMAT, + renderAxesOverPolygons: false }; export default RadarChart; diff --git a/tests/components/custom-svg-series-tests.js b/tests/components/custom-svg-series-tests.js index ab0d6d154..97d753fd7 100644 --- a/tests/components/custom-svg-series-tests.js +++ b/tests/components/custom-svg-series-tests.js @@ -75,12 +75,23 @@ test('CustomSVGSeries: Showcase Example - CustomSVGRootLevelComponent', t => { }); test('CustomSVGSeries: Showcase Example - CustomSVGAllTheMarks', t => { + const textContent = 'REVERSE0123402468101214'; + const hoverText = 'star'; + const $ = mount(); t.equal( $.text(), - 'REVERSE0123402468101214', + textContent, 'should fine the right text content' ); + $.find('.rv-xy-plot__series--custom-svg') + .at(0) + .simulate('mouseEnter'); + t.equal( + $.text(), + `${textContent}${hoverText}`, + 'should fine the right text content on hover' + ); t.equal( $.find('.rv-xy-plot__series--custom-svg').length, 20, diff --git a/tests/components/radar-chart-tests.js b/tests/components/radar-chart-tests.js index 416b303cc..66448864b 100644 --- a/tests/components/radar-chart-tests.js +++ b/tests/components/radar-chart-tests.js @@ -5,6 +5,8 @@ import RadialChart from 'radial-chart'; import BasicRadarChart from '../../showcase/radar-chart/basic-radar-chart'; import AnimatedRadarChart from '../../showcase/radar-chart/animated-radar-chart'; import FourQuadrantRadarChart from '../../showcase/radar-chart/four-quadrant-radar-chart'; +import RadarChartWithTooltips from '../../showcase/radar-chart/radar-chart-with-tooltips'; +import RadarChartSeriesTooltips from '../../showcase/radar-chart/radar-chart-series-tooltips'; import {testRenderWithProps} from '../test-utils'; @@ -49,6 +51,7 @@ test('Radar: Showcase Example - Basic Radar Chart', t => { '2.004.006.008.0010.0$4.8$7.6$10$13$166.007.008.009.0010.02.004.006.008.0010.01.402.804.205.607.008.406.805.203.602.00mileagepricesafetyperformanceinteriorwarranty', 'should find the right text content' ); + t.equal($.find('.rv-xy-plot__series--custom-svg').length, 0, 'should find the right number of polygon points (0 because onMouseOver is not defined)'); t.end(); }); @@ -63,7 +66,7 @@ test('Radar: Showcase Example - Animated Radial ', t => { t.equal( $.find('.rv-radar-chart-polygon').length, 1, - 'should find the right number of axes' + 'should find the right number of polygons' ); t.equal( $.find('.rv-radar-chart').text(), @@ -92,7 +95,7 @@ test('Radar: Showcase Example - Animated Radial ', t => { '20406080100niceexplosionswowdogsickMoves', 'should find the right text content' ); - + t.equal($.find('.rv-xy-plot__series--custom-svg').length, 0, 'should find the right number of polygon points (0 because onMouseOver is not defined)'); t.end(); }); @@ -119,5 +122,76 @@ test('Radar: Showcase Example - Four Quadrant Radar Chart', t => { '20406080100204060801002040608010020406080100CVisualBasicsExcelAccess', 'should find the right text content' ); + t.equal($.find('.rv-xy-plot__series--custom-svg').length, 0, 'should find the right number of polygon points (0 because onMouseOver is not defined)'); + t.end(); +}); + +test('Radar: Showcase Example - Radar Chart with Tooltips', t => { + const $ = mount(); + const chartText = 'mileagepricesafetyperformanceinteriorwarranty1234'; + t.equal($.find('.rv-radar-chart').length, 1, 'should find a radar chart'); + t.equal( + $.find('.rv-xy-manipulable-axis__ticks').length, + 6, + 'should find the right number of axes' + ); + t.equal( + $.find('.rv-radar-chart-polygon').length, + 7, + 'should find the right number of polygons' + ); + t.equal( + $.find('.rv-radar-chart-polygonPoint').length, + 7, + 'should find the right number of polygon points' + ); + t.equal( + $.find('.rv-radar-chart').text(), + chartText, + 'should find the right text content' + ); + + // Tooltips + const tooltipText = 'mileage: 3'; + $.find('.rv-xy-plot__series .rv-xy-plot__series--mark .rv-radar-chart-polygonPoint') + .at(6) + .children().at(0) + .simulate('mouseOver'); + t.equal($.text(), `${chartText}${tooltipText}`, 'should display tooltip text'); t.end(); }); + +test('Radar: Showcase Example - series tooltips', t => { + const $ = mount(); + const chartText = '2.004.006.008.0010.0$4.8$7.6$10$13$166.007.008.009.0010.02.004.006.008.0010.01.402.804.205.607.008.406.805.203.602.00mileagepricesafetyperformanceinteriorwarranty'; + const hoverText = 'Mercedes'; + + t.equal($.find('.rv-radar-chart').length, 1, 'should find a radar chart'); + t.equal( + $.find('.rv-xy-manipulable-axis__ticks').length, + 6, + 'should find the right number of axes' + ); + t.equal( + $.find('.rv-radar-chart-polygon').length, + 3, + 'should find the right number of polygons' + ); + t.equal( + $.find('.rv-radar-chart').text(), + chartText, + 'should find the right text content' + ); + t.equal( + $.find('.rv-xy-plot__series--custom-svg').length, + 0, + 'should find the right number of polygon points (0 because onMouseOver is not defined)' + ); + $.find('.rv-radar-chart-polygon').at(0).simulate('mouseOver'); + t.equal( + $.find('.rv-radar-chart').text(), + `${chartText}${hoverText}`, + 'should find hover text for the series mouseOver' + ); + t.end(); +}); \ No newline at end of file