@plotdb/chart 0.0.3 → 2.0.0

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

@@ -1,40 +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")
-    div(data-name="tip") #[div(ld="name")]#[div(ld="value1")]#[div(ld="value2")]
-  style(type="text/css"): :stylus
-    /*.pdl-cell { width: 100%; height: 100% }*/
-    .pdl-layout > div[data-type=layout]
-      display: grid
-      grid-template-columns: 1fr fit-content(10em)
-      & > .pdl-cell[data-name=view]
-        grid-area: 1 / 1
-      & > .pdl-cell[data-name=legend]
-        grid-column: 2
-        grid-row: 1
-        padding: 0 .5em 0 .5em
-
-    [data-name=tip]
-      padding: .4em .5em
-      background: #13171a
-      color: #fff
-      border-radius: 3px
-      box-shadow: 0 2px 4px rgba(0,0,0,.3)
-      line-height: 1.2em
-      font-size: .9em
-      max-width: 10em
-      word-break: break-all
-      [ld=name]
-        font-size: .85em
-      [ld=value1], [ld=value2]
-        font-weight: bold
-        font-size: 1.1em
-        line-height: 1.2em
-
-
-
-  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -1,113 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'radar', 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 4].map (idx) ~> {val: [0 to 2].map(->0.5 + 0.5 * Math.random!), cat: idx}
-    binding:
-      radius: {key: \val}
-      order: {key: \cat}
-  config: {}
-  dimension:
-    radius: { type: \R, name: "radius of point on radar line" },
-    order: { type: \R, name: "order of data point" }
-  init: ->
-    svg = d3.select @svg
-    @gs = gs = {}
-    gs.all = svg.append \g
-    @line = d3.line!
-      .x (d,i) ~> @scale.r(d) * Math.cos(@scale.a(@orders[i]))
-      .y (d,i) ~> @scale.r(d) * -Math.sin(@scale.a(@orders[i]))
-  parse: ->
-    @orders = Array.from(new Set(@data.map(->it.order)))
-    @parsed = d3.transpose(@data.map(-> it.radius))
-    @parsed.map (d,i) -> d.idx = i
-    @names = <[1 2 3]> #@dimension.radius.fieldName || <[1 2 3]>
-    @radiusRange = d3.extent(@parsed
-      .map (d) -> d3.extent d
-      .reduce(((a,b) -> a.concat(b)), [])
-    )
-    if @radiusRange.0 == @radiusRange.1 => @radiusRange.1++
-
-  bind: ->
-    @gs.all.selectAll \path.data .data @parsed
-      ..exit!
-        .attr \class, ""
-        .transition \exit .duration 500
-        .attr \opacity, 0
-        .remove!
-      ..enter!
-        .append \path
-        .attr \class, \data
-        .attr \opacity, 0
-    @gs.all.selectAll \g.data-group .data @parsed
-      ..exit!
-        .attr \class, ""
-        .transition \exit .duration 500
-        .attr \opacity, 0
-        .remove!
-      ..enter!
-        .append \g
-        .attr \class, \data-group
-        .attr \opacity, 0
-    @gs.all.selectAll \g.data-group .each (d,i) ->
-      d3.select @ .selectAll \circle.node .data d
-        ..exit!
-          .attr \class, ''
-          .transition \exit .duration 500
-          .attr \opacity, 0
-          .remove!
-        ..enter!
-          .append \circle
-          .attr \class, \node
-          .attr \opacity, 0
-  resize: ->
-    size = (Math.min(@box.width, @box.height) / 2) >? 10
-    @scale =
-      r: d3.scaleLinear!domain [0, @radiusRange.1] .range [0, size]
-      a: d3.scalePoint!domain @orders .range [0, 2 * Math.PI]
-      c: d3.interpolateTurbo
-    if @cfg? and @cfg.palette =>
-      @scale.c = d3.interpolateDiscrete @cfg.palette.colors.map -> ldColor.web(it.value or it)
-    @aTicks = d3.range(@data.length)
-  render: ->
-    {scale, names, line, orders, orders} = @
-    @gs.all.attr \transform, "translate(#{@box.width/2},#{@box.height/2})"
-
-    @gs.all.selectAll \path.data
-      .each (d,i) ->
-        color = scale.c(i / (names.length - 1))
-        d3.select @
-          .attr \fill, color
-          .attr \fill-opacity, 0.2
-          .attr \stroke, color
-          .attr \stroke-width, 1
-          .transition \morph .duration 350
-            .attr \d, (d,i) -> line(d,i) + "Z"
-      .transition \opacity .duration 350
-        .attr \opacity, 1 
-
-    @gs.all.selectAll \g.data-group
-      .each (d,i) ->
-        color = scale.c(i / (names.length - 1))
-        d3.select @ .selectAll \circle.node
-          .attr \fill, \#fff
-          .attr \stroke, color
-          .attr \stroke-width, 1
-          .transition \morph .duration 350
-            .attr \cx, (d,i) ~> scale.r(d) * Math.cos(scale.a(orders[i]))
-            .attr \cy, (d,i) ~> scale.r(d) * -Math.sin(scale.a(orders[i]))
-            .attr \r, 3
-            .attr \opacity, 1
-      .transition \opacity .duration 350
-        .attr \opacity, 1
-
-return block-factory

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

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

