open-vault/ui/app/templates/components/http-requests-bar-chart.hbs
Noelle Daley 4fd783d3f4
Add HTTP Request Volume page (#6925)
* Add http request volume table (#6765)

* init http metrics page

* remove flex-table-column

* add http requests table

* calculate percent change between each counter

* start percent change tests

* style request table

* show percent more/less glyph

* add percent more less tests

* add inline alert about recorded metrics

* make arrows diagonal

* remove conditional inside countersWithChange

* add better error msg

* use tagName and wrapping element a la glimmer components

* extend ClusterRouteBase so auth and seal checks happen

* make table accessible

* remove curlies

* add HttpRequestsTable to storybook

* make table accessible

* use qunit dom for better assertions

* remove EmptyState since we will never have 0 requests

* ensure counters is set in test context

* Http request volume/add barchart (#6814)

* Add http request volume table (#6765)

* init http metrics page

* remove flex-table-column

* add http requests table

* calculate percent change between each counter

* start percent change tests

* style request table

* show percent more/less glyph

* add percent more less tests

* add inline alert about recorded metrics

* make arrows diagonal

* remove conditional inside countersWithChange

* add better error msg

* use tagName and wrapping element a la glimmer components

* extend ClusterRouteBase so auth and seal checks happen

* make table accessible

* remove curlies

* add HttpRequestsTable to storybook

* make table accessible

* use qunit dom for better assertions

* remove EmptyState since we will never have 0 requests

* ensure counters is set in test context

* add http-requests-bar-chart

* add HttpRequestsBarChart tests

* add HttpRequestsBarChart to Storybook

* format total number of requests according to locale

* do not show extra minus sign when percent change is negative

* add link to request metrics in status bar menu

* only show bar chart if we have data for more than 1 month

* make ticks lighter

* ensure charts show data for correct month

* make example counters response look like the adapter response instead of the raw api response

* ensure ui shows the same utc date as the api response

* add format-utc tests

* downgrade to d3 v4 to support ie11

* add gridlines

* move dasharray to css

* use scheduleOnce instead of debounce to prevent multiple re-renders

* add key function to bars

* add exit case when data is no longer in parsedCounters

* fix timestamp in table test

* fix timestamps

* use utcParse and fallback to isoParse for non-UTC dates

* fix bar chart tests
2019-06-19 16:14:25 -07:00

19 lines
610 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)">
<rect x="0" y="0" width="100%" height="100%" style="fill: url(#bg-gradient)"></rect>
<clipPath id="bars-container">
</clipPath>
</g>
</svg>