Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chart

Browse Source
This commit is contained in:
Seth Trowbridge 2022-11-25 15:51:27 -05:00
parent 5b27cc07d4
commit 446602b630
3 changed files with 74 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app.js
View File

@ -1,21 +1,20 @@
//@ts-check
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";
import TW from "https://esm.sh/@twind/core";
import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
const Configure = {presets: [TWPreTail(), TWPreAuto()]};
const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
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");
const rootShadow = root.attachShadow({mode: "open"});
const rootShadowRoot = document.createElement("strong");
rootShadow.append(rootShadowRoot);
*/
install({presets:[preTailwind(), preAutoprefix()]});
React.render(html`
<p class="p-4">suuupu</p>
<${UI.Button} label="Play Tone" icon=">" light/>
`, root);
import UI from "./ui.js";
import {render} from "https://esm.sh/preact@10.11.3/compat";
import {html} from "https://esm.sh/htm@3.1.1/preact";
render(html`
<${UI.Button} icon="+">hey!<//>
<${UI.Chart}><p>SUP</p><//>
`, ShadowDiv);

39
index.html
View File

@ -1,39 +1,2 @@
<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
<div id="app"></div>
<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>
<script type="module" src="app.js"></script>

64
ui.js
View File

@ -1,25 +1,73 @@
//@ts-check
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";
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>` }
<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>
${label}
${children}
</span>
</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`
<div class="relative w-full h-[600px]">
<div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></div>
<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)] 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>
`;
}