chart
This commit is contained in:
parent
5b27cc07d4
commit
446602b630
35
app.js
35
app.js
@ -1,21 +1,20 @@
|
|||||||
//@ts-check
|
//@ts-check
|
||||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
||||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
||||||
|
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
||||||
|
|
||||||
import TW from "https://esm.sh/@twind/core";
|
const Configure = {presets: [TWPreTail(), TWPreAuto()]};
|
||||||
import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
|
||||||
import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
const ShadowDiv = document.createElement("div");
|
||||||
|
const ShadowCSS = document.createElement("style");
|
||||||
|
ShadowDOM.append(ShadowCSS);
|
||||||
|
ShadowDOM.append(ShadowDiv);
|
||||||
|
TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
|
||||||
|
|
||||||
const root = document.querySelector("#app");
|
import UI from "./ui.js";
|
||||||
const rootShadow = root.attachShadow({mode: "open"});
|
import {render} from "https://esm.sh/preact@10.11.3/compat";
|
||||||
const rootShadowRoot = document.createElement("strong");
|
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
rootShadow.append(rootShadowRoot);
|
render(html`
|
||||||
*/
|
<${UI.Button} icon="+">hey!<//>
|
||||||
|
<${UI.Chart}><p>SUP</p><//>
|
||||||
install({presets:[preTailwind(), preAutoprefix()]});
|
`, ShadowDiv);
|
||||||
|
|
||||||
|
|
||||||
React.render(html`
|
|
||||||
<p class="p-4">suuupu</p>
|
|
||||||
<${UI.Button} label="Play Tone" icon=">" light/>
|
|
||||||
`, root);
|
|
||||||
39
index.html
39
index.html
@ -1,39 +1,2 @@
|
|||||||
<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
<script type="module" src="app.js"></script>
|
||||||
<script type="module">
|
|
||||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
|
||||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
|
||||||
|
|
||||||
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
|
||||||
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
|
||||||
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
|
||||||
|
|
||||||
const styles = document.createElement("style");
|
|
||||||
const root = document.querySelector("#app");
|
|
||||||
|
|
||||||
const appShadow = root.attachShadow({mode: "open"});
|
|
||||||
const appShadowRoot = document.createElement("div");
|
|
||||||
appShadow.append(styles);
|
|
||||||
appShadow.append(appShadowRoot);
|
|
||||||
|
|
||||||
const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.cssom(styles));
|
|
||||||
TW.observe(inst, appShadowRoot);
|
|
||||||
|
|
||||||
const El =()=>
|
|
||||||
{
|
|
||||||
const [StateGet, StateSet] = React.useState(false);
|
|
||||||
return html`
|
|
||||||
<div class=${StateGet ? "text-white bg-black": "text-red"} onClick=${e=>StateSet(!StateGet)}>
|
|
||||||
click
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
React.render(html`
|
|
||||||
<p class="text(yellow-500 lg) p-4 font(sans black)">
|
|
||||||
inside (should be styled)
|
|
||||||
<${El}/>
|
|
||||||
</p>`, appShadowRoot);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
64
ui.js
64
ui.js
@ -1,25 +1,73 @@
|
|||||||
//@ts-check
|
//@ts-check
|
||||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||||
|
/// <reference types="https://esm.sh/v99/htm@3.1.1/preact/index.d.ts"/>
|
||||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
Button({label, icon, light, disabled})
|
Button({children, icon, light, disabled})
|
||||||
{
|
{
|
||||||
return html`<button class="flex bg-red-500 text-white rounded">
|
return html`
|
||||||
|
<button class="flex bg-red-500 text-white rounded">
|
||||||
${ icon && html`<span class="p-2">${icon}</span>` }
|
${ icon && html`<span class="p-2">${icon}</span>` }
|
||||||
<span class="p-2 relative">
|
<span class="p-2 relative">
|
||||||
<span class="absolute top-0 left-1/2 w-14 h-4 bg-red-500 translate(-x-1/2 -y-1/2) rounded-full border(4 white solid)"></span>
|
<span class="absolute top-0 left-1/2 w-14 h-4 bg-red-500 translate(-x-1/2 -y-1/2) rounded-full border(4 white solid)"></span>
|
||||||
${label}
|
${children}
|
||||||
</span>
|
</span>
|
||||||
</button>`;
|
</button>`;
|
||||||
},
|
},
|
||||||
Chart()
|
|
||||||
|
/** @type {({children}:{inset:number, children:React.ReactNode})=>JSX.Element} */
|
||||||
|
Chart({children})
|
||||||
{
|
{
|
||||||
|
const inset = 20
|
||||||
|
const size = 1/6;
|
||||||
|
/** @type {Record<string, [position:number, normal:boolean]>} */
|
||||||
|
const mappingX = {
|
||||||
|
"125": [size*0.0, true ],
|
||||||
|
"250": [size*1.0, true ],
|
||||||
|
"500": [size*2.0, true ],
|
||||||
|
"1000": [size*3.0, true ],
|
||||||
|
"2000": [size*4.0, true ],
|
||||||
|
"3000": [size*4.5, false],
|
||||||
|
"4000": [size*5.0, true ],
|
||||||
|
"6000": [size*5.5, false],
|
||||||
|
"8000": [size*6.0, true ],
|
||||||
|
};
|
||||||
|
const rulesX = Object.entries(mappingX).map(([label, [position, normal]])=>
|
||||||
|
{
|
||||||
|
return html`
|
||||||
|
<span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-400) ${!normal && "border-dashed"}">
|
||||||
|
<span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
|
||||||
|
</span>`;
|
||||||
|
});
|
||||||
|
const rulesY = [];
|
||||||
|
const rulesYMin = -10;
|
||||||
|
const rulesYMax = 120;
|
||||||
|
for(let db = rulesYMin; db <= rulesYMax; db+=10)
|
||||||
|
{
|
||||||
|
const percent = ((db-rulesYMin) / (rulesYMax-rulesYMin))*100;
|
||||||
|
rulesY.push(html`
|
||||||
|
<span class="block absolute left-[-${inset}px] top-[${percent}%] h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 slate-400"})">
|
||||||
|
<span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
|
||||||
|
</span>
|
||||||
|
`);
|
||||||
|
}
|
||||||
return html`
|
return html`
|
||||||
<div class="relative w-full h-[600px]">
|
<div class="relative w-full h-[600px] font(sans medium) text(xs)">
|
||||||
<div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></div>
|
<div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)] border(1 slate-300)">
|
||||||
|
<span class="block absolute top-[-65px] left-0 w-full text(sm center) font-black">Frequency in Hz</span>
|
||||||
|
<span class="inline-block absolute top-[50%] left-[-65px] ">
|
||||||
|
<span class="inline-block -rotate-90 origin-top -translate-x-1/2 text(sm center) font-black">
|
||||||
|
Hearing Level (dbHL)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div class=${`relative top-[${inset}px] left-[${inset}px] w-[calc(100%-${inset*2}px)] h-[calc(100%-${inset*2}px)]`}>
|
||||||
|
<span class="block absolute top-0 left-[-${inset}px] w-[calc(100%+${inset*2}px)] h-[27%] bg-black opacity-10"></span>
|
||||||
|
${ rulesX }
|
||||||
|
${ rulesY }
|
||||||
|
${ children }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user