Ghost/ghost/admin/app/components/dashboard/charts/anchor.hbs
Kevin Ansfield 63b1e4e8ad
Resolved power-select related deprecation warnings for loading components by string (#15466)
no issue

- in many places we were passing a string as an argument to a `<PowerSelect>` related component that referred to a component name, that was throwing deprecation warnings because those strings were used dynamically with `{{component}}` later on which isn't statically analyzable
- switched to passing a component explicitly with `{{component}}`
- https://github.com/embroider-build/embroider/blob/main/REPLACING-COMPONENT-HELPER.md#when-youre-passing-a-component-to-someone-else
2022-09-24 17:00:05 +02:00

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