update readme
This commit is contained in:
张磊
parent
29d83d6077
commit
354e0626e4
|
|
@ -12,4 +12,6 @@
|
|||
- [Multi Axis](https://tencent.github.io/omi/packages/omi-chart/repl/bar-multi-axis.html)
|
||||
- [Stacked Group](https://tencent.github.io/omi/packages/omi-chart/repl/bar-stacked-group.html)
|
||||
- Line charts
|
||||
- [Base](https://tencent.github.io/omi/packages/omi-chart/repl/line-base.html)
|
||||
- [Base](https://tencent.github.io/omi/packages/omi-chart/repl/line-base.html)
|
||||
- [Multi Axis](https://tencent.github.io/omi/packages/omi-chart/repl/line-multi-axis.html)
|
||||
- [Stepped](https://tencent.github.io/omi/packages/omi-chart/repl/line-stepped.html)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
<!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;
|
||||
}
|
||||
</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 chartColors = [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
]
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
install(){
|
||||
this.chartData = {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 5, 3],
|
||||
yAxisID: 'y-axis-1',
|
||||
backgroundColor: Chart.helpers.color(chartColors[0]).alpha(0.2).rgbString(),
|
||||
borderColor: chartColors[0],
|
||||
borderWidth: 1
|
||||
},{
|
||||
label: '# of Votes',
|
||||
data: [7, 17, 13, 5, 12, 13],
|
||||
yAxisID: 'y-axis-2',
|
||||
backgroundColor: Chart.helpers.color(chartColors[1]).alpha(0.2).rgbString(),
|
||||
borderColor: chartColors[1],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.chartOptions = {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Omi-chart Bar Chart - Multi Axis'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'left',
|
||||
id: 'y-axis-1',
|
||||
}, {
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'right',
|
||||
id: 'y-axis-2',
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClick = ()=>{
|
||||
this.chartData.datasets.forEach((dataset, index) => {
|
||||
dataset.data.forEach((item, subIndex) => {
|
||||
dataset.data[subIndex] = Math.random() * 100 - index * Math.random() * 200
|
||||
})
|
||||
})
|
||||
this.update()
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<chart-line width={575} data={this.chartData} options={this.chartOptions} />
|
||||
<div>
|
||||
<button onClick={this.onClick}>Change data</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</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>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<!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;
|
||||
}
|
||||
</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">define('my-app', class extends WeElement {
|
||||
install(){
|
||||
const data = [
|
||||
rd(),
|
||||
rd(),
|
||||
rd(),
|
||||
rd(),
|
||||
rd(),
|
||||
rd()
|
||||
]
|
||||
|
||||
const steppedLineSettings = [{
|
||||
steppedLine: false,
|
||||
label: 'No Step Interpolation',
|
||||
color: 'rgb(255, 99, 132)'
|
||||
}, {
|
||||
steppedLine: true,
|
||||
label: 'Step Before Interpolation',
|
||||
color: 'rgb(255, 159, 64)'
|
||||
}, {
|
||||
steppedLine: 'before',
|
||||
label: 'Step Before Interpolation',
|
||||
color:'rgb(75, 192, 192)'
|
||||
}, {
|
||||
steppedLine: 'after',
|
||||
label: 'Step After Interpolation',
|
||||
color: 'rgb(54, 162, 235)'
|
||||
}]
|
||||
|
||||
this.configs = []
|
||||
steppedLineSettings.forEach((details) => {
|
||||
this.configs.push(createConfig(details, data))
|
||||
})
|
||||
|
||||
}
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
{this.configs.map(config => (
|
||||
<chart-line width={575} data={config.data} options={config.options} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
|
||||
function createConfig(details, data) {
|
||||
return {
|
||||
data: {
|
||||
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
|
||||
datasets: [{
|
||||
label: 'steppedLine: ' + details.steppedLine,
|
||||
steppedLine: details.steppedLine,
|
||||
data: data,
|
||||
borderColor: details.color,
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: details.label,
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function rd(){
|
||||
return Math.random() * 100
|
||||
}
|
||||
|
||||
</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>
|
||||
Loading…
Reference in New Issue