From c2c45f66c40c2be33dabbc945baeb7d659a7572f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnar=20Tumi=20=C3=9Eorsteinsson?= Date: Tue, 18 Jun 2024 15:50:17 +0000 Subject: [PATCH] optional config --- README.md | 32 +++++++++++++++++++ wagtailcharts/blocks.py | 6 ++++ .../static/wagtailcharts/js/wagtailcharts.js | 6 +++- .../wagtailcharts/blocks/chart_block.html | 1 + wagtailcharts_demo/home/blocks.py | 8 +++-- wagtailcharts_demo/home/static/js/main.js | 14 ++++++++ .../home/templates/home/home_page.html | 1 + .../static/js/wagtailcharts_demo.js | 13 ++++++++ 8 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 wagtailcharts_demo/home/static/js/main.js diff --git a/README.md b/README.md index 1367167..3ece112 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,38 @@ CHART_TYPES = ( ) ``` +### `callbacks` + +Since ChartJS and the plugins have a plethora of options available, we will never be able to make them all available within the wagtail interface. +That is why we added a chart config callback option. + +```python +CHART_CONFIG_CALLBACKS = ( + ('barchart_labels', 'Bigger font and bold labels'), +) + +class ContentBlocks(StreamBlock): + chart_block = ChartBlock(callbacks=CHART_CONFIG_CALLBACKS) +``` + +You then need to have a global function named the same (in this case 'barchart_labels') that returns an options object with the overrides/addons you want to add: + +```js +window.barchart_labels = function() { + return { + plugins: { + datalabels: { + font: { + size: 18, + weight: 'bold', + }, + color: '#ff0000' + } + } + } +} +``` + ## Dependencies * This project relies on [Jspreadsheet Community Edition](https://bossanova.uk/jspreadsheet/v4/) for data entry and manipulation. diff --git a/wagtailcharts/blocks.py b/wagtailcharts/blocks.py index eae0331..4e906ca 100644 --- a/wagtailcharts/blocks.py +++ b/wagtailcharts/blocks.py @@ -110,6 +110,10 @@ def __init__(self, chart_types=CHART_TYPES, **kwargs): chart_type_block.set_name('chart_type') self.child_blocks['chart_type'] = chart_type_block self.child_blocks.move_to_end('chart_type', last=False) + if 'callbacks' in kwargs: + callbacks_block = ChoiceBlock(choices=kwargs.get('callbacks'), label='Chart Config Callbacks', required=False) + callbacks_block.set_name('callbacks') + self.child_blocks['callbacks'] = callbacks_block title = CharBlock(required=False) datasets = TextBlock(default='{"data":[], "options":{}}') @@ -122,6 +126,7 @@ class Meta: template = 'wagtailcharts/blocks/chart_block.html' colors = CHART_COLOR_CHOICES multi_chart_types = MULTI_CHART_TYPES + callbacks = None class ChartBlockAdapter(StructBlockAdapter): @@ -132,6 +137,7 @@ def js_args(self, block): meta = result[2] meta['colors'] = block.meta.colors meta['multi_chart_types'] = block.meta.multi_chart_types + meta['callbacks'] = block.meta.callbacks result[2] = meta return result diff --git a/wagtailcharts/static/wagtailcharts/js/wagtailcharts.js b/wagtailcharts/static/wagtailcharts/js/wagtailcharts.js index 1094026..48a1eef 100644 --- a/wagtailcharts/static/wagtailcharts/js/wagtailcharts.js +++ b/wagtailcharts/static/wagtailcharts/js/wagtailcharts.js @@ -126,6 +126,7 @@ for (i = 0; i < charts.length; ++i) { const chart_options = JSON.parse(charts[i].dataset.datasets).options; const chart_settings = JSON.parse(charts[i].dataset.config); const chartType = charts[i].dataset.chartType; + const configCallback = charts[i].dataset.callback || null; const chartObj = chart_types[chartType]; let datasets = chartObj.render_datasets(chart_data, chart_options); const labels = chartObj.render_labels(chart_data, chart_options); @@ -369,7 +370,10 @@ for (i = 0; i < charts.length; ++i) { chartOptions.options = mergeDeep(options, chart_types[chartType].chart_options) - console.log(chartOptions) + if (configCallback !== null) { + const fn = new Function(`return ${configCallback}()`); + chartOptions.options = mergeDeep(chartOptions.options, fn()) + } let myChart = new Chart(charts[i].getContext('2d'), chartOptions); } \ No newline at end of file diff --git a/wagtailcharts/templates/wagtailcharts/blocks/chart_block.html b/wagtailcharts/templates/wagtailcharts/blocks/chart_block.html index 52ae910..7f85230 100644 --- a/wagtailcharts/templates/wagtailcharts/blocks/chart_block.html +++ b/wagtailcharts/templates/wagtailcharts/blocks/chart_block.html @@ -10,6 +10,7 @@ data-datasets="{{self.datasets}}" data-config="{{self.settings.config}}" data-chart-type="{{self.chart_type}}" + {% if self.callbacks %}data-callback="{{self.callbacks}}"{% endif %} aria-label="A chart {% if self.title %} with the title {{self.title}} {%endif%}"> >

diff --git a/wagtailcharts_demo/home/blocks.py b/wagtailcharts_demo/home/blocks.py index cb45c5c..a70cf9c 100644 --- a/wagtailcharts_demo/home/blocks.py +++ b/wagtailcharts_demo/home/blocks.py @@ -23,10 +23,14 @@ ) CHART_TYPES = ( - ('line', 'Line chart with custom title'), + ('bar', 'Bar chart with custom title'), +) + +CHART_CONFIG_CALLBACKS = ( + ('barchart_labels', 'Bigger font and bold labels'), ) class ContentBlocks(StreamBlock): title = CharBlock() - chart_block_custom = ChartBlock(label="My custom chart block", colors=COLORS, chart_types=CHART_TYPES) + chart_block_custom = ChartBlock(label="My custom chart block", colors=COLORS, chart_types=CHART_TYPES, callbacks=CHART_CONFIG_CALLBACKS) chart_block = ChartBlock() diff --git a/wagtailcharts_demo/home/static/js/main.js b/wagtailcharts_demo/home/static/js/main.js new file mode 100644 index 0000000..4c52f9e --- /dev/null +++ b/wagtailcharts_demo/home/static/js/main.js @@ -0,0 +1,14 @@ + +window.barchart_labels = function() { + return { + plugins: { + datalabels: { + font: { + size: 18, + weight: 'bold', + }, + color: '#ff0000' + } + } + } + } \ No newline at end of file diff --git a/wagtailcharts_demo/home/templates/home/home_page.html b/wagtailcharts_demo/home/templates/home/home_page.html index 2cfa8fa..cfcfd2d 100644 --- a/wagtailcharts_demo/home/templates/home/home_page.html +++ b/wagtailcharts_demo/home/templates/home/home_page.html @@ -19,6 +19,7 @@

{{self.title}}

{% block extra_js %} + {% render_charts %} {% endblock %} diff --git a/wagtailcharts_demo/wagtailcharts_demo/static/js/wagtailcharts_demo.js b/wagtailcharts_demo/wagtailcharts_demo/static/js/wagtailcharts_demo.js index e69de29..98db66b 100644 --- a/wagtailcharts_demo/wagtailcharts_demo/static/js/wagtailcharts_demo.js +++ b/wagtailcharts_demo/wagtailcharts_demo/static/js/wagtailcharts_demo.js @@ -0,0 +1,13 @@ +window.bold_and_bigger_font_for_barchart_labels = function() { + return { + plugins: { + datalabels: { + font: { + size: 18, + weight: 'bold', + }, + color: '#ff0000' + } + } + } + } \ No newline at end of file