diff --git a/src/contexts/cli/version.go b/src/contexts/cli/version.go index b00e6aeb..f54eca73 100644 --- a/src/contexts/cli/version.go +++ b/src/contexts/cli/version.go @@ -4,5 +4,5 @@ var version = struct { host string self int }{ - "2019-07-05 08:16:40", "com.mac", 41, + "2019-07-05 20:11:19", "ZYB-20190522USI", 120, } diff --git a/src/contexts/nfs/nfs.go b/src/contexts/nfs/nfs.go index e6e4cb38..381ca901 100644 --- a/src/contexts/nfs/nfs.go +++ b/src/contexts/nfs/nfs.go @@ -1390,6 +1390,16 @@ var Index = &ctx.Context{Name: "nfs", Help: "存储中心", }}, "draw": &ctx.Command{Name: "draw", Help: "", Hand: func(m *ctx.Message, c *ctx.Context, key string, arg ...string) (e error) { + m.Add("append", "data", 10) + m.Add("append", "data", 40) + m.Add("append", "data", 30) + m.Add("append", "data", 20) + + m.Add("append", "seed", 30) + m.Add("append", "seed", 20) + m.Add("append", "seed", 30) + m.Add("append", "seed", 40) + return for len(arg) > 0 { switch arg[0] { case "trend": diff --git a/src/contexts/ssh/ssh.go b/src/contexts/ssh/ssh.go index 79720fcf..23fbad6a 100644 --- a/src/contexts/ssh/ssh.go +++ b/src/contexts/ssh/ssh.go @@ -235,7 +235,15 @@ var Index = &ctx.Context{Name: "ssh", Help: "集群中心", map[string]interface{}{"type": "text", "name": "type"}, map[string]interface{}{"type": "button", "value": "查看"}, }, - "display": map[string]interface{}{"deal": "point"}, + "display": map[string]interface{}{"deal": "trend"}, + }, + map[string]interface{}{"componet_name": "draw", "componet_help": "绘图", + "componet_tmpl": "componet", "componet_view": "Context", "componet_init": "", + "componet_type": "public", "componet_ctx": "nfs", "componet_cmd": "dir", + "componet_args": []interface{}{"src", "dir_deep", "path", "line", "size", "dir_sort", "line", "int_r"}, "inputs": []interface{}{ + map[string]interface{}{"type": "button", "value": "查看"}, + }, + "display": map[string]interface{}{"deal": "trend"}, }, }, "index": []interface{}{ diff --git a/usr/librarys/example.css b/usr/librarys/example.css index 364103ef..4fb7f5aa 100644 --- a/usr/librarys/example.css +++ b/usr/librarys/example.css @@ -173,6 +173,9 @@ fieldset.Login>form.option button { fieldset.item>div.output { overflow:auto; } +fieldset.item>div.output>canvas { + background-color:#8dd09e; +} .hidden { display:none; diff --git a/usr/librarys/example.js b/usr/librarys/example.js index c784feda..adebf27a 100644 --- a/usr/librarys/example.js +++ b/usr/librarys/example.js @@ -739,6 +739,26 @@ function Plugin(page, pane, field) { }); (display.show_result || !msg.append) && msg.result && kit.OrderCode(kit.AppendChild(output, [{view: ["code", "div", msg.Results()]}]).first) }, + trend: function(msg) { + var id = "canvas"+page.ID() + var width = output.clientWidth-40, height = 230, space = 10 + var action = kit.AppendChild(output, [{view: ["action"]}]).last + + var item = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {id: id, width: width+20, height: height+20}}]).last + var point = kit.AppendChild(output, [{text: ["point"]}]).last + canvas = item.getContext("2d") + + cc = Canvas(canvas, width, height, space, msg).drawData() + for (var k in cc.button) { + kit.AppendChild(action, [{button: [k, cc.button[k]]}]) + } + item.onclick = function(event) { + cc.pushPoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY) + } + item.onmousemove = function(event) { + cc.movePoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY) + } + }, point: function(msg) { var id = "canvas"+page.ID() var canvas = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {id: id, width: output.clientWidth-15}}]).last.getContext("2d") @@ -824,3 +844,237 @@ function Plugin(page, pane, field) { plugin.init(page, pane, field, option, output) return page[field.id] = pane[field.id] = plugin.Field = field, field.Plugin = plugin } +function Canvas(canvas, width, height, space, msg) { + var type = "weight" + var shape = "drawLine" + var what = { + reset: function() { + canvas.resetTransform() + canvas.clearRect(0, 0, width+20*space, height+20*space) + }, + drawAxies: function(space, style) { + this.reset() + canvas.setTransform(1, 0, 0, -1, space, height) + + canvas.beginPath() + canvas.moveTo(-10, 0) + canvas.lineTo(width+space, 0) + canvas.moveTo(0, -10) + canvas.lineTo(0, height+space) + canvas.strokeStyle = style||"gray" + canvas.lineWidth = 2 + canvas.stroke() + return this + }, + drawXLabel: function(step) { + canvas.beginPath() + for (var pos = step; pos < width; pos += step) { + canvas.moveTo(pos, 0) + canvas.lineTo(pos, -5) + } + canvas.strokeStyle = "red" + canvas.lineWidth = 2 + canvas.stroke() + return this + }, + drawYGrid: function(step) { + canvas.beginPath() + for (var pos = step; pos < height; pos += step) { + canvas.moveTo(-5, pos) + canvas.lineTo(width, pos) + } + canvas.strokeStyle = "#999" + canvas.lineWidth = 1 + canvas.stroke() + return this + }, + drawData: function() { + var col = msg.append.length + var row = msg[msg.append[0]].length + var step = width / (row - 1) + + switch (type) { + case "trend": + this.drawAxies(10).drawXLabel(step) + canvas.beginPath() + msg.append.forEach(function(key) { + var max = 0 + msg[key].forEach(function(value, index, array) { + parseInt(value) > max && (max = parseInt(value)) + }) + msg[key].forEach(function(value, index, array) { + if (index == 0) { + canvas.moveTo(0, value/max*height) + } else { + canvas.lineTo(step*index, value/max*height) + } + }) + }) + canvas.strokeStyle = "black" + canvas.lineWidth = 1 + canvas.stroke() + break + + case "weight": + this.reset() + + var nline = 0 + msg.append.forEach(function(key, index) { + !isNaN(parseInt(msg[key][0])) && nline++ + }) + var space = width / (nline+1) + + var order = 0 + msg.append.forEach(function(key, index) { + if (isNaN(parseInt(msg[key][0]))) { + return + } + order++ + + canvas.resetTransform() + canvas.setTransform(1, 0, 0, -1, space*order, height/2) + + var total = 0 + msg[key].forEach(function(value, index, array) { + total += parseInt(value)/1 + }) + var sum = 0 + + msg[key].forEach(function(value, index, array) { + value = parseInt(parseInt(value)/1) + if ((value)/total < 0.01) { + return + } + canvas.beginPath() + canvas.moveTo(0, 0) + var a = sum/total*Math.PI*2 + var b = (sum+value)/total*Math.PI*2 + kit.Log(a, b) + canvas.arc(0, 0, (space/2)-20, a, b, false) + canvas.closePath() + canvas.strokeStyle = "black" + canvas.lineWidth = 1 + canvas.stroke() + sum+=value + }) + }) + break + } + return this + }, + view: [], + drawView: function() { + var that = this + this.view.forEach(function(view) { + that[view.type](view.meta) + }) + }, + drawPoint: function(meta) { + canvas.save() + canvas.translate(meta.x0, meta.y0) + canvas.beginPath() + canvas.moveTo(-10, 0) + canvas.lineTo(10, 0) + canvas.moveTo(0, -10) + canvas.lineTo(0, 10) + canvas.strokeStyle = meta.style + canvas.stroke() + canvas.restore() + return meta + }, + drawLine: function(meta) { + canvas.save() + canvas.beginPath() + canvas.moveTo(meta.x0, meta.y0) + canvas.lineTo(meta.x1, meta.y1) + canvas.strokeStyle = meta.style + canvas.stroke() + canvas.restore() + return meta + }, + drawRect: function(meta) { + canvas.save() + canvas.strokeStyle = meta.style + canvas.strokeRect(meta.x0, meta.y0, meta.x1-meta.x0, meta.y1-meta.y0) + canvas.restore() + return meta + }, + drawCircle: function(meta) { + var r = Math.sqrt((meta.x1-meta.x0)*(meta.x1-meta.x0)+(meta.y1-meta.y0)*(meta.y1-meta.y0)) + canvas.save() + canvas.beginPath() + canvas.arc(meta.x0, meta.y0, r, 0, Math.PI*2, true) + canvas.strokeStyle = meta.style + canvas.stroke() + canvas.restore() + return meta + }, + drawEllipse: function(meta) { + var r0 = Math.abs(meta.x1-meta.x0) + var r1 = Math.abs(meta.y1-meta.y0) + + canvas.save() + canvas.beginPath() + canvas.translate(meta.x0, meta.y0) + + if (r1 > r0) { + canvas.scale(1, r1/r0) + canvas.arc(0, 0, r1, 0, Math.PI*2, true) + // + // canvas.scale((meta.x1-meta.x0)/(meta.y1-meta.y0), (meta.y1-meta.y0)/(meta.x1-meta.x0)) + // canvas.arc(0, 0, Math.sqrt((meta.y1-meta.y0)*(meta.x1-meta.x0)), 0, Math.PI*2, true) + } else { + canvas.scale(r0/r1, 1) + canvas.arc(0, 0, r0, 0, Math.PI*2, true) + } + + canvas.strokeStyle = meta.style + canvas.stroke() + canvas.restore() + return meta + }, + shape: "drawLine", + movePoint: function(point, x, y) { + if (this.begin) { + this.drawData() + this.drawView() + this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y}) + // this.drawRect({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y, style: "red"}) + } + point.innerHTML = x+","+y + }, + pushPoint: function(point, x, y) { + if (this.begin) { + this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})}) + this.view.push({type: shape, meta: this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})}) + delete(this.begin) + } else { + this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})}) + this.begin = {x: x, y:y} + } + }, + button: { + "trend": function() { + type = "trend" + what.drawData() + }, + "weight": function() { + type = "weight" + what.drawData() + }, + "line": function() { + shape = "drawLine" + }, + "rect": function() { + shape = "drawRect" + }, + "circle": function() { + shape = "drawCircle" + }, + "ellipse": function() { + shape = "drawEllipse" + }, + }, + } + return what +}