I would like to get a Google Visualization table responsive on mobile devices.
At the moment there is just a tbody and only <tr>.
Is there any parameter that can add a thead and <th> into the code?
For example there are these parameters:
gvisAreaChart(perfChart,
options=list(
width = 1000,
height=400,
backgroundColor=backgroundColour
)
)
Is there one to get the thead and <th> in it?
Or another solution to get the headline of the Google Visualization Table separated from the rest of the table to make it responsive?
Related
(Data Studio Report - Single source of data: GAnalytics)
A website has, say:
200 pages receiving views.
66 pages receiving all entrances, all sources (Landing Pages).
In data studio, I've created scorecards for both of the above stats.
I now want to create a pie which visually expresses the KPI: "30% of pages are landing pages".
I'm relatively new to Data Studio and think I'm struggling with dimensions v metrics.
As a Scorecard...
I've been able to achieve this as a scorecard (and it was correct), so here's the solution I found:
Create a calculated field with the formula:
COUNT_DISTINCT(Landing Page) / COUNT_DISTINCT(Page)
Add this new calculated metric to a scorecard metric slot, it'll automatically chose percentage to express the result.
Note: The above is using a single data source: Google Analytics (GA).
*** I'll update re the pie chart....
(I've not achieved this with Blended Data - my next quest)
I wish to make stacked responsive tables with React. To avoid horizontal scrolling in a small screen, each row is displayed as mini-tables; please see included images.
For my use case, content in td (and maybe th) tags may be string, number or rich nodes.
I want to implement the same in React, since no library exists yet for this. What is a good approach?
I have examined two approaches.
First one is Javascript-based, like jQuery-based StackTable, from where I included the images. It turns the table into a table+card tables combination, and then uses provided media query to show either the table or card table. The cardtable function traverses the table and generates two-column key value tables from each row.
This seems easy in react: render the table and card table and use media query to show either one. But is rendering same node (as opposed to strings) at multiple places safe? A Every th element will be rendered for actual table header and for every single row.
Second one uses pure CSS, such as this one from CSS Tricks.
/* if media query */
table, thead, tbody, th, td, tr {
display: block;
}
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
The "content" thing seems iffy though, we have to maintain a copy-paste atrocity of contents in an otherwise DRY codebase. But I hope this will be easier with React.
Example of a stacked responsive table:
Full table:
Responsive:
The only React-specific thing I can think of here is that if you want separate some part of code (several elements in JSX) to another component, you also have to wrap it in a separate DOM element, which is especially problematic in environments like tables. (You can see my approach to this problem here.)
Note that when creating a React library, you have one more decision to make: how do you handle your CSS. Some people like having CSS directly in JS, some others don't. (My experience is that it's better to still separate these two, because if you have CSS in JS, you can't use, for example, media queries!).
Other than that, I think, your task is just like implementing responsiveness in any other scenario, with any other framework or library. You'll get the same advantages and drawbacks from these approaches as you would get anywhere else. In general, media queries are handled by browser, which means that your stuff will automatically change layout when you resize the browser (or rotate the phone). On the other hand, in JS you can look at the space available for the component (note that in CSS, you have only the viewport size) and this can give you the opportunity to easily embed these tables also in narrow columns of desktop sites.
I have an app I am working to re-create in angular. One section is a list of items that currently has 140 different items. Each item has a table with 1-4 rows, and differing numbers of columns (usually 6-20).
The way the information works, we really need to show all the items to start. However, the processing time to render the tables using ng-repeat, as well as the massively exponential number of scopes is prohibitive, especially since some users will have older computers (although likely running FF or Chrome, so I'm not worried about IE issues).
I have all the data locally in a json array, and I can format it as needed. Of course, there is filtering, so things will be shown/hidden all over. But the data in the tables is one time bound, and doesn't change.
I'd really prefer to make this something that is in a template. I could either loop it in a javascript array, or create the table data myself that way. However, in angular, templates are not allowed to have logic, so I can't do that.
I'd prefer to do everything rendering client side for speed, so I'd prefer not to have to call up the server to render it.
I could also pre-render it in the json, and use sanitize I believe, but that seems back door and against the separation of interests which is core to angular.
What would be the best practices in this case? I think I've tried about everything, and nothing within angular seems perfomant enough for this case. I'd prefer not to have to use paging, since the users would want to scroll multiple filtered long lists. Any suggestions?
Edit: Now with some sample code:
<table id="{{::item.name}}}" class="table table-striped table-bordered table-hover table-condensed table-responsive text-center" >
<thead>
<tr>
<td ng-repeat="header in ::item.tableHeader">{{::header}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="diff in ::item.tableInfo track by $index">
<td ng-repeat="cell in ::diff track by $index">{{::cell}}</td>
</tr>
</tbody>
</table>
I used arrays because the order matters, and objects don't always follow the order. Again, with over 140 items, 1-4 rows with 10-20 columns, the scopes become quite costly.
I have a simple Angular-JS page that uses tr-ng-grid tag
<div ng-controller="TableDataCtrl">
<div id="tableview_element">
<table tr-ng-grid="" items="data"
ng-show="data_available()">
</table>
</div>
{{str_data}}
</div>
Whenever user clicks on a link, the application should display a different table. The controller is able to obtain the JSON data from the server using HTML get. 'str_data' is stringified form of the JSON data. That seems correct always.
But the tr-ng-grid does not ever update the table's schema. It seems to lock on to the very first table that is displayed with it. The whole table may be hidden or displayed using ng-show(), but then the column headings don't get modified to that of the newly loaded table.
To be very clear: Say you have two tables, birds and mammals. If the first table is a list of all birds and birds-attributes, tr-ng-grid displays the table by automatically figuring out the column headings. If the user clicks on mammals then on the page, the mammal data gets loaded, but tr-ng-grid is still looking for bird-attributes in a mammals table which has a different set of columns (and a few common columns like id and name)
How would one force tr-ng-grid to erase the current template and construct a whole new table?
One method is of course to keep every table in its own controller, and own HTML element. Is there a simpler way? or is there an alternative to tr-ng-grid that supports such a full-fledged table view refresh?
Seems like, grid headers are initialized only once.
One solution to solve your problem is to re-compile the grid whenever the data is changed.
Here is the updated plunker. http://plnkr.co/edit/34nUGmopB8q4GWQ9uF57?p=preview
So im trying to populate a dropdown with entries from a specific database. Right nwo it works, however it puts in the ENTIRE entry which has 10+ attributes, where i only need a couple of them. Is there any way to specify which columns get passed back and displayed in the dropdown?
<tr>
<TD><span class="required">*</span> CMS Group ID:</TD>
<td><form:select path="cmsGroupId">
<form:options items="${list}" itemValue="id" />
</form:select>
</td>
<td><form:errors path="cmsGroupId" cssClass="required" /></td>
</tr>
Ideally id like to only get the first 4 columns from here. (ID, Version, Name, Entity ID) but dont really know how to make it work. Ive found bits on doing a c:foreach loop but havent gotten that working right either...
Thanks!
Build the appropriate display values on the Java side, not in JSP.
Don't try to do this in the view layer–IMO it's not the right place for such logic.