mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix(scatter): fix legend and labels (#43)
This commit is contained in:
parent
55b3c7933d
commit
c3e5edf7cf
@ -58,16 +58,17 @@ function getCategories(fd, data) {
|
||||
}
|
||||
|
||||
const propTypes = {
|
||||
datasource: PropTypes.object.isRequired,
|
||||
formData: PropTypes.object.isRequired,
|
||||
mapboxApiKey: PropTypes.string.isRequired,
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
getLayer: PropTypes.func.isRequired,
|
||||
getPoints: PropTypes.func.isRequired,
|
||||
payload: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
mapboxApiKey: PropTypes.string.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
payload: PropTypes.object.isRequired,
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
width: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
@ -179,7 +180,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
data: { ...payload.data, features },
|
||||
};
|
||||
|
||||
return [getLayer(fd, filteredPayload, onAddFilter, this.setTooltip)];
|
||||
return [getLayer(fd, filteredPayload, onAddFilter, this.setTooltip, this.props.datasource)];
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
@ -255,11 +256,12 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
height={this.props.height}
|
||||
>
|
||||
<Legend
|
||||
forceCategorical
|
||||
categories={this.state.categories}
|
||||
toggleCategory={this.toggleCategory}
|
||||
showSingleCategory={this.showSingleCategory}
|
||||
position={this.props.formData.legend_position}
|
||||
format={this.props.formData.legend_format}
|
||||
position={this.props.formData.legend_position}
|
||||
showSingleCategory={this.showSingleCategory}
|
||||
toggleCategory={this.toggleCategory}
|
||||
/>
|
||||
</AnimatableDeckGLContainer>
|
||||
</div>
|
||||
|
@ -29,23 +29,25 @@ const categoryDelimiter = ' - ';
|
||||
|
||||
const propTypes = {
|
||||
categories: PropTypes.object,
|
||||
toggleCategory: PropTypes.func,
|
||||
showSingleCategory: PropTypes.func,
|
||||
forceCategorical: PropTypes.bool,
|
||||
format: PropTypes.string,
|
||||
position: PropTypes.oneOf([null, 'tl', 'tr', 'bl', 'br']),
|
||||
showSingleCategory: PropTypes.func,
|
||||
toggleCategory: PropTypes.func,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
categories: {},
|
||||
toggleCategory: () => {},
|
||||
showSingleCategory: () => {},
|
||||
forceCategorical: false,
|
||||
format: null,
|
||||
position: 'tr',
|
||||
showSingleCategory: () => {},
|
||||
toggleCategory: () => {},
|
||||
};
|
||||
|
||||
export default class Legend extends React.PureComponent {
|
||||
format(value) {
|
||||
if (!this.props.format) {
|
||||
if (!this.props.format || this.props.forceCategorical) {
|
||||
return value;
|
||||
}
|
||||
|
||||
|
@ -30,13 +30,14 @@ import CategoricalDeckGLContainer from './CategoricalDeckGLContainer';
|
||||
import fitViewport from './utils/fitViewport';
|
||||
|
||||
const propTypes = {
|
||||
datasource: PropTypes.object.isRequired,
|
||||
formData: PropTypes.object.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
payload: PropTypes.object.isRequired,
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
@ -120,10 +121,11 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
||||
|
||||
export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
||||
function Component(props) {
|
||||
const { formData, payload, setControlValue, viewport, width, height } = props;
|
||||
const { datasource, formData, height, payload, setControlValue, viewport, width } = props;
|
||||
|
||||
return (
|
||||
<CategoricalDeckGLContainer
|
||||
datasource={datasource}
|
||||
formData={formData}
|
||||
mapboxApiKey={payload.data.mapboxApiKey}
|
||||
setControlValue={setControlValue}
|
||||
|
@ -18,7 +18,7 @@
|
||||
*/
|
||||
import { ScatterplotLayer } from 'deck.gl';
|
||||
import React from 'react';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { getMetricLabel, t } from '@superset-ui/core';
|
||||
import { commonLayerProps } from '../common';
|
||||
import { createCategoricalDeckGLComponent } from '../../factory';
|
||||
import TooltipRow from '../../TooltipRow';
|
||||
@ -28,8 +28,12 @@ function getPoints(data) {
|
||||
return data.map(d => d.position);
|
||||
}
|
||||
|
||||
function setTooltipContent(formData) {
|
||||
return o => (
|
||||
function setTooltipContent(formData, verboseMap) {
|
||||
return o => {
|
||||
const label =
|
||||
verboseMap?.[formData.point_radius_fixed.value] ||
|
||||
getMetricLabel(formData.point_radius_fixed?.value);
|
||||
return (
|
||||
<div className="deckgl-tooltip">
|
||||
<TooltipRow
|
||||
label={`${t('Longitude and Latitude')}: `}
|
||||
@ -38,17 +42,13 @@ function setTooltipContent(formData) {
|
||||
{o.object.cat_color && (
|
||||
<TooltipRow label={`${t('Category')}: `} value={`${o.object.cat_color}`} />
|
||||
)}
|
||||
{o.object.metric && (
|
||||
<TooltipRow
|
||||
label={`${formData.point_radius_fixed.value.label}: `}
|
||||
value={`${o.object.metric}`}
|
||||
/>
|
||||
)}
|
||||
{o.object.metric && <TooltipRow label={`${label}: `} value={`${o.object.metric}`} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip, datasource) {
|
||||
const fd = formData;
|
||||
const dataWithRadius = payload.data.features.map(d => {
|
||||
let radius = unitToRadius(fd.point_unit, d.radius) || 10;
|
||||
@ -73,7 +73,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
radiusMinPixels: fd.min_radius || null,
|
||||
radiusMaxPixels: fd.max_radius || null,
|
||||
stroked: false,
|
||||
...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
|
||||
...commonLayerProps(fd, setTooltip, setTooltipContent(fd, datasource?.verboseMap)),
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -66,8 +66,8 @@ export default {
|
||||
{
|
||||
label: t('Point Size'),
|
||||
controlSetRows: [
|
||||
[pointRadiusFixed],
|
||||
[
|
||||
pointRadiusFixed,
|
||||
{
|
||||
name: 'point_unit',
|
||||
config: {
|
||||
@ -125,17 +125,17 @@ export default {
|
||||
{
|
||||
label: t('Point Color'),
|
||||
controlSetRows: [
|
||||
['color_picker', legendPosition],
|
||||
[null, legendFormat],
|
||||
['color_picker'],
|
||||
[legendPosition],
|
||||
[legendFormat],
|
||||
[
|
||||
{
|
||||
...dimension,
|
||||
label: t('Categorical Color'),
|
||||
description: t('Pick a dimension from which categorical colors are defined'),
|
||||
},
|
||||
'color_scheme',
|
||||
'label_colors',
|
||||
],
|
||||
['color_scheme'],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
@ -19,10 +19,11 @@
|
||||
const NOOP = () => {};
|
||||
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, rawFormData, queriesData, hooks } = chartProps;
|
||||
const { datasource, height, hooks, queriesData, rawFormData, width } = chartProps;
|
||||
const { onAddFilter = NOOP, setControlValue = NOOP } = hooks;
|
||||
|
||||
return {
|
||||
datasource,
|
||||
formData: rawFormData,
|
||||
height,
|
||||
onAddFilter,
|
||||
|
Loading…
Reference in New Issue
Block a user