GitHub user dosubot[bot] added a comment to the discussion: Not work Color(fill
color) the polygons in graphicseck.gl Polygons
<!-- Greeting -->
Hey @sonfire186! I'm here to help you with any issues you're facing. I'm a bot
designed to assist with bug fixes, answer questions, and guide you on becoming
a contributor. Let's tackle this together!
<!-- Answer -->
To color the polygons in `graphicseck.gl` using your own colors, you need to
ensure that the `hexToRGB` function is correctly converting the hex color to an
RGB array and that the resulting color is properly applied to the polygons.
Here is how you can do it:
1. **Ensure the `hexToRGB` function is correctly imported and used:**
```javascript
import { hexToRGB } from './utils/colors'; // Adjust the import path as
necessary
data => data.map(d => ({
...d,
color: hexToRGB(d.extraProps.zone_index_color)
}));
```
2. **Apply the resulting RGB color to the polygons:**
Make sure that the `color` property is used correctly in the layer
configuration. Here is an example of how you might configure the `PolygonLayer`:
```javascript
const polygonLayer = new PolygonLayer({
id: 'polygon-layer',
data: yourPolygonData,
getPolygon: d => d.polygon, // Adjust this to match your data structure
getFillColor: d => d.color, // Use the color property from your data
// other layer properties
});
```
3. **Example of the complete setup:**
```javascript
import { hexToRGB } from './utils/colors'; // Adjust the import path as
necessary
import { PolygonLayer } from '@deck.gl/layers';
const yourPolygonData = data.map(d => ({
...d,
color: hexToRGB(d.extraProps.zone_index_color)
}));
const polygonLayer = new PolygonLayer({
id: 'polygon-layer',
data: yourPolygonData,
getPolygon: d => d.polygon, // Adjust this to match your data structure
getFillColor: d => d.color, // Use the color property from your data
// other layer properties
});
// Add the layer to your DeckGL instance
```
Ensure that the `hexToRGB` function is correctly converting the hex color to an
RGB array. Here is the implementation of the `hexToRGB` function:
```ts
import { rgb } from 'd3-color';
export function hexToRGB(
hex: string | undefined,
alpha = 255,
): [number, number, number, number] {
if (!hex) {
return [0, 0, 0, alpha];
}
const { r, g, b } = rgb(hex);
return [r, g, b, alpha];
}
```
This function handles both 3-digit and 6-digit hex codes and returns an array
with the RGB values and the alpha channel
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/colors.ts)</sup>.
By following these steps, you should be able to color the polygons in
`graphicseck.gl` with your own colors.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
GitHub link:
https://github.com/apache/superset/discussions/32910#discussioncomment-12665540
----
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]
