@plotdb/chart 0.0.3 → 1.0.1

package/web/static/block/pie-bubble/0.0.1/index.html

@@ -31,326 +31,321 @@
   font-size: 1.1em;
   line-height: 1.2em;
 }
-</style><script type="@plotdb/block">(function(it){
-  return it();
-})(function(){
-  var blockFactory, mod;
-  blockFactory = {
-    pkg: {
-      name: 'pie-bubble',
-      version: '0.0.1',
-      extend: {
-        name: "base",
-        version: "0.0.1"
-      },
-      dependencies: []
+</style><script type="@plotdb/block">var mod;
+module.exports = {
+  pkg: {
+    name: 'pie-bubble',
+    version: '0.0.1',
+    extend: {
+      name: "base",
+      version: "0.0.1"
     },
-    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, chart, ref$;
-    context = arg$.context;
-    d3 = context.d3, forceBoundary = context.forceBoundary, ldcolor = context.ldcolor, chart = context.chart;
-    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].map(function(val){
-            return {
-              name: "name" + val,
-              val1: Math.random() * 100,
-              val2: Math.random() * 100
-            };
-          }),
-          binding: {
-            name: {
-              key: 'name'
-            },
-            left: {
-              key: 'val1'
-            },
-            right: {
-              key: 'val2'
-            }
+    dependencies: []
+  },
+  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, chart, ref$;
+  context = arg$.context;
+  d3 = context.d3, forceBoundary = context.forceBoundary, ldcolor = context.ldcolor, chart = context.chart;
+  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].map(function(val){
+          return {
+            name: "name" + val,
+            val1: Math.random() * 100,
+            val2: Math.random() * 100
+          };
+        }),
+        binding: {
+          name: {
+            key: 'name'
+          },
+          left: {
+            key: 'val1'
+          },
+          right: {
+            key: 'val2'
           }
-        };
-      },
-      config: (ref$ = import$({}, chart.utils.config.preset['default']), ref$.color = {
-        left: {
-          type: 'color',
-          'default': '#f90'
-        },
-        right: {
-          type: 'color',
-          'default': '#09f'
-        }
-      }, ref$),
-      dimension: {
-        name: {
-          type: 'N',
-          name: "name"
-        },
-        left: {
-          type: 'R',
-          name: "size in left"
-        },
-        right: {
-          type: 'R',
-          name: "size in right"
         }
+      };
+    },
+    config: (ref$ = import$({}, chart.utils.config.preset['default']), ref$.color = {
+      left: {
+        type: 'color',
+        'default': '#f90'
+      },
+      right: {
+        type: 'color',
+        'default': '#09f'
+      }
+    }, ref$),
+    dimension: {
+      name: {
+        type: 'N',
+        name: "name"
       },
-      init: function(){
-        var tint, this$ = this;
-        this.tint = tint = new chart.utils.tint();
-        this.valid = [];
-        this.g = Object.fromEntries(['view', 'legend'].map(function(it){
-          return [it, d3.select(this$.layout.getGroup(it))];
-        }));
-        this.tip = new chart.utils.tip({
-          root: this.root,
-          node: this.root.querySelector('[data-name=tip]'),
-          view: {
-            name: function(arg$){
-              var ctx;
-              ctx = arg$.ctx;
-              if (ctx) {
-                return ctx.name;
-              } else {
-                return '';
-              }
-            },
-            value1: function(arg$){
-              var ctx;
-              ctx = arg$.ctx;
-              if (ctx) {
-                return ctx.value1;
-              } else {
-                return '';
-              }
-            },
-            value2: function(arg$){
-              var ctx;
-              ctx = arg$.ctx;
-              if (ctx) {
-                return ctx.value2;
-              } else {
-                return '';
-              }
+      left: {
+        type: 'R',
+        name: "size in left"
+      },
+      right: {
+        type: 'R',
+        name: "size in right"
+      }
+    },
+    init: function(){
+      var tint, this$ = this;
+      this.tint = tint = new chart.utils.tint();
+      this.valid = [];
+      this.g = Object.fromEntries(['view', 'legend'].map(function(it){
+        return [it, d3.select(this$.layout.getGroup(it))];
+      }));
+      this.tip = new chart.utils.tip({
+        root: this.root,
+        node: this.root.querySelector('[data-name=tip]'),
+        view: {
+          name: function(arg$){
+            var ctx;
+            ctx = arg$.ctx;
+            if (ctx) {
+              return ctx.name;
+            } else {
+              return '';
             }
           },
-          accessor: function(arg$){
-            var evt, data, unit, fmt;
-            evt = arg$.evt;
-            if (!(evt.target && (data = d3.select(evt.target).datum()))) {
-              return null;
+          value1: function(arg$){
+            var ctx;
+            ctx = arg$.ctx;
+            if (ctx) {
+              return ctx.value1;
+            } else {
+              return '';
             }
-            unit = this$.binding.left.unit || this$.binding.right.unit || '';
-            fmt = d3.format('.3s');
-            return {
-              name: data.name || '',
-              value1: this$.legendData[0].text + ": " + fmt(data.L) + unit,
-              value2: this$.legendData[1].text + ": " + fmt(data.R) + unit
-            };
           },
-          range: function(){
-            return this$.layout.getNode('view').getBoundingClientRect();
+          value2: function(arg$){
+            var ctx;
+            ctx = arg$.ctx;
+            if (ctx) {
+              return ctx.value2;
+            } else {
+              return '';
+            }
           }
-        });
-        this.legend = new chart.utils.legend({
-          layout: this.layout,
-          name: 'legend',
-          root: this.root,
-          shape: function(d){
-            return d3.select(this).attr('fill', tint.get(d.key));
-          },
-          cfg: {
-            selectable: true
+        },
+        accessor: function(arg$){
+          var evt, data, unit, fmt;
+          evt = arg$.evt;
+          if (!(evt.target && (data = d3.select(evt.target).datum()))) {
+            return null;
           }
-        });
-        return this.legend.on('select', function(){
-          this$.bind();
-          this$.resize();
-          return this$.render();
-        });
-      },
-      destroy: function(){
-        return this.tip.destroy();
-      },
-      parse: function(){
-        var this$ = this;
-        this.valid = this.data.filter(function(it){
-          return !isNaN(it.left + it.right);
-        });
-        this.legendData = ['left', 'right'].map(function(it){
-          var v;
-          v = this$.binding[it] ? this$.binding[it].name || this$.binding[it].key : it;
+          unit = this$.binding.left.unit || this$.binding.right.unit || '';
+          fmt = d3.format('.3s');
           return {
-            key: v,
-            text: v
+            name: data.name || '',
+            value1: this$.legendData[0].text + ": " + fmt(data.L) + unit,
+            value2: this$.legendData[1].text + ": " + fmt(data.R) + unit
           };
-        });
-        return this.legend.data(this.legendData);
-      },
-      resize: function(){
-        var ref$, vbox, rng, this$ = this;
-        this.sim = null;
-        this.start();
-        (ref$ = this.cfg).tip || (ref$.tip = {});
-        (ref$ = this.cfg).color || (ref$.color = {});
-        (ref$ = this.cfg).legend || (ref$.legend = {});
-        this.tip.toggle(((ref$ = this.cfg).tip || (ref$.tip = {})).enabled != null ? this.cfg.tip.enabled : true);
-        if (this.cfg.color.left === this.cfg.color.right) {
-          this.cfg.colorRight = '#09f';
+        },
+        range: function(){
+          return this$.layout.getNode('view').getBoundingClientRect();
         }
-        this.tint.set({
-          colors: [this.cfg.color.left || this.cfg.palette.colors[0] || '#09f', this.cfg.color.right || this.cfg.palette.colors[1] || '#f90'],
-          maps: this.legendData.map(function(it){
-            return it.key;
-          })
-        }, true);
-        this.legend.config((ref$ = this.cfg.legend, ref$.selectable = false, ref$));
-        this.legend.update();
-        this.layout.update(false);
-        this.vbox = vbox = this.layout.getBox('view');
-        rng = d3.randomUniform.source(d3.randomLcg(this.seed))(0, 1);
-        this.valid.map(function(obj){
-          var ref$, L, R, r, sum, rate, x, y;
-          ref$ = [(ref$ = obj.left) > 0 ? ref$ : 0, (ref$ = obj.right) > 0 ? ref$ : 0], L = ref$[0], R = ref$[1];
-          r = sum = L + R;
-          rate = !sum
-            ? 0.5
-            : R / sum;
-          ref$ = [rate * vbox.width, rng() * vbox.height], x = ref$[0], y = ref$[1];
-          obj.r = r;
-          obj.sum = sum;
-          obj.rate = rate;
-          obj.L = L;
-          obj.R = R;
-          obj.cx = x;
-          if (!(obj.x != null)) {
-            obj.x = x;
-            obj.y = y;
-          }
-          if (!(obj._x != null)) {
-            obj._x = x;
-            obj._y = y;
-          }
-          return obj;
-        });
-        this.rate = 0.9 * Math.PI / (2 * Math.sqrt(3)) * Math.sqrt(vbox.width * vbox.height / this.valid.map(function(it){
-          return Math.PI * Math.pow(it.r, 2);
-        }).reduce(function(a, b){
-          return a + b;
-        }, 0));
-        return this.valid.map(function(d, i){
-          var ref$;
-          return d.rr = (ref$ = d.r * this$.rate) > 2 ? ref$ : 2;
-        });
-      },
-      render: function(){
-        var binding, tint, rate, legendData, x$, y$;
-        binding = this.binding, tint = this.tint, rate = this.rate, legendData = this.legendData;
-        x$ = this.g.view.selectAll('g.pie').data(this.valid);
-        x$.exit().remove();
-        x$.enter().append('g').attr('class', "pie data").each(function(){
-          d3.select(this).append('path');
-          return d3.select(this).append('path');
-        });
-        this.g.view.selectAll('g.pie').each(function(d, i){
-          d3.select(this).attr('transform', "translate(" + d.x + " " + d.y + ")");
-          return d3.select(this).selectAll('path').attr('fill', function(e, j){
-            return tint.get(legendData[j].key);
-          }).attr('d', function(e, j){
-            var r, rx, ry1, ry2, f;
-            r = d.rr;
-            rx = r * Math.cos(d.rate * Math.PI);
-            ry1 = -r * Math.sin(d.rate * Math.PI);
-            ry2 = r * Math.sin(d.rate * Math.PI);
-            f = d.rate > 0.5
-              ? j
-              : 1 - j;
-            return ["M", rx, ry1, "A", r, r, 0, f, j, rx, ry2, "L", 0, 0, "Z"].join(" ");
-          });
-        });
-        y$ = this.g.view.selectAll('g.label').data(this.valid);
-        y$.exit().remove();
-        y$.enter().append('g').attr('class', 'label').each(function(d, i){
-          var this$ = this;
-          return [0].map(function(){
-            return d3.select(this$).append('text');
-          }).map(function(it){
-            return it.attr('text-anchor', 'middle').attr('dominant-baseline', 'middle').attr('font-size', '.7em').style('pointer-event', 'none');
-          });
-        });
-        this.g.view.selectAll('g.label').attr('transform', function(d, i){
-          return "translate(" + d.x + "," + d.y + ")";
-        }).each(function(d, i){
-          return d3.select(this).selectAll('text').attr('opacity', d.rr * 2 < (d.sum.toFixed(2) + "").length * 7 ? 0 : 1).text(function(e, i){
-            var ret;
-            ret = d3.format('.3s')(d.sum);
-            if (ret) {
-              ret = ret + "" + (binding.left.unit || binding.right.unir || '');
-            }
-            return ret;
-          });
-        });
-        return this.legend.render();
-      },
-      tick: function(){
-        var pad, kickoff, fc, this$ = this;
-        pad = this.cfg.pad || 5;
-        if (!this.sim) {
-          kickoff = true;
-          this.fc = fc = d3.forceCollide().strength(0.6).iterations(20).radius(function(it){
-            return it.rr;
-          });
-          this.fb = forceBoundary(function(it){
-            return it.rr + pad;
-          }, function(it){
-            return it.rr + pad;
-          }, function(it){
-            return this$.vbox.width - it.rr - pad;
-          }, function(it){
-            return this$.vbox.height - it.rr - pad;
-          }).strength(0.8);
-          this.fy = d3.forceY().strength(0.2);
-          this.fx = d3.forceX().strength(0.2).x(function(it){
-            return it.cx;
-          });
-          this.sim = d3.forceSimulation().force('b', this.fb).force('collide', fc).force('fx', this.fx).force('fy', this.fy);
-          this.sim.stop();
-          this.sim.alpha(0.9);
+      });
+      this.legend = new chart.utils.legend({
+        layout: this.layout,
+        name: 'legend',
+        root: this.root,
+        shape: function(d){
+          return d3.select(this).attr('fill', tint.get(d.key));
+        },
+        cfg: {
+          selectable: true
         }
-        this.fy.y(this.vbox.height / 2);
-        this.sim.nodes(this.valid);
-        this.sim.tick(kickoff ? 10 : 1);
-        if (this.sim.alpha() < 0.01) {
-          this.stop();
+      });
+      return this.legend.on('select', function(){
+        this$.bind();
+        this$.resize();
+        return this$.render();
+      });
+    },
+    destroy: function(){
+      return this.tip.destroy();
+    },
+    parse: function(){
+      var this$ = this;
+      this.valid = this.data.filter(function(it){
+        return !isNaN(it.left + it.right);
+      });
+      this.legendData = ['left', 'right'].map(function(it){
+        var v;
+        v = this$.binding[it] ? this$.binding[it].name || this$.binding[it].key : it;
+        return {
+          key: v,
+          text: v
+        };
+      });
+      return this.legend.data(this.legendData);
+    },
+    resize: function(){
+      var ref$, vbox, rng, this$ = this;
+      this.sim = null;
+      this.start();
+      (ref$ = this.cfg).tip || (ref$.tip = {});
+      (ref$ = this.cfg).color || (ref$.color = {});
+      (ref$ = this.cfg).legend || (ref$.legend = {});
+      this.tip.toggle(((ref$ = this.cfg).tip || (ref$.tip = {})).enabled != null ? this.cfg.tip.enabled : true);
+      if (this.cfg.color.left === this.cfg.color.right) {
+        this.cfg.colorRight = '#09f';
+      }
+      this.tint.set({
+        colors: [this.cfg.color.left || this.cfg.palette.colors[0] || '#09f', this.cfg.color.right || this.cfg.palette.colors[1] || '#f90'],
+        maps: this.legendData.map(function(it){
+          return it.key;
+        })
+      }, true);
+      this.legend.config((ref$ = this.cfg.legend, ref$.selectable = false, ref$));
+      this.legend.update();
+      this.layout.update(false);
+      this.vbox = vbox = this.layout.getBox('view');
+      rng = d3.randomUniform.source(d3.randomLcg(this.seed))(0, 1);
+      this.valid.map(function(obj){
+        var ref$, L, R, r, sum, rate, x, y;
+        ref$ = [(ref$ = obj.left) > 0 ? ref$ : 0, (ref$ = obj.right) > 0 ? ref$ : 0], L = ref$[0], R = ref$[1];
+        r = sum = L + R;
+        rate = !sum
+          ? 0.5
+          : R / sum;
+        ref$ = [rate * vbox.width, rng() * vbox.height], x = ref$[0], y = ref$[1];
+        obj.r = r;
+        obj.sum = sum;
+        obj.rate = rate;
+        obj.L = L;
+        obj.R = R;
+        obj.cx = x;
+        if (!(obj.x != null)) {
+          obj.x = x;
+          obj.y = y;
+        }
+        if (!(obj._x != null)) {
+          obj._x = x;
+          obj._y = y;
         }
-        this.valid.map(function(it){
-          it._x = it._x + (it.x - it._x) * 0.1;
-          return it._y = it._y + (it.y - it._y) * 0.1;
+        return obj;
+      });
+      this.rate = 0.9 * Math.PI / (2 * Math.sqrt(3)) * Math.sqrt(vbox.width * vbox.height / this.valid.map(function(it){
+        return Math.PI * Math.pow(it.r, 2);
+      }).reduce(function(a, b){
+        return a + b;
+      }, 0));
+      return this.valid.map(function(d, i){
+        var ref$;
+        return d.rr = (ref$ = d.r * this$.rate) > 2 ? ref$ : 2;
+      });
+    },
+    render: function(){
+      var binding, tint, rate, legendData, x$, y$;
+      binding = this.binding, tint = this.tint, rate = this.rate, legendData = this.legendData;
+      x$ = this.g.view.selectAll('g.pie').data(this.valid);
+      x$.exit().remove();
+      x$.enter().append('g').attr('class', "pie data").each(function(){
+        d3.select(this).append('path');
+        return d3.select(this).append('path');
+      });
+      this.g.view.selectAll('g.pie').each(function(d, i){
+        d3.select(this).attr('transform', "translate(" + d.x + " " + d.y + ")");
+        return d3.select(this).selectAll('path').attr('fill', function(e, j){
+          return tint.get(legendData[j].key);
+        }).attr('d', function(e, j){
+          var r, rx, ry1, ry2, f;
+          r = d.rr;
+          rx = r * Math.cos(d.rate * Math.PI);
+          ry1 = -r * Math.sin(d.rate * Math.PI);
+          ry2 = r * Math.sin(d.rate * Math.PI);
+          f = d.rate > 0.5
+            ? j
+            : 1 - j;
+          return ["M", rx, ry1, "A", r, r, 0, f, j, rx, ry2, "L", 0, 0, "Z"].join(" ");
         });
-        this.g.view.selectAll('g.label').attr('transform', function(d, i){
-          return "translate(" + d._x + "," + d._y + ")";
+      });
+      y$ = this.g.view.selectAll('g.label').data(this.valid);
+      y$.exit().remove();
+      y$.enter().append('g').attr('class', 'label').each(function(d, i){
+        var this$ = this;
+        return [0].map(function(){
+          return d3.select(this$).append('text');
+        }).map(function(it){
+          return it.attr('text-anchor', 'middle').attr('dominant-baseline', 'middle').attr('font-size', '.7em').style('pointer-event', 'none');
         });
-        return this.g.view.selectAll('g.pie').attr('transform', function(d, i){
-          return "translate(" + d._x + "," + d._y + ")";
+      });
+      this.g.view.selectAll('g.label').attr('transform', function(d, i){
+        return "translate(" + d.x + "," + d.y + ")";
+      }).each(function(d, i){
+        return d3.select(this).selectAll('text').attr('opacity', d.rr * 2 < (d.sum.toFixed(2) + "").length * 7 ? 0 : 1).text(function(e, i){
+          var ret;
+          ret = d3.format('.3s')(d.sum);
+          if (ret) {
+            ret = ret + "" + (binding.left.unit || binding.right.unir || '');
+          }
+          return ret;
         });
+      });
+      return this.legend.render();
+    },
+    tick: function(){
+      var pad, kickoff, fc, this$ = this;
+      pad = this.cfg.pad || 5;
+      if (!this.sim) {
+        kickoff = true;
+        this.fc = fc = d3.forceCollide().strength(0.6).iterations(20).radius(function(it){
+          return it.rr;
+        });
+        this.fb = forceBoundary(function(it){
+          return it.rr + pad;
+        }, function(it){
+          return it.rr + pad;
+        }, function(it){
+          return this$.vbox.width - it.rr - pad;
+        }, function(it){
+          return this$.vbox.height - it.rr - pad;
+        }).strength(0.8);
+        this.fy = d3.forceY().strength(0.2);
+        this.fx = d3.forceX().strength(0.2).x(function(it){
+          return it.cx;
+        });
+        this.sim = d3.forceSimulation().force('b', this.fb).force('collide', fc).force('fx', this.fx).force('fy', this.fy);
+        this.sim.stop();
+        this.sim.alpha(0.9);
+      }
+      this.fy.y(this.vbox.height / 2);
+      this.sim.nodes(this.valid);
+      this.sim.tick(kickoff ? 10 : 1);
+      if (this.sim.alpha() < 0.01) {
+        this.stop();
       }
-    };
+      this.valid.map(function(it){
+        it._x = it._x + (it.x - it._x) * 0.1;
+        return it._y = it._y + (it.y - it._y) * 0.1;
+      });
+      this.g.view.selectAll('g.label').attr('transform', function(d, i){
+        return "translate(" + d._x + "," + d._y + ")";
+      });
+      return this.g.view.selectAll('g.pie').attr('transform', function(d, i){
+        return "translate(" + d._x + "," + d._y + ")";
+      });
+    }
   };
-  return blockFactory;
-});
+};
 function import$(obj, src){
   var own = {}.hasOwnProperty;
   for (var key in src) if (own.call(src, key)) obj[key] = src[key];