DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add support for number formatting in charts

Browse Source
This commit is contained in:
Katrin Yordanova
2024-02-07 17:16:34 +02:00
parent fd7b018456
commit 115f7462a9
13 changed files with 769 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
client/web/compose/src/components/Chart/Report/FunnelChart.vue
View File

@@ -28,12 +28,27 @@
</b-form-group>
</template>
<template #metric-options="{ metric }">
<template #metric-options="{ metric, presetFormattedOptions }">
<b-row>
<b-col
cols="12"
md="6"
lg="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"
offset-lg="6"
>
<b-form-group
:label="$t('edit.metric.options.label')"
@@ -59,6 +74,127 @@
</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-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
label-class="text-primary"
style="white-space: pre-line;"
:description="presetFormattedOptions.formattedOptionsDescription"
>
<b-form-select
v-model="report.metricFormatter.presetFormat"
:options="presetFormattedOptions.formatOptions"
/>
</b-form-group>
</b-col>
</b-row>
</template>
<template #additional-config="{ report, presetFormattedOptions }">
<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.tooltipFormatter.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.tooltipFormatter.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.tooltipFormatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
label-class="text-primary"
style="white-space: pre-line;"
:description="presetFormattedOptions.formattedOptionsDescription"
>
<b-form-select
v-model="report.tooltipFormatter.presetFormat"
:options="presetFormattedOptions.formatOptions"
/>
</b-form-group>
</b-col>
</b-row>
</div>
</template>
</report-edit>
</template>

128
client/web/compose/src/components/Chart/Report/GaugeChart.vue
View File

@@ -56,7 +56,7 @@
</b-form-group>
</template>
<template #metric-options="{ metric }">
<template #metric-options="{ metric, presetFormattedOptions }">
<b-row>
<b-col
cols="12"
@@ -89,7 +89,9 @@
</b-form-checkbox>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col
cols="12"
lg="6"
@@ -122,6 +124,130 @@
</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-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
label-class="text-primary"
style="white-space: pre-line;"
:description="presetFormattedOptions.formattedOptionsDescription"
>
<b-form-select
v-model="report.metricFormatter.presetFormat"
:options="presetFormattedOptions.formatOptions"
/>
</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.tooltipFormatter.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.tooltipFormatter.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.tooltipFormatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
</b-row>
</div>
</template>
</report-edit>
</template>

153
client/web/compose/src/components/Chart/Report/GenericChart.vue
View File

@@ -80,7 +80,9 @@
/>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col
cols="12"
lg="6"
@@ -112,7 +114,11 @@
/>
</b-form-group>
</b-col>
</b-row>
<b-row
class="mb-2"
>
<b-col
cols="12"
lg="6"
@@ -136,6 +142,7 @@
<b-form-group
:label="$t('edit.yAxis.options.label')"
label-class="text-primary"
class="mb-0"
>
<b-form-checkbox
v-model="report.yAxis.axisType"
@@ -169,7 +176,7 @@
</div>
</template>
<template #metric-options="{ metric }">
<template #metric-options="{ metric, presetFormattedOptions }">
<b-row>
<b-col
cols="12"
@@ -311,14 +318,80 @@
/>
</b-form-group>
</b-col>
<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-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-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
label-class="text-primary"
style="white-space: pre-line;"
:description="presetFormattedOptions.formattedOptionsDescription"
>
<b-form-select
v-model="report.metricFormatter.presetFormat"
:options="presetFormattedOptions.formatOptions"
/>
</b-form-group>
</b-col>
</b-row>
</template>
<template #additional-config="{ hasAxis, report }">
<template #additional-config="{ hasAxis, report, presetFormattedOptions }">
<hr>
<div class="px-3">
<h5 class="mb-3">
<h5 class="d-flex mb-3">
{{ $t('edit.additionalConfig.tooltip.label') }}
<c-hint
:tooltip="$t('edit.additionalConfig.tooltip.formatting.disclaimer')"
icon-class="text-warning"
/>
</h5>
<b-row>
@@ -327,16 +400,88 @@
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.label')"
:label="$t('edit.additionalConfig.tooltip.formatting.customFormatting')"
:description="$t('edit.additionalConfig.tooltip.formatting.description')"
label-class="text-primary"
>
<b-input
v-model="report.tooltip.formatting"
:placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
:disabled="!!(
report.tooltipFormatter.numberFormat
|| report.tooltipFormatter.prefix
|| report.tooltipFormatter.suffix
|| (report.tooltipFormatter.presetFormat != 'noFormat'))"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('numberFormat')"
label-class="text-primary"
>
<b-input
v-model="report.tooltipFormatter.numberFormat"
placeholder="0.00"
:disabled="!!report.tooltip.formatting"
/>
</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.tooltipFormatter.prefix"
placeholder="USD/mo"
:disabled="!!report.tooltip.formatting"
/>
</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.tooltipFormatter.suffix"
placeholder="$"
:disabled="!!report.tooltip.formatting"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
label-class="text-primary"
style="white-space: pre-line;"
:description="presetFormattedOptions.formattedOptionsDescription"
>
<b-form-select
v-model="report.tooltipFormatter.presetFormat"
:options="presetFormattedOptions.formatOptions"
:disabled="!!report.tooltip.formatting"
/>
</b-form-group>
</b-col>
<b-col
v-if="!hasAxis"
cols="12"

