@plotdb/chart 0.0.3 → 2.0.0

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

@@ -1,281 +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><style type="text/css">.pdl-layout > div[data-type=layout] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.pdl-layout > div[data-type=layout] > [data-name=view] {
-  height: 100%;
-  margin-right: 1em;
-}
-.pdl-layout > div[data-type=layout] > [data-name=legend] {
-  min-width: 6em;
-}
-</style><script type="@plotdb/block">(function(it){
-  return it();
-})(function(){
-  var blockFactory, mod;
-  blockFactory = {
-    pkg: {
-      name: 'pie',
-      version: '0.0.1',
-      extend: {
-        name: "base",
-        version: "0.0.1"
-      },
-      dependencies: [],
-      i18n: {
-        "zh-TW": {
-          value: "數值",
-          name: "名稱",
-          other: "其它"
-        }
-      }
-    },
-    init: function(arg$){
-      var root, context, pubsub, t;
-      root = arg$.root, context = arg$.context, pubsub = arg$.pubsub, t = arg$.t;
-      return pubsub.fire('init', {
-        mod: mod({
-          context: context,
-          t: t
-        })
-      });
-    }
-  };
-  mod = function(arg$){
-    var context, t, chart, d3;
-    context = arg$.context, t = arg$.t;
-    chart = context.chart, d3 = context.d3;
-    return {
-      sample: function(){
-        return {
-          raw: [1, 2, 3, 4, 5].map(function(val){
-            return {
-              val: (10 * Math.random()).toFixed(2),
-              name: val
-            };
-          }),
-          binding: {
-            name: {
-              key: 'name'
-            },
-            value: {
-              key: 'val'
-            }
-          }
-        };
-      },
-      config: {},
-      dimension: {
-        value: {
-          type: 'R',
-          name: "value",
-          priority: 20
-        },
-        name: {
-          type: 'NO',
-          name: "name",
-          priority: 10
-        }
-      },
-      init: function(){
-        var tint, this$ = this;
-        this.g = Object.fromEntries(['view', 'legend'].map(function(it){
-          return [it, d3.select(this$.layout.getGroup(it)).append('g')];
-        }));
-        this.tint = tint = new chart.utils.tint();
-        this.tip = new chart.utils.tip({
-          root: this.root,
-          accessor: function(arg$){
-            var evt, data, v;
-            evt = arg$.evt;
-            if (!(evt.target && (data = d3.select(evt.target).datum()))) {
-              return null;
-            }
-            v = isNaN(data.value)
-              ? '-'
-              : data.value.toFixed(2) + "" + (this$.binding.value.unit || '');
-            return {
-              name: data.name,
-              value: v
-            };
-          },
-          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.text));
-          },
-          cfg: {
-            selectable: true
-          }
-        });
-        this.legend.on('select', function(){
-          this$.bind();
-          this$.resize();
-          return this$.render();
-        });
-        this.arc = d3.arc().innerRadius(0).outerRadius(100).startAngle(0).endAngle(Math.PI / 2);
-        return this.total = {};
-      },
-      destroy: function(){
-        return this.tip.destroy();
-      },
-      parse: function(){
-        var other, ref$, total, sum, i$, to$, idx;
-        this.tint.reset();
-        this.parsed = this.data.map(function(it){
-          var ret;
-          ret = import$({}, it);
-          if (isNaN(ret.value)) {
-            ret.value = 0;
-          }
-          return ret;
-        });
-        this.parsed.sort(function(a, b){
-          return b.value - a.value;
-        });
-        if (this.cfg.collapse != null && this.cfg.collapse.enabled) {
-          if (this.cfg.collapse.method === 'count') {
-            other = this.parsed.splice(this.cfg.collapse.threshold || 7);
-            if (other.length) {
-              this.parsed.push({
-                name: t("other"),
-                value: other.reduce(function(a, b){
-                  return a + b.value;
-                }, 0)
-              });
-            }
-          } else {
-            ref$ = [
-              this.parsed.reduce(function(a, b){
-                return a + b.value;
-              }, 0), 0
-            ], total = ref$[0], sum = ref$[1];
-            for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
-              idx = i$;
-              sum += this.parsed[idx].value;
-              if (sum / total > (this.cfg.collapse.threshold || 0.75)) {
-                break;
-              }
-            }
-            other = this.parsed.splice(idx + 1);
-            if (other.length) {
-              this.parsed.push({
-                name: t("other"),
-                value: other.reduce(function(a, b){
-                  return a + b.value;
-                }, 0)
-              });
-            }
-          }
-        }
-        return this.legend.data(this.parsed.map(function(it){
-          return {
-            text: it.name,
-            key: it.name
-          };
-        }));
-      },
-      bind: function(){
-        var offset, i$, to$, i, obj, that, this$ = this, results$ = [];
-        this.parsed.map(function(it){
-          return it.picked = this$.legend.isSelected(it.name);
-        });
-        this.total.old = this.total.cur;
-        this.total.cur = this.parsed.reduce(function(a, b){
-          return a + (b.picked ? b.value : 0);
-        }, 0) || 1;
-        if (!this.total.old) {
-          this.total.old = this.total.cur;
-        }
-        offset = 0;
-        for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
-          i = i$;
-          obj = this.parsed[i];
-          if (!obj.old) {
-            obj.old = {
-              s: (that = this.parsed[i - 1]) ? that.old.e : 0,
-              e: 0
-            };
-          }
-          if (obj.cur) {
-            obj.old = obj.cur;
-          }
-          obj.cur = {
-            s: offset,
-            e: offset + (obj.picked ? obj.value : 0)
-          };
-          obj.angle = {
-            old: {
-              s: 2 * Math.PI * obj.old.s / this.total.old,
-              e: 2 * Math.PI * obj.old.e / this.total.old
-            },
-            cur: {
-              s: 2 * Math.PI * obj.cur.s / this.total.cur,
-              e: 2 * Math.PI * obj.cur.e / this.total.cur
-            }
-          };
-          if (obj.picked) {
-            results$.push(offset += obj.value);
-          }
-        }
-        return results$;
-      },
-      resize: function(){
-        var box, ref$, w, h, size;
-        this.layout.update(false);
-        box = this.layout.getBox('view');
-        this.layout.getNode('view').style.width = box.height + "px";
-        this.layout.update(false);
-        box = this.layout.getBox('view');
-        ref$ = [box.width, box.height], w = ref$[0], h = ref$[1];
-        size = Math.min(w, h);
-        return this.arc.innerRadius((this.cfg.donutPercent || 0.7) * size / 2).outerRadius(size / 2);
-      },
-      render: function(){
-        var tint, interpolateArc, box, x$, this$ = this;
-        tint = this.tint;
-        interpolateArc = function(a1, a2){
-          return function(t){
-            var ref$, s, e;
-            ref$ = ['s', 'e'].map(function(i){
-              return (a2[i] - a1[i]) * t + a1[i];
-            }), s = ref$[0], e = ref$[1];
-            this$.arc.startAngle(s).endAngle(e);
-            return this$.arc();
-          };
-        };
-        if (this.cfg != null && this.cfg.palette) {
-          this.tint.set(this.cfg.palette.colors.map(function(it){
-            return it.value || it;
-          }));
-        }
-        box = this.layout.getBox('view');
-        this.g.view.attr('transform', "translate(" + box.width / 2 + "," + box.height / 2 + ")");
-        x$ = this.g.view.selectAll('path.data').data(this.parsed, function(it){
-          return it.name || it._idx;
-        });
-        x$.exit().remove();
-        x$.enter().append('path').attr('class', 'data');
-        this.g.view.selectAll('path.data').attr('fill', function(d, i){
-          return this$.tint.get(d.name || d._idx);
-        }).transition().duration(350).attrTween('d', function(d, i){
-          return interpolateArc(d.angle.old, d.angle.cur);
-        });
-        return this.legend.render();
-      }
-    };
-  };
-  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/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>