@plotdb/chart 0.0.2

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

@@ -0,0 +1,178 @@
+<div><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    pkg: {
+      name: 'dumbbell',
+      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
+        })
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, d3, ldcolor, debounce, infinite;
+    context = arg$.context;
+    d3 = context.d3, ldcolor = context.ldcolor, debounce = context.debounce, infinite = context.infinite;
+    return {
+      sample: function(){
+        return {
+          raw: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(val){
+            return {
+              val1: Math.random() * 0.5 + 0.4,
+              val2: Math.random() * 0.5 + 0.4,
+              val3: Math.random() * 0.6 + 0.1,
+              val4: Math.random() * 0.6 + 0.1,
+              name: val
+            };
+          }),
+          binding: {
+            name: {
+              key: 'name'
+            },
+            y1: [
+              {
+                key: 'val1'
+              }, {
+                key: 'val2'
+              }
+            ],
+            y2: [
+              {
+                key: 'val3'
+              }, {
+                key: 'val4'
+              }
+            ]
+          }
+        };
+      },
+      config: {},
+      dimension: {
+        y1: {
+          type: 'R',
+          multiple: true,
+          name: "y pos"
+        },
+        y2: {
+          type: 'R',
+          multiple: true,
+          name: "y pos"
+        },
+        name: {
+          type: 'N',
+          name: "dumbbell name"
+        }
+      },
+      init: function(){
+        return this.infcolor = new infinite();
+      },
+      parse: function(){
+        var this$ = this;
+        this.parsed = [];
+        this.parsed = this.data.map(function(d, i){
+          var dumbbell;
+          dumbbell = d.y1.map(function(e, j){
+            return {
+              y1: d.y1[j] || 0,
+              y2: d.y2[j] || 0,
+              name: [this$.binding.y1[j].key, this$.binding.y2[j].key]
+            };
+          });
+          return {
+            name: d.name,
+            dumbbell: dumbbell
+          };
+        });
+        return this.names = this.data.map(function(it){
+          return it.name;
+        });
+      },
+      resize: function(){
+        var ref$, w, h;
+        ref$ = [this.box.width, this.box.height], w = ref$[0], h = ref$[1];
+        this.extent = {
+          y: [
+            d3.min(this.data.map(function(d, i){
+              return d3.min([d3.min(d.y1), d3.min(d.y2)]);
+            })), d3.max(this.data.map(function(d, i){
+              return d3.max([d3.max(d.y1), d3.max(d.y2)]);
+            }))
+          ]
+        };
+        this.scale = {
+          x: d3.scaleBand().domain(this.names).range([0, w]).paddingInner(0.3),
+          y: d3.scaleLinear().domain([0, this.extent.y[1]]).range([0, h]),
+          c: d3.scaleOrdinal(d3.schemeCategory10)
+        };
+        if (this.cfg != null && this.cfg.palette) {
+          this.scale.c = d3.scaleOrdinal(this.cfg.palette.colors.map(function(it){
+            return ldcolor.web(it.value || it);
+          }));
+        }
+        if (this.cfg != null && this.cfg.palette) {
+          return this.infcolor.setColors(this.cfg.palette.colors.map(function(it){
+            return ldcolor.web(it.value || it);
+          }));
+        }
+      },
+      render: function(){
+        var scale, infcolor, svg, x$;
+        scale = this.scale, infcolor = this.infcolor;
+        svg = d3.select(this.svg);
+        x$ = svg.selectAll('g.data').data(this.parsed);
+        x$.exit().remove();
+        x$.enter().append('g').attr('class', 'data');
+        return svg.selectAll('g.data').each(function(e, j){
+          var bw, n, x$;
+          bw = scale.x.bandwidth();
+          n = d3.select(this);
+          x$ = n.selectAll('g.dumbbell').data(e.dumbbell);
+          x$.exit().remove();
+          x$.enter().append('g').attr('class', 'dumbbell');
+          return n.selectAll('g.dumbbell').each(function(f, k){
+            var m, x$, y$;
+            m = d3.select(this);
+            x$ = m.selectAll('circle').data([1, 2]);
+            x$.exit().remove();
+            x$.enter().append('circle');
+            y$ = m.selectAll('line').data([0]);
+            y$.exit().remove();
+            y$.enter().append('line');
+            m.selectAll('circle').attr('cx', function(d, i){
+              return scale.x(e.name) + bw * i;
+            }).attr('cy', function(d, i){
+              return scale.y(f["y" + d]);
+            }).attr('r', 2).attr('fill', function(){
+              return infcolor.get(f.name[0]);
+            });
+            return m.selectAll('line').attr('x1', function(d, i){
+              return scale.x(e.name);
+            }).attr('x2', function(d, i){
+              return scale.x(e.name) + bw;
+            }).attr('y1', function(d, i){
+              return scale.y(f.y1);
+            }).attr('y2', function(d, i){
+              return scale.y(f.y2);
+            }).attr('stroke', function(){
+              return infcolor.get(f.name[0]);
+            }).attr('stroke-width', 1);
+          });
+        });
+      }
+    };
+  };
+  return blockFactory;
+});</script></div>

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

