Ag-grid Tree with sparklines?

Question

I am trying to use sparklines on a tree in ag-grid. Is there a way to do this? The aggFunc is called, but the results do not appear to be used. I also tried to set values on the tree itself, but that didn't work.

Answer 1

I got this to work by using an innerRenderer and cellRendererSelector, and then a GanttCellRenderer component that renders SVGs:

Relevant part of the Grid definition:

cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
  suppressCount: true,
  // This innerRenderer is used by group items and then the params are as defined by cellRendererSelector
  // Without this innerRenderer here, the group items will not show the gantt chart
  innerRenderer: 'GanttCellRenderer',
  suppressDoubleClickExpand: true,
  suppressEnterExpand: true,
},
// This function does the aggregates for group rows. That array gets stored internally by AgGrid as params.value
// and is used by cellRendererSelector
aggFunc: (params => monthAggregate(params, month)),
editable: false,
// columnGroupShow: 'open', // Does not work unless we have a column that is open on the left...
suppressMenu: true,
sortable: false,
suppressMovable: true,
cellRendererSelector: (params) => {
  return {
    component: GanttCellRenderer,
    params: {
      topWidthPct: parseFloat(params.value[0]),
      bottomWidthPct: parseFloat(params.value[1])
    },
  }
},

Relevant part of the GanttCellRenderer:

<template>
  <div class="gantt-cell" @mouseover="showTooltip($event, params)" @mouseout="hideTooltip($event, params)">
    <svg v-if="topWidth || bottomWidth" height="34" width="35.5" viewBox="0 0 35.5 34" xmlns="http://www.w3.org/2000/svg">
      <g v-if="topWidth" transform="translate(-0.75, 4)" >
        <rect height="14" :width="topWidth" :fill="topFill"/>
      </g>
      <g v-if="bottomWidth" transform="translate(-0.75, 22)" >
        <rect height="14" :width="bottomWidth" :fill="bottomFill"/>
      </g>
    </svg>
  </div>
</template>
<script setup>
import {defineProps, onMounted, ref} from "vue";
import { useGanttTooltipStore } from "@/stores/gantt_tooltip_store";

const props = defineProps({
  params: Object
})

const topFill = ref(null)
const bottomFill = ref(null)

const fullWidth = 35.5; // 34px is full width + .75px times 2 to cover borders -- max border width is 1.5px
const topWidth = ref(null)
const bottomWidth = ref(null)

onMounted(() => {
  topFill.value = props.params.node?.allChildrenCount ? '#989CA7' : '#4A5FD5'
  bottomFill.value = props.params.node?.allChildrenCount ? '#B8B6CA' : '#84CADE' // $paleBlue1 : $lightBlue1

  topWidth.value = props.params.topWidthPct ? (fullWidth * parseFloat(props.params.topWidthPct)) : 0
  bottomWidth.value = props.params.bottomWidthPct ? (fullWidth * parseFloat(props.params.bottomWidthPct)) : 0
})