@plotdb/chart 0.0.2

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

@@ -0,0 +1,69 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'number', 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,ldcolor,repeatString$,infinite} = context
+  sample: ->
+    raw: [{val: 12777216, name: "票房", unit: "新臺幣"}]
+    binding:
+      name: {key: \name}
+      value: {key: \val, unit: '百萬元新臺幣'}
+  config:
+    enlarge: type: \boolean, default: false
+  dimension:
+    value: {type: \R, name: "value"}
+    name: {type: \N, name: "name"}
+  init: ->
+    @n = Object.fromEntries <[number unit]>.map ~> [it, @layout.get-node(it)]
+    @g = Object.fromEntries <[number unit]>.map ~> [it, d3.select(@layout.get-group it)]
+    @g.number.append \text
+    @g.unit.append \text
+    @v = number: 0, unit: '', run: 0
+
+  resize: ->
+    [w,h] = [@box.width, @box.height]
+    @size-rate = number: (@cfg.number-size-rate or 3), unit: (@cfg.unit-size-rate or 1)
+    @v <<< do
+      number: (@data.0 or {value: 0}).value
+      unit: @binding.value.unit or (@data.0 or {unit: ''}).unit or ''
+    @n.number
+      ..style.fontSize = "#{@size-rate.number}em"
+      ..textContent = @v.number
+    @n.unit
+      ..style.fontSize = \1em
+      ..textContent = @v.unit
+    @r = r = Object.fromEntries <[number unit]>.map ~> [it, (w / (@n[it]getBoundingClientRect!width or 1))]
+    (if !@cfg.enlarge => <[number unit]> else <[unit]>).map ~> @r[it] = (r[it] <? 1)
+    @n.number.style.fontSize = "#{@size-rate.number * r.number}em"
+    @n.unit.style.fontSize = "#{@size-rate.unit * r.unit}em"
+    @layout.update false
+
+  tick: ->
+    @g.number.select \text .text ~>
+      @v.run = (@v.number - @v.run) * 0.1 + @v.run
+      if @v.run == @v.number => @stop!
+      return Math.round(@v.run)
+
+  render: ->
+    @g.number.select \text
+      .attr \x, (@n.number.getBoundingClientRect!width / 2)
+      .attr \font-size, "#{@size-rate.number * @r.number}em"
+      .attr \font-weight, \bold
+      .attr \dominant-baseline, \hanging
+      .attr \text-anchor, \middle
+      .text @v.run
+    @g.unit.select \text
+      .attr \font-size, "#{@size-rate.unit * @r.unit}em"
+      .attr \dominant-baseline, \hanging
+      .text @v.unit
+    @start!
+
+return block-factory

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

