• R/O
  • SSH

micro-radar: Commit

html5 canvas radar graphing library


Commit MetaInfo

Revision75aa66cc9dd52a4c9dfdf9ba0e3d0a0dee3705ef (tree)
Time2017-04-13 14:53:19
Authorfrostbane <frostbane@prog...>
Commiterfrostbane

Log Message

(empty log message)

Change Summary

Incremental Difference

diff -r 000000000000 -r 75aa66cc9dd5 .hgflow
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.hgflow Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,7 @@
1+[branchname]
2+master = default
3+develop = develop
4+feature = feature/
5+release = release/
6+hotfix = hotfix/
7+support = support/
diff -r 000000000000 -r 75aa66cc9dd5 .hgignore
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.hgignore Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,6 @@
1+syntax: regexp
2+tmp\/.*
3+.zim\/.*
4+bin/*
5+doc/*
6+node_modules/*
diff -r 000000000000 -r 75aa66cc9dd5 .npmignore
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.npmignore Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,1 @@
1+node_modules/
\ No newline at end of file
diff -r 000000000000 -r 75aa66cc9dd5 LICENSE.md
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/LICENSE.md Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,44 @@
1+# Copyright (c) 2016, 2017 Frostbane Ac. All rights reserved. #
2+
3+Redistribution and use in source and binary forms - with or without
4+modification - are permitted for any purpose, provided that
5+redistributions in source form retain this entire copyright notice and
6+indicate the origin and nature of any modifications.
7+
8+Outright copyright infringement
9+
10+* Don't just copy this and change the name.
11+
12+* Selling the unmodified original with no work done what-so-ever
13+
14+* Modifying the original work to contain hidden harmful content.
15+
16+
17+```
18+THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED
19+WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
20+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
21+IN NO EVENT SHALL FROSTBANE AC BE LIABLE FOR ANY DIRECT, INDIRECT,
22+INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
23+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS
24+OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
26+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
27+USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
28+DAMAGE.
29+```
30+
31+Redistribution and use in source and binary forms, with or without
32+modification, are permitted provided that the following conditions are
33+met:
34+
35+1. Redistributions of source code must retain the above copyright
36+notice, this list of conditions and the following disclaimer.
37+
38+2. Redistributions in binary form must reproduce the above copyright
39+notice, this list of conditions and the following disclaimer in the
40+documentation and/or other materials provided with the distribution.
41+
42+3. Neither the name of micro-dialog nor the names of its
43+contributors may be used to endorse or promote products derived from
44+this software without specific prior written permission.
diff -r 000000000000 -r 75aa66cc9dd5 jsdoc.conf.json
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/jsdoc.conf.json Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,26 @@
1+{
2+ "plugins" : [],
3+ "templates": {
4+ "cleverLinks" : true,
5+ "monospaceLinks" : true,
6+ "default" : {
7+ "outputSourceFiles": true
8+ },
9+ "applicationName": "micro-radar",
10+ "disqus" : "",
11+ "googleAnalytics": "",
12+ "openGraph" : {
13+ "title" : "",
14+ "type" : "website",
15+ "image" : "",
16+ "site_name": "",
17+ "url" : ""
18+ },
19+ "meta" : {
20+ "title" : "",
21+ "description": "",
22+ "keyword" : ""
23+ },
24+ "linenums" : true
25+ }
26+}
diff -r 000000000000 -r 75aa66cc9dd5 package.json
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/package.json Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,35 @@
1+{
2+ "name" : "micro-radar",
3+ "version" : "v0.0.0",
4+ "description" : "Radar graph",
5+ "repository" : {
6+ "type": "hg",
7+ "url" : "https://bitbucket.org/frostbane/micro-radar"
8+ },
9+ "main" : "./microradar.js",
10+ "license" : "SEE LICENSE IN LICENSE.md",
11+ "keywords" : [
12+ "micro-radar",
13+ "radar-micro",
14+ "radar",
15+ "graph",
16+ "canvas"
17+ ],
18+ "devDependencies": {
19+ "jxunit" : "latest",
20+ "grunt-jxunit" : "latest",
21+ "jsdoc" : "latest",
22+ "jsdoc-sable" : "latest",
23+ "grunt" : "latest",
24+ "grunt-cli" : "latest",
25+ "grunt-jsdoc" : "latest",
26+ "grunt-contrib-copy" : "latest",
27+ "grunt-contrib-uglify": "latest"
28+ },
29+ "dependencies": {
30+ },
31+ "author" : {
32+ "name" : "Frostbane Ac",
33+ "email": "frostbane@programmer.net"
34+ }
35+}
diff -r 000000000000 -r 75aa66cc9dd5 src/radar.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/radar.js Thu Apr 13 14:53:19 2017 +0900
@@ -0,0 +1,328 @@
1+var RadarUI = function(settings){
2+ "use strict";
3+
4+ var options;
5+ var canvas = {};
6+ var cxt;
7+ var chartClass = "prototype radar-ui";
8+ var chartSelector = ".prototype.radar-ui";
9+
10+ var __removeCanvas = function(){
11+ $$(chartSelector + ".canvas-wrap").map(function(chart){
12+ chart.remove();
13+ });
14+
15+ canvas = {};
16+ cxt = null;
17+ };
18+
19+ var __newCanvas = function(){
20+ __removeCanvas();
21+
22+ var div = options.container.down(chartSelector + ".canvas-wrap");
23+ if(div === undefined){
24+ div = document.createElement("div");
25+ div.addClassName(chartClass + " canvas-wrap");
26+ options.container.appendChild(div);
27+ }
28+
29+ div.setStyle({
30+ 'position' :'relative',
31+ //'margin-top': "0 px", //this.height * 0.20333 +
32+ });
33+
34+ canvas = document.createElement('canvas');
35+ canvas.width = options.width;
36+ canvas.height = options.height;
37+ canvas.style.position = "relative";
38+
39+ div.appendChild(canvas);
40+
41+ /*
42+ if(this.settings.insertFirst){
43+ if(this.ele.firstChild){
44+ // this.ele.insertBefore(canvas,this.ele.firstChild);
45+ }
46+ }else{
47+ //this.ele.appendChild(canvas);
48+ }
49+ */
50+
51+ cxt = canvas.getContext('2d');
52+
53+ canvas.setStyle({
54+ opacity :1,
55+ width :"100%",
56+ });
57+
58+ //var that = this;
59+
60+ //$(window).resize(function(){
61+ // canvas.width = that.dataDiv.clientWidth;
62+ // canvas.height = that.dataDiv.clientWidth / that.settings.aspectRatio;
63+ //// that.reDraw();
64+ //});
65+ };
66+
67+ var __draw = function(){
68+ __newCanvas();
69+
70+ var spacing = Math.ceil(options.width / 20);
71+
72+ //create grid
73+ for(var k = options.min; k <= options.max; k += options.step){
74+ cxt.beginPath();
75+ cxt.arc(
76+ options.width / 2,
77+ options.height / 2,
78+ options.step * spacing * k,
79+ 0, 2 * Math.PI,
80+ false
81+ );
82+
83+ cxt.strokeStyle = "#C0C0C0";
84+ cxt.fillStyle = "#EFEFEF";
85+ cxt.stroke();
86+ if(options.showAxisLabels)
87+ cxt.fillText(k,
88+ options.width / 2 + options.step * spacing * k + 4,
89+ options.height / 2 - 2);
90+
91+ }
92+
93+ var size = options.inputs.length;
94+
95+ for(var j = 0; j < size; j += 1){
96+ cxt.beginPath();
97+ cxt.moveTo(options.width / 2, options.height / 2);
98+ var x = options.width / 2 + Math.cos((Math.PI * 2) * (j / size)) * spacing * options.max;
99+ var y = options.height / 2 + Math.sin((Math.PI * 2) * (j / size)) * spacing * options.max;
100+ cxt.lineTo(x, y);
101+ cxt.stroke();
102+ }
103+
104+ //this.newCanvas('part',200);
105+
106+ //graph values
107+ cxt.beginPath();
108+ var first = true;
109+
110+ var end = {
111+ x :null,
112+ y :null
113+ };
114+
115+ options.inputs.map(function(input, i){
116+ var val = input.select.value;
117+
118+ var x = options.width / 2 + Math.cos((Math.PI * 2) * (i / size)) * spacing * val;
119+ var y = options.height / 2 + Math.sin((Math.PI * 2) * (i / size)) * spacing * val;
120+ if(first){
121+ cxt.moveTo(x, y);
122+ end.x = x;
123+ end.y = y;
124+ first = false;
125+ }
126+
127+ cxt.lineTo(x, y);
128+
129+ });
130+
131+
132+ cxt.lineTo(end.x, end.y);
133+ var grad = cxt.createLinearGradient(0, 0, 0, options.height);
134+ grad.addColorStop(0, "rgba(" + options.color.r + "," + options.color.g + "," + options.color.b + ", 0)");
135+ grad.addColorStop(1, "rgba(" + options.color.r + "," + options.color.g + "," + options.color.b + ", 1)");
136+ cxt.fillStyle = grad;
137+ cxt.shadowBlur = 2;
138+ cxt.shadowColor = "rgba(0, 0, 0, .2)";
139+ cxt.stroke();
140+ cxt.fill();
141+
142+ //create labels
143+ //this.newCanvas('labels',1000);
144+ var additionalLineDistance = options.lineDistance;
145+
146+ var i = 0;
147+
148+ var labelCount = size;
149+
150+ options.inputs.map(function(input, key){
151+ var val = input.name;
152+
153+ //var textLabel = "評価" +
154+ // (i + 2 > labelCount ?
155+ // (i + 2 - labelCount) :
156+ // (i + 2));
157+ var textLabel = val;
158+
159+ //that.newCanvas('label-'+i, i * 250);
160+ cxt.fillStyle = "rgba(0,0,0,.8)";
161+ cxt.strokeStyle = "rgba(0,0,0,.5)";
162+ cxt.font = options.fontLabel;
163+ var dist = Math.min(spacing * val, size * spacing);
164+ var x = options.width / 2 + Math.cos((Math.PI * 2) * (i / size)) * spacing * val;
165+ var y = options.height / 2 + Math.sin((Math.PI * 2) * (i / size)) * spacing * val;
166+
167+ var textX = options.width / 2 + Math.cos((Math.PI * 2) * (i / size)) * spacing * options.max;
168+ var textY = options.height / 2 + Math.sin((Math.PI * 2) * (i / size)) * spacing * options.max;// * 1.5;
169+
170+ if(textX < options.width / 2){
171+ textX -= (options.max * 3);
172+
173+ if(additionalLineDistance){
174+ textX -= additionalLineDistance;
175+ }
176+
177+ cxt.textAlign = "end";
178+ cxt.beginPath();
179+ var widthA = cxt.measureText(textLabel).width;
180+ cxt.moveTo(textX - widthA - 15, textY + 4);
181+ cxt.lineTo(textX, textY + 4);
182+ cxt.lineTo(x - 2, y);
183+ cxt.lineWidth = 2;
184+ //cxt.stroke(); //render stroke
185+
186+ }else{
187+ textX += (options.max * 3);
188+
189+ if(additionalLineDistance){
190+ textX += additionalLineDistance;
191+ }
192+
193+ cxt.textAlign = "start";
194+ cxt.beginPath();
195+ var widthB = cxt.measureText(textLabel).width;
196+ cxt.moveTo(x + 2, y);
197+ cxt.lineTo(textX, textY + 4);
198+ cxt.lineTo(textX + widthB + 15, textY + 4);
199+ cxt.lineWidth = 2;
200+ //cxt.stroke(); //render stroke
201+
202+ }
203+
204+ cxt.fillText(textLabel, textX, textY);
205+ //For arrows that aren't done.
206+ i += 1;
207+ });
208+
209+ //create title
210+ if(options.title){
211+ //this.newCanvas('title',1000);
212+ cxt.font = options.fontTitle;
213+ cxt.fillText(options.title, 10, 30);
214+
215+ }
216+
217+ };
218+
219+ //var __redraw = function(){
220+ // __removeCanvas();
221+ //
222+ // this.canvas = {};
223+ // this.draw();
224+ //};
225+
226+ var __initialize = function(settings){
227+ //if($$(chartSelector).length > 0)
228+ //return;
229+
230+ var container = $$(settings.container)[0];
231+ $(container).addClassName(chartClass);
232+
233+ if(!container)
234+ return [];
235+
236+ settings.min = 0;
237+ settings.max = 0;
238+
239+ var inputs = $$(settings.inputs)
240+ .filter(function(input){
241+ return input.getElementsByTagName("select")[0];
242+ })
243+ .map(function(input){
244+ var options = input.getElementsByTagName("option");
245+ var minmax = Array.prototype.slice.call(options).reduce(function(current, option, index){
246+ var value = parseInt(option.value);
247+
248+ if(value > current.max)
249+ current.max = value;
250+
251+ if(value < current.min)
252+ current.min = value;
253+
254+ if(value > settings.max)
255+ settings.max = value;
256+
257+ if(value < settings.min)
258+ settings.min = value;
259+
260+ return current;
261+
262+ }, {
263+ min :0,
264+ max :0,
265+ });
266+
267+ var v = {
268+ name :input.getElementsByClassName("label-body")[0].innerHTML,
269+ select :input.getElementsByTagName("select")[0],
270+ min :minmax.min,
271+ max :minmax.max,
272+ };
273+
274+ $(v.select).on("change", __draw);
275+
276+ return v;
277+ });
278+
279+ Event.observe(window, "resize", function(){
280+ var w = window.innerWidth;
281+
282+ window.setTimeout(function(){
283+ if(w === window.innerWidth){
284+ options.width = options.container.clientWidth;
285+ options.height = options.width / options.aspectRatio;
286+ __draw();
287+ }
288+ //else {
289+ // console.log("resizing");
290+ //}
291+
292+ }, 100);
293+ });
294+
295+ var defaultColor = {
296+ r :124,
297+ g :0,
298+ b :240,
299+ };
300+
301+ options = {};
302+ options.container = container;
303+ options.inputs = inputs;
304+ options.title = settings.title || "";
305+ options.step = settings.step || 1;
306+ options.color = settings.color || defaultColor;
307+ options.aspectRatio = settings.aspectRatio || 1;
308+ options.width = options.container.clientWidth;
309+ options.height = options.width / options.aspectRatio;
310+ options.min = settings.min;
311+ options.max = options.fixedMaxValue || settings.max;
312+ options.fixedMaxValue = settings.fixedMaxValue || null;
313+ options.showAxisLabels = settings.showAxisLabels;
314+ options.lineDistance = settings.lineDistance || 0;
315+ options.fontLabel = settings.font || "12px Verdana";
316+ options.fontTitle = settings.fontTitle || "bold 22px Verdana";
317+
318+ };
319+
320+ __initialize(settings);
321+
322+ return {
323+ initialize :__initialize,
324+ draw :__draw,
325+ remove :__removeCanvas,
326+ };
327+
328+};
Show on old repository browser