@plotdb/chart 1.0.1 → 1.0.2

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,124 +0,0 @@
-module.exports =
-  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!

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,34 +0,0 @@
-module.exports =
-  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: ->

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,36 +0,0 @@
-module.exports =
-  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!
-      }
-    }

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

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

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

@@ -1,70 +0,0 @@
-module.exports =
-  pkg:
-    name: 'taiwancounty', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: [
-      {url: "https://d3js.org/topojson.v2.min.js", async: false}
-      {url: "https://d3js.org/d3-geo.v2.min.js", async: false}
-      {name: "pdmaptw", version: "local", path: "index.min.js", async: false}
-      {name: "pdmaptw", version: "local", path: "county.map.js"}
-    ]
-  init: ({root, context, pubsub}) ->
-    pubsub.fire \init, mod: mod {context} .then ~> it.0
-
-mod = ({context}) ->
-  {chart, d3, ldcolor, pdmaptw, topojson} = context
-  sample: ->
-    pdmaptw.get('county').then ({meta, topo}) ->
-      raw: meta.name.map -> {val: Math.random!, name: pdmaptw.normalize it}
-      binding: color: {key: \val}, name: {key: \name}
-  config:
-    palette: type: \palette
-  dimension:
-    name: {type: \N, name: "國家"}
-    color: {type: \R, name: "顏色"}
-  init: ->
-    @g = @layout.get-group \view
-    @obj = new pdmaptw {root: @g, type: \county}
-    @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
-        return {name: data.data.name, value: data.data.color}
-      range: ~> return @layout.get-node \view .getBoundingClientRect!
-    }
-    @obj.init!then ~> @obj.fit {node: @g, box: @layout.get-node(\view).getBoundingClientRect!}
-
-  parse: ->
-    @extent = c: [undefined, undefined]
-    d3.select @svg .selectAll \path .each (d,i) ~>
-      d.data = @data.filter(-> it.name == d.properties.name).0 or {}
-      if !(@extent.c.0?) or d.data.color < @extent.c.0 => @extent.c.0 = d.data.color
-      if !(@extent.c.1?) or d.data.color > @extent.c.1 => @extent.c.1 = d.data.color
-
-  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
-    @obj.fit {node: @g, box: @layout.get-box(\view)}
-
-  render: ->
-    d3.select @svg .selectAll \path
-      .transition!duration 350
-      .attr \fill, (d,i) ~> @scale.color d.data.color
-      .attr \fill-opacity, (d,i) ~> if @cfg.dim-empty => (if d.data.color? => 1 else 0.2) else 1
-    @legend.render!

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

@@ -1,64 +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
-
-
-//-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
-
-  }