Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow users to select color for big number #5694

Merged
merged 8 commits into from
Aug 22, 2018
Merged

Allow users to select color for big number #5694

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7b7285c
allow user to choose color
hughhhh Aug 22, 2018
b6283e1
add color control
hughhhh Aug 22, 2018
23a07ab
remove rgbToHex reference
hughhhh Aug 22, 2018
3a661a7
change to color picker control
hughhhh Aug 22, 2018
d067cee
add d3-color
hughhhh Aug 22, 2018
f7d5fdb
remove module
hughhhh Aug 22, 2018
1b3204b
use d3-colors
hughhhh Aug 22, 2018
4eb7eb5
add semicolon
hughhhh Aug 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions superset/assets/src/explore/visTypes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1247,6 +1247,7 @@ export const visTypes = {
['compare_lag', 'compare_suffix'],
['y_axis_format', null],
['show_trend_line', 'start_y_axis_at_zero'],
['color', null],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was surprised to see that color isn't renderTrigger: true, looks like color isn't used anywhere, but color_picker is and behaves as expected.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it has the right default of brandPrimary too.

],
},
],
Expand Down
9 changes: 9 additions & 0 deletions superset/assets/src/modules/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,3 +593,12 @@ export function hexToRGB(hex, alpha = 255) {
const b = parseInt(hex.slice(5, 7), 16);
return [r, g, b, alpha];
}


export const rgbToHex = function (color) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you meant to use rgbToHex in BigNumber.jsx

console.log(color);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can use d3-color instead of writing a new module

return (color && Object.keys(color).length === 4) ?
'#' + ('0' + parseInt(color.r, 10).toString(16)).slice(-2) +
('0' + parseInt(color.g, 10).toString(16)).slice(-2) +
('0' + parseInt(color.b, 10).toString(16)).slice(-2) : '';
};
7 changes: 6 additions & 1 deletion superset/assets/src/visualizations/BigNumber.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,11 @@ function adaptor(slice, payload) {
const formatValue = d3FormatPreset(formData.y_axis_format);
const bigNumber = supportTrendline ? data[data.length - 1][1] : data[0][0];

const { color } = formData;
const userColor = '#' + ('0' + parseInt(color.r, 10).toString(16)).slice(-2) +
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the function in colors.js

('0' + parseInt(color.g, 10).toString(16)).slice(-2) +
('0' + parseInt(color.b, 10).toString(16)).slice(-2);

let percentChange = 0;
let formattedSubheader = subheader;

Expand Down Expand Up @@ -271,7 +276,7 @@ function adaptor(slice, payload) {
showTrendline={showTrendline}
startYAxisAtZero={startYAxisAtZero}
trendlineData={trendlineData}
mainColor={brandColor}
mainColor={userColor}
gradientId={`big_number_${containerId}`}
renderTooltip={renderTooltipFactory(formatValue)}
/>,
Expand Down