nathanmcrae/ternary-graph-generator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add other graph parameters to interface

Browse Source
This commit is contained in:
Nathan McRae
2025-08-20 22:55:11 -07:00
parent aa7b0813c4
commit 6541d65f3a
2 changed files with 110 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -2,6 +2,50 @@
<head> <head>
</head> </head>
<body> <body>
<div>
Axis 1
<div>
Title
<input id="axis-1-title" value="axis 1"/>
</div>
<div>
Start Value:
E<input type="number" id="axis-1-start" value="0"/>
</div>
</div>
<div>
Axis 2
<div>
Title
<input id="axis-2-title" value="axis 2"/>
</div>
<div>
Start Value:
E<input type="number" id="axis-2-start" value="0"/>
</div>
</div>
<div>
Axis 3
<div>
Title
<input id="axis-3-title" value="axis 3"/>
</div>
<div>
Start Value:
E<input type="number" id="axis-3-start" value="0"/>
</div>
</div>
<div>
axis title text size (px):
<input type="number" id="axis-title-size" value="16"/>
</div>
<div>
tick label text size (px):
<input type="number" id="tick-label-size" value="2"/>
</div>
</div>
<div>
<div> <div>
ticks: ticks:
<input type="number" id="ticks" value="10"/> <input type="number" id="ticks" value="10"/>

74
src/Main.purs
View File

@@ -115,6 +115,42 @@ update = do
let document = HTMLDoc.toDocument d let document = HTMLDoc.toDocument d
domParser <- makeDOMParser domParser <- makeDOMParser
axis1TitleElMay <- myGetElementById document "axis-1-title"
axis1TitleEl <- case HTMLInput.fromElement axis1TitleElMay of
Nothing -> throw "'axis-1-title' element is not an input tag"
Just e -> pure e
axis1Title <- HTMLInput.value axis1TitleEl
axis1StartElMay <- myGetElementById document "axis-1-start"
axis1StartEl <- case HTMLInput.fromElement axis1StartElMay of
Nothing -> throw "'axis-1-start' element is not an input tag"
Just e -> pure e
axis1Start <- (liftM1 Int.round) $ HTMLInput.valueAsNumber axis1StartEl
axis2TitleElMay <- myGetElementById document "axis-2-title"
axis2TitleEl <- case HTMLInput.fromElement axis2TitleElMay of
Nothing -> throw "'axis-2-title' element is not an input tag"
Just e -> pure e
axis2Title <- HTMLInput.value axis2TitleEl
axis2StartElMay <- myGetElementById document "axis-2-start"
axis2StartEl <- case HTMLInput.fromElement axis2StartElMay of
Nothing -> throw "'axis-2-start' element is not an input tag"
Just e -> pure e
axis2Start <- (liftM1 Int.round) $ HTMLInput.valueAsNumber axis2StartEl
axis3TitleElMay <- myGetElementById document "axis-3-title"
axis3TitleEl <- case HTMLInput.fromElement axis3TitleElMay of
Nothing -> throw "'axis-3-title' element is not an input tag"
Just e -> pure e
axis3Title <- HTMLInput.value axis3TitleEl
axis3StartElMay <- myGetElementById document "axis-3-start"
axis3StartEl <- case HTMLInput.fromElement axis3StartElMay of
Nothing -> throw "'axis-3-start' element is not an input tag"
Just e -> pure e
axis3Start <- (liftM1 Int.round) $ HTMLInput.valueAsNumber axis3StartEl
inputElement <- myGetElementById document "ticks" inputElement <- myGetElementById document "ticks"
inputHTMLElement <- case HTMLInput.fromElement inputElement of inputHTMLElement <- case HTMLInput.fromElement inputElement of
Nothing -> throw "'ticks' element is not an input tag" Nothing -> throw "'ticks' element is not an input tag"
@@ -127,20 +163,32 @@ update = do
Just e -> pure e Just e -> pure e
tickSize <- HTMLInput.valueAsNumber tickSizeEl tickSize <- HTMLInput.valueAsNumber tickSizeEl
axisTitleSizeElMay <- myGetElementById document "axis-title-size"
axisTitleSizeEl <- case HTMLInput.fromElement axisTitleSizeElMay of
Nothing -> throw "'axis-title-size' element is not an input tag"
Just e -> pure e
axisTitleSize <- HTMLInput.valueAsNumber axisTitleSizeEl
tickLabelSizeElMay <- myGetElementById document "tick-label-size"
tickLabelSizeEl <- case HTMLInput.fromElement tickLabelSizeElMay of
Nothing -> throw "'tick-label-size' element is not an input tag"
Just e -> pure e
tickLabelSize <- HTMLInput.valueAsNumber tickLabelSizeEl
svgContainer <- getNodeById document "svg-container" svgContainer <- getNodeById document "svg-container"
let graphDef = { axis1Label: "axis 1" let graphDef = { axis1Label: axis1Title
, axis2Label: "axis 2" , axis2Label: axis2Title
, axis3Label: "axis 3" , axis3Label: axis3Title
, axis1Start: 0 , axis1Start: axis1Start
, axis2Start: 1 , axis2Start: axis2Start
, axis3Start: 20 , axis3Start: axis3Start
, numTicks: ticks , numTicks: ticks
, tickTextStyle: { sizePx: 12.0 , tickTextStyle: { sizePx: tickLabelSize
, typeface: "Liberation Sans" , typeface: "Liberation Sans"
} }
, tickSize: TernaryGraph.Pixels tickSize , tickSize: TernaryGraph.Pixels tickSize
, axisTitleTextStyle: { sizePx: 16.0 , axisTitleTextStyle: { sizePx: axisTitleSize
, typeface: "Liberation Mono" , typeface: "Liberation Mono"
} }
} }
@@ -192,6 +240,16 @@ main = do
d <- document w d <- document w
let dd = HTMLDoc.toDocument d let dd = HTMLDoc.toDocument d
addUpdateListener dd "axis-1-title"
addUpdateListener dd "axis-1-start"
addUpdateListener dd "axis-2-title"
addUpdateListener dd "axis-2-start"
addUpdateListener dd "axis-3-title"
addUpdateListener dd "axis-3-start"
addUpdateListener dd "axis-title-size"
addUpdateListener dd "tick-label-size"
addUpdateListener dd "ticks" addUpdateListener dd "ticks"
addUpdateListener dd "tick-size" addUpdateListener dd "tick-size"