![]() It is used to define different dimensions and values used for loading Vizes into the page (and adjusting their iframes) at the right size / ratio. The very first thing in the library is a data structure called ratioBreakpoints. Let’s walk through how it works: ratioBreakpoints When it’s all set up right, the process above happens on the first load of the Viz and also any time the user resizes the page in a way that changes the available space ratio enough. Scale the Viz to fit the actual available space using the CSS transform / scale properties.Load the Viz using a height and width of the best matching ratio.Find the Ratio that will best fit the shape of the space available for the Tableau Viz.The basic process the library goes through is: You will still need to design the Dashboards appropriately in Tableau Desktop, using Device Designer in a specific and targeted way – more on that below. ![]() The library handles everything around the HTML / CSS / JS side of making your Tableau Viz objects behave responsively within the page. On GitHub, there is a file called responsive_scaling_tableau.js (this file, or a very slight variant of it, is what is used on ). There’s a whole article down below explaining the how and why, but you probably just want to get things moving, so I’ll start with the end in mind. The Code Library – responsive_scaling_tableau.js Now let’s dig into how to make all of this happen. Use break-point detection to reload the Tableau Viz using a different Device Layout once the available space would be better served by a Viz in different proportions.Use CSS3 transform-scale to maximize the fit of the chosen Device Layout to the available space on the page.Use CSS / JavaScript to detect the proportions of the area allocated for the Tableau Viz, then manually control which Tableau Dashboard Device Layout is loaded. ![]()
0 Comments
Leave a Reply. |