1b122baf563564a1d478804fb882fcba242a9949eChris Craik<!DOCTYPE html> 2b122baf563564a1d478804fb882fcba242a9949eChris Craik<!-- 3b122baf563564a1d478804fb882fcba242a9949eChris CraikCopyright (c) 2014 The Chromium Authors. All rights reserved. 4b122baf563564a1d478804fb882fcba242a9949eChris CraikUse of this source code is governed by a BSD-style license that can be 5b122baf563564a1d478804fb882fcba242a9949eChris Craikfound in the LICENSE file. 6b122baf563564a1d478804fb882fcba242a9949eChris Craik--> 7ced05db70069f9d84c4b0dd9b3b26b94e3482336Chris Craik 88d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi<link rel="import" href="/tracing/base/color_scheme.html"> 94a4f2fe02baf385f6c24fc98c6e17bf6ac5e0724Dan Sinclair<link rel="import" href="/tracing/ui/base/d3.html"> 104a4f2fe02baf385f6c24fc98c6e17bf6ac5e0724Dan Sinclair<link rel="import" href="/tracing/ui/base/ui.html"> 11b122baf563564a1d478804fb882fcba242a9949eChris Craik 12b122baf563564a1d478804fb882fcba242a9949eChris Craik<style> 13b122baf563564a1d478804fb882fcba242a9949eChris Craik * /deep/ .chart-base #title { 14b122baf563564a1d478804fb882fcba242a9949eChris Craik font-size: 16pt; 15b122baf563564a1d478804fb882fcba242a9949eChris Craik } 16b122baf563564a1d478804fb882fcba242a9949eChris Craik 17b122baf563564a1d478804fb882fcba242a9949eChris Craik * /deep/ .chart-base { 18b122baf563564a1d478804fb882fcba242a9949eChris Craik font-size: 12pt; 19b122baf563564a1d478804fb882fcba242a9949eChris Craik -webkit-user-select: none; 20b122baf563564a1d478804fb882fcba242a9949eChris Craik cursor: default; 21b122baf563564a1d478804fb882fcba242a9949eChris Craik } 22b122baf563564a1d478804fb882fcba242a9949eChris Craik 23b122baf563564a1d478804fb882fcba242a9949eChris Craik * /deep/ .chart-base .axis path, 24b122baf563564a1d478804fb882fcba242a9949eChris Craik * /deep/ .chart-base .axis line { 25b122baf563564a1d478804fb882fcba242a9949eChris Craik fill: none; 26b122baf563564a1d478804fb882fcba242a9949eChris Craik shape-rendering: crispEdges; 27b122baf563564a1d478804fb882fcba242a9949eChris Craik stroke: #000; 28b122baf563564a1d478804fb882fcba242a9949eChris Craik } 29b122baf563564a1d478804fb882fcba242a9949eChris Craik</style> 30b122baf563564a1d478804fb882fcba242a9949eChris Craik 31b122baf563564a1d478804fb882fcba242a9949eChris Craik<template id="chart-base-template"> 32b122baf563564a1d478804fb882fcba242a9949eChris Craik <svg> <!-- svg tag is dropped by ChartBase.decorate. --> 33b122baf563564a1d478804fb882fcba242a9949eChris Craik <g xmlns="http://www.w3.org/2000/svg" id="chart-area"> 34b122baf563564a1d478804fb882fcba242a9949eChris Craik <g class="x axis"></g> 35b122baf563564a1d478804fb882fcba242a9949eChris Craik <g class="y axis"></g> 36b122baf563564a1d478804fb882fcba242a9949eChris Craik <text id="title"></text> 37b122baf563564a1d478804fb882fcba242a9949eChris Craik </g> 38b122baf563564a1d478804fb882fcba242a9949eChris Craik </svg> 39b122baf563564a1d478804fb882fcba242a9949eChris Craik</template> 40b122baf563564a1d478804fb882fcba242a9949eChris Craik 41b122baf563564a1d478804fb882fcba242a9949eChris Craik<script> 42b122baf563564a1d478804fb882fcba242a9949eChris Craik'use strict'; 43b122baf563564a1d478804fb882fcba242a9949eChris Craik 44ced05db70069f9d84c4b0dd9b3b26b94e3482336Chris Craiktr.exportTo('tr.ui.b', function() { 45b122baf563564a1d478804fb882fcba242a9949eChris Craik var THIS_DOC = document.currentScript.ownerDocument; 46b122baf563564a1d478804fb882fcba242a9949eChris Craik 47b122baf563564a1d478804fb882fcba242a9949eChris Craik var svgNS = 'http://www.w3.org/2000/svg'; 488d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi var ColorScheme = tr.b.ColorScheme; 49b122baf563564a1d478804fb882fcba242a9949eChris Craik 50b122baf563564a1d478804fb882fcba242a9949eChris Craik function getColorOfKey(key, selected) { 518d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi var id = ColorScheme.getColorIdForGeneralPurposeString(key); 52b122baf563564a1d478804fb882fcba242a9949eChris Craik if (selected) 538d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi id += ColorScheme.properties.brightenedOffsets[0]; 548d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi return ColorScheme.colorsAsStrings[id]; 55b122baf563564a1d478804fb882fcba242a9949eChris Craik } 56b122baf563564a1d478804fb882fcba242a9949eChris Craik 57b122baf563564a1d478804fb882fcba242a9949eChris Craik /** 58b122baf563564a1d478804fb882fcba242a9949eChris Craik * A virtual base class for basic charts that provides X and Y axes, if 59b122baf563564a1d478804fb882fcba242a9949eChris Craik * needed, a title, and legend. 60b122baf563564a1d478804fb882fcba242a9949eChris Craik * 61b122baf563564a1d478804fb882fcba242a9949eChris Craik * @constructor 62b122baf563564a1d478804fb882fcba242a9949eChris Craik */ 63ced05db70069f9d84c4b0dd9b3b26b94e3482336Chris Craik var ChartBase = tr.ui.b.define('svg', undefined, svgNS); 64b122baf563564a1d478804fb882fcba242a9949eChris Craik 65b122baf563564a1d478804fb882fcba242a9949eChris Craik ChartBase.prototype = { 66b122baf563564a1d478804fb882fcba242a9949eChris Craik __proto__: HTMLUnknownElement.prototype, 67b122baf563564a1d478804fb882fcba242a9949eChris Craik 68b122baf563564a1d478804fb882fcba242a9949eChris Craik decorate: function() { 69b122baf563564a1d478804fb882fcba242a9949eChris Craik this.classList.add('chart-base'); 70b122baf563564a1d478804fb882fcba242a9949eChris Craik this.chartTitle_ = undefined; 71b122baf563564a1d478804fb882fcba242a9949eChris Craik this.seriesKeys_ = undefined; 72b122baf563564a1d478804fb882fcba242a9949eChris Craik this.width_ = 400; 73b122baf563564a1d478804fb882fcba242a9949eChris Craik this.height_ = 300; 74b122baf563564a1d478804fb882fcba242a9949eChris Craik 75ced05db70069f9d84c4b0dd9b3b26b94e3482336Chris Craik // This should use tr.ui.b.instantiateTemplate. However, creating 76b122baf563564a1d478804fb882fcba242a9949eChris Craik // svg-namespaced elements inside a template isn't possible. Thus, this 77b122baf563564a1d478804fb882fcba242a9949eChris Craik // hack. 78b122baf563564a1d478804fb882fcba242a9949eChris Craik var template = THIS_DOC.querySelector('#chart-base-template'); 79b122baf563564a1d478804fb882fcba242a9949eChris Craik var svgEl = template.content.querySelector('svg'); 80b122baf563564a1d478804fb882fcba242a9949eChris Craik for (var i = 0; i < svgEl.children.length; i++) 81b122baf563564a1d478804fb882fcba242a9949eChris Craik this.appendChild(svgEl.children[i].cloneNode(true)); 82b122baf563564a1d478804fb882fcba242a9949eChris Craik 83b122baf563564a1d478804fb882fcba242a9949eChris Craik // svg likes to take over width & height properties for some reason. This 84b122baf563564a1d478804fb882fcba242a9949eChris Craik // works around it. 85b122baf563564a1d478804fb882fcba242a9949eChris Craik Object.defineProperty( 86b122baf563564a1d478804fb882fcba242a9949eChris Craik this, 'width', { 87b122baf563564a1d478804fb882fcba242a9949eChris Craik get: function() { 88b122baf563564a1d478804fb882fcba242a9949eChris Craik return this.width_; 89b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 90b122baf563564a1d478804fb882fcba242a9949eChris Craik set: function(width) { 91b122baf563564a1d478804fb882fcba242a9949eChris Craik this.width_ = width; 92b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateContents_(); 93b122baf563564a1d478804fb882fcba242a9949eChris Craik } 94b122baf563564a1d478804fb882fcba242a9949eChris Craik }); 95b122baf563564a1d478804fb882fcba242a9949eChris Craik Object.defineProperty( 96b122baf563564a1d478804fb882fcba242a9949eChris Craik this, 'height', { 97b122baf563564a1d478804fb882fcba242a9949eChris Craik get: function() { 98b122baf563564a1d478804fb882fcba242a9949eChris Craik return this.height_; 99b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 100b122baf563564a1d478804fb882fcba242a9949eChris Craik set: function(height) { 101b122baf563564a1d478804fb882fcba242a9949eChris Craik this.height_ = height; 102b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateContents_(); 103b122baf563564a1d478804fb882fcba242a9949eChris Craik } 104b122baf563564a1d478804fb882fcba242a9949eChris Craik }); 105b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 106b122baf563564a1d478804fb882fcba242a9949eChris Craik 107b122baf563564a1d478804fb882fcba242a9949eChris Craik get chartTitle() { 1084a4f2fe02baf385f6c24fc98c6e17bf6ac5e0724Dan Sinclair return this.chartTitle_; 109b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 110b122baf563564a1d478804fb882fcba242a9949eChris Craik 111b122baf563564a1d478804fb882fcba242a9949eChris Craik set chartTitle(chartTitle) { 112b122baf563564a1d478804fb882fcba242a9949eChris Craik this.chartTitle_ = chartTitle; 113b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateContents_(); 114b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 115b122baf563564a1d478804fb882fcba242a9949eChris Craik 116b122baf563564a1d478804fb882fcba242a9949eChris Craik get chartAreaElement() { 117b122baf563564a1d478804fb882fcba242a9949eChris Craik return this.querySelector('#chart-area'); 118b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 119b122baf563564a1d478804fb882fcba242a9949eChris Craik 120b122baf563564a1d478804fb882fcba242a9949eChris Craik setSize: function(size) { 121b122baf563564a1d478804fb882fcba242a9949eChris Craik this.width_ = size.width; 122b122baf563564a1d478804fb882fcba242a9949eChris Craik this.height_ = size.height; 123b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateContents_(); 124b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 125b122baf563564a1d478804fb882fcba242a9949eChris Craik 1268d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi getMargin_: function() { 127b122baf563564a1d478804fb882fcba242a9949eChris Craik var margin = {top: 20, right: 20, bottom: 30, left: 50}; 128b122baf563564a1d478804fb882fcba242a9949eChris Craik if (this.chartTitle_) 129b122baf563564a1d478804fb882fcba242a9949eChris Craik margin.top += 20; 130b122baf563564a1d478804fb882fcba242a9949eChris Craik return margin; 131b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 132b122baf563564a1d478804fb882fcba242a9949eChris Craik 1338d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi get margin() { 1348d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi return this.getMargin_(); 1358d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi }, 1368d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi 137b122baf563564a1d478804fb882fcba242a9949eChris Craik get chartAreaSize() { 138b122baf563564a1d478804fb882fcba242a9949eChris Craik var margin = this.margin; 139b122baf563564a1d478804fb882fcba242a9949eChris Craik return { 140b122baf563564a1d478804fb882fcba242a9949eChris Craik width: this.width_ - margin.left - margin.right, 141b122baf563564a1d478804fb882fcba242a9949eChris Craik height: this.height_ - margin.top - margin.bottom 142b122baf563564a1d478804fb882fcba242a9949eChris Craik }; 143b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 144b122baf563564a1d478804fb882fcba242a9949eChris Craik 145b122baf563564a1d478804fb882fcba242a9949eChris Craik getLegendKeys_: function() { 146b122baf563564a1d478804fb882fcba242a9949eChris Craik throw new Error('Not implemented'); 147b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 148b122baf563564a1d478804fb882fcba242a9949eChris Craik 1498d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi updateScales_: function() { 150b122baf563564a1d478804fb882fcba242a9949eChris Craik throw new Error('Not implemented'); 151b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 152b122baf563564a1d478804fb882fcba242a9949eChris Craik 153b122baf563564a1d478804fb882fcba242a9949eChris Craik updateContents_: function() { 154b122baf563564a1d478804fb882fcba242a9949eChris Craik var margin = this.margin; 155b122baf563564a1d478804fb882fcba242a9949eChris Craik 156b122baf563564a1d478804fb882fcba242a9949eChris Craik var thisSel = d3.select(this); 157b122baf563564a1d478804fb882fcba242a9949eChris Craik thisSel.attr('width', this.width_); 158b122baf563564a1d478804fb882fcba242a9949eChris Craik thisSel.attr('height', this.height_); 159b122baf563564a1d478804fb882fcba242a9949eChris Craik 160b122baf563564a1d478804fb882fcba242a9949eChris Craik var chartAreaSel = d3.select(this.chartAreaElement); 1618d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi chartAreaSel.attr('transform', 162b122baf563564a1d478804fb882fcba242a9949eChris Craik 'translate(' + margin.left + ',' + margin.top + ')'); 163b122baf563564a1d478804fb882fcba242a9949eChris Craik 1648d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi this.updateScales_(); 1658d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi this.updateTitle_(chartAreaSel); 1668d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi this.updateLegend_(); 1678d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi }, 168b122baf563564a1d478804fb882fcba242a9949eChris Craik 1698d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi updateTitle_: function(chartAreaSel) { 170b122baf563564a1d478804fb882fcba242a9949eChris Craik var titleSel = chartAreaSel.select('#title'); 1718d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi if (!this.chartTitle_) { 172b122baf563564a1d478804fb882fcba242a9949eChris Craik titleSel.style('display', 'none'); 1738d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi return; 174b122baf563564a1d478804fb882fcba242a9949eChris Craik } 1758d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi var width = this.chartAreaSize.width; 1768d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi titleSel.attr('transform', 'translate(' + width * 0.5 + ',-5)') 1778d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi .style('display', undefined) 1788d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi .style('text-anchor', 'middle') 1798d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi .attr('class', 'title') 1808d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi .attr('width', width) 1818d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi .text(this.chartTitle_); 182b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 183b122baf563564a1d478804fb882fcba242a9949eChris Craik 1844a4f2fe02baf385f6c24fc98c6e17bf6ac5e0724Dan Sinclair // TODO(charliea): We should change updateLegend_ so that it ellipsizes the 1854a4f2fe02baf385f6c24fc98c6e17bf6ac5e0724Dan Sinclair // series names after a certain point. Otherwise, the series names start 1864a4f2fe02baf385f6c24fc98c6e17bf6ac5e0724Dan Sinclair // dipping below the x-axis and continue on outside of the viewport. 187b122baf563564a1d478804fb882fcba242a9949eChris Craik updateLegend_: function() { 188b122baf563564a1d478804fb882fcba242a9949eChris Craik var keys = this.getLegendKeys_(); 189b122baf563564a1d478804fb882fcba242a9949eChris Craik if (keys === undefined) 190b122baf563564a1d478804fb882fcba242a9949eChris Craik return; 191b122baf563564a1d478804fb882fcba242a9949eChris Craik 192b122baf563564a1d478804fb882fcba242a9949eChris Craik var chartAreaSel = d3.select(this.chartAreaElement); 193b122baf563564a1d478804fb882fcba242a9949eChris Craik var chartAreaSize = this.chartAreaSize; 194b122baf563564a1d478804fb882fcba242a9949eChris Craik 195b122baf563564a1d478804fb882fcba242a9949eChris Craik var legendEntriesSel = chartAreaSel.selectAll('.legend') 196b122baf563564a1d478804fb882fcba242a9949eChris Craik .data(keys.slice().reverse()); 197b122baf563564a1d478804fb882fcba242a9949eChris Craik 198b122baf563564a1d478804fb882fcba242a9949eChris Craik legendEntriesSel.enter() 199b122baf563564a1d478804fb882fcba242a9949eChris Craik .append('g') 200b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('class', 'legend') 201b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('transform', function(d, i) { 2028d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi return 'translate(0,' + i * 20 + ')'; 2038d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi }) 2048d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi .append('text').text(function(key) { 2058d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi return key; 2068d2b206a675ec20ea07100c35df34e65ee1e45e8Ruchi Kandoi }); 207b122baf563564a1d478804fb882fcba242a9949eChris Craik legendEntriesSel.exit().remove(); 208b122baf563564a1d478804fb882fcba242a9949eChris Craik 209b122baf563564a1d478804fb882fcba242a9949eChris Craik legendEntriesSel.attr('x', chartAreaSize.width - 18) 210b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('width', 18) 211b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('height', 18) 212b122baf563564a1d478804fb882fcba242a9949eChris Craik .style('fill', function(key) { 213b122baf563564a1d478804fb882fcba242a9949eChris Craik var selected = this.currentHighlightedLegendKey === key; 214b122baf563564a1d478804fb882fcba242a9949eChris Craik return getColorOfKey(key, selected); 215b122baf563564a1d478804fb882fcba242a9949eChris Craik }.bind(this)); 216b122baf563564a1d478804fb882fcba242a9949eChris Craik 217b122baf563564a1d478804fb882fcba242a9949eChris Craik legendEntriesSel.selectAll('text') 218b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('x', chartAreaSize.width - 24) 219b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('y', 9) 220b122baf563564a1d478804fb882fcba242a9949eChris Craik .attr('dy', '.35em') 221b122baf563564a1d478804fb882fcba242a9949eChris Craik .style('text-anchor', 'end') 222b122baf563564a1d478804fb882fcba242a9949eChris Craik .text(function(d) { return d; }); 223b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 224b122baf563564a1d478804fb882fcba242a9949eChris Craik 225b122baf563564a1d478804fb882fcba242a9949eChris Craik get highlightedLegendKey() { 226b122baf563564a1d478804fb882fcba242a9949eChris Craik return this.highlightedLegendKey_; 227b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 228b122baf563564a1d478804fb882fcba242a9949eChris Craik 229b122baf563564a1d478804fb882fcba242a9949eChris Craik set highlightedLegendKey(highlightedLegendKey) { 230b122baf563564a1d478804fb882fcba242a9949eChris Craik this.highlightedLegendKey_ = highlightedLegendKey; 231b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateHighlight_(); 232b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 233b122baf563564a1d478804fb882fcba242a9949eChris Craik 234b122baf563564a1d478804fb882fcba242a9949eChris Craik get currentHighlightedLegendKey() { 235b122baf563564a1d478804fb882fcba242a9949eChris Craik if (this.tempHighlightedLegendKey_) 236b122baf563564a1d478804fb882fcba242a9949eChris Craik return this.tempHighlightedLegendKey_; 237b122baf563564a1d478804fb882fcba242a9949eChris Craik return this.highlightedLegendKey_; 238b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 239b122baf563564a1d478804fb882fcba242a9949eChris Craik 240b122baf563564a1d478804fb882fcba242a9949eChris Craik pushTempHighlightedLegendKey: function(key) { 241b122baf563564a1d478804fb882fcba242a9949eChris Craik if (this.tempHighlightedLegendKey_) 242b122baf563564a1d478804fb882fcba242a9949eChris Craik throw new Error('push cannot nest'); 243b122baf563564a1d478804fb882fcba242a9949eChris Craik this.tempHighlightedLegendKey_ = key; 244b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateHighlight_(); 245b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 246b122baf563564a1d478804fb882fcba242a9949eChris Craik 247b122baf563564a1d478804fb882fcba242a9949eChris Craik popTempHighlightedLegendKey: function(key) { 248b122baf563564a1d478804fb882fcba242a9949eChris Craik if (this.tempHighlightedLegendKey_ != key) 249b122baf563564a1d478804fb882fcba242a9949eChris Craik throw new Error('pop cannot happen'); 250b122baf563564a1d478804fb882fcba242a9949eChris Craik this.tempHighlightedLegendKey_ = undefined; 251b122baf563564a1d478804fb882fcba242a9949eChris Craik this.updateHighlight_(); 252b122baf563564a1d478804fb882fcba242a9949eChris Craik }, 253b122baf563564a1d478804fb882fcba242a9949eChris Craik 254b122baf563564a1d478804fb882fcba242a9949eChris Craik updateHighlight_: function() { 255b122baf563564a1d478804fb882fcba242a9949eChris Craik // Update label colors. 256b122baf563564a1d478804fb882fcba242a9949eChris Craik var chartAreaSel = d3.select(this.chartAreaElement); 257b122baf563564a1d478804fb882fcba242a9949eChris Craik var legendEntriesSel = chartAreaSel.selectAll('.legend'); 258b122baf563564a1d478804fb882fcba242a9949eChris Craik 259b122baf563564a1d478804fb882fcba242a9949eChris Craik var that = this; 260b122baf563564a1d478804fb882fcba242a9949eChris Craik legendEntriesSel.each(function(key) { 261b122baf563564a1d478804fb882fcba242a9949eChris Craik var highlighted = key == that.currentHighlightedLegendKey; 262b122baf563564a1d478804fb882fcba242a9949eChris Craik var color = getColorOfKey(key, highlighted); 263b122baf563564a1d478804fb882fcba242a9949eChris Craik this.style.fill = color; 264b122baf563564a1d478804fb882fcba242a9949eChris Craik if (highlighted) 265b122baf563564a1d478804fb882fcba242a9949eChris Craik this.style.fontWeight = 'bold'; 266b122baf563564a1d478804fb882fcba242a9949eChris Craik else 267b122baf563564a1d478804fb882fcba242a9949eChris Craik this.style.fontWeight = ''; 268b122baf563564a1d478804fb882fcba242a9949eChris Craik }); 269b122baf563564a1d478804fb882fcba242a9949eChris Craik } 270b122baf563564a1d478804fb882fcba242a9949eChris Craik }; 271b122baf563564a1d478804fb882fcba242a9949eChris Craik 272b122baf563564a1d478804fb882fcba242a9949eChris Craik return { 273b122baf563564a1d478804fb882fcba242a9949eChris Craik getColorOfKey: getColorOfKey, 274b122baf563564a1d478804fb882fcba242a9949eChris Craik ChartBase: ChartBase 275b122baf563564a1d478804fb882fcba242a9949eChris Craik }; 276b122baf563564a1d478804fb882fcba242a9949eChris Craik}); 277b122baf563564a1d478804fb882fcba242a9949eChris Craik</script> 278