     chapters = _.map(plan.stats.course.current_pages, @renderChapterBars)
     practice = _.map(plan.stats.course.spaced_pages, @renderPracticeBars)
 
-    if _.isEmpty(chapters)
-      chapters = <p className='reading-stats-none'>No Chapter Progress</p>
+    unless _.isEmpty(chapters)
+      chapters = <section>{chapters}</section>
+      practiceLabel = <label>Space Practice Performance</label>
 
-    if _.isEmpty(practice)
-      practice = <p className='reading-stats-none'>No Chapter Progress</p>
-
+    unless _.isEmpty(practice)
+      practice = <section>
+        {practiceLabel}
+        {practice}
+      </section>
 
     <BS.Panel className="reading-stats">
       <section>
         {course}
       </section>
-      <section>
-        {chapters}
-      </section>
-      <section>
-        <label>Space Practice Performance</label>
-        {practice}
-      </section>
+      {chapters}
+      {practice}
     </BS.Panel>
 
 StatsShell = React.createClass

      op = '-'
    op + ' ' + Math.round((change / b) * 100)

  percentCorrect: (data) ->
    total_count = data.correct_count+data.incorrect_count
    if total_count then @percent(data.correct_count, total_count) else 0

  renderPercentCorrectBar: (data, type) ->
    percentCorrect = @percentCorrect(data)
    classes = 'reading-progress-bar'
    classes += ' no-progress' unless percentCorrect
    correct = <BS.ProgressBar className={classes} bsStyle="success" label="%(percent)s%" now={percentCorrect} key="page-progress-#{type}-#{data.page.id}" />

  renderProgressBar: (data, type, index, previous) ->
    studentCount = if type is 'practice' then <span className='reading-progress-student-count'>({data.student_count} students)</span>

LoadableItem = require '../loadable-item'

Stats = React.createClass
  _percent: (num,total) ->
    Math.round((num/total) * 100)

  percentDelta: (a,b) ->
