| 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 library charted.svg.axis; | 9 library charted.svg.axis; |
| 10 | 10 |
| (...skipping 25 matching lines...) Expand all Loading... |
| 36 | 36 |
| 37 /// Padding on the ticks | 37 /// Padding on the ticks |
| 38 final num tickPadding; | 38 final num tickPadding; |
| 39 | 39 |
| 40 /// List of values to be used on the ticks | 40 /// List of values to be used on the ticks |
| 41 List _tickValues; | 41 List _tickValues; |
| 42 | 42 |
| 43 /// Formatter for the tick labels | 43 /// Formatter for the tick labels |
| 44 FormatFunction _tickFormat; | 44 FormatFunction _tickFormat; |
| 45 | 45 |
| 46 SvgAxis({ | 46 SvgAxis( |
| 47 this.orientation: ORIENTATION_BOTTOM, | 47 {this.orientation: ORIENTATION_BOTTOM, |
| 48 this.innerTickSize: 6, | 48 this.innerTickSize: 6, |
| 49 this.outerTickSize: 6, | 49 this.outerTickSize: 6, |
| 50 this.tickPadding: 3, | 50 this.tickPadding: 3, |
| 51 Iterable tickValues, | 51 Iterable tickValues, |
| 52 FormatFunction tickFormat, | 52 FormatFunction tickFormat, |
| 53 Scale scale }) : scale = scale == null ? new LinearScale() : scale { | 53 Scale scale}) |
| 54 _tickFormat = tickFormat == null | 54 : scale = scale == null ? new LinearScale() : scale { |
| 55 ? this.scale.createTickFormatter() | 55 _tickFormat = |
| 56 : tickFormat; | 56 tickFormat == null ? this.scale.createTickFormatter() : tickFormat; |
| 57 _tickValues = isNullOrEmpty(tickValues) ? this.scale.ticks : tickValues; | 57 _tickValues = isNullOrEmpty(tickValues) ? this.scale.ticks : tickValues; |
| 58 } | 58 } |
| 59 | 59 |
| 60 Iterable get tickValues => _tickValues; | 60 Iterable get tickValues => _tickValues; |
| 61 | 61 |
| 62 FormatFunction get tickFormat => _tickFormat; | 62 FormatFunction get tickFormat => _tickFormat; |
| 63 | 63 |
| 64 /// Draw an axis on each non-null element in selection | 64 /// Draw an axis on each non-null element in selection |
| 65 draw(Selection g, {SvgAxisTicks axisTicksBuilder, bool isRTL: false}) => | 65 draw(Selection g, {SvgAxisTicks axisTicksBuilder, bool isRTL: false}) => |
| 66 g.each((d, i, e) => create( | 66 g.each((d, i, e) => |
| 67 e, g.scope, axisTicksBuilder: axisTicksBuilder, isRTL: isRTL)); | 67 create(e, g.scope, axisTicksBuilder: axisTicksBuilder, isRTL: isRTL)); |
| 68 | 68 |
| 69 /// Create an axis on [element]. | 69 /// Create an axis on [element]. |
| 70 create(Element element, SelectionScope scope, { | 70 create(Element element, SelectionScope scope, |
| 71 SvgAxisTicks axisTicksBuilder, bool isRTL: false}) { | 71 {SvgAxisTicks axisTicksBuilder, bool isRTL: false}) { |
| 72 | |
| 73 var group = scope.selectElements([element]), | 72 var group = scope.selectElements([element]), |
| 74 older = _scales[element], | 73 older = _scales[element], |
| 75 current = _scales[element] = scale.clone(), | 74 current = _scales[element] = scale.clone(), |
| 76 isInitialRender = older == null; | 75 isInitialRender = older == null; |
| 77 | 76 |
| 78 var isLeft = orientation == ORIENTATION_LEFT, | 77 var isLeft = orientation == ORIENTATION_LEFT, |
| 79 isRight = !isLeft && orientation == ORIENTATION_RIGHT, | 78 isRight = !isLeft && orientation == ORIENTATION_RIGHT, |
| 80 isVertical = isLeft || isRight, | 79 isVertical = isLeft || isRight, |
| 81 isBottom = !isVertical && orientation == ORIENTATION_BOTTOM, | 80 isBottom = !isVertical && orientation == ORIENTATION_BOTTOM, |
| 82 isTop = !(isVertical || isBottom) && orientation == ORIENTATION_TOP, | 81 isTop = !(isVertical || isBottom) && orientation == ORIENTATION_TOP, |
| (...skipping 11 matching lines...) Expand all Loading... |
| 94 | 93 |
| 95 var ticks = group.selectAll('.tick').data(values, current.scale), | 94 var ticks = group.selectAll('.tick').data(values, current.scale), |
| 96 exit = ticks.exit, | 95 exit = ticks.exit, |
| 97 transform = isVertical ? _yAxisTransform : _xAxisTransform, | 96 transform = isVertical ? _yAxisTransform : _xAxisTransform, |
| 98 sign = isTop || isLeft ? -1 : 1, | 97 sign = isTop || isLeft ? -1 : 1, |
| 99 isEllipsized = ellipsized != formatted; | 98 isEllipsized = ellipsized != formatted; |
| 100 | 99 |
| 101 var enter = ticks.enter.appendWithCallback((d, i, e) { | 100 var enter = ticks.enter.appendWithCallback((d, i, e) { |
| 102 var group = Namespace.createChildElement('g', e) | 101 var group = Namespace.createChildElement('g', e) |
| 103 ..attributes['class'] = 'tick' | 102 ..attributes['class'] = 'tick' |
| 104 ..append(Namespace.createChildElement('line', e)) | 103 ..append(Namespace.createChildElement('line', e)) |
| 105 ..append(Namespace.createChildElement('text', e) | 104 ..append(Namespace.createChildElement('text', e) |
| 106 ..attributes['dy'] = | 105 ..attributes['dy'] = |
| 107 isVertical ? '0.32em' : (isBottom ? '0.71em' : '0')); | 106 isVertical ? '0.32em' : (isBottom ? '0.71em' : '0')); |
| 108 if (!isInitialRender) { | 107 if (!isInitialRender) { |
| 109 group.style.setProperty('opacity', EPSILON.toString()); | 108 group.style.setProperty('opacity', EPSILON.toString()); |
| 110 } | 109 } |
| 111 return group; | 110 return group; |
| 112 }); | 111 }); |
| 113 | 112 |
| 114 // All attributes/styles/classes that may change due to theme and scale. | 113 // All attributes/styles/classes that may change due to theme and scale. |
| 115 // TODO(prsd): Order elements before updating ticks. | 114 // TODO(prsd): Order elements before updating ticks. |
| 116 ticks.each((d, i, e) { | 115 ticks.each((d, i, e) { |
| 117 Element line = e.firstChild; | 116 Element line = e.firstChild; |
| (...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 176 } | 175 } |
| 177 | 176 |
| 178 exit.remove(); | 177 exit.remove(); |
| 179 | 178 |
| 180 // Append the outer domain. | 179 // Append the outer domain. |
| 181 var path = element.querySelector('.domain'), | 180 var path = element.querySelector('.domain'), |
| 182 tickSize = sign * outerTickSize, | 181 tickSize = sign * outerTickSize, |
| 183 range = current.rangeExtent; | 182 range = current.rangeExtent; |
| 184 if (path == null) { | 183 if (path == null) { |
| 185 path = Namespace.createChildElement('path', element) | 184 path = Namespace.createChildElement('path', element) |
| 186 ..setAttribute('class', 'domain'); | 185 ..setAttribute('class', 'domain'); |
| 187 } | 186 } |
| 188 path.attributes['d'] = isLeft || isRight | 187 path.attributes['d'] = isLeft || isRight |
| 189 ? 'M${tickSize},${range.min}H0V${range.max}H${tickSize}' | 188 ? 'M${tickSize},${range.min}H0V${range.max}H${tickSize}' |
| 190 : 'M${range.min},${tickSize}V0H${range.max}V${tickSize}'; | 189 : 'M${range.min},${tickSize}V0H${range.max}V${tickSize}'; |
| 191 element.append(path); | 190 element.append(path); |
| 192 } | 191 } |
| 193 | 192 |
| 194 _xAxisTransform(Selection selection, transformFn) { | 193 _xAxisTransform(Selection selection, transformFn) { |
| 195 selection.transition() | 194 selection.transition() |
| 196 ..attrWithCallback( | 195 ..attrWithCallback( |
| (...skipping 27 matching lines...) Expand all Loading... |
| 224 /// List of ticks that will be displayed on the axis. | 223 /// List of ticks that will be displayed on the axis. |
| 225 Iterable get ticks => _ticks; | 224 Iterable get ticks => _ticks; |
| 226 | 225 |
| 227 /// List of formatted ticks values. | 226 /// List of formatted ticks values. |
| 228 Iterable get formattedTicks => _formattedTicks; | 227 Iterable get formattedTicks => _formattedTicks; |
| 229 | 228 |
| 230 /// List of clipped tick values, if they had to be clipped. Must be same | 229 /// List of clipped tick values, if they had to be clipped. Must be same |
| 231 /// as the [formattedTicks] if none of the ticks were ellipsized. | 230 /// as the [formattedTicks] if none of the ticks were ellipsized. |
| 232 Iterable get shortenedTicks => _formattedTicks; | 231 Iterable get shortenedTicks => _formattedTicks; |
| 233 } | 232 } |
| OLD | NEW |