GitHub user dosubot[bot] added a comment to the discussion: Changing Dashboard
'Big Number with Trendline chart' background color & adding additional suffix
to display value
<!-- Greeting -->
Hey @najeela-pa! I'm here to help you with any bugs, questions, or
contributions you have. Let's solve this together!
<!-- Answer -->
To address the issues you're facing with the 'Big Number with Trendline chart'
in Apache Superset 4.1.1, you can follow these steps:
1. **Change Background Color Based on Percentage Growth:**
You can use the logic from the `PopKPI.tsx` file to set the background color
based on the percentage difference. This involves using the
`comparisonColorScheme` and `percentDifferenceNumber` to determine the color.
```tsx
const { backgroundColor, textColor } = useMemo(() => {
let bgColor = theme.colors.grayscale.light4;
let txtColor = theme.colors.grayscale.base;
if (comparisonColorEnabled && percentDifferenceNumber !== 0) {
const useSuccess =
(percentDifferenceNumber > 0 &&
comparisonColorScheme === ColorSchemeEnum.Green) ||
(percentDifferenceNumber < 0 &&
comparisonColorScheme === ColorSchemeEnum.Red);
bgColor = useSuccess
? theme.colors.success.light2
: theme.colors.error.light2;
txtColor = useSuccess
? theme.colors.success.base
: theme.colors.error.base;
}
return {
backgroundColor: bgColor,
textColor: txtColor,
};
}, [
theme,
comparisonColorScheme,
comparisonColorEnabled,
percentDifferenceNumber,
]);
```
2. **Add Suffix to Display Value:**
To append a suffix like "Hrs" to the display value, you can modify the
`headerFormatter` to include the suffix.
```ts
const headerFormatter =
metricColtype === GenericDataType.Temporal ||
metricColtype === GenericDataType.String ||
forceTimestampFormatting
? formatTime
: (value) => `${numberFormatter(value)} Hrs`; // Add "Hrs" suffix
```
These methods leverage existing logic in the `PopKPI.tsx` file to conditionally
format the background color and append a suffix to the display value, avoiding
JavaScript customizations or formatting errors
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx)</sup>.
If you encounter issues with JavaScript customizations or security concerns,
it's important to ensure that the necessary feature flags are enabled and that
your environment supports these customizations. However, if these options are
not available, the above approach should help you achieve the desired outcome
without relying on unsupported features.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
---
<sup>Help Dosu learn! Give it feedback: [Great
Response](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=great_response)
| [Irrelevant
Answer](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=irrelevant_answer)
| [Incorrect
Sources](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=incorrect_sources)
| [Too
Verbose](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=hallucination)
| [Bug
Report](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/2b96f0fa-3baa-4057-9955-947997fca1fd?feedback_type=other)</sup>
GitHub link:
https://github.com/apache/superset/discussions/32811#discussioncomment-12598451
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
