JSFiddle - React, Tailwind, and code Playground

by edskeizer

HTML

<script src="http://sandbox.edskeizer.nl/forecastxl/snap.svg-min.js"></script>
<svg id="fxl_circle_base" style="width:650px;height:650px"></svg>

CSS

body {
    background: white;
}

CoffeeScript

console.clear()
console.log "------"

speed = 200 #400
window.circle_values =
  ambition:
    title: "Ambition"
    subtitle: "subtitle"
    tasks:
      number: 4
      url: '#'

  forecast:
    title: "Forecast"
    subtitle: "subtitle"
    tasks:
      number: 4
      url: '#'

  realization:
    title: "Realization"
    subtitle: "subtitle"
    tasks:
      number: 4
      url: '#'
        
  review:
    title: "Review"
    tasks:
      number: 3
      url: '#'
    status:
      ok: 5
      warning: 10
      alert: 15
        
  evaluation:
    title: "Evaluation"
    tasks:
      number: 3
      url: '#'
    status:
      ok: 25
      warning: 3
      alert: 2
  reflection:
    title: "Reflection"
    tasks:
      number: 3
      url: '#'
    status:
      ok: 3
      warning: 5
      alert: 30
arc = (start_x, start_y, value, total, R) ->
  
  alpha = 360 / total * value
  a = (90 - alpha) * Math.PI / 180
  start_x = parseFloat(start_x)
  start_y = parseFloat(start_y)
  x = start_x + R * Math.cos(a)
  y = start_y - R * Math.sin(a)
  color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)")
  path = undefined
  if total is value
    path = [
      [
        "M"
        start_x
        start_y - R
      ]
      [
        "A"
        R
        R
        0
        1
        1
        start_x - 0.01
        start_y - R
      ]
    ]
  else
    path = [
      [
        "M"
        start_x
        start_y - R
      ]
      [
        "A"
        R
        R
        0
        +(alpha > 180)
        1
        x
        y
      ]
    ]
  path: path
  stroke: color



next = () ->
  d = $.Deferred()
  d.resolve()
  d.promise()

myanimate = (obj, attr, duration) -> 
  d = $.Deferred()
  unless obj.length
    obj.animate attr, duration, () =>
      d.resolve()
  else
    for obj_single,i in obj.items
      obj_single.animate attr, duration, () =>
        d.resolve()
  d.promise()
 
appear_default = (obj) ->
  myanimate obj,
    'fill-opacity': 1
   ...