fix(plugin-chart-echarts): include label length in distance calculati…

…on (#1056) * fix(plugin-chart-echarts): include label length in distance calculation * bump echarts Co-authored-by: root <root@superset.ikrsnik.devonly.net>
apache-superset · May 3, 2021 · 6277e8b · 6277e8b · vercel · May 3, 2021
1 parent 2eb7c81
commit 6277e8b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/plugins/plugin-chart-echarts/package.json b/plugins/plugin-chart-echarts/package.json
@@ -31,6 +31,7 @@
     "@types/mathjs": "^6.0.7",
     "d3-array": "^1.2.0",
     "echarts": "^5.1.1",
+    "lodash": "^4.17.15",
     "mathjs": "^8.0.1"
   },
   "peerDependencies": {

diff --git a/plugins/plugin-chart-echarts/src/Gauge/constants.ts b/plugins/plugin-chart-echarts/src/Gauge/constants.ts
@@ -71,7 +71,8 @@ export const OFFSETS = {
 
 export const FONT_SIZE_MULTIPLIERS = {
   axisTickLength: 0.25,
-  axisLabelDistance: 1.2,
+  axisLabelDistance: 1.5,
+  axisLabelLength: 0.35,
   splitLineLength: 1,
   splitLineWidth: 0.25,
   titleOffsetFromTitle: 2,

diff --git a/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -27,6 +27,7 @@ import {
 } from '@superset-ui/core';
 import { EChartsOption, GaugeSeriesOption } from 'echarts';
 import { GaugeDataItemOption } from 'echarts/types/src/chart/gauge/GaugeSeries';
+import range from 'lodash/range';
 import { parseNumbersList } from '../utils/controls';
 import {
   DEFAULT_FORM_DATA as DEFAULT_GAUGE_FORM_DATA,
@@ -99,6 +100,11 @@ export default function transformProps(chartProps: ChartProps) {
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const normalizer = maxVal;
   const axisLineWidth = calculateAxisLineWidth(data, fontSize, overlap);
+  const axisLabels = range(minVal, maxVal, (maxVal - minVal) / splitNumber);
+  const axisLabelLength = Math.max(
+    ...axisLabels.map(label => numberFormatter(label).length).concat([1]),
+  );
+  const formatValue = (value: number) => valueFormatter.replace('{value}', numberFormatter(value));
   const axisTickLength = FONT_SIZE_MULTIPLIERS.axisTickLength * fontSize;
   const splitLineLength = FONT_SIZE_MULTIPLIERS.splitLineLength * fontSize;
   const titleOffsetFromTitle = FONT_SIZE_MULTIPLIERS.titleOffsetFromTitle * fontSize;
@@ -128,8 +134,6 @@ export default function transformProps(chartProps: ChartProps) {
     },
   }));
 
-  const formatValue = (value: number) => valueFormatter.replace('{value}', numberFormatter(value));
-
   const progress = {
     show: showProgress,
     overlap,
@@ -155,8 +159,12 @@ export default function transformProps(chartProps: ChartProps) {
   const axisLabel = {
     distance:
       axisLineWidth -
-      FONT_SIZE_MULTIPLIERS.axisLabelDistance * fontSize -
+      FONT_SIZE_MULTIPLIERS.axisLabelDistance *
+        fontSize *
+        FONT_SIZE_MULTIPLIERS.axisLabelLength *
+        axisLabelLength -
       (showSplitLine ? splitLineLength : 0) -
+      (showAxisTick ? axisTickLength : 0) -
       OFFSETS.ticksFromLine,
     fontSize,
     formatter: numberFormatter,