@@ -0,0 +1,76 @@
+<div style="width:100%;height:100%"><script type="@plotdb/block">({
+  pkg: {
+    name: 'empty',
+    version: '0.0.1',
+    dependencies: [
+      {
+        url: "/assets/lib/@loadingio/debounce.js/main/debounce.min.js"
+      }, {
+        url: "/assets/lib/wrap-svg-text/main/index.min.js",
+        async: false
+      }, {
+        url: "/assets/lib/@plotdb/layout/main/index.min.js",
+        async: false
+      }, {
+        url: "/assets/lib/@plotdb/layout/main/index.min.css",
+        type: 'css'
+      }, {
+        url: "/assets/lib/ldcolor/main/ldcolor.min.js",
+        async: false
+      }, {
+        url: "/assets/lib/@plotdb/chart/main/chart.js",
+        async: false
+      }, {
+        url: "/assets/lib/@plotdb/chart/main/chart.min.css",
+        type: 'css'
+      }, {
+        url: "/assets/lib/@plotdb/chart/main/utils/legend.js",
+        async: false
+      }, {
+        url: "/assets/lib/@plotdb/chart/main/utils/legend.css",
+        type: 'css'
+      }, {
+        url: "/assets/lib/@plotdb/chart/main/utils/tint.js",
+        async: false
+      }, {
+        url: "/assets/lib/@plotdb/chart/main/utils/data.js",
+        async: false
+      }
+    ]
+  },
+  init: function(arg$){
+    var root, context, pubsub, data, chart, this$ = this;
+    root = arg$.root, context = arg$.context, pubsub = arg$.pubsub, data = arg$.data;
+    chart = context.chart;
+    pubsub.on('init', function(opt){
+      var c;
+      opt == null && (opt = {});
+      opt = import$({
+        root: root,
+        delayRender: true
+      }, opt);
+      this$.chart = c = new chart(import$((opt.prepareSvg = false, opt.layout = false, opt), data));
+      return c.init().then(function(){
+        return c;
+      });
+    });
+    return this;
+  },
+  'interface': function(){
+    return this.chart;
+  },
+  mod: function(root){
+    return {
+      config: {},
+      dimension: {},
+      init: function(){},
+      resize: function(){},
+      render: function(){}
+    };
+  }
+});
+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/gauge/0.0.1/index.html

