@plotdb/chart 0.0.2 → 1.0.3

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

@@ -1,265 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'line', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: []
-    i18n:
-      "zh-TW":
-        "y axis": "Y軸"
-        "x axis": "X軸"
-        "rank": "順位"
-
-  init: ({root, context, pubsub, t}) ->
-    pubsub.fire \init, mod: mod {context, t}
-
-mod = ({context, t}) ->
-  {d3,chart,axis,format} = context
-  sample-count = 4
-  sample: ->
-    raw: [0 to 100].map (val) ~>
-      ret = {}
-      [1 to sample-count].map (i) -> ret["val#i"] = Math.random! * (10 - Math.abs(10 - val)) + val
-      ret.order = val
-      ret
-    binding:
-      value: [1 to sample-count].map -> {key: "val#it"}
-      order: {key: \order}
-  config: {}
-  dimension:
-    value: {type: \R, name: "y axis", multiple: true}
-    order: {type: \ON, name: "x axis"}
-  init: ->
-    svg = d3.select @svg
-    <[view yaxis xaxis legend]>.map ~> @{}g[it] = d3.select(@layout.get-group(it))
-    @tint = tint = new chart.utils.tint!
-    @line = d3.line!
-      .defined ~>
-        !isNaN(it.y1)
-      .x ~> @scale.x it.x
-      .y ~> @scale.y it.y1
-      #.curve d3.curveCatmullRom
-    @area = d3.area!
-      .defined ~>
-        !isNaN(it.y1) and !isNaN(it.y0)
-      .x ~> @scale.x it.x
-      .y0 ~> @scale.y it.y0
-      .y1 ~> @scale.y it.y1
-    @xaxis = new chart.utils.axis layout: @layout, name: \xaxis, direction: \bottom
-    @yaxis = new chart.utils.axis layout: @layout, name: \yaxis, direction: \left
-    @tip = new chart.utils.tip {
-      root: @root,
-      range: ~> return @layout.get-node \view .getBoundingClientRect!
-    }
-    @_evthdr = {}
-    @root.addEventListener \mouseout, @_evthdr.out = (evt) ~> @tip.hide!now!
-    @root.addEventListener \mousemove, @_evthdr.move = (evt) ~>
-      x = evt.clientX - @layout.get-node(\view).getBoundingClientRect!x
-      y = evt.clientY - @layout.get-node(\view).getBoundingClientRect!y
-      min = {d: -1, p: null, series: null}
-      for i from 0 til @parsed.length =>
-        series = @parsed[i]
-        for j from 0 til series.pts.length =>
-          p = series.pts[j]
-          if isNaN(p.y1) or isNaN(p.x) => continue
-          dx = Math.abs(@scale.x(p.x) - x)
-          dy = Math.abs(@scale.y(p.y1) - y)
-          d = (dx ** 2) + (dy ** 2)
-          if min.d < 0 or min.d > d => min <<< {d, p, series}
-      if !(min.p and min.d and min.series) => return
-      bind = min.series.bind
-      pt = min.p
-
-      data = {
-        name: """#{if bind => bind.name or bind.key or ''} /
-        #{pt.data.orderText or pt.data.order or pt.x}#{@binding.order.unit or ''}
-        """
-        value: if isNaN(pt.v) => '-' else "#{(pt.v).toFixed(2)}#{if bind => (bind.unit or '') else ''}"
-      }
-      box = x: @scale.x(pt.x), y: @scale.y(pt.y)
-      @tip.render {data, evt: evt, box}
-
-    @legend = new chart.utils.legend do
-      layout: @layout
-      root: @root
-      name: \legend
-      shape: (d) -> d3.select(@).attr \fill, tint.get d.text
-      direction: \vertical
-      cfg: selectable: true
-    @legend.on \select, ~> @bind!; @resize!; @render!
-    @scale = { x: d3.scaleLinear!, y: d3.scaleLinear! }
-
-  destroy: ->
-    @root.removeEventListener \mouseout, @_evthdr.out
-    @root.removeEventListener \mousemove, @_evthdr.move
-    @tip.destroy!
-
-  parse: ->
-    @data.map (d,i) ->
-      d.order-text = '' + (if !(d.order?) => i else d.order)
-      d._order = if !(d.order?) or isNaN(+d.order) => i else +d.order
-    @data.sort (a,b) -> if a._order > b._order => 1 else if a._order == b._order => 0 else -1
-    @legend.data @binding.value.map -> {key: it.key, text: it.key}
-
-  bind: ->
-    binds = @binding.value
-    binds = @binding.value.map((b,i) -> {b, i}).filter (d,i) ~> @legend.is-selected d.b.key
-
-    # if bump
-    if @cfg.bump =>
-      @parsed = []
-      dd = @data.map (d) ~>
-        ret = {} <<< d
-        v = ret.value.map (d,i) ~> {i: i, v: if @legend.is-selected(@binding.value[i].key) => d else NaN}
-        v.sort (a,b) ->
-          if isNaN(a.v) and isNaN(b.v) => return 0
-          else if isNaN(b.v) => return -1
-          else if isNaN(a.v) => return 1
-          return b.v - a.v
-        v.map (d,i) -> d.r = i + 1
-        v.sort (a,b) -> a.i - b.i
-        ret.value = v.map -> if isNaN(it.v) => NaN else it.r
-        ret.original-value = v.map -> it.v
-        ret
-
-    @parsed = binds.map (b,i) ~>
-      pts: (dd or @data).map (d,j) ->
-        {data: d, y0: 0, y1: d.value[b.i], x: d._order, v: if d.original-value => d.original-value[i] else d.value[i]}
-      bind: b.b
-      color: b.b.name or b.b.key
-
-    # if stacked
-    if @cfg.stack =>
-      ys = @data.map -> it.value.reduce(((a,b)-> a + b),0)
-      @parsed = []
-      for i from 0 til binds.length =>
-        b = binds[i].b
-        last = @parsed[i - 1] or null
-        @parsed.push do
-          pts: @data.map (d,j) ->
-            y1: (d.value[i] + if !last => 0 else last.pts[j].y1)
-            y0: if !last => 0 else last.pts[j].y1
-            x: d._order
-            v: if d.original-value => d.original-value[i] else d.value[i]
-          bind: b
-          color: b.name or b.key
-
-  resize: ->
-    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
-    [miny,maxy] = [0,0]
-    for i from 0 til @parsed.length =>
-      for j from 0 til @parsed[i].pts.length =>
-        p = @parsed[i].pts[j]
-        if !isNaN(p.y0) and miny > p.y0 => miny = p.y0
-        if !isNaN(p.y1) and miny > p.y1 => miny = p.y1
-        if !isNaN(p.y0) and maxy < p.y0 => maxy = p.y0
-        if !isNaN(p.y1) and maxy < p.y1 => maxy = p.y1
-
-    @extent =
-      x: d3.extent @data, -> (it._order)
-      y: [(if @cfg.bump => miny >? 1 else miny), if maxy == miny => miny + 1 else maxy]
-
-    @scale.x.domain @extent.x
-    @scale.y.domain (if @cfg.bump => [@extent.y.1, @extent.y.0] else @extent.y)
-
-    [w,h] = [@box.width, @box.height]
-    max-tick = Math.ceil(@layout.get-box \yaxis .height / 40) >? 2
-    yticks = if @cfg.bump => [1 to ((@parsed.length or 1) >? 1)]
-    else @scale.y.ticks((@cfg.{}yaxis.tick-count or 4) <? max-tick)
-    yfmt = chart.utils.format.auto yticks
-
-    @legend.config @cfg.legend
-    @legend.update!
-
-    @yaxis.config @cfg.yaxis
-    @yaxis.ticks yticks
-    @yaxis.scale @scale.y
-    if @cfg.bump =>
-      @yaxis.caption t \rank
-    else
-      if @parsed.length > 1 =>
-        units = Array.from(new Set(@parsed.map -> it.bind.unit)).filter -> it
-        if units.length > 1 => @yaxis.caption('')
-        else @yaxis.caption( units.0 or '')
-      else
-        v = (@parsed.0 or {}).bind or {}
-        @yaxis.caption( (v.name or v.key or '') + if v.unit => "(#{v.unit})" else '')
-
-    @xaxis.config @cfg.xaxis
-    @xaxis.ticks @data.map -> {v: it._order, t: it.order-text}
-    @xaxis.scale @scale.x
-    @xaxis.caption(
-      (@binding.order.name or @binding.order.key) +
-      if @binding.order.unit => "(#{@binding.order.unit})" else ''
-    )
-
-    # xaxis and yaxis affect each other and they all affect view.
-    # we may need to update them until stable but for now we simply layout twice.
-    for i from 0 til 2 =>
-      @layout.update false
-      box = @layout.get-box('view')
-      [w,h] = [box.width, box.height]
-      @tint.set @cfg.palette
-      r = @cfg.dot-size or 3
-      @scale.x.range [0, w - r]
-      @scale.y.range [h, r]
-      @xaxis.render!
-      @yaxis.render!
-
-  render: ->
-    {scale,tint,extent} = @
-    r = @cfg.dot-size or 3
-    vbox = @layout.get-box \view
-    lbox = @layout.get-box \yaxis
-    @g.view.selectAll \path.data .data(@parsed, -> it.bind.key)
-      ..exit!remove!
-      ..enter!append \path .attr \class, \data
-        .attr \fill, \none
-        .attr \d, (d,i) ~>
-          if @cfg.stack or @cfg.area => @area d.pts
-          else @line d.pts
-        .attr \stroke, (d,i) ~> @tint.get d.color
-        .attr \stroke-width, 1
-    @g.view.selectAll \path.data
-      .transition!duration 150
-      .style \opacity, (d,i) ~> if @legend.is-selected(d.bind.key) => 1 else 0.3
-      .attr \d, (d,i) ~>
-        if @cfg.stack or @cfg.area => @area d.pts
-        else @line d.pts
-      .attr \stroke, (d,i) ~> @tint.get d.color
-      .attr \fill, (d,i) ~> if @cfg.stack or @cfg.area => @tint.get(d.color) else \none
-      .attr \fill-opacity, ~> \0.5
-    @g.view.selectAll \g.dot .data(@parsed, -> it.bind.key)
-      ..exit!remove!
-      ..enter!append \g .attr \class, \dot
-    @g.view.selectAll \g.dot
-      .style \opacity, (d,i) ~> if @legend.is-selected(d.bind.key) => 1 else 0.3
-      .each (d,i) ->
-        d3.select(@).selectAll \circle.dot .data d.pts
-          ..exit!remove!
-          ..enter!append \circle .attr \class, \dot
-            .attr \r, r
-            .attr \fill, \#fff
-            .attr \stroke, tint.get(d.bind.name or d.bind.key)
-        d3.select(@).selectAll \circle.dot
-          .filter (d,i) -> isNaN d.y1
-          .attr \cx, (d,i) -> if isNaN(scale.x d.x) => scale.x(extent.x.0) else scale.x(d.x)
-          .attr \cy, (d,i) -> scale.y(extent.y.0)
-          .transition 150
-          .attr \opacity, 0
-        d3.select(@).selectAll \circle.dot
-          .filter (d,i) -> !isNaN d.y1
-          .attr \cx, (d,i) -> scale.x d.x
-          .attr \cy, (d,i) -> scale.y d.y1
-          .attr \r, r
-          .attr \fill, tint.get d.color
-          .attr \stroke, tint.get d.color
-          .transition 150
-          .attr \opacity, 1
-    @legend.render!
-    @xaxis.render!
-    @yaxis.render!
-
-
-return block-factory

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

