piechart: Change direction to clockwise

CHANGES.md

@@ -14,6 +14,11 @@
 - The `hide` function now support an additional `bounds:` parameter to enable canvas bounds adjustment for hidden elements
 - The default transformation matrix changed
 
+## Charts
+- Default piechart rotation changed from counter-clockwise to clockwise
+- Default piechart start/stop angles changed so that the first item
+ starts at 90° (ccw)
+
 ## Libs
 ### Plot
 - The default style of plots changed

src/lib/chart/piechart.typ

@@ -25,9 +25,11 @@
  /// - "RADIUS": Offset slice radius by outset-offset (the slice gets scaled)
  outset-mode: "OFFSET",
  /// Pie start angle
- start: 0deg,
+ start: 90deg,
  /// Pie stop angle
- stop: 360deg,
+ stop: 360deg + 90deg,
+ /// Pie rotation direction (true = clockwise, false = anti-clockwise)
+ clockwise: true,
  outer-label: (
  /// Label kind
  /// If set to a function, that function gets called with (value, label) of each item
@@ -87,9 +89,11 @@
 /// - "OFFSET": Offset slice position by `outset-offset`, increasing their gap to their siblings
 /// - "RADIUS": Offset slice radius by `outset-offset`, which scales the slice and leaves the gap unchanged], default: "OFFSET")
 /// #show-parameter-block("start", ("angle"), [
-/// The pie-charts start angle. You can use this to draw charts not forming a full circle.], default: 0deg)
+/// The pie-charts start angle (ccw). You can use this to draw charts not forming a full circle.], default: 90deg)
 /// #show-parameter-block("stop", ("angle"), [
-/// The pie-charts stop angle.], default: 360deg)
+/// The pie-charts stop angle (ccw).], default: 360deg + 90deg)
+/// #show-parameter-block("clockwise", ("bool"), [
+/// The pie-charts rotation direction.], default: true)
 /// #show-parameter-block("outer-label.content", ("none","string","function"), [
 /// Content to display outsides the charts slices.
 /// There are the following predefined values:
@@ -207,6 +211,12 @@
  assert(style.outset-mode in ("OFFSET", "RADIUS"),
  message: "Outset mode must be 'OFFSET' or 'RADIUS', but is: " + str(style.outset-mode))
 
+ let data = if style.clockwise {
+ data.rev()
+ } else {
+ data
+ }
+
  let style-at = if type(slice-style) == function {
  slice-style
  } else if type(slice-style) == array {
@@ -346,7 +356,7 @@
  // If the chart is not a full circle, we have to merge two arc
  // at their ends to create closing lines
  if stroke != none {
- if stop-angle - start-angle != 360deg {
+ if calc.abs(stop-angle - start-angle) != 360deg {
  merge-path({
  arc(origin, start: start, stop: end, radius: inner-radius, anchor: "origin")
  arc(origin, start: end, stop: start, radius: radius, anchor: "origin")

tests/chart/piechart/test.typ

@@ -81,7 +81,6 @@
  value-key: "value", label-key: "label", outer-label: (content: "LABEL", radius: 150%), outset-key: "o")
 }))
 
-
 // Keys
 #box(stroke: 2pt + red, canvas({
  piechart(((value: 1, label: [One]),
@@ -95,3 +94,9 @@
  slice-style: colors,
  value-key: "value", label-key: "label", outer-label: (content: "LABEL", radius: 150%), outset-key: "o")
 }))
+
+// Counter clockwise rotation
+#box(stroke: 2pt + red, canvas({
+ import draw: *
+ piechart(range(1,11), clockwise: false, slice-style: colors)
+}))