@plotdb/chart 0.0.3 → 2.0.0

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

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

@@ -1,17 +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: 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

package/web/src/pug/block/voronoi-treemap/0.0.1/sample.js

@@ -1,241 +0,0 @@
-{
-  sample: function() {
-    var list = d3.range(20);
-    return {
-      value: [{name: "Score", data: list.map(function(d,i) { return Math.round(Math.random() * 90 + 10); })}],
-      name: [{name: "Name", data: list.map(function(d,i) { return plotdb.data.sample.name.rand(); })}],
-      category: [{name: "Dept", data: list.map(function(d,i) { return plotdb.data.sample.category.rand(); })}]
-    };
-  },
-  dimension: {
-    value: { type: [plotdb.Number], require: true, desc: "size of the block" },
-    name: { type: [], require: false, desc: "name of the block" },
-    category: { type: [], require: false, desc: "parent of the block"},
-    color: { type: [], require: false, desc: "color of block. leave empty to color by category"}
-  },
-  config: {
-    fontFamily: {},
-    background: {},
-    textFill: {},
-    fontSize: {default: 14},
-    stroke: {default: "#000"},
-    strokeWidth: {default: 5},
-    margin: {},
-    palette: {},
-    legendLabel: {},
-    legendShow: {},
-    labelShow: {},
-    labelShowThreshold: {
-      name: "Only Show labels over this value",
-      desc: "this config controls the labels to show by their underlying area",
-      default: 10,
-      type: [plotdb.Number],
-      min: 0, max: 1000,
-      category: "Label"
-    },
-    labelShadowSize: {},
-    popupShow: {}
-  },
-  init: function() {
-    var that = this;
-    this.svg = d3.select(this.root).append("svg"); 
-    this.legendGroup = this.svg.append("g").attr({class: "legend-group"});
-    this.tooltip = plotd3.html.tooltip(this.root).on("mousemove", function(d,i,popup) {
-      var data = d3.select(that.sites[0][i]).datum();
-      popup.select(".title").text(data.name + " / " + data.category);
-      popup.select(".value").text(data.data);
-    });
-    requestAnimationFrame(function() { that.tickWrap(); });
-  },
-  tickWrap: function() {
-    var that = this;
-    this.tick();
-    requestAnimationFrame(function() { that.tickWrap(); });
-  },
-  parse: function() {
-    this.data.map(function(it) { 
-      it.key = it.name;
-      it.data = it.value;
-    });
-    this.total = this.data.reduce(function(a,b) { return a + b.data; }, 0);
-    this.categories = d3.map(this.data, function(d,i) { return d.category; }).keys();
-    this.parsed = {children: d3.nest().key(function(it) { return it.category; }).entries(this.data).map(function(it) {
-      it.children = it.values;
-      return it;
-    })};
-  },
-  bind: function() {
-    var that = this, sel;
-    var sites = this.treemap.getSites();
-    sel = this.svg.selectAll("path.data").data(this.treemap.getPolygons());
-    sel.exit().remove();
-    sel = sel.enter().append("path").attr({"class": "data", opacity: 1});
-    this.svg.selectAll("path.data").attr({
-      class: function(d,i) {
-        return (sites[i].lv <=0 ? "data group" : "data");
-      }
-    });
-    if(this.config.popupShow) this.tooltip.nodes(sel);
-    this.polygons = this.svg.selectAll("path.data");
-    sel = this.svg.selectAll("g.label").data(sites);
-    sel.exit().remove();
-    sel = sel.enter().append("g").attr({"class": "label"}).each(function(it) {
-      var node = d3.select(this);
-      node.append("text").attr({"class": "name shadow"});
-      node.append("text").attr({"class": "value shadow"});
-      node.append("text").attr({"class": "name"});
-      node.append("text").attr({"class": "value"});
-    });
-    this.sites = this.svg.selectAll("g.label");
-    this.sites.each(function(d,i) {
-      d3.select(this).selectAll("text").datum(d);
-    });
-  },
-  resize: function() {
-    var that = this;
-    var box = this.root.getBoundingClientRect();
-    var width = this.width = box.width;
-    var height = this.height = box.height;
-    this.svg.attr({
-      width: width + "px", height: height + "px",
-      viewBox: [0,0,width,height].join(" "),
-      preserveAspectRatio: "xMidYMid"
-    });
-    this.tooltip.fontSize(this.config.fontSize);
-    this.useColor = !!this.dimension.color.fields.length;
-    this.cScale = plotdb.Palette.scale.auto(
-      this.config.palette,
-      this.useColor ? this.dimension.color.fields : this.dimension.category.fields
-    );
-    this.legend = plotd3.rwd.legend()
-      .scale(this.cScale)
-      .orient("bottom")
-      .tickValues(this.cScale.domain())
-      .size([this.width - 2 * this.config.margin, 100])
-      .fontSize(this.config.fontSize);
-    this.legend.label(this.config.legendLabel || "");
-    this.legendGroup.call(this.legend).selectAll(".legend").on("mouseover", function(d,i) {
-      var sites = that.treemap.getSites();
-      that.activeGroup = d;
-      that.polygons.transition().attr({
-        opacity: function(d,i) {
-          var data = sites[i];
-          return (!that.activeGroup || that.activeGroup == data.category ? 1 : 0.1);
-        }
-      });
-    }).on("mouseout", function(d,i) {
-      that.activeGroup = null;
-      that.polygons.transition().attr({ opacity: 1 });
-    });
-    this.legendSize = (this.config.legendShow ? this.legend.offset() : [0,0]);
-    this.xScale = d3.scale.linear().domain([0,width]).range([
-      this.config.margin, 
-      width - this.config.margin
-    ]);
-    this.yScale = d3.scale.linear().domain([0,height]).range([
-      this.config.margin, 
-      height - this.config.margin - (this.config.legendShow ? this.legendSize[1] + this.config.fontSize : 0)
-    ]);
-    this.treemap = new Voronoi.Treemap(this.parsed, Voronoi.Polygon.create(width, height, 60), width, height);
-  },
-  tick: function() {
-    this.treemap.compute();
-    this.renderTreemap();
-  },
-  render: function() {
-    var that = this;
-    if(this.config.fontFamily) d3.select(this.root).style("font-family", this.config.fontFamily);
-    d3.select(this.root).style("background-color", this.config.background);
-    this.svg.selectAll("text").attr({
-      "font-size": that.config.fontSize,
-      "fill": that.config.textFill
-    });
-    this.legendGroup.attr({
-      transform: ["translate(", (this.width - this.legendSize[0])/2, (this.height - this.legendSize[1] - this.config.margin), ")"].join(" "),
-      display: (this.config.legendShow ? "block" : "none")
-    });
-    this.sites.attr({
-      "font-size": this.config.fontSize,
-      "font-weight": "200",
-      "text-anchor": "middle",
-      dy: "0.38em",
-      display: function(d,i) {
-        return (that.config.labelShow && (0.001 * that.config.labelShowThreshold < d.data / that.total) ? "block" : "none");
-      }
-    });
-    this.sites.selectAll("text").attr({
-      fill: function(it) {
-        var hsl = d3.hsl(that.cScale(that.useColor ? it.color : it.category));
-        if(hsl.l > 0.65) return "#000";
-        return "#fff";
-      }
-    });
-    this.sites.selectAll(".name").attr({
-      dy: "-0.5em"
-    }).text(function(it) {
-      if(it.lv >= 1) return it.name;
-      return "";
-    });
-    this.sites.selectAll(".value").attr({
-      dy: "0.5em",
-      "font-size": "0.8em"
-    }).text(function(it) {
-      if(it.lv >= 1) return Math.round(100*it.data)/100;
-      return "";
-    });
-    this.sites.selectAll(".shadow").attr({
-      stroke: function(it) {
-        var hsl = d3.hsl(that.cScale(that.useColor ? it.color : it.category));
-        if(hsl.l > 0.65) return "#fff";
-        return "#000";
-      },
-      "stroke-width": that.config.labelShadowSize
-    });
-    var sites = this.treemap.getSites();
-    this.polygons.attr({
-      fill: function(it,i) {
-        if(sites[i].lv == 0) return "none";
-        return (that.useColor
-          ? that.cScale(sites[i].color) 
-          : that.cScale(sites[i].category)
-        );
-      },
-      stroke: this.config.stroke,
-      "stroke-width": function(it,i) {
-        if(sites[i].lv <= 0) return that.config.strokeWidth;
-        return that.config.strokeWidth/3;
-      }
-    });
-  },
-  renderTreemap: function() {
-    var that = this;
-    var sites = this.treemap.getSites();
-    var polygons = this.treemap.getPolygons();
-    this.polygons.data(polygons).attr({
-      d: function(it) {
-        if(!it || !it.length) return ""
-        ret = ["M", that.xScale(it[0].x), that.yScale(it[0].y)];
-        for(var idx = 0; idx < it.length; idx++) {
-          ret.push("L");
-          ret.push(that.xScale(it[idx].x));
-          ret.push(that.yScale(it[idx].y));
-        }
-        ret.push("L");
-        ret.push(that.xScale(it[0].x));
-        ret.push(that.yScale(it[0].y));
-        return ret.join(" ");
-      },
-    });
-    this.sites.attr({
-      transform: function(it,i) {
-        var x = 0, y = 0;
-        var box = that.polygons[0][i].getBoundingClientRect();
-        x = box.left + box.width/2;
-        y = box.top + box.height/2;
-        if(isNaN(x)) x = -10000;
-        if(isNaN(y)) y = -10000;
-        return ["translate(", x, y, ")"].join(" ");
-      },
-    });
-  }
-}

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

