@plotdb/chart 0.0.3 → 1.0.1

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

@@ -25,550 +25,545 @@
   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": "長度"
+</style><script type="@plotdb/block">var mod;
+module.exports = {
+  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(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
-        })
+    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;
+        }
       });
-    }
-  };
-  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();
+      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 ret;
-          }),
-          binding: {
-            size: [1, 2, 3, 4].map(function(it){
-              return {
-                key: "val" + it,
-                unit: "amount"
-              };
-            }),
+            return results$;
+          }()).map(function(it){
+            return domain[it];
+          });
+          return this$.filter({
             name: {
-              key: "name"
+              type: 'index',
+              value: range
             }
-          }
-        };
-      },
-      config: (ref$ = import$({}, chart.utils.config.preset['default']), ref$.sort = {
-        enabled: {
-          type: 'boolean'
-        },
-        dir: {
-          type: 'choice',
-          values: ['asc', 'desc', 'none']
+          }, true);
         }
-      }, ref$.type = {
-        type: 'choice',
-        values: ['bar', 'column'],
-        'default': 'column'
-      }, ref$),
-      dimension: {
-        size: {
-          type: 'R',
-          multiple: true,
-          name: "size"
-        },
-        name: {
-          type: 'NO',
-          name: "name"
+      });
+      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));
         }
-      },
-      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;
+      });
+    },
+    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;
           }
-          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))];
+      });
+      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];
         }));
-        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 (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$);
           }
-          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(){
+          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$ = range[0], to$ = range[1]; i$ <= to$; ++i$) {
+              for (i$ = alignIdx, to$ = d.size.length; 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();
+            }()).reduce(function(a, b){
+              return a + d.size[b];
+            }, 0);
+          })) + (delta || 0);
         }
-      },
-      filter: function(filters, internal){
-        var this$ = this;
-        internal == null && (internal = false);
-        this.render();
-        if (internal) {
-          return;
+      } 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 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 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 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;
+            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 + ")" : ''));
         }
-        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$) {
+        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$;
-          }()).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);
+          }.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.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){
+        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);
+          }, 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;
         });
-        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);
+        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;
           });
         }
-        console.log(this.cfg);
-        if (this.cfg.palette) {
-          this.tint.set(this.cfg.palette.colors.map(function(it){
-            return it.value || it;
-          }));
+        if (type === 'column') {
+          y$.attr('y', function(d, i){
+            return scale.y(0);
+          });
         }
-        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
+        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;
             });
           }
-          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 + ")" : ''));
+          if (type === 'column') {
+            x$.attr('width', function(d, i){
+              return (scale.x.bandwidth() - 2) / bars.length;
+            });
           }
-          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 + ")" : ''));
+          if (type === 'column') {
+            x$.attr('y', function(d, i){
+              return Math.round(Math.min(scale.y(0), scale.y(d.size)));
+            });
           }
-          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) + ")";
+          if (type !== 'column') {
+            x$.attr('y', function(d, i){
+              return 1 + i * (scale.y.bandwidth() - 2) / bars.length;
+            });
           }
-        }).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;
+          if (type !== 'column') {
+            x$.attr('height', function(d, i){
+              return (scale.y.bandwidth() - 2) / bars.length;
+            });
           }
-          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 (type !== 'column') {
+            x$.attr('x', function(d, i){
+              return Math.round(Math.min(scale.x(0), scale.x(d.size)));
             });
-            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');
+          return x$;
+        }).call(function(sel){
+          var x$;
+          if (cfg.multiple !== 'stack') {
+            return;
+          }
+          x$ = sel;
           if (type === 'column') {
-            y$.attr('width', function(d, i){
-              var ref$;
-              return (ref$ = scale.x.bandwidth() - 2) > 1 ? ref$ : 1;
+            x$.attr('x', 1);
+          }
+          if (type === 'column') {
+            x$.attr('width', function(d, i){
+              return scale.x.bandwidth() - 2;
             });
           }
           if (type === 'column') {
-            y$.attr('y', function(d, i){
-              return scale.y(0);
+            x$.attr('y', function(d, i){
+              return Math.round(Math.min(scale.y(d.offset), scale.y(d.offset + d.size)));
             });
           }
           if (type !== 'column') {
-            y$.attr('height', function(d, i){
-              var ref$;
-              return (ref$ = scale.y.bandwidth() - 2) > 1 ? ref$ : 1;
+            x$.attr('y', 1);
+          }
+          if (type !== 'column') {
+            x$.attr('height', function(d, i){
+              return scale.y.bandwidth() - 2;
             });
           }
           if (type !== 'column') {
-            y$.attr('x', function(d, i){
-              return scale.x(0);
+            x$.attr('x', function(d, i){
+              return Math.round(Math.min(scale.x(d.offset), scale.x(d.offset + d.size)));
             });
           }
-          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$;
+          return x$;
+        });
+        if (type === 'column') {
+          tran.attr('height', function(d, i){
+            return Math.round(Math.abs(scale.y(0) - scale.y(d.size)));
           });
-          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 {
-            tran.attr('width', function(d, i){
-              return Math.round(Math.abs(scale.x(0) - scale.x(d.size)));
-            });
+            return 0.2;
           }
-          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(){}
-    };
+      });
+      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];