Add top-level options support for ChartJS (#801)

Add top level options support for ChartJS
flow-php · Nov 19, 2023 · b72820f · b72820f
1 parent 719aad9
commit b72820f
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 26 deletions.
diff --git a/examples/topics/aggregations/power_plant_bar_chart.php b/examples/topics/aggregations/power_plant_bar_chart.php
@@ -46,7 +46,8 @@
     ->withEntry('consumption', concat(ref('consumption'), lit('%')))
     ->write(
         ChartJS::chart(
-            ChartJS::bar(label: ref('date'), datasets: [ref('production_kwh_avg'), ref('consumption_kwh_avg')]),
+            ChartJS::bar(label: ref('date'), datasets: [ref('production_kwh_avg'), ref('consumption_kwh_avg')])
+                ->setOptions(['indexAxis' => 'y']),
             output: __FLOW_OUTPUT__ . '/power_plant_bar_chart.html'
         )
     );

diff --git a/src/adapter/etl-adapter-chartjs/src/Flow/ETL/Adapter/ChartJS/Chart/BarChart.php b/src/adapter/etl-adapter-chartjs/src/Flow/ETL/Adapter/ChartJS/Chart/BarChart.php
@@ -6,7 +6,6 @@
 
 use Flow\ETL\Adapter\ChartJS\Chart;
 use Flow\ETL\Exception\InvalidArgumentException;
-use Flow\ETL\Exception\RuntimeException;
 use Flow\ETL\Row\EntryReference;
 use Flow\ETL\Rows;
 
@@ -23,6 +22,8 @@ final class BarChart implements Chart
         'datasets' => [],
     ];
 
+    private array $datasetOptions = [];
+
     private array $options = [];
 
     /**
@@ -40,7 +41,7 @@ public function __construct(
         }
 
         foreach ($this->datasets as $dataset) {
-            $this->options[$dataset->name()] = [];
+            $this->datasetOptions[$dataset->name()] = [];
         }
     }
 
@@ -64,39 +65,47 @@ public function collect(Rows $rows) : void
 
     public function data() : array
     {
-        return [
+        $data = [
             'type' => 'bar',
             'data' => [
                 'labels' => $this->data['labels'],
                 'datasets' => \array_values(\array_map(
                     function (array $dataset) : array {
                         /** @var array<array-key, mixed> $options */
-                        $options = $this->options[$dataset['label']] ?? [];
+                        $options = $this->datasetOptions[$dataset['label']] ?? [];
 
                         return \array_merge($dataset, $options);
                     },
                     $this->data['datasets']
                 )),
             ],
         ];
+
+        if ($this->options) {
+            $data['options'] = $this->options;
+        }
+
+        return $data;
     }
 
     /**
      * @throws InvalidArgumentException
      */
     public function setDatasetOptions(EntryReference $dataset, array $options) : self
     {
-        if (!\array_key_exists($dataset->name(), $this->options)) {
+        if (!\array_key_exists($dataset->name(), $this->datasetOptions)) {
             throw new InvalidArgumentException(\sprintf('Dataset "%s" does not exists', $dataset->name()));
         }
 
-        $this->options[$dataset->name()] = $options;
+        $this->datasetOptions[$dataset->name()] = $options;
 
         return $this;
     }
 
     public function setOptions(array $options) : self
     {
-        throw new RuntimeException('Please use setDatasetOptions while using BarChart');
+        $this->options = $options;
+
+        return $this;
     }
 }
diff --git a/src/adapter/etl-adapter-chartjs/src/Flow/ETL/Adapter/ChartJS/Chart/LineChart.php b/src/adapter/etl-adapter-chartjs/src/Flow/ETL/Adapter/ChartJS/Chart/LineChart.php
@@ -6,7 +6,6 @@
 
 use Flow\ETL\Adapter\ChartJS\Chart;
 use Flow\ETL\Exception\InvalidArgumentException;
-use Flow\ETL\Exception\RuntimeException;
 use Flow\ETL\Row\EntryReference;
 use Flow\ETL\Rows;
 
@@ -23,6 +22,8 @@ final class LineChart implements Chart
         'datasets' => [],
     ];
 