@@ -0,0 +1,20 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="number")
+        .pdl-cell(data-name="unit")
+      div(data-type="render")
+  style(type="text/css"): :stylus
+    .pdl-layout > [data-type=layout]
+      flex-direction: column
+      display: flex
+      align-items: center
+      justify-content: center
+      .pdl-cell
+        line-height: 1em
+        white-space: nowrap
+      .pdl-cell[data-name=number]
+        font-weight: bold
+
+  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -0,0 +1,167 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'percent-list', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+    i18n:
+      "zh-TW": "other": "其它"
+  init: ({root, context, pubsub, t}) ->
+    pubsub.fire \init, mod: mod {context, t}
+
+mod = ({context, t}) ->
+  {chart,d3,wrapSvgText,debounce} = context
+  sample: ->
+    raw: [
+      "Bachchan Pandey", "The Good Maharaja", "Ramprasad Ki Tehrvi",
+      "Madam Chief Minister", "Satya Sai Baba", "Lahore Confidential",
+      "Sandeep Aur Pinky Faraar", "Silence... Can You Hear It?"
+      "Hum Bhi Akele Tum Bhi Akele", "Radhe", "Shaadisthan",
+      "Chandigarh Kare Aashiqui", "Gangubai Kathiawadi", "Attack",
+      "The Battle of Bhima Koregaon", "Tadap", "Looop Lapeta"
+      ].map (val) ~> {val: Math.random!, name: val}
+    binding:
+      name: {key: \name}
+      value: {key: \val}
+  config: {}
+  dimension:
+    value: {type: \R, name: "value", priority: 20}
+    name: {type: \N, name: "name", priority: 10}
+  init: ->
+    @g =
+      view: d3.select @layout.get-group \view
+      link: d3.select @layout.get-group \link
+      legend: d3.select @layout.get-group \legend
+    @tint = tint = new chart.utils.tint!
+    @scale =
+      y: d3.scaleLinear!
+    @layout.get-group \view .addEventListener \mousemove, (evt) ~>
+      if !((n = evt.target) and n.nodeName.toLowerCase! == \rect) => return
+      @idx = Array.from(n.parentNode.childNodes).indexOf(n)
+      @render-debounced!
+    @render-debounced = debounce 350, ~> @render!
+
+  parse: ->
+    @cfg.{}collapse.enabled = false
+    @parsed = @data.map -> {} <<< it
+    @parsed.sort (a,b) -> b.value - a.value
+    if @cfg.collapse.enabled =>
+      if @cfg.collapse.method == \count =>
+        other = @parsed.splice(@cfg.collapse.threshold or 7)
+        if other.length => @parsed.push {name: t("other"), value: other.reduce(((a,b) -> a + b.value),0)}
+      else # == \percent
+        [total,sum] = [@parsed.reduce(((a,b) -> a + b.value),0), 0]
+        for idx from 0 til @parsed.length =>
+          sum += @parsed[idx].value
+          if (sum / total) > (@cfg.collapse.threshold or 0.75) => break
+        other = @parsed.splice(idx + 1)
+        if other.length => @parsed.push {name: t("other"), value: other.reduce(((a,b) -> a + b.value),0)}
+    @tint.reset!
+    @parsed.map ~> @tint.get(it.name or it._idx)
+
+    offset = 0
+    for i from 0 til @parsed.length =>
+      ret = @parsed[i]
+      ret.offset = offset
+      offset += ret.value
+    @total = offset or 1
+
+  resize: ->
+    @layout.update false
+    node = @layout.get-node \legend
+    node.textContent = ""
+    @parsed.map ~>
+      div = document.createElement \div
+      p = (100 * (it.value / @total)).toFixed(1)
+      div.textContent = it.text = "#{it.name} / #p%"
+      node.appendChild div
+
+    @nboxes = @parsed.map (d,i) ~> @layout.get-node \legend .childNodes[i] .getBoundingClientRect!
+    @rbox = @layout.get-node \legend .getBoundingClientRect!
+    @lbox = @layout.get-box \link
+    box = @layout.get-box \view
+    @layout.update false
+    box = @layout.get-box \view
+    [w,h] = [box.width, box.height]
+    size = Math.min(w,h)
+    @scale.y.range [0, box.height] .domain [0, @total]
+  render: ->
+    {total,cfg,layout,tint,scale,nboxes,rbox,lbox} = @
+    if @cfg? and @cfg.palette => @tint.set(@cfg.palette.colors.map -> it.value or it)
+    box = @layout.get-box \view
+    offset = 0
+    if (@idx?) and nboxes.length =>
+      @idx = (@idx <? @nboxes.length - 1 >? 0)
+      offset = nboxes[@idx]y - rbox.y
+      last = nboxes[* - 1].y + nboxes[* - 1].height - rbox.y
+      if last - offset < rbox.height => offset = last - rbox.height
+
+    @g.view.selectAll \rect .data @parsed
+      ..exit!remove!
+      ..enter!append \rect
+    @g.view.selectAll \rect
+      ..attr \x, -> 0
+      ..attr \y, (d,i) -> scale.y(d.offset)
+      ..attr \width, -> box.width
+      ..attr \height, (d,i) -> (scale.y(d.offset + d.value) - scale.y(d.offset) - 1) >? 1
+      ..attr \fill, (d,i) ->
+        return tint.get Math.ceil(((d.offset + d.value/2) / total) * 5)
+        ret = tint.get 0, (((i % 3) - 1) / 5)
+        if cfg.collapse.enabled =>
+          nbox = nboxes[i]
+          y1 = (nbox.y - rbox.y) + (nbox.height / 2)
+          if y1 < rbox.height => return ret
+          ret = ldcolor.hcl(ret)
+          ret.c = ret.c * 0.1
+          ret.l = ret.l * 1.1
+        return ldcolor.web(ret)
+    @g.legend.selectAll \g.label .data @parsed
+      ..exit!remove!
+      ..enter!append \g .attr \class, \label
+    @g.legend.selectAll \g.label
+      .each (d,i) ->
+        if @_text != d.text =>
+          @_text = d.text
+          n = layout.get-node \legend .childNodes[i]
+          ret = wrap-svg-text node: n, use-range: true
+          @textContent = ""
+          @appendChild ret
+      .transition!duration 350
+      .attr \opacity, (d,i) ->
+        nbox = nboxes[i]
+        y = nbox.y - rbox.y - offset
+        if y < 0 or y > rbox.height - nbox.height/2 => 0 else 1
+      .attr \transform, (d,i) ->
+        nbox = nboxes[i]
+        "translate(#{nbox.x - rbox.x}, #{nbox.y - rbox.y - offset})"
+    @g.link.selectAll \path .data @parsed
+      ..exit!remove!
+      ..enter!append \path
+        .attr \fill, \none
+        .attr \stroke-width, 1
+    @g.link.selectAll \path
+      #.attr \stroke, cfg.line
+      .attr \stroke, (d,i) ->
+        return tint.get Math.ceil(((d.offset + d.value/2) / total) * 5)
+      .transition!duration 350
+      .attr \d, (d,i) ->
+        x0 = 0
+        x1 = lbox.width / 10
+        x2 = 9 * lbox.width / 10
+        x3 = lbox.width
+        y0 = scale.y(d.offset + d.value / 2)
+        nbox = nboxes[i]
+        y1 = (nbox.y - rbox.y) + (nbox.height / 2) - offset
+        if Math.abs(y1 - y0) < 2 => y1 = y0
+        "M#x0 #y0 L#x1 #y0 L#x2 #y1 L#x3 #y1"
+      .attr \opacity, (d,i) ->
+        nbox = nboxes[i]
+        y0 = scale.y(d.offset + d.value / 2)
+        y1 = (nbox.y - rbox.y) + (nbox.height / 2) - offset
+        if Math.abs(y1 - y0) < 2 => y1 = y0
+        return if y1 > (rbox.height) or y1 < 0 => 0 else 1
+
+
+
+return block-factory

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

