mirror of https://github.com/apache/superset.git
[feat] Add d3 legend formatting for Arc, Polygon and Scatter deck.gl maps (#7951)
* Legend formatting for Arc, Polygon and Scatter * fix typo * refactor from d3-format to superset-ui
This commit is contained in:
parent
2ab8e15ddf
commit
2476814a6a
|
@ -44,6 +44,7 @@ export default {
|
|||
['color_picker', 'target_color_picker'],
|
||||
['dimension', 'color_scheme', 'label_colors'],
|
||||
['stroke_width', 'legend_position'],
|
||||
['legend_format', null],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
@ -52,7 +52,7 @@ export default {
|
|||
['linear_color_scheme', 'opacity'],
|
||||
['num_buckets', 'break_points'],
|
||||
['table_filter', 'toggle_polygons'],
|
||||
['legend_position', null],
|
||||
['legend_position', 'legend_format'],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
@ -62,6 +62,7 @@ export default {
|
|||
label: t('Point Color'),
|
||||
controlSetRows: [
|
||||
['color_picker', 'legend_position'],
|
||||
[null, 'legend_format'],
|
||||
['dimension', 'color_scheme', 'label_colors'],
|
||||
],
|
||||
},
|
||||
|
|
|
@ -305,6 +305,16 @@ export const controls = {
|
|||
renderTrigger: true,
|
||||
},
|
||||
|
||||
legend_format: {
|
||||
label: t('Legend Format'),
|
||||
description: t('Choose the format for legend values'),
|
||||
type: 'SelectControl',
|
||||
clearable: false,
|
||||
default: D3_FORMAT_OPTIONS[0],
|
||||
choices: D3_FORMAT_OPTIONS,
|
||||
renderTrigger: true,
|
||||
},
|
||||
|
||||
fill_color_picker: {
|
||||
label: t('Fill Color'),
|
||||
description: t(' Set the opacity to 0 if you do not want to override the color specified in the GeoJSON'),
|
||||
|
|
|
@ -18,13 +18,17 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { formatNumber } from '@superset-ui/number-format';
|
||||
|
||||
import './Legend.css';
|
||||
|
||||
const categoryDelimiter = ' - ';
|
||||
|
||||
const propTypes = {
|
||||
categories: PropTypes.object,
|
||||
toggleCategory: PropTypes.func,
|
||||
showSingleCategory: PropTypes.func,
|
||||
format: PropTypes.string,
|
||||
position: PropTypes.oneOf([null, 'tl', 'tr', 'bl', 'br']),
|
||||
};
|
||||
|
||||
|
@ -32,10 +36,34 @@ const defaultProps = {
|
|||
categories: {},
|
||||
toggleCategory: () => {},
|
||||
showSingleCategory: () => {},
|
||||
format: null,
|
||||
position: 'tr',
|
||||
};
|
||||
|
||||
export default class Legend extends React.PureComponent {
|
||||
format(value) {
|
||||
if (!this.props.format) {
|
||||
return value;
|
||||
}
|
||||
|
||||
const numValue = parseFloat(value);
|
||||
return formatNumber(this.props.format, numValue);
|
||||
|
||||
}
|
||||
|
||||
formatCategoryLabel(k) {
|
||||
if (!this.props.format) {
|
||||
return k;
|
||||
}
|
||||
|
||||
if (k.includes(categoryDelimiter)) {
|
||||
const values = k.split(categoryDelimiter);
|
||||
return this.format(values[0]) + categoryDelimiter + this.format(values[1]);
|
||||
}
|
||||
|
||||
return this.format(k);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (Object.keys(this.props.categories).length === 0 || this.props.position === null) {
|
||||
return null;
|
||||
|
@ -51,7 +79,7 @@ export default class Legend extends React.PureComponent {
|
|||
onClick={() => this.props.toggleCategory(k)}
|
||||
onDoubleClick={() => this.props.showSingleCategory(k)}
|
||||
>
|
||||
<span style={style}>{icon}</span> {k}
|
||||
<span style={style}>{icon}</span> {this.formatCategoryLabel(k)}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
|
|
|
@ -237,6 +237,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
|||
toggleCategory={this.toggleCategory}
|
||||
showSingleCategory={this.showSingleCategory}
|
||||
position={this.props.formData.legend_position}
|
||||
format={this.props.formData.legend_format}
|
||||
/>
|
||||
</AnimatableDeckGLContainer>
|
||||
</div>
|
||||
|
|
|
@ -274,6 +274,7 @@ class DeckGLPolygon extends React.Component {
|
|||
<Legend
|
||||
categories={buckets}
|
||||
position={formData.legend_position}
|
||||
format={formData.legend_format}
|
||||
/>}
|
||||
</AnimatableDeckGLContainer>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue