@plotdb/chart 0.0.2

package/src/utils/tip.ls

@@ -0,0 +1,97 @@
+tip = (opt = {}) ->
+  @root = if typeof(opt.root) == \string => document.querySelector(opt.root) else opt.root
+  @tip = if typeof(opt.node) == \string => @root.querySelector(opt.node) else opt.node
+  @margin = if opt.margin? => opt.margin else 10
+  @type = if opt.type == \over => \over else \move
+  @accessor = opt.accessor
+  @range = opt.range
+  @zmgr = opt.zmgr
+  @_z = 0
+  @enabled = true
+  if !@tip =>
+    @tip = document.createElement \div
+    @tip.innerHTML = """
+    <div ld="name" style="font-size:.85em"></div>
+    <div ld="value" style="font-weight:bold;font-size:1.1em;line-height:1.2em"></div>
+    """
+    @root.appendChild @tip
+    @tip.style <<<
+      padding: '.4em .5em'
+      background: \#13171a
+      color: \#fff
+      borderRadius: \3px
+      boxShadow: '0 2px 4px rgba(0,0,0,.3)'
+      lineHeight: \1.2em
+      fontSize: \.9em
+      maxWidth: "10em"
+      wordBreak: "break-all"
+
+  @tip.style <<<
+    position: \absolute
+    z-index: 1
+    top: 0
+    left: 0
+    pointerEvents: \none
+    userSelect: \none
+    opacity: 0
+    transition: 'opacity .15s ease-in-out' + (if @type == \over => ', transform .15s ease-in-out' else '')
+
+  @view = new ldview do
+    root: @tip
+    text: opt.view or {
+      name: ({ctx}) -> if ctx => ctx.name else ''
+      value: ({ctx}) -> if ctx => ctx.value else ''
+    }
+  @hide = debounce 3000, ->
+    @tip.style <<< opacity: 0
+    if @zmgr => @zmgr.remove @_z
+  @_evthdr = {}
+  if @accessor =>
+    @root.addEventListener (if @type == \over => \mouseover else \mousemove), @_evthdr.over = (e) ~>
+      if !(e.target and data = @accessor {evt: e}) => return
+      @render {data, node: e.target, evt: e}
+    @root.addEventListener \mouseout, @_evthdr.out = ~> @hide!now!
+
+  @
+
+tip.prototype = Object.create(Object.prototype) <<<
+  destroy: ->
+    if @_evthdr.over => @root.removeEventListener (if @type == \over => \mouseover else \mousemove), @_evthdr.over
+    if @_evthdr.out => @root.removeEventListener \mouseout, @_evthdr.out
+  toggle: -> return if !(it?) => @enabled else @enabled = it
+  render: (opt = {}) ->
+    if !@enabled => return
+    @view.set-ctx opt.data
+    @view.render!
+    rbox = @root.getBoundingClientRect!
+    nbox = if opt.node? =>
+      ret = opt.node.getBoundingClientRect!
+      ret <<< {x: ret.x - rbox.x, y: ret.y - rbox.y}
+    else if opt.box? => opt.box
+    else {x: opt.x, y: opt.y, width: opt.width, height: opt.height}
+    tbox = @tip.getBoundingClientRect!
+    [mx, my] = [opt.evt.clientX - rbox.x, opt.evt.clientY - rbox.y] # point relative to root origin
+    m = @margin # margin
+    [nx, ny] = [ # centroid of target element
+      nbox.x + (if nbox.width? => nbox.width/2 else 0)
+      nbox.y + (if nbox.height? => nbox.height/2 else 0)
+    ]
+    # expected tip offset: by default, centered at mouse position
+    [tx, ty] = [mx - tbox.width/2, my - tbox.height/2]
+    [tx, ty] = [ # then, offset to direction against centroid
+      tx + (if nx < mx => 1 else -1 ) * (m + tbox.width / 2),
+      ty + (if ny < my => 1 else -1 ) * (m + tbox.height / 2)
+    ]
+    range-box = if @range => range-box = @range! else rbox
+
+    [tx, ty] = [ # last, bound in @root
+      (((tx >? range-box.x - rbox.x) + tbox.width) <? range-box.width + range-box.x - rbox.x) - tbox.width,
+      (((ty >? range-box.y - rbox.y) + tbox.height) <? range-box.height + range-box.y - rbox.y) - tbox.height
+    ]
+    @tip.style <<<
+      transform: "translate(#{tx}px,#{ty}px)"
+      opacity: 1
+      z-index: @_z = (if !@zmgr => 10 else @zmgr.add 10)
+    @hide!
+
+if chart? => chart.{}utils.tip = tip