@@ -1,61 +0,0 @@
-<- (->it!) _
-
-block-factory =
-  pkg:
-    name: 'wordcloud', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: [
-      {url: "https://unpkg.com/d3-cloud@1.2.5/build/d3.layout.cloud.js"}
-    ]
-
-  init: ({root, context, pubsub}) ->
-    pubsub.fire \init, mod: mod {context} .then ~> it.0
-
-mod = ({context, root}) ->
-  {d3,forceBoundary,ldColor,repeatString$} = context
-  sample: ->
-    raw: []
-    binding: {}
-  config: {}
-  dimension: {}
-  init: ->
-    @dd = <[cover scandal seem consumption garbage hunter
-      pepper west guilt conspiracy pupil boat muscle nightmare gene
-      royalty salon difficult management brainstorm aid moving plaster
-      cake issue realism subject speed railcar break grass collapse
-      is leave retiree looting transaction copyright serve guard 
-      colony spell ask ranch cell sensation name default reflection 
-    ]>.map (d,i) -> { text: d, value: 1.5 * i + 10} #value: Math.pow(i,2)/50 + 10} #Math.random! * 40 + 10 }
-    @cloud = d3.layout.cloud!
-    @cloud
-      #.rotate 0
-      .font \arial
-      .padding 2
-      .fontSize ~> it.value
-      .on \end, ~>
-        @render!
-  parse: ->
-  resize: ->
-    @cloud
-      .size([@box.width, @box.height].map -> Math.round it)
-      .words @dd
-      .start!
-  render: ->
-    color = d3.interpolateTurbo
-    if @cfg? and @cfg.palette =>
-      color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldColor.web(it.value or it)
-    vext = d3.extent @dd.map -> it.value
-    vscale = d3.scaleLinear!domain vext .range [0,1]
-    d3.select @svg .selectAll \text .data @dd
-      ..exit!remove!
-      ..enter!append \text
-    d3.select @svg .selectAll \text
-      .attr \transform, ~> "translate(#{it.x + @box.width / 2} #{it.y + @box.height / 2}) rotate(#{it.rotate})"
-      .attr \text-anchor, \middle
-      .attr \font-size, -> it.size
-      .attr \font-family, \arial
-      .attr \fill, -> color vscale it.value
-      .text -> it.text
-  tick: ->
-
-return block-factory

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

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

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

