Ghost/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
James Morris cd9ec81006 Trying out moving the date dropdown
no issue

- seeing if this feels better up above than it is when inside the anchor
2022-05-11 16:08:18 +01:00

72 lines
3.2 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<section class="gh-dashboard5-section gh-dashboard5-anchor" {{did-insert this.loadCharts}}>
<article class="gh-dashboard5-box">
{{#if this.hasPaidTiers}}
<div class="gh-dashboard5-select-title">
<PowerSelect
@selected={{this.selectedDisplayOption}}
@options={{this.displayOptions}}
@searchEnabled={{false}}
@onChange={{this.onDisplayChange}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
@matchTriggerWidth={{false}}
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
{{else}}
<Dashboard::v5::Parts::Metric
@label="Total members"
@value={{format-number this.totalMembers}}
@trends={{this.hasTrends}}
@percentage={{this.totalMembersTrend}}
@large={{true}} />
{{/if}}
<div class="gh-dashboard5-hero {{unless this.hasPaidTiers 'is-solo'}}">
<div class="gh-dashboard5-chart gh-dashboard5-totals">
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{200}} />
{{/if}}
</div>
<div id="gh-dashboard5-anchor-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
<span class="indicator line"></span>
<span class="value"></span>
<span class="metric">{{this.selectedDisplayOption.name}}</span>
</div>
</div>
</div>
<div class="gh-dashboard5-chart-ticks">
<span id="gh-dashboard5-anchor-date-start">-</span>
<span id="gh-dashboard5-anchor-date-end">-</span>
</div>
</div>
{{#if this.hasPaidTiers}}
<article class="gh-dashboard5-minicharts">
<Dashboard::v5::Charts::PaidMrr />
<Dashboard::v5::Charts::PaidBreakdown />
<Dashboard::v5::Charts::PaidMix />
</article>
{{/if}}
</div>
</article>
</section>