Add an opt-in polar grid to the 1.x branch

site/js/site.js

@@ -810,6 +810,30 @@ $(document).on('markupLoaded', function () {
     ]
   })
 
+  /**
+   * ### Polar coordinate grid
+   *
+   * Polar equations use Cartesian axes by default. Set `coordinateSystem: 'polar'`
+   * to draw a polar grid with equal x/y units instead. `polar.grid` defaults to
+   * `true`, while angular labels are opt-in with `polar.angularLabels: true`.
+   * Labels use radians by default; `angleUnit: 'degrees'` changes their format.
+   */
+  functionPlot({
+    target: '#polar-grid',
+    coordinateSystem: 'polar',
+    polar: {
+      radiusDomain: [0, 3],
+      angularLabels: true
+    },
+    data: [
+      {
+        r: '2 * sin(4 * theta)',
+        fnType: 'polar',
+        graphType: 'polyline'
+      }
+    ]
+  })
+
   /**
    * ### Implicit functions
    *

src/chart.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { Chart } from './chart'
+
+describe('chart dimensions', () => {
+  function createChart(coordinateSystem: 'cartesian' | 'polar', title?: string) {
+    const chart = Object.create(Chart.prototype) as Chart
+    chart.options = {
+      target: '#playground',
+      width: 550,
+      height: 350,
+      coordinateSystem,
+      title,
+      data: []
+    }
+    chart.meta = {}
+    return chart
+  }
+
+  it('uses the full SVG viewport for the polar canvas and clip', () => {
+    const chart = createChart('polar', 'Polar plot')
+    chart.internalVars()
+    expect(chart.meta.margin).toEqual({ left: 0, right: 0, top: 0, bottom: 0 })
+    expect(chart.meta.width).toBe(550)
+    expect(chart.meta.height).toBe(350)
+  })
+
+  it('retains axis and title margins for the Cartesian canvas and clip', () => {
+    const chart = createChart('cartesian')
+    chart.internalVars()
+    expect(chart.meta.margin).toEqual({ left: 40, right: 20, top: 20, bottom: 20 })
+    expect(chart.meta.width).toBe(490)
+    expect(chart.meta.height).toBe(310)
+
+    chart.options.title = 'Cartesian plot'
+    chart.internalVars()
+    expect(chart.meta.margin.top).toBe(40)
+    expect(chart.meta.height).toBe(290)
+  })
+})