Skip to content

fix(plugin-chart-echarts): calculate Gauge Chart intervals correctly when min value is set #27285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
villebro merged 4 commits into from
Feb 29, 2024
Merged

fix(plugin-chart-echarts): calculate Gauge Chart intervals correctly when min value is set #27285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
840b3d8
Take min value into account when normalizing interval bounds
goto-loop Feb 27, 2024
8594040
Update test for intervals
goto-loop Feb 27, 2024
9329cc9
Change function name to better reflect its purpose
goto-loop Feb 29, 2024
0228aa5
Add unit tests for getIntervalBoundsAndColors
goto-loop Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,12 @@ import { getDefaultTooltip } from '../utils/tooltip';
import { Refs } from '../types';
import { getColtypesMapping } from '../utils/series';

const setIntervalBoundsAndColors = (
export const getIntervalBoundsAndColors = (
intervals: string,
intervalColorIndices: string,
colorFn: CategoricalColorScale,
normalizer: number,
min: number,
max: number,
): Array<[number, string]> => {
let intervalBoundsNonNormalized;
let intervalColorIndicesArray;
Expand All @@ -65,7 +66,7 @@ const setIntervalBoundsAndColors = (
}

const intervalBounds = intervalBoundsNonNormalized.map(
bound => bound / normalizer,
bound => (bound - min) / (max - min),
);
const intervalColors = intervalColorIndicesArray.map(
ind => colorFn.colors[(ind - 1) % colorFn.colors.length],
Expand Down Expand Up @@ -221,12 +222,12 @@ export default function transformProps(
const axisLabelLength = Math.max(
...axisLabels.map(label => numberFormatter(label).length).concat([1]),
);
const normalizer = max;
const intervalBoundsAndColors = setIntervalBoundsAndColors(
const intervalBoundsAndColors = getIntervalBoundsAndColors(
intervals,
intervalColorIndices,
colorFn,
normalizer,
min,
max,
);
const splitLineDistance =
axisLineWidth + splitLineLength + OFFSETS.ticksFromLine;
Expand Down
54 changes: 51 additions & 3 deletions superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
import { ChartProps, SqlaFormData, supersetTheme } from '@superset-ui/core';
import transformProps from '../../src/Gauge/transformProps';
import {
CategoricalColorNamespace,
ChartProps,
SqlaFormData,
supersetTheme,
} from '@superset-ui/core';
import transformProps, {
getIntervalBoundsAndColors,
} from '../../src/Gauge/transformProps';
import { EchartsGaugeChartProps } from '../../src/Gauge/types';

describe('Echarts Gauge transformProps', () => {
Expand Down Expand Up @@ -256,8 +263,9 @@ describe('Echarts Gauge transformProps', () => {
const formData: SqlaFormData = {
...baseFormData,
groupby: ['year', 'platform'],
intervals: '50,100',
intervals: '60,100',
intervalColorIndices: '1,2',
minVal: 20,
};
const queriesData = [
{
Expand Down Expand Up @@ -342,3 +350,43 @@ describe('Echarts Gauge transformProps', () => {
);
});
});

describe('getIntervalBoundsAndColors', () => {
it('should generate correct interval bounds and colors', () => {
Comment on lines +354 to +355
Copy link
Member

@villebro villebro Feb 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit/FYI: we're moving away from describe with nested its towards simple test blocks. But we can convert these in a follow-up refactor pass.

Copy link
Contributor Author

@goto-loop goto-loop Mar 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, I wasn't aware of that. Will keep it in mind for the next PR 🙂

const colorFn = CategoricalColorNamespace.getScale(
'supersetColors' as string,
);
expect(getIntervalBoundsAndColors('', '', colorFn, 0, 10)).toEqual([]);
expect(getIntervalBoundsAndColors('4, 10', '1, 2', colorFn, 0, 10)).toEqual(
[
[0.4, '#1f77b4'],
[1, '#ff7f0e'],
],
);
expect(
getIntervalBoundsAndColors('4, 8, 10', '9, 8, 7', colorFn, 0, 10),
).toEqual([
[0.4, '#bcbd22'],
[0.8, '#7f7f7f'],
[1, '#e377c2'],
]);
expect(getIntervalBoundsAndColors('4, 10', '1, 2', colorFn, 2, 10)).toEqual(
[
[0.25, '#1f77b4'],
[1, '#ff7f0e'],
],
);
expect(
getIntervalBoundsAndColors('-4, 0', '1, 2', colorFn, -10, 0),
).toEqual([
[0.6, '#1f77b4'],
[1, '#ff7f0e'],
]);
expect(
getIntervalBoundsAndColors('-4, -2', '1, 2', colorFn, -10, -2),
).toEqual([
[0.75, '#1f77b4'],
[1, '#ff7f0e'],
]);
});
});