DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Address comments

Browse Source
This commit is contained in:
Katrin Yordanova 2024-04-22 12:40:05 +03:00
parent 28a86ccac8
commit 4ec49fc4e2
14 changed files with 309 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,25 +30,10 @@
<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')"
@ -75,6 +60,8 @@
</b-col>
</b-row>
<hr>
<b-row>
<b-col
cols="12"
@ -90,6 +77,7 @@
/>
</b-form-group>
</b-col>
<b-col
cols="12"
md="6"
@ -104,6 +92,24 @@
/>
</b-form-group>
</b-col>
<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"
:disabled="report.metricFormatter.presetFormat !== 'noFormat'"
placeholder="0.00"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
lg="6"
@ -112,90 +118,22 @@
: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"
:disabled="!!report.metricFormatter.numberFormat"
/>
<slot
v-if="report.metricFormatter.presetFormat === 'accountingNumber'"
name="description"
>
<small class="text-muted">{{ presetFormattedOptions.formattedOptionsDescription }}</small>
</slot>
</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>

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

@ -125,22 +125,9 @@
</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>
<hr>
<b-row>
<b-col
cols="12"
md="6"
@ -155,9 +142,7 @@
/>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col
cols="12"
md="6"
@ -173,6 +158,22 @@
</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"
:disabled="report.metricFormatter.presetFormat !== 'noFormat'"
placeholder="0.00"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
lg="6"
@ -181,74 +182,22 @@
: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"
:disabled="!!report.metricFormatter.numberFormat"
:options="presetFormattedOptions.formatOptions"
/>
<slot
v-if="report.metricFormatter.presetFormat === 'accountingNumber'"
name="description"
>
<small class="text-muted">{{ presetFormattedOptions.formattedOptionsDescription }}</small>
</slot>
</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>

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

@ -173,6 +173,55 @@
</b-form-group>
</b-col>
</b-row>
<hr>
<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('prefix')"
label-class="text-primary"
>
<b-input
v-model="report.yAxisFormatter.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.yAxisFormatter.suffix"
placeholder="$"
/>
</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.yAxisFormatter.numberFormat"
placeholder="0.00"
/>
</b-form-group>
</b-col>
</b-row>
</div>
</template>
@ -318,22 +367,11 @@
/>
</b-form-group>
</b-col>
</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>
<hr>
<b-row>
<b-col
cols="12"
md="6"
@ -364,6 +402,22 @@
</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"
:disabled="report.metricFormatter.presetFormat !== 'noFormat'"
placeholder="0.00"
/>
</b-form-group>
</b-col>
<b-col
cols="12"
lg="6"
@ -372,18 +426,24 @@
: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"
:disabled="!!report.metricFormatter.formatting"
:options="presetFormattedOptions.formatOptions"
/>
<slot
v-if="report.metricFormatter.presetFormat === 'accountingNumber'"
name="description"
>
<small class="text-muted">{{ presetFormattedOptions.formattedOptionsDescription }}</small>
</slot>
</b-form-group>
</b-col>
</b-row>
</template>
<template #additional-config="{ hasAxis, report, presetFormattedOptions }">
<template #additional-config="{ hasAxis, report }">
<hr>
<div class="px-3">
<h5 class="d-flex mb-3">
@ -406,78 +466,8 @@
>
<b-input
v-model="report.tooltip.formatting"
:disabled="report.tooltipFormatter.presetFormat !== 'noFormat'"
: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>

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

@ -3,7 +3,7 @@
:report.sync="editReport"
:modules="modules"
>
<template #metric-options="{ metric, report }">
<template #metric-options="{ metric, presetFormattedOptions }">
<b-row>
<b-col
cols="12"
@ -28,23 +28,10 @@
</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>
<hr>
<b-row>
<b-col
cols="12"
@ -75,6 +62,45 @@
/>
</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"
:disabled="report.metricFormatter.presetFormat !== 'noFormat'"
placeholder="0.00"
/>
</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;"
>
<b-form-select
v-model="report.metricFormatter.presetFormat"
:disabled="!!report.metricFormatter.numberFormat"
:options="presetFormattedOptions.formatOptions"
/>
<slot
v-if="report.metricFormatter.presetFormat === 'accountingNumber'"
name="description"
>
<small class="text-muted">{{ presetFormattedOptions.formattedOptionsDescription }}</small>
</slot>
</b-form-group>
</b-col>
</b-row>
</template>
@ -104,81 +130,6 @@
</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>

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

