@plotdb/chart 0.0.3 → 2.0.0

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

@@ -1,3 +0,0 @@
-div(style="height:100%")
-  plug(name="layout")
-  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -1,74 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'taiwancounty', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: [
-      {url: "https://d3js.org/topojson.v2.min.js", async: false}
-      {url: "https://d3js.org/d3-geo.v2.min.js", async: false}
-      {name: "pdmaptw", version: "local", path: "index.min.js", async: false}
-      {name: "pdmaptw", version: "local", path: "county.map.js"}
-    ]
-  init: ({root, context, pubsub}) ->
-    pubsub.fire \init, mod: mod {context} .then ~> it.0
-
-mod = ({context}) ->
-  {chart, d3, ldcolor, pdmaptw, topojson} = context
-  sample: ->
-    pdmaptw.get('county').then ({meta, topo}) ->
-      raw: meta.name.map -> {val: Math.random!, name: pdmaptw.normalize it}
-      binding: color: {key: \val}, name: {key: \name}
-  config:
-    palette: type: \palette
-  dimension:
-    name: {type: \N, name: "國家"}
-    color: {type: \R, name: "顏色"}
-  init: ->
-    @g = @layout.get-group \view
-    @obj = new pdmaptw {root: @g, type: \county}
-    @scale = scale = {color: d3.interpolateTurbo}
-    @legend = new chart.utils.legend do
-      root: @root
-      name: \legend
-      layout: @layout
-      shape: (d) -> d3.select(@).attr \fill, scale.color d.key
-    @tip = new chart.utils.tip {
-      root: @root,
-      accessor: ({evt}) ~>
-        if !(evt.target and data = d3.select(evt.target).datum!) => return null
-        return {name: data.data.name, value: data.data.color}
-      range: ~> return @layout.get-node \view .getBoundingClientRect!
-    }
-    @obj.init!then ~> @obj.fit {node: @g, box: @layout.get-node(\view).getBoundingClientRect!}
-
-  parse: ->
-    @extent = c: [undefined, undefined]
-    d3.select @svg .selectAll \path .each (d,i) ~>
-      d.data = @data.filter(-> it.name == d.properties.name).0 or {}
-      if !(@extent.c.0?) or d.data.color < @extent.c.0 => @extent.c.0 = d.data.color
-      if !(@extent.c.1?) or d.data.color > @extent.c.1 => @extent.c.1 = d.data.color
-
-  resize: ->
-    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
-    @obj.fit @layout.get-box \view
-    pal = if @cfg.palette => @cfg.palette.colors else <[#f00 #999 #00f]>
-    len = pal.length
-    @ticks = d3.quantize((~> (1 - it) * (@extent.c.1 - @extent.c.0) + @extent.c.0), len).map ~>
-      {key: it, text: d3.format(@cfg.legend-format or '.2f')(it) + (if @binding.color.unit => that else '')}
-    @ticks.sort (a,b) -> a.key - b.key
-    if @cfg.palette =>
-      @scale.color = d3.scaleLinear!
-        .domain @ticks.map(-> it.key)
-        .range pal.map -> ldcolor.web(it.value or it)
-    @legend.data @ticks
-    @obj.fit {node: @g, box: @layout.get-box(\view)}
-
-  render: ->
-    d3.select @svg .selectAll \path
-      .transition!duration 350
-      .attr \fill, (d,i) ~> @scale.color d.data.color
-      .attr \fill-opacity, (d,i) ~> if @cfg.dim-empty => (if d.data.color? => 1 else 0.2) else 1
-    @legend.render!
-
-return block-factory

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

@@ -1,64 +0,0 @@
-div
-  div(plug="layout")
-    .pdl-layout
-      div(data-type="layout")
-        .pdl-cell(data-name="view")
-        .pdl-cell(data-name="legend") 123
-      div(data-type="render")
-  style(type="text/css"): :stylus
-    .pdl-layout > div[data-type=layout]
-      display: grid
-      grid-template-columns: 1fr fit-content(5em)
-  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/taiwantown/0.0.1/index.ls

@@ -1,48 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'taiwantown', 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} = context
-  sample: ->
-    val =
-      counties: counties.map (d,i) -> {val: Math.random!, county: d}
-      towns: towns.map (d,i) -> {val: Math.random!, town: d}
-    raw: val.towns
-    binding: do
-      color: {key: \val}
-      name: {key: \town}
-  config: {}
-  dimension:
-    name: {type: \N, name: "國家"}
-    color: {type: \R, name: "顏色"}
-  init: ->
-    @obj = 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 @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/taiwantown/0.0.1/index.pug

@@ -1,52 +0,0 @@
-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/taiwanvillage/0.0.1/index.ls

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

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

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

@@ -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-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