mirror of
https://github.com/apache/superset.git
synced 2026-04-22 17:45:21 +00:00
fix: Decimal values for Histogram bins (#32253)
This commit is contained in:
committed by
GitHub
parent
fa09d8187a
commit
ffe9244458
@@ -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}`,
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -28,7 +28,9 @@ export type HistogramFormData = QueryFormData & {
|
||||
sliceId: number;
|
||||
showLegend: boolean;
|
||||
showValue: boolean;
|
||||
xAxisFormat: string;
|
||||
xAxisTitle: string;
|
||||
yAxisFormat: string;
|
||||
yAxisTitle: string;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user