open-vault/ui/app/templates/components/clients/vertical-bar-chart.hbs
claire bontempo 999d243544
UI/filter monthly graphs (#15279)
* alphabetize utils

* add util to add namespace key

* finish filtering

* add fake data for filtering

* address comments

* add empty state for no new client counts, when filtered by namespace

* fix mirage clients linting

* re-add namespaces to month object

* clean up filtering

* add tests and refactor accordingly

* fix tooltip bug and chart new month client chart not rendering

* filter out undefined

* optional method chaining

* add filter and fix ticks for line chart

* fix axes domains

* fix average calculation
2022-05-09 12:16:32 -07:00

36 lines
1 KiB
Handlebars

{{#if @dataset}}
<svg
data-test-vertical-bar-chart
class="chart has-grid"
{{on "mouseleave" this.removeTooltip}}
{{did-insert this.renderChart @dataset}}
{{did-update this.renderChart @dataset}}
>
</svg>
{{else}}
<div class="chart-empty-state">
<EmptyState @title={{@noDataTitle}} @subTitle={{or @noDataMessage "No data to display"}} @bottomBorder={{true}} />
</div>
{{/if}}
{{! TOOLTIP }}
{{#if this.tooltipTarget}}
{{! Required to set tag name = div https://github.com/yapplabs/ember-modal-dialog/issues/290 }}
{{! Component must be in curly bracket notation }}
{{! template-lint-disable no-curly-component-invocation }}
{{#modal-dialog
tagName="div"
tetherTarget=this.tooltipTarget
targetAttachment="bottom middle"
attachment="bottom middle"
offset="40px 0"
}}
<div class="chart-tooltip vertical-chart">
<p>{{this.tooltipTotal}}</p>
<p>{{this.entityClients}}</p>
<p>{{this.nonEntityClients}}</p>
</div>
<div class="chart-tooltip-arrow"></div>
{{/modal-dialog}}
{{/if}}