@ -169,6 +169,10 @@
name="dimension-options-options"
:dimension="d"
:is-temporal="isTemporalField(d.field)"
:preset-formatted-options="{
formatOptions,
formattedOptionsDescription: $t('edit.additionalConfig.tooltip.formatting.presetFormats.description.accountingNumber')
}"
/>
</b-form-group>
</b-col>
@ -462,10 +466,6 @@
:report="editReport"
:metrics="metrics"
:has-axis="hasAxis"
:preset-formatted-options="{
formatOptions,
formattedOptionsDescription: $t('edit.additionalConfig.tooltip.formatting.presetFormats.description.accountingNumber')
}"
/>
</div>
</template>

3
lib/js/src/compose/types/chart/base.ts
View File

@ -356,6 +356,9 @@ export class BaseChart {
metricFormatter: {
presetFormat: 'noFormat',
},
yAxisFormatter: {
presetFormat: 'noFormat',
},
legend: {
isScrollable: true,
orientation: 'horizontal',

69
lib/js/src/compose/types/chart/chart.ts
View File

@ -60,6 +60,7 @@ export default class Chart extends BaseChart {
const {
dimensions: [dimension] = [],
yAxis,
yAxisFormatter,
metrics: [metric] = [],
offset,
tooltip: t,
@ -114,6 +115,11 @@ export default class Chart extends BaseChart {
overflow: 'break',
hideOverlap: true,
rotate: yAxis.rotateLabel,
formatter: (value: string | number, index: string | number): string => {
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = yAxisFormatter || {}
return formatChartValue(value, { numberFormat, prefix, suffix, presetFormat })
},
},
axisLine: {
show: false,
@ -147,6 +153,19 @@ export default class Chart extends BaseChart {
options.series = datasets.map(({ type, label, data, stack, tooltip, fill, smooth, step, roseType, symbol }: any, index: number) => {
const { fixed, relative } = tooltip
const {
numberFormat: metricNumForm = '',
prefix: metricPref = '',
suffix: metricSuff = '',
presetFormat: metricPresForm = '',
} = metricFormatter || {}
const {
numberFormat: tooltipNumForm = '',
prefix: tooltipPref = '',
suffix: tooltipSuff = '',
presetFormat: tooltipPresForm = '',
} = tooltipFormatter || {}
// We should render the first metric in the dataset as the last
const z = (datasets.length - 1) - index
@ -193,18 +212,27 @@ export default class Chart extends BaseChart {
trigger: 'item',
appendToBody: true,
formatter: (params: TooltipParams): string => {
const v = formatChartValue(params.value || '', {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
return t?.formatting
? formatChartTooltip(t?.formatting, params)
: `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${params.value}${relative ? ' (' + params.percent + '%)' : ''}</span>`
: `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${v}${relative ? ' (' + params.percent + '%)' : ''}</span>`
},
},
label: {
...lbl,
formatter: (params: TooltipParams): string => {
const { value = '' || 0 } = params
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = metricFormatter || {}
return formatChartValue(value.toString(), { numberFormat, prefix, suffix, presetFormat })
return formatChartValue(params.value || '', {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
},
},
itemStyle: {
@ -276,15 +304,36 @@ export default class Chart extends BaseChart {
// display the same tooltip format name <br/> seriesName value if trigger: 'axis'
// works when trigger is set to axis
valueFormatter: (value: string | number): string => {
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = tooltipFormatter || {}
const v = formatChartValue(value, {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
return formatChartValue(value, { numberFormat, prefix, suffix, presetFormat })
return formatChartValue(v, {
numberFormat: tooltipNumForm,
prefix: tooltipPref,
suffix: tooltipSuff,
presetFormat: tooltipPresForm,
})
},
// works when trigger is set to item
formatter: (params: { seriesName?: string; name?: string;value: Array<any>, percent: string | number, marker: string;}): string => {
const { value = [] } = params
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = tooltipFormatter || {}
const formattedValue = formatChartValue(value[1], { numberFormat, prefix, suffix, presetFormat })
const { value = [], percent = '' || 0 } = params
const v = formatChartValue(value[1], {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
const formattedValue = formatChartValue(v, {
numberFormat: tooltipNumForm,
prefix: tooltipPref,
suffix: tooltipSuff,
presetFormat: tooltipPresForm,
})
return t?.formatting
? formatChartTooltip(t?.formatting, { ...params, value: value[1], percent: params.percent })

22
lib/js/src/compose/types/chart/funnel.ts
View File

@ -91,9 +91,16 @@ export default class FunnelChart extends BaseChart {
const { saveAsImage } = toolbox || {}
const { labels, datasets = [], tooltip, themeVariables = {} } = data
const { legend: l, tooltipFormatter, metricFormatter } = reports[0] || {}
const { legend: l, metricFormatter } = reports[0] || {}
const colors = getColorschemeColors(colorScheme, data.customColorSchemes)
const {
numberFormat: metricNumForm = '',
prefix: metricPref = '',
suffix: metricSuff = '',
presetFormat: metricPresForm = '',
} = metricFormatter || {}
return {
animation: !noAnimation,
textStyle: {
@ -113,10 +120,15 @@ export default class FunnelChart extends BaseChart {
tooltip: {
trigger: 'item',
formatter: (params: TooltipParams): string => {
const { name = '', value = '' || 0, percent = '' || 0 } = params
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = tooltipFormatter || {}
const { seriesName = '', value = '' || 0, percent = '' || 0, marker = '', name = '' } = params
const formattedValue = formatChartValue(value, {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
return `${name}<br />${formatChartValue(value, { numberFormat, prefix, suffix, presetFormat })} ${tooltip.relative ? ` (${percent}%)` : ''}`
return `${seriesName}<br>${marker}${name}<span style="float: right; margin-left: 20px">${formattedValue}${tooltip.relative ? ' (' + percent + '%)' : ''}</span>`
},
appendToBody: true,
},
@ -156,7 +168,7 @@ export default class FunnelChart extends BaseChart {
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = metricFormatter || {}
const formattedValue = formatChartValue(value, { numberFormat, prefix, suffix, presetFormat })
return `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${formattedValue}${tooltip.relative ? ' (' + percent + '%)' : ''}</span>`
return `${params.seriesName}${formattedValue}${tooltip.relative ? ' (' + percent + '%)' : ''}`
},
},
emphasis: {

39
lib/js/src/compose/types/chart/radar.ts
View File

@ -31,11 +31,24 @@ export default class RadarChart extends BaseChart {
const { labels, datasets = [], dimension = {}, themeVariables = {} } = data
const {
legend: l,
metrics,
tooltipFormatter,
metricFormatter,
tooltipFormatter,
} = reports[0] || {}
const {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
} = metricFormatter || {}
const {
numberFormat: tooltipNumForm = '',
prefix: tooltipPref = '',
suffix: tooltipSuff = '',
presetFormat: tooltipPresForm = '',
} = tooltipFormatter || {}
let min: number = 0
let max: number = Math.max()
const seriesData: any[] = []
@ -86,9 +99,19 @@ export default class RadarChart extends BaseChart {
position: 'top',
appendToBody: true,
valueFormatter: (value: string | number): string => {
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = tooltipFormatter || {}
const v = formatChartValue(value, {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
return formatChartValue(value, { numberFormat, prefix, suffix, presetFormat })
return formatChartValue(v, {
numberFormat: tooltipNumForm,
prefix: tooltipPref,
suffix: tooltipSuff,
presetFormat: tooltipPresForm,
})
},
},
radar: {
@ -104,9 +127,13 @@ export default class RadarChart extends BaseChart {
show: dimension.fixTooltips,
formatter: (params: { seriesName: string, name: string, value: string | number }): string => {
const { value = '' || 0 } = params
const { numberFormat = '', prefix = '', suffix = '', presetFormat = '' } = metricFormatter || {}
return formatChartValue(value, { numberFormat, prefix, suffix, presetFormat })
return formatChartValue(value, {
numberFormat: metricNumForm,
prefix: metricPref,
suffix: metricSuff,
presetFormat: metricPresForm,
})
},
},
data: seriesData,

18
lib/js/src/compose/types/chart/util.ts
View File

@ -1,5 +1,6 @@
import numeral from 'numeral'
import * as fmt from '../../../formatting'
import { formatValueAsAccountingNumber } from '../../utils'
export const rgbaRegex = /^rgba\((\d+),.*?(\d+),.*?(\d+),.*?(\d*\.?\d*)\)$/
@ -123,6 +124,7 @@ export interface Report {
offset?: ChartOffset;
tooltipFormatter?: FormatData;
metricFormatter?: FormatData;
yAxisFormatter?: FormatData;
}
export interface ChartToolbox {
@ -258,7 +260,7 @@ dimensionFunctions.convert = d => dimensionFunctions.lookup(d).convert(d.field)
export const isRadialChart = ({ type }: KV) => type === 'doughnut' || type === 'pie'
export const hasRelativeDisplay = ({ type }: KV) => isRadialChart({ type })
// Makes a standarised alias from modifier or dimension report option
// Makes a standardize alias from modifier or dimension report option
export const makeAlias = ({ alias, aggregate, modifier, field }: Metric) => alias || `${aggregate || modifier || 'none'}_${field}`.toLocaleLowerCase()
export function formatChartValue (value: string | number, formatConfig?: FormatData): string {
@ -288,7 +290,7 @@ export function formatChartValue (value: string | number, formatConfig?: FormatD
}
if (formatConfig?.presetFormat === 'accountingNumber') {
result = formatChartValueAsAccountingNumber(Number(n))
result = formatValueAsAccountingNumber(Number(n))
}
return ` ${formatConfig?.prefix ?? ''} ${result || value} ${formatConfig?.suffix ?? ''}`
@ -304,18 +306,6 @@ export function formatChartTooltip (tooltip: string, params: TooltipParams): str
.replace('{d}', percent.toString())
}
export function formatChartValueAsAccountingNumber (value: number): string {
let result = ''
if (value < 0) {
result = `(${Math.abs(value)})`
} else if (value === 0) {
result = '-'
}
return result
}
const chartUtil = {
dimensionFunctions,
hasRelativeDisplay,

15
lib/js/src/compose/types/module-field/number.ts
View File

@ -2,6 +2,7 @@ import numeral from 'numeral'
import { ModuleField, Registry, Options, defaultOptions } from './base'
import { Apply } from '../../../cast'
import * as fmt from '../../../formatting'
import { formatValueAsAccountingNumber } from '../../utils'
const kind = 'Number'
@ -96,23 +97,11 @@ export class ModuleFieldNumber extends ModuleField {
}
if (o.presetFormat === 'accountingNumber') {
out = formatChartValueAsAccountingNumber(Number(n))
out = formatValueAsAccountingNumber(Number(n))
}
return '' + o.prefix + (out || n) + o.suffix
}
}
export function formatChartValueAsAccountingNumber (value: number): string {
let result = ''
if (value < 0) {
result = `(${Math.abs(value)})`
} else if (value === 0) {
result = '-'
}
return result
}
Registry.set(kind, ModuleFieldNumber)

11
lib/js/src/compose/utils.ts Normal file
View File

@ -0,0 +1,11 @@
export function formatValueAsAccountingNumber (value: number): string {
let result = ''
if (value < 0) {
result = `(${Math.abs(value)})`
} else if (value === 0) {
result = '-'
}
return result
}

2
locale/en/corteza-webapp-compose/chart.yaml
View File

@ -208,7 +208,7 @@ edit:
placeholder: '{a}<br />{b} : {c} ({d}%)'
disclaimer: Adding a value to the formatting field will disable the fields number format, prefix, and suffix and vice versa
presetFormats:
label: 'Format values using:'
label: Format values using
options:
accountingNumber: Accounting number
noFormat: No format selected

3
server/compose/types/chart.go
View File

@ -46,8 +46,9 @@ type (
YAxis map[string]interface{} `json:"yAxis,omitempty"`
Legend map[string]interface{} `json:"legend,omitempty"`
Tooltip map[string]interface{} `json:"tooltip,omitempty"`
TooltipFormatter map[string]interface{} `json:"formatter,omitempty"`
TooltipFormatter map[string]interface{} `json:"tooltipFormatter,omitempty"`
MetricFormatter map[string]interface{} `json:"metricFormatter,omitempty"`
YAxisFormatter map[string]interface{} `json:"yAxisFormatter,omitempty"`
Offset map[string]interface{} `json:"offset,omitempty"`
Renderer struct {
Version string `json:"version,omitempty" `