implement chartjs support

ckanext/charts/assets/js/charts-render-chartjs.js

@@ -9,15 +9,13 @@ ckan.module("charts-render-chartjs", function ($, _) {
         initialize: function () {
             $.proxyAll(this, /_/);
 
+            console.log(this.options.config);
             if (!this.options.config) {
                 console.error("No configuration provided");
                 return;
             }
 
-            this.options.config.type = "line";
-            this.options.config.data.datasets = this.options.config.data;
-
-            new Chart(this.el[0], this.options.config);
+            new Chart(this.el[0].getContext("2d"), this.options.config);
         }
     };
 });

ckanext/charts/assets/webassets.yml

@@ -1,14 +1,12 @@
-# chartjs:
-#   filter: rjsmin
-#   output: ckanext-charts/%(version)s-chartjs.js
-#   contents:
-#     - js/vendor/chartjs.min.js
-
-#     - js/charts-chartjs.js
-#     - js/charts-render-chartjs.js
-#   extra:
-#     preload:
-#       - base/main
+chartjs:
+  filter: rjsmin
+  output: ckanext-charts/%(version)s-chartjs.js
+  contents:
+    - js/vendor/chartjs.min.js
+    - js/charts-render-chartjs.js
+  extra:
+    preload:
+      - base/main
 
 plotly:
   filter: rjsmin

ckanext/charts/chart_builders/__init__.py

@@ -3,6 +3,7 @@
 from .base import BaseChartBuilder
 from .plotly import PlotlyBuilder, PlotlyBarForm
 from .observable import ObservableBuilder
+from .chartjs import CahrtJSBarBuilder
 
 
 DEFAULT_CHART_FORM = PlotlyBarForm
@@ -12,4 +13,5 @@ def get_chart_engines() -> dict[str, type[BaseChartBuilder]]:
     return {
         "plotly": PlotlyBuilder,
         "observable": ObservableBuilder,
+        "chartjs": CahrtJSBarBuilder,
     }

ckanext/charts/chart_builders/chartjs.py

@@ -1,7 +1,65 @@
 from __future__ import annotations
 
-from ckanext.charts.chart_builders.base import BaseChartBuilder
+import json
+from typing import Any
 
+import ckanext.charts.exception as exception
+from ckanext.charts.chart_builders.base import BaseChartBuilder, BaseChartForm
 
-class ChartJSBuilder(BaseChartBuilder):
-    pass
+
+class ChartJsBuilder(BaseChartBuilder):
+    @classmethod
+    def get_supported_forms(cls) -> list[type[Any]]:
+        return [ChartJSBarForm]
+
+
+class CahrtJSBarBuilder(ChartJsBuilder):
+    def to_json(self) -> str:
+        data = {
+            "type": "bar",
+            "data": {"labels": self.df[self.settings["x"]].to_list(), "datasets": []},
+            "options": self.settings,
+        }
+
+        for value in self.df[self.settings["y"]]:
+            dataset = {
+                "label": value,
+                "data": value,
+                # "backgroundColor": "rgba(75, 192, 192, 0.2)",
+                # "borderColor": "rgba(75, 192, 192, 1)",
+                # "borderWidth": 1,
+            }
+
+            data["data"]["datasets"].append(dataset)
+
+        return json.dumps(data)
+
+
+class ChartJSBarForm(BaseChartForm):
+    name = "Bar"
+    builder = CahrtJSBarBuilder
+
+    def fill_field(self, choices: list[dict[str, str]]) -> dict[str, str]:
+        field = self.color_field(choices)
+        field.update({"field_name": "fill", "label": "Fill"})
+
+        return field
+
+    def get_form_fields(self):
+        columns = [{"value": col, "label": col} for col in self.df.columns]
+        chart_types = [
+            {"value": form.name, "label": form.name}
+            for form in self.builder.get_supported_forms()
+        ]
+
+        return [
+            self.title_field(),
+            self.description_field(),
+            self.engine_field(),
+            self.type_field(chart_types),
+            self.x_axis_field(columns),
+            self.y_axis_field(columns),
+            self.fill_field(columns),
+            self.opacity_field(),
+            self.limit_field(),
+        ]

ckanext/charts/templates/charts/charts_form.html

@@ -1,7 +1,7 @@
 {% import "macros/form.html" as form %}
 
 {% asset "charts/plotly" %}
-{# {% asset "charts/chartjs" %} #}
+{% asset "charts/chartjs" %}
 {% asset "charts/observable" %}
 {% asset "charts/charts-css" %}