json 使用jade，svg和harpjs显示数据

Posted 2021-05-19

/* Tweak to match your global styles, resets, etc.*/

.stat_list 
  list-style: none 
  padding: 0

  li 
    text-align: center
    padding: 1em 0
    float: left

.chart
  position: relative
  width: 100px 
  height: 100px
  display: block
  margin: 0 auto 1em

.pie
  position: absolute 
  top: 0
  left: 0
  width: 100px
  height: 100px
  -webkit-transform: rotate(-90deg)
  transform: rotate(-90deg)
  background: #f1f1f1
  border-radius: 50%


  circle
    fill: #f1f1f1
    stroke: #ff6666
    stroke-width: 32


.stat_total,.stat_name
  display: block
  text-align: center

.stat_total
  position: absolute 
  top: 10px
  left: 10px
  width: 80px 
  height: 80px
  font-size: 1em
  line-height: 4.5
  font-weight: 400
  color: #f1f1f1
  text-align: center
  background: #323232 
  border-radius: 50%
  z-index: 2
  
.stat_name 
  font-size: .875em
  font-weight: 400
  text-transform: uppercase

h3.stat_category Desktop

ul.stat_list
  each browserDesktop in public._data.browserDesktops
    li
      - var percent = browserDesktop.total
      span.chart
        svg(class="pie" viewBox="0 0 32 32")
          circle(class="circle" r="16" cx="16" cy="16" stroke-dasharray=percent + " 100")
        span(class="stat_total")= browserDesktop.total
      span(class="stat_name")= browserDesktop.name


h3.stat_category Mobile

ul.stat_list
  each browserMobile in public._data.browserMobiles
    li
      - var percent = browserMobile.total
      span.chart
        svg(class="pie" viewBox="0 0 32 32")
          circle(r="16" cx="16" cy="16" stroke-dasharray=percent + " 100")
        span(class="stat_total")= browserMobile.total
      span(class="stat_name")= browserMobile.name

Displaying data using jade, svg and harpjs
Demo use case: [http://portugalnainternet.surge.sh](http://portugalnainternet.surge.sh)

{
  "browserDesktops":[
    {"name":"chrome", "total":"63.06"}, 
    {"name":"ie", "total":"17.37"},
    {"name":"firefox", "total":"14.44"}, 
    {"name":"safari", "total":"3.18"}, 
    {"name":"opera", "total":"1.23"}, 
    {"name":"other", "total":"0.72"} 
  ],

  "browserMobiles":[
    {"name":"chrome", "total":"37.45"},
    {"name":"safari", "total":"31.82"},
    {"name":"android", "total":"24.19"},
    {"name":"IE Mobile", "total":"2.29"},
    {"name":"ie", "total":"1"},
    {"name":"opera", "total":"0.74"},
    {"name":"firefox", "total":"0.7"},
    {"name":"other", "total":"1.53"}
  ]
}