mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
[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'],
|
['color_picker', 'target_color_picker'],
|
||||||
['dimension', 'color_scheme', 'label_colors'],
|
['dimension', 'color_scheme', 'label_colors'],
|
||||||
['stroke_width', 'legend_position'],
|
['stroke_width', 'legend_position'],
|
||||||
|
['legend_format', null],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -52,7 +52,7 @@ export default {
|
|||||||
['linear_color_scheme', 'opacity'],
|
['linear_color_scheme', 'opacity'],
|
||||||
['num_buckets', 'break_points'],
|
['num_buckets', 'break_points'],
|
||||||
['table_filter', 'toggle_polygons'],
|
['table_filter', 'toggle_polygons'],
|
||||||
['legend_position', null],
|
['legend_position', 'legend_format'],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -62,6 +62,7 @@ export default {
|
|||||||
label: t('Point Color'),
|
label: t('Point Color'),
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
['color_picker', 'legend_position'],
|
['color_picker', 'legend_position'],
|
||||||
|
[null, 'legend_format'],
|
||||||
['dimension', 'color_scheme', 'label_colors'],
|
['dimension', 'color_scheme', 'label_colors'],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -305,6 +305,16 @@ export const controls = {
|
|||||||
renderTrigger: true,
|
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: {
|
fill_color_picker: {
|
||||||
label: t('Fill Color'),
|
label: t('Fill Color'),
|
||||||
description: t(' Set the opacity to 0 if you do not want to override the color specified in the GeoJSON'),
|
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 React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { formatNumber } from '@superset-ui/number-format';
|
||||||
|
|
||||||
import './Legend.css';
|
import './Legend.css';
|
||||||
|
|
||||||
|
const categoryDelimiter = ' - ';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
categories: PropTypes.object,
|
categories: PropTypes.object,
|
||||||
toggleCategory: PropTypes.func,
|
toggleCategory: PropTypes.func,
|
||||||
showSingleCategory: PropTypes.func,
|
showSingleCategory: PropTypes.func,
|
||||||
|
format: PropTypes.string,
|
||||||
position: PropTypes.oneOf([null, 'tl', 'tr', 'bl', 'br']),
|
position: PropTypes.oneOf([null, 'tl', 'tr', 'bl', 'br']),
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -32,10 +36,34 @@ const defaultProps = {
|
|||||||
categories: {},
|
categories: {},
|
||||||
toggleCategory: () => {},
|
toggleCategory: () => {},
|
||||||
showSingleCategory: () => {},
|
showSingleCategory: () => {},
|
||||||
|
format: null,
|
||||||
position: 'tr',
|
position: 'tr',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class Legend extends React.PureComponent {
|
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() {
|
render() {
|
||||||
if (Object.keys(this.props.categories).length === 0 || this.props.position === null) {
|
if (Object.keys(this.props.categories).length === 0 || this.props.position === null) {
|
||||||
return null;
|
return null;
|
||||||
@ -51,7 +79,7 @@ export default class Legend extends React.PureComponent {
|
|||||||
onClick={() => this.props.toggleCategory(k)}
|
onClick={() => this.props.toggleCategory(k)}
|
||||||
onDoubleClick={() => this.props.showSingleCategory(k)}
|
onDoubleClick={() => this.props.showSingleCategory(k)}
|
||||||
>
|
>
|
||||||
<span style={style}>{icon}</span> {k}
|
<span style={style}>{icon}</span> {this.formatCategoryLabel(k)}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
@ -237,6 +237,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
|||||||
toggleCategory={this.toggleCategory}
|
toggleCategory={this.toggleCategory}
|
||||||
showSingleCategory={this.showSingleCategory}
|
showSingleCategory={this.showSingleCategory}
|
||||||
position={this.props.formData.legend_position}
|
position={this.props.formData.legend_position}
|
||||||
|
format={this.props.formData.legend_format}
|
||||||
/>
|
/>
|
||||||
</AnimatableDeckGLContainer>
|
</AnimatableDeckGLContainer>
|
||||||
</div>
|
</div>
|
||||||
|
@ -274,6 +274,7 @@ class DeckGLPolygon extends React.Component {
|
|||||||
<Legend
|
<Legend
|
||||||
categories={buckets}
|
categories={buckets}
|
||||||
position={formData.legend_position}
|
position={formData.legend_position}
|
||||||
|
format={formData.legend_format}
|
||||||
/>}
|
/>}
|
||||||
</AnimatableDeckGLContainer>
|
</AnimatableDeckGLContainer>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user