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 |