From 641e3c5ff7b26403ef5632d45b304a8e93dcf0e4 Mon Sep 17 00:00:00 2001 From: "benguozakinci@gmail.com" Date: Wed, 1 Sep 2021 14:26:17 +0300 Subject: [PATCH 1/6] Add yAxis configuration for customized tick label & tooltip data --- app/Traits/Charts.php | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php index e21e2eeda..dd8983874 100644 --- a/app/Traits/Charts.php +++ b/app/Traits/Charts.php @@ -4,6 +4,8 @@ namespace App\Traits; use App\Utilities\Chartjs; +use Balping\JsonRaw\Raw; + trait Charts { public $donut = [ @@ -103,6 +105,21 @@ trait Charts 'mode' => 'nearest', 'intersect' => 0, 'position' => 'nearest', + 'callbacks' => [ + 'label' => new Raw("function(tooltipItem, data) { + return '" . config('money.' . setting('default.currency') . '.symbol') . "' + tooltipItem.yLabel; + }"), + ], + ], + 'scales' => [ + 'yAxes' => [[ + 'ticks' => [ + 'beginAtZero' => true, + 'callback' => new Raw("function(value, index, values) { + return '" . config('money.' . setting('default.currency') . '.symbol') . "' + value; + }"), + ], + ] ], 'responsive' => true, 'scales' => [ @@ -111,7 +128,10 @@ trait Charts 'ticks' => [ 'padding' => 10, 'fontColor' => '#9e9e9e', - ], + 'callback' => new Raw("function(value, index, values) { + return '" . config('money.' . setting('default.currency') . '.symbol') . "' + value; + }"), + ]], 'gridLines' => [ 'drawBorder' => false, 'color' => 'rgba(29,140,248,0.1)', From 4a2fd2cc9ffb432603ced9341ce70dd5b1e8f173 Mon Sep 17 00:00:00 2001 From: "benguozakinci@gmail.com" Date: Wed, 1 Sep 2021 16:47:42 +0300 Subject: [PATCH 2/6] Tooltip shows positions symbol according to prefix --- app/Traits/Charts.php | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php index dd8983874..7c6fd9d11 100644 --- a/app/Traits/Charts.php +++ b/app/Traits/Charts.php @@ -2,6 +2,8 @@ namespace App\Traits; +use Akaunting\Money\Money; + use App\Utilities\Chartjs; use Balping\JsonRaw\Raw; @@ -106,8 +108,12 @@ trait Charts 'intersect' => 0, 'position' => 'nearest', 'callbacks' => [ - 'label' => new Raw("function(tooltipItem, data) { - return '" . config('money.' . setting('default.currency') . '.symbol') . "' + tooltipItem.yLabel; + 'label' => new Raw("function(tooltipItem, data) { + ". config('money.' . setting('default.currency') . '.symbol_first' ) . " === 1 + ? + '" . config('money.' . setting('default.currency') . '.symbol' ) . "' + tooltipItem.yLabel; + : + tooltipItem.yLabel + '" . config('money.' . setting('default.currency') . '.symbol') . "'; }"), ], ], @@ -158,3 +164,4 @@ trait Charts ]; } } + From 2ab39c4f172ca0e261c5a8626e1ec84c329f850b Mon Sep 17 00:00:00 2001 From: "benguozakinci@gmail.com" Date: Wed, 1 Sep 2021 18:30:52 +0300 Subject: [PATCH 3/6] Add money formatting --- app/Traits/Charts.php | 68 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 62 insertions(+), 6 deletions(-) diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php index 7c6fd9d11..d5ec38550 100644 --- a/app/Traits/Charts.php +++ b/app/Traits/Charts.php @@ -109,12 +109,68 @@ trait Charts 'position' => 'nearest', 'callbacks' => [ 'label' => new Raw("function(tooltipItem, data) { - ". config('money.' . setting('default.currency') . '.symbol_first' ) . " === 1 - ? - '" . config('money.' . setting('default.currency') . '.symbol' ) . "' + tooltipItem.yLabel; - : - tooltipItem.yLabel + '" . config('money.' . setting('default.currency') . '.symbol') . "'; - }"), + const isPrefix = '" . config('money.' . setting('default.currency') . '.symbol_first') . "' + + const money = { + decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', + thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', + prefix: '" . config('money.' . setting('default.currency') . '.symbol') . "', + suffix: '" . config('money.' . setting('default.currency') . '.symbol') . "', + precision: '" . config('money.' . setting('default.currency') . '.precision') . "', + } + + const format = function (input, opt = { + decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', + thousands: '" . config('money.' . setting('default.currency') . '.thousands_separator') . "', + prefix: '" . config('money.' . setting('default.currency') . '.symbol') . "', + suffix: '" . config('money.' . setting('default.currency') . '.symbol') . "', + precision: '" . config('money.' . setting('default.currency') . '.precision') . "', + }) { + if (typeof input === 'number') { + input = input.toFixed(fixed(opt.precision)); + } + + var negative = input.indexOf('-') >= 0 ? '-' : ''; + var numbers = toStr(input).replace(/\D+/g, '') || '0'; + var currency = numbersToCurrency(numbers, 2); + var parts = toStr(currency).split('.'); + var integer = parts[0]; + var decimal = parts[1]; + + integer.replace(/(\d)(?=(?:\d{3})+\b)/gm, `,`); + + return opt.prefix + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix; + } + + const fixed = function (precision) { + return between(0, precision, 20) + } + + const joinIntegerAndDecimal = function (integer, decimal, separator) { + return decimal ? integer + separator + decimal : integer; + } + + const toStr = function (value) { + return value ? value.toString() : ''; + } + + const numbersToCurrency = function (numbers, precision) { + var exp = Math.pow(10, precision); + var float = parseFloat(numbers) / exp; + + return float.toFixed(fixed(precision)); + } + + const between = function (min, n, max) { + return Math.max(min, Math.min(n, max)); + } + + if ('" . config('money.' . setting('default.currency') . '.symbol_first') . "' === 1) { + return format(tooltipItem.yLabel); + } + + return format(tooltipItem.yLabel); + }") ], ], 'scales' => [ From 0a9193479a822e7d61a270b954a24dacc1970de6 Mon Sep 17 00:00:00 2001 From: "benguozakinci@gmail.com" Date: Thu, 2 Sep 2021 14:29:43 +0300 Subject: [PATCH 4/6] Refactor money format functionality --- app/Traits/Charts.php | 85 +++++++++++++++++++------------------------ 1 file changed, 38 insertions(+), 47 deletions(-) diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php index d5ec38550..4c6938a05 100644 --- a/app/Traits/Charts.php +++ b/app/Traits/Charts.php @@ -95,6 +95,10 @@ trait Charts ]; } + public function formatMoney( ){ + + } + public function getLineChartOptions() { return [ @@ -109,67 +113,53 @@ trait Charts 'position' => 'nearest', 'callbacks' => [ 'label' => new Raw("function(tooltipItem, data) { - const isPrefix = '" . config('money.' . setting('default.currency') . '.symbol_first') . "' - - const money = { + const moneySettings = { decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', - prefix: '" . config('money.' . setting('default.currency') . '.symbol') . "', - suffix: '" . config('money.' . setting('default.currency') . '.symbol') . "', + symbol: '" . config('money.' . setting('default.currency') . '.symbol') . "', + isPrefix: '" . config('money.' . setting('default.currency') . '.symbol_first') . "', precision: '" . config('money.' . setting('default.currency') . '.precision') . "', - } + }; + + const formattedCurrency = function (input, opt = moneySettings) { + function fixed (precision) { + return Math.max(0, Math.min(precision, 20)); + }; + + function toStr(value) { + return value ? value.toString() : ''; + }; + + function numbersToCurrency(numbers, precision) { + var exp = Math.pow(10, precision); + var float = parseFloat(numbers) / exp; + + return float.toFixed(fixed(precision)); + }; + + function joinIntegerAndDecimal (integer, decimal, separator) { + return decimal ? integer + separator + decimal : integer; + }; - const format = function (input, opt = { - decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', - thousands: '" . config('money.' . setting('default.currency') . '.thousands_separator') . "', - prefix: '" . config('money.' . setting('default.currency') . '.symbol') . "', - suffix: '" . config('money.' . setting('default.currency') . '.symbol') . "', - precision: '" . config('money.' . setting('default.currency') . '.precision') . "', - }) { if (typeof input === 'number') { input = input.toFixed(fixed(opt.precision)); - } + }; var negative = input.indexOf('-') >= 0 ? '-' : ''; var numbers = toStr(input).replace(/\D+/g, '') || '0'; - var currency = numbersToCurrency(numbers, 2); + var currency = numbersToCurrency(numbers, opt.precision); var parts = toStr(currency).split('.'); - var integer = parts[0]; + var integer = parts[0].replace(/(\d)(?=(?:\d{3})+\b)/gm, opt.thousands);; var decimal = parts[1]; - integer.replace(/(\d)(?=(?:\d{3})+\b)/gm, `,`); - - return opt.prefix + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix; - } - - const fixed = function (precision) { - return between(0, precision, 20) - } + if(opt.isPrefix) { + return opt.symbol + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + } - const joinIntegerAndDecimal = function (integer, decimal, separator) { - return decimal ? integer + separator + decimal : integer; - } - - const toStr = function (value) { - return value ? value.toString() : ''; - } - - const numbersToCurrency = function (numbers, precision) { - var exp = Math.pow(10, precision); - var float = parseFloat(numbers) / exp; + return negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix; + }; - return float.toFixed(fixed(precision)); - } - - const between = function (min, n, max) { - return Math.max(min, Math.min(n, max)); - } - - if ('" . config('money.' . setting('default.currency') . '.symbol_first') . "' === 1) { - return format(tooltipItem.yLabel); - } - - return format(tooltipItem.yLabel); + return formattedCurrency(tooltipItem.yLabel, moneySettings); }") ], ], @@ -178,6 +168,7 @@ trait Charts 'ticks' => [ 'beginAtZero' => true, 'callback' => new Raw("function(value, index, values) { + return '" . config('money.' . setting('default.currency') . '.symbol') . "' + value; }"), ], From bcc97e3d72037c2675f237294eb605daac59125d Mon Sep 17 00:00:00 2001 From: "benguozakinci@gmail.com" Date: Thu, 2 Sep 2021 14:50:07 +0300 Subject: [PATCH 5/6] Move out functionality --- app/Traits/Charts.php | 97 ++++++++++++++++++++++--------------------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php index 4c6938a05..356a828d8 100644 --- a/app/Traits/Charts.php +++ b/app/Traits/Charts.php @@ -95,8 +95,55 @@ trait Charts ]; } - public function formatMoney( ){ - + public function formatMoney($str){ + return new Raw( + " + const moneySettings = { + decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', + thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', + symbol: '" . config('money.' . setting('default.currency') . '.symbol') . "', + isPrefix: '" . config('money.' . setting('default.currency') . '.symbol_first') . "', + precision: '" . config('money.' . setting('default.currency') . '.precision') . "', + }; + + const $str = function (input, opt = moneySettings) { + function fixed (precision) { + return Math.max(0, Math.min(precision, 20)); + }; + + function toStr(value) { + return value ? value.toString() : ''; + }; + + function numbersToCurrency(numbers, precision) { + var exp = Math.pow(10, precision); + var float = parseFloat(numbers) / exp; + + return float.toFixed(fixed(precision)); + }; + + function joinIntegerAndDecimal (integer, decimal, separator) { + return decimal ? integer + separator + decimal : integer; + }; + + if (typeof input === 'number') { + input = input.toFixed(fixed(opt.precision)); + }; + + var negative = input.indexOf('-') >= 0 ? '-' : ''; + var numbers = toStr(input).replace(/\D+/g, '') || '0'; + var currency = numbersToCurrency(numbers, opt.precision); + var parts = toStr(currency).split('.'); + var integer = parts[0].replace(/(\d)(?=(?:\d{3})+\b)/gm, opt.thousands);; + var decimal = parts[1]; + + if(opt.isPrefix) { + return opt.symbol + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + } + + return negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix; + }" + ); } public function getLineChartOptions() @@ -113,52 +160,6 @@ trait Charts 'position' => 'nearest', 'callbacks' => [ 'label' => new Raw("function(tooltipItem, data) { - const moneySettings = { - decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', - thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', - symbol: '" . config('money.' . setting('default.currency') . '.symbol') . "', - isPrefix: '" . config('money.' . setting('default.currency') . '.symbol_first') . "', - precision: '" . config('money.' . setting('default.currency') . '.precision') . "', - }; - - const formattedCurrency = function (input, opt = moneySettings) { - function fixed (precision) { - return Math.max(0, Math.min(precision, 20)); - }; - - function toStr(value) { - return value ? value.toString() : ''; - }; - - function numbersToCurrency(numbers, precision) { - var exp = Math.pow(10, precision); - var float = parseFloat(numbers) / exp; - - return float.toFixed(fixed(precision)); - }; - - function joinIntegerAndDecimal (integer, decimal, separator) { - return decimal ? integer + separator + decimal : integer; - }; - - if (typeof input === 'number') { - input = input.toFixed(fixed(opt.precision)); - }; - - var negative = input.indexOf('-') >= 0 ? '-' : ''; - var numbers = toStr(input).replace(/\D+/g, '') || '0'; - var currency = numbersToCurrency(numbers, opt.precision); - var parts = toStr(currency).split('.'); - var integer = parts[0].replace(/(\d)(?=(?:\d{3})+\b)/gm, opt.thousands);; - var decimal = parts[1]; - - if(opt.isPrefix) { - return opt.symbol + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) - } - - return negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix; - }; - return formattedCurrency(tooltipItem.yLabel, moneySettings); }") ], From 68e788505ae47d11363185abb7b0e5c59b83d1a9 Mon Sep 17 00:00:00 2001 From: "benguozakinci@gmail.com" Date: Thu, 2 Sep 2021 19:17:19 +0300 Subject: [PATCH 6/6] Apply format currency to tAxes --- app/Traits/Charts.php | 150 ++++++++++++++++++++++++++---------------- 1 file changed, 93 insertions(+), 57 deletions(-) diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php index 356a828d8..2eb56585a 100644 --- a/app/Traits/Charts.php +++ b/app/Traits/Charts.php @@ -95,57 +95,6 @@ trait Charts ]; } - public function formatMoney($str){ - return new Raw( - " - const moneySettings = { - decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', - thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', - symbol: '" . config('money.' . setting('default.currency') . '.symbol') . "', - isPrefix: '" . config('money.' . setting('default.currency') . '.symbol_first') . "', - precision: '" . config('money.' . setting('default.currency') . '.precision') . "', - }; - - const $str = function (input, opt = moneySettings) { - function fixed (precision) { - return Math.max(0, Math.min(precision, 20)); - }; - - function toStr(value) { - return value ? value.toString() : ''; - }; - - function numbersToCurrency(numbers, precision) { - var exp = Math.pow(10, precision); - var float = parseFloat(numbers) / exp; - - return float.toFixed(fixed(precision)); - }; - - function joinIntegerAndDecimal (integer, decimal, separator) { - return decimal ? integer + separator + decimal : integer; - }; - - if (typeof input === 'number') { - input = input.toFixed(fixed(opt.precision)); - }; - - var negative = input.indexOf('-') >= 0 ? '-' : ''; - var numbers = toStr(input).replace(/\D+/g, '') || '0'; - var currency = numbersToCurrency(numbers, opt.precision); - var parts = toStr(currency).split('.'); - var integer = parts[0].replace(/(\d)(?=(?:\d{3})+\b)/gm, opt.thousands);; - var decimal = parts[1]; - - if(opt.isPrefix) { - return opt.symbol + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) - } - - return negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix; - }" - ); - } - public function getLineChartOptions() { return [ @@ -160,6 +109,52 @@ trait Charts 'position' => 'nearest', 'callbacks' => [ 'label' => new Raw("function(tooltipItem, data) { + const moneySettings = { + decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', + thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', + symbol: '" . config('money.' . setting('default.currency') . '.symbol') . "', + isPrefix: '" . config('money.' . setting('default.currency') . '.symbol_first') . "', + precision: '" . config('money.' . setting('default.currency') . '.precision') . "', + }; + + const formattedCurrency = function (input, opt = moneySettings) { + function fixed (precision) { + return Math.max(0, Math.min(precision, 20)); + }; + + function toStr(value) { + return value ? value.toString() : ''; + }; + + function numbersToCurrency(numbers, precision) { + var exp = Math.pow(10, precision); + var float = parseFloat(numbers) / exp; + + return float.toFixed(fixed(precision)); + }; + + function joinIntegerAndDecimal (integer, decimal, separator) { + return decimal ? integer + separator + decimal : integer; + }; + + if (typeof input === 'number') { + input = input.toFixed(fixed(opt.precision)); + }; + + var negative = input.indexOf('-') >= 0 ? '-' : ''; + var numbers = toStr(input).replace(/\D+/g, '') || '0'; + var currency = numbersToCurrency(numbers, opt.precision); + var parts = toStr(currency).split('.'); + var integer = parts[0].replace(/(\d)(?=(?:\d{3})+\b)/gm, opt.thousands);; + var decimal = parts[1]; + + if(opt.isPrefix == 1) { + return opt.symbol + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + } + + return negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.symbol; + }; + return formattedCurrency(tooltipItem.yLabel, moneySettings); }") ], @@ -169,8 +164,53 @@ trait Charts 'ticks' => [ 'beginAtZero' => true, 'callback' => new Raw("function(value, index, values) { - - return '" . config('money.' . setting('default.currency') . '.symbol') . "' + value; + const moneySettings = { + decimal: '" . config('money.' . setting('default.currency') . '.decimal_mark') . "', + thousands: '". config('money.' . setting('default.currency') . '.thousands_separator') . "', + symbol: '" . config('money.' . setting('default.currency') . '.symbol') . "', + isPrefix: '" . config('money.' . setting('default.currency') . '.symbol_first') . "', + precision: '" . config('money.' . setting('default.currency') . '.precision') . "', + }; + + const formattedCurrency = function (input, opt = moneySettings) { + function fixed (precision) { + return Math.max(0, Math.min(precision, 20)); + }; + + function toStr(value) { + return value ? value.toString() : ''; + }; + + function numbersToCurrency(numbers, precision) { + var exp = Math.pow(10, precision); + var float = parseFloat(numbers) / exp; + + return float.toFixed(fixed(precision)); + }; + + function joinIntegerAndDecimal (integer, decimal, separator) { + return decimal ? integer + separator + decimal : integer; + }; + + if (typeof input === 'number') { + input = input.toFixed(fixed(opt.precision)); + }; + + var negative = input.indexOf('-') >= 0 ? '-' : ''; + var numbers = toStr(input).replace(/\D+/g, '') || '0'; + var currency = numbersToCurrency(numbers, opt.precision); + var parts = toStr(currency).split('.'); + var integer = parts[0].replace(/(\d)(?=(?:\d{3})+\b)/gm, opt.thousands);; + var decimal = parts[1]; + + if(opt.isPrefix == 1) { + return opt.symbol + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + } else { + return negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.symbol; + } + }; + + return formattedCurrency(value, moneySettings); }"), ], ] @@ -182,9 +222,6 @@ trait Charts 'ticks' => [ 'padding' => 10, 'fontColor' => '#9e9e9e', - 'callback' => new Raw("function(value, index, values) { - return '" . config('money.' . setting('default.currency') . '.symbol') . "' + value; - }"), ]], 'gridLines' => [ 'drawBorder' => false, @@ -212,4 +249,3 @@ trait Charts ]; } } -