From 3b374c90b3924ec6bd994336009b33864718e2f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryx=C3=AD?= <michal.bryxi@gmail.com>
Date: Mon, 7 Oct 2024 16:39:58 +0200
Subject: [PATCH] Add support for polar charts (#481)

* Add support for polar charts

- As per [documentation](https://www.highcharts.com/docs/chart-and-series-types/polar-chart):

> Polar charts, also known as radar charts, require the highcharts-more.js file.

I was also tinkering with the idea to just merge the if to the "waterfall" case below as it's essentially the same, but then decided against as it might cause issues in the future.

* docs: Polar chart in test app
---
 .../src/components/high-charts.ts             |  5 +++
 test-app/app/components/chart-line-polar.hbs  |  4 ++
 test-app/app/components/chart-line-polar.js   | 44 +++++++++++++++++++
 test-app/app/templates/index.hbs              |  5 +++
 4 files changed, 58 insertions(+)
 create mode 100644 test-app/app/components/chart-line-polar.hbs
 create mode 100644 test-app/app/components/chart-line-polar.js

diff --git a/ember-highcharts/src/components/high-charts.ts b/ember-highcharts/src/components/high-charts.ts
index 8485d2b..1d7de04 100644
--- a/ember-highcharts/src/components/high-charts.ts
+++ b/ember-highcharts/src/components/high-charts.ts
@@ -273,5 +273,10 @@ export default class HighCharts<
       const More = await waitForPromise(import('highcharts/highcharts-more'));
       More.default(Highcharts);
     }
+
+    if (this.args.chartOptions?.chart?.polar === true) {
+      const More = await waitForPromise(import('highcharts/highcharts-more'));
+      More.default(Highcharts);
+    }
   }
 }
diff --git a/test-app/app/components/chart-line-polar.hbs b/test-app/app/components/chart-line-polar.hbs
new file mode 100644
index 0000000..0e6c14c
--- /dev/null
+++ b/test-app/app/components/chart-line-polar.hbs
@@ -0,0 +1,4 @@
+<HighCharts
+  @content={{this.chartData}}
+  @chartOptions={{this.chartOptions}}
+/>
diff --git a/test-app/app/components/chart-line-polar.js b/test-app/app/components/chart-line-polar.js
new file mode 100644
index 0000000..d6d4d15
--- /dev/null
+++ b/test-app/app/components/chart-line-polar.js
@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+
+const DIRECTIONS = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+const WIND_DATA = [
+  0, 10, 15, 10, 20, 45, 47, 90, 110, 115, 130, 150, 160, 188, 190, 185, 192,
+];
+
+export default class LineBasic extends Component {
+  chartOptions = {
+    chart: {
+      type: 'line',
+      polar: true,
+    },
+    title: {
+      text: 'Wind direction history',
+    },
+    xAxis: {
+      tickInterval: 45,
+      min: 0,
+      max: 360,
+      labels: {
+        formatter: function ({ value }) {
+          return DIRECTIONS[Math.round(value / 45)];
+        },
+      },
+    },
+    yAxis: {
+      min: 0,
+      max: 1,
+      labels: {
+        enabled: false,
+      },
+    },
+    tooltip: false,
+  };
+
+  chartData = [
+    {
+      name: 'Amisbühl',
+      data: WIND_DATA.map((x, i) => ({ x, y: i / (WIND_DATA.length - 1) })),
+      connectEnds: false,
+    },
+  ];
+}
diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
index 9f3e1ac..187fb2c 100644
--- a/test-app/app/templates/index.hbs
+++ b/test-app/app/templates/index.hbs
@@ -10,6 +10,11 @@
   <ChartBarBasic />
 </section>
 
+<section>
+  <h3>Polar chart</h3>
+  <ChartLinePolar />
+</section>
+
 <section>
   <h3>Basic highmaps chart</h3>
   <ChartMapBasic />