feat: charts options support (#236)

Author: lukasvinclav

src/unfold/static/unfold/js/app.js

@@ -97,7 +97,7 @@ const submitSearch = () => {
 /*************************************************************
  * Chart
  *************************************************************/
-const CHART_OPTIONS = {
+const DEFAULT_CHART_OPTIONS = {
   animation: false,
   barPercentage: 1,
   base: 0,
@@ -197,6 +197,7 @@ const renderCharts = () => {
     const ctx = chart.getContext("2d");
     const data = chart.dataset.value;
     const type = chart.dataset.type;
+    const options = chart.dataset.options;
 
     if (!data) {
       return;
@@ -206,7 +207,7 @@ const renderCharts = () => {
       new Chart(ctx, {
         type: type || "bar",
         data: JSON.parse(chart.dataset.value),
-        options: CHART_OPTIONS,
+        options: options ? JSON.parse(options) : DEFAULT_CHART_OPTIONS,
       })
     );
   });

src/unfold/templates/admin/change_form.html

@@ -65,7 +65,7 @@
             {% csrf_token %}
 
             {% if actions_detail %}
-                <div class="bg-gray-50 flex justify-end mb-4 p-3 rounded-md dark:bg-gray-800">
+                <div class="bg-gray-50 flex justify-end -mt-6 mb-4 p-3 rounded-md dark:bg-gray-800">
                     {% for action in actions_detail %}
                         <a href="{{ action.path }}" class="bg-white text-gray-500 border cursor-pointer flex font-medium items-center px-3 py-2 mr-3 rounded-md shadow-sm text-sm dark:bg-gray-900 dark:border dark:border-gray-700 dark:text-gray-400"
                             {% for attr_name, attr_value in action.attrs.items %}

src/unfold/templates/unfold/components/chart/bar.html

@@ -1,3 +1,3 @@
 <div class="relative w-full{% if class %} {{ class }}{% endif %}">
-  <canvas class="chart" data-type="bar" data-value="{{ data }}" {% if width %}width="{{ width }}"{% endif %} {% if height %}height="{{ height }}"{% endif %}></canvas>
+  <canvas class="chart" {% if options %}data-options="{{ options }}"{% endif %} data-type="bar" data-value="{{ data }}" {% if width %}width="{{ width }}"{% endif %} {% if height %}height="{{ height }}"{% endif %}></canvas>
 </div>

src/unfold/templates/unfold/components/chart/line.html

@@ -1,3 +1,3 @@
 <div class="relative w-full{% if class %} {{ class }}{% endif %}">
-  <canvas class="chart" data-type="line" data-value="{{ data }}" {% if width %}width="{{ width }}"{% endif %} {% if height %}height="{{ height }}"{% endif %}></canvas>
+  <canvas class="chart" {% if options %}data-options="{{ options }}"{% endif %} data-type="line" data-value="{{ data }}" {% if width %}width="{{ width }}"{% endif %} {% if height %}height="{{ height }}"{% endif %}></canvas>
 </div>