Last active
January 2, 2022 10:06
-
-
Save ZenLiuCN/c561c5e4d102455abb695b5c47c7ffad to your computer and use it in GitHub Desktop.
PetiteVue Modular Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>d3 js template</title> | |
<style> | |
body { | |
font-family: Helvetica Neue, Arial, sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- #region D3Chart --> | |
<script src="https://unpkg.com/d3"></script> | |
<script type="module"> | |
// import * as d3 from 'https://unpkg.com/d3?module' | |
const init = () => { | |
//return if already register | |
if (window.$components && window.$components.D3Chart) return | |
// some elements depended on | |
//register component | |
window.$components = Object.assign( | |
{ | |
D3Chart: (prop) => ({ | |
$template: '', | |
onReady(root){ | |
const svg=d3.select(root) | |
.append('svg') | |
.attr('width', '100%') | |
.attr('height', '100%') | |
const w=parseFloat(svg.style('width')) | |
const h=parseFloat(svg.style('height')) | |
const bw=w/5 | |
const scale=d3.scaleLinear() | |
.domain([0, 12]) | |
.range([0, 120]) | |
const chart=svg.selectAll('rect') | |
.data([10, 2, 3, 4, 5]) | |
.enter() | |
.append('rect') | |
.attr('y', d=>h-scale(d)) | |
.attr('height', d=>scale(d)) | |
.attr('width', bw) | |
.attr('transform', (d, i)=>`translate(${[bw*i, 0]})`) | |
.attr('fill', '#566fde') | |
}, | |
}), | |
}, | |
window.$components | |
) | |
} | |
init() | |
</script> | |
<!-- #endregion --> | |
<!-- initial application --> | |
<script type="module"> | |
import { createApp } from 'https://unpkg.com/petite-vue?module' | |
createApp(window.$components).mount() | |
</script> | |
<!-- use component --> | |
<div id="chart" v-scope="D3Chart()" @vue:mounted="onReady('#chart')" style="width:96vw;height:96vh"></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>paper js template</title> | |
<style> | |
body { | |
font-family: Helvetica Neue, Arial, sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- #region paper --> | |
<script type="text/javascript" src="https://unpkg.com/paper"></script> | |
<script type="module"> | |
const init = () => { | |
//return if already register | |
if (window.$components && window.$components.Paper) return | |
// some elements depended on | |
//register component | |
window.$components = Object.assign( | |
{ | |
Paper: (prop) => ({ | |
$template: '', | |
ele: prop?.ele ?? 'paper', | |
onReady(root){ | |
const el = document.createElement('canvas') | |
el.setAttribute('id', this.ele) | |
el.setAttribute('resize', '') | |
el.setAttribute('style', 'width:96vw;height:96vh') | |
root.appendChild(el) | |
paper.setup(el) | |
var path = new paper.Path(); | |
// Give the stroke a color | |
path.strokeColor = 'black'; | |
var start = new paper.Point(100, 100); | |
// Move to start and draw a line from there | |
path.moveTo(start); | |
// Note that the plus operator on Point objects does not work | |
// in JavaScript. Instead, we need to call the add() function: | |
path.lineTo(start.add([ 200, -50 ])); | |
// Draw the view now: | |
paper.view.draw(); | |
}, | |
}), | |
}, | |
window.$components | |
) | |
} | |
init() | |
</script> | |
<!-- #endregion --> | |
<!-- initial application --> | |
<script type="module"> | |
import { createApp } from 'https://unpkg.com/petite-vue?module' | |
createApp(window.$components).mount() | |
</script> | |
<!-- use component --> | |
<div v-scope="Paper()" @vue:mounted="onReady($el)" style="width:96vw;height:96vh"></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>template</title> | |
<style> | |
body { | |
font-family: Helvetica Neue, Arial, sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- #region SVG Chart --> | |
<script type="module"> | |
const init = () => { | |
//return if already register | |
if (window.$components && window.$components.SvgChart) return | |
// some elements depended on | |
const valueToPoint = (value, index, total) => { | |
var x = 0 | |
var y = -value * 0.8 | |
var angle = ((Math.PI * 2) / total) * index | |
var cos = Math.cos(angle) | |
var sin = Math.sin(angle) | |
var tx = x * cos - y * sin + 100 | |
var ty = x * sin + y * cos + 100 | |
if (ty < 0) debugger | |
return { | |
x: tx, | |
y: ty, | |
} | |
} | |
//register component | |
window.$components = Object.assign( | |
{ | |
SvgChart: (prop) => ({ | |
$template: '#tpl-canv', | |
newLabel: prop.newLabel ?? '', | |
stats: prop.stats ?? [ | |
{ label: 'A', val: 100 }, | |
{ label: 'B', val: 100 }, | |
{ label: 'C', val: 100 }, | |
], | |
get pointsString() { | |
return this.getPoints() | |
.map(({ x, y }) => `${x},${y}`) | |
.join(' ') | |
}, | |
getPoints(offset = 0) { | |
const total = this.stats.length | |
return this.stats.map((stat, i) => ({ | |
...valueToPoint(+stat.val + offset, i, total), | |
label: stat.label, | |
})) | |
}, | |
add(e) { | |
e.preventDefault() | |
if (!this.newLabel) return | |
this.stats.push({ | |
label: this.newLabel, | |
val: 100, | |
}) | |
this.newLabel = '' | |
}, | |
remove(stat) { | |
if (this.stats.length > 3) { | |
this.stats.splice(this.stats.indexOf(stat), 1) | |
} else { | |
alert("Can't delete more!") | |
} | |
}, | |
}), | |
}, | |
window.$components | |
) | |
} | |
init() | |
</script> | |
<template id="tpl-canv"> | |
<svg width="200" height="200"> | |
<g> | |
<polygon :points="pointsString"></polygon> | |
<circle cx="100" cy="100" r="80"></circle> | |
<text v-for="{ x, y, label } in getPoints(10)" :x="x" :y="y"> | |
{{ label }} | |
</text> | |
</g> | |
</svg> | |
<div v-for="stat in stats"> | |
<label>{{stat.label}}</label> | |
<input type="range" v-model="stat.val" min="0" max="100" /> | |
<span class="valLabel">{{stat.val}}</span> | |
<button @click="remove(stat)" class="remove">X</button> | |
</div> | |
<form id="add"> | |
<input name="newlabel" v-model="newLabel" /> | |
<button @click="add">添统计项</button> | |
</form> | |
<pre id="raw">{{ stats }}</pre> | |
<style> | |
input[type='range'] { | |
cursor: pointer; | |
} | |
button { | |
cursor: pointer; | |
} | |
polygon { | |
fill: #42b983; | |
opacity: 0.75; | |
} | |
circle { | |
fill: transparent; | |
stroke: #999; | |
} | |
text { | |
font-family: Helvetica Neue, Arial, sans-serif; | |
font-size: 10px; | |
fill: #666; | |
} | |
.valLabel { | |
width: 2.5rem; | |
display: inline-block; | |
} | |
label { | |
display: inline-block; | |
margin-left: 10px; | |
width: 20px; | |
} | |
#raw { | |
position: absolute; | |
top: 0; | |
left: 300px; | |
} | |
</style> | |
</template> | |
<!-- #endregion --> | |
<!-- initial application --> | |
<script type="module"> | |
import { createApp } from 'https://unpkg.com/petite-vue?module' | |
createApp(window.$components).mount() | |
</script> | |
<!-- use component --> | |
<div | |
v-scope="SvgChart({stats: [{ label: 'A', val: 100 },{ label: 'B', val: 100 },{ label: 'C', val: 100 },{ label: 'D', val: 100 },{ label: 'E', val: 100 }]})" | |
></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment