From bf4762ce65ebb654a6b0567b37a59cd3b858f158 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Tue, 6 Dec 2022 23:37:39 -0500 Subject: [PATCH] chart drawing --- index.html | 2 ++ src/app.js | 27 ++++++++++++++++++--------- src/store.js | 4 ++-- src/twind.js | 2 +- src/ui.js | 6 +++--- store.d.ts | 2 +- store.test.ts | 6 ++++++ 7 files changed, 33 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 601fcf6..904fa1f 100644 --- a/index.html +++ b/index.html @@ -1,2 +1,4 @@ + +
\ No newline at end of file diff --git a/src/app.js b/src/app.js index 402a0a7..16cc514 100644 --- a/src/app.js +++ b/src/app.js @@ -12,20 +12,29 @@ ShadowDOM.append(ShadowDiv); TW.Init(ShadowCSS, ShadowDiv); + + const Audiogram =()=> { - const [State, Dispatch] = Store.Consumer(); + const [State] = Store.Consumer(); - const testL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`); - const testR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`); - const userL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`); - const userR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`); + /** @type {(inAmount:number)=>string} */ const Perc =(inAmount)=> (inAmount*100)+"%"; + + const testMarksL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`); + const testMarksR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`); + const testLinesL = State.Draw.TestL.Paths.map( p=>html``); + const testLinesR = State.Draw.TestR.Paths.map( p=>html``); + + const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`); + const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`); + const userLinesL = State.Draw.UserL.Paths.map( p=>html``); + const userLinesR = State.Draw.UserR.Paths.map( p=>html``); return html` - - ${testL} - ${testR} - `; + ${testMarksL}${testLinesL} + ${testMarksR}${testLinesR} + ${userMarksL}${userLinesL} + ${userMarksR}${userLinesR}`; }; React.render(html` diff --git a/src/store.js b/src/store.js index b5fe329..fb80c3d 100644 --- a/src/store.js +++ b/src/store.js @@ -55,8 +55,8 @@ export const Initial = Name: "Patient A Asymmetric Notch", Plot: [ - { Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } }, - { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } } + { Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } }, + { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } } ] } ] diff --git a/src/twind.js b/src/twind.js index 0d28464..226342d 100644 --- a/src/twind.js +++ b/src/twind.js @@ -32,7 +32,7 @@ export const Configure = { }, strokeWidth: { - "bold": "3px" + "bold": "4px" } } }, diff --git a/src/ui.js b/src/ui.js index 10468b5..232a91b 100644 --- a/src/ui.js +++ b/src/ui.js @@ -98,11 +98,11 @@ const Glyph = { ${children}` }; -/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:number, y:number})=>preact.VNode} */ -export const Mark =({right, response, x, y})=> +/** @type {({right, response, x, y, classes}:{right:boolean, response?:boolean, x:number|string, y:number|string, classes:string})=>preact.VNode} */ +export const Mark =({right, response, x, y, classes})=> { return html` - + <${ right ? Glyph.O : Glyph.X }> ${ !response && html`<${Glyph.Arrow}/>` } diff --git a/store.d.ts b/store.d.ts index 9aecda1..c9cec84 100644 --- a/store.d.ts +++ b/store.d.ts @@ -47,7 +47,7 @@ declare namespace Store { type PlotKeyTest = "TestL" | "TestR"; type PlotKey = PlotKeyUser | PlotKeyTest; - type DrawPoint = { X: number|string; Y: number|string; Mark: TestFrequencySample }; + type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample }; type DrawLine = { Head:DrawPoint, Tail:DrawPoint}; type DrawGroup = { Points: Array; Paths: Array }; type DrawChart = { Left: DrawGroup; Right: DrawGroup }; diff --git a/store.test.ts b/store.test.ts index 0b46df9..829a9d9 100644 --- a/store.test.ts +++ b/store.test.ts @@ -98,5 +98,11 @@ Deno.test("Make Marks", async(t)=> assertEquals(state.Live.Mark?.Stim, state.Stim.Value); }); + await t.step("Check Draw output", ()=> + { + assertEquals(state.Draw.TestL.Points.length, 2); + assertEquals(state.Draw.TestL.Paths.length, 1); + }); + console.log(state.Draw); }); \ No newline at end of file