From 6de93dd69fc843cc952f6fd396b8c5daeab609e2 Mon Sep 17 00:00:00 2001 From: Juned Chhipa Date: Tue, 24 Sep 2024 17:34:33 +0530 Subject: [PATCH] fixes #4713; pie donut unwanted space in bottom --- samples/react/pie/semi-donut.html | 2 +- samples/source/pie/semi-donut.xml | 2 +- samples/vanilla-js/pie/semi-donut.html | 2 +- samples/vue/pie/semi-donut.html | 2 +- src/charts/Radar.js | 7 ++--- src/modules/Core.js | 6 ++-- src/modules/dimensions/Dimensions.js | 15 ++++------ src/modules/settings/Defaults.js | 38 ++++++++++++++++++++++++++ src/modules/settings/Globals.js | 1 - 9 files changed, 54 insertions(+), 21 deletions(-) diff --git a/samples/react/pie/semi-donut.html b/samples/react/pie/semi-donut.html index 28d2dfbce..9d1589b77 100644 --- a/samples/react/pie/semi-donut.html +++ b/samples/react/pie/semi-donut.html @@ -86,7 +86,7 @@ }, grid: { padding: { - bottom: -80 + bottom: -100 } }, responsive: [{ diff --git a/samples/source/pie/semi-donut.xml b/samples/source/pie/semi-donut.xml index b6981a03b..347e53789 100644 --- a/samples/source/pie/semi-donut.xml +++ b/samples/source/pie/semi-donut.xml @@ -22,7 +22,7 @@ plotOptions: { }, grid: { padding: { - bottom: -80 + bottom: -100 } }, responsive: [{ diff --git a/samples/vanilla-js/pie/semi-donut.html b/samples/vanilla-js/pie/semi-donut.html index 0094421fa..15df2f0fe 100644 --- a/samples/vanilla-js/pie/semi-donut.html +++ b/samples/vanilla-js/pie/semi-donut.html @@ -69,7 +69,7 @@ }, grid: { padding: { - bottom: -80 + bottom: -100 } }, responsive: [{ diff --git a/samples/vue/pie/semi-donut.html b/samples/vue/pie/semi-donut.html index b4e41ff28..c656938d8 100644 --- a/samples/vue/pie/semi-donut.html +++ b/samples/vue/pie/semi-donut.html @@ -89,7 +89,7 @@ }, grid: { padding: { - bottom: -80 + bottom: -100 } }, responsive: [{ diff --git a/src/charts/Radar.js b/src/charts/Radar.js index 0bf34b051..6afb01b87 100644 --- a/src/charts/Radar.js +++ b/src/charts/Radar.js @@ -36,7 +36,7 @@ class Radar { this.defaultSize = w.globals.svgHeight < w.globals.svgWidth - ? w.globals.gridHeight + w.globals.goldenPadding * 1.5 + ? w.globals.gridHeight : w.globals.gridWidth this.isLog = w.config.yaxis[0].logarithmic @@ -401,10 +401,10 @@ class Radar { i, j: i, parent: elXAxisWrap, - className: "apexcharts-xaxis-label", + className: 'apexcharts-xaxis-label', color: Array.isArray(xaxisLabelsConfig.style.colors) && - xaxisLabelsConfig.style.colors[i] + xaxisLabelsConfig.style.colors[i] ? xaxisLabelsConfig.style.colors[i] : '#a8a8a8', dataLabelsConfig: { @@ -424,7 +424,6 @@ class Radar { w.config.chart.events.xAxisLabelClick(e, this.ctx, opts) } }) - } }) diff --git a/src/modules/Core.js b/src/modules/Core.js index 69238cf35..fb40c2f4a 100644 --- a/src/modules/Core.js +++ b/src/modules/Core.js @@ -446,7 +446,7 @@ export default class Core { !w.config.legend.floating ) { legendHeight = - new Legend(this.ctx).legendHelpers.getLegendDimensions().clwh + 10 + new Legend(this.ctx).legendHelpers.getLegendDimensions().clwh + 7 } const el = w.globals.dom.baseEl.querySelector( @@ -465,7 +465,9 @@ export default class Core { chartInnerDimensions = Math.max(w.globals.radialSize * 2.05, maxHeight) } - const newHeight = chartInnerDimensions + gl.translateY + legendHeight + offY + const newHeight = Math.ceil( + chartInnerDimensions + gl.translateY + legendHeight + offY + ) if (gl.dom.elLegendForeign) { gl.dom.elLegendForeign.setAttribute('height', newHeight) diff --git a/src/modules/dimensions/Dimensions.js b/src/modules/dimensions/Dimensions.js index bb8086f93..a1e8e4f39 100644 --- a/src/modules/dimensions/Dimensions.js +++ b/src/modules/dimensions/Dimensions.js @@ -156,7 +156,7 @@ export default class Dimensions { if (w.config.chart.type === 'radar' || this.isSparkline) { yAxisWidth = 0 - xAxisHeight = gl.goldenPadding + xAxisHeight = 0 } if (this.isSparkline) { @@ -256,30 +256,25 @@ export default class Dimensions { let offX = cnf.plotOptions[type].offsetX if (!cnf.legend.show || cnf.legend.floating) { - gl.gridHeight = - gl.svgHeight - cnf.grid.padding.top - cnf.grid.padding.bottom + gl.gridHeight = gl.svgHeight const maxWidth = gl.dom.elWrap.getBoundingClientRect().width - gl.gridWidth = - Math.min(maxWidth, gl.gridHeight) - - cnf.grid.padding.left - - cnf.grid.padding.right + gl.gridWidth = Math.min(maxWidth, gl.gridHeight) gl.translateY = offY gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2 - return } switch (cnf.legend.position) { case 'bottom': - gl.gridHeight = gl.svgHeight - this.lgRect.height - gl.goldenPadding + gl.gridHeight = gl.svgHeight - this.lgRect.height gl.gridWidth = gl.svgWidth gl.translateY = offY - 10 gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2 break case 'top': - gl.gridHeight = gl.svgHeight - this.lgRect.height - gl.goldenPadding + gl.gridHeight = gl.svgHeight - this.lgRect.height gl.gridWidth = gl.svgWidth gl.translateY = this.lgRect.height + offY + 10 gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2 diff --git a/src/modules/settings/Defaults.js b/src/modules/settings/Defaults.js index a49d038b4..99853e9fe 100644 --- a/src/modules/settings/Defaults.js +++ b/src/modules/settings/Defaults.js @@ -978,6 +978,14 @@ export default class Defaults { legend: { position: 'right', }, + grid: { + padding: { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + }, } } @@ -1022,6 +1030,14 @@ export default class Defaults { legend: { position: 'right', }, + grid: { + padding: { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + }, } } @@ -1052,6 +1068,14 @@ export default class Defaults { legend: { position: 'right', }, + grid: { + padding: { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + }, } } @@ -1085,6 +1109,12 @@ export default class Defaults { }, grid: { show: false, + padding: { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, }, xaxis: { labels: { @@ -1136,6 +1166,14 @@ export default class Defaults { enabled: false, fillSeriesColor: true, }, + grid: { + padding: { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + }, } } diff --git a/src/modules/settings/Globals.js b/src/modules/settings/Globals.js index 7aed9a072..f9e0bcfc8 100644 --- a/src/modules/settings/Globals.js +++ b/src/modules/settings/Globals.js @@ -137,7 +137,6 @@ export default class Globals { capturedSeriesIndex: -1, capturedDataPointIndex: -1, selectedDataPoints: [], - goldenPadding: 35, // this value is used at a lot of places for spacing purpose invalidLogScale: false, // if a user enabled log scale but the data provided is not valid to generate a log scale, turn on this flag ignoreYAxisIndexes: [], // when series are being collapsed in multiple y axes, ignore certain index maxValsInArrayIndex: 0,