dosubot[bot] commented on issue #29901:
URL: https://github.com/apache/superset/issues/29901#issuecomment-2277231471
<!-- Answer -->
To ensure the color scheme remains consistent in Superset version 4.0.2
despite having dynamic labels, you can use the `ColorSchemeControl` component
and the `updateDashboardLabelsColor` function. These tools help manage and
apply color schemes effectively, even with dynamic labels.
### Using `ColorSchemeControl`
Here's an example of how to use the `ColorSchemeControl` component:
```tsx
import React from 'react';
import { ColorSchemeControl } from
'src/explore/components/controls/ColorSchemeControl';
const colorSchemeProps = {
hasCustomLabelsColor: true,
dashboardId: 1, // Your dashboard ID
label: 'Color scheme',
name: 'color_scheme',
onChange: (value: string) => {
console.log('Color scheme changed to:', value);
},
value: 'supersetColors',
clearable: true,
defaultScheme: 'SUPERSET_DEFAULT',
choices: [
['supersetColors', 'Superset Colors'],
// Add more color scheme choices if needed
],
schemes: {
supersetColors: { id: 'supersetColors', label: 'Superset Colors',
colors: ['#FF5733', '#33FF57', '#3357FF'] },
// Define your color schemes here
},
isLinear: false,
};
const MyDashboard = () => (
<div>
<ColorSchemeControl {...colorSchemeProps} />
</div>
);
export default MyDashboard;
```
### Using `updateDashboardLabelsColor`
To ensure the color scheme and labels color map are synchronized, use the
`updateDashboardLabelsColor` function. This function updates the dashboard
metadata with the correct color scheme and applies the colors to the labels:
```js
import { updateDashboardLabelsColor } from
'src/dashboard/actions/dashboardState';
const syncColorScheme = async (dispatch, getState) => {
const {
dashboardInfo: { id, metadata },
} = getState();
const categoricalSchemes = getCategoricalSchemeRegistry();
const colorScheme = metadata?.color_scheme;
const colorSchemeRegistry = categoricalSchemes.get(
metadata?.color_scheme,
true,
);
const defaultScheme = categoricalSchemes.defaultKey;
const fallbackScheme = defaultScheme?.toString() || 'supersetColors';
const colorSchemeDomain = metadata?.color_scheme_domain || [];
try {
const updatedMetadata = { ...metadata };
let updatedScheme = metadata?.color_scheme;
if (colorScheme && !colorSchemeRegistry) {
updatedScheme = fallbackScheme;
updatedMetadata.color_scheme = updatedScheme;
updatedMetadata.color_scheme_domain =
getColorSchemeDomain(colorScheme);
dispatch(setColorScheme(updatedScheme));
applyColors(updatedMetadata, true);
}
const isMapSynced = isLabelsColorMapSynced(metadata);
if (!isMapSynced) {
applyColors(updatedMetadata, true);
updatedMetadata.shared_label_colors = getLabelsColorMapEntries();
}
await updateDashboardMetadata(id, updatedMetadata, dispatch);
} catch (error) {
console.error('Error updating dashboard labels color:', error);
}
};
```
By following these steps and utilizing the provided functions, you can
ensure that the color scheme remains consistent across your Superset dashboard,
even with dynamic labels
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/actions/dashboardState.js)</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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
