dosubot[bot] commented on issue #29140:
URL: https://github.com/apache/superset/issues/29140#issuecomment-2157141731
<!-- Greeting -->
Hello, @duyhd! I'm here to help you with any issues, bugs, or questions you
may have. I can also guide you on becoming a contributor. Let's work together
to solve this!
<!-- Answer -->
To change the number format in Apache Superset from "226,049,182,616.69₫" to
"226.049.182.616,69₫", you need to set a custom D3 format locale. This can be
done using the `setD3Format` function provided in the
`NumberFormatterRegistrySingleton.ts` file.
Here is an example of how you can set the D3 format locale to achieve the
desired number format:
```ts
import { setD3Format } from 'path-to-NumberFormatterRegistrySingleton';
const vietnameseLocale = {
decimal: ',',
thousands: '.',
grouping: [3],
currency: ['₫', ''],
};
setD3Format(vietnameseLocale);
```
This code sets the decimal separator to a comma (`,`), the thousands
separator to a period (`.`), and specifies the currency symbol for Vietnamese
đồng (₫). After setting this locale, numbers will be formatted as
"226.049.182.616,69₫"
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistrySingleton.ts)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/NumberFormat.stories.tsx)</sup>.
Additionally, you can use the `@superset-ui/number-format` package to
validate and preview the number format. Here is an example of how you can use
this package:
```tsx
import { PureComponent } from 'react';
import { formatNumber } from '@superset-ui/core';
class NumberFormatValidator extends PureComponent {
state: { formatString: string; testValues: (number | null | undefined)[] }
= {
formatString: '.3~s',
testValues: [
987654321,
12345.6789,
3000,
400.14,
70.00002,
1,
0,
-1,
-70.00002,
-400.14,
-3000,
-12345.6789,
-987654321,
Number.POSITIVE_INFINITY,
Number.NEGATIVE_INFINITY,
NaN,
null,
undefined,
],
};
constructor(props) {
super(props);
this.handleFormatChange = this.handleFormatChange.bind(this);
}
handleFormatChange(event) {
this.setState({
formatString: event.target.value,
});
}
render() {
const { formatString, testValues } = this.state;
return (
<div className="container">
<div className="row" style={{ margin: '40px 20px 0 20px' }}>
<div className="col-sm">
<p>
This <code>@superset-ui/number-format</code> package
enriches{' '}
<code>d3-format</code>
to handle invalid formats as well as edge case values. Use the
validator below to preview outputs from the specified format
string. See
<a
href="https://github.com/d3/d3-format#locale_format";
target="_blank"
rel="noopener noreferrer"
>
D3 Format Reference
</a>
for how to write a D3 format string.
</p>
</div>
</div>
<div className="row" style={{ margin: '10px 0 30px 0' }}>
<div className="col-sm" />
<div className="col-sm-8">
<div className="form">
<div className="form-group">
<label>
Enter D3 format string:
<input
id="formatString"
className="form-control form-control-lg"
type="text"
value={formatString}
onChange={this.handleFormatChange}
/>
</label>
</div>
</div>
</div>
<div className="col-sm" />
</div>
<div className="row">
<div className="col-sm">
<table className="table table-striped table-sm">
<thead>
<tr>
<th>Input (number)</th>
<th>Formatted output (string)</th>
</tr>
</thead>
<tbody>
{testValues.map((v, index) => (
<tr key={index}>
<td>
<code>{`${v}`}</code>
</td>
<td>
<code>"{formatNumber(formatString,
v)}"</code>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}
}
export default {
title: 'Core Packages/@superset-ui-number-format',
};
export const validator = () => <NumberFormatValidator />;
```
This example demonstrates how to use the `@superset-ui/number-format`
package to validate and preview the number format changes
<sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/NumberFormat.stories.tsx)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
