@ons/design-system 72.10.6 → 72.10.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/char-check-limit/_macro.njk +5 -4
- package/components/char-check-limit/_macro.spec.js +167 -7
- package/components/char-check-limit/character-check.js +23 -17
- package/components/char-check-limit/character-check.spec.js +106 -1
- package/components/chart/_chart.scss +33 -5
- package/components/chart/_macro.njk +169 -149
- package/components/chart/_macro.spec.js +215 -21
- package/components/chart/annotations-options.js +1 -1
- package/components/chart/bar-chart.js +1 -0
- package/components/chart/chart-iframe-resize.dom.js +8 -0
- package/components/chart/chart-iframe-resize.js +16 -0
- package/components/chart/chart.js +5 -0
- package/components/chart/example-bar-chart.njk +4 -0
- package/components/chart/example-iframe-chart.njk +32 -0
- package/components/chart/example-line-chart-with-annotations.njk +3 -1
- package/components/chart/example-line-chart.njk +4 -0
- package/components/chart/example-scatter-chart.njk +4 -0
- package/components/chart/range-annotations-options.js +1 -1
- package/components/chart/reference-line-annotations-options.js +1 -1
- package/components/checkboxes/_macro.spec.js +3 -3
- package/components/input/_macro.njk +1 -2
- package/components/input/_macro.spec.js +2 -22
- package/components/input/example-input-search-with-character-check.njk +0 -1
- package/components/textarea/_macro.njk +19 -3
- package/components/textarea/_macro.spec.js +76 -3
- package/components/textarea/example-textarea-with-word-limit.njk +20 -0
- package/css/main.css +1 -1
- package/js/main.js +2 -0
- package/package.json +3 -2
- package/scripts/main.es5.js +3 -1
- package/scripts/main.js +3 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
{% from "components/list/_macro.njk" import onsList %}
|
|
2
|
+
{% from "components/details/_macro.njk" import onsDetails %}
|
|
2
3
|
|
|
3
4
|
{% macro onsChart(params) %}
|
|
4
5
|
{% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
|
|
@@ -14,38 +15,37 @@
|
|
|
14
15
|
{% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
|
|
15
16
|
{% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
|
|
16
17
|
<div
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
|
|
18
|
+
{% if not params.iframeUrl %}
|
|
19
|
+
data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
|
|
20
|
+
data-highcharts-title="{{ params.title }}" data-highcharts-id="{{ params.id }}"
|
|
21
|
+
{% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
|
|
22
|
+
{% if params.percentageHeightDesktop and params.chartType != 'bar' %}
|
|
23
|
+
data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
|
|
24
|
+
{% endif %}
|
|
25
|
+
{% if params.percentageHeightMobile and params.chartType != 'bar' %}
|
|
26
|
+
data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
|
|
27
|
+
{% endif %}
|
|
28
|
+
{% if params.xAxis.tickIntervalMobile %}
|
|
29
|
+
data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
|
|
30
|
+
{% endif %}
|
|
31
|
+
{% if params.xAxis.tickIntervalDesktop %}
|
|
32
|
+
data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
|
|
33
|
+
{% endif %}
|
|
34
|
+
{% if params.yAxis.tickIntervalMobile %}
|
|
35
|
+
data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
|
|
36
|
+
{% endif %}
|
|
37
|
+
{% if params.yAxis.tickIntervalDesktop %}
|
|
38
|
+
data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
|
|
39
|
+
{% endif %}
|
|
40
|
+
{% if params.estimateLineLabel %}
|
|
41
|
+
data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
|
|
42
|
+
{% endif %}
|
|
43
|
+
{% if params.uncertaintyRangeLabel %}
|
|
44
|
+
data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
|
|
45
|
+
{% endif %}
|
|
46
|
+
{% if params.yAxis.customReferenceLineValue %}
|
|
47
|
+
data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
|
|
48
|
+
{% endif %}
|
|
49
49
|
{% endif %}
|
|
50
50
|
>
|
|
51
51
|
<figure class="ons-chart">
|
|
@@ -54,54 +54,59 @@
|
|
|
54
54
|
{{ openingSubtitleTag | safe }}
|
|
55
55
|
class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
|
|
56
56
|
{% endif %}
|
|
57
|
-
|
|
58
57
|
{% if params.description %}
|
|
59
58
|
<p class="ons-u-vh">{{ params.description }}</p>
|
|
60
59
|
{% endif %}
|
|
61
|
-
{% if params.
|
|
62
|
-
<div
|
|
63
|
-
{
|
|
64
|
-
<div class="ons-chart__boxplot-legend-item">
|
|
65
|
-
<span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
|
|
66
|
-
<span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
|
|
67
|
-
</div>
|
|
68
|
-
{% endif %}
|
|
69
|
-
{% if params.estimateLineLabel %}
|
|
70
|
-
<div class="ons-chart__boxplot-legend-item">
|
|
71
|
-
<span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
|
|
72
|
-
<span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
|
|
73
|
-
</div>
|
|
74
|
-
{% endif %}
|
|
60
|
+
{% if params.iframeUrl %}
|
|
61
|
+
<div data-chart-iframe id="{{ params.id }}" data-url="{{ params.iframeUrl }}" data-title="{{ params.title }}">
|
|
62
|
+
<iframe src="{{ params.iframeUrl }}" title="{{ params.title }}" class="ons-chart__iframe"> </iframe>
|
|
75
63
|
</div>
|
|
76
|
-
{% endif %}
|
|
77
|
-
{% if params.chartType in supportedChartTypes %}
|
|
78
|
-
<div data-highcharts-chart></div>
|
|
79
64
|
{% else %}
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
|
|
65
|
+
{% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
|
|
66
|
+
<div class="ons-chart__boxplot-legend">
|
|
67
|
+
{% if params.uncertaintyRangeLabel %}
|
|
68
|
+
<div class="ons-chart__boxplot-legend-item">
|
|
69
|
+
<span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
|
|
70
|
+
<span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
|
|
71
|
+
</div>
|
|
72
|
+
{% endif %}
|
|
73
|
+
{% if params.estimateLineLabel %}
|
|
74
|
+
<div class="ons-chart__boxplot-legend-item">
|
|
75
|
+
<span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
|
|
76
|
+
<span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
|
|
77
|
+
</div>
|
|
78
|
+
{% endif %}
|
|
79
|
+
</div>
|
|
80
|
+
{% endif %}
|
|
81
|
+
{% if params.chartType in supportedChartTypes %}
|
|
82
|
+
<div data-highcharts-chart class="ons-chart__chart"></div>
|
|
83
|
+
{% else %}
|
|
84
|
+
<p data-invalid-chart-type data-unsupported-chart-text>
|
|
85
|
+
<b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
|
|
86
|
+
</p>
|
|
87
|
+
{% endif %}
|
|
83
88
|
{% endif %}
|
|
84
89
|
{#
|
|
85
90
|
Footnotes for the annotations at mobile
|
|
86
91
|
Hidden from screen readers because the full text will be read out where they appear in the chart
|
|
87
92
|
#}
|
|
88
|
-
{% if params.annotations or params.rangeAnnotations or params.referenceLineAnnotations %}
|
|
89
|
-
<ul class="ons-
|
|
93
|
+
{% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
|
|
94
|
+
<ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
|
|
90
95
|
{% for annotation in params.annotations %}
|
|
91
|
-
<li class="ons-
|
|
92
|
-
<span class="ons-
|
|
96
|
+
<li class="ons-chart__annotations-footnotes_item">
|
|
97
|
+
<span class="ons-chart__annotations-footnotes-number">{{ loop.index }}</span>
|
|
93
98
|
{{ annotation.text }}
|
|
94
99
|
</li>
|
|
95
100
|
{% endfor %}
|
|
96
101
|
{% for rangeAnnotation in params.rangeAnnotations %}
|
|
97
|
-
<li class="ons-
|
|
98
|
-
<span class="ons-
|
|
102
|
+
<li class="ons-chart__annotations-footnotes_item">
|
|
103
|
+
<span class="ons-chart__annotations-footnotes-number">{{ loop.index + params.annotations | length }}</span>
|
|
99
104
|
{{ rangeAnnotation.text }}
|
|
100
105
|
</li>
|
|
101
106
|
{% endfor %}
|
|
102
107
|
{% for referenceLineAnnotation in params.referenceLineAnnotations %}
|
|
103
|
-
<li class="ons-
|
|
104
|
-
<span class="ons-
|
|
108
|
+
<li class="ons-chart__annotations-footnotes_item">
|
|
109
|
+
<span class="ons-chart__annotations-footnotes-number"
|
|
105
110
|
>{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
|
|
106
111
|
>
|
|
107
112
|
{{ referenceLineAnnotation.text }}
|
|
@@ -109,7 +114,6 @@
|
|
|
109
114
|
{% endfor %}
|
|
110
115
|
</ul>
|
|
111
116
|
{% endif %}
|
|
112
|
-
|
|
113
117
|
{% if params.caption %}
|
|
114
118
|
<figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
|
|
115
119
|
{% endif %}
|
|
@@ -125,102 +129,118 @@
|
|
|
125
129
|
})
|
|
126
130
|
}}
|
|
127
131
|
{% endif %}
|
|
128
|
-
|
|
129
|
-
{%
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
{
|
|
133
|
-
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
},
|
|
142
|
-
"dataLabels": {
|
|
143
|
-
"enabled": item.dataLabels if item.dataLabels else false
|
|
144
|
-
},
|
|
145
|
-
"connectNulls": item.connectNulls if item.connectNulls else false,
|
|
146
|
-
"type": item.type if item.type and (item.type == 'line' and params.chartType in supportedChartTypesWithLine) or (item.type == 'scatter' and params.chartType in supportedChartTypesWithScatter) else params.chartType
|
|
147
|
-
}
|
|
148
|
-
%}
|
|
149
|
-
{# Use `set` tag to avoid printing the return value of extend #}
|
|
150
|
-
{% set _ = extend(series, seriesItem) %}
|
|
151
|
-
{% endif %}
|
|
152
|
-
{% if item.type == 'line' %}
|
|
153
|
-
{% set lineSeriesCount = lineSeriesCount + 1 %}
|
|
154
|
-
{% endif %}
|
|
155
|
-
{% endfor %}
|
|
156
|
-
{# Set the legend value to true by default #}
|
|
157
|
-
{% set legendValue = true %}
|
|
158
|
-
{% if params.legend is defined %}
|
|
159
|
-
{# if a legend parameter has been provided, check that it is a boolean #}
|
|
160
|
-
{% if params.legend == true or params.legend == false %}
|
|
161
|
-
{# legend value is a boolean - use the value passed in #}
|
|
162
|
-
{% set legendValue = params.legend %}
|
|
163
|
-
{% endif %}
|
|
132
|
+
|
|
133
|
+
{% if params.footnotes %}
|
|
134
|
+
{% set footnotesId = ["footnotes--", params.id] | join %}
|
|
135
|
+
|
|
136
|
+
{{
|
|
137
|
+
onsDetails({
|
|
138
|
+
"id": footnotesId,
|
|
139
|
+
"title": params.footnotes.title,
|
|
140
|
+
"content": params.footnotes.content,
|
|
141
|
+
"headingLevel": headingLevel + 2,
|
|
142
|
+
"classes": "ons-u-mt-xl"
|
|
143
|
+
})
|
|
144
|
+
}}
|
|
164
145
|
{% endif %}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
146
|
+
|
|
147
|
+
{% if (params.chartType in supportedChartTypes) and not params.iframeUrl %}
|
|
148
|
+
{% set series = [] %}
|
|
149
|
+
{% set lineSeriesCount = 0 %}
|
|
150
|
+
{% for item in params.series %}
|
|
151
|
+
{% if item.type == 'line' and lineSeriesCount > 0 %}
|
|
152
|
+
{# skip extra line series as the DS guidelines only allow for one extra line series #}
|
|
153
|
+
{% else %}
|
|
154
|
+
{%
|
|
155
|
+
set seriesItem = {
|
|
156
|
+
"name": item.name if item.name else '',
|
|
157
|
+
"data": item.data if item.data else [],
|
|
158
|
+
"marker": {
|
|
159
|
+
"enabled": true if (item.type == 'scatter' or params.chartType == 'scatter' or item.marker == true) else false
|
|
160
|
+
},
|
|
161
|
+
"dataLabels": {
|
|
162
|
+
"enabled": item.dataLabels if item.dataLabels else false
|
|
163
|
+
},
|
|
164
|
+
"connectNulls": item.connectNulls if item.connectNulls else false,
|
|
165
|
+
"type": item.type if item.type and (item.type == 'line' and params.chartType in supportedChartTypesWithLine) or (item.type == 'scatter' and params.chartType in supportedChartTypesWithScatter) else params.chartType
|
|
166
|
+
}
|
|
167
|
+
%}
|
|
168
|
+
{# Use `set` tag to avoid printing the return value of extend #}
|
|
169
|
+
{% set _ = extend(series, seriesItem) %}
|
|
170
|
+
{% endif %}
|
|
171
|
+
{% if item.type == 'line' %}
|
|
172
|
+
{% set lineSeriesCount = lineSeriesCount + 1 %}
|
|
173
|
+
{% endif %}
|
|
174
|
+
{% endfor %}
|
|
175
|
+
{# Set the legend value to true by default #}
|
|
176
|
+
{% set legendValue = true %}
|
|
177
|
+
{% if params.legend is defined %}
|
|
178
|
+
{# if a legend parameter has been provided, check that it is a boolean #}
|
|
179
|
+
{% if params.legend == true or params.legend == false %}
|
|
180
|
+
{# legend value is a boolean - use the value passed in #}
|
|
181
|
+
{% set legendValue = params.legend %}
|
|
182
|
+
{% endif %}
|
|
183
|
+
{% endif %}
|
|
184
|
+
{%
|
|
185
|
+
set config = {
|
|
186
|
+
"chart": {
|
|
187
|
+
"type": params.chartType
|
|
176
188
|
},
|
|
177
|
-
"
|
|
178
|
-
"
|
|
189
|
+
"legend": {
|
|
190
|
+
"enabled" : legendValue
|
|
179
191
|
},
|
|
180
|
-
"
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
"
|
|
192
|
+
"yAxis": {
|
|
193
|
+
"title": {
|
|
194
|
+
"text": params.yAxis.title
|
|
195
|
+
},
|
|
196
|
+
"labels": {
|
|
197
|
+
"format": params.yAxis.labelFormat
|
|
198
|
+
},
|
|
199
|
+
"min": params.yAxis.min if params.yAxis.min is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
|
|
200
|
+
"max": params.yAxis.max if params.yAxis.max is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
|
|
201
|
+
"startOnTick": params.yAxis.startOnTick if params.yAxis.startOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
|
|
202
|
+
"endOnTick": params.yAxis.endOnTick if params.yAxis.endOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined
|
|
188
203
|
},
|
|
189
|
-
"
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
204
|
+
"xAxis": {
|
|
205
|
+
"title": {
|
|
206
|
+
"text": params.xAxis.title
|
|
207
|
+
},
|
|
208
|
+
"categories": params.xAxis.categories,
|
|
209
|
+
"type": params.xAxis.type,
|
|
210
|
+
"labels": {
|
|
211
|
+
"format": params.xAxis.labelFormat
|
|
212
|
+
},
|
|
213
|
+
"min": params.xAxis.min if params.xAxis.min is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
|
|
214
|
+
"max": params.xAxis.max if params.xAxis.max is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
|
|
215
|
+
"startOnTick": params.xAxis.startOnTick if params.xAxis.startOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
|
|
216
|
+
"endOnTick": params.xAxis.endOnTick if params.xAxis.endOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined
|
|
193
217
|
},
|
|
194
|
-
"
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
"endOnTick": params.xAxis.endOnTick if params.xAxis.endOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined
|
|
198
|
-
},
|
|
199
|
-
"series": series
|
|
200
|
-
}
|
|
201
|
-
%}
|
|
218
|
+
"series": series
|
|
219
|
+
}
|
|
220
|
+
%}
|
|
202
221
|
|
|
203
|
-
|
|
204
|
-
|
|
222
|
+
<!-- Set scripts to pass the config values as json to the javascript -->
|
|
223
|
+
<!-- prettier-ignore-start -->
|
|
205
224
|
<script type="application/json" data-highcharts-config--{{ params.id }}>
|
|
206
225
|
{{ config | tojson }}
|
|
207
226
|
</script>
|
|
227
|
+
|
|
228
|
+
{% if params.annotations %}
|
|
229
|
+
<script type="application/json" data-highcharts-annotations--{{ params.id }}>
|
|
230
|
+
{{ params.annotations | tojson }}
|
|
231
|
+
</script>
|
|
232
|
+
{% endif %}
|
|
233
|
+
{% if params.rangeAnnotations %}
|
|
234
|
+
<script type="application/json" data-highcharts-range-annotations--{{ params.id }}>
|
|
235
|
+
{{ params.rangeAnnotations | tojson }}
|
|
236
|
+
</script>
|
|
237
|
+
{% endif %}
|
|
238
|
+
{% if params.referenceLineAnnotations %}
|
|
239
|
+
<script type="application/json" data-highcharts-reference-line-annotations--{{ params.id }}>
|
|
240
|
+
{{ params.referenceLineAnnotations | tojson }}
|
|
241
|
+
</script>
|
|
242
|
+
{% endif %}
|
|
243
|
+
<!-- prettier-ignore-end -->
|
|
208
244
|
{% endif %}
|
|
209
|
-
{% if params.annotations %}
|
|
210
|
-
<script type="application/json" data-highcharts-annotations--{{ params.id }}>
|
|
211
|
-
{{ params.annotations | tojson }}
|
|
212
|
-
</script>
|
|
213
|
-
{% endif %}
|
|
214
|
-
{% if params.rangeAnnotations %}
|
|
215
|
-
<script type="application/json" data-highcharts-range-annotations--{{ params.id }}>
|
|
216
|
-
{{ params.rangeAnnotations | tojson }}
|
|
217
|
-
</script>
|
|
218
|
-
{% endif %}
|
|
219
|
-
{% if params.referenceLineAnnotations %}
|
|
220
|
-
<script type="application/json" data-highcharts-reference-line-annotations--{{ params.id }}>
|
|
221
|
-
{{ params.referenceLineAnnotations | tojson }}
|
|
222
|
-
</script>
|
|
223
|
-
{% endif %}
|
|
224
|
-
<!-- prettier-ignore-end -->
|
|
225
245
|
</div>
|
|
226
246
|
{% endmacro %}
|