Skip to content

Commit

Permalink
Add support for number formatting in charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@katrinDY
katrinDY committed Apr 10, 2024
1 parent 3139f61 commit 65ee544
Show file tree
Hide file tree
Showing 13 changed files with 678 additions and 42 deletions.
104 changes: 104 additions & 0 deletions client/web/compose/src/components/Chart/Report/FunnelChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,21 @@

<template #metric-options="{ metric }">
<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('numberFormat')"
label-class="text-primary"
>
<b-input
v-model="report.metricFormatter.numberFormat"
placeholder="0.00"
/>
</b-form-group>
</b-col>

<b-col
cols="12"
lg="6"
Expand Down Expand Up @@ -59,6 +74,95 @@
</b-form-group>
</b-col>
</b-row>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('prefix')"
label-class="text-primary"
>
<b-input
v-model="report.metricFormatter.prefix"
placeholder="USD/mo"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('suffix')"
label-class="text-primary"
>
<b-input
v-model="report.metricFormatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
</b-row>
</template>

<template #additional-config="{ report }">
<hr>
<div class="px-3">
<h5 class="mb-3">
{{ $t('edit.additionalConfig.tooltip.label') }}
</h5>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('numberFormat')"
label-class="text-primary"
>
<b-input
v-model="report.formatter.numberFormat"
placeholder="0.00"
/>
</b-form-group>
</b-col>

<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('prefix')"
label-class="text-primary"
>
<b-input
v-model="report.formatter.prefix"
placeholder="USD/mo"
/>
</b-form-group>
</b-col>
</b-row>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('suffix')"
label-class="text-primary"
>
<b-input
v-model="report.formatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
</b-row>
</div>
</template>
</report-edit>
</template>
Expand Down
109 changes: 109 additions & 0 deletions client/web/compose/src/components/Chart/Report/GaugeChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@
</b-form-checkbox>
</b-form-group>
</b-col>
</b-row>

<b-row>
<b-col
cols="12"
lg="6"
Expand Down Expand Up @@ -122,6 +124,113 @@
</b-form-group>
</b-col>
</b-row>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('numberFormat')"
label-class="text-primary"
>
<b-input
v-model="report.metricFormatter.numberFormat"
placeholder="0.00"
/>
</b-form-group>
</b-col>

<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('prefix')"
label-class="text-primary"
>
<b-input
v-model="report.metricFormatter.prefix"
placeholder="USD/mo"
/>
</b-form-group>
</b-col>
</b-row>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('suffix')"
label-class="text-primary"
>
<b-input
v-model="report.metricFormatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
</b-row>
</template>

<template #additional-config="{ report }">
<hr>
<div class="px-3">
<h5 class="mb-3">
{{ $t('edit.additionalConfig.tooltip.label') }}
</h5>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('numberFormat')"
label-class="text-primary"
>
<b-input
v-model="report.formatter.numberFormat"
placeholder="0.00"
/>
</b-form-group>
</b-col>

<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('prefix')"
label-class="text-primary"
>
<b-input
v-model="report.formatter.prefix"
placeholder="USD/mo"
/>
</b-form-group>
</b-col>
</b-row>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('suffix')"
label-class="text-primary"
>
<b-input
v-model="report.formatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
</b-row>
</div>
</template>
</report-edit>
</template>
Expand Down
Loading

0 comments on commit 65ee544

Please sign in to comment.