1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../imports/lodash.html">
<link rel="import" href="../imports/plottable.html">
<!--
tf-color-scale is a plumbing component that takes in an array of runs, and produces
an upward-bindable outColorScale, which is a color scale mapping from those runs to
a set of colors.
Right now, the colors are hard-coded and must be manually synchronized with the colors expected in
tf-run-selector. TODO(danmane): we should enshrine the mapping elsewhere.
-->
<dom-module id="tf-color-scale">
<script>
(function() {
// TODO(danmane) - get Plottable team to make an API point for this
Plottable.Scales.Color._LOOP_LIGHTEN_FACTOR = 0;
var classColorPairs = [
["light-blue", "#03A9F4"],
["red" , "#f44366"],
["green" , "#4CAF50"],
["purple" , "#9c27b0"],
["teal" , "#009688"],
["pink" , "#e91e63"],
["orange" , "#ff9800"],
["brown" , "#795548"],
["indigo" , "#3f51b5"],
];
var classes = _.pluck(classColorPairs, 0);
var colors = _.pluck(classColorPairs, 1);
Polymer({
is: "tf-color-scale",
properties: {
runs: Array,
outClassScale: {
type: Object,
notify: true,
readOnly: true,
value: function() {
return new d3.scale.ordinal().range(classes);
},
// TODO(danmane): the class scale will not update if the domain changes.
// this behavior is inconsistent with the ColorScale.
// in practice we don't change runs after initial load so it's not currently an issue
},
outColorScale: {
type: Object,
notify: true,
readOnly: true,
value: function() {
var scale = new Plottable.Scales.Color().range(colors);
scale.onUpdate(this._notifyColorScaleDomainChange.bind(this));
return scale;
},
},
},
observers: ["_changeRuns(runs.*)"],
_changeRuns: function(runs) {
this.outClassScale.domain(this.runs);
this.outColorScale.domain(this.runs);
},
_notifyColorScaleDomainChange: function() {
this.notifyPath("outColorScale.domain_path", this.outColorScale.domain());
this.outColorScale.domain_path = null;
},
});
})();
</script>
</dom-module>
|
