@plotdb/chart 0.0.2

package/web/src/pug/block/bar-list/0.0.1/index.ls

@@ -0,0 +1,85 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'bar-list', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: [
+      {url: "/assets/lib/ldview/main/index.min.js"}
+    ]
+  init: ({root, context, t, pubsub}) ->
+    pubsub.fire \init, {
+      mod: mod({root, context, t})
+      prepare-svg: false
+      layout: false
+      data-accessor: -> it._data._raw
+    }
+
+mod = ({root, context, t}) ->
+  {chart,d3,debounce} = context
+  sample: ->
+    raw: [0 to 10].map -> {name: it, value: (Math.random! * 100).toFixed(2)}
+    binding:
+      size: {key: "value"}
+      name: {key: "name"}
+  config: {}
+  dimension:
+    size: {type: \R, name: "size"}
+    name: {type: \NO, name: "name"}
+  init: ->
+    @picked = {}
+    @tint = tint = new chart.utils.tint!
+    @scale = scale = {}
+    @extent = {}
+    get-list = ~>
+      return [[k,v] for k,v of @picked].filter(-> !it.1).map -> it.0
+
+    @view = new ldview do
+      root: root
+      init-render: false
+      action: click:
+        select: ({views, node}) ~>
+          name = node.getAttribute \data-name
+          if name == \none => @parsed.map ~> @picked[it.name] = false
+          else @picked = {}
+          @filter {name: {type: 'exclude', value: get-list!}}, true
+          views.0.render \data
+
+      handler:
+        data:
+          list: ~> @parsed
+          key: -> it._idx
+          action: click: ({views, node, data}) ~>
+            @picked[data.name] = if @picked[data.name]? => !@picked[data.name] else false
+            views.0.render \data, data._idx
+            @filter {name: {type: 'exclude', value: get-list!}}, true
+
+          handler: ({node, data}) ~>
+            nn = node.querySelector('[ld=name]')
+            nb = node.querySelector('[ld=bar]')
+            unit = (@binding.{}size.unit or '')
+            nn.textContent = "#{data.name} / #{data.size}#{unit}"
+            nb.style <<< width: "#{(@scale.x data.size)}%", background: @tint.get 'size'
+            node.style.opacity = if @picked[data.name] == false => 0.3 else 1
+
+  filter: (filters, internal = false)->
+  parse: ->
+    @parsed = @data.map -> it
+    names = @parsed.map -> it.name
+    @parsed ++= [k for k of @picked]
+      .filter -> !(it in names)
+      .map ~> {name: it, size: 0}
+    @parsed.sort (a,b) ~>
+      pb = !(@picked[b.name]?) or @picked[b.name]
+      pa = !(@picked[a.name]?) or @picked[a.name]
+      if pb and !pa => return 1 else if !pb and pa => return -1
+      if b.size - a.size => return that
+      return 0
+    @parsed.map (d,i) -> d._idx = i
+
+  resize: ->
+    @extent = d3.extent @parsed.map -> it.size
+    @scale.x = d3.scaleLinear!domain [0, @extent.1] .range [0, 100]
+  render: -> @view.render!
+
+return block-factory

package/web/src/pug/block/bar-list/0.0.1/index.pug

@@ -0,0 +1,30 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+      div(data-type="render")
+        .d-flex
+          .flex-grow-1
+            .data(ld-each="data")
+              div(ld="name")
+              div(ld="bar")
+          div(style="position:sticky;margin-left:1em;margin-right:.25em;" +
+          "cursor:pointer;white-space:nowrap;top:0;right:0;align-self:flex-start;height:auto;")
+            div(ld="select",data-name="all") 全選
+            div(ld="select",data-name="none") 全不選
+
+  style(type="text/css"): :stylus
+    .data
+      padding-bottom: 1em
+    .pdl-layout
+      overflow-y: scroll
+      user-select: none
+      [data-type=render]
+        overflow-y: visible
+        height: auto
+      .data
+        cursor: pointer
+      div[ld=bar]
+        height: .5em
+        border-radius: 2px
+  script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/block/bar-race/0.0.1/index.ls

@@ -0,0 +1,83 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'bar-race', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+    i18n:
+      "zh-TW":
+        "height": "高度"
+  init: ({root, context, t, pubsub}) ->
+    pubsub.fire \init, mod: mod({context, t})
+
+mod = ({context, t}) ->
+  {chart,d3,debounce} = context
+  sample: ->
+    raw: [0 to 100].map (val) ~>
+      [n,o] = [val % 10, Math.floor(val / 10)]
+      ret = {name: n, value: Math.random!, order: o}
+      return ret
+    binding:
+      order: {key: "order"}
+      value: {key: "value"}
+      name: {key: "name"}
+  config: {}
+  dimension:
+    order: {type: \O, name: "order", priority: 1}
+    value: {type: \R, name: "value", priority: 2}
+    name: {type: \N, name: "name"}
+  init: ->
+    @tint = tint = new chart.utils.tint!
+    @g =
+      view: d3.select(@layout.get-group \view)
+      axis: d3.select(@layout.get-group \axis)
+    @scale = scale = {}
+    @axis-bottom = d3.axis-bottom!
+    @legend = new chart.utils.legend do
+      layout: @layout
+      name: \legend
+      root: @root
+      shape: (d) -> d3.select(@).attr \fill, tint.get d.key
+  parse: ->
+    @data.map (d) -> d.value = d.value.map -> if isNaN(it) => 0 else +it
+    @names = Array.from(new Set(@data.map -> it.name))
+  resize: ->
+    @layout.get-node \legend .style.width = if !(@cfg.{}legend.enabled?) or @cfg.legend.enabled => '' else '0'
+    @layout.update false
+
+    @max-per-group = @binding.height.map (d,i) ~> Math.max.apply(Math, @data.map -> it.height[i])
+    @order = @data.map (d,i) -> {key: d._idx, idx: i, name: d.order}
+    @order.sort (a,b) -> if b.name > a.name => 1 else if b.name < a.name => -1 else 0
+
+    @tint.set @cfg.palette
+    @legend.data [{ key: i, text: @names[i] } for i from 0 til @names.length]
+    @layout.update false
+    max = Math.max @data.map -> it.value
+
+    box = @layout.get-box \view
+    @scale <<<
+      y: d3.scaleLinear!domain([0,max]).range [box.width, 0]
+      x: d3.scaleBand!domain @order.map(->it.name or it.key) .range [0, box.height]
+    /*
+    @axis-bottom.scale @scale.x
+      ..ticks(@cfg.tick-count) if @cfg.tick-count?
+      ..tickFormat(d3.format(@cfg.tick-format)) if @cfg.tick-format?
+      ..tickSizeInner @cfg.tick-size-inner if @cfg.tick-size-inner?
+      ..tickSizeOuter @cfg.tick-size-outer if @cfg.tick-size-outer?
+      ..tickPadding @cfg.tick-padding if @cfg.tick-padding?
+    */
+
+  render: ->
+    {binding, scale, range, delta, cfg, tint, data} = @
+    @g.view.selectAll \g.bar .data @data
+      ..exit!remove!
+      ..enter!append \g .attr \class, \bar
+    @g.view.selectAll \g.bar
+      .attr \transform, (d,i) -> "translate(#{scale.x(d.name)},0)"
+
+    @g.axis.call @axis-bottom
+      .attr \font-size, ''
+  tick: ->
+
+return block-factory

package/web/src/pug/block/bar-race/0.0.1/index.pug

@@ -0,0 +1,21 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="view")
+        .pdl-cell(data-name="axis")  
+        .pdl-cell(data-name="legend")  
+      div(data-type="render")
+
+  style(type="text/css"): :stylus
+    g[data-name=axis] { font-size: 11px }
+    .pdl-layout > div[data-type=layout]
+      display: grid
+      grid-template-columns: 1fr fit-content(10em)
+      grid-template-rows: 1fr fit-content(1em)
+      & > .pdl-cell[data-name=legend]
+        grid-column: 2
+        grid-row: 1 / span 2
+        padding-left: 1em
+
+  script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/block/base/0.0.1/index.ls

