Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Charts: pass config and annotations to the macro as json #105

Merged
merged 5 commits into from
Feb 20, 2025
Merged

Charts: pass config and annotations to the macro as json #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
43217d5
Charts: pass config and annotations to the macro as json
helenb Feb 18, 2025
2d6ce9d
Use script tags to pass json to the javascript rather than data-attri…
helenb Feb 19, 2025
daa5494
Address a couple of small code review feedback points
helenb Feb 20, 2025
056ae02
Remove json encoding in the python and use jinja's filter
helenb Feb 20, 2025
35c518f
remove console log
helenb Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 22 additions & 12 deletions cms/jinja2/templates/datavis/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
{% macro onsChart(params) %}
<div data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}" data-highcharts-title="{{ params.title }}" {% if params.use_stacked_layout %}data-highcharts-use-stacked-layout{% endif %}>
<figure id="{{ params.domId }}">
<div
data-highcharts-base-chart
data-highcharts-type="{{ params.chartType }}"
data-highcharts-theme="{{ params.theme }}"
data-highcharts-title="{{ params.title }}"
data-highcharts-uuid="{{ params.uuid }}"
{% if params.use_stacked_layout %}data-highcharts-use-stacked-layout{% endif %}
>
<figure>
{# Heading levels will need to be configurable depending on page surroundings #}
<h3>{{ params.title }}</h3>
<h4>{{ params.subtitle }}</h4>
<div data-highcharts-chart data-highcharts-id="{{ params.uuid }}"></div>
<div data-highcharts-chart></div>
{% if params.caption %}
<figcaption>{{ params.caption }}</figcaption>
{% endif %}
</figure>

<!-- Set scripts to pass the config and annotations values as json to the javascript -->
{% set config_scriptid = ["config--", params.uuid] | join %}
{{ params.config|json_script(config_scriptid) }}

{% if params.annotations_values %}
{% set annotations_values_scriptid = ["annotations-values--", params.uuid] | join %}
{{ params.annotations_values|json_script(annotations_values_scriptid) }}
{% endif %}

{% if params.download_title and (params.download_image or params.download_csv or params.download_excel) %}
{% if params.download_title %}<h4>{{ params.download_title }}</h4>{% endif %}
<ol>
Expand All @@ -33,5 +31,17 @@
{% endif %}
</ol>
{% endif %}

{# script tags to pass json data to the javascript component #}
<script type="application/json" data-highcharts-config="{{ params.uuid }}">
{# Note that in the design system this will need to be a custom filter #}
{{ params.config|tojson }}
</script>
{% if params.annotations_values %}
<script type="application/json" data-highcharts-annotations-values="{{ params.uuid }}">
{# Note that in the design system will may need to be a custom filter #}
{{ params.annotations_values|tojson }}
</script>
{% endif %}
</div>
{% endmacro %}
13 changes: 8 additions & 5 deletions cms/static_src/javascript/components/highcharts-base-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@ class HighchartsBaseChart {
this.title = this.node.dataset.highchartsTitle;
this.useStackedLayout = this.node.hasAttribute('data-highcharts-use-stacked-layout');
const chartNode = this.node.querySelector('[data-highcharts-chart]');
const chartId = chartNode.dataset.highchartsId;
// We start with some config in the correct Highcharts format supplied by Wagtail
// This gets some further modifications
this.apiConfig = JSON.parse(this.node.querySelector(`#config--${chartId}`).textContent);
if (this.node.querySelector(`#annotations-values--${chartId}`)) {
this.uuid = this.node.dataset.highchartsUuid;

this.apiConfig = JSON.parse(
this.node.querySelector(`[data-highcharts-config="${this.uuid}"]`).textContent,
);
if (this.node.querySelector(`[data-highcharts-annotations-values="${this.uuid}"]`)) {
this.annotationsValues = JSON.parse(
this.node.querySelector(`#annotations-values--${chartId}`).textContent,
this.node.querySelector(`[data-highcharts-annotations-values="${this.uuid}"]`).textContent,
);
}

Expand All @@ -48,7 +51,7 @@ class HighchartsBaseChart {
// Will only run once per page load
this.setCommonChartOptions();

// Configure any annotations that have been specified
// Configure any annotations that have been specified (will be an empty array if no annotations are specified)
if (this.annotationsValues) {
this.configureAnnotations();
}
Expand Down