@plotdb/chart 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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