@@ -0,0 +1,67 @@
+
+
+pkg:
+  name: 'base', version: '0.0.1'
+  dependencies: [
+    {name: "d3", version: "4", async: false}
+    {name: "d3-selection", version: "2", async: false}
+    {name: "d3-random", version: "2"}
+    {name: "d3-dispatch", version: "2", async: false}
+    {name: "d3-transition", version: "2"}
+    {name: "d3-format", version: "2"}
+    {name: "d3-array", version: "2", async: false}
+    {name: "d3-color", version: "2"}
+    {name: "d3-path", version: "2"}
+    {name: "d3-shape", version: "2"}
+    {name: "d3-interpolate", version: "2", async: false}
+    {name: "d3-scale-chromatic", version: "1"}
+    {name: "d3-ease", version: "2"}
+    {name: "d3-quadtree", version: "2"}
+    {name: "d3-timer", version: "2"}
+    {name: "d3-force", version: "2", async: false}
+    {name: "d3-hierarchy", version: "2"}
+    {name: "d3-force-boundary", version: "0.0.1"}
+    {name: "d3-drag", version: "2"}
+    {name: "d3-brush", version: "2"}
+    {name: "d3-axis", version: "2"}
+    {name: "@loadingio/debounce.js", version: "main", path: "debounce.min.js"}
+    {name: "wrap-svg-text", version: "main", path: "index.min.js", async: false}
+    {name: "@plotdb/layout", version: "main", path: "index.min.js", async: false}
+    {name: "@plotdb/layout", version: "main", path: "index.min.css", type: \css}
+    {name: "ldcolor", version: "main", path: "ldcolor.min.js", async: false}
+    {name: "@plotdb/chart", version: "main", path: "chart.js", async: false}
+    {name: "@plotdb/chart", version: "main", path: "chart.min.css", type: \css}
+    {name: "@plotdb/chart", version: "main", path: "utils/config.js"}
+    {name: "@plotdb/chart", version: "main", path: "utils/legend.js"}
+    {name: "@plotdb/chart", version: "main", path: "utils/legend.css", type: \css}
+    {name: "@plotdb/chart", version: "main", path: "utils/tint.js"}
+    {name: "@plotdb/chart", version: "main", path: "utils/format.js", async: false}
+    {name: "@plotdb/chart", version: "main", path: "utils/axis.js"}
+    {name: "@plotdb/chart", version: "main", path: "utils/tip.js"}
+  ]
+  i18n:
+    "zh-TW": 
+      "x axis": "X軸"
+      name: "名稱"
+
+init: ({root, context, pubsub, data}) ->
+  {d3,chart} = context
+  pubsub.on \init, (opt = {}) ~>
+    opt = {
+      root: root
+      delay-render: true
+      auto-select: true
+      data-accessor: -> d3.select(it).datum!._raw
+    } <<< opt
+    original-init = opt.mod.init 
+    opt.mod.init = ->
+      @random = d3.randomUniform.source(d3.randomLcg(123))(0, 1)
+      ret = original-init.apply @
+      return Promise.resolve!
+    @chart = c = new chart(opt <<< data)
+    c.init!then -> c
+  @
+
+interface: -> @chart
+
+mod: (root) -> {config: {}, dimension: {}, init: (->), resize: (->), render: (->)}

package/web/src/pug/block/base/0.0.1/index.pug

@@ -0,0 +1,5 @@
+.base(style="width:100%;height:100%")
+  plug(name="layout")
+  style(type="text/css"): :stylus
+    *[plug=layout] { fill: currentColor }
+  script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/block/blank/0.0.1/index.ls

@@ -0,0 +1,25 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: \blank, version: \0.0.1
+    extend: name: \base, version: \0.0.1
+    dependencies: []
+
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init,
+      mod: mod {context}
+      raw: [0 to 100]
+      binding: {}
+
+mod = ({context}) ->
+  {} = context
+  config: {}
+  dimension: {}
+  init: ->
+  parse: ->
+  resize: ->
+  render: ->
+  tick: ->
+
+return block-factory

package/web/src/pug/block/blank/0.0.1/index.pug

@@ -0,0 +1 @@
+div(style="width:100%;height:100%"): script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/block/bubble/0.0.1/index.ls

