cdb1831ceb
- Treat it as an image - Add a title and a description - Hide the axes, just in case
38 lines
1.6 KiB
Handlebars
38 lines
1.6 KiB
Handlebars
<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" elementId}} {{concat "desc-" elementId}}">
|
|
<title id="{{concat "title-" elementId}}">{{title}}</title>
|
|
<description id="{{concat "desc-" elementId}}">
|
|
{{#if description}}
|
|
{{description}}
|
|
{{else}}
|
|
X-axis values range from {{xRange.firstObject}} to {{xRange.lastObject}},
|
|
and Y-axis values range from {{yRange.firstObject}} to {{yRange.lastObject}}.
|
|
{{/if}}
|
|
</description>
|
|
<defs>
|
|
<linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
|
|
<stop class="start" offset="0%" />
|
|
<stop class="end" offset="100%" />
|
|
</linearGradient>
|
|
<clipPath id="{{maskId}}">
|
|
<path class="fill" d="{{area}}" />
|
|
</clipPath>
|
|
</defs>
|
|
<g class="y-gridlines gridlines" transform="translate({{yAxisOffset}}, 0)"></g>
|
|
<g class="canvas {{chartClass}}">
|
|
<path class="line" d="{{line}}" />
|
|
<rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
|
|
<rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" />
|
|
</g>
|
|
<g aria-hidden="true" class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
|
|
<g aria-hidden="true" class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
|
|
</svg>
|
|
<div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
|
|
<p>
|
|
<span class="label">
|
|
<span class="color-swatch {{chartClass}}" />
|
|
{{activeDatumLabel}}
|
|
</span>
|
|
<span class="value">{{activeDatumValue}}</span>
|
|
</p>
|
|
</div>
|