From fd2d81dd83592ee09c937ebad3750db9be37d873 Mon Sep 17 00:00:00 2001 From: Digvijayrao Jadhav <digvijayrao.jadhav@kornferry.com> Date: Mon, 1 Apr 2024 16:17:11 +0530 Subject: [PATCH 1/3] added color evaluation function in Bar.js under stroke prop and update ApexStroke type definition --- src/charts/Bar.js | 30 +++++++++++++++++++++++++++++- types/apexcharts.d.ts | 2 +- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/charts/Bar.js b/src/charts/Bar.js index 300ac3f4c..ae4e30507 100644 --- a/src/charts/Bar.js +++ b/src/charts/Bar.js @@ -319,10 +319,38 @@ class Bar { const graphics = new Graphics(this.ctx) if (!lineFill) { + // if user provided a function in colors, we need to eval here + // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex. + function fetchColor(i) { + const exp = w.config.stroke.colors + let c + if (Array.isArray(exp) && exp.length > 0) { + c = exp[i] + if (!c) c = '' + if (typeof c === 'function') { + return c({ + value: w.globals.axisCharts + ? w.globals.series[i][j] + ? w.globals.series[i][j] + : 0 + : w.globals.series[i], + dataPointIndex: i, + w, + }) + } + } + return c + } + + const checkAvailableColor = + typeof w.globals.stroke.colors[realIndex] === 'function' + ? fetchColor(realIndex) + : w.globals.stroke.colors[realIndex] + /* fix apexcharts#341 */ lineFill = this.barOptions.distributed ? w.globals.stroke.colors[j] - : w.globals.stroke.colors[realIndex] + : checkAvailableColor } if (w.config.series[i].data[j] && w.config.series[i].data[j].strokeColor) { diff --git a/types/apexcharts.d.ts b/types/apexcharts.d.ts index 66667d577..de397e1fd 100644 --- a/types/apexcharts.d.ts +++ b/types/apexcharts.d.ts @@ -344,7 +344,7 @@ type ApexStroke = { show?: boolean curve?: 'smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic' | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[] lineCap?: 'butt' | 'square' | 'round' - colors?: string[] + colors?: any[] | string[] width?: number | number[] dashArray?: number | number[] fill?: ApexFill From f9d1967b0dbf4354aaff78779debc92217c44fa3 Mon Sep 17 00:00:00 2001 From: Digvijayrao Jadhav <digvijayrao.jadhav@kornferry.com> Date: Mon, 1 Apr 2024 16:18:33 +0530 Subject: [PATCH 2/3] updated space --- src/charts/Bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/charts/Bar.js b/src/charts/Bar.js index ae4e30507..4290ce88d 100644 --- a/src/charts/Bar.js +++ b/src/charts/Bar.js @@ -320,7 +320,7 @@ class Bar { if (!lineFill) { // if user provided a function in colors, we need to eval here - // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex. + // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex. function fetchColor(i) { const exp = w.config.stroke.colors let c From 2af1fcace6ee988087dbd8f654e7affeb421d517 Mon Sep 17 00:00:00 2001 From: Digvijayrao Jadhav <digvijayrao.jadhav@kornferry.com> Date: Fri, 5 Apr 2024 12:57:58 +0530 Subject: [PATCH 3/3] Worked on pr reviews & file auto formatted --- src/charts/Bar.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/charts/Bar.js b/src/charts/Bar.js index 4290ce88d..fac10ba0e 100644 --- a/src/charts/Bar.js +++ b/src/charts/Bar.js @@ -319,8 +319,8 @@ class Bar { const graphics = new Graphics(this.ctx) if (!lineFill) { - // if user provided a function in colors, we need to eval here - // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex. + // if user provided a function in colors, we need to eval here + // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex. function fetchColor(i) { const exp = w.config.stroke.colors let c @@ -329,12 +329,8 @@ class Bar { if (!c) c = '' if (typeof c === 'function') { return c({ - value: w.globals.axisCharts - ? w.globals.series[i][j] - ? w.globals.series[i][j] - : 0 - : w.globals.series[i], - dataPointIndex: i, + value: w.globals.series[i][j], + dataPointIndex: j, w, }) } @@ -573,7 +569,11 @@ class Bar { } } - y = this.barHelpers.getYForValue(this.series[i][j], zeroH, translationsIndex) + y = this.barHelpers.getYForValue( + this.series[i][j], + zeroH, + translationsIndex + ) const paths = this.barHelpers.getColumnPaths({ barXPosition, @@ -606,7 +606,14 @@ class Bar { pathFrom: paths.pathFrom, x, y, - goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j, translationsIndex), + goalY: this.barHelpers.getGoalValues( + 'y', + null, + zeroH, + i, + j, + translationsIndex + ), barXPosition, barWidth, }