Incubator-superset: How to change Big Number CSS to be like that?

[syazwan0913]

How to configure to make big number like that?
Example:

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label #question to this issue, with a confidence of 0.73. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[timurista]

@syazwan0913 you'll probably have to add your own component for this. Superset abstracts the common components to their plugins and exposes them as individual packages. https://github.com/apache-superset/superset-ui-plugins/blob/master/packages/.
If you take a look at the big number chart imported via the MainPresets.js file. You will find it does use a mainColor variable (ie the colorPicker) in the linear gradient.

The source code is pretty straightforward if you want to read it here: https://github.com/apache-superset/superset-ui-plugins/blob/484d63993b81d593183f1f1a2b8f9d91aeef310f/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx#L207

As you can see it's tightly coupled with the AreaSeries chart from @data-ui/xy-chart. You might want a new component or a new render section here that just takes a bg image. Probably making an issue request / PR and seeing if you can add it to the ui-plugins would be best.

I'd like that feature too :)

[syazwan0913]

@timurista i see. thanks for your guide.

[rusackas]

@syazwan0913 You could, in theory, do this with CSS. When you "Edit Dashboard" there's an option to add CSS. If the number and sequence of these Big Number components on your dashboard is static, you can use CSS nth-of-type trickery. I made a quick example to illustrate the case:

Syles applied here are as follows.

1) Set the background color of each instance.

.superset-legacy-chart-big-number:nth-of-type(1){
    background: orange;
}

2) Put the subheader where you want it (you can set the width so it wraps, etc.)

.superset-legacy-chart-big-number .subheader-line {
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

3) Add a CSS pseudo element, and give it the icon you want as a background.

.superset-legacy-chart-big-number:nth-of-type(1)::after {
    content: '';
    display: block;
    height: 60px;
    width: 60px;
    background: url(https://image.flaticon.com/icons/png/512/121/121901.png);
    background-size: contain;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

That's super hacky, but might get you the result you want without having to make new components.

[syazwan0913]

@rusackas That is great. I will try it out. Thanks

[muneneg]

@rusackas What version of superset do you have installed?, I have tried this hack on v.0.28.1 and did not work.
Thanks

[rusackas]

@rusackas What version of superset do you have installed?, I have tried this hack on v.0.28.1 and did not work.
Thanks

I'm not sure what I was running at the time, but I usually run the latest code on master. Not sure where you added the CSS, but just for clarity, do the following (which I did on the example Baby Names dashboard, which contains a "Big Number with Trendline" component. This works on either Big Number variant):

1. click "Edit Dashboard"
2. click the dropdown arrow at the far right next to "Switch to view mode", and select "Edit CSS" from the dropdown menu.
3. Paste in this block of CSS:

.superset-legacy-chart-big-number:nth-of-type(1){
    background: orange;
}
.superset-legacy-chart-big-number .subheader-line {
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.superset-legacy-chart-big-number:nth-of-type(1)::after {
    content: '';
    display: block;
    height: 60px;
    width: 60px;
    background: url(https://image.flaticon.com/icons/png/512/121/121901.png);
    background-size: contain;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

1. You should see the result instantly, but you can close the modal/overlay, and click "Switch to view mode" to finish editing.

The result should look like so:

[muneneg]

@rusackas Thanks, finally after upgrading to a new release, I was able to create this. My issue is it changes the background and image for all big number charts in the dashboard. How do I make my big number components to be static. Thanks

[rusackas]

Without getting into TOO much detail, if you want to get specific about which charts you want to apply the styles too, you'll have to play with nth-of-type selectors, to select the Nth chart in the Nth column of the Nth row, if you follow my drift. This will lead to some hackiness/fragility, but technically, it is at least possible.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.

[B-Cheye]

@muneneg Another hacky way I found out is using the chart-id

#chart-id-225{background: green;}
     #chart-id-226{background: orange;}
      #chart-id-227{background: red;}

The chart-id can be found when you click on the chart details

[stevensuting]

@B-Cheye How did you manage to make the entire box coloured. With the above CSS you have shared only the chart area will get coloured but not the dashboard-component. Using your code above results in the image shown.

[B-Cheye]

@stevensuting If you want the whole dashboard-component color to change then you will need to target the whole dashboard div

[stevensuting]

@B-Cheye How do you do that when this is how the CSS is ordered?

Could you share your CSS snippet?

[rusackas]

@stevensuting it looks like @B-Cheye 's solution references the id attribute on the same line I'd annotated with "But it's here..." in the screenshot. So I don't think it is coloring the entire chart wrapper on the dash, but just the chart area itself. You _could_ get hacky with nth-child/nth-of-type CSS selectors on the dashboard to color the whole wrapper, if your layout is fairly stable.