feat(deck.gl): add color range for deck.gl 3D (#19520)
This commit is contained in:
parent
8a57a71bed
commit
c0a00fd302
|
|
@ -18,10 +18,11 @@
|
|||
*/
|
||||
import { GridLayer } from 'deck.gl';
|
||||
import React from 'react';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, CategoricalColorNamespace } from '@superset-ui/core';
|
||||
|
||||
import { commonLayerProps, getAggFunc } from '../common';
|
||||
import sandboxedEval from '../../utils/sandbox';
|
||||
import { hexToRGB } from '../../utils/colors';
|
||||
import { createDeckGLComponent } from '../../factory';
|
||||
import TooltipRow from '../../TooltipRow';
|
||||
|
||||
|
|
@ -42,11 +43,9 @@ function setTooltipContent(o) {
|
|||
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
const fd = formData;
|
||||
const c = fd.color_picker;
|
||||
let data = payload.data.features.map(d => ({
|
||||
...d,
|
||||
color: [c.r, c.g, c.b, 255 * c.a],
|
||||
}));
|
||||
const colorScale = CategoricalColorNamespace.getScale(fd.color_scheme);
|
||||
const colorRange = colorScale.range().map(color => hexToRGB(color));
|
||||
let data = payload.data.features;
|
||||
|
||||
if (fd.js_data_mutator) {
|
||||
// Applying user defined data mutator if defined
|
||||
|
|
@ -61,9 +60,8 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
|||
data,
|
||||
pickable: true,
|
||||
cellSize: fd.grid_size,
|
||||
minColor: [0, 0, 0, 0],
|
||||
extruded: fd.extruded,
|
||||
maxColor: [c.r, c.g, c.b, 255 * c.a],
|
||||
colorRange,
|
||||
outline: false,
|
||||
getElevationValue: aggFunc,
|
||||
getColorValue: aggFunc,
|
||||
|
|
|
|||
|
|
@ -54,8 +54,10 @@ const config: ControlPanelConfig = {
|
|||
label: t('Map'),
|
||||
controlSetRows: [
|
||||
[mapboxStyle, viewport],
|
||||
['color_picker', autozoom],
|
||||
[gridSize, extruded],
|
||||
['color_scheme'],
|
||||
[autozoom],
|
||||
[gridSize],
|
||||
[extruded],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -18,10 +18,11 @@
|
|||
*/
|
||||
import { HexagonLayer } from 'deck.gl';
|
||||
import React from 'react';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, CategoricalColorNamespace } from '@superset-ui/core';
|
||||
|
||||
import { commonLayerProps, getAggFunc } from '../common';
|
||||
import sandboxedEval from '../../utils/sandbox';
|
||||
import { hexToRGB } from '../../utils/colors';
|
||||
import { createDeckGLComponent } from '../../factory';
|
||||
import TooltipRow from '../../TooltipRow';
|
||||
|
||||
|
|
@ -42,11 +43,9 @@ function setTooltipContent(o) {
|
|||
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
const fd = formData;
|
||||
const c = fd.color_picker;
|
||||
let data = payload.data.features.map(d => ({
|
||||
...d,
|
||||
color: [c.r, c.g, c.b, 255 * c.a],
|
||||
}));
|
||||
const colorScale = CategoricalColorNamespace.getScale(fd.color_scheme);
|
||||
const colorRange = colorScale.range().map(color => hexToRGB(color));
|
||||
let data = payload.data.features;
|
||||
|
||||
if (fd.js_data_mutator) {
|
||||
// Applying user defined data mutator if defined
|
||||
|
|
@ -60,9 +59,8 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
|||
data,
|
||||
pickable: true,
|
||||
radius: fd.grid_size,
|
||||
minColor: [0, 0, 0, 0],
|
||||
extruded: fd.extruded,
|
||||
maxColor: [c.r, c.g, c.b, 255 * c.a],
|
||||
colorRange,
|
||||
outline: false,
|
||||
getElevationValue: aggFunc,
|
||||
getColorValue: aggFunc,
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const config: ControlPanelConfig = {
|
|||
label: t('Map'),
|
||||
controlSetRows: [
|
||||
[mapboxStyle, viewport],
|
||||
['color_picker'],
|
||||
['color_scheme'],
|
||||
[autozoom],
|
||||
[gridSize],
|
||||
[extruded],
|
||||
|
|
|
|||
Loading…
Reference in New Issue