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

Add tick size control

Browse Source
This commit is contained in:
Nathan McRae
2025-08-20 21:49:23 -07:00
parent 124132fdc7
commit 2a4b5702af
3 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -2,8 +2,14 @@
<head>
</head>
<body>
ticks:
<input type="number" id="ticks"/>
<div>
ticks:
<input type="number" id="ticks" value="10"/>
</div>
<div>
tick size (px):
<input type="number" id="tick-size" value="5"/>
</div>
<div id="svg-container" class="my-class"></div>
</body>
<script src="index.js"></script>

14
src/Main.purs
View File

@@ -16,6 +16,7 @@ import Effect.Console (log)
import Effect.Class (liftEffect)
import Effect.Exception (throw)
import TernaryGraph (Dimension, svgTextID, ternaryGraph, ternaryGraphSvg, TextStyle, tickLabelStrings)
import TernaryGraph as TernaryGraph
import Web.DOM.Document (contentType
, createElement
, Document
@@ -118,6 +119,12 @@ update e = do
Just e -> pure e
ticks <- (liftM1 Int.round) $ HTMLInput.valueAsNumber inputHTMLElement
tickSizeElMay <- myGetElementById document "tick-size"
tickSizeEl <- case HTMLInput.fromElement tickSizeElMay of
Nothing -> throw "'tick-size' element is not an input tag"
Just e -> pure e
tickSize <- HTMLInput.valueAsNumber tickSizeEl
svgContainer <- getNodeById document "svg-container"
let graphDef = { axis1Label: "axis 1"
@@ -130,6 +137,7 @@ update e = do
, tickTextStyle: { sizePx: 12.0
, typeface: "Liberation Sans"
}
, tickSize: TernaryGraph.Pixels tickSize
, axisTitleTextStyle: { sizePx: 16.0
, typeface: "Liberation Mono"
}
@@ -189,6 +197,7 @@ main = do
, tickTextStyle: { sizePx: 12.0
, typeface: "Liberation Sans"
}
, tickSize: TernaryGraph.Pixels 10.0
, axisTitleTextStyle: { sizePx: 16.0
, typeface: "Liberation Mono"
}
@@ -229,7 +238,10 @@ main = do
inputElement <- myGetElementById dd "ticks"
addEventListener (EventType "input") listener true (Element.toEventTarget inputElement)
log "20250727T183907"
tickSizeEl <- myGetElementById dd "tick-size"
addEventListener (EventType "input") listener true (Element.toEventTarget tickSizeEl)
--inputMay <- getElementById "ticks" $ toNonElementParentNode dd
--inputNode <- case inputMay of
--Nothing -> throw $ "Unable to find " <> containerID

23
src/TernaryGraph.purs
View File

@@ -18,6 +18,13 @@ import Data.Set as Set
import Data.Tuple as Tup
import Data.Tuple.Nested (Tuple3, tuple3, get1, get2, get3)
-- A spatial value (position, size) in pixels
-- TODO: Apply this across all spatial values
newtype Pixels = Pixels Number
unpixel :: Pixels -> Number
unpixel (Pixels value) = value
type Dimension =
{ widthPx :: Number
, heightPx :: Number
@@ -42,6 +49,7 @@ type GraphDefinition =
, axis3Start :: Int
, numTicks :: Int
, tickTextStyle :: TextStyle
, tickSize :: Pixels
, axisTitleTextStyle :: TextStyle
}
@@ -101,21 +109,20 @@ svgTextID idMaybe text { x: x, y: y } angle style dimension =
Maybe.Nothing -> ""
Maybe.Just id -> "id=\"" <> id <> "\""
-- TODO: Make axis tick size a parameter
getTick :: Number -> Int -> Int -> Line
getTick scale numTicks tickI =
{start: {x: x, y: -(0.5 + 5.0 / scale)}, end: {x: x, y: y}}
getTick :: Number -> Int -> Pixels -> Int -> Line
getTick scale numTicks tickSize tickI =
{start: {x: x, y: -(0.5 + (unpixel tickSize) / scale)}, end: {x: x, y: y}}
where
x = 2.0 * (sin (pi / 3.0)) * (Int.toNumber tickI) / (Int.toNumber numTicks) - (sin (pi / 3.0))
y = if tickI <= numTicks / 2
then 1.0 + x * 1.5 / (sin (pi / 3.0))
else 1.0 - x * 1.5 / (sin (pi / 3.0))
getTicks :: Number -> Number -> Int -> Tuple3 (Array Line) (Array Line) (Array Line)
getTicks scale angle numTicks =
getTicks :: Number -> Number -> Pixels -> Int -> Tuple3 (Array Line) (Array Line) (Array Line)
getTicks scale angle tickSize numTicks =
tuple3 axis1Lines axis2Lines axis3Lines
where
foo = map (getTick scale numTicks) (Array.range 0 numTicks)
foo = map (getTick scale numTicks tickSize) (Array.range 0 numTicks)
axis1Lines = map (rotateLine angle) foo
axis2Lines = map (rotateLine (2.0 * pi / 3.0)) axis1Lines
axis3Lines = map (rotateLine (2.0 * pi / 3.0)) axis2Lines
@@ -159,7 +166,7 @@ tickLabelStrings def =
ternaryGraph :: Number -> Number -> Number -> GraphDefinition -> Map.Map (Tup.Tuple String TextStyle) Dimension -> Either.Either String String
ternaryGraph scale xOffset yOffset definition textDimensions = result
where
axisTickLines = getTicks scale pi definition.numTicks
axisTickLines = getTicks scale pi definition.tickSize definition.numTicks
axis1TickLines = map (transformLine scale xOffset yOffset) (get1 axisTickLines)
axis2TickLines = map (transformLine scale xOffset yOffset) (get2 axisTickLines)
axis3TickLines = map (transformLine scale xOffset yOffset) (get3 axisTickLines)