diff --git a/src/TileChartMap.jsx b/src/TileChartMap.jsx index 98ea65754..51c39d170 100644 --- a/src/TileChartMap.jsx +++ b/src/TileChartMap.jsx @@ -56,7 +56,7 @@ export class TileChartMap extends React.Component { const toggleState = this._toggleState const componentProps = this.props const mapElement = document.getElementById( 'tile-chart-map' ) - const { dataNormalization } = componentProps + const { dataNormalization, hasTip } = componentProps const width = mapElement ? mapElement.clientWidth : 700; const data = updateData( this.props ) @@ -68,6 +68,7 @@ export class TileChartMap extends React.Component { // custom event handlers we can pass on click: toggleState.bind( componentProps ) }, + hasTip, width } @@ -136,6 +137,7 @@ export const mapStateToProps = state => { return { data: processStates( state ), dataNormalization: state.map.dataNormalization, + hasTip: !printMode, printClass: printMode ? 'print' : '', stateFilters: [ ...refStateFilters ], width diff --git a/src/TileChartMap.less b/src/TileChartMap.less index fafecab4d..5854f98de 100644 --- a/src/TileChartMap.less +++ b/src/TileChartMap.less @@ -176,12 +176,6 @@ x/y positioning on the SVG elements. &.selected { stroke: rgba(0, 45, 114, 1); } - - &:hover { - stroke: rgba(0, 45, 114, 1); - stroke-width: 2px !important; - } - } } @@ -225,6 +219,17 @@ x/y positioning on the SVG elements. } } +.cfpb-chart[data-chart-type="tile_map"]:not(.print) { + .highcharts-map-series { + .highcharts-point { + &:hover { + stroke: rgba(0, 45, 114, 1); + stroke-width: 2px !important; + } + } + } +} + @media @tablet-sm { .cfpb-chart[data-chart-type="tile_map"] { width: ~"calc(100% - 20px)"; diff --git a/src/TileMap/index.js b/src/TileMap/index.js index 7ac71d9b4..910e6f60f 100644 --- a/src/TileMap/index.js +++ b/src/TileMap/index.js @@ -362,7 +362,7 @@ const colors = [ Tile Map class */ class TileMap { - constructor( { el, data, isPerCapita, events, height, width } ) { + constructor( { el, data, isPerCapita, events, height, hasTip, width } ) { const scale = makeScale( data, colors ) const quantiles = scale.quantiles() @@ -396,7 +396,7 @@ class TileMap { }, tooltip: { className: 'tooltip', - enabled: true, + enabled: hasTip, headerFormat: '', pointFormatter: tooltipFormatter, useHTML: true @@ -407,6 +407,11 @@ class TileMap { enabled: true, formatter: tileFormatter, useHTML: true + }, + states: { + hover: { + enabled: hasTip + } } } }, @@ -425,8 +430,8 @@ class TileMap { }; // our custom passing of information - if ( events ) { - options.plotOptions.series.events = events; + if ( events && hasTip ) { + options.plotOptions.series.events = events options.plotOptions.series.point = { events: { mouseOver: mouseoverPoint, diff --git a/src/__tests__/TileChartMap.spec.jsx b/src/__tests__/TileChartMap.spec.jsx index bad7ecbbc..9fa4229a4 100644 --- a/src/__tests__/TileChartMap.spec.jsx +++ b/src/__tests__/TileChartMap.spec.jsx @@ -216,6 +216,7 @@ describe( 'component: TileChartMap', () => { ] ], dataNormalization: false, + hasTip: true, printClass: '', stateFilters: [ 'TX' ], width: 1000 diff --git a/src/print.less b/src/print.less index 3fa5ca085..395aa5b5c 100644 --- a/src/print.less +++ b/src/print.less @@ -68,6 +68,7 @@ .state-heading .clear, .state-navigation, .m-pagination, + .warning, footer { display: none !important; }