24_aggrid_with_sparklines.qmd

---
title: "AG Grid with Sparklines"
format:
  html:
    theme: flatly
    font: Georgia
    self-contained: true
    page-layout: custom
mode: visual
---

```{r include=F}

library(tidyverse)

df <- tibble(
  field = rep(c("field1", "field1", "field2"), each = 5),
  product = rep(c("product1", "product2", "product3"), each = 5),
  date = rep(seq(as.Date("2022-01-01"), as.Date("2022-05-01"), by = "months"), times = 3) %>% as.character(),
  value = c(20, 50, 70, 60, 55, 70, 60, 55, 50, 20, 20, 30, 50, 35, 5)
) %>%
  rowwise() %>%
  mutate(chart = list(value)) %>% ungroup() %>%
  group_by(field, product) %>%
  summarise(
    chart = list(chart)
  )

ojs_define(df = df)

```


```{ojs}
//| echo: false

AgGrid = require('https://cdn.jsdelivr.net/npm/ag-grid-enterprise@25.2.0/dist/ag-grid-enterprise.min.js')

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', disableTooltips:false, width:100, height:25 });
   $('.inlinesparkline').removeClass('inlinesparkline').addClass('myinlinesparkline');
}, 200);

makeSparklinesAg = (arr) =>  `<span class="inlinesparkline">${arr.join()}</span>`

html `<style> .jqstooltip {-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} </style>`


html`<div id="myGrid" style="width: 50%;height:400px;" class="ag-theme-alpine"></div>`
gridOptions = {
  const eGridDiv = document.getElementById('myGrid');
  const columnDefs = [
    { field: 'field'}, // , rowGroup: true 
    { field: 'product', maxWidth: 110 },
    {
      field: 'chart',
      maxWidth: 110,
      cellRenderer: params => makeSparklinesAg(params.value) 
    },
  ];

  const gridOptions = {
    columnDefs: columnDefs,
    rowData: transpose(df),
    rowSelection: 'single',
    defaultColDef: {
      flex: 1,
      minWidth: 100,
      resizable: true,
    },
  };

  new AgGrid.Grid(eGridDiv, gridOptions);
  gridOptions.api.sizeColumnsToFit();
  return gridOptions;
}

```