package/web/src/pug/base.pug

@@ -0,0 +1,19 @@
+//- view
+doctype html
+html
+  include @/@loadingio/bootstrap.ext/dist/index.pug
+  include @/ldview/dist/index.pug
+  block vars
+  head
+    block prehead
+    +css("/assets/lib/bootstrap/main/css/bootstrap.min.css")
+    +css("/assets/lib/bootstrap.ldui/main/bootstrap.ldui.min.css")
+    +css("/assets/lib/@loadingio/loading.css/main/loading.min.css")
+    +css("/css/index.css")
+    block head
+  body
+    block body
+    +script("https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver")
+    +script("/assets/lib/@loadingio/ldquery/main/ldq.min.js")
+    +script("/assets/lib/ldview/main/index.min.js")
+    block script

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

@@ -0,0 +1,38 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'axis', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context} .then ~> it.0
+
+mod = ({context}) ->
+  {d3,forceBoundary,ldcolor,repeatString$,infinite} = context
+  sample: ->
+    raw: [0 to 7].map (val) ~> {val: val, name: val}
+    binding:
+      name: {key: \name}
+      value: {key: \val}
+  config: {}
+  dimension:
+    value: {type: \R, name: "value"}
+    name: {type: \N, name: "name"}
+  init: ->
+    @ab = d3.axisBottom!
+    @scale = x: d3.scaleLinear!
+    @g = d3.select @svg .append \g
+
+  parse: ->
+
+  resize: ->
+    @scale.x.domain [0, 20] .range [20, @box.width - 20]
+    @ab.scale @scale.x .tickValues [0 to 20]
+
+  render: ->
+    @g.call @ab
+
+
+
+return block-factory

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

@@ -0,0 +1 @@
+div: script(type="@plotdb/block"): include:lsc index.ls

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

