@plotdb/chart 0.0.2 → 1.0.3

package/src/utils/legend.ls

@@ -1,134 +0,0 @@
-svgns = "http://www.w3.org/2000/svg"
-
-legend = (opt = {}) ->
-  @_data = opt.data or []
-  @name = opt.name or \legend
-  @cfg = opt.cfg or {}
-  @root = if typeof(opt.root) == \string => document.querySelector(opt.root) else opt.root
-  @dir = opt.direction or 'vertical'
-  @evt-handler = {}
-  @_picked = Object.fromEntries @_data.map -> [it.key, true]
-  @layout = opt.layout or new layout root: @root
-  @layout
-    ..on \update, ~> @update!
-    ..on \render, ~> @render!
-  @id = Math.random!toString(36)substring(2)
-  node-layout = @layout.get-node @name
-  node-render = @layout.get-group @name
-  if !node-layout.querySelector('[ld-each=legend]') =>
-    node-layout.innerHTML = """
-    <div class="pdlg #{@dir}">
-      <div ld-each="legend">
-        <div class="pdl-cell" ld="shape" data-only></div>
-        <div class="pdl-cell" ld="text" data-only></div>
-      </div>
-    </div>
-    """
-  if !node-render.querySelector('[ld-each=legend]') =>
-    gl = document.createElementNS(svgns, "g")
-    gs = document.createElementNS(svgns, "g")
-    gt = document.createElementNS(svgns, "g")
-    gl.classList.add \pdlg-g
-    gl.setAttribute \ld-each, \legend
-    gs.setAttribute \ld, \shape
-    gt.setAttribute \ld, \text
-    gl.appendChild gs
-    gl.appendChild gt
-    node-render.appendChild gl
-
-  @_func = [
-    {key: "all", type: "func", text: "全選"}
-    {key: "none", type: "func", text: "全不選"}
-  ]
-
-  @view =
-    layout: new ldview do
-      root: @layout.get-node @name
-      init-render: false
-      handler:
-        legend:
-          list: ~> @_data ++ (if @cfg.selectable => @_func else [])
-          key: -> it.key
-          view:
-            handler:
-              shape: ({node, ctx}) ~>
-                node.setAttribute \data-name, @_name ctx, "shape"
-              text: ({node, ctx}) ~>
-                node.setAttribute \data-name, @_name ctx, "text"
-                node.innerText = ctx.text
-
-
-    render: new ldview do
-      root: @layout.get-group @name
-      init-render: false
-      handler:
-        legend:
-          list: ~> @_data ++ (if @cfg.selectable => @_func else [])
-          key: -> it.key
-          view:
-            action: click: "@": ({node, ctx}) ~>
-              if !@cfg.selectable => return
-              if ctx.type == \func =>
-                for k of @_picked => @_picked[k] = if ctx.key == \all => true else false
-              else @_picked[ctx.key] = !@_picked[ctx.key]
-              @view.render.render \legend
-              @fire \select, @_picked
-            handler:
-              "@": ({node, ctx}) ~>
-                node.style.opacity = if !@cfg.selectable or ctx.type == \func or (@_picked[ctx.key]) => 1 else 0.3
-              "shape": ({node, ctx}) ~>
-                if ctx.type == \func =>
-                  node.style.display = \none
-                  return
-                if !node.querySelector \circle => node.appendChild document.createElementNS(svgns, \circle)
-                n = node.querySelector \circle
-                box = @layout.get-box @_name(ctx, \shape)
-                rbox = @layout.get-box @name
-                n.setAttribute \cx, ".5em"
-                n.setAttribute \cy, ".5em"
-                n.setAttribute \r, ".5em"
-                n.setAttribute \transform, "translate(#{box.x - rbox.x}, #{box.y - rbox.y})"
-                if typeof(opt.shape) == \function => opt.shape.call n, ctx
-
-              "text": ({node,ctx}) ~>
-                n = @layout.get-node(@_name ctx, \text)
-                nbox = @layout.get-box(@_name ctx, \text)
-                rbox = @layout.get-box(@name)
-                node.setAttribute \transform, "translate(#{nbox.x - rbox.x}, #{nbox.y - rbox.y})"
-                node.textContent = ""
-                ret = wrap-svg-text node: n, use-range: true
-                node.appendChild ret
-  @update!
-  @
-
-legend.prototype = Object.create(Object.prototype) <<< do
-  _name: (ctx,type="s") -> "pdlg-#{type}-#{@id}-#{ctx.type or ''}-#{ctx.key}"
-  enabled: -> @_data and @_data.length and (!(@cfg.enabled?) or @cfg.enabled)
-  update: ->
-    val = if @enabled! => '' else '0px'
-    @layout.get-node \legend .style <<< {width: val, height: val, padding: val, margin: val}
-    @view.layout.render!
-  render: ->
-    enabled = @enabled!
-    g = @layout.get-group(@name)
-    g.style.display = if enabled => '' else 'none'
-    if enabled => @view.render.render!
-  config: (cfg) ->
-    if !(cfg?) => return @cfg
-    @cfg = cfg
-    @dir = if @cfg.position == \bottom => \horizontal else \vertical
-    node = @layout.get-node(@name).querySelector \.pdlg
-    <[horizontal vertical]>.map ~> node.classList.toggle it, @dir == it
-  data: (data = []) ->
-    hash = {}
-    data.map (d,i) -> hash[d.key] = i
-    @_data = data.filter (d,i) -> hash[d.key] == i
-    @_picked = Object.fromEntries @_data.map (d) -> [d.key, true]
-    @update!
-    @layout.update false
-    @view.render.render!
-  on: (n, cb) -> (if Array.isArray(n) => n else [n]).map (n) ~> @evt-handler.[][n].push cb
-  fire: (n, ...v) -> for cb in (@evt-handler[n] or []) => cb.apply @, v
-  is-selected: (key) -> return !!@_picked[key]
-
-if chart? => chart.{}utils.legend = legend

