Stacked100

src/charts/bar/bar.typ

@@ -1,3 +1,3 @@
 #import "clustered.typ": clustered
-#import "stacked.typ": stacked
+#import "stacked.typ": stacked, stacked100
 #import "simple.typ": simple

src/charts/bar/stacked.typ

@@ -92,4 +92,73 @@
     axes: axes,
     ..plot-args,
   )
-}
+}
+
+/// Render a stacked bar chart
+///   ```example
+///   cetz-plot.chart.bar.stacked100(
+///     size: (4,4),
+///     (
+///       ([One],   1, 1, 2, 3),
+///       ([Two],   3, 1, 1 ,1),
+///       ([Three], 3, 2, 1, 3),
+///     ),
+///     label-key: 0,
+///     y-keys: (1,2,3,4),
+///     labels: (
+///       $0 -> 24$, 
+///       $25 -> 49$,
+///       $50 -> 74$, 
+///       $75 -> 100$
+///     ),
+///   )
+///   ```
+/// - data (array): An array of clusers to plot. Each entry can include a label
+///   for the cluster, shown on the `x` axis, a number of `y` coordinates that
+///   represent the magnitude of a bar that starts at 0, and optionally a
+///   corresponding number of `y-error` magnitudes for each bar.
+/// - labels (array): An array of either content or none, to be shown in the legend
+///   for its corresponding series. The n'th y-keys series is labelled by the
+///   n'th label (or none).
+/// - label-key (string, int): The key at which the x-axis label is described in
+///   each data entry.
+/// - y-keys (array): The n'th entry in `y-keys` corresponds to the key at which 
+///   the `y` coordinate can be found in each data entry, for the n'th series.
+/// - y-error-keys (any): The n'th entry in `y-error-keys` corresponds to the key at 
+///   which the `y-error` magnitude (as a float or as a tuple) can be found in
+///   each data entry, for the n'th series.
+/// - bar-width (float): The width of the bar along the `x` axis, in data-viewport
+///   space. The bar is drawn centered about its `x` coordinate, therefore, the bar 
+///   extends by $#raw("bar-width")\/2$ either side.
+/// - bar-style (style): Style to use, can be used with a `palette` function
+/// - axes (axes): Name of the axes to use for plotting. Reversing the axes
+///   means rotating the plot by 90 degrees. 
+/// - ..plot-args (variadic): Additional plotting parameters and axis options to be 
+///   passed to @@plot
+#let stacked100(
+  data,
+  labels: (),
+  label-key: 0,
+  y-keys: (1,),
+  y-error-keys: none,
+  bar-width: 0.5,
+  bar-style: palette.red,
+  axes: ("x", "y"),
+  ..plot-args
+) = stacked(
+  data.map(d=>{
+    let sum = y-keys.map(k=>d.at(k, default: 0)).sum()
+    for key in y-keys {
+      d.at(key) /= sum
+    }
+    d
+  }), 
+  labels: labels,
+  label-key: label-key,
+  y-keys: y-keys, 
+  y-error-keys: y-error-keys,
+  bar-width: bar-width,
+  bar-style: bar-style,
+  axes: axes,
+  ..plot-args
+)

tests/charts/bar/stacked100/test.typ

@@ -0,0 +1,16 @@
+#set page(width: auto, height: auto, margin: 1cm)
+#import "/tests/helper.typ": *
+
+#let data = (
+  ([One], 1, 1, 2, 3),
+  ([Two], 3, 1, 0 ,2),
+  ([Three], 3, 2, 1, 0),
+)
+
+#test-case(cetz-plot.chart.bar.stacked100(
+  size: (10,9),
+  label-key: 0,
+  y-keys: (1,2,3,4),
+  labels: ($0 -> 24$, $25 -> 49$,$50 -> 74$, $75 -> 100$),
+  data
+))