@plotdb/chart 0.0.2

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

@@ -0,0 +1,358 @@
+<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

@@ -0,0 +1,149 @@
+<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>