fix: use SVG renderer for labels (#326)

qlik-oss · Jan 15, 2024 · 61d5148 · 61d5148
1 parent f8656dc
commit 61d5148
Show file tree

Hide file tree

Showing 24 changed files with 22 additions and 1 deletion.
diff --git a/chart-modules/common/picasso/chart-builder/components/axis.js b/chart-modules/common/picasso/chart-builder/components/axis.js
@@ -1,5 +1,6 @@
 import extend from 'extend';
 import axisDockUtil from './util/axis-dock-util';
+import getTextRenderer from './util/get-text-renderer';
 
 function axis(settings, options) {
   const chartID = options && options.chartID; // Should we validate if the parameter exists?
@@ -18,6 +19,7 @@ function axis(settings, options) {
   const defaultSettings = {
     key: 'axis',
     type: 'axis',
+    renderer: getTextRenderer(options.flags),
     dock: axisDockUtil.getAxisDock(direction, dock, isRtl),
     brush: { trigger: [], consume: [] },
     settings: {

diff --git a/chart-modules/common/picasso/chart-builder/components/categorical-legend.js b/chart-modules/common/picasso/chart-builder/components/categorical-legend.js
@@ -1,4 +1,5 @@
 import extend from 'extend';
+import getTextRenderer from './util/get-text-renderer';
 
 const directions = {
   left: 'left',
@@ -27,9 +28,9 @@ function legend(settings, options) {
   const defaultSettings = {
     key: 'legend',
     type: 'legend-cat',
+    renderer: getTextRenderer(options.flags),
     dock,
     show,
-
     scale: {
       type: 'color',
     },

diff --git a/chart-modules/common/picasso/chart-builder/components/labels.js b/chart-modules/common/picasso/chart-builder/components/labels.js
@@ -1,4 +1,5 @@
 import extend from 'extend';
+import getTextRenderer from './util/get-text-renderer';
 
 function getLabel(context) {
   const end = context.data.end;
@@ -15,6 +16,7 @@ function labels(settings, options) {
   const defaultSettings = {
     key: 'labels',
     type: 'labels',
+    renderer: getTextRenderer(options.flags),
     displayOrder: 1,
     settings: {
       sources: [

diff --git a/chart-modules/common/picasso/chart-builder/components/util/get-text-renderer.js b/chart-modules/common/picasso/chart-builder/components/util/get-text-renderer.js
@@ -0,0 +1,7 @@
+export default function getTextRenderer(flags) {
+  if (!flags?.isEnabled?.('IM_5791_SVG_LABEL_RENDERING')) {
+    return undefined;
+  }
+
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? undefined : 'svg';
+}
diff --git a/charts/boxplot/src/boxplot-view.js b/charts/boxplot/src/boxplot-view.js
@@ -590,6 +590,7 @@ const BoxPlot = ChartView.extend('BoxPlot', {
       chartID,
       theme,
       isRtl,
+      flags: this.flags,
     });
 
     let dimAxisSelectionSettings = {};

diff --git a/charts/distributionplot/src/distributionplot-view.js b/charts/distributionplot/src/distributionplot-view.js
@@ -523,6 +523,7 @@ const DistributionPlot = ChartView.extend('DistributionPlot', {
       chartID: CONSTANTS.CHART_ID,
       theme,
       isRtl,
+      flags: this.flags,
     });
 
     if (hyperCube.qStackedDataPages[0].qData.length === 0) {

diff --git a/charts/histogram/src/chart-settings/chart-settings.js b/charts/histogram/src/chart-settings/chart-settings.js
@@ -66,6 +66,7 @@ function createChartSettings(chartView, layout) {
     chartID,
     theme,
     isRtl,
+    flags: chartView.flags,
   });
   const themeService = createThemeService({
     theme,

diff --git a/charts/waterfallchart/src/waterfallchart-view.js b/charts/waterfallchart/src/waterfallchart-view.js
@@ -290,6 +290,7 @@ function createChartSettings(layout) {
     chartID,
     theme,
     isRtl,
+    flags: this.flags,
   });
   const width = this.picassoElement.clientWidth;
   const height = this.picassoElement.clientHeight;

diff --git a/nebula.config.js b/nebula.config.js
@@ -15,4 +15,9 @@ module.exports = {
     replacementStrings,
     sourcemap: true,
   },
+  serve: {
+    flags: {
+      IM_5791_SVG_LABEL_RENDERING: true,
+    },
+  },
 };
diff --git a/test/rendering/baselines/boxplot-basic-2-baseline.png b/test/rendering/baselines/boxplot-basic-2-baseline.png
diff --git a/test/rendering/baselines/boxplot-basic-4-baseline.png b/test/rendering/baselines/boxplot-basic-4-baseline.png
diff --git a/test/rendering/baselines/distplot-basic-4-baseline.png b/test/rendering/baselines/distplot-basic-4-baseline.png
diff --git a/test/rendering/baselines/histogram-basic-2-baseline.png b/test/rendering/baselines/histogram-basic-2-baseline.png
diff --git a/test/rendering/baselines/histogram-basic-3-baseline.png b/test/rendering/baselines/histogram-basic-3-baseline.png
diff --git a/test/rendering/baselines/histogram-basic-baseline.png b/test/rendering/baselines/histogram-basic-baseline.png
diff --git a/test/rendering/baselines/histogram-theming-global-baseline.png b/test/rendering/baselines/histogram-theming-global-baseline.png
diff --git a/test/rendering/baselines/histogram-theming-scoped-baseline.png b/test/rendering/baselines/histogram-theming-scoped-baseline.png
diff --git a/test/rendering/baselines/waterfall-basic-1-baseline.png b/test/rendering/baselines/waterfall-basic-1-baseline.png
diff --git a/test/rendering/baselines/waterfall-basic-2-baseline.png b/test/rendering/baselines/waterfall-basic-2-baseline.png
diff --git a/test/rendering/baselines/waterfall-basic-3-baseline.png b/test/rendering/baselines/waterfall-basic-3-baseline.png
diff --git a/test/rendering/baselines/waterfall-basic-4-baseline.png b/test/rendering/baselines/waterfall-basic-4-baseline.png
diff --git a/test/rendering/baselines/waterfall-basic-baseline.png b/test/rendering/baselines/waterfall-basic-baseline.png
diff --git a/test/rendering/baselines/waterfall-theming-global-baseline.png b/test/rendering/baselines/waterfall-theming-global-baseline.png
diff --git a/test/rendering/baselines/waterfall-theming-scoped-baseline.png b/test/rendering/baselines/waterfall-theming-scoped-baseline.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -590,6 +590,7 @@ const BoxPlot = ChartView.extend('BoxPlot', { @@
           chartID,
           theme,
           isRtl,
+          flags: this.flags,
         });
         let dimAxisSelectionSettings = {};
@@ Expand Down @@