package/src/utils/legend.styl

@@ -1,37 +0,0 @@
-.pdlg
-  height: 100%
-  width: 100%
-  display: flex
-  align-items: start
-  justify-content: center
-
-.pdlg > div
-  display: flex
-  align-items: center
-  line-height: 1em
-  [ld=shape]
-    display: inline-block
-    width: 1em
-    height: 1em
-    margin-right: .5em
-    background: #999
-    flex: 0 0 auto
-    line-height: 1em
-  [ld=text]
-    color: #999
-    padding-right: .25em
-    line-height: 1.2em
-
-.pdlg.vertical
-  flex-direction: column
-  align-items: start
-  & > div
-    margin-bottom: .5em
-
-.pdlg.horizontal
-  & > div
-    margin-right: .5em
-
-g.pdlg-g
-  cursor: pointer
-  transition: opacity .15s ease-in-out

package/src/utils/tint.ls

@@ -1,66 +0,0 @@
-tint = (opt = {}) ->
-  @is-unique = if opt.unique? => opt.unique else true
-  @map = {}  # calculated name to index map
-  @nmap = [] # predefined name to index map
-  @wm = new WeakMap!
-  @count = 0
-  @set opt.palette or opt.colors
-  @
-
-tint.default = <[#e15c64 #f7b26a #f3ed9d #a4bd81 #a0d7d2 #8db1da #daaedb]>
-
-tint.prototype = Object.create(Object.prototype) <<< do
-  set: (pal = [], reset = false) ->
-    @colors = if Array.isArray(pal) and pal.length => pal
-    else if pal.colors and Array.isArray(pal.colors) => pal.colors
-    else tint.default
-    @nmap = pal.maps or []
-    @colors = @colors.map -> it.value or it
-    if @colors.length == 1 => @colors.push ldcolor.complement(@colors.0)
-    @colors = @colors.map -> ldcolor.hsl(it)
-    @len = @colors.length >? 2
-    if reset => @reset!
-    else @nmap.map (d,i) ~> (if Array.isArray(d) => d else [d]).map ~> @get it, 0, i
-
-  unique: -> return if it? => @is-unique = !!it else @is-unique
-  reset: ->
-    @map = {}
-    @wm = new WeakMap!
-    @count = 0
-    (@nmap or []).map (d,i) ~> (if Array.isArray(d) => d else [d]).map ~> @get it, 0, i
-  get: (data, variant = 0, idx) ->
-    if idx? =>
-      if @count < idx => @count = idx + 1
-      val = idx % @len
-      if typeof(data) == \object => @wm.set data, val
-      else @map[data] = val
-    else
-      if typeof(data) == \object =>
-        if !(val = @wm.get data)? => @wm.set data, (val = @count++)
-      else if !(val = @map[data])? => @map[data] = (val = @count++)
-      if !@is-unique => val = val % @len
-    if val >= @len =>
-      seg = val % ( @len - 1 )
-      pos = Math.floor(val / (@len - 1))
-      [fz,fm] = [0,1]
-      while pos > 0
-        [fz,fm] = [fz * 2, fm * 2]
-        if pos % 2 => fz += 1
-        pos = pos .>>. 1
-      pos = fz/fm
-      [c1,c2] = [@colors[seg], @colors[seg + 1]]
-      [h,s,l] = <[h s l]>.map (k) ->
-        pos * (c2[k] - c1[k]) + c1[k]
-      ret = {h,s,l}
-    else ret = @colors[val]
-    if variant > 0 => ret = ldcolor.lighter(ret, variant)
-    else if variant < 0 => ret = ldcolor.darker(ret, -variant)
-    return ldcolor.web(ret)
-
-  text: (v, opt = {}) ->
-    hcl = ldcolor.hcl(@get v)
-    return ldcolor.web(if hcl.l > 50 => (opt.text-dark or \#000) else (opt.text-light or \#fff))
-
-
-
-if chart? => chart.{}utils.tint = tint

package/src/utils/tip.ls

@@ -1,97 +0,0 @@
-tip = (opt = {}) ->
-  @root = if typeof(opt.root) == \string => document.querySelector(opt.root) else opt.root
-  @tip = if typeof(opt.node) == \string => @root.querySelector(opt.node) else opt.node
-  @margin = if opt.margin? => opt.margin else 10
-  @type = if opt.type == \over => \over else \move
-  @accessor = opt.accessor
-  @range = opt.range
-  @zmgr = opt.zmgr
-  @_z = 0
-  @enabled = true
-  if !@tip =>
-    @tip = document.createElement \div
-    @tip.innerHTML = """
-    <div ld="name" style="font-size:.85em"></div>
-    <div ld="value" style="font-weight:bold;font-size:1.1em;line-height:1.2em"></div>
-    """
-    @root.appendChild @tip
-    @tip.style <<<
-      padding: '.4em .5em'
-      background: \#13171a
-      color: \#fff
-      borderRadius: \3px
-      boxShadow: '0 2px 4px rgba(0,0,0,.3)'
-      lineHeight: \1.2em
-      fontSize: \.9em
-      maxWidth: "10em"
-      wordBreak: "break-all"
-
-  @tip.style <<<
-    position: \absolute
-    z-index: 1
-    top: 0
-    left: 0
-    pointerEvents: \none
-    userSelect: \none
-    opacity: 0
-    transition: 'opacity .15s ease-in-out' + (if @type == \over => ', transform .15s ease-in-out' else '')
-
-  @view = new ldview do
-    root: @tip
-    text: opt.view or {
-      name: ({ctx}) -> if ctx => ctx.name else ''
-      value: ({ctx}) -> if ctx => ctx.value else ''
-    }
-  @hide = debounce 3000, ->
-    @tip.style <<< opacity: 0
-    if @zmgr => @zmgr.remove @_z
-  @_evthdr = {}
-  if @accessor =>
-    @root.addEventListener (if @type == \over => \mouseover else \mousemove), @_evthdr.over = (e) ~>
-      if !(e.target and data = @accessor {evt: e}) => return
-      @render {data, node: e.target, evt: e}
-    @root.addEventListener \mouseout, @_evthdr.out = ~> @hide!now!
-
-  @
-
-tip.prototype = Object.create(Object.prototype) <<<
-  destroy: ->
-    if @_evthdr.over => @root.removeEventListener (if @type == \over => \mouseover else \mousemove), @_evthdr.over
-    if @_evthdr.out => @root.removeEventListener \mouseout, @_evthdr.out
-  toggle: -> return if !(it?) => @enabled else @enabled = it
-  render: (opt = {}) ->
-    if !@enabled => return
-    @view.set-ctx opt.data
-    @view.render!
-    rbox = @root.getBoundingClientRect!
-    nbox = if opt.node? =>
-      ret = opt.node.getBoundingClientRect!
-      ret <<< {x: ret.x - rbox.x, y: ret.y - rbox.y}
-    else if opt.box? => opt.box
-    else {x: opt.x, y: opt.y, width: opt.width, height: opt.height}
-    tbox = @tip.getBoundingClientRect!
-    [mx, my] = [opt.evt.clientX - rbox.x, opt.evt.clientY - rbox.y] # point relative to root origin
-    m = @margin # margin
-    [nx, ny] = [ # centroid of target element
-      nbox.x + (if nbox.width? => nbox.width/2 else 0)
-      nbox.y + (if nbox.height? => nbox.height/2 else 0)
-    ]
-    # expected tip offset: by default, centered at mouse position
-    [tx, ty] = [mx - tbox.width/2, my - tbox.height/2]
-    [tx, ty] = [ # then, offset to direction against centroid
-      tx + (if nx < mx => 1 else -1 ) * (m + tbox.width / 2),
-      ty + (if ny < my => 1 else -1 ) * (m + tbox.height / 2)
-    ]
-    range-box = if @range => range-box = @range! else rbox
-
-    [tx, ty] = [ # last, bound in @root
-      (((tx >? range-box.x - rbox.x) + tbox.width) <? range-box.width + range-box.x - rbox.x) - tbox.width,
-      (((ty >? range-box.y - rbox.y) + tbox.height) <? range-box.height + range-box.y - rbox.y) - tbox.height
-    ]
-    @tip.style <<<
-      transform: "translate(#{tx}px,#{ty}px)"
-      opacity: 1
-      z-index: @_z = (if !@zmgr => 10 else @zmgr.add 10)
-    @hide!
-
-if chart? => chart.{}utils.tip = tip

package/web/src/pug/base.pug

@@ -1,19 +0,0 @@
-//- view
-doctype html
-html
-  include @/@loadingio/bootstrap.ext/dist/index.pug
-  include @/ldview/dist/index.pug
-  block vars
-  head
-    block prehead
-    +css("/assets/lib/bootstrap/main/css/bootstrap.min.css")
-    +css("/assets/lib/bootstrap.ldui/main/bootstrap.ldui.min.css")
-    +css("/assets/lib/@loadingio/loading.css/main/loading.min.css")
-    +css("/css/index.css")
-    block head
-  body
-    block body
-    +script("https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver")
-    +script("/assets/lib/@loadingio/ldquery/main/ldq.min.js")
-    +script("/assets/lib/ldview/main/index.min.js")
-    block script

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

@@ -1,38 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'axis', 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,forceBoundary,ldcolor,repeatString$,infinite} = context
-  sample: ->
-    raw: [0 to 7].map (val) ~> {val: val, name: val}
-    binding:
-      name: {key: \name}
-      value: {key: \val}
-  config: {}
-  dimension:
-    value: {type: \R, name: "value"}
-    name: {type: \N, name: "name"}
-  init: ->
-    @ab = d3.axisBottom!
-    @scale = x: d3.scaleLinear!
-    @g = d3.select @svg .append \g
-
-  parse: ->
-
-  resize: ->
-    @scale.x.domain [0, 20] .range [20, @box.width - 20]
-    @ab.scale @scale.x .tickValues [0 to 20]
-
-  render: ->
-    @g.call @ab
-
-
-
-return block-factory

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

@@ -1 +0,0 @@
-div: script(type="@plotdb/block"): include:lsc index.ls

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

@@ -1,141 +0,0 @@
-<- (->it!) _
-
-block-factory = 
-  pkg:
-    name: 'axis-bubble', 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, forceBoundary, ldcolor, repeatString$} = context
-  sample: ->
-    raw: [0 to 200].map (val) ~> 
-      {val: Math.random! * 50 + 10, x: Math.random!, cat: Math.ceil(5 * Math.random!)}
-    binding: do
-      color: {key: \cat}
-      radius: {key: \val}
-      xpos: {key: \x}
-  config: {}
-  dimension:
-    color: {type: \R, name: "顏色"}
-    radius: {type: \R, name: "半徑"}
-    xpos: {type: \R, name: "X座標"}
-  init: ->
-    @svg.addEventListener \click, ~>
-      @type = !@type
-      @resize!
-      @render!
-      @sim.stop!
-      @sim.alpha 0.9
-    @svg.appendChild t = document.createElementNS('http://www.w3.org/2000/svg', 'text')
-    @text = d3.select(t)
-    @text
-      .attr \x, 20
-      .attr \y, 20
-  parse: ->
-    @xextent = d3.extent(@data.map -> it.xpos)
-    @rextent = d3.extent @data.map -> it.radius
-    @cextent = d3.extent @data.map -> it.color
-  resize: ->
-    rng = d3.randomUniform.source(d3.randomLcg(root.seed))(0, 1)
-    @scale-x = d3.scaleLinear!domain @xextent .range [0, @box.width]
-    if @type =>
-      @scale-y = d3.scaleLinear!domain @cextent .range [0, @box.height]
-    else
-      @scale-y = ~> @box.height / 2
-    @data.map (v) ~>
-      v <<< {
-        x: v.x or @scale-x(v.xpos)
-        y: v.y or @box.height / 2
-        ty: @scale-y(v.color)
-        val: v.radius
-        r: v.radius
-        c: v.color
-      }
-    @area = @box.width * @box.height 
-    @rate = 0.5
-  render: ->
-    rate = @rate
-    @scale = do
-      color: d3.interpolateTurbo
-      r: d3.scaleLinear!domain(@rextent).range([0,1])
-      c: d3.scaleLinear!domain(@cextent).range([0,1])
-    pal = if @cfg.palette => @cfg.palette.colors.map -> ldcolor.web(it.value or it) else <[#f00 #0f0 #00f #f90 #9f0 #0f9]>
-    int-color = d3.interpolateDiscrete pal
-    @scale.color = ~> int-color(@scale.c it)
-
-    d3.select @svg .selectAll \circle.bubble .data @data
-      ..exit!remove!
-      ..enter!append \circle
-        .attr \class, \bubble
-        .attr \r, (d,i) ~> 0
-        .attr \fill, (d,i) ~> @scale.color d.c
-
-    d3.select @svg .selectAll \circle.bubble
-      .attr \cx, (d,i) -> d.x
-      .attr \cy, (d,i) -> d.y
-      .attr \fill, (d,i) ~> @scale.color d.c #@scale.r(d.c)
-      .attr \r, (d,i) ~> (d.r >? 2) * @rate
-
-    d3.select @svg .selectAll \g.label .data @data
-      ..exit!remove!
-      ..enter!append \g
-        .attr \class, \label
-        .each (d,i) ->
-          [0] #[0,1]
-            .map ~> d3.select(@).append \text
-            .map ->
-              it
-                .attr \dy, \-.28em
-                .attr \text-anchor, \middle
-                .attr \font-size, \.7em
-                .attr \font-family, \Rubik
-                .style \pointer-event, \none
-    d3.select @svg .selectAll \g.label
-      .attr \transform, (d,i) -> "translate(#{d.x},#{d.y})"
-      .each (d,i) ->
-        d3.select(@).selectAll \text
-          .attr \opacity, (if ( d.r * 2 * rate ) < "#{(d.val).toFixed(2)}".length * 7 => 0 else 1)
-          .attr \dy, (e,i) -> \.38em #if i == 0 => '-.28em' else '.88em'
-          .text (e,i) ->
-            if i == 0 =>
-              if d.val > 1000000 => (d.val/1000000).toFixed(2) + "M"
-              else if d.val > 1000 => (d.val/1000).toFixed(2) + "K"
-              else (d.val).toFixed(2)
-            else return d._idx
-
-  tick: ->
-    if !@sim =>
-      kickoff = true
-      @fc = fc = d3.forceCollide!
-      @sim = d3.forceSimulation!
-        .force \center, @fg = d3.forceCenter @box.width/2, @box.height/2
-        .force \x, @fx = d3.forceX(@box.width / 2).strength(0.15)
-        .force \y, @fy = d3.forceY((@box.height) / 2).strength(0.1)
-        .force \b, @fb = forceBoundary((->it.r), (->it.r), (~>@box.width - it.r), (~>@box.height - it.r))
-        .force \collide, fc
-      @sim.stop!
-      @sim.alpha 0.9
-      @sim.nodes(@data)
-    @fc.strength 1.0
-    @fc.radius ~> @rate * it.r + 2
-    @fg.x @box.width/2
-    @fg.y @box.height/2
-    @fx.strength 0.15
-    @fy.strength 0.01
-    @sim.tick if kickoff => 20 else 1
-    alpha = @sim.alpha!
-    @text.text alpha
-    if alpha < 0.001 => @stop!
-    @data.map -> it.y = it.y + (it.ty - it.y) * alpha * 0.1
-
-    d3.select @svg .selectAll \circle.bubble
-      .attr \cx, (d,i) -> d.x
-      .attr \cy, (d,i) -> d.y
-    d3.select @svg .selectAll \g.label
-      .attr \transform, (d,i) -> "translate(#{d.x},#{d.y})"
-    @render!
-
-return block-factory

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

@@ -1 +0,0 @@
-div: script(type="@plotdb/block"): include:lsc index.ls