omi-chart - add bubble chart
This commit is contained in:
张磊
parent
7d0dd070ef
commit
806b62cac9
|
|
@ -207,4 +207,27 @@ var ChartBase = function (_WeElement) {
|
|||
}]);
|
||||
|
||||
return _class7;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-bubble', function (_ChartBase8) {
|
||||
_inherits(_class8, _ChartBase8);
|
||||
|
||||
function _class8() {
|
||||
_classCallCheck(this, _class8);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class8.__proto__ || Object.getPrototypeOf(_class8)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class8, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class8;
|
||||
}(ChartBase));
|
||||
|
|
@ -86,4 +86,15 @@ define('chart-polar-area', class extends ChartBase {
|
|||
options: this.props.options
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
define('chart-bubble', class extends ChartBase {
|
||||
installed() {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omi-chart",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "Simple HTML5 Charts using the <chart-x> tag powered by [omi](https://github.com/Tencent/omi) and [chart.js](https://www.chartjs.org/).",
|
||||
"main": "index.es5.js",
|
||||
"jsnext:main": "index.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omi Chart REPL</title>
|
||||
<link rel="shortcut icon" href="https://www.chartjs.org/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="//unpkg.com/normalize.css@5.0.0" />
|
||||
<link rel="stylesheet" type="text/css" href="//unpkg.com/codemirror@5.20.2/lib/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top:270px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-height: 270px;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://github.com/Tencent/omi/tree/master/packages/omi-chart" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a>
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">const COLORS = [
|
||||
'#4dc9f6',
|
||||
'#f67019',
|
||||
'#f53794',
|
||||
'#537bc4',
|
||||
'#acc236',
|
||||
'#166a8f',
|
||||
'#00a950',
|
||||
'#58595b',
|
||||
'#8549ba'
|
||||
];
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
install(){
|
||||
this.chartData = {
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
data: [
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() }
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
data: [
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() },
|
||||
{ x: rd(), y: rd(), v: rd() }
|
||||
]
|
||||
}]
|
||||
}
|
||||
|
||||
this.chartOptions = {
|
||||
aspectRatio: 1,
|
||||
legend: false,
|
||||
tooltips: false,
|
||||
|
||||
elements: {
|
||||
point: {
|
||||
backgroundColor: colorize.bind(null, false),
|
||||
|
||||
borderColor: colorize.bind(null, true),
|
||||
|
||||
borderWidth: function(context) {
|
||||
return Math.min(Math.max(1, context.datasetIndex + 1), 8)
|
||||
},
|
||||
|
||||
hoverBackgroundColor: 'transparent',
|
||||
|
||||
hoverBorderColor: function(context) {
|
||||
return COLORS[context.datasetIndex%COLORS.length]
|
||||
},
|
||||
|
||||
hoverBorderWidth: function(context) {
|
||||
var value = context.dataset.data[context.dataIndex]
|
||||
return Math.round(8 * value.v / 1000);
|
||||
},
|
||||
|
||||
radius: function(context) {
|
||||
var value = context.dataset.data[context.dataIndex]
|
||||
var size = context.chart.width;
|
||||
var base = Math.abs(value.v) / 100;
|
||||
return (size / 24) * base;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<chart-bubble width={Math.min(window.innerWidth-30, 600)} data={this.chartData} options={this.chartOptions} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
|
||||
function rd(){
|
||||
return Math.random() * 200 - 100
|
||||
}
|
||||
|
||||
function colorize(opaque, context) {
|
||||
var value = context.dataset.data[context.dataIndex]
|
||||
var x = value.x / 100
|
||||
var y = value.y / 100
|
||||
var r = x < 0 && y < 0 ? 250 : x < 0 ? 150 : y < 0 ? 50 : 0
|
||||
var g = x < 0 && y < 0 ? 0 : x < 0 ? 50 : y < 0 ? 150 : 250
|
||||
var b = x < 0 && y < 0 ? 0 : x > 0 && y > 0 ? 250 : 150
|
||||
var a = opaque ? 1 : 0.5 * value.v / 1000
|
||||
|
||||
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
|
||||
}</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//unpkg.com/babel-standalone@6.18.2/babel.min.js"></script>
|
||||
<script src="//unpkg.com/codemirror@5.20.2/lib/codemirror.js"></script>
|
||||
<script src="//unpkg.com/codemirror@5.20.2/mode/xml/xml.js"></script>
|
||||
<script src="//unpkg.com/codemirror@5.20.2/mode/javascript/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
console.log(encodeURIComponent(b))
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -222,6 +222,29 @@
|
|||
|
||||
return _class7;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-bubble', function (_ChartBase8) {
|
||||
_inherits(_class8, _ChartBase8);
|
||||
|
||||
function _class8() {
|
||||
_classCallCheck(this, _class8);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class8.__proto__ || Object.getPrototypeOf(_class8)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class8, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class8;
|
||||
}(ChartBase));
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue