   render: ->
     dom.div {className: 'container'},
       dom.div {className: 'col-md-4'},
-        React.createElement(CharacterAvatar,{id: @props.character.id})
-      dom.div {className: 'col-md-8'}
-        dom.span 'bar'
+        React.createElement(CharacterAvatar, {id: @props.character.id})
+      dom.div {className: 'col-md-8'},
+        dom.ul null,
+          dom.li null, 'Prefers ' + STYLES[@props.facts?.preferredSec]?.label
 )
 
 CharacterAvatar = React.createClass(

# * H/L/N/W colors
# * More/better raw stat formatters (minutes to H:M, etc)
# * tick marks on HP Chart

React = require 'react'
$ = require 'jquery'
CharacterStats = require './character_stats'
CharacterFacts = require './character_facts'
d3 = require 'd3'
_ = require 'lodash'

dom = React.DOM

source_json = './lowsec.json'

samples = [
  'dscan.json'

    dom.div {className: 'container'},
      dom.h3 null, 'Damage Dealt'
      React.createElement(PieDataPanel,{data: @chartData()})
)

DamageAnalogyPanel = React.createClass(
  displayName: 'DamageAnalogyPanel'
  ships:
    proteus:
      pluralName: 'Proteii'
      id: 29988
      ehp: 150000
      fit: 'https://o.smium.org/loadout/private/23324/6303219387142766592'
    avatar:
      pluralName: 'Avatars'
      id: 11567
      ehp: 22600000
      fit: 'https://o.smium.org/loadout/private/23322/7459269642280763392'
  render: ->
    ship = _.sample @ships
    numShips = d3.round(@props.damage / ship.ehp, 1)
    stamps = []
    for i in [0...Math.floor(numShips)]
      stamps.push dom.img {src: eveIconUrl(ship.id), className: 'pull-right'}

    dom.div null,
      dom.h4 {className: 'pull-right'},
        dom.em null,"You have dealt enough damage to kill #{numShips} "
          dom.a {href: ship.fit}, ship.pluralName
      dom.div {className: 'container'}, stamps

)

DamageTakenPanel = React.createClass(