package/web/src/pug/block/radar/0.0.1/xx

@@ -1,285 +0,0 @@
-{
-  sample: function() {
-    var list = d3.range(9 + Math.round(Math.random() * 3));
-    var count = d3.range(Math.round(Math.random() * 2) + 2);
-    return {
-      order: [{name: "Month", data: list.map(function(d,i) { return plotdb.data.sample.month[i].substring(0,3); })}],
-      radius: count.map(function(d,i) {
-        return {
-          name: "Value " + d,
-          data: list.map(function(d,i) { return Math.round(Math.random() * 90 + 10); })
-        };
-      })
-    };
-  },
-  dimension: {
-    radius: { type: [plotdb.Number], require: true, multiple: true, desc: "radius of point on radar line" },
-    order: { type: [plotdb.Order], desc: "order of data point" }
-  },
-  config: {
-    fontFamily: {},
-    background: {},
-    textFill: {},
-    fontSize: {},
-    margin: {},
-    padding: {},
-    palette: {},
-    strokeWidth: {},
-    lineSmoothing: {},
-    legendLabel: {},
-    legendShow: {},
-    legendPosition: {},
-    rAxisShow: {},
-    rAxisLabel: {},
-    rAxisTickPadding: {},
-    rAxisTickCount: {rebindOnChange: true},
-    aAxisShow: {},
-    aAxisLabel: {},
-    aAxisTickPadding: {},
-    nodeShow: {},
-    nodeSize: {default: 8},
-    nodeStrokeWidth: {default: 2},
-    nodeFill: {default: "#fff"},
-    gridShow: {},
-    gridStroke: {},
-    gridStrokeWidth: {},
-    gridDashArray: {},
-    gridBackground: {},
-    popupShow: {},
-    unit: {}
-  },
-  init: function() {
-    var that = this;
-    this.svg = d3.select(this.root).append("svg");
-    this.allGroup = this.svg.append("g");
-    this.legendGroup = this.svg.append("g").attr({class: "legend-group"});
-    this.gridGroup = this.allGroup.append("g").attr({class: "grid-group"});
-    this.aAxisGroup = this.allGroup.append("g").attr({class: "axis angle"});
-    this.rAxisGroup = this.allGroup.append("g").attr({class: "axis radius"});
-    this.popup = plotd3.html.tooltip(this.root).on("mousemove", function(d,i,popup) {
-      var name = that.names[d3.select(this.parentNode).datum().idx];
-      var order = that.orders[i];
-      popup.select(".title").text(name + " @ " + order);
-      popup.select(".value").text(d + " " + (that.config.unit || ""));
-    });
-    this.line = d3.svg.line().tension(0.5)
-      .x(function(d,i) { return that.rScale(d) * Math.sin( that.aScale(that.orders[i]) ); })
-      .y(function(d,i) { return that.rScale(d) * -Math.cos( that.aScale(that.orders[i]) ); });
-    this.overlap = plotd3.rwd.overlap();
-  },
-  parse: function() {
-    plotdb.Order.sort(this.data, "order");
-    this.orders = d3.map(this.data, function(d,i) { return d.order; }).keys();
-    this.parsed = d3.transpose(this.data.map(function(it) { return it.radius; }));
-    this.parsed.map(function(d,i) { d.idx = i; });
-    this.names = this.dimension.radius.fieldName || ["1","2","3"];
-    this.radiusRange = d3.extent(this.parsed
-      .map(function(it) { return d3.extent(it); })
-      .reduce(function(a,b) { return a.concat(b); }, []));
-    if(this.radiusRange[0] == this.radiusRange[1]) this.radiusRange[1]++;
-  },
-  bind: function() {
-    var that = this, sel;
-    sel = this.allGroup.selectAll("path.data").data(this.parsed);
-    sel.exit().attr("class","").transition("exit").duration(500).attr("opacity",0).remove();
-    sel.enter().append("path").attr({class: "data", opacity: 0});
-    sel = this.allGroup.selectAll("g.data-group").data(this.parsed);
-    sel.exit().attr("class","").transition("exit").duration(500).attr("opacity",0).remove();
-    sel.enter().append("g").attr({class: "data-group", opacity: 0});
-    this.allGroup.selectAll("g.data-group").each(function(d,i) {
-      var sel = d3.select(this).selectAll("circle.node").data(d);
-      sel.exit().attr("class","").transition("exit").duration(500).attr("opacity",0).remove();
-      sel = sel.enter().append("circle").attr({class: "node", opacity: 0});
-      if(that.config.popupShow) that.popup.nodes(sel);
-    });
-
-    sel = this.gridGroup.selectAll("circle.grid.radius").data(this.rTicks);
-    sel.exit().attr("class","").transition("exit").duration(500).attr("opacity",0).remove();
-    sel.enter().append("circle").attr({class: "grid radius",opacity: 0, r: 0}).sort(d3.descending);
-    this.gridGroup.selectAll("circle.grid.radius").sort(function(a,b) { return b - a;});
-    sel = this.gridGroup.selectAll("line.grid.angle").data(this.aTicks);
-    sel.exit().attr("class","").transition("exit").duration(500).attr("opacity",0).remove();
-    sel.enter().append("line").attr({class: "grid angle",opacity: 0});
-    sel = this.aAxisGroup.selectAll("g").data(this.aTicks);
-    sel.exit().attr("class","").transition("exit").duration(500).attr("opacity",0).remove();
-    sel.enter().append("g").attr({class: "tick"}).each(function(d,i) {
-      d3.select(this).append("text").attr("opacity", 0);
-    });
-  },
-  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.legendVertical = ( this.config.legendPosition == "left" || this.config.legendPosition == "right" ) ? true : false;
-    this.line.interpolate(this.config.lineSmoothing);
-    this.popup.fontSize(this.config.fontSize);
-    this.cScale = plotdb.Palette.scale.ordinal(this.config.palette);
-    this.legend = plotd3.rwd.legend()
-      .scale(this.cScale)
-      .orient(this.config.legendPosition)
-      .size(
-        (this.legendVertical
-        ? [220,this.height - 2 * this.config.margin]
-        : [this.width - 2 * this.config.margin, 220]
-      ))
-      .label(this.config.legendLabel || " ")
-      .fontSize(this.config.fontSize);
-    this.legend.tickValues(this.names);
-    this.legendGroup.call(this.legend).selectAll(".legend").on("mouseover", function(d,i) {
-      that.activeGroup = i + 1; that.render();
-    }).on("mouseout", function(d,i) {
-      that.activeGroup = null; that.render();
-    });
-    this.legendSize = (this.config.legendShow ? this.legend.offset() : [0,0]);
-    var mh = height - (this.config.legendShow && !this.legendVertical ? this.legendSize[1] + this.config.fontSize : 0);
-    var mw = width - (this.config.legendShow && this.legendVertical ? this.legendSize[0] + this.config.fontSize : 0);
-    
-    this.size = ((mw>mh?mh:mw) - that.config.margin * 2 - that.config.fontSize * 2)/2;
-    if(this.size <= 10) this.size = 10;
-    this.rScale = d3.scale.linear()
-      .domain([0,this.radiusRange[1]])
-      .range([0,this.size]).nice(5);
-    this.rTicks = this.rScale.ticks(this.config.rAxisTickCount);
-    this.rTicks.sort(function(a,b) { return b - a; });
-    this.niceRRange = this.rScale.domain();
-    this.rAxis = plotd3.rwd.axis()
-      .scale(this.rScale)
-      .orient("radius")
-      .angle(Math.PI /(this.data.length || 1))
-      .showGrid(false)
-      .tickValues(this.rTicks)
-      .fontSize(this.config.fontSize);
-    this.rAxisGroup.call(this.rAxis).select(".domain").remove();
-    this.aScale = d3.scale.ordinal()
-      .domain(this.orders.concat(""))
-      .rangePoints([0, 2 * Math.PI]);
-    this.aTicks = d3.range(this.data.length);
-  },
-  render: function() {
-    var that = this,sel;
-    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.legendVertical
-           ? (this.width/2 + 
-              (this.config.legendPosition == "left"
-              ? -(this.size + this.config.fontSize + this.legendSize[0])
-              :  (this.size + this.config.fontSize)
-             ))
-           : (this.width - this.legendSize[0])/2
-        ),
-        (!this.legendVertical 
-           ? (this.height/2 + 
-             (this.config.legendPosition == "top"
-             ? -(this.size + this.config.fontSize + this.legendSize[1])
-             :  (this.size + this.config.fontSize)
-            ))
-           : (this.height - this.legendSize[1])/2
-        ),
-        ")"].join(" "),
-      display: (this.config.legendShow ? "block" : "none")
-    });
-    this.allGroup.attr({
-      transform: [
-        "translate(",
-        ((this.width + (this.legendVertical ? (this.config.legendPosition == "left" ? 1 : -1) : 0) * (this.config.legendShow
-          ? this.legendSize[0] + this.config.fontSize 
-          : 0))/2
-        ), (this.height + (!this.legendVertical ? (this.config.legendPosition == "top" ? 1 : -1) : 0) * (this.config.legendShow
-          ? this.legendSize[1] + this.config.fontSize : 0))/2,
-        //(this.height/2),
-        ")"
-      ].join(" ")
-    });
-    this.gridGroup.attr({
-      display: (this.config.gridShow ? "block" : "none")
-    }).selectAll("circle.grid.radius").attr({
-      cx: 0, cy: 0, fill: this.config.gridBackground, stroke: this.config.gridStroke, 
-      "stroke-width": this.config.gridStrokeWidth, "stroke-dasharray": this.config.gridDashArray
-    }).transition("morph").duration(500).attr({
-      r: function(d,i) { return that.rScale(d); },
-      opacity: 1
-    });
-
-    this.gridGroup.selectAll("line.grid.angle").attr({
-      stroke: this.config.gridStroke,
-      "stroke-width": this.config.gridStrokeWidth,
-      "stroke-dasharray": this.config.gridDashArray
-    }).transition("morph").duration(500).attr({
-      x1: 0, y1: 0,
-      x2: function(d,i) {
-        return that.rScale(that.niceRRange[1]) * Math.sin( that.aScale(that.orders[d]) );
-      },
-      y2: function(d,i) {
-        return that.rScale(that.niceRRange[1]) * -Math.cos( that.aScale(that.orders[d]) );
-      },
-      opacity: 1
-    });
-    this.aAxisGroup.attr({
-      display: (this.config.aAxisShow ? "block" : "none")
-    });
-    this.rAxisGroup.attr({
-      display: (this.config.rAxisShow ? "block" : "none")
-    });
-    this.aAxisGroup.selectAll(".tick text").attr({
-      "font-size": that.config.fontSize,
-      "text-anchor": "middle",
-      dy: "0.38em",
-    }).text(function(d,i) { return that.orders[i] || i; }).transition("morph").duration(function() {
-      return d3.select(this).attr("transform") ? 500 : 0;
-    }).attr({
-      transform: function(d,i) {
-        var r = (that.rScale(that.niceRRange[1]) + 1 * that.config.fontSize);
-        var x = r * Math.sin( that.aScale(that.orders[d]) );
-        var y = r * -Math.cos( that.aScale(that.orders[d]) );
-        var a = (360 * i / that.data.length);
-        return ["translate(", x, y, ") rotate(", a, ")"].join(" ");
-      },
-    });
-    this.aAxisGroup.selectAll("text").transition("opacity").duration(500).attr({ opacity: 1 });
-    this.allGroup.selectAll("path.data").each(function(d,i) {
-      var strokeColor = that.cScale(that.names[i]);
-      var rgb = d3.rgb(strokeColor);
-      var fillColor = ["rgba(",rgb.r,",",rgb.g,",",rgb.b,",",0.2,")"].join("");
-      d3.select(this).attr({
-        fill: fillColor,
-        stroke: strokeColor,
-        "stroke-width": that.config.strokeWidth
-      }).transition("morph").duration(500).attr({
-        d: function(d,i) { return that.line(d,i) +"Z"; },
-      });    
-    }).transition("opacity").duration(500).attr({
-      opacity: function(d,i) { return (!that.activeGroup || that.activeGroup == i+1 ? 1 : 0.1); }
-    });
-    this.allGroup.selectAll("g.data-group").each(function(d,i) {
-      var node = d3.select(this);
-      var strokeColor = that.cScale(that.names[i]);
-      var rgb = d3.rgb(strokeColor);
-      var fillColor = ["rgba(",rgb.r,",",rgb.g,",",rgb.b,",",0.2,")"].join("");
-      node.selectAll("circle.node").attr({
-        fill: that.config.nodeFill || "#fff", stroke: strokeColor, "stroke-width": that.config.nodeStrokeWidth,
-        display: (that.config.nodeShow ? "block" : "none")
-      }).transition("morph").duration(500).attr({
-        cx: function(d,i) { return that.rScale(d) * Math.sin( that.aScale(that.orders[i]) ); },
-        cy: function(d,i) { return that.rScale(d) * -Math.cos( that.aScale(that.orders[i]) ); },
-        r: that.config.nodeSize/2,
-        opacity: 1
-      });
-    });
-    this.allGroup.selectAll("g.data-group").transition("opacity").duration(500).attr({
-      opacity: function(d,i) { return (!that.activeGroup || that.activeGroup == i+1 ? 1 : 0.1); }
-    });
-  }
-}

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

