| 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 |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 93 void _hideMoreItem() { | 93 void _hideMoreItem() { |
| 94 var tooltip = _root.select('.chart-legend-more-tooltip'); | 94 var tooltip = _root.select('.chart-legend-more-tooltip'); |
| 95 tooltip.style('opacity', '0'); | 95 tooltip.style('opacity', '0'); |
| 96 } | 96 } |
| 97 | 97 |
| 98 // Displays remaining legend items as a tooltip | 98 // Displays remaining legend items as a tooltip |
| 99 void _displayMoreItem(Iterable<ChartLegendItem> items) { | 99 void _displayMoreItem(Iterable<ChartLegendItem> items) { |
| 100 var tooltip = _root.select('.chart-legend-more-tooltip'); | 100 var tooltip = _root.select('.chart-legend-more-tooltip'); |
| 101 if (tooltip.isEmpty) { | 101 if (tooltip.isEmpty) { |
| 102 tooltip = _root.select('.chart-legend-more').append('div') | 102 tooltip = _root.select('.chart-legend-more').append('div') |
| 103 ..classed('chart-legend-more-tooltip'); | 103 ..classed('chart-legend-more-tooltip'); |
| 104 } | 104 } |
| 105 tooltip.style('opacity', '1'); | 105 tooltip.style('opacity', '1'); |
| 106 | 106 |
| 107 // _createLegendItems(tooltip, 'chart-legend-more', items); | 107 // _createLegendItems(tooltip, 'chart-legend-more', items); |
| 108 } | 108 } |
| 109 | 109 |
| 110 /// Creates legend items starting at the given index. | 110 /// Creates legend items starting at the given index. |
| 111 void _createLegendItems() { | 111 void _createLegendItems() { |
| 112 var state = _area.state, | 112 var state = _area.state, |
| 113 rows = _root.selectAll( | 113 rows = |
| 114 '.chart-legend-row').data(_items, (x) => x.hashCode), | 114 _root.selectAll('.chart-legend-row').data(_items, (x) => x.hashCode), |
| 115 isFirstRender = rows.length == 0; | 115 isFirstRender = rows.length == 0; |
| 116 | 116 |
| 117 var enter = rows.enter.appendWithCallback((d, i, e) { | 117 var enter = rows.enter.appendWithCallback((d, i, e) { |
| 118 var row = Namespace.createChildElement('div', e), | 118 var row = Namespace.createChildElement('div', e), |
| 119 color = Namespace.createChildElement('div', e) | 119 color = Namespace.createChildElement('div', e) |
| 120 ..className = 'chart-legend-color', | 120 ..className = 'chart-legend-color', |
| 121 label = Namespace.createChildElement('div', e) | 121 label = Namespace.createChildElement('div', e) |
| 122 ..className = 'chart-legend-label', | 122 ..className = 'chart-legend-label', |
| 123 value = showValues ? (Namespace.createChildElement('div', e) | 123 value = showValues |
| 124 ..className = 'chart-legend-value') : null; | 124 ? (Namespace.createChildElement('div', e) |
| 125 ..className = 'chart-legend-value') |
| 126 : null; |
| 125 | 127 |
| 126 var rowStyles = ['chart-legend-row'].toList(); | 128 var rowStyles = ['chart-legend-row'].toList(); |
| 127 | 129 |
| 128 // If this is the first time we are adding rows, | 130 // If this is the first time we are adding rows, |
| 129 // Update elements before adding them to the DOM. | 131 // Update elements before adding them to the DOM. |
| 130 if (isFirstRender) { | 132 if (isFirstRender) { |
| 131 if (state != null) { | 133 if (state != null) { |
| 132 if (d.index == state.preview) { | 134 if (d.index == state.preview) { |
| 133 rowStyles.add('chart-legend-hover'); | 135 rowStyles.add('chart-legend-hover'); |
| 134 } | 136 } |
| 135 if (state.isSelected(d.index)) { | 137 if (state.isSelected(d.index)) { |
| 136 rowStyles.add('chart-legend-selected'); | 138 rowStyles.add('chart-legend-selected'); |
| 137 } | 139 } |
| 138 } | 140 } |
| 139 rowStyles.addAll( | 141 rowStyles |
| 140 d.series.map((ChartSeries x) => 'type-${x.renderer.name}')); | 142 .addAll(d.series.map((ChartSeries x) => 'type-${x.renderer.name}')); |
| 141 | 143 |
| 142 color.style.setProperty('background-color', d.color); | 144 color.style.setProperty('background-color', d.color); |
| 143 row.append(color); | 145 row.append(color); |
| 144 label.text = d.label; | 146 label.text = d.label; |
| 145 row.append(label); | 147 row.append(label); |
| 146 | 148 |
| 147 if (showValues) { | 149 if (showValues) { |
| 148 value.text = d.value; | 150 value.text = d.value; |
| 149 value.style.setProperty('color', d.color); | 151 value.style.setProperty('color', d.color); |
| 150 row.append(value); | 152 row.append(value); |
| (...skipping 28 matching lines...) Expand all Loading... |
| 179 ..text = d.value | 181 ..text = d.value |
| 180 ..style.setProperty('color', d.color); | 182 ..style.setProperty('color', d.color); |
| 181 } | 183 } |
| 182 }); | 184 }); |
| 183 } | 185 } |
| 184 | 186 |
| 185 if (state != null) { | 187 if (state != null) { |
| 186 enter | 188 enter |
| 187 ..on('mouseover', (d, i, e) => state.preview = d.index) | 189 ..on('mouseover', (d, i, e) => state.preview = d.index) |
| 188 ..on('mouseout', (d, i, e) { | 190 ..on('mouseout', (d, i, e) { |
| 189 if (state.preview == d.index) { | 191 if (state.preview == d.index) { |
| 190 state.preview = null; | 192 state.preview = null; |
| 191 } | 193 } |
| 192 }) | 194 }) |
| 193 ..on('click', (d, i, e) { | 195 ..on('click', (d, i, e) { |
| 194 if (state.isSelected(d.index)) { | 196 if (state.isSelected(d.index)) { |
| 195 state.unselect(d.index); | 197 state.unselect(d.index); |
| 196 } else { | 198 } else { |
| 197 state.select(d.index); | 199 state.select(d.index); |
| 198 } | 200 } |
| 199 }); | 201 }); |
| 200 } | 202 } |
| 201 | 203 |
| 202 rows.exit.remove(); | 204 rows.exit.remove(); |
| 203 } | 205 } |
| 204 | 206 |
| 205 /// Update legend to show chart's selection and visibility. | 207 /// Update legend to show chart's selection and visibility. |
| 206 void _handleStateChanges(_) => _createLegendItems(); | 208 void _handleStateChanges(_) => _createLegendItems(); |
| 207 } | 209 } |
| OLD | NEW |