124
client/web/compose/src/components/Chart/Report/RadarChart.vue
View File

@@ -3,7 +3,7 @@
:report.sync="editReport"
:modules="modules"
>
<template #metric-options="{ metric }">
<template #metric-options="{ metric, report }">
<b-row>
<b-col
cols="12"
@@ -28,6 +28,53 @@
</b-input-group>
</b-form-group>
</b-col>
<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-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>
@@ -57,6 +104,81 @@
</b-col>
</b-row>
</template>
<template #additional-config="{ report, presetFormattedOptions }">
<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.tooltipFormatter.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.tooltipFormatter.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.tooltipFormatter.suffix"
placeholder="$"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
label-class="text-primary"
style="white-space: pre-line;"
:description="presetFormattedOptions.formattedOptionsDescription"
>
<b-form-select
v-model="report.tooltipFormatter.presetFormat"
:options="presetFormattedOptions.formatOptions"
/>
</b-form-group>
</b-col>
</b-row>
</div>
</template>
</report-edit>
</template>

15
client/web/compose/src/components/Chart/Report/ReportEdit.vue
View File

@@ -285,6 +285,11 @@
<slot
name="metric-options"
:metric="m"
:report="editReport"
:preset-formatted-options="{
formatOptions,
formattedOptionsDescription: $t('edit.additionalConfig.tooltip.formatting.presetFormats.description.accountingNumber')
}"
/>
</div>
</draggable>
@@ -457,6 +462,10 @@
:report="editReport"
:metrics="metrics"
:has-axis="hasAxis"
:preset-formatted-options="{
formatOptions,
formattedOptionsDescription: $t('edit.additionalConfig.tooltip.formatting.presetFormats.description.accountingNumber')
}"
/>
</div>
</template>
@@ -518,6 +527,11 @@ export default {
{ value: 'horizontal', text: this.$t('edit.additionalConfig.legend.orientation.horizontal') },
{ value: 'vertical', text: this.$t('edit.additionalConfig.legend.orientation.vertical') },
],
formatOptions: [
{ value: 'noFormat', text: this.$t('edit.additionalConfig.tooltip.formatting.presetFormats.options.noFormat') },
{ value: 'accountingNumber', text: this.$t('edit.additionalConfig.tooltip.formatting.presetFormats.options.accountingNumber') },
],
}
},
@@ -667,6 +681,7 @@ export default {
this.predefinedFilters = []
this.alignments = []
this.orientations = []
this.formatOptions = []
},
},
}