@@ -1,128 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'scatter', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: [
-      { url: "http://cdn.jsdelivr.net/npm/d3-delaunay@6/dist/d3-delaunay.min.js" }
-    ]
-
-  init: ({root, context, pubsub}) ->
-    pubsub.fire \init, mod: mod {context}
-
-mod = ({context}) ->
-  {d3,chart} = context
-  names = [
-    "The Glenn Miller Story",
-    "The Fifth Element",
-    "Forrest Gump",
-    "Finding Nemo",
-    "The Fly",
-    "First Blood",
-    "You Can't Take It with You",
-    "Man of the Year",
-    "From Hell",
-    "The Easy Rider",
-    "The English Patient",
-    "The Extra-Terrestial",
-    "Edward Scissorhands",
-    "Empire of the Sun",
-    "Encounters of the Third Kind",
-    "Elizabeth: The Golden Age",
-  ]
-  sample: ->
-    raw: [0 to 100].map (val) ~> 
-      ret = x: Math.random!, y: Math.random!, name: names[Math.floor(Math.random! * names.length)]
-      ret
-    binding:
-      x: {key: \x}
-      y: {key: \y}
-      name: {key: \name}
-  config: {}
-  dimension:
-    x: {type: \R, name: "x axis"}
-    y: {type: \R, name: "y axis"}
-    radius: {type: \R, name: "radius"}
-    category: {type: \CN, name: "category"}
-    name: {type: \N, name: "name"}
-  init: ->
-    @tint = tint = new chart.utils.tint!
-    <[view yaxis xaxis]>.map ~> @{}g[it] = d3.select(@layout.get-group(it))
-    @path = d3.select @svg .append \path
-
-  parse: ->
-
-  resize: ->
-    [w,h] = [@box.width, @box.height]
-    @extent =
-      x: d3.extent @data.map -> it.x
-      y: d3.extent @data.map -> it.y
-    box = @layout.get-box \view
-    @scale =
-      x: d3.scaleLinear!domain @extent.x .range [0, box.width]
-      y: d3.scaleLinear!domain @extent.y .range [0, box.height]
-    @pts = @data.map (d) ~> [@scale.x(d.x), @scale.y(d.y)]
-    @delaunay = d3.Delaunay.from @pts
-    @voronoi = @delaunay.voronoi [0, 0, box.width, box.height]
-    @cells = @pts
-      .map (point,i) ~>
-        [x,y] = point
-        polygon = @voronoi.cellPolygon i
-        [cx,cy] = centroid = d3.polygonCentroid polygon
-        area = -d3.polygonArea polygon
-        angle = (Math.round(Math.atan2(cy - y, cx - x) / Math.PI * 2) + 4) % 4
-        {point, polygon, centroid, area, angle}
-
-  render: ->
-    {scale} = @
-    @g.view.selectAll \circle.data .data @data
-      ..exit!remove!
-      ..enter!append \circle .attr \class, \data
-        .attr \cx, (d,i) -> scale.x d.x
-        .attr \cy, (d,i) -> scale.y d.y
-        .attr \r, 3
-        .attr \fill, \#000
-    @g.view.selectAll \text .data @data
-      ..exit!remove!
-      ..enter!append \text
-        .text (d,i) -> d.name
-        .attr \x, (d,i) -> if d.nb => d.nb.x else scale.x(d.x)
-        .attr \y, (d,i) -> if d.nb => d.nb.y else scale.y(d.y)
-        .attr \text-anchor, \middle
-        .attr \dominant-baseline, \middle
-    @g.view.selectAll \text .data @data
-      .attr \x, (d,i) -> if d.nb => d.nb.x else scale.x(d.x)
-      .attr \y, (d,i) -> if d.nb => d.nb.y else scale.y(d.y) - 20
-      .attr \opacity, (d,i) -> if d.nb => (if d.nb.show => 1 else 0) else 1
-    @path
-      .attr \d, @voronoi.render!
-      .attr \stroke, \#000
-      .attr \transform, @g.view.node!getAttribute(\transform)
-  tick: ->
-    scale = @scale
-    @g.view.selectAll \text .each (d,i) -> d.box = @getBoundingClientRect!
-    rbox = @layout.get-box \view
-    for i from 0 til @data.length =>
-      d = @data[i].box
-      if !@data[i].nb => @data[i].nb = x: scale.x(@data[i].x), y: scale.y(@data[i].y) - 20
-      @data[i].nb <<< width: d.width, height: d.height, show: true
-    for r from 20 til 200 by 20
-      for i from 0 til @data.length =>
-        for j from 0 til i =>
-          [a,b] = [@data[i].nb, @data[j].nb]
-          if ((a.x >= b.x and a.x <= b.x + b.width) or (a.x + a.width >= b.x and a.x + a.width <= b.x + b.width)) and
-             ((a.y >= b.y and a.y <= b.y + b.height) or (a.y + a.height >= b.y and a.y + a.height <= b.y + b.height)) =>
-            d = Math.random! * Math.PI * 2
-            data = @data[i]
-            data.nb <<< {x: scale.x(data.x) + (Math.cos(d) * r), y: scale.y(data.y) + (Math.sin(d) * r)}
-    for i from 0 til @data.length =>
-      for j from 0 til i =>
-        [a,b] = [@data[i].nb, @data[j].nb]
-        if ((a.x >= b.x and a.x <= b.x + b.width) or (a.x + a.width >= b.x and a.x + a.width <= b.x + b.width)) and
-           ((a.y >= b.y and a.y <= b.y + b.height) or (a.y + a.height >= b.y and a.y + a.height <= b.y + b.height)) =>
-           @data[i].nb.show = false
-
-    @render!
-
-return block-factory

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

