@plotdb/chart 0.0.2

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

@@ -0,0 +1,581 @@
+<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="yaxis">&nbsp;</div><div class="pdl-cell" data-name="view"></div><div class="pdl-cell"></div><div class="pdl-cell" data-name="xaxis">&nbsp;</div><div class="pdl-cell" data-name="legend">&nbsp;</div></div><div data-type="render"></div></div></div><style type="text/css">[data-name=xaxis] {
+  font-size: 0.8em;
+}
+[data-name=yaxis] {
+  font-size: 0.8em;
+}
+.pdl-layout > div[data-type=layout] {
+  display: grid;
+  grid-template-columns: fit-content(2em) 1fr fit-content(10em);
+  grid-template-rows: 1fr fit-content(1em);
+/* 0.5em for axis label at the boundary */
+  padding: 0 0.5em;
+}
+.pdl-layout > div[data-type=layout] > .pdl-cell[data-name=legend] {
+  grid-column: 3;
+  grid-row: 1/span 2;
+  padding-left: 1em;
+}
+.pdl-layout.legend-below > div[data-type=layout] {
+  grid-template-columns: 2em 1fr;
+  grid-template-rows: 1fr fit-content(2em) fit-content(3em);
+}
+.pdl-layout.legend-below > div[data-type=layout] .pdl-cell[data-name=legend] {
+  padding-top: 1em;
+  grid-column: 1/span 2;
+  grid-row: 3;
+}
+</style><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    pkg: {
+      name: 'bar',
+      version: '0.0.1',
+      extend: {
+        name: "base",
+        version: "0.0.1"
+      },
+      dependencies: [],
+      i18n: {
+        "zh-TW": {
+          "size": "長度"
+        }
+      }
+    },
+    init: function(arg$){
+      var root, context, t, pubsub;
+      root = arg$.root, context = arg$.context, t = arg$.t, pubsub = arg$.pubsub;
+      return pubsub.fire('init', {
+        mod: mod({
+          context: context,
+          t: t
+        })
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, t, chart, d3, debounce, ref$;
+    context = arg$.context, t = arg$.t;
+    chart = context.chart, d3 = context.d3, debounce = context.debounce;
+    return {
+      sample: function(){
+        return {
+          raw: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(val){
+            var ret, i$, i;
+            ret = {
+              name: val
+            };
+            for (i$ = 1; i$ <= 4; ++i$) {
+              i = i$;
+              ret["val" + i] = Math.random();
+            }
+            return ret;
+          }),
+          binding: {
+            size: [1, 2, 3, 4].map(function(it){
+              return {
+                key: "val" + it,
+                unit: "amount"
+              };
+            }),
+            name: {
+              key: "name"
+            }
+          }
+        };
+      },
+      config: (ref$ = import$({}, chart.utils.config.preset['default']), ref$.sort = {
+        enabled: {
+          type: 'boolean'
+        },
+        dir: {
+          type: 'choice',
+          values: ['asc', 'desc', 'none']
+        }
+      }, ref$.type = {
+        type: 'choice',
+        values: ['bar', 'column'],
+        'default': 'column'
+      }, ref$),
+      dimension: {
+        size: {
+          type: 'R',
+          multiple: true,
+          name: "size"
+        },
+        name: {
+          type: 'NO',
+          name: "name"
+        }
+      },
+      init: function(){
+        var tint, brush, scale, this$ = this;
+        this.tint = tint = new chart.utils.tint();
+        [['multiple', 'stack'], ['percent', false], ['dancing', true]].map(function(arg$){
+          var k, v;
+          k = arg$[0], v = arg$[1];
+          if (!(this$.cfg[k] != null)) {
+            return this$.cfg[k] = v;
+          }
+        });
+        this.svg.addEventListener('click', function(){
+          if (!this$.cfg.dancing || this$.cfg.percent) {
+            return;
+          }
+          this$.alignIdx = ((this$.alignIdx || 0) + 1) % (this$.binding.size.length + 1);
+          this$.resize();
+          return this$.render();
+        });
+        this.brush = d3.brushX();
+        this.g = Object.fromEntries(['view', 'xaxis', 'yaxis', 'legend'].map(function(it){
+          return [it, d3.select(this$.layout.getGroup(it))];
+        }));
+        this.range = "null";
+        brush = debounce(150, function(e){
+          var ref$, range, _range, domain, bandwidth;
+          if (((ref$ = this$.cfg).brush || (ref$.brush = {})).enabled != null && !this$.cfg.brush.enabled) {
+            return;
+          }
+          range = e.selection;
+          if ((_range = JSON.stringify(range)) === this$.range) {
+            return;
+          } else {
+            this$.range = _range;
+          }
+          if (!range) {
+            return this$.filter({
+              name: undefined
+            }, true);
+          } else {
+            domain = this$.scale.x.domain();
+            bandwidth = this$.scale.x.bandwidth();
+            range = range.map(function(it){
+              var ref$, ref1$, ref2$;
+              return (ref$ = (ref2$ = Math.floor(it / bandwidth)) > 0 ? ref2$ : 0) < (ref1$ = domain.length - 1) ? ref$ : ref1$;
+            });
+            range = (function(){
+              var i$, to$, results$ = [];
+              for (i$ = range[0], to$ = range[1]; i$ <= to$; ++i$) {
+                results$.push(i$);
+              }
+              return results$;
+            }()).map(function(it){
+              return domain[it];
+            });
+            return this$.filter({
+              name: {
+                type: 'index',
+                value: range
+              }
+            }, true);
+          }
+        });
+        this.brush.on('end', brush);
+        this.brush.on('brush', brush);
+        this.scale = scale = {};
+        this.yaxis = new chart.utils.axis({
+          layout: this.layout,
+          name: 'yaxis',
+          direction: 'left'
+        });
+        this.xaxis = new chart.utils.axis({
+          layout: this.layout,
+          name: 'xaxis',
+          direction: 'bottom'
+        });
+        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));
+          }
+        });
+      },
+      destroy: function(){
+        if (this.tip) {
+          return this.tip.destroy();
+        }
+      },
+      filter: function(filters, internal){
+        var this$ = this;
+        internal == null && (internal = false);
+        this.render();
+        if (internal) {
+          return;
+        }
+        return this.brush.move(this.g.view, filters.name ? filters.name.map(function(it){
+          return this$.scale.x(it);
+        }) : null);
+      },
+      parse: function(){
+        this.data.map(function(d){
+          return d.size = d.size.map(function(it){
+            if (isNaN(it)) {
+              return 0;
+            } else {
+              return it;
+            }
+          });
+        });
+        return this.alignIdx = undefined;
+      },
+      resize: function(){
+        var alignIdx, ref$, ref1$, delta, max, i, box, maxTick, yticks, v, xticks, i$, w, h, r, this$ = this;
+        this.type = this.cfg.type || 'column';
+        this.legend.config(this.cfg.legend);
+        this.legend.update();
+        this.layout.update(false);
+        this.maxPerGroup = this.binding.size.map(function(d, i){
+          return Math.max.apply(Math, this$.data.map(function(it){
+            return it.size[i];
+          }));
+        });
+        if (this.cfg.alignIdx && !this.alignIdx) {
+          this.alignIdx = this.cfg.alignIdx;
+        }
+        alignIdx = (ref$ = this.cfg.percent
+          ? 0
+          : this.alignIdx || 0) < (ref1$ = this.binding.size.length) ? ref$ : ref1$;
+        this.baseOffset = this.data.map(function(d){
+          return (function(){
+            var i$, to$, results$ = [];
+            for (i$ = 0, to$ = alignIdx; i$ < to$; ++i$) {
+              results$.push(i$);
+            }
+            return results$;
+          }()).reduce(function(a, b){
+            return a + d.size[b];
+          }, 0) || 0;
+        });
+        this.delta = delta = Math.max.apply(Math, this.baseOffset);
+        if (this.cfg.multiple === 'stack') {
+          if (this.cfg.percent) {
+            max = 1;
+          } else {
+            max = Math.max.apply(Math, this.data.map(function(d){
+              return (function(){
+                var i$, to$, results$ = [];
+                for (i$ = alignIdx, to$ = d.size.length; i$ < to$; ++i$) {
+                  results$.push(i$);
+                }
+                return results$;
+              }()).reduce(function(a, b){
+                return a + d.size[b];
+              }, 0);
+            })) + (delta || 0);
+          }
+        } else if (this.cfg.multiple === 'group') {
+          max = Math.max.apply(Math, this.data.map(function(d){
+            return Math.max.apply(Math, d.size);
+          }));
+        } else if (this.cfg.multiple === 'split') {
+          max = this.maxPerGroup.reduce(function(a, b){
+            return a + b;
+          }, 0);
+        }
+        this.order = this.data.map(function(d, i){
+          return {
+            key: d._idx,
+            idx: i,
+            name: d.name
+          };
+        });
+        this.data.map(function(d, i){
+          return d.sum = d.size.reduce(function(a, b){
+            return a + b;
+          }, 0);
+        });
+        if (((ref$ = this.cfg).sort || (ref$.sort = {})).enabled) {
+          this.order.sort(function(a, b){
+            return (this$.cfg.sort.dir === 'asc'
+              ? 1
+              : -1) * (this$.data[a.idx].sum - this$.data[b.idx].sum);
+          });
+        }
+        console.log(this.cfg);
+        if (this.cfg.palette) {
+          this.tint.set(this.cfg.palette.colors.map(function(it){
+            return it.value || it;
+          }));
+        }
+        this.legend.data((function(){
+          var i$, results$ = [];
+          for (i$ = this.binding.size.length - 1; i$ >= 0; --i$) {
+            i = i$;
+            results$.push({
+              key: i,
+              text: this.binding.size[i].name || this.binding.size[i].key
+            });
+          }
+          return results$;
+        }.call(this)));
+        this.layout.update(false);
+        box = this.layout.getBox('view');
+        if (this.type === 'column') {
+          ref$ = this.scale;
+          ref$.y = d3.scaleLinear().domain([0, max]).range([box.height, 0]);
+          ref$.x = d3.scaleBand().domain(this.order.map(function(it){
+            return it.name || it.key;
+          })).range([0, box.width]);
+          maxTick = (ref$ = Math.ceil(this.layout.getBox('yaxis').height / 40)) > 2 ? ref$ : 2;
+          yticks = this.cfg.bump
+            ? (function(){
+              var i$, to$, ref$, results$ = [];
+              for (i$ = 1, to$ = (ref$ = this.parsed.length || 1) > 1 ? ref$ : 1; i$ <= to$; ++i$) {
+                results$.push(i$);
+              }
+              return results$;
+            }.call(this))
+            : this.scale.y.ticks((ref$ = ((ref1$ = this.cfg).yaxis || (ref1$.yaxis = {})).tickCount || 4) < maxTick ? ref$ : maxTick);
+          this.yaxis.config(this.cfg.yaxis);
+          v = this.binding.size[0] || {};
+          if (this.binding.size.length > 1) {
+            this.yaxis.caption(v.unit ? v.unit + "" : '');
+          } else {
+            this.yaxis.caption((v.name || v.key || '') + (v.unit ? "(" + v.unit + ")" : ''));
+          }
+          this.yaxis.ticks(yticks);
+          this.yaxis.scale(this.scale.y);
+          this.xaxis.config((ref$ = this.cfg).xaxis || (ref$.xaxis = {}));
+          this.xaxis.ticks(this.data.map(function(it){
+            return it.name;
+          }));
+          this.xaxis.scale(this.scale.x);
+          this.xaxis.caption((this.binding.name.name || this.binding.name.key) + (this.binding.name.unit ? "(" + this.binding.name.unit + ")" : ''));
+        } else {
+          ref$ = this.scale;
+          ref$.x = d3.scaleLinear().domain([0, max]).range([box.width, 0]);
+          ref$.y = d3.scaleBand().domain(this.order.map(function(it){
+            return it.name || it.key;
+          })).range([0, box.height]);
+          maxTick = (ref$ = Math.ceil(this.layout.getBox('xaxis').width / 80)) > 2 ? ref$ : 2;
+          xticks = this.cfg.bump
+            ? (function(){
+              var i$, to$, ref$, results$ = [];
+              for (i$ = 1, to$ = (ref$ = this.parsed.length || 1) > 1 ? ref$ : 1; i$ <= to$; ++i$) {
+                results$.push(i$);
+              }
+              return results$;
+            }.call(this))
+            : this.scale.x.ticks((ref$ = ((ref1$ = this.cfg).xaxis || (ref1$.xaxis = {})).tickCount || 4) < maxTick ? ref$ : maxTick);
+          this.xaxis.config(this.cfg.xaxis);
+          v = this.binding.size[0] || {};
+          if (this.binding.size.length > 1) {
+            this.xaxis.caption(v.unit ? v.unit + "" : '');
+          } else {
+            this.xaxis.caption((v.name || v.key || '') + (v.unit ? "(" + v.unit + ")" : ''));
+          }
+          this.xaxis.ticks(xticks);
+          this.xaxis.scale(this.scale.x);
+          this.yaxis.config((ref$ = this.cfg).yaxis || (ref$.yaxis = {}));
+          this.yaxis.ticks(this.data.map(function(it){
+            return it.name;
+          }));
+          this.yaxis.scale(this.scale.y);
+          this.yaxis.caption((this.binding.name.name || this.binding.name.key) + (this.binding.name.unit ? "(" + this.binding.name.unit + ")" : ''));
+        }
+        for (i$ = 0; i$ < 2; ++i$) {
+          i = i$;
+          this.layout.update(false);
+          box = this.layout.getBox('view');
+          ref$ = [box.width, box.height], w = ref$[0], h = ref$[1];
+          this.tint.set(this.cfg.palette);
+          r = this.cfg.dotSize || 3;
+          this.scale.x.range([0, w - r]);
+          this.scale.y.range([h, r]);
+          this.xaxis.render();
+          this.yaxis.render();
+        }
+        box = this.layout.getBox('view');
+        return this.brush.extent([[0, 1], [box.width, box.height - 1]]);
+      },
+      render: function(){
+        var binding, scale, range, delta, baseOffset, maxPerGroup, cfg, tint, data, type, x$, ref$, this$ = this;
+        binding = this.binding, scale = this.scale, range = this.range, delta = this.delta, baseOffset = this.baseOffset, maxPerGroup = this.maxPerGroup, cfg = this.cfg, tint = this.tint, data = this.data, type = this.type;
+        x$ = this.g.view.selectAll('g.bar').data(this.data);
+        x$.exit().remove();
+        x$.enter().append('g').attr('class', 'bar');
+        this.g.view.selectAll('g.bar').attr('transform', function(d, i){
+          if (this$.type === 'column') {
+            return "translate(" + scale.x(d.name) + ",0)";
+          } else {
+            return "translate(0," + scale.y(d.name) + ")";
+          }
+        }).each(function(item, j){
+          var ref$, bars, offset, sum, i$, to$, idx, size, key, x$, y$, tran;
+          ref$ = [[], 0], bars = ref$[0], offset = ref$[1];
+          offset = delta - baseOffset[j];
+          sum = 1;
+          if (cfg.percent === true) {
+            sum = (ref$ = item.size.reduce(function(a, b){
+              return a + b;
+            }, 0)) > 1 ? ref$ : 1;
+          }
+          for (i$ = 0, to$ = item.size.length; i$ < to$; ++i$) {
+            idx = i$;
+            size = item.size[idx];
+            key = idx;
+            bars.push({
+              size: size / sum,
+              offset: offset / sum,
+              key: key,
+              group: item.name,
+              name: binding.size[key].name || binding.size[key].key,
+              unit: binding.size[key].unit || ''
+            });
+            if (cfg.multiple === 'split') {
+              offset += maxPerGroup[idx];
+            } else if (cfg.multiple === 'stack') {
+              offset += size;
+            }
+          }
+          x$ = d3.select(this).selectAll('rect').data(bars, function(d, i){
+            return d.key;
+          });
+          x$.exit().remove();
+          y$ = x$.enter().append('rect');
+          if (type === 'column') {
+            y$.attr('width', function(d, i){
+              var ref$;
+              return (ref$ = scale.x.bandwidth() - 2) > 1 ? ref$ : 1;
+            });
+          }
+          if (type === 'column') {
+            y$.attr('y', function(d, i){
+              return scale.y(0);
+            });
+          }
+          if (type !== 'column') {
+            y$.attr('height', function(d, i){
+              var ref$;
+              return (ref$ = scale.y.bandwidth() - 2) > 1 ? ref$ : 1;
+            });
+          }
+          if (type !== 'column') {
+            y$.attr('x', function(d, i){
+              return scale.x(0);
+            });
+          }
+          tran = d3.select(this).selectAll('rect').transition().duration(350).call(function(sel){
+            var x$;
+            if (cfg.multiple !== 'group') {
+              return;
+            }
+            x$ = sel;
+            if (type === 'column') {
+              x$.attr('x', function(d, i){
+                return 1 + i * (scale.x.bandwidth() - 2) / bars.length;
+              });
+            }
+            if (type === 'column') {
+              x$.attr('width', function(d, i){
+                return (scale.x.bandwidth() - 2) / bars.length;
+              });
+            }
+            if (type === 'column') {
+              x$.attr('y', function(d, i){
+                return Math.round(Math.min(scale.y(0), scale.y(d.size)));
+              });
+            }
+            if (type !== 'column') {
+              x$.attr('y', function(d, i){
+                return 1 + i * (scale.y.bandwidth() - 2) / bars.length;
+              });
+            }
+            if (type !== 'column') {
+              x$.attr('height', function(d, i){
+                return (scale.y.bandwidth() - 2) / bars.length;
+              });
+            }
+            if (type !== 'column') {
+              x$.attr('x', function(d, i){
+                return Math.round(Math.min(scale.x(0), scale.x(d.size)));
+              });
+            }
+            return x$;
+          }).call(function(sel){
+            var x$;
+            if (cfg.multiple !== 'stack') {
+              return;
+            }
+            x$ = sel;
+            if (type === 'column') {
+              x$.attr('x', 1);
+            }
+            if (type === 'column') {
+              x$.attr('width', function(d, i){
+                return scale.x.bandwidth() - 2;
+              });
+            }
+            if (type === 'column') {
+              x$.attr('y', function(d, i){
+                return Math.round(Math.min(scale.y(d.offset), scale.y(d.offset + d.size)));
+              });
+            }
+            if (type !== 'column') {
+              x$.attr('y', 1);
+            }
+            if (type !== 'column') {
+              x$.attr('height', function(d, i){
+                return scale.y.bandwidth() - 2;
+              });
+            }
+            if (type !== 'column') {
+              x$.attr('x', function(d, i){
+                return Math.round(Math.min(scale.x(d.offset), scale.x(d.offset + d.size)));
+              });
+            }
+            return x$;
+          });
+          if (type === 'column') {
+            tran.attr('height', function(d, i){
+              return Math.round(Math.abs(scale.y(0) - scale.y(d.size)));
+            });
+          } else {
+            tran.attr('width', function(d, i){
+              return Math.round(Math.abs(scale.x(0) - scale.x(d.size)));
+            });
+          }
+          return tran.attr('fill', function(d, i){
+            return tint.get(i, cfg.colorVariant ? j / data.length - 0.5 : 0);
+          }).attr('fill-opacity', function(d, i){
+            var filter, range;
+            if (!(binding.name && (filter = binding.name.filter))) {
+              return 1;
+            }
+            if (!(range = filter.value)) {
+              return 1;
+            }
+            if (in$(item.name, range)) {
+              return 1;
+            } else {
+              return 0.2;
+            }
+          });
+        });
+        if (!(((ref$ = this.cfg).brush || (ref$.brush = {})).enabled != null && !this.cfg.brush.enabled)) {
+          this.g.view.call(this.brush);
+        }
+        this.g.view.selectAll('rect.selection').attr('shape-rendering', 'auto');
+        this.legend.render();
+        this.yaxis.render();
+        return this.xaxis.render();
+      },
+      tick: function(){}
+    };
+  };
+  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;
+}
+function in$(x, xs){
+  var i = -1, l = xs.length >>> 0;
+  while (++i < l) if (x === xs[i]) return true;
+  return false;
+}</script></div>