@plotdb/chart 0.0.2

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

@@ -0,0 +1,53 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'taiwanvillage', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: [
+      {url: "https://d3js.org/topojson.v2.min.js", async: false}
+      {url: "/js/work/map.list.js", async: false}
+      {url: "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"}
+    ]
+
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context} .then ~> it.0
+
+mod = ({context}) ->
+  {d3,forceBoundary,ldColor,repeatString$, pdmaptw, counties, towns, villages} = context
+  sample: ->
+    val =
+      counties: counties.map (d,i) -> {val: Math.random!, county: d}
+      towns: towns.map (d,i) -> {val: Math.random!, town: d}
+      villages: villages.map (d,i) -> {val: Math.random!, village: d}
+    raw: val.villages
+    binding: do
+      color: {key: \val}
+      name: {key: \village}
+  config: {}
+  dimension:
+    name: {type: \N, name: "國家"}
+    color: {type: \R, name: "顏色"}
+  init: ->
+    @obj = pdmaptw.create do
+      root: @svg
+      type: \village
+      baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
+    @obj.init!then ~> @obj.fit!
+  parse: ->
+    d3.select @svg .selectAll \path .each (d,i) ~>
+      d.data = @data.filter(-> it.name == d.properties.name).0 or {}
+    d3.select @svg .selectAll \path
+      .filter (d,i) -> !/彰化縣/.exec(d.properties.name)
+      .remove!
+    @obj.fit!
+  resize: -> #@obj.fit!
+  render: ->
+    @color = d3.interpolateTurbo
+    if @cfg? and @cfg.palette =>
+      @color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldColor.web(it.value or it)
+    d3.select @svg .selectAll \path
+      .transition!duration 350
+      .attr \fill, (d,i) ~> @color d.data.color
+
+return block-factory

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

@@ -0,0 +1,52 @@
+div: script(type="@plotdb/block"): include:lsc index.ls
+
+div: script(type="@plotdb/block"): :lsc
+  {
+    pkg:
+      name: 'taiwantown', version: '0.0.1'
+      dependencies: [
+        {url: "https://d3js.org/d3.v4.js", async: false}
+        "https://d3js.org/d3-format.v2.min.js"
+        "https://d3js.org/d3-array.v2.min.js"
+        "https://d3js.org/topojson.v2.min.js"
+        {url: "https://d3js.org/d3-color.v1.min.js", async: false}
+        {url: "https://d3js.org/d3-interpolate.v1.min.js", async: false}
+        {url: "https://d3js.org/d3-scale-chromatic.v1.min.js", async: false}
+        "/js/map.list.js"
+        "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"
+      ]
+    init: ({root, context}) ->
+      counties = context.counties.map (d,i) -> {val: Math.random!, county: d}
+      towns = context.towns.map (d,i) -> {val: Math.random!, town: d}
+      c = new chart do
+        root: root
+        raw: towns
+        mod: @mod({context})
+        binding: do
+          color: {name: \val}
+          name: {name: \town}
+      c.init!then -> c.render!
+      @c = c
+
+    interface: -> @c
+
+    mod: ({context}) ->
+      return do
+        init: ->
+          @obj = context.pdmaptw.create do
+            root: @svg
+            type: \town
+            baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
+          @obj.init!then ~> @obj.fit!
+        parse: ->
+          d3.select @svg .selectAll \path .each (d,i) ~>
+            d.data = @data.filter(-> it.name == d.properties.name).0 or {}
+        resize: -> #@obj.fit!
+        render: ->
+          @color = d3.interpolateTurbo
+          if config.pal => @color = d3.interpolateDiscrete config.pal
+          d3.select @svg .selectAll \path
+            .transition!duration 350
+            .attr \fill, (d,i) ~> @color d.data.color
+
+  }

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

