ZenLiuCN/PetiteVue_Template.html

## d3_template.html
<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>

## paper_template.html
<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>

## PetiteVue_Template.html
<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>
	<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>
	<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>
	<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>