@plotdb/chart 1.0.1 → 1.0.2

package/web/src/pug/block/gauge/0.0.1/sample.js

@@ -1,338 +0,0 @@
-
-{
-  sample: function() {
-    var list = d3.range(Math.round(Math.random() * 3 + 4));
-    var value = [{name: "Amount", data: list.map(function() { return Math.random(); })}];
-    var name = [{name: "Fruit", data: list.map(function(it) {
-      return plotdb.data.sample.fruit[it % plotdb.data.sample.fruit.length]
-    })}];
-    return {name: name, value: value};
-  },
-  dimension: {
-    value: { type: [plotdb.Number], require: true, desc: "size of pie" },
-    name: { type: [], require: false, desc: "name of pie" },
-  },
-  config: {
-    fontFamily: {},
-    background: {},
-    textFill: {},
-    fontSize: {},
-    margin: {},
-    palette: {},
-    stroke: {default: "#fff"},
-    strokeWidth: {},
-    thick: { name: "thick (0~1)", type: [plotdb.Number], default: 1 },
-    boxRoundness: {},
-    labelShow: {},
-    labelShadowSize: {},
-    otherLimit: {},
-    otherLabel: {},
-    labelPosition: {},
-    legendLabel: {},
-    legendShow: {},
-    legendPosition: {},
-    legendInline: {
-      name: "Show Inline Legend",
-      type: [plotdb.Boolean],
-      default: false,
-      desc: "[Experiment feature] Show legend with wedges instead of a standalone legend panel",
-      category: "Legend Inline"
-    },
-    legendInlineColor: {
-      name: "Color",
-      type: [plotdb.Color],
-      default: "#222",
-      desc: "Dot / Line Color",
-      category: "Legend Inline"
-    },
-    legendInlineStrokeWidth: {
-      name: "Stroke Width",
-      type: [plotdb.Number],
-      default: 2,
-      desc: "Dot / line width of inline legend",
-      category: "Legend Inline"
-    },
-    unit: {},
-    sort: { name: "Sort Values", type: [plotdb.Boolean], default: true, rebindOnChange: true },
-    showPercent: {name: "Show Percent", type: [plotdb.Boolean], default: false},
-    popupShow: {}
-  },
-
-  init: function() {
-    var that = this;
-    this.svg = d3.select(this.root).append("svg");
-    this.pieGroup = this.svg.append("g").attr("class", "pie-group");
-    this.legendGroup = this.svg.append("g").attr({"class": "legend-group"});
-    this.popup = plotd3.html.tooltip(this.root).on("mousemove", function(d,i,popup) {
-      popup.select(".title").text(d.data.name || "-");
-      popup.select(".value").html([
-        Math.ceil(100 * d.data.value)/100 + (that.config.unit || ""),
-        d.data.percent
-      ].join("<br>"));
-    });
-    this.popup.coord(function(d,i) {
-      var r = d.data.centralRadius;
-      var a = (d.endAngle + d.startAngle)/2;
-      var x = Math.sin(a) * r;
-      var y = -Math.cos(a) * r;
-      var cx = (that.width - that.legendOffset[0] * (that.config.legendPosition == "right" ? 1 : -1 )) / 2;
-      var cy = (that.height - that.legendOffset[1] * (that.config.legendPosition == "bottom" ? 1 : -1 )) / 2;
-      return [
-        cx + x, cy + y, 1,1
-      ];
-    });
-    this.pielayout = d3.layout.pie().value(function(it) { return it.value; });
-  },
-  parse: function() {
-    if(!this.dimension.name.fields.length) this.data.map(function(d,i) { d.name = i; });
-    if(!this.dimension.value.fields.length) this.data.map(function(d,i) { d.value= 1; });
-    this.names = d3.map(this.data, function(d,i) { return d.name || ""; }).keys();
-  },
-  bind: function() {
-    var that = this, sel, sel1, sel2;
-    sel = this.pieGroup.selectAll("path.data.pie").data(this.parsed);
-    sel.exit().attr({class: ""}).transition("exit").duration(500).attr({opacity: 0}).remove();
-    sel1 = sel.enter().append("path").attr({class: "data pie", opacity: 0});
-    sel = this.pieGroup.selectAll("g.label").data(this.parsed);
-    sel.exit().attr({class: ""}).transition("exit").duration(500).attr({opacity: 0}).remove();
-    sel2 = sel.enter().append("g").attr({class: "label", opacity: 0});
-    this.pieGroup.selectAll("g.label").each(function(d,i) {
-      var node = d3.select(this),sel;
-      sel = node.selectAll("text").data([d,d]);
-      sel.exit().remove();
-      sel.enter().append("text").attr({
-        class: function(d,i) { return "data label " + (i ? "value" : "shadow"); },
-      });
-    });
-    sel = this.pieGroup.selectAll("g.marker").data(this.parsed);
-    sel.exit().remove();
-    sel.enter().append("g").attr({class: "marker"}).each(function(d,i) {
-      var node = d3.select(this);
-      node.append("path"); node.append("circle"); node.append("circle"); node.append("text");
-    });
-    this.pieGroup.selectAll("g.marker").each(function(d,i) {
-      var node = d3.select(this);
-      node.select("path").datum(d);node.selectAll("circle").data([d,d]);node.select("text").datum(d);
-    });
-    if(this.config.popupShow) this.popup.nodes(sel1).nodes(sel2);
-    [sel1,sel2].map(function(sel) {
-      sel.on("click", function(d,i) {
-        that.fire("filter", {type: "value", value: d.data.name, field: "name"});
-      });
-    });
-  },
-  resize: function() {
-    var that = this;
-    var other = {
-      name: that.config.otherLabel,
-      value: this.data.filter(function(d,i) { return d.value < that.config.otherLimit; }).reduce(function(a,b) { return a + b.value; }, 0)
-    };
-    this.fdata = this.data.filter(function(d,i) { return d.value >= that.config.otherLimit; });
-    if(other.value != 0) this.fdata.push(other);
-    this.names = this.fdata.map(function(it) { return it.name; });
-
-    var box = this.root.getBoundingClientRect();
-    var svgbox = this.svg[0][0].getBoundingClientRect();
-    var width = this.width = box.width;
-    var height = this.height = box.height;
-    this.svg.attr({
-      width: width + "px", height: height + "px",
-      viewBox: [0,0,width,height].join(" "),
-      preserveAspectRatio: "xMidYMid"
-    });
-    this.popup.fontSize(this.config.fontSize);
-    this.legendVertical = ["right","left"].indexOf(this.config.legendPosition) >= 0;
-    this.cScale = plotdb.Palette.scale.ordinal(this.config.palette);
-    this.legend = plotd3.rwd.legend()
-      .size(this.legendVertical ? [220, this.height - 2 * this.config.margin] : [this.width - 2 * this.config.margin, 220])
-      .orient(this.config.legendPosition).scale(this.cScale)
-      .label(this.config.legendLabel || "")
-      .tickValues(this.names).fontSize(this.config.fontSize);
-    this.legendGroup.call(this.legend);
-    this.legendGroup.selectAll(".legend").on("mouseover", function(d,i) {
-      that.activeGroup = d; that.render();
-    }).on("mouseout", function(d,i) {
-      that.activeGroup = null; that.render();
-    });
-    this.legendSize = (this.config.legendShow ? this.legend.offset() : [0,0]);
-    this.legendOffset = this.config.legendShow ?
-      this.legendVertical ? [this.legendSize[0] + this.config.fontSize,0] : [0, this.legendSize[1] + this.config.fontSize]
-    : [0,0];
-    var w = this.width - this.legendOffset[0];
-    var h = this.height - this.legendOffset[1] - (this.config.legendInline ? 60 : 0);
-    this.radius = ( w > h ? h : w )/2 - this.config.margin
-      - (!that.config.labelShow || (that.config.labelPosition == 'in') ? 0 : 2 * that.config.fontSize);
-    this.pielayout.sort(this.config.sort ? function(a,b) { return b.value - a.value; } : null);
-    var parsed = this.pielayout(this.fdata);
-    this.parsed = parsed;
-    var sum = d3.sum(this.fdata, function(d,i) { return d.value; });
-    parsed.map(function(d,i) {
-      var a = (d.startAngle + d.endAngle ) / 2;
-      var r = that.radius;
-      if(that.config.labelPosition != 'in') r += that.config.fontSize * 2;
-      else r = (that.radius + that.radius * 0.9 * (1 - that.config.thick/2))/2;
-      if(!d.data.parsed) d.data.parsed = d;
-      d.data.width = (d.endAngle - d.startAngle) * r;
-      d.data.centralRadius = r;
-      d.data.innerRadius = that.radius * 0.9 * (1 - that.config.thick/2);
-      d.data.x = Math.sin(a) * r;
-      d.data.y = -Math.cos(a) * r;
-      d.data.startAngle = d.startAngle;
-      d.data.endAngle = d.endAngle;
-      d.data.padAngle = d.padAngle;
-      d.data.percent = (parseInt(1000 * d.data.value / sum) / 10) + "%";
-    });
-    if(this.config.sort) {
-      this.parsed.sort(function(a,b) { return b.data.value - a.data.value; });
-    } else {
-      this.parsed.sort(function(a,b) { return parseInt(Math.random() * 2 - 1); });
-    }
-    if(this.config.thick>1) this.config.thick = 1;
-    if(this.config.thick<0) this.config.thick = 0;
-    this.arc = d3.svg.arc()
-      .innerRadius(function(d,i) { return d.data.innerRadius; })
-      .outerRadius(this.radius)
-      .cornerRadius(this.config.boxRoundness);
-  },
-  render: function() {
-    var that = this;
-    if(this.config.fontFamily) d3.select(this.root).style("font-family", this.config.fontFamily);
-    d3.select(this.root).style("background-color", this.config.background);
-    this.svg.selectAll("g.label text, .legend text, g.marker text").attr({
-      "font-size": that.config.fontSize,
-      "fill": that.config.textFill
-    });
-    (this.pieGroup.attr("transform")
-      ? this.pieGroup.transition("morph").duration(500)
-      : this.pieGroup
-    ).attr({
-      transform: [
-        "translate(",
-        (that.width - this.legendOffset[0] * (this.config.legendPosition == "right" ? 1 : -1 )) / 2,
-        (that.height - this.legendOffset[1] * (this.config.legendPosition == "bottom" ? 1 : -1 )) / 2,
-        ")"
-      ].join(" ")
-    });
-    this.pieGroup.selectAll("path.data.pie").attr({
-      fill: function(d,i) {
-        return that.cScale(d.data.name);
-      },
-      stroke: this.config.stroke,
-      "stroke-width": this.config.strokeWidth
-    }).transition("opacity").duration(500).attr({
-      opacity: function(d,i) {
-        return (!that.activeGroup || that.activeGroup == d.data.name ? 1 : 0.1);
-      }
-    });
-    this.pieGroup.selectAll("path.data.pie").transition("morph").duration(500).tween("morph", function(d,i) {
-      var oldAngles = (
-        this.lastAngles || [d.startAngle,d.startAngle,d.data.innerRadius, d.data.innerRadius]
-      );
-      var curAngles = [d.startAngle, d.endAngle, that.radius, d.data.innerRadius];
-      var node = d3.select(this);
-      this.lastAngles = curAngles;
-      return function(t) {
-        node.attr({
-          d: that.arc
-            .startAngle((curAngles[0] - oldAngles[0]) * t + oldAngles[0])
-            .endAngle((curAngles[1] - oldAngles[1]) * t + oldAngles[1])
-            .outerRadius((curAngles[2] - oldAngles[2]) * t + oldAngles[2])
-            .innerRadius((curAngles[3] - oldAngles[3]) * t + oldAngles[3])
-        });
-      };
-    });
-    var labels = this.pieGroup.selectAll("g.label");
-    labels.filter(function(d,i) { return !d3.select(this).attr("transform"); }).attr({
-      transform: function(d,i) {
-        return ["translate(", d.data.x, d.data.y,")"].join(" ");
-      }
-    });
-    labels.each(function(d,i) {
-      var node = d3.select(this);
-      node.selectAll("text").attr({
-        fill: function(d,i) {
-          var c = d3.hsl(that.cScale(d.data.name));
-          return (c.l > 0.6 || (that.config.labelPosition != 'in') ? "#000":"#fff");
-        },
-        "font-size": that.config.fontSize,
-        "text-anchor": "middle",
-        dy: "0.38em"
-      }).style({
-        display: (that.config.labelShow?"block":"none")
-      }).text(function(d,i) {
-        return (that.config.showPercent ? d.data.percent : parseInt(100*d.data.value)/100);
-      });
-      node.select("text.label.shadow").attr({
-        stroke: function(d,i) {
-          var c = d3.hsl(that.cScale(d.data.name));
-          return (c.l > 0.6 || that.config.labelPosition != 'in' ? "#fff":"#000");
-        },
-        "stroke-width": that.config.labelShadowSize,
-      }).style({
-        display: (that.config.labelShadowSize && that.config.labelShow ? "block" : "none")
-      });
-      if(that.config.fontSize * 2 > d.data.width * 1.5) {
-        node.selectAll("text").style({display: "none"});
-      }
-    })
-    labels.transition("move").duration(500).attr({
-      transform: function(d,i) {
-        return ["translate(", d.data.x, d.data.y,")"].join(" ");
-      }
-    });
-    labels.transition("opacity").duration(500).attr({opacity: 1});
-    this.pieGroup.selectAll("g.marker").attr({
-      display: (this.config.legendInline ? "block" : "none")
-    }).each(function(d,i) {
-      var node = d3.select(this);
-      var x1, y1, x2, y2, xm, ym;
-      var a = (d.startAngle + d.endAngle)/2;
-      x1 = Math.sin(a) * that.radius;
-      y1 = -Math.cos(a) * that.radius;
-      x2 = x1 + (x1 < 0 ? -100 : 100);
-      y2 = y1 + (y1 < 0 ? -20 : 20);
-      if(Math.abs(x1) < Math.abs(y1)) {
-        xm = x1 + (x1 < 0 ? -20 : 20);
-        ym = y2;      
-      } else {
-        xm = x2 + (x1 < 0 ? 20 : -20);
-        ym = y1;
-      }
-      node.select("circle").attr({
-        cx: x1, cy: y1, fill: that.config.legendInlineColor,
-        r: that.config.legendInlineStrokeWidth * 1.5
-      });
-      node.select("circle:last-of-type").attr({
-        cx: x2, cy: y2, fill: that.config.legendInlineColor,
-        r: that.config.legendInlineStrokeWidth * 1.5
-      });
-      node.select("path").attr({
-        d: function() {
-          return [
-            "M", x1, y1, 
-            "L", xm, ym,
-            "L", x2, y2
-          ].join(" ");
-        },
-        fill: "none",
-        stroke: that.config.legendInlineColor,
-        "stroke-width": that.config.legendInlineStrokeWidth
-      });
-      node.select("text").attr({
-        x: x2, y: y2,
-        dy: "0.38em",
-        dx: (x1<0?-0.5:0.5) + "em",
-        "text-anchor": (x1<0?"end": "start")
-      }).text(d.data.name);
-    });
-    var minus = ["left","top"].indexOf(this.config.legendPosition) >= 0;
-    var offset = (this.legendVertical
-      ? [this.width/2 + (this.radius + this.config.fontSize/2 - (minus?-1:1)*this.legendSize[0]/2) * (minus ? -1 : 1),(this.height - this.legendSize[1])/2]
-      : [(this.width - this.legendSize[0])/2,this.height/2 + (this.radius + this.config.fontSize + (!minus?-this.legendSize[1]:0)) * (minus?-1:1)]
-    );
-    this.legendGroup.attr({
-      transform: ["translate(",offset[0], offset[1], ")"].join(" "),
-      display: this.config.legendShow ? "block" : "none"
-    });
-  }
-}

package/web/src/pug/block/line/0.0.1/index.ls

@@ -1,297 +0,0 @@
-module.exports =
-  pkg:
-    name: 'line', version: '0.0.1'
-    extend: {name: "base", version: "0.0.1"}
-    dependencies: []
-    i18n:
-      "zh-TW":
-        "y axis": "Y軸"
-        "x axis": "X軸"
-        "rank": "順位"
-
-  init: ({root, context, pubsub, t}) ->
-    pubsub.fire \init, mod: mod {context, t}
-
-mod = ({context, t}) ->
-  {d3,chart,axis,format} = context
-  sample-count = 4
-  sample: ->
-    raw: [0 to 30].map (val) ~>
-      ret = {}
-      [1 to sample-count].map (i) -> ret["val#i"] = (i * Math.random! * (10 - Math.abs(10 - val)) + val) >? 0
-      ret.order = val
-      ret
-    binding:
-      value: [1 to sample-count].map -> {key: "val#it"}
-      order: {key: \order}
-  config:
-    mode: type: \choice, values: <[line area streamgraph bump]>, default: \line
-    stack: type: \boolean
-    line: type: \choice, values: <[curve linear]>, default: \linear
-    show-dot: type: \boolean, default: true
-  dimension:
-    value: {type: \R, name: "y axis", multiple: true}
-    order: {type: \ON, name: "x axis"}
-  init: ->
-    svg = d3.select @svg
-    <[view yaxis xaxis legend]>.map ~> @{}g[it] = d3.select(@layout.get-group(it))
-    @tint = tint = new chart.utils.tint!
-    @line = d3.line!
-      .defined ~>
-        !isNaN(it.y1)
-      .x ~> @scale.x it.x
-      .y ~> @scale.y it.y1
-    @area = d3.area!
-      .defined ~>
-        !isNaN(it.y1) and !isNaN(it.y0)
-      .x ~> @scale.x it.x
-      .y0 ~> @scale.y it.y0
-      .y1 ~> @scale.y it.y1
-    @xaxis = new chart.utils.axis layout: @layout, name: \xaxis, direction: \bottom
-    @yaxis = new chart.utils.axis layout: @layout, name: \yaxis, direction: \left
-    @tip = new chart.utils.tip {
-      root: @root,
-      range: ~> return @layout.get-node \view .getBoundingClientRect!
-    }
-    @_evthdr = {}
-    @root.addEventListener \mouseout, @_evthdr.out = (evt) ~> @tip.hide!now!
-    @root.addEventListener \mousemove, @_evthdr.move = (evt) ~>
-      x = evt.clientX - @layout.get-node(\view).getBoundingClientRect!x
-      y = evt.clientY - @layout.get-node(\view).getBoundingClientRect!y
-      min = {d: -1, p: null, series: null}
-      for i from 0 til @parsed.length =>
-        series = @parsed[i]
-        for j from 0 til series.pts.length =>
-          p = series.pts[j]
-          if isNaN(p.y1) or isNaN(p.x) => continue
-          dx = Math.abs(@scale.x(p.x) - x)
-          dy = Math.abs(@scale.y(p.y1) - y)
-          d = (dx ** 2) + (dy ** 2)
-          if min.d < 0 or min.d > d => min <<< {d, p, series}
-      if !(min.p and min.d and min.series) => return
-      bind = min.series.bind
-      pt = min.p
-
-      data = {
-        name: """#{if bind => bind.name or bind.key or ''} /
-        #{pt.data.orderText or pt.data.order or pt.x}#{@binding.order.unit or ''}
-        """
-        value: if isNaN(pt.v) => '-' else "#{(pt.v).toFixed(2)}#{if bind => (bind.unit or '') else ''}"
-      }
-      box = x: @scale.x(pt.x), y: @scale.y(pt.y)
-      @tip.render {data, evt: evt, box}
-
-    @legend = new chart.utils.legend do
-      layout: @layout
-      root: @root
-      name: \legend
-      shape: (d) -> d3.select(@).attr \fill, tint.get d.text
-      direction: \vertical
-      cfg: selectable: true
-    @legend.on \select, ~> @bind!; @resize!; @render!
-    @scale = { x: d3.scaleLinear!, y: d3.scaleLinear! }
-
-  destroy: ->
-    @root.removeEventListener \mouseout, @_evthdr.out
-    @root.removeEventListener \mousemove, @_evthdr.move
-    @tip.destroy!
-
-  parse: ->
-    @data.map (d,i) ->
-      d.order-text = '' + (if !(d.order?) => i else d.order)
-      d._order = if !(d.order?) or isNaN(+d.order) => i else +d.order
-    @data.sort (a,b) -> if a._order > b._order => 1 else if a._order == b._order => 0 else -1
-    @legend.data @binding.value.map -> {key: it.key, text: it.key}
-
-  bind: ->
-    binds = @binding.value
-    binds = @binding.value.map((b,i) -> {b, i}).filter (d,i) ~> @legend.is-selected d.b.key
-
-    # if bump
-    if @cfg.mode == \bump =>
-      @parsed = []
-      dd = @data.map (d) ~>
-        ret = {} <<< d
-        v = ret.value.map (d,i) ~> {i: i, v: if @legend.is-selected(@binding.value[i].key) => d else NaN}
-        v.sort (a,b) ->
-          if isNaN(a.v) and isNaN(b.v) => return 0
-          else if isNaN(b.v) => return -1
-          else if isNaN(a.v) => return 1
-          return b.v - a.v
-        v.map (d,i) -> d.r = i + 1
-        v.sort (a,b) -> a.i - b.i
-        ret.value = v.map -> if isNaN(it.v) => NaN else it.r
-        ret.original-value = v.map -> it.v
-        ret
-
-    dd = dd or @data
-
-    if @cfg.mode == \streamgraph =>
-      sums = dd.map (d) ->
-        sum = 0
-        for i from 0 til d.value.length => sum += d.value[i]
-        sum
-      [smin, smax] = [Math.min.apply(Math, sums), Math.max.apply(Math, sums)]
-    else
-      [sums, smin, smax] = [dd.map(-> 0), 0, 0]
-    @parsed = []
-    line0 = dd.map -> 0
-    for i from 0 til binds.length =>
-      [p,b] = [(if i > 0 => binds[i - 1] else null), binds[i]]
-      line1 = dd.map (d,j) -> d.value[b.i] + line0[j]
-      @parsed.push {
-        pts: (dd or @data).map (d,j) ->
-          data: d
-          y0: line0[j] - (sums[j] / 2) + (smax - smin) / 2
-          y1: line1[j] - (sums[j] / 2) + (smax - smin) / 2
-          x: d._order
-          v: if d.original-value => d.original-value[i] else d.value[i]
-        bind: b.b
-        color: b.b.name or b.b.key
-      }
-      if (@cfg.stack and @cfg.mode != \bump) or (@cfg.mode in <[streamgraph area]>) => line0 = line1
-    /*
-    @parsed = binds.map (b,i) ~>
-      pts: (dd or @data).map (d,j) ->
-        data: d
-        y0: 0
-        y1: d.value[b.i]
-        x: d._order
-        v: if d.original-value => d.original-value[i] else d.value[i]
-      bind: b.b
-      color: b.b.name or b.b.key
-    */
-    # if stacked
-    /*
-    if @cfg.stack =>
-      ys = @data.map -> it.value.reduce(((a,b)-> a + b),0)
-      @parsed = []
-      for i from 0 til binds.length =>
-        b = binds[i].b
-        last = @parsed[i - 1] or null
-        @parsed.push do
-          pts: @data.map (d,j) ->
-            y1: (d.value[i] + if !last => 0 else last.pts[j].y1)
-            y0: if !last => 0 else last.pts[j].y1
-            x: d._order
-            v: if d.original-value => d.original-value[i] else d.value[i]
-          bind: b
-          color: b.name or b.key
-    */
-  resize: ->
-    @line.curve if @cfg.line == \curve => d3.curveCatmullRom else d3.curveLinear
-    @area.curve if @cfg.line == \curve => d3.curveCatmullRom else d3.curveLinear
-    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
-    [miny,maxy] = [0,0]
-    for i from 0 til @parsed.length =>
-      for j from 0 til @parsed[i].pts.length =>
-        p = @parsed[i].pts[j]
-        if !isNaN(p.y0) and miny > p.y0 => miny = p.y0
-        if !isNaN(p.y1) and miny > p.y1 => miny = p.y1
-        if !isNaN(p.y0) and maxy < p.y0 => maxy = p.y0
-        if !isNaN(p.y1) and maxy < p.y1 => maxy = p.y1
-
-    @extent =
-      x: d3.extent @data, -> (it._order)
-      y: [(if @cfg.mode == \bump => miny >? 1 else miny), if maxy == miny => miny + 1 else maxy]
-
-    @scale.x.domain @extent.x
-    @scale.y.domain (if @cfg.mode == \bump => [@extent.y.1, @extent.y.0] else @extent.y)
-
-    [w,h] = [@box.width, @box.height]
-    max-tick = Math.ceil(@layout.get-box \yaxis .height / 40) >? 2
-    yticks = if @cfg.mode == \bump => [1 to ((@parsed.length or 1) >? 1)]
-    else @scale.y.ticks((@cfg.{}yaxis.tick-count or 4) <? max-tick)
-    yfmt = chart.utils.format.auto yticks
-
-    @legend.config @cfg.legend
-    @legend.update!
-
-    @yaxis.config @cfg.yaxis
-    @yaxis.ticks yticks
-    @yaxis.scale @scale.y
-    if @cfg.mode == \bump =>
-      @yaxis.caption t \rank
-    else
-      if @parsed.length > 1 =>
-        units = Array.from(new Set(@parsed.map -> it.bind.unit)).filter -> it
-        if units.length > 1 => @yaxis.caption('')
-        else @yaxis.caption( units.0 or '')
-      else
-        v = (@parsed.0 or {}).bind or {}
-        @yaxis.caption( (v.name or v.key or '') + if v.unit => "(#{v.unit})" else '')
-
-    @xaxis.config @cfg.xaxis
-    @xaxis.ticks @data.map -> {v: it._order, t: it.order-text}
-    @xaxis.scale @scale.x
-    @xaxis.caption(
-      (@binding.order.name or @binding.order.key) +
-      if @binding.order.unit => "(#{@binding.order.unit})" else ''
-    )
-
-    # xaxis and yaxis affect each other and they all affect view.
-    # we may need to update them until stable but for now we simply layout twice.
-    for i from 0 til 2 =>
-      @layout.update false
-      box = @layout.get-box('view')
-      [w,h] = [box.width, box.height]
-      @tint.set @cfg.palette
-      r = @cfg.dot-size or 3
-      @scale.x.range [0, w - r]
-      @scale.y.range [h, r]
-      @xaxis.render!
-      @yaxis.render!
-
-  render: ->
-    {scale,tint,extent} = @
-    r = @cfg.dot-size or 3
-    vbox = @layout.get-box \view
-    lbox = @layout.get-box \yaxis
-    @g.view.selectAll \path.data .data(@parsed, -> it.bind.key)
-      ..exit!remove!
-      ..enter!append \path .attr \class, \data
-        .attr \fill, \none
-        .attr \d, (d,i) ~>
-          if @cfg.mode in <[streamgraph area]> => @area d.pts
-          else @line d.pts
-        .attr \stroke, (d,i) ~> @tint.get d.color
-        .attr \stroke-width, 1
-    @g.view.selectAll \path.data
-      .transition!duration 150
-      .style \opacity, (d,i) ~> if @legend.is-selected(d.bind.key) => 1 else 0.3
-      .attr \d, (d,i) ~>
-        if @cfg.mode in <[streamgraph area]> => @area d.pts
-        else @line d.pts
-      .attr \stroke, (d,i) ~> @tint.get d.color
-      .attr \fill, (d,i) ~> if @cfg.mode in <[streamgraph area]> => @tint.get(d.color) else \none
-      .attr \fill-opacity, ~> \0.5
-    @g.view.selectAll \g.dot .data((if @cfg.show-dot => @parsed else []), -> it.bind.key)
-      ..exit!remove!
-      ..enter!append \g .attr \class, \dot
-    @g.view.selectAll \g.dot
-      .style \opacity, (d,i) ~> if @legend.is-selected(d.bind.key) => 1 else 0.3
-      .each (d,i) ->
-        d3.select(@).selectAll \circle.dot .data d.pts
-          ..exit!remove!
-          ..enter!append \circle .attr \class, \dot
-            .attr \r, r
-            .attr \fill, \#fff
-            .attr \stroke, tint.get(d.bind.name or d.bind.key)
-        d3.select(@).selectAll \circle.dot
-          .filter (d,i) -> isNaN d.y1
-          .attr \cx, (d,i) -> if isNaN(scale.x d.x) => scale.x(extent.x.0) else scale.x(d.x)
-          .attr \cy, (d,i) -> scale.y(extent.y.0)
-          .transition 150
-          .attr \opacity, 0
-        d3.select(@).selectAll \circle.dot
-          .filter (d,i) -> !isNaN d.y1
-          .attr \cx, (d,i) -> scale.x d.x
-          .attr \cy, (d,i) -> scale.y d.y1
-          .attr \r, r
-          .attr \fill, tint.get d.color
-          .attr \stroke, tint.get d.color
-          .transition 150
-          .attr \opacity, 1
-    @legend.render!
-    @xaxis.render!
-    @yaxis.render!

package/web/src/pug/block/line/0.0.1/index.pug

@@ -1,33 +0,0 @@
-div
-  div(plug="layout")
-    .pdl-layout
-      div(data-type="layout")
-        .pdl-cell(data-name="yaxis")  
-        .pdl-cell(data-name="view")
-        .pdl-cell
-        .pdl-cell(data-name="xaxis")  
-        .pdl-cell(data-name="legend")
-      div(data-type="render")
-  style(type="text/css"): :stylus
-    [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(7em)
-      grid-template-rows: 1fr fit-content(1em)
-      /* 0.5em for axis label at the boundary */
-      padding: 0 0.5em
-      .pdl-cell[data-name=legend]
-        padding-left: 1em
-        grid-column: 3
-        grid-row: 1 / span 2
-
-    .pdl-layout.legend-below > div[data-type=layout]
-      grid-template-columns: 2em 1fr
-      grid-template-rows: 1fr fit-content(2em) fit-content(3em)
-      .pdl-cell[data-name=legend]
-        padding-top: 1em
-        grid-column: 1 / span 2
-        grid-row: 3
-
-  script(type="@plotdb/block"): include:lsc index.ls