@@ -1,33 +0,0 @@
-div
-  div(plug="layout")
-    .pdl-layout
-      div(data-type="layout")
-        .pdl-cell(data-name="yaxis")  
-        .pdl-cell(data-name="view")
-        .pdl-cell
-        .pdl-cell(data-name="xaxis")  
-        .pdl-cell(data-name="legend")
-      div(data-type="render")
-  style(type="text/css"): :stylus
-    [data-name=xaxis] { font-size: 0.8em }
-    [data-name=yaxis] { font-size: 0.8em }
-    .pdl-layout > div[data-type=layout]
-      display: grid
-      grid-template-columns: fit-content(2em) 1fr fit-content(7em)
-      grid-template-rows: 1fr fit-content(1em)
-      /* 0.5em for axis label at the boundary */
-      padding: 0 0.5em
-      .pdl-cell[data-name=legend]
-        padding-left: 1em
-        grid-column: 3
-        grid-row: 1 / span 2
-
-    .pdl-layout.legend-below > div[data-type=layout]
-      grid-template-columns: 2em 1fr
-      grid-template-rows: 1fr fit-content(2em) fit-content(3em)
-      .pdl-cell[data-name=legend]
-        padding-top: 1em
-        grid-column: 1 / span 2
-        grid-row: 3
-
-  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -1,69 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  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!
-
-return block-factory

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,167 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  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
-
-
-
-return block-factory

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