Breaking News Dashboard

Title

Headline

Module 1

Type

Freeform HTML

<script type="text/javascript">
	var fires = {
		"Sonoma County (of 3953)"          :     83
		,"Lake County (of 155)"                :     100
		,"Napa County (of 459)"                :     97
		,"Mendocino County (of 318)"       :     90
	};
</script>
<style type="text/css">
	.tpd-breaking-embed{height:auto}.tpd-breaking-title{color:#000;font-size:16px}.tpd-breaking-twitter{max-width:none}.tpd-breaking-callout{border:1px solid #ccc;border-left-width:0;border-right-width:0}table.fire-graph{width:100%;border-collapse:collapse}table.fire-graph td{padding:2px 0}td.fire-name{width:1px;white-space:nowrap;line-height:16px;font-size:14px;padding-right:8px!important}.fire-meter{box-sizing:content-box;position:relative;display:block;height:16px;line-height:16px;border:1px solid #DDD;padding:1px;font-size:12px}.fire-meter .fire-meter-bar{box-sizing:border-box;display:block;float:left;height:100%;width:0;background-color:#7ADF55;color:#FFF;text-align:right}.fire-meter-bar .fire-meter-pct{margin-right:5px}.fire-meter-bar+.fire-meter-pct{margin-left:5px}@media all and (min-width:769px){.fire-columns{overflow:hidden}.fire-column{float:left;width:49%}.fire-column.fire-column-last{float:right}.fire-name{width:1px!important}}
</style>
<div class="fire-columns"> <div class="fire-column"> <table id="fire-column-1" class="fire-graph"> </table> </div> <div class="fire-column fire-column-last"> <table id="fire-column-2" class="fire-graph"> </table> </div> </div>
<script type="text/javascript">
	var col1=$("#fire-column-1"),col2=$("#fire-column-2"),fireCount=0,element,fireNames,bgHex,fontHex,nameWidth,maxNameWidth=1;void 0!==fires&&($.each(fires,function(e,t){fireCount++,0==t?(bgHex="#FFF",fontHex="#000"):t>=80?(bgHex="#7ADF55",fontHex="#FFF"):t>=60?(bgHex="#FFE400",fontHex="#000"):t>=40?(bgHex="#F7941D",fontHex="#FFF"):t>=20?(bgHex="#FF5C33",fontHex="#FFF"):(bgHex="#ED1C24",fontHex="#000"),element=t>=20?$('<tr> <td class="fire-name">'+e+'</td> <td> <div class="fire-meter"> <span class="fire-meter-bar" style="width: '+t+"%; background-color: "+bgHex+"; color: "+fontHex+'"> <span class="fire-meter-pct">'+t+"%</span> </span> </div> </td> </tr>"):$('<tr> <td class="fire-name">'+e+'</td> <td> <div class="fire-meter"> <span class="fire-meter-bar" style="width: '+t+"%; background-color: "+bgHex+"; color: "+fontHex+'"></span> <span class="fire-meter-pct">'+t+"%</span> </div> </td> </tr>"),fireCount%2===0?col2.append(element):col1.append(element)}),fireNames=$(".fire-name"),fireNames.each(function(){nameWidth=$(this).width(),maxNameWidth=nameWidth>maxNameWidth?nameWidth:maxNameWidth}),fireNames.css({width:maxNameWidth+"px"}));
</script>

Module 2

Type

Published