@@ -1,30 +0,0 @@
-div
-  div(plug="layout")
-    .pdl-layout
-      div(data-type="layout")
-        .pdl-cell(data-name="axis-left")
-        .pdl-cell(data-name="view")
-        .pdl-cell
-        .pdl-cell(data-name="axis-bottom")
-        .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: 2em 1fr
-      grid-template-rows: 1fr 1em 3em
-      padding: 20px 20px 0 20px
-      .pdl-cell[data-name=legend]
-        grid-column: 1 / span 2
-        grid-row: 3
-    /*
-    .pdl-layout > div[data-type=layout]
-      display: grid
-      grid-template-columns: 2em 1fr 5em
-      grid-template-rows: 1fr 1em
-      padding: 20px 20px 0 20px
-      .pdl-cell[data-name=legend]
-        grid-column: 3
-        grid-row: 1 / span 2
-    */
-  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -1,38 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'bar', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: [
-      {url: "/assets/lib/@plotdb/sheet/main/index.min.js"}
-      {url: "/assets/lib/@plotdb/sheet/main/index.min.css"}
-    ]
-  init: ({root, context, t, pubsub}) ->
-    pubsub.fire \init, mod: mod({context, t}), prepareSvg: false, layout: false
-
-mod = ({context, t}) ->
-  {chart,sheet} = context
-  sample: ->
-    raw: [0 to 20].map (val) ~> Object.fromEntries([1 to 5].map -> ["col#it", (Math.random! * 100).toFixed(2)])
-    binding: column: [1 to 5].map -> {key: "col#it"}
-  config: {}
-  dimension: column: {type: \NCOR, multiple: true, name: \column}
-  init: ->
-    @sheet = new sheet do
-      root: @root.querySelector('[plug=layout]')
-      frozen: {row: 1}
-      editing: false
-      idx: row: true, col: true
-    @data = [@binding.column.map(->it.name or it.key)] ++ @raw.map (r) ~> @binding.column.map (c) -> r[c.key]
-    @sheet.data @data
-
-  filter: (filters, internal = false) -> 
-  parse: ->
-    head = @binding.column.map -> it.name or it.key
-    @parsed = [head] ++ (@data.map -> it.column)
-    @sheet.data @parsed
-  resize: ->
-  render: ->
-
-return block-factory

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