@@ -0,0 +1,172 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'treemap', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: []
+    i18n:
+      "zh-TW":
+        "other": "其它"
+        "unit": "單位"
+  init: ({root, context, pubsub, t}) ->
+    pubsub.fire \init, mod: mod {root, context, t}
+
+mod = ({root, context, t}) ->
+  {chart,d3,ldcolor,wrap-svg-text} = context
+  sample: ->
+    raw: [0 to 50].map (val) ~> {val: (Math.random!)toFixed(2), cat: Math.floor(1 + 6 * Math.random!)}
+    binding:
+      color: {key: \cat}
+      area: {key: \val, unit: 'MB'}
+      name: {key: \cat}
+      category: {key: \cat}
+  config:
+    unit-position: type: \choice, values: <[inner outside none]>
+  dimension:
+    color: {type: \RC, name: "顏色", priority: 4}
+    area: {type: \R, name: "面積", priority: 1}
+    name: {type: \NC, name: "名稱", priority: 2}
+    category: {type: \C, name: "分類", priority: 3}
+  init: ->
+    @tint = tint = new chart.utils.tint!
+    @g = Object.fromEntries <[view unit legend]>.map ~> [it, d3.select(@layout.get-group it)]
+    @text-renderer = text-renderer = document.createElement \div
+    text-renderer.style <<< do
+      textAlign: \right
+      fontSize: \0.9em
+      padding: ".5em .5em"
+      line-height: \1.1em
+      white-space: "pre-line"
+      display: 'inline-block'
+      position: \absolute
+      top: 0
+      left: 0
+      opacity: 0
+      pointer-events: \none
+      user-select: \none
+      zIndex: 0
+    root.appendChild text-renderer
+    @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!
+    @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.data.area) => '-' else "#{(data.data.area).toFixed(2)}#{@binding.area.unit or ''}"
+        return {name: data.data.name, value: v}
+      range: ~> @layout.get-node \view .getBoundingClientRect!
+    }
+
+  destroy: -> @tip.destroy!
+
+  parse: ->
+    @tint.reset!
+    hash = {}
+    @data.map (d,i) ->
+      d.id = "name-#i"
+      if !d.category or d.category == "" => d.category = t("other")
+    if !@binding.category => @data.map (d) -> d.category = 'root-1'
+    @data.map -> hash[it.category] = {id: it.category, category: 'root'}
+    @cats = Array.from(new Set @data.map -> it.category).filter -> it != 'root-1'
+    @data = @data ++ [v for k,v of hash] ++ [{id: 'root'}]
+    @legend.data @cats.map -> {key: it, text: it}
+  bind: ->
+    data = @data.filter ~>
+      it.id == 'root' or (it.category in <[root root-1]>) or @legend.is-selected(it.category)
+    s = d3.stratify!
+      .id -> it.id
+      .parentId -> it.category
+    @ret = s(data)
+  resize: ->
+    @root.querySelector('.pdl-layout').classList.toggle \legend-bottom, @cfg.{}legend.position == \bottom
+    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
+    @unit =
+      inner: if @cfg.{}unit.position == \inner => (@binding.area.unit or '') else ''
+      outer: (
+        if @cfg.{}unit.position in <[inner none]> => ''
+        else if @binding.area.unit => "#{t('unit')}: #{@binding.area.unit or ''}" else ''
+      )
+    @layout.get-node \unit
+      ..style.display = if !@unit.outer => 'none' else ''
+      ..textContent = @unit.outer
+    @legend.config @cfg.legend
+    @legend.update!
+    @layout.update false
+    @ret.sum -> it.area
+    box = @layout.get-box \view
+    tree = d3.treemap!padding(1).size([box.width, box.height]) @ret
+    @nodes = @ret.leaves!filter -> it.data._raw
+    @nodes.map -> it._raw = it.data._raw
+    @extent = d3.extent @nodes.map -> it.value
+  render: ->
+    {cfg, unit, binding, layout, text-renderer, tint} = @
+    tint.set cfg.palette
+    #else tint.set @cats.map (d,i) ~> ldcolor.web(d3.interpolateTurbo(i/((@cats.length - 1) or 1)))
+    @g.unit.call ~>
+      node = layout.get-node \unit
+      ret = wrap-svg-text {node, useRange: true}
+      @g.unit.node!textContent = ''
+      @g.unit.node!appendChild ret
+    @g.view.selectAll \rect.data .data(@nodes, -> it._raw._idx)
+      ..exit!remove!
+      ..enter!append \rect
+        .attr \class, \data
+        .attr \x, -> (it.x1 + it.x0)/2 - (it.x1 - it.x0)/4
+        .attr \y, -> (it.y1 + it.y0)/2 - (it.y1 - it.y0)/4
+        .attr \width, ->  (it.x1 - it.x0) / 2
+        .attr \height, -> (it.y1 - it.y0) / 2
+        .attr \fill, ~> tint.get(it.data.color or it.data.category)
+        .style \opacity, 0
+
+    @g.view.selectAll \rect
+      .transition!duration 350
+      .attr \x, -> it.x0
+      .attr \y, -> it.y0
+      .attr \width, -> it.x1 - it.x0
+      .attr \height, -> it.y1 - it.y0
+      .attr \fill, ~>
+        v = (((it.value - @extent.0) / (@extent.1 - @extent.0) ) - 0.5)
+        tint.get(it.data.color or it.data.category)
+      .style \opacity, 1
+
+    @g.view.selectAll \g.label .data(@nodes, -> it._raw._idx)
+      ..exit!remove!
+      ..enter!append \g
+        .attr \class, 'label data'
+        .attr \transform, (d,i) -> "translate(#{d.x0},#{d.y0})"
+        .attr \opacity, 0
+        .style \pointer-events, \none
+        .style \cursor, \pointer
+    @g.view.selectAll \g.label
+      .attr \font-size, \0.9em
+      .each (d,i) ->
+        text-renderer.style.width = "#{d.x1 - d.x0}px"
+        area = d.data.area
+        area = d3.format('.3s') area
+        #area = if area > 1000000 => (area/1000000).toFixed(2) + t(\M)
+        #else if area > 1000 => (area/1000).toFixed(2) + t(\K)
+        #else if area? and area.toFixed => (area).toFixed(2)
+        #else area
+        text-renderer.innerHTML = """
+        <div>#{d.data.name or ''}</div>
+        <div>#{area}#{unit.inner}</div>
+        """
+        ret = wrap-svg-text node: text-renderer, useRange: true
+        @textContent = ''
+        @appendChild ret
+      .transition!duration 350
+      .attr \transform, (d,i) -> "translate(#{d.x0},#{d.y0})"
+      .attr \fill, ~> tint.text(it.data.color or it.data.category)
+      .attr \opacity, (d,i) ->
+        box = @getBBox!
+        return if box.width > d.x1 - d.x0 or box.height > d.y1 - d.y0 => 0 else 1
+    @legend.render!
+
+return block-factory

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