@@ -0,0 +1,34 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="view")
+        .pdl-cell(data-name="link")
+        .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
+      padding: .5em
+      & > [data-name=view]
+        height: 100%
+        min-width: 2.5em
+        margin-right: .5em
+        flex: 1 0 2.5em
+      & > [data-name=link]
+        height: 100%
+        width: 2.5em
+        margin-right: .5em
+        flex: 0 0 auto
+      & > [data-name=legend]
+        flex: 1 0 auto
+        width: fit-content
+        max-width: 60%
+        height: 100%
+        display: flex
+        flex-direction: column
+        justify-content: start
+        align-items: start
+  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -0,0 +1,125 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'pie', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+    i18n:
+      "zh-TW":
+        value: "數值"
+        name: "名稱"
+        other: "其它"
+  init: ({root, context, pubsub, t}) ->
+    pubsub.fire \init, mod: mod {context, t}
+
+mod = ({context, t}) ->
+  {chart,d3} = context
+  sample: ->
+    raw: [1 to 5].map (val) ~> {val: (10 * Math.random!).toFixed(2), name: val}
+    binding:
+      name: {key: \name}
+      value: {key: \val}
+  config: {}
+  dimension:
+    value: {type: \R, name: "value", priority: 20}
+    name: {type: \NO, name: "name", priority: 10}
+  init: ->
+    @g = Object.fromEntries <[view legend]>.map ~> [it, d3.select(@layout.get-group it).append \g]
+    @tint = tint = new chart.utils.tint!
+    @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.value) => '-' else "#{(data.value).toFixed(2)}#{@binding.value.unit or ''}"
+        return {name: data.name, value: v}
+      range: ~> @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.text
+      cfg: selectable: true
+    @legend.on \select, ~> @bind!; @resize!; @render!
+    @arc = d3.arc!
+      .innerRadius 0
+      .outerRadius 100
+      .startAngle 0
+      .endAngle(Math.PI / 2)
+    @total = {}
+
+  destroy: ->
+    @tip.destroy!
+
+  parse: ->
+    @tint.reset!
+    @parsed = @data.map ->
+      ret = {} <<< it
+      if isNaN(ret.value) => ret.value = 0
+      ret
+
+    @parsed.sort (a,b) -> b.value - a.value
+    if @cfg.collapse? and @cfg.collapse.enabled =>
+      if @cfg.collapse.method == \count =>
+        other = @parsed.splice(@cfg.collapse.threshold or 7)
+        if other.length => @parsed.push {name: t("other"), value: other.reduce(((a,b) -> a + b.value),0)}
+      else # == \percent
+        [total,sum] = [@parsed.reduce(((a,b) -> a + b.value),0), 0]
+        for idx from 0 til @parsed.length => 
+          sum += @parsed[idx].value
+          if (sum / total) > (@cfg.collapse.threshold or 0.75) => break
+        other = @parsed.splice(idx + 1)
+        if other.length => @parsed.push {name: t("other"), value: other.reduce(((a,b) -> a + b.value),0)}
+    @legend.data @parsed.map -> {text: it.name, key: it.name}
+  bind: ->
+    @parsed.map ~> it.picked = @legend.is-selected it.name
+    @total.old = @total.cur
+    @total.cur = @parsed.reduce(((a,b) -> a + (if b.picked => b.value else 0)),0) or 1
+    if !@total.old => @total.old = @total.cur
+
+    offset = 0
+    for i from 0 til @parsed.length =>
+      obj = @parsed[i]
+      if !obj.old => obj.old = {s: (if @parsed[i - 1] => that.old.e else 0), e: 0}
+      if obj.cur => obj.old = obj.cur
+      obj.cur =
+        s: offset
+        e: offset + (if obj.picked => obj.value else 0)
+      obj.angle =
+        old: s: 2 * Math.PI * obj.old.s / @total.old, e: 2 * Math.PI * obj.old.e / @total.old
+        cur: s: 2 * Math.PI * obj.cur.s / @total.cur, e: 2 * Math.PI * obj.cur.e / @total.cur
+      if obj.picked => offset += obj.value
+
+  resize: ->
+    @layout.update false
+    box = @layout.get-box \view
+    @layout.get-node \view .style.width = "#{box.height}px"
+    @layout.update false
+    box = @layout.get-box \view
+    [w,h] = [box.width, box.height]
+    size = Math.min(w,h)
+    @arc
+      .innerRadius((@cfg.donut-percent or 0.7) * size/2)
+      .outerRadius size/2
+  render: ->
+    {tint} = @
+
+    interpolate-arc = (a1, a2) ~> (t) ~>
+      [s,e] = <[s e]>.map (i) -> (a2[i] - a1[i]) * t + a1[i]
+      @arc.startAngle s .endAngle e
+      @arc!
+
+    if @cfg? and @cfg.palette => @tint.set(@cfg.palette.colors.map -> it.value or it)
+    box = @layout.get-box \view
+    @g.view.attr \transform, "translate(#{box.width / 2},#{box.height / 2})"
+    @g.view.selectAll \path.data .data(@parsed, -> it.name or it._idx)
+      ..exit!remove!
+      ..enter!append \path .attr \class, \data
+    @g.view.selectAll \path.data
+      .attr \fill, (d,i) ~> @tint.get(d.name or d._idx)
+      .transition!duration 350
+      .attrTween \d, (d,i) -> interpolate-arc d.angle.old, d.angle.cur
+    @legend.render!
+
+return block-factory

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

@@ -0,0 +1,19 @@
+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
+      & > [data-name=legend]
+        min-width: 6em
+
+  script(type="@plotdb/block"): include:lsc index.ls