@@ -1,5 +0,0 @@
-div
-  div(plug="layout")
-  style(type="text/css"): :stylus
-
-  script(type="@plotdb/block"): include:lsc index.ls

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

@@ -1,40 +0,0 @@
-<-(->it!) _
-
-block-factory =
-  pkg:
-    name: 'table', version: '0.0.1'
-    extend: {name: "empty", version: "0.0.1"}
-    dependencies: [
-      {url: "/assets/lib/gridjs/main/gridjs.production.min.js"}
-      {url: "/assets/lib/gridjs/main/theme/mermaid.min.css"}
-    ]
-  init: ({root, context, pubsub}) ->
-    {gridjs} = context
-    pubsub.fire \init, {
-      layout: false
-      prepare-svg: false
-      mod: {
-        init: ->
-          @grid = grid = new gridjs.Grid do
-            columns: [' ','  ','   ','    ','      '],
-            height: "#{@root.getBoundingClientRect!height}px"
-            fixedHeader: true,
-            sort: true
-            search: false
-            resizable: true
-            data: [] ++ [0 to 10].map -> []
-          grid.render @root
-        parse: ->
-          head = [k for k of (@raw.0 or {})]
-          head.length 
-          raw = @raw
-          console.log raw
-          return
-          @grid.updateConfig {
-            columns: raw.0
-            data: raw.slice(1) ++ [0 to (20 - raw.length) >? 0 ].map(->[])
-          } .forceRender!
-      }
-    }
-
-return block-factory