Public
Edited
Feb 22, 2023
import { jQuery as $ } from "@ddspog/useful-libs"
jquerysparklines = require("https://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js")
setInterval(function(){
$('.inlinesparkline').sparkline("html", { type:'line', lineColor:'red', fillColor: '#F0F0F0', width:100, height:25 });
$('.inlinesparkline').removeClass('inlinesparkline');
}, 200);
makeSparklines = (arr) => htl.html `<span class="inlinesparkline">${arr.join()}</span>`
makeSparklinesAg = (arr) => `<span class="inlinesparkline">${arr.join()}</span>`
Inputs.table(data, {
format: {
col2: x => makeSparklines(x),
col3: x => makeSparklines(x),
}
}
)
AgGrid = require('https://cdn.jsdelivr.net/npm/ag-grid-enterprise@25.2.0/dist/ag-grid-enterprise.min.js')
grid = html`<div id="myGrid" style="width: 80%;height:400px"></div>`
gridOptions = {
const eGridDiv = document.getElementById('myGrid');
const columnDefs = [
{ field: 'col1' },
{ field: 'col2', cellRenderer: params => makeSparklinesAg(params.value) }
];
const gridOptions = {
columnDefs: columnDefs,
rowData: data,
defaultColDef: {
flex: 1,
minWidth: 100,
resizable: true,
},
};
new AgGrid.Grid(eGridDiv, gridOptions);
gridOptions.api.sizeColumnsToFit();
return gridOptions;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
