@plotdb/chart 1.0.1 → 1.0.2

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

@@ -1,218 +0,0 @@
-module.exports =
-  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: {} <<< chart.utils.config.preset.default
-  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
-      direction: if @cfg.{}legend.position == \bottom => \horizontal else \vertical
-      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: ->
-    @root.querySelector('.pdl-layout').classList.toggle \legend-bottom, @cfg.{}legend.position == \bottom
-    @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})"

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

@@ -1,42 +0,0 @@
-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
-    .pdl-layout.legend-bottom > div[data-type=layout]
-      grid-template-columns: 1fr fit-content(1em)
-      grid-template-rows: 1fr fit-content(3em)
-      .pdl-cell[data-name=view]
-        grid-column: 1 / span 2
-        grid-row: 1
-      .pdl-cell[data-name=legend]
-        padding-top: 1em
-        grid-column: 1
-        grid-row: 2
-      .pdl-cell[data-name=unit]
-        padding-top: 1em
-        grid-column: 2
-        grid-row: 2
-
-  script(type="@plotdb/block"): include:lsc index.ls

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

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

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

@@ -1,16 +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
-  script(type="@plotdb/block"): include:lsc index.ls