+    private array $datasetOptions = [];
+
     private array $options = [];
 
     /**
@@ -40,7 +41,7 @@ public function __construct(
         }
 
         foreach ($this->datasets as $dataset) {
-            $this->options[$dataset->name()] = [];
+            $this->datasetOptions[$dataset->name()] = [];
         }
     }
 
@@ -64,39 +65,47 @@ public function collect(Rows $rows) : void
 
     public function data() : array
     {
-        return [
+        $data = [
             'type' => 'line',
             'data' => [
                 'labels' => $this->data['labels'],
                 'datasets' => \array_values(\array_map(
                     function (array $dataset) : array {
                         /** @var array<array-key, mixed> $options */
-                        $options = $this->options[$dataset['label']] ?? [];
+                        $options = $this->datasetOptions[$dataset['label']] ?? [];
 
                         return \array_merge($dataset, $options);
                     },
                     $this->data['datasets']
                 )),
             ],
         ];
+
+        if ($this->options) {
+            $data['options'] = $this->options;
+        }
+
+        return $data;
     }
 
     /**
      * @throws InvalidArgumentException
      */
     public function setDatasetOptions(EntryReference $dataset, array $options) : self
     {
-        if (!\array_key_exists($dataset->name(), $this->options)) {
+        if (!\array_key_exists($dataset->name(), $this->datasetOptions)) {
             throw new InvalidArgumentException(\sprintf('Dataset "%s" does not exists', $dataset->name()));
         }
 
-        $this->options[$dataset->name()] = $options;
+        $this->datasetOptions[$dataset->name()] = $options;
 
         return $this;
     }
 
     public function setOptions(array $options) : self
     {
-        throw new RuntimeException('Please use setDatasetOptions while using LineChart');
+        $this->options = $options;
+
+        return $this;
     }
 }
diff --git a/src/adapter/etl-adapter-chartjs/src/Flow/ETL/Adapter/ChartJS/Chart/PieChart.php b/src/adapter/etl-adapter-chartjs/src/Flow/ETL/Adapter/ChartJS/Chart/PieChart.php
@@ -6,7 +6,6 @@
 
 use Flow\ETL\Adapter\ChartJS\Chart;
 use Flow\ETL\Exception\InvalidArgumentException;
-use Flow\ETL\Exception\RuntimeException;
 use Flow\ETL\Row\EntryReference;
 use Flow\ETL\Rows;
 
@@ -15,7 +14,7 @@ final class PieChart implements Chart
     /**
      * @var array{
      *   labels: array<string>,
-     *   datasets: array<string, array{data: array}>
+     *   datasets: array<string, array{data: array, label: ?string}>
      * }
      */
     private array $data = [
@@ -26,6 +25,8 @@ final class PieChart implements Chart
     /**
      * @var array<array-key, mixed>
      */
+    private array $datasetOptions = [];
+
     private array $options = [];
 
     /**
@@ -34,14 +35,15 @@ final class PieChart implements Chart
      * @throws InvalidArgumentException
      */
     public function __construct(
+        private readonly EntryReference $label,
         private readonly array $datasets,
     ) {
         if (!\count($this->datasets)) {
             throw new InvalidArgumentException('Bar chart must have at least one dataset, please provide at least one entry reference');
         }
 
         foreach ($this->datasets as $dataset) {
-            $this->options[$dataset->name()] = [];
+            $this->datasetOptions[$dataset->name()] = [];
             $this->data['labels'][] = $dataset->name();
         }
     }
@@ -53,9 +55,11 @@ public function collect(Rows $rows) : void
                 if (!\array_key_exists('pie', $this->data['datasets'])) {
                     $this->data['datasets']['pie'] = [
                         'data' => [$row->valueOf($dataset)],
+                        'label' => (string) $row->valueOf($this->label),
                     ];
                 } else {
                     $this->data['datasets']['pie']['data'][] = $row->valueOf($dataset);
+                    $this->data['datasets']['pie']['label'] = (string) $row->valueOf($this->label);
                 }
             }
         }
@@ -64,9 +68,9 @@ public function collect(Rows $rows) : void
     public function data() : array
     {
         /** @var array<array-key, mixed> $options */
-        $options = $this->options['pie'] ?? [];
+        $options = $this->datasetOptions['pie'] ?? [];
 
-        return [
+        $data = [
             'type' => 'pie',
             'data' => [
                 'labels' => $this->data['labels'],
@@ -76,19 +80,31 @@ public function data() : array
                 )),
             ],
         ];
