@plotdb/chart 1.0.1 → 1.0.2

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

@@ -1,353 +0,0 @@
-<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="pdl-cell" data-name="legend"></div></div><div data-type="render"></div></div><div data-name="tip"><div ld="name"></div><div ld="value1"></div><div ld="value2"></div></div></div><style type="text/css">/*.pdl-cell { width: 100%; height: 100% }*/
-.pdl-layout > div[data-type=layout] {
-  display: grid;
-  grid-template-columns: 1fr fit-content(10em);
-}
-.pdl-layout > div[data-type=layout] > .pdl-cell[data-name=view] {
-  grid-area: 1/1;
-}
-.pdl-layout > div[data-type=layout] > .pdl-cell[data-name=legend] {
-  grid-column: 2;
-  grid-row: 1;
-  padding: 0 0.5em 0 0.5em;
-}
-[data-name=tip] {
-  padding: 0.4em 0.5em;
-  background: #13171a;
-  color: #fff;
-  border-radius: 3px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-  line-height: 1.2em;
-  font-size: 0.9em;
-  max-width: 10em;
-  word-break: break-all;
-}
-[data-name=tip] [ld=name] {
-  font-size: 0.85em;
-}
-[data-name=tip] [ld=value1],
-[data-name=tip] [ld=value2] {
-  font-weight: bold;
-  font-size: 1.1em;
-  line-height: 1.2em;
-}
-</style><script type="@plotdb/block">var mod;
-module.exports = {
-  pkg: {
-    name: 'pie-bubble',
-    version: '0.0.1',
-    extend: {
-      name: "base",
-      version: "0.0.1"
-    },
-    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"
-      }
-    },
-    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 '';
-            }
-          }
-        },
-        accessor: function(arg$){
-          var evt, data, unit, fmt;
-          evt = arg$.evt;
-          if (!(evt.target && (data = d3.select(evt.target).datum()))) {
-            return null;
-          }
-          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();
-        }
-      });
-      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
-        }
-      });
-      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;
-        }
-        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.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 + ")";
-      });
-    }
-  };
-};
-function import$(obj, src){
-  var own = {}.hasOwnProperty;
-  for (var key in src) if (own.call(src, key)) obj[key] = src[key];
-  return obj;
-}</script></div>

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

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