open-vault/ui/app/templates/components/http-requests-bar-chart.hbs
Noelle Daley 4c9dec60b7
UI: Add HTTP Requests Bar Chart Tooltip (#6972)
* initialize tooltip

* style tooltip

* show date in tooltip

* show tooltip on hover

* style tooltip

* add hover padding for when bar is very short

* add tooltip test and format tooltip date

* revert to using real data

* update comment about binding the tooltip to shadowBars

* remove d3array

* use double colons for pseudo elements

* use elementId in bars-container id name to prevent clashing

* use Object.freeze to eliminate linting error
2019-06-25 15:36:33 -07:00

20 lines
680 B
Handlebars

{{! template-lint-disable no-inline-styles}}
<svg class="http-requests-bar-chart">
<defs>
<linearGradient id="bg-gradient" gradientTransform="rotate(90)">
<stop stop-color="#5b92ff" stop-opacity="1" offset="0%"></stop>
<stop stop-color="#5b92ff" stop-opacity="0.5" offset="100%"></stop>
</linearGradient>
</defs>
<g class="gridlines"></g>
<g class="x-axis"></g>
<g class="y-axis"></g>
<g clip-path="url(#bars-container-{{this.elementId}})">
<rect x="0" y="0" width="100%" height="100%" style="fill: url(#bg-gradient)"></rect>
<clipPath id="bars-container-{{this.elementId}}">
</clipPath>
</g>
<g class="shadow-bars"></g>
</svg>