@@ -0,0 +1,220 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'bubble', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+    i18n:
+      "zh-TW":
+        "K": \千
+        "M": \百萬
+  init: ({root, context, pubsub, t}) ->
+    pubsub.fire \init, mod: mod {context, t} .then ~> it.0
+
+mod = ({context, t}) ->
+  {d3,forceBoundary,ldcolor,chart} = context
+  sample: ->
+    raw: [0 to 100].map (val) ~> {val: val, cat: Math.floor(Math.random! * 5), name: val}
+    binding:
+      group: {key: \cat}
+      name: {key: \name}
+      color: {key: \cat}
+      area: {key: \val}
+  config: {}
+  dimension:
+    group: {type: \C, name: "group", priority: 2}
+    color: {type: \NR, name: "color", priority: 4}
+    area: {type: \R, name: "area", priority: 1}
+    name: {type: \NC, name: "name", priority: 3}
+  init: ->
+    @tint = tint = new chart.utils.tint!
+    @parsed = @parsed or []
+    @g = Object.fromEntries <[view unit legend]>.map ~> [it, d3.select(@layout.get-group it)]
+    node = @root.querySelector '[ld=tip]'
+    @tip = new chart.utils.tip {
+      root: @root
+      accessor: ({evt}) ~>
+        if !(evt.target and data = d3.select(evt.target).datum!) => return null
+        return {name: data.name, value: "#{data.area}#{@binding.area.unit or ''}"}
+      range: ~> return @layout.get-node \view .getBoundingClientRect!
+    }
+    @legend = new chart.utils.legend do
+      layout: @layout
+      name: \legend
+      root: @root
+      shape: (d) -> d3.select(@).attr \fill, tint.get d.key
+      cfg: selectable: true
+    @legend.on \select, ~> @bind!; @resize!; @render!
+
+  destroy: -> @tip.destroy!
+
+  parse: ->
+    @valid = @data.filter -> !isNaN(it.area)
+    @groups = Array.from(new Set(@valid.map -> it.group)).filter -> it
+    @sim = null
+    @legend.data @groups.map -> {key: it, text: it}
+  resize: ->
+    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
+    @cfg.{}legend
+    @random = d3.randomUniform.source(d3.randomLcg(+Date.now!))(0, 1)
+    list = (
+      [{key: 'root', root: true}] ++
+      @groups.map(->{key: "group-#it"}) ++
+      @valid.filter(~> !@cfg.legend.enabled or @legend.is-selected it.group)
+    )
+    if @legend.enabled! => list = list.filter ~> !it._raw or @legend.is-selected it.group
+
+    @legend.config @cfg.legend
+    @legend.update!
+    @layout.update false
+
+    ret = d3.hierarchy(
+      d3.stratify!
+        .id(->if it._idx? => it._idx else it.key)
+        # no group-based position
+        #.parentId(-> if it.root => '' else 'root' ) list
+        # group-based position
+        .parentId(-> if it.root => '' else if it.group => "group-#that" else \root) list
+    )
+      .sum -> it.data.area
+      .sort (a,b) -> b.value - a.value # sort or not
+
+    box = @vbox = @layout.get-box \view
+    pack = d3.pack!size([box.width, box.height]) ret
+    @parsed = ret.leaves!
+      .map (d) ~>
+        d._raw = d.data.data._raw
+        ddata = d.data.data
+        pos = if (!(@cfg.grouping?) and @cfg.grouping) => d else
+          # randomized position regardless of grouping
+          x: Math.random! * box.width * 0.8 + box.width * 0.1
+          y: Math.random! * box.height * 0.8 + box.height * 0.1
+
+        # if @parsed exists, then this is a data / size / config update.
+        # we use the old data position for a smooth transition effect.
+        od = if @parsed =>
+          p = @parsed
+            .filter (p) -> 
+              if (p.name? or ddata.name?) => (p.name == ddata.name)
+              else (p._idx == ddata._idx)
+            .0
+          if p => p else d
+        else d
+        {x,y} = d
+        d <<< {radius: ddata.area ** 0.5, x, y}
+        d <<< ddata{_idx, name, color, group, area}
+        if od._x => d._x = od._x else if !d._x => d._x = d.x
+        if od._y => d._y = od._y else if !d._y => d._y = d.y
+        d
+      .filter -> it.area?
+    @sim = null
+    @start!
+
+
+  render: ->
+    {binding, tint} = @
+    box = @vbox
+    # automatically adjust circle size based on canvas size.
+    @rate = rate = 0.85 * # make it slightly smaller. adjust as your wish
+      Math.PI / (2 * Math.sqrt(3)) * # wasted space from exterior hexagon to circle
+      Math.sqrt(box.width * box.height / @parsed.map(-> Math.PI * (it.r ** 2)).reduce(((a,b) -> a + b),0))
+    @parsed.map (d,i) ~> d.rr = (d.r * @rate) >? 2
+    tint.set(@cfg.palette)
+    @g.view.selectAll \circle.bubble .data @parsed, (->it.name or it._idx)
+      ..exit!remove!
+      ..enter!append \circle
+        .attr \class, 'bubble data'
+        .attr \r, (d,i) ~> 0
+        .attr \fill, (d,i) ~> tint.get(d.color or d.group or d.name)
+        .attr \cx, (d,i) -> d._x
+        .attr \cy, (d,i) -> d._y
+
+    @g.view.selectAll \circle.bubble
+      .attr \cx, (d,i) -> d._x
+      .attr \cy, (d,i) -> d._y
+      .transition!duration 350
+      .attr \fill, (d,i) ~> tint.get(d.color or d.group or d.name)
+      .attr \r, (d,i) ~> d.rr
+
+    @g.view.selectAll \g.label .data @parsed, (->it.name or it._idx)
+      ..exit!remove!
+      ..enter!append \g
+        .attr \class, 'label data'
+        .attr \transform, (d,i) -> "translate(#{d.x},#{d.y})"
+        .attr \opacity, 0
+        .style \pointer-events, \none
+        .style \cursor, \pointer
+        .each (d,i) ->
+          [0,1]
+            .map ~> d3.select(@).append \text
+            .map ->
+              it
+                .attr \dy, \-.28em
+                .attr \text-anchor, \middle
+                .style \pointer-event, \none
+    @g.view.selectAll \g.label
+      .attr \transform, (d,i) -> "translate(#{d._x},#{d._y})"
+      .each (d,i) ->
+        d3.select(@).selectAll \text
+          .attr \dy, (e,i) -> if i == 0 => '-.28em' else '.88em'
+          .text (e,i) ->
+            if i == 0 =>
+              area = d3.format('.3s')(d.area)
+              /*
+              ret = if area > 1000000 => (area/1000000).toFixed(1) + t(\M)
+              else if area > 1000 => (area/1000).toFixed(1) + t(\K)
+              else (area).toFixed(0)
+              */
+              ret = area
+              if ret => ret = "#{ret}#{binding.area.unit or ''}"
+              return ret
+            else return d.name or ''
+          .attr \font-size, (d,i) -> return if i => '0.9em' else '1.1em'
+
+          .transition!duration 350
+          .attr \fill, ->
+            hcl = ldcolor.hcl(tint.get d.color or d.group or d.name)
+            if hcl.l < 50 => \#fff else \#000
+    @g.view.selectAll \g.label
+      .transition!duration 350
+      .attr \opacity, (d,i) ->
+        box = @getBoundingClientRect!
+        [w,h] = [box.width, box.height]
+        if (2 * d.rr) < w or (2 * d.rr) < h => 0 else 1
+    @legend.render!
+
+  tick: ->
+    cfg = @cfg
+    pad = cfg.pad or 5
+    box = @vbox
+    if !@sim =>
+      kickoff = true
+      @fc = fc = d3.forceCollide!strength 0.5 .iterations 20 .radius ~> @rate * it.r
+      @fg = d3.forceCenter!strength 0.5
+      @fb = forceBoundary(
+        (~> it.rr + pad), (~> it.rr + pad),
+        (~> box.width - it.rr - pad), (~> box.height - it.rr - pad)
+      ).strength 0.5
+      @sim = d3.forceSimulation!
+        # we can't make it center properly so disable it for now.
+        #.force \center, @fg
+        .force \b, @fb
+        .force \collide, @fc
+      @sim.stop!
+      @sim.alpha 0.9
+    @fg.x(box.width / 2)
+    @fg.y(box.height / 2)
+    @sim.nodes(@parsed)
+    @sim.tick if kickoff => 10 else 1
+    @parsed.map ->
+      it._x = it._x + (it.x - it._x) * 0.1
+      it._y = it._y + (it.y - it._y) * 0.1
+
+    @g.view.selectAll \circle.bubble
+      .attr \cx, (d,i) -> d._x
+      .attr \cy, (d,i) -> d._y
+    @g.view.selectAll \g.label
+      .attr \transform, (d,i) -> "translate(#{d._x},#{d._y})"
+
+return block-factory

