@plotdb/chart 1.0.1 → 1.0.2

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

@@ -1,65 +0,0 @@
-module.exports =
-  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!

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

@@ -1,20 +0,0 @@
-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

@@ -1,161 +0,0 @@
-module.exports =
-  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

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

@@ -1,34 +0,0 @@
-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

@@ -1,121 +0,0 @@
-module.exports =
-  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!

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

@@ -1,19 +0,0 @@
-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