Idiot's guide to modifying visualisations

Is there a guide out there for modifying the default visualisations?
I’m stuck with the table widget - just too much white space, no colour options etc etc (it’s really not fit for purpose)

I’ve checked on github, but most of the planned changes have very little to do with the visualisations.

What do I need to edit? I’m happy in Java, CSS and SQL, just need to be directed to the file(s).

1 Like

I think the GitHub issue #2318 linked to in this post has some pretty clear steps if you want to build a new viz from the ground up:

If you’re going to either modify visualizations or build them from scratch I guess you also need some java-script (in particular React) skills, then for other types of graphics d3.js or dc.js understanding as those are libraries Metabase already build on.


If you OTOH are asking specifically about tweaking the styling of the table widget I guess a GitHub pointer would be to look for files called Table<something> in
https://github.com/metabase/metabase/tree/master/frontend/src/metabase/visualizations/components

Maybe also https://github.com/metabase/metabase/pull/4977/files which got merged in May points to useful files - and reasoning/links to what the Metabase dev team are thinking in this area.

Regarding color options specifically for the table component there is this issue that i personally would love to see implemented! Is that eventually something you are looking to tackle?:

It’s not that the Metabase project is lacking any feature requests labeled Visualization/Chart Settings though. Here’s the list of issues sorted by number of :+1: votes: https://github.com/metabase/metabase/issues?q=is%3Aopen+label%3A"Visualization%2FChart+Settings"+sort%3Areactions-%2B1-desc

Update: phew, overlooked issues marked Visualization, thankfully the two lists has some overlap

But I guess it’s easy for people to raise issues, much harder to actually find time to (help) implement stuff.

What are your top pet issues in that list? Maybe there’s common ground for a few idiots :wink: to help each other with actually getting to a point with building stuff?

Hope (some of this) was what you were looking for? :slight_smile: I’d be happy to continue the dialogue

@AndrewMBaines could you go into more specific detail about what sorts of things are bothering you about the table visualization type, and what you’re trying to accomplish?

@jornh Thanks for the heads-up, I’ll take a look at those later today. My javascript framework skills are probably lacking, but will help to know where to look.

@maz I’m converting an existing Silverlight page for a customer. The existing page has 2 tables, one above the other. On a screen 1080 high, you get 26 rows in total with a font size of about 12pt.Lines are colour-coded based upon the value in 1 column.
In Metabase, font size looks about 11pt, but I only get 14 or 15 rows depending upon the screen width (same height as before). There’s no colour coding and vast amounts of white space.
Even when I switch to full screen to lose the headers, I’m only getting 20 rows and that depends upon the screen width as the resize is different between wide and regular monitors.

I don’t think I’m asking for anything that hasn’t been asked before, it’s just I want it now (!) and probably have most of the skills to hack something together for my customer.
Ideally, I’d like to copy the existing table (make TablePlus), strip out the space in the table (css?) . For the colour coding, I’d just add something in my database view to return a colour and hard code so that if there’s a colour column use that to specifiy the colour for each row.
I’m also wondering if embedding the dashboard in a web page would allow me to override the CSS in the table.
I realise this is very specific to my situation, so not necessarily something to be added to the main product.

For the record, I’m a BI Consultant mostly working with SAP BI (Crystal, Xcelsius/Dashboards & WebI) and Qlikview. A lot of my work is on the server side, but I also do a lot with Crystal and Xcelsius/Dashboard design. Most of my database stuff is SQL Server. Most of my development work is C#, but I have done bits with JAva. I’ve avoided Javascript libraries as there seem to be so many and they’re here one day, gone the next. Comfortable working with ‘regular’ JavaScript though.
My interest in Metabase is due to Xcelsius/Dashboards being Flash based and end of life. SAP are still monkeying around with licensing for SAP Lumira.

Just showed my work to date to my customer - he’s very pleased and has asked for some more work to be done.

However (!), I really did mean idiot’s guide. I’ve retrieved the source code from GitHub (a first for me) and loaded it in NetBeans (another first). I’m used to the cuddly embrace of Visual Studio, so this is all looking like hard work at the moment.

I’ve found the relevant css. I can’t edit it in the released code as the dynamic way the css is generated scatters stuff all over the place, so changing one setting involves editing many, many bits of css. I can’t edit the source as I’ve no idea how to recompile.

I realise this is outside the scope of this forum, but can you vaguely point me in the direction of how to compile the code? I’m 100% Windows as you’ve probably detected by now.

I don’t think so …

… gradually over the past few months I’ve gone through similar-ish pains, and am on Windows as well. Happy to try and see if I can talk you through it … when you stumble over something it’s quite possible I’ve been stumbling over the same.

If you haven’t found it already your starting point is this:

I took the route with WSL as well. Never got it fully working with Windows paths etc. on the Javascript/frontend part. It’s possible the situation on that improved recently - I never really went back to it. So if you’re up for some more command line discomfort go with WSL :smiley: (Provided that you have Win 10 - pro/enterprise - I recently found it wasn’t available on the Home edition).

Update: I just tried again to do a Windows build without relying on WSL/Ubuntu. The situation has improved I think somewhere between v0.26 and v0.27. So it’s now possible to successfully build the frontend with yarn run build. That part previously had some hiccups on some Unix path stuff in the webpack config file if my memory serves me right.

Let me know if/when you stumble - and an outcome of this could be “the Windows Idiot’s margin notes to the guide above” …

Thanks for the info, Andrew. Sounds like the two helpful things for you would be:

  • A way to make the table view super compact/dense
  • Conditional table color formatting
1 Like

I’ve half given up on the Windows idea. Probably about time I learnt a bit about Linux.
Right now, after 2 hours I feel as though I’ve seen the worst of both Windows and Linux - I’m trying to install on both.
Windows hasn’t finished installing updates and I’ve immediately had to use Terminal in Linux as the rest of the OS has no functionality beyond user applications…