From 3d0610e0ab37a9b1b642b4d165608df35b30c2fb Mon Sep 17 00:00:00 2001
From: Jakob Miksch <jakob@meggsimum.de>
Date: Tue, 10 Jan 2023 16:51:39 +0100
Subject: [PATCH 1/4] Add test for chartLayer
---
.../plugin-chart-cartodiagram/src/types.ts | 4 +-
.../test/components/chartLayer.test.ts | 49 +++++++++++++++++++
2 files changed, 51 insertions(+), 2 deletions(-)
create mode 100644 superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts
index 07206f64921b8..9051e66e14402 100644
--- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts
@@ -238,8 +238,8 @@ export type ChartLayerOptions = {
chartSizeValues?: ChartSizeValues;
chartConfigs?: ChartConfig;
chartVizType: SupportedVizTypes;
- onMouseOver: (this: GlobalEventHandlers, ev: MouseEvent) => any | undefined;
- onMouseOut: (this: GlobalEventHandlers, ev: MouseEvent) => any | undefined;
+ onMouseOver?: (this: GlobalEventHandlers, ev: MouseEvent) => any | undefined;
+ onMouseOut?: (this: GlobalEventHandlers, ev: MouseEvent) => any | undefined;
[key: string]: any; // allow custom types like 'name'
// these properties are copied from OpenLayers
// TODO: consider extending the OpenLayers options type
diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
new file mode 100644
index 0000000000000..b2ec1f00ffe4e
--- /dev/null
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+
+import { ChartLayer } from '../../src/components/ChartLayer';
+import { ChartLayerOptions } from '../../src/types';
+
+describe('ChartLayer', () => {
+ it('creates div and loading mask', () => {
+ const options: ChartLayerOptions = {
+ chartVizType: 'pie',
+ };
+ const chartLayer = new ChartLayer(options);
+
+ expect(chartLayer.loadingMask).toBeDefined();
+ expect(chartLayer.div).toBeDefined();
+ });
+
+ it('can remove chart elements', () => {
+ const options: ChartLayerOptions = {
+ chartVizType: 'pie',
+ };
+ const chartLayer = new ChartLayer(options);
+ chartLayer.charts = [
+ {
+ htmlElement: document.createElement('div'),
+ },
+ ];
+
+ chartLayer.removeAllChartElements();
+ expect(chartLayer.charts).toEqual([]);
+ });
+
+});
From 549ab6b38ceba9faf0dd80fcd6673ecd66d04fff Mon Sep 17 00:00:00 2001
From: Jakob Miksch <info@jakobmiksch.eu>
Date: Tue, 10 Jan 2023 16:54:26 +0100
Subject: [PATCH 2/4] Update
superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
---
.../plugin-chart-cartodiagram/test/components/chartLayer.test.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
index b2ec1f00ffe4e..050af2803eded 100644
--- a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
@@ -45,5 +45,4 @@ describe('ChartLayer', () => {
chartLayer.removeAllChartElements();
expect(chartLayer.charts).toEqual([]);
});
-
});
From 0c6c7db86475fa41014cbc0519f26a5cef7de08e Mon Sep 17 00:00:00 2001
From: Jakob Miksch <jakob@meggsimum.de>
Date: Tue, 10 Jan 2023 17:02:51 +0100
Subject: [PATCH 3/4] WIP: create charts in chartlayer
---
.../test/components/chartLayer.test.ts | 370 ++++++++++++++++++
1 file changed, 370 insertions(+)
diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
index 050af2803eded..650110906a03b 100644
--- a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
@@ -45,4 +45,374 @@ describe('ChartLayer', () => {
chartLayer.removeAllChartElements();
expect(chartLayer.charts).toEqual([]);
});
+
+ it('can update chart elements', () => {
+ const chartConfigs = {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [13.43533, 54.67567],
+ },
+ properties: {
+ formData: {
+ adhocFilters: [],
+ appliedTimeExtras: {},
+ dashboards: [],
+ datasource: '24__table',
+ groupby: ['nuclide'],
+ metric: {
+ aggregate: 'COUNT',
+ column: {
+ advanced_data_type: null,
+ certification_details: null,
+ certified_by: null,
+ column_name: 'nuclide',
+ description: null,
+ expression: null,
+ filterable: true,
+ groupby: true,
+ id: 772,
+ is_certified: false,
+ is_dttm: false,
+ python_date_format: null,
+ type: 'TEXT',
+ type_generic: 1,
+ verbose_name: null,
+ warning_markdown: null,
+ },
+ datasourceWarning: false,
+ expressionType: 'SIMPLE',
+ hasCustomLabel: false,
+ isNew: false,
+ label: 'COUNT(nuclide)',
+ optionName: 'metric_k6d9mt9zujc_7v9szd1i0pl',
+ sqlExpression: null,
+ },
+ sliceId: 278,
+ timeRange: 'No filter',
+ vizType: 'pie',
+ rowLimit: 10,
+ },
+ width: null,
+ height: null,
+ echartOptions: {
+ grid: {
+ containLabel: true,
+ },
+ tooltip: {
+ appendToBody: true,
+ show: true,
+ trigger: 'item',
+ },
+ legend: {
+ orient: 'horizontal',
+ show: true,
+ type: 'scroll',
+ top: 0,
+ right: 0,
+ data: ['Bi-214'],
+ },
+ graphic: null,
+ series: [
+ {
+ type: 'pie',
+ left: 0,
+ right: 0,
+ top: 20,
+ bottom: 0,
+ animation: false,
+ radius: ['0%', '70%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: true,
+ labelLine: {
+ show: false,
+ },
+ minShowLabelAngle: 18,
+ label: {
+ show: true,
+ color: '#000000',
+ position: 'outer',
+ alignTo: 'none',
+ bleedMargin: 5,
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontWeight: 'bold',
+ backgroundColor: '#FFFFFF',
+ },
+ },
+ data: [
+ {
+ value: 359,
+ name: 'Bi-214',
+ itemStyle: {
+ color: '#1FA8C9',
+ opacity: 1,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ emitFilter: false,
+ labelMap: {
+ 'Bi-214': ['Bi-214'],
+ },
+ groupby: ['nuclide'],
+ selectedValues: {},
+ refs: {},
+ },
+ },
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [8.83733, 51.78533],
+ },
+ properties: {
+ formData: {
+ adhocFilters: [],
+ appliedTimeExtras: {},
+ dashboards: [],
+ datasource: '24__table',
+ groupby: ['nuclide'],
+ metric: {
+ aggregate: 'COUNT',
+ column: {
+ advanced_data_type: null,
+ certification_details: null,
+ certified_by: null,
+ column_name: 'nuclide',
+ description: null,
+ expression: null,
+ filterable: true,
+ groupby: true,
+ id: 772,
+ is_certified: false,
+ is_dttm: false,
+ python_date_format: null,
+ type: 'TEXT',
+ type_generic: 1,
+ verbose_name: null,
+ warning_markdown: null,
+ },
+ datasourceWarning: false,
+ expressionType: 'SIMPLE',
+ hasCustomLabel: false,
+ isNew: false,
+ label: 'COUNT(nuclide)',
+ optionName: 'metric_k6d9mt9zujc_7v9szd1i0pl',
+ sqlExpression: null,
+ },
+ sliceId: 278,
+ timeRange: 'No filter',
+ vizType: 'pie',
+ rowLimit: 10,
+ },
+ width: null,
+ height: null,
+ echartOptions: {
+ grid: {
+ containLabel: true,
+ },
+ tooltip: {
+ appendToBody: true,
+ show: true,
+ trigger: 'item',
+ },
+ legend: {
+ orient: 'horizontal',
+ show: true,
+ type: 'scroll',
+ top: 0,
+ right: 0,
+ data: ['Pb-214'],
+ },
+ graphic: null,
+ series: [
+ {
+ type: 'pie',
+ left: 0,
+ right: 0,
+ top: 20,
+ bottom: 0,
+ animation: false,
+ radius: ['0%', '70%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: true,
+ labelLine: {
+ show: false,
+ },
+ minShowLabelAngle: 18,
+ label: {
+ show: true,
+ color: '#000000',
+ position: 'outer',
+ alignTo: 'none',
+ bleedMargin: 5,
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontWeight: 'bold',
+ backgroundColor: '#FFFFFF',
+ },
+ },
+ data: [
+ {
+ value: 347,
+ name: 'Pb-214',
+ itemStyle: {
+ color: '#1FA8C9',
+ opacity: 1,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ emitFilter: false,
+ labelMap: {
+ 'Pb-214': ['Pb-214'],
+ },
+ groupby: ['nuclide'],
+ selectedValues: {},
+ refs: {},
+ },
+ },
+ ],
+ };
+ const chartSizeValues = {
+ '0': {
+ height: 100,
+ width: 100,
+ },
+ '1': {
+ height: 100,
+ width: 100,
+ },
+ '2': {
+ height: 100,
+ width: 100,
+ },
+ '3': {
+ height: 100,
+ width: 100,
+ },
+ '4': {
+ height: 100,
+ width: 100,
+ },
+ '5': {
+ height: 100,
+ width: 100,
+ },
+ '6': {
+ height: 100,
+ width: 100,
+ },
+ '7': {
+ height: 100,
+ width: 100,
+ },
+ '8': {
+ height: 100,
+ width: 100,
+ },
+ '9': {
+ height: 100,
+ width: 100,
+ },
+ '10': {
+ height: 100,
+ width: 100,
+ },
+ '11': {
+ height: 100,
+ width: 100,
+ },
+ '12': {
+ height: 100,
+ width: 100,
+ },
+ '13': {
+ height: 100,
+ width: 100,
+ },
+ '14': {
+ height: 100,
+ width: 100,
+ },
+ '15': {
+ height: 100,
+ width: 100,
+ },
+ '16': {
+ height: 100,
+ width: 100,
+ },
+ '17': {
+ height: 100,
+ width: 100,
+ },
+ '18': {
+ height: 100,
+ width: 100,
+ },
+ '19': {
+ height: 100,
+ width: 100,
+ },
+ '20': {
+ height: 100,
+ width: 100,
+ },
+ '21': {
+ height: 100,
+ width: 100,
+ },
+ '22': {
+ height: 100,
+ width: 100,
+ },
+ '23': {
+ height: 100,
+ width: 100,
+ },
+ '24': {
+ height: 100,
+ width: 100,
+ },
+ '25': {
+ height: 100,
+ width: 100,
+ },
+ '26': {
+ height: 100,
+ width: 100,
+ },
+ '27': {
+ height: 100,
+ width: 100,
+ },
+ '28': {
+ height: 100,
+ width: 100,
+ },
+ };
+ const options: ChartLayerOptions = {
+ chartVizType: 'pie',
+ chartConfigs,
+ chartSizeValues,
+ };
+ const chartLayer = new ChartLayer(options);
+ console.log(chartLayer.charts);
+ chartLayer.createCharts(2);
+
+ expect(false).toBe(true);
+ });
});
From 184ea73dff7d2732e011e29eec905d59e0a015b1 Mon Sep 17 00:00:00 2001
From: Jakob Miksch <jakob@meggsimum.de>
Date: Wed, 11 Jan 2023 11:56:39 +0100
Subject: [PATCH 4/4] WIP: add test for setChartConfig
---
.../test/components/chartLayer.test.ts | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
index 650110906a03b..03e79078502a0 100644
--- a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts
@@ -46,6 +46,22 @@ describe('ChartLayer', () => {
expect(chartLayer.charts).toEqual([]);
});
+ describe('setChartConfig', () => {
+ it('calls changed()', () => {
+ const options: ChartLayerOptions = {
+ chartVizType: 'pie',
+ };
+ const chartLayer = new ChartLayer(options);
+ const mockedChanged = jest.fn();
+ console.log(mockedChanged.mock);
+ chartLayer.changed = new mockedChanged();
+ chartLayer.setChartBackgroundBorderRadius(1);
+ // chartLayer.changed();
+ console.log(mockedChanged.mock);
+ expect(true).toEqual(false);
+ });
+ });
+
it('can update chart elements', () => {
const chartConfigs = {
type: 'FeatureCollection',