|
88 | 88 |
|
89 | 89 | {#if resolvedProfile.platform === Platform.Imagine} |
90 | 90 | <CardGrid> |
91 | | - <svelte:fragment slot="title">Imagine Credits</svelte:fragment> |
92 | | - Total Imagine credits consumed across your project. Resets at the start of each billing cycle. |
93 | | - <svelte:fragment slot="aside"> |
94 | | - {#if data.usage.imagineCredits} |
95 | | - {@const creditsTotal = data.usage.imagineCredits.reduce((sum, item) => sum + item.value, 0)} |
96 | | - <Layout.Stack gap="s" direction="row" alignItems="baseline"> |
97 | | - <Typography.Title> |
98 | | - {formatNumberWithCommas(creditsTotal)} |
99 | | - </Typography.Title> |
100 | | - <Typography.Text>Credits</Typography.Text> |
101 | | - </Layout.Stack> |
102 | | - {#if data.usage.imagineCredits.length > 0} |
103 | | - <BarChart |
104 | | - options={{ |
105 | | - yAxis: { |
106 | | - axisLabel: { |
107 | | - formatter: formatNum |
| 91 | + <svelte:fragment slot="title">Imagine Credits</svelte:fragment> |
| 92 | + Total Imagine credits consumed across your project. Resets at the start of each billing cycle. |
| 93 | + <svelte:fragment slot="aside"> |
| 94 | + {#if data.usage.imagineCredits} |
| 95 | + {@const creditsTotal = data.usage.imagineCredits.reduce( |
| 96 | + (sum, item) => sum + item.value, |
| 97 | + 0 |
| 98 | + )} |
| 99 | + <Layout.Stack gap="s" direction="row" alignItems="baseline"> |
| 100 | + <Typography.Title> |
| 101 | + {formatNumberWithCommas(creditsTotal)} |
| 102 | + </Typography.Title> |
| 103 | + <Typography.Text>Credits</Typography.Text> |
| 104 | + </Layout.Stack> |
| 105 | + {#if data.usage.imagineCredits.length > 0} |
| 106 | + <BarChart |
| 107 | + options={{ |
| 108 | + yAxis: { |
| 109 | + axisLabel: { |
| 110 | + formatter: formatNum |
| 111 | + } |
108 | 112 | } |
109 | | - } |
110 | | - }} |
111 | | - series={[ |
112 | | - { |
113 | | - name: 'Credits', |
114 | | - data: [...data.usage.imagineCredits.map((e) => [e.date, e.value])] |
115 | | - } |
116 | | - ]} /> |
| 113 | + }} |
| 114 | + series={[ |
| 115 | + { |
| 116 | + name: 'Credits', |
| 117 | + data: [ |
| 118 | + ...data.usage.imagineCredits.map((e) => [e.date, e.value]) |
| 119 | + ] |
| 120 | + } |
| 121 | + ]} /> |
| 122 | + {/if} |
| 123 | + {:else} |
| 124 | + <Card isDashed> |
| 125 | + <Layout.Stack gap="xs" alignItems="center" justifyContent="center"> |
| 126 | + <Icon icon={IconChartSquareBar} size="l" /> |
| 127 | + <Typography.Text variant="m-600">No data to show</Typography.Text> |
| 128 | + </Layout.Stack> |
| 129 | + </Card> |
117 | 130 | {/if} |
118 | | - {:else} |
119 | | - <Card isDashed> |
120 | | - <Layout.Stack gap="xs" alignItems="center" justifyContent="center"> |
121 | | - <Icon icon={IconChartSquareBar} size="l" /> |
122 | | - <Typography.Text variant="m-600">No data to show</Typography.Text> |
123 | | - </Layout.Stack> |
124 | | - </Card> |
125 | | - {/if} |
126 | | - </svelte:fragment> |
127 | | - </CardGrid> |
| 131 | + </svelte:fragment> |
| 132 | + </CardGrid> |
128 | 133 | {/if} |
129 | 134 |
|
130 | 135 | <CardGrid> |
|
0 commit comments