feat(deck.gl): add color range for deck.gl 3D (#19520)

This commit is contained in:
Stephen Liu 2022-07-04 11:54:04 +08:00 committed by GitHub
parent 8a57a71bed
commit c0a00fd302
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 19 deletions

View File

@ -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,

View File

@ -54,8 +54,10 @@ const config: ControlPanelConfig = {
label: t('Map'),
controlSetRows: [
[mapboxStyle, viewport],
['color_picker', autozoom],
[gridSize, extruded],
['color_scheme'],
[autozoom],
[gridSize],
[extruded],
],
},
{

View File

@ -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,

View File

@ -55,7 +55,7 @@ const config: ControlPanelConfig = {
label: t('Map'),
controlSetRows: [
[mapboxStyle, viewport],
['color_picker'],
['color_scheme'],
[autozoom],
[gridSize],
[extruded],