| OLD | NEW |
| 1 // | 1 // |
| 2 // Copyright 2014 Google Inc. All rights reserved. | 2 // Copyright 2014 Google Inc. All rights reserved. |
| 3 // | 3 // |
| 4 // Use of this source code is governed by a BSD-style | 4 // Use of this source code is governed by a BSD-style |
| 5 // license that can be found in the LICENSE file or at | 5 // license that can be found in the LICENSE file or at |
| 6 // https://developers.google.com/open-source/licenses/bsd | 6 // https://developers.google.com/open-source/licenses/bsd |
| 7 // | 7 // |
| 8 | 8 |
| 9 part of charted.charts; | 9 part of charted.charts; |
| 10 | 10 |
| 11 /// Displays tooltip for the values as user moves the mouse pointer over | 11 /// Displays tooltip for the values as user moves the mouse pointer over |
| 12 /// values in the chart. It displays all the active values in the data row | 12 /// values in the chart. It displays all the active values in the data row |
| 13 /// and use the value in the dimension as the title. | 13 /// and use the value in the dimension as the title. |
| 14 @Deprecated('Use Hovercard') | 14 @Deprecated('Use Hovercard') |
| 15 class ChartTooltip implements ChartBehavior { | 15 class ChartTooltip implements ChartBehavior { |
| 16 static const _TOOLTIP_OFFSET = 10; | 16 static const _TOOLTIP_OFFSET = 10; |
| 17 final String orientation; | 17 final String orientation; |
| 18 final bool showDimensionValue; | 18 final bool showDimensionValue; |
| 19 final bool showMeasureTotal; | 19 final bool showMeasureTotal; |
| 20 final bool showSelectedMeasure; | 20 final bool showSelectedMeasure; |
| 21 | 21 |
| 22 ChartArea _area; | 22 ChartArea _area; |
| 23 ChartState _state; | 23 ChartState _state; |
| 24 Selection _tooltipRoot; | 24 Selection _tooltipRoot; |
| 25 SubscriptionsDisposer _disposer = new SubscriptionsDisposer(); | 25 SubscriptionsDisposer _disposer = new SubscriptionsDisposer(); |
| 26 | 26 |
| 27 /// Constructs the tooltip. | 27 /// Constructs the tooltip. |
| 28 /// If [showDimensionValue] is set, displays the dimension value as title. | 28 /// If [showDimensionValue] is set, displays the dimension value as title. |
| 29 /// If [showMeasureTotal] is set, displays the total value. | 29 /// If [showMeasureTotal] is set, displays the total value. |
| 30 ChartTooltip({ | 30 ChartTooltip( |
| 31 this.showSelectedMeasure: false, | 31 {this.showSelectedMeasure: false, |
| 32 this.showDimensionValue: false, | 32 this.showDimensionValue: false, |
| 33 this.showMeasureTotal: false, | 33 this.showMeasureTotal: false, |
| 34 this.orientation: ORIENTATION_RIGHT}); | 34 this.orientation: ORIENTATION_RIGHT}); |
| 35 | 35 |
| 36 /// Sets up listeners for triggering tooltip. | 36 /// Sets up listeners for triggering tooltip. |
| 37 void init(ChartArea area, Selection _, Selection __) { | 37 void init(ChartArea area, Selection _, Selection __) { |
| 38 _area = area; | 38 _area = area; |
| 39 _state = area.state; | 39 _state = area.state; |
| 40 _disposer.addAll([ | 40 _disposer.addAll([ |
| 41 area.onValueMouseOver.listen(show), | 41 area.onValueMouseOver.listen(show), |
| 42 area.onValueMouseOut.listen(hide) | 42 area.onValueMouseOut.listen(hide) |
| 43 ]); | 43 ]); |
| 44 | 44 |
| 45 // Tooltip requires host to be position: relative. | 45 // Tooltip requires host to be position: relative. |
| 46 area.host.style.position = 'relative'; | 46 area.host.style.position = 'relative'; |
| 47 | 47 |
| 48 var _scope = new SelectionScope.element(_area.host); | 48 var _scope = new SelectionScope.element(_area.host); |
| 49 _scope.append('div')..classed('tooltip'); | 49 _scope.append('div')..classed('tooltip'); |
| 50 _tooltipRoot = _scope.select('.tooltip'); | 50 _tooltipRoot = _scope.select('.tooltip'); |
| 51 } | 51 } |
| 52 | 52 |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 85 _tooltipRoot.append('div') | 85 _tooltipRoot.append('div') |
| 86 ..classed('tooltip-total') | 86 ..classed('tooltip-total') |
| 87 ..text((formatter != null) ? formatter(total) : total.toString()); | 87 ..text((formatter != null) ? formatter(total) : total.toString()); |
| 88 } | 88 } |
| 89 | 89 |
| 90 // Find the currently selectedMeasures and hoveredMeasures and show | 90 // Find the currently selectedMeasures and hoveredMeasures and show |
| 91 // tooltip for them, if none is selected/hovered, show all. | 91 // tooltip for them, if none is selected/hovered, show all. |
| 92 var activeMeasures = []; | 92 var activeMeasures = []; |
| 93 if (showSelectedMeasure) { | 93 if (showSelectedMeasure) { |
| 94 activeMeasures.addAll(_state.selection); | 94 activeMeasures.addAll(_state.selection); |
| 95 activeMeasures.add(_state.preview != null ? _state.preview : | 95 activeMeasures |
| 96 _state.hovered.first); | 96 .add(_state.preview != null ? _state.preview : _state.hovered.first); |
| 97 if (activeMeasures.isEmpty) { | 97 if (activeMeasures.isEmpty) { |
| 98 for (var series in _area.config.series) { | 98 for (var series in _area.config.series) { |
| 99 activeMeasures.addAll(series.measures); | 99 activeMeasures.addAll(series.measures); |
| 100 } | 100 } |
| 101 } | 101 } |
| 102 activeMeasures.sort(); | 102 activeMeasures.sort(); |
| 103 } | 103 } |
| 104 | 104 |
| 105 var data = (showSelectedMeasure) ? activeMeasures : e.series.measures; | 105 var data = (showSelectedMeasure) ? activeMeasures : e.series.measures; |
| 106 | 106 |
| 107 // Create the tooltip items base on the number of measures in the series. | 107 // Create the tooltip items base on the number of measures in the series. |
| 108 var items = _tooltipRoot.selectAll('.tooltip-item'). | 108 var items = _tooltipRoot.selectAll('.tooltip-item').data(data); |
| 109 data(data); | |
| 110 items.enter.append('div') | 109 items.enter.append('div') |
| 111 ..classed('tooltip-item') | 110 ..classed('tooltip-item') |
| 112 ..classedWithCallback('active', (d, i, c) => | 111 ..classedWithCallback( |
| 113 !showSelectedMeasure && (d == e.column)); | 112 'active', (d, i, c) => !showSelectedMeasure && (d == e.column)); |
| 114 | 113 |
| 115 // Display the label for the currently active series. | 114 // Display the label for the currently active series. |
| 116 var tooltipItems = _tooltipRoot.selectAll('.tooltip-item'); | 115 var tooltipItems = _tooltipRoot.selectAll('.tooltip-item'); |
| 117 tooltipItems.append('div') | 116 tooltipItems.append('div') |
| 118 ..classed('tooltip-item-label') | 117 ..classed('tooltip-item-label') |
| 119 ..textWithCallback((d, i, c) => _area.data.columns. | 118 ..textWithCallback((d, i, c) => _area.data.columns |
| 120 elementAt((showSelectedMeasure) ? d : | 119 .elementAt((showSelectedMeasure) ? d : e.series.measures.elementAt(i)) |
| 121 e.series.measures.elementAt(i)).label); | 120 .label); |
| 122 | 121 |
| 123 // Display the value of the currently active series | 122 // Display the value of the currently active series |
| 124 tooltipItems.append('div') | 123 tooltipItems.append('div') |
| 125 ..classed('tooltip-item-value') | 124 ..classed('tooltip-item-value') |
| 126 ..styleWithCallback('color', (d, i, c) => | 125 ..styleWithCallback('color', (d, i, c) => _area.theme.getColorForKey(d)) |
| 127 _area.theme.getColorForKey(d)) | |
| 128 ..textWithCallback((d, i, c) { | 126 ..textWithCallback((d, i, c) { |
| 129 var formatter = _getFormatterForColumn(d), | 127 var formatter = _getFormatterForColumn(d), |
| 130 value = _area.data.rows.elementAt(e.row).elementAt(d); | 128 value = _area.data.rows.elementAt(e.row).elementAt(d); |
| 131 return (formatter != null) ? formatter(value) : value.toString(); | 129 return (formatter != null) ? formatter(value) : value.toString(); |
| 132 }); | 130 }); |
| 133 | 131 |
| 134 math.Point position = computeTooltipPosition( | 132 math.Point position = computeTooltipPosition( |
| 135 new math.Point(e.chartX, e.chartY), | 133 new math.Point(e.chartX, e.chartY), |
| 136 _tooltipRoot.first.getBoundingClientRect()); | 134 _tooltipRoot.first.getBoundingClientRect()); |
| 137 | 135 |
| 138 // Set position of the tooltip and display it. | 136 // Set position of the tooltip and display it. |
| 139 _tooltipRoot | 137 _tooltipRoot |
| 140 ..style('left', '${position.x}px') | 138 ..style('left', '${position.x}px') |
| 141 ..style('top', '${position.y}px') | 139 ..style('top', '${position.y}px') |
| 142 ..style('opacity', '1'); | 140 ..style('opacity', '1'); |
| 143 } | 141 } |
| 144 | 142 |
| 145 static String switchPositionDirection(String direction) => | 143 static String switchPositionDirection(String direction) => |
| 146 direction == ORIENTATION_LEFT | 144 direction == ORIENTATION_LEFT ? ORIENTATION_RIGHT : ORIENTATION_LEFT; |
| 147 ? ORIENTATION_RIGHT | |
| 148 : ORIENTATION_LEFT; | |
| 149 | 145 |
| 150 /// Computes the ideal tooltip position based on orientation. | 146 /// Computes the ideal tooltip position based on orientation. |
| 151 math.Point computeTooltipPosition( | 147 math.Point computeTooltipPosition(math.Point coord, math.Rectangle rect) { |
| 152 math.Point coord, math.Rectangle rect) { | |
| 153 var x, y, direction; | 148 var x, y, direction; |
| 154 direction = _area.config.isRTL && _area.config.switchAxesForRTL | 149 direction = _area.config.isRTL && _area.config.switchAxesForRTL |
| 155 ? switchPositionDirection(orientation) | 150 ? switchPositionDirection(orientation) |
| 156 : orientation; | 151 : orientation; |
| 157 | 152 |
| 158 if (direction == ORIENTATION_LEFT) { | 153 if (direction == ORIENTATION_LEFT) { |
| 159 x = coord.x - rect.width - _TOOLTIP_OFFSET; | 154 x = coord.x - rect.width - _TOOLTIP_OFFSET; |
| 160 y = coord.y + _TOOLTIP_OFFSET; | 155 y = coord.y + _TOOLTIP_OFFSET; |
| 161 } else { | 156 } else { |
| 162 x = coord.x + _TOOLTIP_OFFSET; | 157 x = coord.x + _TOOLTIP_OFFSET; |
| (...skipping 28 matching lines...) Expand all Loading... |
| 191 } | 186 } |
| 192 | 187 |
| 193 FormatFunction _getFormatterForColumn(int column) => | 188 FormatFunction _getFormatterForColumn(int column) => |
| 194 _area.data.columns.elementAt(column).formatter; | 189 _area.data.columns.elementAt(column).formatter; |
| 195 | 190 |
| 196 hide(ChartEvent e) { | 191 hide(ChartEvent e) { |
| 197 if (_tooltipRoot == null) return; | 192 if (_tooltipRoot == null) return; |
| 198 _tooltipRoot.style('opacity', '0'); | 193 _tooltipRoot.style('opacity', '0'); |
| 199 } | 194 } |
| 200 } | 195 } |
| 201 | |
| OLD | NEW |