@@ -1,81 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'worldmap', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: [
-      {url: "https://d3js.org/d3-geo.v2.min.js", async: false}
-      {url: "https://d3js.org/topojson.v2.min.js", async: false}
-      {url: "/assets/lib/@plotdb/pdmap-world/main/index.js"}
-    ]
-  init: ({root, context, pubsub}) ->
-    pubsub.fire \init, {mod: mod {context}}
-
-mod = ({context}) ->
-  {chart, d3, ldcolor, pdmap-world, topojson} = context
-  sample: ->
-    raw: pdmap-world.meta.alpha2.map -> {country: it, val: Math.random!}
-    binding: do
-      color: {key: \val}
-      name: {key: \country}
-  config: {}
-  dimension:
-    name: {type: \N, name: "國家"}
-    color: {type: \R, name: "顏色"}
-  init: ->
-    @g = @layout.get-group \view
-    @obj = new pdmap-world { root: @g }
-    @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
-        ret = [[k,v] for k,v of pdmap-world.meta.zhalpha2].filter(-> it.1.toLowerCase! == data.properties.alpha2).0
-        name = if ret => ret.0
-        else data.properties.shortname or data.data.name
-        v = if isNaN(data.data.color) => '-' else "#{(data.data.color).toFixed(2)}#{@binding.color.unit or ''}"
-        return {name: name, value: v}
-      range: ~> return @layout.get-node \view .getBoundingClientRect!
-    }
-    @obj.init!then ~> @obj.fit!
-
-  destroy: -> @tip.destroy!
-
-  parse: ->
-    geo-data = d3.select @g .selectAll \path .data!
-    geo-data.map (d) -> d.data = null; d.properties.value = 0; d.properties.data = {}
-    @data
-      .map ~> {c: @obj.findCountry(it.name), v: it}
-      .filter -> it.c
-      .map -> it.c <<< {value: it.v.color, data: it.v}
-    geo-data.map (d) -> d.data = d.properties.data or {}
-    @extent = c: d3.extent(geo-data, -> it.properties.value)
-
-  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
-
-  render: ->
-    @legend.render!
-    d3.select @g .selectAll \path
-      .transition!duration 350
-      .attr \fill, (d,i) ~> @scale.color d.properties.value
-      .attr \fill-opacity, (d,i) ~> if @cfg.dim-empty => (if d.properties.value => 1 else 0.2) else 1
-
-return block-factory

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

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