@@ -0,0 +1,141 @@
+<- (->it!) _
+
+block-factory = 
+  pkg:
+    name: 'axis-bubble', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context} .then ~> it.0
+
+mod = ({context}) ->
+  {d3, forceBoundary, ldcolor, repeatString$} = context
+  sample: ->
+    raw: [0 to 200].map (val) ~> 
+      {val: Math.random! * 50 + 10, x: Math.random!, cat: Math.ceil(5 * Math.random!)}
+    binding: do
+      color: {key: \cat}
+      radius: {key: \val}
+      xpos: {key: \x}
+  config: {}
+  dimension:
+    color: {type: \R, name: "顏色"}
+    radius: {type: \R, name: "半徑"}
+    xpos: {type: \R, name: "X座標"}
+  init: ->
+    @svg.addEventListener \click, ~>
+      @type = !@type
+      @resize!
+      @render!
+      @sim.stop!
+      @sim.alpha 0.9
+    @svg.appendChild t = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+    @text = d3.select(t)
+    @text
+      .attr \x, 20
+      .attr \y, 20
+  parse: ->
+    @xextent = d3.extent(@data.map -> it.xpos)
+    @rextent = d3.extent @data.map -> it.radius
+    @cextent = d3.extent @data.map -> it.color
+  resize: ->
+    rng = d3.randomUniform.source(d3.randomLcg(root.seed))(0, 1)
+    @scale-x = d3.scaleLinear!domain @xextent .range [0, @box.width]
+    if @type =>
+      @scale-y = d3.scaleLinear!domain @cextent .range [0, @box.height]
+    else
+      @scale-y = ~> @box.height / 2
+    @data.map (v) ~>
+      v <<< {
+        x: v.x or @scale-x(v.xpos)
+        y: v.y or @box.height / 2
+        ty: @scale-y(v.color)
+        val: v.radius
+        r: v.radius
+        c: v.color
+      }
+    @area = @box.width * @box.height 
+    @rate = 0.5
+  render: ->
+    rate = @rate
+    @scale = do
+      color: d3.interpolateTurbo
+      r: d3.scaleLinear!domain(@rextent).range([0,1])
+      c: d3.scaleLinear!domain(@cextent).range([0,1])
+    pal = if @cfg.palette => @cfg.palette.colors.map -> ldcolor.web(it.value or it) else <[#f00 #0f0 #00f #f90 #9f0 #0f9]>
+    int-color = d3.interpolateDiscrete pal
+    @scale.color = ~> int-color(@scale.c it)
+
+    d3.select @svg .selectAll \circle.bubble .data @data
+      ..exit!remove!
+      ..enter!append \circle
+        .attr \class, \bubble
+        .attr \r, (d,i) ~> 0
+        .attr \fill, (d,i) ~> @scale.color d.c
+
+    d3.select @svg .selectAll \circle.bubble
+      .attr \cx, (d,i) -> d.x
+      .attr \cy, (d,i) -> d.y
+      .attr \fill, (d,i) ~> @scale.color d.c #@scale.r(d.c)
+      .attr \r, (d,i) ~> (d.r >? 2) * @rate
+
+    d3.select @svg .selectAll \g.label .data @data
+      ..exit!remove!
+      ..enter!append \g
+        .attr \class, \label
+        .each (d,i) ->
+          [0] #[0,1]
+            .map ~> d3.select(@).append \text
+            .map ->
+              it
+                .attr \dy, \-.28em
+                .attr \text-anchor, \middle
+                .attr \font-size, \.7em
+                .attr \font-family, \Rubik
+                .style \pointer-event, \none
+    d3.select @svg .selectAll \g.label
+      .attr \transform, (d,i) -> "translate(#{d.x},#{d.y})"
+      .each (d,i) ->
+        d3.select(@).selectAll \text
+          .attr \opacity, (if ( d.r * 2 * rate ) < "#{(d.val).toFixed(2)}".length * 7 => 0 else 1)
+          .attr \dy, (e,i) -> \.38em #if i == 0 => '-.28em' else '.88em'
+          .text (e,i) ->
+            if i == 0 =>
+              if d.val > 1000000 => (d.val/1000000).toFixed(2) + "M"
+              else if d.val > 1000 => (d.val/1000).toFixed(2) + "K"
+              else (d.val).toFixed(2)
+            else return d._idx
+
+  tick: ->
+    if !@sim =>
+      kickoff = true
+      @fc = fc = d3.forceCollide!
+      @sim = d3.forceSimulation!
+        .force \center, @fg = d3.forceCenter @box.width/2, @box.height/2
+        .force \x, @fx = d3.forceX(@box.width / 2).strength(0.15)
+        .force \y, @fy = d3.forceY((@box.height) / 2).strength(0.1)
+        .force \b, @fb = forceBoundary((->it.r), (->it.r), (~>@box.width - it.r), (~>@box.height - it.r))
+        .force \collide, fc
+      @sim.stop!
+      @sim.alpha 0.9
+      @sim.nodes(@data)
+    @fc.strength 1.0
+    @fc.radius ~> @rate * it.r + 2
+    @fg.x @box.width/2
+    @fg.y @box.height/2
+    @fx.strength 0.15
+    @fy.strength 0.01
+    @sim.tick if kickoff => 20 else 1
+    alpha = @sim.alpha!
+    @text.text alpha
+    if alpha < 0.001 => @stop!
+    @data.map -> it.y = it.y + (it.ty - it.y) * alpha * 0.1
+
+    d3.select @svg .selectAll \circle.bubble
+      .attr \cx, (d,i) -> d.x
+      .attr \cy, (d,i) -> d.y
+    d3.select @svg .selectAll \g.label
+      .attr \transform, (d,i) -> "translate(#{d.x},#{d.y})"
+    @render!
+
+return block-factory

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

@@ -0,0 +1 @@
+div: script(type="@plotdb/block"): include:lsc index.ls

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

@@ -0,0 +1,274 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'bar', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+    i18n:
+      "zh-TW":
+        "size": "長度"
+  init: ({root, context, t, pubsub}) ->
+    pubsub.fire \init, mod: mod({context, t})
+
+mod = ({context, t}) ->
+  {chart,d3,debounce} = context
+  sample: ->
+    raw: [0 to 10].map (val) ~>
+      ret = {name: val}
+      for i from 1 to 4 => ret["val#i"] = Math.random!
+      return ret
+    binding:
+      size: [1 to 4].map -> {key: "val#it", unit: "amount"}
+      name: {key: "name"}
+  config: {} <<< chart.utils.config.preset.default <<<
+    sort:
+      enabled: type: \boolean
+      dir: type: \choice, values: <[asc desc none]>
+    type: type: \choice, values: <[bar column]>, default: \column
+  dimension:
+    size: {type: \R, multiple: true, name: "size"}
+    name: {type: \NO, name: "name"}
+  init: ->
+    @tint = tint = new chart.utils.tint!
+    [[\multiple, \stack], [\percent, false], [\dancing, true]].map ([k,v]) ~>
+      if !(@cfg[k]?) => @cfg[k] = v
+    @svg.addEventListener \click, ~>
+      if !@cfg.dancing or @cfg.percent => return
+      @align-idx = ((@align-idx or 0) + 1) % (@binding.size.length + 1)
+      @resize!
+      @render!
+    @brush = d3.brushX!
+    @g = Object.fromEntries <[view xaxis yaxis legend]>.map ~> [it, d3.select(@layout.get-group it)]
+    @range = "null"
+    brush = debounce 150, (e) ~>
+      if @cfg.{}brush.enabled? and !@cfg.brush.enabled => return
+      range = e.selection
+      if (_range = JSON.stringify(range)) == @range => return else @range = _range
+      if !range => @filter {name: undefined}, true
+      else
+        domain = @scale.x.domain!
+        bandwidth = @scale.x.bandwidth!
+        range = range.map -> Math.floor(it / bandwidth) >? 0 <? (domain.length - 1)
+        range = [range.0 to range.1].map -> domain[it]
+        @filter {name: {type: 'index', value: range}}, true
+    @brush.on \end, brush
+    @brush.on \brush, brush
+    @scale = scale = {}
+    @yaxis = new chart.utils.axis layout: @layout, name: \yaxis, direction: \left
+    @xaxis = new chart.utils.axis layout: @layout, name: \xaxis, direction: \bottom
+    @legend = new chart.utils.legend do
+      layout: @layout
+      name: \legend
+      root: @root
+      shape: (d) -> d3.select(@).attr \fill, tint.get d.key
+    # d3.brush covers the whole svg element. need to support by calculation. TODO
+    /*
+    @tip = new chart.utils.tip {
+      root: @root
+      accessor: ({evt}) ~>
+        if !(evt.target and data = d3.select(evt.target).datum!) => return null
+        v = if isNaN(data.size) => '-' else "#{data.size.toFixed(2)}#{data.unit or ''}"
+        return {name: "#{data.group or ''} / #{data.name or ''}", value: v}
+      range: ~> @layout.get-node \view .getBoundingClientRect!
+    }
+    */
+
+  destroy: -> if @tip => @tip.destroy!
+
+  filter: (filters, internal = false) -> 
+    @render!
+    if internal => return
+    @brush.move @g.view, if filters.name => filters.name.map ~> @scale.x(it) else null
+  parse: ->
+    @data.map (d) -> d.size = d.size.map -> if isNaN(it) => 0 else it
+    @align-idx = undefined
+  resize: ->
+    @type = @cfg.type or \column
+    #@tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
+    @legend.config @cfg.legend
+    @legend.update!
+    @layout.update false
+
+    @max-per-group = @binding.size.map (d,i) ~> Math.max.apply(Math, @data.map -> it.size[i])
+
+    # alternative align base. required for dancing stack
+    if @cfg.align-idx and !@align-idx => @align-idx = @cfg.align-idx
+    align-idx = (if @cfg.percent => 0 else (@align-idx or 0)) <? @binding.size.length
+    @base-offset = @data.map (d) -> [0 til align-idx].reduce(((a,b) -> a + d.size[b]),0) or 0
+    @delta = delta = Math.max.apply(Math, @base-offset)
+    # stack bar
+    if @cfg.multiple == \stack
+      # 100% stack
+      if @cfg.percent => max = 1
+      else
+        max = Math.max.apply(Math,
+          @data.map (d) ~> [align-idx til d.size.length].reduce(((a,b) -> a + d.size[b]),0)
+        ) + (delta or 0)
+    # group bar
+    else if @cfg.multiple == \group
+      max = Math.max.apply(Math, @data.map (d) ~> Math.max.apply(Math, d.size))
+    # split bars
+    else if @cfg.multiple == \split
+      max = @max-per-group.reduce(((a,b) -> a + b),0)
+    @order = @data.map (d,i) -> {key: d._idx, idx: i, name: d.name}
+    @data.map (d,i) -> d.sum = d.size.reduce(((a,b) -> a + b),0)
+    if @cfg.{}sort.enabled =>
+      @order.sort (a,b) ~> (if @cfg.sort.dir == \asc => 1 else -1) * (@data[a.idx].sum - @data[b.idx].sum)
+    console.log @cfg
+    if @cfg.palette => @tint.set(@cfg.palette.colors.map -> it.value or it)
+    # order reversed to make it visually aligned with bar.
+    @legend.data [{
+      key: i, text: @binding.size[i].name or @binding.size[i].key
+    } for i from @binding.size.length - 1 to 0 by -1 ]
+    @layout.update false
+
+    box = @layout.get-box \view
+
+    if @type == \column =>
+      @scale <<<
+        y: d3.scaleLinear!domain([0,max]).range [box.height, 0]
+        x: d3.scaleBand!domain @order.map(->it.name or it.key) .range [0, box.width]
+      max-tick = Math.ceil(@layout.get-box \yaxis .height / 40) >? 2
+      yticks = if @cfg.bump => [1 to ((@parsed.length or 1) >? 1)]
+      else @scale.y.ticks((@cfg.{}yaxis.tick-count or 4) <? max-tick)
+      @yaxis.config @cfg.yaxis
+      v = @binding.size.0 or {}
+      if @binding.size.length > 1 => @yaxis.caption( if v.unit => "#{v.unit}" else '')
+      else @yaxis.caption( (v.name or v.key or '') + if v.unit => "(#{v.unit})" else '')
+      @yaxis.ticks yticks
+      @yaxis.scale @scale.y
+      @xaxis.config @cfg.{}xaxis
+      @xaxis.ticks @data.map -> it.name
+      @xaxis.scale @scale.x
+      @xaxis.caption(
+        (@binding.name.name or @binding.name.key) +
+        if @binding.name.unit => "(#{@binding.name.unit})" else ''
+      )
+    else
+      @scale <<<
+        x: d3.scaleLinear!domain([0,max]).range [box.width, 0]
+        y: d3.scaleBand!domain @order.map(->it.name or it.key) .range [0, box.height]
+      max-tick = Math.ceil(@layout.get-box \xaxis .width / 80) >? 2
+      xticks = if @cfg.bump => [1 to ((@parsed.length or 1) >? 1)]
+      else @scale.x.ticks((@cfg.{}xaxis.tick-count or 4) <? max-tick)
+      @xaxis.config @cfg.xaxis
+      v = @binding.size.0 or {}
+      if @binding.size.length > 1 => @xaxis.caption( if v.unit => "#{v.unit}" else '')
+      else @xaxis.caption( (v.name or v.key or '') + if v.unit => "(#{v.unit})" else '')
+      @xaxis.ticks xticks
+      @xaxis.scale @scale.x
+      @yaxis.config @cfg.{}yaxis
+      @yaxis.ticks @data.map -> it.name
+      @yaxis.scale @scale.y
+      @yaxis.caption(
+        (@binding.name.name or @binding.name.key) +
+        if @binding.name.unit => "(#{@binding.name.unit})" else ''
+      )
+
+    # xaxis and yaxis affect each other and they all affect view.
+    # we may need to update them until stable but for now we simply layout twice.
+    for i from 0 til 2 =>
+      @layout.update false
+      box = @layout.get-box('view')
+      [w,h] = [box.width, box.height]
+      @tint.set @cfg.palette
+      r = @cfg.dot-size or 3
+      @scale.x.range [0, w - r]
+      @scale.y.range [h, r]
+      @xaxis.render!
+      @yaxis.render!
+
+    box = @layout.get-box \view
+    @brush.extent [[0, 1],[box.width, box.height - 1]]
+
+  render: ->
+    {binding, scale, range, delta, base-offset, max-per-group, cfg, tint, data, type} = @
+    @g.view.selectAll \g.bar .data @data
+      ..exit!remove!
+      ..enter!append \g .attr \class, \bar
+    @g.view.selectAll \g.bar
+      .attr \transform, (d,i) ~>
+        if @type == \column => "translate(#{scale.x(d.name)},0)"
+        else "translate(0,#{scale.y(d.name)})"
+      .each (item,j) ->
+        [bars,offset] = [[],0]
+        # alternative align base. required for dancing stack
+        offset = (delta - base-offset[j])
+
+        # use to tweak output size / offset. 1 = no modification
+        sum = 1
+        # and set sum to this for 100% stack bar
+        if cfg.percent == true => sum = item.size.reduce(((a,b) -> a + b),0) >? 1
+
+        for idx from 0 til item.size.length =>
+          size = item.size[idx]
+          key = idx
+          bars.push {
+            size: size / sum
+            offset: offset / sum
+            key: key
+            group: item.name
+            name: binding.size[key].name or binding.size[key].key
+            unit: binding.size[key].unit or ''
+          }
+          # multiple bars
+          if cfg.multiple == \split => offset += max-per-group[idx]
+          # stack bar
+          else if cfg.multiple == \stack => offset += size
+
+
+        d3.select @ .selectAll \rect .data(bars, (d,i) -> d.key)
+          ..exit!remove!
+          ..enter!append \rect
+            ..attr(\width, (d,i) -> (scale.x.bandwidth! - 2) >? 1) if type == \column
+            ..attr(\y, (d,i) -> scale.y(0))                  if type == \column
+            ..attr(\height, (d,i) -> (scale.y.bandwidth! - 2) >? 1) if type != \column
+            ..attr(\x, (d,i) -> scale.x(0))                  if type != \column
+
+        tran = d3.select @ .selectAll \rect
+          .transition!duration 350
+          # group bar
+          .call (sel) ->
+            if cfg.multiple != \group => return
+            sel
+              ..attr(\x, (d,i) -> 1 + i * (scale.x.bandwidth! - 2) / bars.length)    if type == \column
+              ..attr(\width, (d,i) -> (scale.x.bandwidth! - 2) / bars.length)        if type == \column
+              ..attr(\y, (d,i) -> Math.round(Math.min(scale.y(0), scale.y(d.size)))) if type == \column
+
+              ..attr(\y, (d,i) -> 1 + i * (scale.y.bandwidth! - 2) / bars.length)    if type != \column
+              ..attr(\height, (d,i) -> (scale.y.bandwidth! - 2) / bars.length)       if type != \column
+              ..attr(\x, (d,i) -> Math.round(Math.min(scale.x(0), scale.x(d.size)))) if type != \column
+
+          # stack bar
+          .call (sel) ->
+            if cfg.multiple != \stack => return
+            sel
+              ..attr(\x, 1) if type == \column
+              ..attr(\width, (d,i) -> scale.x.bandwidth! - 2) if type == \column
+              ..attr( \y, (d,i) -> Math.round(Math.min(scale.y(d.offset), scale.y(d.offset + d.size)))) if type == \column
+              ..attr(\y, 1) if type != \column
+              ..attr(\height, (d,i) -> scale.y.bandwidth! - 2) if type != \column
+              ..attr( \x, (d,i) -> Math.round(Math.min(scale.x(d.offset), scale.x(d.offset + d.size)))) if type != \column 
+
+        if type == \column =>
+          tran.attr \height, (d,i) -> Math.round(Math.abs(scale.y(0) - scale.y(d.size)))
+        else
+          tran.attr \width, (d,i) -> Math.round(Math.abs(scale.x(0) - scale.x(d.size)))
+        tran
+          .attr \fill, (d,i) ~> tint.get i, (if cfg.color-variant => ((j/data.length) - 0.5) else 0)
+          .attr \fill-opacity, (d,i) ~>
+            if !(binding.name and filter = binding.name.filter) => return 1
+            if !(range = filter.value) => return 1
+            if item.name in range => 1 else 0.2
+
+    if !(@cfg.{}brush.enabled? and !@cfg.brush.enabled) => @g.view.call @brush
+    @g.view.selectAll \rect.selection
+      .attr \shape-rendering, \auto
+    @legend.render!
+    @yaxis.render!
+    @xaxis.render!
+
+  tick: ->
+
+return block-factory

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

@@ -0,0 +1,35 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="yaxis")  
+        .pdl-cell(data-name="view")
+        .pdl-cell
+        .pdl-cell(data-name="xaxis")  
+        .pdl-cell(data-name="legend")  
+      div(data-type="render")
+
+  style(type="text/css"): :stylus
+    [data-name=xaxis] { font-size: 0.8em }
+    [data-name=yaxis] { font-size: 0.8em }
+    .pdl-layout > div[data-type=layout]
+      display: grid
+      grid-template-columns: fit-content(2em) 1fr fit-content(10em)
+      grid-template-rows: 1fr fit-content(1em)
+      /* 0.5em for axis label at the boundary */
+      padding: 0 0.5em
+      & > .pdl-cell[data-name=legend]
+        grid-column: 3
+        grid-row: 1 / span 2
+        padding-left: 1em
+
+    .pdl-layout.legend-below > div[data-type=layout]
+      grid-template-columns: 2em 1fr
+      grid-template-rows: 1fr fit-content(2em) fit-content(3em)
+      .pdl-cell[data-name=legend]
+        padding-top: 1em
+        grid-column: 1 / span 2
+        grid-row: 3
+
+
+  script(type="@plotdb/block"): include:lsc index.ls