Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting currency format #233

Closed
2 tasks done
SkylerMime opened this issue Aug 30, 2024 · 5 comments
Closed
2 tasks done

Setting currency format #233

SkylerMime opened this issue Aug 30, 2024 · 5 comments
Assignees
Labels
question Information is requested

Comments

@SkylerMime
Copy link

Checklist

  • I made sure that there are no existing issues - open or closed - which I could contribute my information to.
  • I have taken the time to fill in all the required details. I understand that the question will be dismissed otherwise.

What is/are your question(s)?

I'm working on migrating from the old PrimeFaces p:lineChart to the p:chart element, but I'm not sure how to give setFormat the object it requires for currencies in the axis.

Here's the original JS object:

currencyFormatOptions = { style: 'currency', currency: 'USD' };
currencyFormat = new Intl.NumberFormat('en-US', currencyFormatOptions);

I want to know the Java equivalent for setting format here -- what should myCurrencyFormat be? The given type is just "Object."

private LineOptions getChartOptions() {
    LineOptions options = new LineOptions();
    options.setScales(new Scales().addScale(ScaleAxis.Y, new CoreScaleOptions().setTicks(new LinearTickOptions().setFormat(myCurrencyFormat))));
    return options;
}

Additional information

No response

@SkylerMime SkylerMime added the question Information is requested label Aug 30, 2024
@AB-xdev AB-xdev self-assigned this Sep 2, 2024
@AB-xdev
Copy link
Member

AB-xdev commented Sep 2, 2024

Did a bit of digging inside the code and you can set the format like this:

options
	.getScales()
	.addScale(Scales.ScaleAxis.Y, new LinearScaleOptions()
		.setTicks(new LinearTickOptions()
			.setFormat(new CurrencyFormatOptions("currency", "USD"))
		));

// ...

public static class CurrencyFormatOptions // Could maybe be a record on Java 17+
{
	private String style;
	private String currency;
	
	public CurrencyFormatOptions()
	{
	}
	
	public CurrencyFormatOptions(final String style, final String currency)
	{
		this.style = style;
		this.currency = currency;
	}
	
	public String getStyle()
	{
		return this.style;
	}
	
	public void setStyle(final String style)
	{
		this.style = style;
	}
	
	public String getCurrency()
	{
		return this.currency;
	}
	
	public void setCurrency(final String currency)
	{
		this.currency = currency;
	}
}

In ChartJS 3+ you can also use callback:
https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

Example code:

options
	.getScales()
	.addScale(Scales.ScaleAxis.Y, new LinearScaleOptions()
		.setTicks(new LinearTickOptions()
			.setCallback(new JavaScriptFunction("(label) => `$ ${label}`")))); // JS Code goes here

AB-xdev added a commit that referenced this issue Sep 2, 2024
@AB-xdev
Copy link
Member

AB-xdev commented Sep 2, 2024

I added some example code/tests:
64c503b

Note that there is a slight rendering difference between using format and callback:
When using format the 0 has no $

@SkylerMime
Copy link
Author

Excellent, thanks for digging this up! The callback solution made more sense for me so I could have $0.00 on the axis:

options.getScales().addScale(ScaleAxis.Y, new LinearScaleOptions().setTicks(new LinearTickOptions().setCallback(
		new JavaScriptFunction("(label) => Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD'}).format(label)")
)));

@lprender
Copy link

lprender commented Sep 13, 2024

How do you use the resulting json in your client? When I use your callback example and send it over to my angular client as json it cannot be parsed because of the javascript function in json. How do I properly parse and use it?

fetch(`${environment.apiUrl}/calc/chart/data/pertact/${this.selectedTactId}`)
        .then(response => {
          response.json();
        })
        .then(data => this.chartData = data)
        .catch(error => console.error('Error:', error));

But this sadly resolves in the following error:

image

@AB-xdev
Copy link
Member

AB-xdev commented Sep 13, 2024

@lprender
I'm not quite sure how this is related to the current issue but I will still give it a go.

ChartJS configuration is not valid JSON in the first place, because there is custom stuff like functions inside.

The library is also primarily designed for server generated pages and not really for passing the configuration from the server to the client (it's better to just pass the corresponding data to the client instead and then handle chart creation there).

However if you still want to get the configuration from the backend you can use something like a custom JSON parser or eval to create a valid JS object that can be supplied to ChartJS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Information is requested
Projects
None yet
Development

No branches or pull requests

3 participants