package/web/src/pug/index.ls

@@ -1,72 +0,0 @@
-<-(->it.apply {}) _
-lc = @
-
-
-block-prepare = (name, root, data) ->
-  if !data =>
-    data = do
-      config: palette: {"colors":['#b32317','#f58025','#3a6e8f','#87b2d8','#8d8b00','#c1d72f']}
-      delay-render: false
-
-  if lc.chart => lc.chart.destroy!
-  root.innerHTML = ""
-  console.log "[#name] loading"
-  manager.get({name, version: "0.0.1"})
-    .then -> it.create {data}
-    .then (bi) ->
-      console.log "[#name] created"
-      bi.attach {root} .then -> bi.interface!
-    .then (chart) ->
-      console.log "[#name] attached"
-      window.chart = chart
-      lc.chart = chart
-      chart.config {legend: selectable: true}
-      chart.resize!
-      chart.render!
-      chart.on <[select hover]>, -> console.log "[select/hover] ", it
-      console.log chart.mod.config
-      lc.kfg.meta {meta: chart.mod.config}
-
-manager = new block.manager do
-  registry: ({name,version,path,type}) ->
-    if type == \block => return "/block/#name/#version/#{path or 'index.html'}"
-    if !/^d3/.exec(name) => return "/assets/lib/#name/#version/#path"
-    return "/assets/custom-lib/d3/#name.v#version.min.js"
-
-manager.init!
-  .then -> manager.get({name: "base", version: "0.0.1"})
-  .then ->
-    pals = ldpp.get \all
-    lc.view = new ldview do
-      root: '[ld-scope=viewer]'
-      action:
-        change: choice: ({node}) -> block-prepare node.value, root
-        click:
-          palette: ->
-            lc.chart.config palette: colors: pals[Math.floor(pals.length * Math.random!)]
-            lc.chart.resize!
-            lc.chart.render!
-          filter: ->
-            lc.chart.filter {name: [2,5]}
-
-  .then ->
-    query = Object.fromEntries((window.location.search or "").substring(1).split(\&).map -> it.split(\=))
-    if !query.chart => query.chart = lc.view.get('choice').value
-    if query.chart =>
-      block-prepare query.chart, root
-      lc.view.get('choice').value = query.chart
-
-  .then ->
-    lc.kfg = new konfig {
-      root: lc.view.get('konfig'), manager: manager
-      view: \recurse, use-bundle: true, debounce: false, autotab: true
-      typemap: (name) -> {name: "@plotdb/konfig.widget.bootstrap", version: "master", path: name}
-    }
-    lc.kfg.init!then -> console.log ">", it
-    lc.kfg.on \change, (cfg) ->
-      lc.cfg = cfg
-      if !lc.chart => return
-      lc.chart.config lc.cfg
-      lc.chart.bind!
-      lc.chart.resize!
-      lc.chart.render!