@@ -0,0 +1,150 @@
+<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="text"><div class="pdl-cell" data-name="number">0000</div><div class="pdl-cell" data-name="unit">0000</div></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] .text {
+  margin-left: 0.5em;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+}
+.pdl-layout > div[data-type=layout] [data-name=view] {
+  height: 100%;
+}
+.pdl-layout > div[data-type=layout] [data-name=number] {
+  font-size: 24px;
+  line-height: 1em;
+}
+.pdl-layout > div[data-type=layout] [data-name=unit] {
+  line-height: 1em;
+}
+</style><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    pkg: {
+      name: 'gauge',
+      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
+        })
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, d3, chart;
+    context = arg$.context;
+    d3 = context.d3, chart = context.chart;
+    return {
+      sample: function(){
+        return {
+          raw: [{
+            value: Math.random(),
+            max: 1
+          }],
+          binding: {
+            value: {
+              key: 'value'
+            },
+            max: {
+              key: 'max'
+            }
+          }
+        };
+      },
+      config: {},
+      dimension: {
+        value: {
+          type: 'R',
+          name: "value"
+        },
+        max: {
+          type: 'R',
+          name: "max"
+        }
+      },
+      init: function(){
+        var tint;
+        this.tint = tint = new chart.utils.tint();
+        this.arc = d3.arc();
+        return this.g = {
+          view: d3.select(this.layout.getGroup('view')),
+          number: d3.select(this.layout.getGroup('number')),
+          unit: d3.select(this.layout.getGroup('unit'))
+        };
+      },
+      parse: function(){
+        var x$, y$, z$, z1$, z2$;
+        x$ = this.g.view.selectAll('path.wedge').data([0, 1]);
+        x$.exit().remove();
+        x$.enter().append('path').attr('class', 'wedge');
+        y$ = this.g.view.selectAll('path.pin').data([0]);
+        y$.exit().remove();
+        y$.enter().append('path').attr('class', 'pin');
+        z$ = this.g.view.selectAll('citcle').data([0]);
+        z$.exit().remove();
+        z$.enter().append('circle');
+        z1$ = this.g.number.selectAll('text').data([0]);
+        z1$.exit().remove();
+        z1$.enter().append('text');
+        z2$ = this.g.unit.selectAll('text').data([0]);
+        z2$.exit().remove();
+        z2$.enter().append('text');
+        return z2$;
+      },
+      resize: function(){
+        var n, b, x$;
+        n = this.layout.getNode('view');
+        b = this.layout.getBox('view');
+        x$ = n.style;
+        x$.width = b.height + "px";
+        return this.layout.update(false);
+      },
+      render: function(){
+        var d, percent, ref$, ref1$, angle, start, end, box, size, offset, this$ = this;
+        if (this.cfg != null && this.cfg.palette) {
+          this.tint.set(this.cfg.palette.colors.map(function(it){
+            return it.value || it;
+          }));
+        }
+        d = this.data[0] || {};
+        percent = (ref$ = (ref1$ = (d.value || 0) / (d.max || 1)) < 1 ? ref1$ : 1) > 0 ? ref$ : 0;
+        angle = percent * (Math.PI * 6 / 4) + Math.PI / 4;
+        start = Math.PI / 4;
+        end = Math.PI * 7 / 4;
+        box = this.layout.getBox('view');
+        size = Math.min(box.width, box.height) / 2;
+        this.arc.innerRadius(size * 0.5).outerRadius(size);
+        offset = size * (1 - 1 / Math.sqrt(2)) / 2;
+        this.g.view.selectAll('path.wedge').attr('transform', "translate(" + box.width / 2 + "," + (offset + box.height / 2) + ") rotate(180)").attr('d', function(d, i){
+          this$.arc.startAngle(i === 0 ? start : angle).endAngle(i === 0 ? angle : end);
+          return this$.arc();
+        }).attr('fill', function(d, i){
+          return this$.tint.get(d);
+        });
+        this.g.view.selectAll('path.pin').attr('transform', "translate(" + box.width / 2 + " " + (offset + box.height / 2) + ") rotate(" + (45 + 270 * percent) + ")").attr('d', "M0 " + size * 0.4 + "L0 " + size).attr('fill', 'none').attr('stroke', '#000').attr('stroke-width', 2);
+        this.g.number.selectAll('text').text(function(){
+          return 3000;
+        }).attr('font-size', 24).attr('dominant-baseline', 'hanging');
+        return this.g.unit.selectAll('text').text(function(){
+          return "新臺幣";
+        }).attr('dominant-baseline', 'hanging');
+      }
+    };
+  };
+  return blockFactory;
+});</script></div>