sky/examples/stocks/stock-arrow.sky

<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<import src="/sky/framework/sky-element.sky" />

<sky-element attributes="change:number">
<template>
  <style>
  :host {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    border: 1px solid transparent;
  }
  #arrow {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
  }
  .up {
    margin-bottom: 3px;
    border-bottom: 9px solid white;
  }
  .down {
    margin-top: 3px;
    border-top: 9px solid white;
  }
  </style>
  <div id="arrow" />
</template>
<script>
import "dart:sky";
import "dart:math";

final List<String> _kRedColors = [
  '#E57373',
  '#EF5350',
  '#F44336',
  '#E53935',
  '#D32F2F',
  '#C62828',
  '#B71C1C',
];

final List<String> _kGreenColors = [
  '#81C784',
  '#66BB6A',
  '#4CAF50',
  '#43A047',
  '#388E3C',
  '#2E7D32',
  '#1B5E20',
];

int _colorIndexForPercentChange(double percentChange) {
  // Currently the max is 10%.
  double maxPercent = 10.0;
  return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floor());
}

String _colorForPercentChange(double percentChange) {
  if (percentChange > 0)
    return _kGreenColors[_colorIndexForPercentChange(percentChange)];
  return _kRedColors[_colorIndexForPercentChange(percentChange)];
}

@Tagname('stock-arrow')
class StockArrow extends SkyElement {
  Element _arrow;

  void _updateArrow(double percentChange) {
    String border = _colorForPercentChange(percentChange).toString();
    String type = percentChange > 0 ? 'bottom' : 'top';
    _arrow.style['border-$type-color'] = border;
    style['border-color'] = border;
    _arrow.setAttribute('class', percentChange > 0 ? 'up' : 'down');
  }

  void shadowRootReady() {
    _arrow = shadowRoot.getElementById('arrow');
    _updateArrow(change);
  }

  void changeChanged(double oldValue, double newValue) {
    if (_arrow != null)
      _updateArrow(newValue);
  }
}

_init(script) => register(script, StockArrow);
</script>
</sky-element>