package/web/src/pug/block/bubble/0.0.1/index.pug

@@ -0,0 +1,28 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="view")
+        .pdl-cell(data-name="unit")
+        .pdl-cell(data-name="legend")
+      div(data-type="render")
+  style(type="text/css"): :stylus
+    /*.pdl-cell { width: 100%; height: 100% }*/
+    .pdl-layout > div[data-type=layout]
+      display: grid
+      grid-template-columns: 1fr fit-content(10em)
+      grid-template-rows: 1fr fit-content(1em)
+      & > .pdl-cell[data-name=view]
+        grid-area: 1 / 1
+      & > .pdl-cell[data-name=legend]
+        grid-column: 2
+        grid-row: 1 / span 2
+        padding: 0 .5em 0 .5em
+      & > .pdl-cell[data-name=unit]
+        grid-column: 1
+        grid-row: 2
+        line-height: 1em
+        text-align: right
+        padding: .25em 0
+
+  script(type="@plotdb/block"): include:lsc index.ls

package/web/src/pug/block/curve-bar/0.0.1/index.ls

@@ -0,0 +1,89 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'curve-bar', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context}
+
+mod = ({context}) ->
+  {d3,legend,chart} = context
+  sample: ->
+    raw: [1 to 5].map (val) ~> {val: Math.random!, name: val}
+    binding:
+      name: {key: \name}
+      value: {key: \val}
+  config: {}
+  dimension:
+    value: {type: \R, name: "value"}
+    name: {type: \N, name: "name"}
+  init: ->
+
+    @gview = d3.select @layout.get-group \view
+    @g = @gview.append \g
+    @tint = tint = new chart.utils.tint!
+
+    @arc = d3.arc!
+      .innerRadius 0
+      .outerRadius 100
+      .startAngle 0
+      .endAngle(Math.PI / 2)
+
+    @legend = new chart.utils.legend do
+      root: @root
+      name: 'legend'
+      shape: (d) -> d3.select(@).attr \fill, tint.get d.text
+      layout: @layout
+
+  parse: ->
+    @tint.reset!
+    @extent =
+      v: d3.extent @data.map -> it.value
+    @data.sort (a,b) -> a.value - b.value
+    @legend.data @data.map -> {key: it.name, text: it.name}
+
+  resize: ->
+    box = @layout.get-box \view
+    @layout.get-node \view .style.width = "#{box.height}px"
+    @layout.update false
+    [w,h] = [box.width, box.height]
+    size = Math.min(w,h)
+    @scale =
+      v: d3.scaleLinear!domain [0, @extent.v.1] .range [0, Math.PI * 3 / 2]
+      r: d3.scaleBand!domain (@data.map (d,i) -> i) .range [24, size/2]
+  render: ->
+    {scale} = @
+    bw = @scale.r.bandwidth!
+    @arc.cornerRadius bw/2
+    if @cfg? and @cfg.palette => @tint.set(@cfg.palette.colors.map -> it.value or it)
+    @legend.render!
+
+    box = @layout.get-box \view
+    @g.attr \transform, "translate(#{box.width / 2},#{box.height / 2})"
+    @g.selectAll \path.data .data @data
+      ..exit!remove!
+      ..enter!append \path .attr \class, \data
+    @g.selectAll \path.data
+      .attr \d, (d,i) ~>
+        @arc
+          .startAngle 0
+          .endAngle scale.v d.value
+          .innerRadius scale.r(i)
+          .outerRadius scale.r(i) + bw - 2
+        @arc!
+      .attr \fill, (d,i) ~> @tint.get d.name or d._idx
+    @g.selectAll \text.label .data @data
+      ..exit!remove!
+      ..enter!append \text .attr \class, \label
+    @g.selectAll \text.label
+      .attr \dominant-baseline, \center
+      .attr \text-anchor, \end
+      .attr \x, \-.5em
+      .attr \y, (d,i) -> -scale.r(i)
+      .attr \dy, -bw * 1/4
+      .text (d,i) -> d.name
+
+return block-factory

package/web/src/pug/block/curve-bar/0.0.1/index.pug

@@ -0,0 +1,16 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="view")
+        .pdl-cell(data-name="legend")
+      div(data-type="render")
+  style(type="text/css"): :stylus
+    .pdl-layout > div[data-type=layout]
+      display: flex
+      justify-content: center
+      align-items: center
+      [data-name=view]
+        height: 100%
+        margin-right: 1em
+  script(type="@plotdb/block"): include:lsc index.ls