(W.I.P) Area chart

src/chart.typ

@@ -1 +1,2 @@
-#import "charts/bar/bar.typ" as bar: stacked, clustered, simple
+#import "charts/bar/bar.typ" as bar: stacked, clustered, simple
+#import "charts/area/impl.typ" as area: stacked, stacked100

src/charts/area/impl.typ

@@ -0,0 +1,116 @@
+#import "/src/cetz.typ": canvas, draw, styles, palette
+#import "/src/plot.typ": plot
+#import "/src/plot/add.typ" as add: series, xy, fill-between
+#import "style.typ": areachart-default-style
+
+#let plotter(
+  series-data,
+  x-list: (),
+  area-style: palette.red,
+  axes: ("x", "y"),
+  stack: false,
+  ..plot-args,
+) = draw.group(ctx => {
+
+  // Setup styles
+  let style = styles.resolve(
+    ctx.style, 
+    merge: (:),
+    root: "areachart", 
+    base: areachart-default-style
+  )
+  draw.set-style(..style)
+
+  plot(
+    y-grid: true,
+
+    plot-style: area-style,
+    ..plot-args,
+
+    {
+      let y-offsets = (0,) * x-list.len()
+      for (label, data) in series-data {
+        add.series(
+          label: label,
+          {
+            add.fill-between(
+              data.enumerate().map(((k,v))=>(x-list.at(k), v + y-offsets.at(k))), 
+              data.enumerate().map(((k,v))=>(x-list.at(k), y-offsets.at(k))),
+              style: (stroke: none),
+            )
+
+            add.xy(
+              data.enumerate().map(((k,v))=>(x-list.at(k), v + y-offsets.at(k))),
+            )
+
+            if stack == true {
+              for (key, value) in data.enumerate() {
+                y-offsets.at(key) += value
+              }
+            }
+
+          }
+        )
+      }
+    }
+  )
+
+})
+
+
+#let stacked(
+  data,
+  label-key: none,
+  x-key: 0,
+  y-keys: (1,),
+  area-style: palette.red,
+  axes: ("x", "y"),
+  ..plot-args
+) = {
+
+  let series-data = ()
+  for (series-index, data) in data.enumerate(){
+    series-data.push(
+      (
+        label: if label-key != none {data.at(label-key)},
+        data: y-keys.map(k=>data.at(k, default: 0))
+      )
+    )
+  }
+
+  plotter(
+    series-data, 
+    number-points: y-keys.len(),
+    x-key: x-key,
+    area-style: area-style,
+    axes: axes,
+    stack: true,
+    ..plot-args
+  )
+}
+
+#let stacked100(
+  data,
+  label-key: none,
+  x-key: 0,
+  y-keys: (1,),
+  area-style: palette.red,
+  axes: ("x", "y"),
+  ..plot-args
+) = stacked(
+  data.map(d=>{
+    let sum = y-keys.map(k=>data.map(d=>d.at(k, default: 0)).sum())
+    for (index, key) in y-keys.enumerate() {
+      d.at(key) /= sum.at(index)
+    }
+    d
+  }),
+  label-key: label-key,
+  x-key: x-key,
+  y-keys: y-keys,
+  area-style: area-style,
+  axes: axes,
+  y-tick-step: 0.2,
+  y-format: (it)=>{$#{it*100}%$},
+  ..plot-args
+)

src/charts/area/style.typ

@@ -0,0 +1,4 @@
+#let areachart-default-style = (
+  axes: (tick: (length: 0), grid: (stroke: (dash: "dotted"))),
+  y-inset: 1,
+)

src/plot/legend.typ

@@ -186,7 +186,7 @@
 
           // Draw label
           content(label-west,
-            align(left + horizon, label),
+            align(left + horizon, [#label]),
             name: "label", anchor: "west")
         }, name: "item", anchor: if style.orientation == ltr { "west" } else { "north-west" })
 

tests/charts/area/stacked/test.typ

@@ -0,0 +1,22 @@
+#set page(width: auto, height: auto, margin: 1cm)
+#import "/tests/helper.typ": *
+
+#let data = (
+  ([15-24], 18.0, 20.1, 23.0, 17.0),
+  ([25-29], 16.3, 17.6, 19.4, 15.3),
+  ([30-34], 14.0, 15.3, 13.9, 18.7),
+  ([35-44], 35.5, 26.5, 29.4, 25.8),
+  ([45-54], 25.0, 20.6, 22.4, 22.0),
+  ([55+],   19.9, 18.2, 19.2, 16.4),
+)
+
+#let x-list = (0,  3.3,  6.6, 9.9)
+
+#test-case(cetz-plot.chart.area.stacked100(
+  size: (10,9),
+  label-key: 0,
+  y-keys: (1,2,3,4),
+  x-list: x-list,
+  labels: ([Low], [Medium], [High], [Very high]),
+  data,
+))

tests/charts/area/stacked100/test.typ

@@ -0,0 +1,22 @@
+#set page(width: auto, height: auto, margin: 1cm)
+#import "/tests/helper.typ": *
+
+#let data = (
+  (0,    18.0, 20.1, 23.0, 17.0),
+  (2.5,  16.3, 17.6, 19.4, 15.3),
+  (5,    14.0, 15.3, 13.9, 18.7),
+  (7.5,  35.5, 26.5, 29.4, 25.8),
+  // (10,   25.0, 20.6, 22.4, 22.0),
+  // (12.5, 19.9, 18.2, 19.2, 16.4),
+)
+
+#let x-list = (0,  3.3,  6.6, 9.9)
+
+#test-case(cetz-plot.chart.area.stacked100(
+  size: (10,9),
+  x-key: 0,
+  y-keys: (1,2,3,4),
+  x-list: x-list,
+  labels: ([Low], [Medium], [High], [Very high]),
+  data,
+))