@plotdb/chart 0.0.2 → 1.0.3

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

@@ -1,358 +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">(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: []
-    },
-    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 + ")";
-        });
-      }
-    };
-  };
-  return blockFactory;
-});
-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,149 +0,0 @@
-<div><script type="@plotdb/block">(function(it){
-  return it();
-})(function(){
-  var blockFactory, mod;
-  blockFactory = {
-    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);
-      }
-    };
-  };
-  return blockFactory;
-});</script></div>