2021-02-19 14:06:36 -05:00
|
|
|
/**
|
|
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
|
|
* or more contributor license agreements. See the NOTICE file
|
|
|
|
* distributed with this work for additional information
|
|
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
|
|
* to you under the Apache License, Version 2.0 (the
|
|
|
|
* "License"); you may not use this file except in compliance
|
|
|
|
* with the License. You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing,
|
|
|
|
* software distributed under the License is distributed on an
|
|
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
|
|
* KIND, either express or implied. See the License for the
|
|
|
|
* specific language governing permissions and limitations
|
|
|
|
* under the License.
|
|
|
|
*/
|
2022-05-04 08:55:22 -04:00
|
|
|
import { ChartProps, supersetTheme } from '@superset-ui/core';
|
2021-02-19 14:06:36 -05:00
|
|
|
import transformProps from '../../src/Graph/transformProps';
|
|
|
|
import { DEFAULT_GRAPH_SERIES_OPTION } from '../../src/Graph/constants';
|
|
|
|
|
2022-04-26 13:35:01 -04:00
|
|
|
describe('EchartsGraph transformProps', () => {
|
|
|
|
it('should transform chart props for viz without category', () => {
|
2021-02-19 14:06:36 -05:00
|
|
|
const formData = {
|
|
|
|
colorScheme: 'bnbColors',
|
|
|
|
datasource: '3__table',
|
|
|
|
granularity_sqla: 'ds',
|
|
|
|
metric: 'count',
|
|
|
|
source: 'source_column',
|
|
|
|
target: 'target_column',
|
|
|
|
category: null,
|
|
|
|
};
|
|
|
|
const queriesData = [
|
|
|
|
{
|
|
|
|
colnames: ['source_column', 'target_column', 'count'],
|
|
|
|
data: [
|
|
|
|
{
|
|
|
|
source_column: 'source_value_1',
|
|
|
|
target_column: 'target_value_1',
|
|
|
|
count: 6,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
source_column: 'source_value_2',
|
|
|
|
target_column: 'target_value_2',
|
|
|
|
count: 5,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const chartPropsConfig = {
|
|
|
|
formData,
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
queriesData,
|
2022-05-04 08:55:22 -04:00
|
|
|
theme: supersetTheme,
|
2021-02-19 14:06:36 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const chartProps = new ChartProps(chartPropsConfig);
|
|
|
|
expect(transformProps(chartProps)).toEqual(
|
|
|
|
expect.objectContaining({
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
echartOptions: expect.objectContaining({
|
|
|
|
legend: expect.objectContaining({
|
|
|
|
data: [],
|
|
|
|
}),
|
|
|
|
series: expect.arrayContaining([
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
|
|
|
{
|
2021-04-30 20:15:18 -04:00
|
|
|
category: undefined,
|
2021-02-19 14:06:36 -05:00
|
|
|
id: '0',
|
2021-04-30 20:15:18 -04:00
|
|
|
label: { show: true },
|
2021-02-19 14:06:36 -05:00
|
|
|
name: 'source_value_1',
|
2021-04-30 20:15:18 -04:00
|
|
|
select: {
|
|
|
|
itemStyle: { borderWidth: 3, opacity: 1 },
|
|
|
|
label: { fontWeight: 'bolder' },
|
|
|
|
},
|
|
|
|
symbolSize: 50,
|
|
|
|
tooltip: { formatter: '{b}: {c}' },
|
2021-02-19 14:06:36 -05:00
|
|
|
value: 6,
|
|
|
|
},
|
|
|
|
{
|
2021-04-30 20:15:18 -04:00
|
|
|
category: undefined,
|
2021-02-19 14:06:36 -05:00
|
|
|
id: '1',
|
2021-04-30 20:15:18 -04:00
|
|
|
label: { show: true },
|
2021-02-19 14:06:36 -05:00
|
|
|
name: 'target_value_1',
|
2021-04-30 20:15:18 -04:00
|
|
|
select: {
|
|
|
|
itemStyle: { borderWidth: 3, opacity: 1 },
|
|
|
|
label: { fontWeight: 'bolder' },
|
|
|
|
},
|
|
|
|
symbolSize: 50,
|
|
|
|
tooltip: { formatter: '{b}: {c}' },
|
2021-02-19 14:06:36 -05:00
|
|
|
value: 6,
|
|
|
|
},
|
|
|
|
{
|
2021-04-30 20:15:18 -04:00
|
|
|
category: undefined,
|
2021-02-19 14:06:36 -05:00
|
|
|
id: '2',
|
2021-04-30 20:15:18 -04:00
|
|
|
label: { show: true },
|
2021-02-19 14:06:36 -05:00
|
|
|
name: 'source_value_2',
|
2021-04-30 20:15:18 -04:00
|
|
|
select: {
|
|
|
|
itemStyle: { borderWidth: 3, opacity: 1 },
|
|
|
|
label: { fontWeight: 'bolder' },
|
|
|
|
},
|
2021-02-19 14:06:36 -05:00
|
|
|
symbolSize: 10,
|
2021-04-30 20:15:18 -04:00
|
|
|
tooltip: { formatter: '{b}: {c}' },
|
|
|
|
value: 5,
|
2021-02-19 14:06:36 -05:00
|
|
|
},
|
|
|
|
{
|
2021-04-30 20:15:18 -04:00
|
|
|
category: undefined,
|
2021-02-19 14:06:36 -05:00
|
|
|
id: '3',
|
2021-04-30 20:15:18 -04:00
|
|
|
label: { show: true },
|
2021-02-19 14:06:36 -05:00
|
|
|
name: 'target_value_2',
|
2021-04-30 20:15:18 -04:00
|
|
|
select: {
|
|
|
|
itemStyle: { borderWidth: 3, opacity: 1 },
|
|
|
|
label: { fontWeight: 'bolder' },
|
|
|
|
},
|
2021-02-19 14:06:36 -05:00
|
|
|
symbolSize: 10,
|
2021-04-30 20:15:18 -04:00
|
|
|
tooltip: { formatter: '{b}: {c}' },
|
|
|
|
value: 5,
|
2021-02-19 14:06:36 -05:00
|
|
|
},
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
links: [
|
2021-04-30 20:15:18 -04:00
|
|
|
{
|
|
|
|
emphasis: { lineStyle: { width: 12 } },
|
|
|
|
lineStyle: { width: 6 },
|
2021-11-09 07:42:28 -05:00
|
|
|
select: {
|
|
|
|
lineStyle: { opacity: 1, width: 9.600000000000001 },
|
|
|
|
},
|
2021-04-30 20:15:18 -04:00
|
|
|
source: '0',
|
|
|
|
target: '1',
|
|
|
|
value: 6,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
emphasis: { lineStyle: { width: 5 } },
|
|
|
|
lineStyle: { width: 1.5 },
|
|
|
|
select: { lineStyle: { opacity: 1, width: 5 } },
|
|
|
|
source: '2',
|
|
|
|
target: '3',
|
|
|
|
value: 5,
|
|
|
|
},
|
2021-02-19 14:06:36 -05:00
|
|
|
],
|
|
|
|
}),
|
|
|
|
]),
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2022-04-26 13:35:01 -04:00
|
|
|
it('should transform chart props for viz with category and falsey normalization', () => {
|
2021-02-19 14:06:36 -05:00
|
|
|
const formData = {
|
|
|
|
colorScheme: 'bnbColors',
|
|
|
|
datasource: '3__table',
|
|
|
|
granularity_sqla: 'ds',
|
|
|
|
metric: 'count',
|
|
|
|
source: 'source_column',
|
|
|
|
target: 'target_column',
|
|
|
|
sourceCategory: 'source_category_column',
|
|
|
|
targetCategory: 'target_category_column',
|
|
|
|
};
|
|
|
|
const queriesData = [
|
|
|
|
{
|
|
|
|
colnames: [
|
|
|
|
'source_column',
|
|
|
|
'target_column',
|
|
|
|
'source_category_column',
|
|
|
|
'target_category_column',
|
|
|
|
'count',
|
|
|
|
],
|
|
|
|
data: [
|
|
|
|
{
|
|
|
|
source_column: 'source_value',
|
|
|
|
target_column: 'target_value',
|
|
|
|
source_category_column: 'category_value_1',
|
|
|
|
target_category_column: 'category_value_2',
|
|
|
|
count: 6,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
source_column: 'source_value',
|
|
|
|
target_column: 'target_value',
|
|
|
|
source_category_column: 'category_value_1',
|
|
|
|
target_category_column: 'category_value_2',
|
|
|
|
count: 5,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const chartPropsConfig = {
|
|
|
|
formData,
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
queriesData,
|
2022-05-04 08:55:22 -04:00
|
|
|
theme: supersetTheme,
|
2021-02-19 14:06:36 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const chartProps = new ChartProps(chartPropsConfig);
|
|
|
|
expect(transformProps(chartProps)).toEqual(
|
|
|
|
expect.objectContaining({
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
echartOptions: expect.objectContaining({
|
|
|
|
legend: expect.objectContaining({
|
|
|
|
data: ['category_value_1', 'category_value_2'],
|
|
|
|
}),
|
|
|
|
series: expect.arrayContaining([
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
|
|
|
{
|
|
|
|
id: '0',
|
|
|
|
name: 'source_value',
|
|
|
|
value: 11,
|
|
|
|
symbolSize: 10,
|
|
|
|
category: 'category_value_1',
|
|
|
|
select: DEFAULT_GRAPH_SERIES_OPTION.select,
|
|
|
|
tooltip: DEFAULT_GRAPH_SERIES_OPTION.tooltip,
|
|
|
|
label: { show: true },
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: '1',
|
|
|
|
name: 'target_value',
|
|
|
|
value: 11,
|
|
|
|
symbolSize: 10,
|
|
|
|
category: 'category_value_2',
|
|
|
|
select: DEFAULT_GRAPH_SERIES_OPTION.select,
|
|
|
|
tooltip: DEFAULT_GRAPH_SERIES_OPTION.tooltip,
|
|
|
|
label: { show: true },
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
]),
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|