+
+        if ($this->options) {
+            $data['options'] = $this->options;
+        }
+
+        return $data;
     }
 
     /**
      * @throws InvalidArgumentException
      */
     public function setDatasetOptions(EntryReference $dataset, array $options) : self
     {
-        throw new RuntimeException('Please use setOptions while using PieChart');
+        if (!\array_key_exists($dataset->name(), $this->datasetOptions)) {
+            throw new InvalidArgumentException(\sprintf('Dataset "%s" does not exists', $dataset->name()));
+        }
+
+        $this->datasetOptions[$dataset->name()] = $options;
+
+        return $this;
     }
 
     public function setOptions(array $options) : self
     {
-        $this->options['pie'] = $options;
+        $this->options = $options;
 
         return $this;
     }

diff --git a/src/adapter/etl-adapter-chartjs/src/Flow/ETL/DSL/ChartJS.php b/src/adapter/etl-adapter-chartjs/src/Flow/ETL/DSL/ChartJS.php
@@ -55,8 +55,8 @@ final public static function line(EntryReference $label, array $datasets) : Char
      *
      * @throws InvalidArgumentException
      */
-    final public static function pie(array $datasets) : Chart
+    final public static function pie(EntryReference $label, array $datasets) : Chart
     {
-        return new Chart\PieChart($datasets);
+        return new Chart\PieChart($label, $datasets);
     }
 }
diff --git a/...tl-adapter-chartjs/tests/Flow/ETL/Adapter/ChartJS/Tests/Integration/ChartJSLoaderTest.php b/...tl-adapter-chartjs/tests/Flow/ETL/Adapter/ChartJS/Tests/Integration/ChartJSLoaderTest.php
@@ -4,6 +4,7 @@
 
 namespace Flow\ETL\Adapter\ChartJS\Tests\Integration;
 
+use function Flow\ETL\DSL\first;
 use function Flow\ETL\DSL\lit;
 use function Flow\ETL\DSL\ref;
 use function Flow\ETL\DSL\sum;
@@ -167,6 +168,7 @@ public function test_loading_data_to_pie_chart() : void
         ];
 
         $chart = ChartJS::pie(
+            ref('Date'),
             [
                 ref('Revenue'),
                 ref('CM'),
@@ -182,6 +184,7 @@ public function test_loading_data_to_pie_chart() : void
             ->read(From::memory(new ArrayMemory($data)))
             ->withEntry('Profit', ref('Revenue')->minus(ref('CM'))->minus(ref('Ads Spends'))->minus(ref('Storage Costs'))->minus(ref('Shipping Costs'))->round(lit(2)))
             ->aggregate(
+                first(ref('Date')->as('Date')),
                 sum(ref('Revenue')->as('Revenue')),
                 sum(ref('CM')->as('CM')),
                 sum(ref('Ads Spends')->as('Ads Spends')),
@@ -212,10 +215,13 @@ public function test_loading_data_to_pie_chart() : void
                                 10853,
                                 4760.3099999999995,
                             ],
-                            'label' => 'PnL',
+                            'label' => '2023-01-01',
                         ],
                     ],
                 ],
+                'options' => [
+                    'label' => 'PnL',
+                ],
             ],
             $chart->data(),
         );

diff --git a/...tl-adapter-chartjs/tests/Flow/ETL/Adapter/ChartJS/Tests/Integration/Output/pie_chart.html b/...tl-adapter-chartjs/tests/Flow/ETL/Adapter/ChartJS/Tests/Integration/Output/pie_chart.html
@@ -5,7 +5,7 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
     <script>
         window.onload = function () {
-            new Chart(document.getElementById('chart'),{"type":"pie","data":{"labels":["Revenue","CM","Ads Spends","Storage Costs","Shipping Costs","Profit"],"datasets":[{"data":[69876.76000000001,32555.319999999996,13853.8,7854.33,10853,4760.3099999999995],"label":"PnL"}]}});
+            new Chart(document.getElementById('chart'),{"type":"pie","data":{"labels":["Revenue","CM","Ads Spends","Storage Costs","Shipping Costs","Profit"],"datasets":[{"data":[69876.76000000001,32555.319999999996,13853.8,7854.33,10853,4760.3099999999995],"label":"2023-01-01"}]},"options":{"label":"PnL"}});
         };
     </script>
 </head>