fix: Decimal values for Histogram bins (#32253)

This commit is contained in:
Michael S. Molina
2025-02-14 09:04:23 -03:00
committed by GitHub
parent fa09d8187a
commit ffe9244458
6 changed files with 112 additions and 37 deletions

View File

@@ -27,7 +27,9 @@ import {
formatSelectOptionsForRange,
dndGroupByControl,
columnsByType,
sections,
D3_FORMAT_OPTIONS,
D3_FORMAT_DOCS,
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
} from '@superset-ui/chart-controls';
import { showLegendControl, showValueControl } from '../controls';
@@ -105,7 +107,6 @@ const config: ControlPanelConfig = {
],
],
},
sections.titleControls,
{
label: t('Chart Options'),
expanded: true,
@@ -113,6 +114,58 @@ const config: ControlPanelConfig = {
['color_scheme'],
[showValueControl],
[showLegendControl],
[
{
name: 'x_axis_title',
config: {
type: 'TextControl',
label: t('X Axis Title'),
renderTrigger: true,
default: '',
description: t('Changing this control takes effect instantly'),
},
},
],
[
{
name: 'x_axis_format',
config: {
type: 'SelectControl',
freeForm: true,
label: t('X Axis Format'),
renderTrigger: true,
default: 'SMART_NUMBER',
choices: D3_FORMAT_OPTIONS,
description: `${D3_FORMAT_DOCS} ${D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT}`,
},
},
],
[
{
name: 'y_axis_title',
config: {
type: 'TextControl',
label: t('Y Axis Title'),
renderTrigger: true,
default: '',
description: t('Changing this control takes effect instantly'),
},
},
],
[
{
name: 'y_axis_format',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Y Axis Format'),
renderTrigger: true,
default: 'SMART_NUMBER',
choices: D3_FORMAT_OPTIONS,
description: `${D3_FORMAT_DOCS} ${D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT}`,
},
},
],
],
},
],

View File

@@ -25,7 +25,7 @@ import {
CategoricalColorNamespace,
NumberFormats,
getColumnLabel,
getNumberFormatter,
getValueFormatter,
tooltipHtml,
} from '@superset-ui/core';
import { HistogramChartProps, HistogramTransformedProps } from './types';
@@ -41,6 +41,7 @@ export default function transformProps(
const refs: Refs = {};
let focusedSeries: number | undefined;
const {
datasource: { currencyFormats = {}, columnFormats = {} },
formData,
height,
hooks,
@@ -58,19 +59,33 @@ export default function transformProps(
showLegend,
showValue,
sliceId,
xAxisFormat,
xAxisTitle,
yAxisTitle,
yAxisFormat,
} = formData;
const { data } = queriesData[0];
const colorFn = CategoricalColorNamespace.getScale(colorScheme);
const formatter = getNumberFormatter(
normalize ? NumberFormats.FLOAT_2_POINT : NumberFormats.INTEGER,
);
const formatter = (format: string) =>
getValueFormatter(
column,
currencyFormats,
columnFormats,
format,
undefined,
);
const xAxisFormatter = formatter(xAxisFormat);
const yAxisFormatter = formatter(yAxisFormat);
const percentFormatter = getPercentFormatter(NumberFormats.PERCENT_2_POINT);
const groupbySet = new Set(groupby);
const xAxisData: string[] = Object.keys(data[0]).filter(
key => !groupbySet.has(key),
);
const xAxisData: string[] = Object.keys(data[0])
.filter(key => !groupbySet.has(key))
.map(key => {
const array = key.split(' - ').map(value => parseFloat(value));
return `${xAxisFormatter(array[0])} '-' ${xAxisFormatter(array[1])}`;
});
const barSeries: BarSeriesOption[] = data.map(datum => {
const seriesName =
groupby.length > 0
@@ -91,7 +106,7 @@ export default function transformProps(
position: 'top',
formatter: params => {
const { value } = params;
return formatter.format(value as number);
return yAxisFormatter.format(value as number);
},
},
};
@@ -108,7 +123,7 @@ export default function transformProps(
const title = params[0].name;
const rows = params.map(param => {
const { marker, seriesName, value } = param;
return [`${marker}${seriesName}`, formatter.format(value as number)];
return [`${marker}${seriesName}`, yAxisFormatter.format(value as number)];
});
if (groupby.length > 0) {
const total = params.reduce(
@@ -122,7 +137,7 @@ export default function transformProps(
),
);
}
const totalRow = ['Total', formatter.format(total)];
const totalRow = ['Total', yAxisFormatter.format(total)];
if (!normalize) {
totalRow.push(percentFormatter.format(1));
}
@@ -159,7 +174,7 @@ export default function transformProps(
type: 'value',
nameLocation: 'middle',
axisLabel: {
formatter: (value: number) => formatter.format(value),
formatter: (value: number) => yAxisFormatter.format(value),
},
},
series: barSeries,

View File

@@ -28,7 +28,9 @@ export type HistogramFormData = QueryFormData & {
sliceId: number;
showLegend: boolean;
showValue: boolean;
xAxisFormat: string;
xAxisTitle: string;
yAxisFormat: string;
yAxisTitle: string;
};