@plotdb/chart 0.0.2

package/web/static/block/scatter/0.0.1/index.html

@@ -0,0 +1,251 @@
+<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="axis-left"></div><div class="pdl-cell" data-name="view"></div><div class="pdl-cell"></div><div class="pdl-cell" data-name="axis-bottom"></div><div class="pdl-cell" data-name="legend"></div></div><div data-type="render"></div></div></div><style type="text/css">.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-layout > div[data-type=layout] .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
+*/
+</style><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    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: function(arg$){
+      var root, context, pubsub;
+      root = arg$.root, context = arg$.context, pubsub = arg$.pubsub;
+      return pubsub.fire('init', {
+        mod: mod({
+          context: context
+        })
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, d3, chart, names;
+    context = arg$.context;
+    d3 = context.d3, chart = context.chart;
+    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"];
+    return {
+      sample: function(){
+        return {
+          raw: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100].map(function(val){
+            var ret;
+            ret = {
+              x: Math.random(),
+              y: Math.random(),
+              name: names[Math.floor(Math.random() * names.length)]
+            };
+            return 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: function(){
+        var tint, this$ = this;
+        this.tint = tint = new chart.utils.tint();
+        ['view', 'yaxis', 'xaxis'].map(function(it){
+          return (this$.g || (this$.g = {}))[it] = d3.select(this$.layout.getGroup(it));
+        });
+        return this.path = d3.select(this.svg).append('path');
+      },
+      parse: function(){},
+      resize: function(){
+        var ref$, w, h, box, this$ = this;
+        ref$ = [this.box.width, this.box.height], w = ref$[0], h = ref$[1];
+        this.extent = {
+          x: d3.extent(this.data.map(function(it){
+            return it.x;
+          })),
+          y: d3.extent(this.data.map(function(it){
+            return it.y;
+          }))
+        };
+        box = this.layout.getBox('view');
+        this.scale = {
+          x: d3.scaleLinear().domain(this.extent.x).range([0, box.width]),
+          y: d3.scaleLinear().domain(this.extent.y).range([0, box.height])
+        };
+        this.pts = this.data.map(function(d){
+          return [this$.scale.x(d.x), this$.scale.y(d.y)];
+        });
+        this.delaunay = d3.Delaunay.from(this.pts);
+        this.voronoi = this.delaunay.voronoi([0, 0, box.width, box.height]);
+        return this.cells = this.pts.map(function(point, i){
+          var x, y, polygon, centroid, ref$, cx, cy, area, angle;
+          x = point[0], y = point[1];
+          polygon = this$.voronoi.cellPolygon(i);
+          ref$ = centroid = d3.polygonCentroid(polygon), cx = ref$[0], cy = ref$[1];
+          area = -d3.polygonArea(polygon);
+          angle = (Math.round(Math.atan2(cy - y, cx - x) / Math.PI * 2) + 4) % 4;
+          return {
+            point: point,
+            polygon: polygon,
+            centroid: centroid,
+            area: area,
+            angle: angle
+          };
+        });
+      },
+      render: function(){
+        var scale, x$, y$;
+        scale = this.scale;
+        x$ = this.g.view.selectAll('circle.data').data(this.data);
+        x$.exit().remove();
+        x$.enter().append('circle').attr('class', 'data').attr('cx', function(d, i){
+          return scale.x(d.x);
+        }).attr('cy', function(d, i){
+          return scale.y(d.y);
+        }).attr('r', 3).attr('fill', '#000');
+        y$ = this.g.view.selectAll('text').data(this.data);
+        y$.exit().remove();
+        y$.enter().append('text').text(function(d, i){
+          return d.name;
+        }).attr('x', function(d, i){
+          if (d.nb) {
+            return d.nb.x;
+          } else {
+            return scale.x(d.x);
+          }
+        }).attr('y', function(d, i){
+          if (d.nb) {
+            return d.nb.y;
+          } else {
+            return scale.y(d.y);
+          }
+        }).attr('text-anchor', 'middle').attr('dominant-baseline', 'middle');
+        this.g.view.selectAll('text').data(this.data).attr('x', function(d, i){
+          if (d.nb) {
+            return d.nb.x;
+          } else {
+            return scale.x(d.x);
+          }
+        }).attr('y', function(d, i){
+          if (d.nb) {
+            return d.nb.y;
+          } else {
+            return scale.y(d.y) - 20;
+          }
+        }).attr('opacity', function(d, i){
+          if (d.nb) {
+            if (d.nb.show) {
+              return 1;
+            } else {
+              return 0;
+            }
+          } else {
+            return 1;
+          }
+        });
+        return this.path.attr('d', this.voronoi.render()).attr('stroke', '#000').attr('transform', this.g.view.node().getAttribute('transform'));
+      },
+      tick: function(){
+        var scale, rbox, i$, to$, i, d, ref$, r, j$, k$, j, a, b, data;
+        scale = this.scale;
+        this.g.view.selectAll('text').each(function(d, i){
+          return d.box = this.getBoundingClientRect();
+        });
+        rbox = this.layout.getBox('view');
+        for (i$ = 0, to$ = this.data.length; i$ < to$; ++i$) {
+          i = i$;
+          d = this.data[i].box;
+          if (!this.data[i].nb) {
+            this.data[i].nb = {
+              x: scale.x(this.data[i].x),
+              y: scale.y(this.data[i].y) - 20
+            };
+          }
+          ref$ = this.data[i].nb;
+          ref$.width = d.width;
+          ref$.height = d.height;
+          ref$.show = true;
+        }
+        for (i$ = 20; i$ < 200; i$ += 20) {
+          r = i$;
+          for (j$ = 0, to$ = this.data.length; j$ < to$; ++j$) {
+            i = j$;
+            for (k$ = 0; k$ < i; ++k$) {
+              j = k$;
+              ref$ = [this.data[i].nb, this.data[j].nb], a = ref$[0], b = ref$[1];
+              if (((a.x >= b.x && a.x <= b.x + b.width) || (a.x + a.width >= b.x && a.x + a.width <= b.x + b.width)) && ((a.y >= b.y && a.y <= b.y + b.height) || (a.y + a.height >= b.y && a.y + a.height <= b.y + b.height))) {
+                d = Math.random() * Math.PI * 2;
+                data = this.data[i];
+                ref$ = data.nb;
+                ref$.x = scale.x(data.x) + Math.cos(d) * r;
+                ref$.y = scale.y(data.y) + Math.sin(d) * r;
+              }
+            }
+          }
+        }
+        for (i$ = 0, to$ = this.data.length; i$ < to$; ++i$) {
+          i = i$;
+          for (j$ = 0; j$ < i; ++j$) {
+            j = j$;
+            ref$ = [this.data[i].nb, this.data[j].nb], a = ref$[0], b = ref$[1];
+            if (((a.x >= b.x && a.x <= b.x + b.width) || (a.x + a.width >= b.x && a.x + a.width <= b.x + b.width)) && ((a.y >= b.y && a.y <= b.y + b.height) || (a.y + a.height >= b.y && a.y + a.height <= b.y + b.height))) {
+              this.data[i].nb.show = false;
+            }
+          }
+        }
+        return this.render();
+      }
+    };
+  };
+  return blockFactory;
+});</script></div>

package/web/static/block/sheet/0.0.1/index.html

@@ -0,0 +1,103 @@
+<div><div plug="layout"></div><style type="text/css"></style><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    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: function(arg$){
+      var root, context, t, pubsub;
+      root = arg$.root, context = arg$.context, t = arg$.t, pubsub = arg$.pubsub;
+      return pubsub.fire('init', {
+        mod: mod({
+          context: context,
+          t: t
+        }),
+        prepareSvg: false,
+        layout: false
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, t, chart, sheet;
+    context = arg$.context, t = arg$.t;
+    chart = context.chart, sheet = context.sheet;
+    return {
+      sample: function(){
+        return {
+          raw: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map(function(val){
+            return Object.fromEntries([1, 2, 3, 4, 5].map(function(it){
+              return ["col" + it, (Math.random() * 100).toFixed(2)];
+            }));
+          }),
+          binding: {
+            column: [1, 2, 3, 4, 5].map(function(it){
+              return {
+                key: "col" + it
+              };
+            })
+          }
+        };
+      },
+      config: {},
+      dimension: {
+        column: {
+          type: 'NCOR',
+          multiple: true,
+          name: 'column'
+        }
+      },
+      init: function(){
+        var this$ = this;
+        this.sheet = new sheet({
+          root: this.root.querySelector('[plug=layout]'),
+          frozen: {
+            row: 1
+          },
+          editing: false,
+          idx: {
+            row: true,
+            col: true
+          }
+        });
+        this.data = [this.binding.column.map(function(it){
+          return it.name || it.key;
+        })].concat(this.raw.map(function(r){
+          return this$.binding.column.map(function(c){
+            return r[c.key];
+          });
+        }));
+        return this.sheet.data(this.data);
+      },
+      filter: function(filters, internal){
+        internal == null && (internal = false);
+      },
+      parse: function(){
+        var head;
+        head = this.binding.column.map(function(it){
+          return it.name || it.key;
+        });
+        this.parsed = [head].concat(this.data.map(function(it){
+          return it.column;
+        }));
+        return this.sheet.data(this.parsed);
+      },
+      resize: function(){},
+      render: function(){}
+    };
+  };
+  return blockFactory;
+});</script></div>

package/web/static/block/table/0.0.1/index.html

@@ -0,0 +1,73 @@
+<div style="height:100%"><plug name="layout"></plug><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory;
+  blockFactory = {
+    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: function(arg$){
+      var root, context, pubsub, gridjs;
+      root = arg$.root, context = arg$.context, pubsub = arg$.pubsub;
+      gridjs = context.gridjs;
+      return pubsub.fire('init', {
+        layout: false,
+        prepareSvg: false,
+        mod: {
+          init: function(){
+            var grid;
+            this.grid = grid = new gridjs.Grid({
+              columns: [' ', '  ', '   ', '    ', '      '],
+              height: this.root.getBoundingClientRect().height + "px",
+              fixedHeader: true,
+              sort: true,
+              search: false,
+              resizable: true,
+              data: [].concat([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(){
+                return [];
+              }))
+            });
+            return grid.render(this.root);
+          },
+          parse: function(){
+            var head, res$, k, raw;
+            res$ = [];
+            for (k in this.raw[0] || {}) {
+              res$.push(k);
+            }
+            head = res$;
+            head.length;
+            raw = this.raw;
+            console.log(raw);
+            return;
+            return this.grid.updateConfig({
+              columns: raw[0],
+              data: raw.slice(1).concat((function(){
+                var i$, to$, ref$, results$ = [];
+                for (i$ = 0, to$ = (ref$ = 20 - raw.length) > 0 ? ref$ : 0; i$ <= to$; ++i$) {
+                  results$.push(i$);
+                }
+                return results$;
+              }()).map(function(){
+                return [];
+              }))
+            }).forceRender();
+          }
+        }
+      });
+    }
+  };
+  return blockFactory;
+});</script></div>

package/web/static/block/taiwantown/0.0.1/index.html

@@ -0,0 +1,210 @@
+<div><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    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: function(arg$){
+      var root, context, pubsub;
+      root = arg$.root, context = arg$.context, pubsub = arg$.pubsub;
+      return pubsub.fire('init', {
+        mod: mod({
+          context: context
+        })
+      }).then(function(it){
+        return it[0];
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, d3, forceBoundary, ldColor, repeatString$, pdmaptw, counties, towns;
+    context = arg$.context;
+    d3 = context.d3, forceBoundary = context.forceBoundary, ldColor = context.ldColor, repeatString$ = context.repeatString$, pdmaptw = context.pdmaptw, counties = context.counties, towns = context.towns;
+    return {
+      sample: function(){
+        var val;
+        val = {
+          counties: counties.map(function(d, i){
+            return {
+              val: Math.random(),
+              county: d
+            };
+          }),
+          towns: towns.map(function(d, i){
+            return {
+              val: Math.random(),
+              town: d
+            };
+          })
+        };
+        return {
+          raw: val.towns,
+          binding: {
+            color: {
+              key: 'val'
+            },
+            name: {
+              key: 'town'
+            }
+          }
+        };
+      },
+      config: {},
+      dimension: {
+        name: {
+          type: 'N',
+          name: "國家"
+        },
+        color: {
+          type: 'R',
+          name: "顏色"
+        }
+      },
+      init: function(){
+        var this$ = this;
+        this.obj = pdmaptw.create({
+          root: this.svg,
+          type: 'town',
+          baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
+        });
+        return this.obj.init().then(function(){
+          return this$.obj.fit();
+        });
+      },
+      parse: function(){
+        var this$ = this;
+        return d3.select(this.svg).selectAll('path').each(function(d, i){
+          return d.data = this$.data.filter(function(it){
+            return it.name === d.properties.name;
+          })[0] || {};
+        });
+      },
+      resize: function(){},
+      render: function(){
+        var this$ = this;
+        this.color = d3.interpolateTurbo;
+        if (this.cfg != null && this.cfg.palette) {
+          this.color = d3.interpolateDiscrete(this.cfg.palette.colors.map(function(it){
+            return ldColor.web(it.value || it);
+          }));
+        }
+        return d3.select(this.svg).selectAll('path').transition().duration(350).attr('fill', function(d, i){
+          return this$.color(d.data.color);
+        });
+      }
+    };
+  };
+  return blockFactory;
+});</script></div><div><script type="@plotdb/block">({
+  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: function(arg$){
+    var root, context, counties, towns, c;
+    root = arg$.root, context = arg$.context;
+    counties = context.counties.map(function(d, i){
+      return {
+        val: Math.random(),
+        county: d
+      };
+    });
+    towns = context.towns.map(function(d, i){
+      return {
+        val: Math.random(),
+        town: d
+      };
+    });
+    c = new chart({
+      root: root,
+      raw: towns,
+      mod: this.mod({
+        context: context
+      }),
+      binding: {
+        color: {
+          name: 'val'
+        },
+        name: {
+          name: 'town'
+        }
+      }
+    });
+    c.init().then(function(){
+      return c.render();
+    });
+    return this.c = c;
+  },
+  'interface': function(){
+    return this.c;
+  },
+  mod: function(arg$){
+    var context;
+    context = arg$.context;
+    return {
+      init: function(){
+        var this$ = this;
+        this.obj = context.pdmaptw.create({
+          root: this.svg,
+          type: 'town',
+          baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
+        });
+        return this.obj.init().then(function(){
+          return this$.obj.fit();
+        });
+      },
+      parse: function(){
+        var this$ = this;
+        return d3.select(this.svg).selectAll('path').each(function(d, i){
+          return d.data = this$.data.filter(function(it){
+            return it.name === d.properties.name;
+          })[0] || {};
+        });
+      },
+      resize: function(){},
+      render: function(){
+        var this$ = this;
+        this.color = d3.interpolateTurbo;
+        if (config.pal) {
+          this.color = d3.interpolateDiscrete(config.pal);
+        }
+        return d3.select(this.svg).selectAll('path').transition().duration(350).attr('fill', function(d, i){
+          return this$.color(d.data.color);
+        });
+      }
+    };
+  }
+});</script></div>