I am trying to display a live logs table using Vue(quasar)+Dexie.
I managed to display the data using the basic example from the dexie doc page:
export default {
name: "Logs",
setup() {
const columns = [
{
name: "ts",
label: "TimeStamp",
field: "ts",
align: "left",
format: (val, row) => date.formatDate(val, "HH:mm:ss:SSS"),
},
{
name: "action",
label: "Action",
field: "action",
align: "left",
format: (val, row) => val,
},
{
name: "status",
label: "Status",
field: "status",
align: "left",
format: (val, row) => val,
},
{
name: "data",
label: "Data",
field: "data",
align: "left",
format: (val, row) => {
return val;
},
},
];
const pagination = ref({
sortBy: "ts",
descending: true,
page: 1,
rowsPerPage: 10,
});
return {
columns,
pagination,
dialog: [],
logs: useObservable(
liveQuery(() => useDatabase.logs.reverse().limit(10).toArray())
),
};
},
};
I get a new Log entry every 1 second.
I am almost sure that the whole bulk of data is re-fetched and not appended. Am I right?
Is there a better practice for loading live updating data from a table than this? (if it's really as i described)
Instead of re-loading all the data from IDB, to just fetch the newly added entries and append them.
I have the same exact situation when displaying a live updating chart (using ApexCharts).
but in this case, I fetch 256 samples per second. I want the components to render the data "automatically" using Vues superpowers while pointing to a ref.
Usually when working with frontend frameworks, and specifically Vue, I create some kind of a variable let logs = ref({...}) and whenever there new data, it gets rendered only when and where it's needed. It doesn't re-render the whole bulk all over again.
I hope my problem is clear, and if not, the examples or my way of thought is understood. I might be thinking this wrong, but i'd be happy to learn from others experience.
Related
I am trying to create a grouped bar chart using Observable's Plot.plot in JavaScript (code is in TypeScript).
The problem is that the x-axis is showing each specific date, however I want the dates to show dynamic months or weeks, not specific dates.
This is the code:
const chart = Plot.plot({
x: { axis: null, domain: ["Add", "Remove"], },
y: { tickFormat: "s", label: "↑ Access Requests", grid: true },
color: {
legend: true,
type: "categorical",
domain: ["Add", "Remove"],
range: redGreenColorRange,
},
style: {
background: "transparent",
},
width: 1350,
caption: "in 2 week increments",
facet: {
data: groupedAddRemove,
label: "Created Date",
x: "createdDate",
// thresholds: d3.utcWeeks,
// ^ this doesn't work, but a similar structure has worked in other projects I've seen
},
marks: [
Plot.barY(groupedAddRemove, {
x: "type",
y: "count",
fill: "type",
}),
Plot.ruleY([0]),
],
});
and this is what it looks like:
I want the x-axis marks to show a dynamic version of Months, like:
My data structure either could show the "Date" as a string, or a TypeScript typeof Date object
data structure with date with a type of string
data structure with date with a type of Date
This is the data structure type:
The 'groupedAddRemove' is an array of this type
( AddRemoveBarChartType[] )
type AddRemoveBarChartType = {
createdDate: Date;
count: number;
type: "Add" | "Remove";
};
the "Type" can either be "Add" or "Remove". I had a boolean for this value previously, but the "Add" and "Remove" fit better to automatically have the legend say "Add" and "Remove". It could be changed back to a boolean if there is a better way to display it that way.
The data could be changed in other ways too, if that will simplify things. I am also open to using a D3.js implementation instead of Plot.plot.
I'm very new to Observable Plot.plot so any help is appreciated, thank you!
I already appreciate your advice and answers, this time I go to you for the next problem I pass context, I want to create a dynamic table with quasar and vueJS this table will change according to a select field I have managed to bring the columns of the Selected tables, what I can't do is paint them in the view, since for this I must generate the following structure to be able to paint the table:
columns: [
{
name: 'id', align: 'center', label: 'id', field: 'id'
},
{
name: 'name', align: 'center', label: 'name', field: 'name'
},
{
name: 'age', align: 'center', label: 'age', field: 'age'
}
]
}
I want to form the structure above from an array that comes to me from the database (the columns of the table), what I receive is the following:
const columnsTable = [
"id",
"name",
"age"
];
I am trying as follows in my computed method:
My computed method to generate the array of objects
The result of this is not what was expected since in each key of my object the entire array is entered in this way.
colums in the image
The variable colums is where I want to generate the array of objects described at the beginning of the question.
I appreciate your answers and opinions, anything would help me a lot, thank you very much.
Maybe something like following snippet:
const columnsTable = [
"id",
"name",
"age"
];
const res = []
columnsTable.forEach(c => {
res.push({name: c, align: 'center', label: c, field: c})
})
console.log(res)
I need to show an array of objects in the table like representation. Table has columns with the properties, and when clicked on the column it should show more data inside the table. It should be sortable.
Is there a JS library that could do this, so I dont have to write this from scratch?
Please see the attached image with the JSON object.
When the user clicks on Ana, additional row is inserted.
I created the demo https://jsfiddle.net/OlegKi/kc2537ty/1/ which demonstrates the usage of free jqGrid with subgrids. It displays the results like
after the user clicks on the "+" icon in the second line.
The corresponding code you can find below
var mydata = [
{ id: 10, name: "John", lname: "Smith", age: 31, loc: { location: "North America", city: "Seattle", country: "US" } },
{ id: 20, name: "Ana", lname: "Maria", age: 43, loc: { location: "Europe", city: "London", country: "UK" } }
];
$("#grid").jqGrid({
data: mydata,
colModel: [
{ name: "name", label: "Name" },
{ name: "lname", label: "Last name" },
{ name: "age", label: "Age", template: "integer", align: "center" }
],
cmTemplate: { align: "center", width: 150 },
sortname: "age",
iconSet: "fontAwesome",
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = [$(this).jqGrid("getLocalRow", rowid).loc];
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "location", label: "Localtion" },
{ name: "city", label: "City" },
{ name: "country", label: "Country" }
],
cmTemplate: { align: "center" },
iconSet: "fontAwesome",
autowidth: true
});
}
});
Small comments to the code. Free jqGrid saves all properties of input data in data parameter. I added id property to every item of input data. It's not mandatory, but it could be helpful if you would add more functionality to the grid. See the introduction for more details.
The columns are sortable based on the type of the data specified by sorttype property of colModel. To simplify usage some standard types of data free jqGrid provides some standard templates which are shortcurts for some set of settings. I used template: "integer" in the demo, but you could replace it to sorttype: "integer" if only sorting by integer functionality is important.
If the user click on "+" icon to expand the subgrid then jqGrid inserts new row and creates the div for the data part of the subgrid. You can replace subGridRowExpanded from above example to the following
subGridRowExpanded: function (subgridDivId) {
$("#" + subgridDivId).html("<em>simple subgrid data</em>");
}
to understand what I mean. The unique id of the div will be the first parameter of the callback. One can create any common HTML content in the subgrid. Thus one can create empty <table>, append it to the subgrid div and
then convert the table to the subgrid.
To access to the item of data, which corresponds to the expanding row one can use $(this).jqGrid("getLocalRow", rowid). The return data is the item of original data. It has loc property which we need. To be able to use the data as input for jqGrid we create array with the element. I's mostly all, what one have to know to understand how the above code works.
You can add call of .jqGrid("filterToolbar") to be able to filter the data or to add pager: true (or toppager: true, or both) to have the pager and to use rowNum: 5 to specify the number of rows in the page. In the way you can load relatively large set of data in the grid and the user can use local paging, sorting and filtering. See the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one with 40000 rows. All works pretty quickly if one uses local paging and not displays all the data at once.
I use datatables.net for all my "more complex than lists"-tables. I It's a very well kept library with loads of features and great flexibility.
In the "con" column I would say that it's so complex that it probably has quite a steep learning curve. Although the documentation is great so there is always hope for most problems.
I've got a basic ExtJS gridpanel on which I can apply custom state on the fly. Using another control such as a combobox or another grid, my application applies the selected state on the grid. An example of this state:
{
"height": 384,
"columns": [{
"id": "h107"
},
{
"id": "h1",
"width": 30
},
{
"id": "unplannedtasks_ActualEndDate",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualNoResources",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualResponseDateTime",
"hidden": true
},
{
"id": "unplannedtasks_ActualTotalDurationInSeconds",
"width": 100
},
"filters": []
}
Here's the corresponding columns section of the grid declaration:
Ext.define('Ext.grid.Stateful', {
extend: 'Ext.grid.Panel',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'hiddenchange', 'groupchange', 'show', 'hide'],
// CODE OMMITTED FOR BREVITY
initComponent: function () {
Ext.apply(this, {
columns: [
filterAction,
new columns.tasks.ActualEndDate({ id: 'unplannedtasks_ActualEndDate', hidden: false }),
new columns.tasks.ActualNoResources({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualResponseDateTime({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualTotalDurationInSeconds({ id: 'unplannedtasks_ActualTotalDurationInSeconds', hidden: false }
]
});
}
})
An example of a column definition:
Ext.define("columns.tasks.ActualNoResources", {
extend: "Ext.grid.column.Column",
text: 'ActualNoResources',
dataIndex: 'ActualNoResources',
editor: {
allowBlank: false
}, filterable: true,
filter: {
type: 'string'
}
});
Everything goes as I expected except the column headers don't seem to refresh properly. If I open the columns panel in the grid, it is showing the correct amount of visible and hidden columns. Same story with the filters: if there's a filter in the state, it applies the correct value on the correct field. It's as though the column headers need to be refreshed in some way.
I tried to use grid.getView().refresh() but that doesn't work. Instead, if I resize the grid, it does refresh the hidden columns but not the columns that were initially hidden but now visible.
I think I am missing a simple line of code that belongs in the applyState method of the grid so I can command the grid to refresh the grid with the new state rather than the previous or initial state.
Any ideas on how to solve this?
As it turns out, the scenario that I pursue is not possible out of the box with ExtJS. What I'm asking can only be done during startup (without intervention of a developer's custom code) so I had to quit this approach and provide custom code. In the end, I had to rebuild the columns and then pass that collection to the reconfigure(store, columns) method of the grid.
I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode
See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}
"render": function ( data, type, full ) { return label;}