You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2024/02/29 19:09:09 UTC
(superset) 04/06: fix(plugin-chart-echarts): calculate Gauge Chart intervals correctly when min value is set (#27285)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch 3.1
in repository https://gitbox.apache.org/repos/asf/superset.git
commit c39e16e624d3156a07a57ba3611c7b6bf0df2e9a
Author: goto-loop <10...@users.noreply.github.com>
AuthorDate: Thu Feb 29 17:41:23 2024 +0100
fix(plugin-chart-echarts): calculate Gauge Chart intervals correctly when min value is set (#27285)
(cherry picked from commit d65f64d1ceacb69226fa1907343405b5571bc6a8)
---
.../src/Gauge/transformProps.ts | 13 +++---
.../test/Gauge/transformProps.test.ts | 54 ++++++++++++++++++++--
2 files changed, 58 insertions(+), 9 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
index f32993b1df..231b0d65da 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -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;
@@ -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],
@@ -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;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
index 915a8b9e9d..760e3ff93c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
@@ -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', () => {
@@ -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 = [
{
@@ -342,3 +350,43 @@ describe('Echarts Gauge transformProps', () => {
);
});
});
+
+describe('getIntervalBoundsAndColors', () => {
+ it('should generate correct interval bounds and colors', () => {
+ 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'],
+ ]);
+ });
+});