@@ -0,0 +1,42 @@
+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-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/voronoi-treemap/0.0.1/index.ls

@@ -0,0 +1,174 @@
+<-(->it!) _
+
+block-factory =
+  pkg:
+    name: 'voronoi-treemap', version: '0.0.1'
+    extend: {name: "base", version: "0.0.1"}
+    dependencies: [
+      {name: "@zbryikt/voronoijs", version: "main", path: "voronoi.min.js"}
+    ]
+  init: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context} .then ~> it.0
+
+mod = ({context}) ->
+  {d3,ldcolor,voronoi,chart} = context
+  sample: ->
+    raw: [0 to 100].map (val) ~> {val: Math.random! * 10, cat: Math.floor(1 + 10 * Math.random!), name: val}
+    binding:
+      name: {key: \name}
+      area: {key: \val}
+      category: {key: \cat}
+  config: {}
+  dimension:
+    area: { type: \R, name: "area"},
+    name: { type: \N, desc: "name" },
+    category: { type: \N, desc: "category"},
+
+  init: ->
+    @tint = tint = new chart.utils.tint!
+    @g = Object.fromEntries <[view legend]>.map ~> [it, d3.select(@layout.get-group it)]
+    @layout.get-group(\view).appendChild g = (document.createElementNS "http://www.w3.org/2000/svg", "g")
+    @g.shape = d3.select g
+    @site-boxes = []
+    @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!
+    @tip = new chart.utils.tip do
+      root: @root
+      accessor: ({evt}) ~>
+        if !(evt.target and data = d3.select(evt.target).datum!) => return null
+        if Array.isArray(data) =>
+          if !@_sites => return
+          if !(data.idx?) => return
+          if !(data = @_sites[data.idx]) => return
+        return {name: data.name, value: "#{(data.area).toFixed 2}#{@binding.area.unit or ''}"}
+      range: ~> @layout.get-node \view .getBoundingClientRect!
+
+    @start!
+  parse: ->
+    @data.map -> it <<< {key: it.name, value: it.area}
+    @total = @data.reduce(((a,b) -> a + b.area), 0)
+    @cats = Array.from(new Set(@data.map (d) -> d.category))
+    @legend.data @cats.map -> {key: it, text: it}
+  bind: ->
+    data = @data.filter ~> @legend.is-selected(it.category )
+    @parsed = children: d3.nest!.key(->it.category).entries(data).map -> it <<< {children: it.values}
+    box = @box or @svg.getBoundingClientRect!
+    [w,h] = [box.width, box.height]
+    w = h = Math.min(w,h)
+    @treemap = new voronoi.Treemap(@parsed, voronoi.Polygon.create(w, h, 60), w, h)
+    sites = @treemap.getSites!
+    @g.shape.selectAll \path.data .data @treemap.getPolygons!
+      ..exit!remove!
+      ..enter!append \path .attr \class, \data
+        .each (d,i) -> d.idx = i
+    @g.shape.selectAll \path.data .attr \class, (d,i) -> if sites[i].lv <= 0 => 'data group' else 'data'
+    @polygons = @g.shape.selectAll \path.data
+
+    @g.shape.selectAll \g.label .data sites
+      ..exit!remove!
+      ..enter!append \g .attr \class, \label
+        .each (d,i) ->
+          d3.select @
+            ..append \text .attr \class, 'name' .attr \font-size, '.8em'
+            ..append \text .attr \class, 'value'
+    @sites = @g.shape.selectAll \g.label
+    @sites.each (d,i) ->
+      d3.select @ .selectAll \text .data [d,d]
+        .attr \text-anchor, \middle
+        .attr \dominant-baseline, \center
+  resize: ->
+    box = @layout.get-box \view
+    [w,h] = [box.width, box.height]
+    s = Math.min(w,h)
+    @legend.config @cfg.legend
+    @legend.update!
+    @layout.update false
+    @g.shape.attr \transform, "translate(#{w/2 - s/2},#{h/2 - s/2})"
+    @scale =
+      x: d3.scaleLinear!domain [0,w] .range [0, w]
+      y: d3.scaleLinear!domain [0,h] .range [0, h]
+      color: d3.interpolateTurbo
+    if @cfg? and @cfg.palette =>
+      @scale.color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldcolor.web(it.value or it)
+    @tint.set @cfg.palette
+    sites = @treemap.getSites!
+    @count = 0
+    @gbox = @svg.getBoundingClientRect!
+
+  render: (tick = false)->
+    @_sites = sites = @treemap.getSites!
+    polygons = @treemap.getPolygons!
+    [w,h] = [@box.width, @box.height]
+
+    if !tick =>
+
+      @legend.render!
+      @sites.selectAll \.name
+        .attr \dy, \0.88em
+        .text ->
+          n = ("#{it.name or ''}")
+          return n
+          if it.lv > 0 => n.substring(0,7) + (if n.length > 7 => '...' else '') else ''
+        .attr \fill, (d,i) ~> if ldcolor.hcl(@tint.get d.category).l > 60 => \#000 else \#eee
+        .style \pointer-events, \none
+      @sites.selectAll \.value
+        .attr \dy, \-0.28em
+        .text -> if it.lv > 0 => (it.value or 0).toFixed(2) else ''
+        .attr \fill, (d,i) ~> if ldcolor.hcl(@tint.get d.category).l > 60 => \#000 else \#eee
+        .style \pointer-events, \none
+      @site-boxes = site-boxes = []
+      @sites.each (d,i) -> site-boxes.push @getBoundingClientRect!
+      @polygons
+        .attr \fill, (d,i) ~> @tint.get sites[i].category
+        .attr \stroke, \#fff
+        .attr \stroke-width, 1
+
+    site-boxes = @site-boxes
+    boxes = []
+
+    @polygons.data polygons
+      .attr \d, (d,i) ->
+        d.idx = i
+        if !(d and d.length) =>
+          boxes.push {}
+          return ""
+        ret = [[\M, d.0.x, d.0.y]]
+        [min,max] = [{x: d.0.x, y: d.0.y}, {d.0.x, d.0.y}]
+        for idx from 0 til d.length =>
+          [x,y] = [d[idx].x, d[idx].y]
+          if min.x > x => min.x = x
+          if max.x < x => max.x = x
+          if min.y > y => min.y = y
+          if max.y < y => max.y = y
+          ret.push [\L, x, y]
+        ret.push [\L, d.0.x, d.0.y]
+        boxes.push {x: min.x, y: min.y, width: max.x - min.x, height: max.y - min.y}
+        return ret.map(->it.join(' ')).join(' ')
+
+    @sites
+      .each (d,i) ->
+        box = boxes[i]
+        mybox = site-boxes[i]
+        if !mybox => mybox = @getBoundingClientRect!
+        d3.select @
+          .attr \transform, ->
+            x = box.x + box.width / 2
+            y = box.y + box.height / 2
+            if isNaN(x) => x = -10000
+            if isNaN(y) => y = -10000
+            return "translate(#x, #y)"
+          .attr \opacity, -> (1 - 6 * ((mybox.width / (box.width >? 0) - 1) >? 0)) >? 0
+
+
+  tick: ->
+    @count = (@count or 0) + 1
+    if @count < 100 =>
+      @treemap.compute!
+      @render true
+
+return block-factory

package/web/src/pug/block/voronoi-treemap/0.0.1/index.pug

@@ -0,0 +1,17 @@
+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: grid
+      grid-template-columns: 1fr fit-content(10em)
+      & > .pdl-cell[data-name=view]
+        grid-column: 1
+      & > .pdl-cell[data-name=legend]
+        grid-column: 2
+        padding: 0 .5em 0 .5em
+  script(type="@plotdb/block"): include:lsc index.ls