Cell Types in Data Grids using CDL

Discover the different types of cells for datagrid tables, including default, percentage, and microchart cells. Examples provided.

Default Cell

This is the basic cell that sets a value for the table cell.

    cell{
        value: count(survey:)
        target: 100
        view: v11
    }

Percentage Cells

Use this type of cell when calculating percent values.

Column Percentage Cell

    cell columnPercentage {
      value: count(survey:)
    }

Row Percentage Cell

    cell rowPercentage {
      value: count(survey:)
    }

Microchart Cell

A Microchart cell allows you to use simple charts inside the table cell.

Single Value Bar Chart

    cell microchart {
        value: count(survey:)
        target: 100
        format: myNumberFormatter
        microchart bar {
            max: 400
            min:0
            colorFormat: bg2
            valuePosition: inner
        }
    }

Stacked Bar Chart

A Stacked Bar Chart displays multiple sets of categorical data in each bar or stack, with the bar lengths proportional to the data values.

    cell microchart {
        value: count(survey:)
        breakdownBy cut {
          value: survey:NPSGroup
        }
        microchart stackedBar {
          palette: @cr1.palette
          max:450
        }
      }

100% Stacked Bar Chart

The 100% Stacked Bar Chart displays multiple sets of data as stacked bars, with each stacked bar element's proportion adding up to 100%.

    cell microchart {
        value: count(survey:)
        breakdownBy cut {
            value: survey:NPSGroup
        }
        microchart stacked100PercentBar {
            palette: @cr1.palette
            notAnswered: true
        }
    }

Line Chart

A Line Chart represents information as a series of data points connected by straight lines. It displays trends and is a commonly used chart in various fields.

    column {
        label: "Customer Spend per Month (mean)"
        cell microchart {
            value: average(survey:CustomerSpend)
            breakdownBy date {
                value: survey:interview_start
                breakdownBy: calendarMonth
                start: "2016-07-01"
                end: "2017-10-31"
            }
            microchart line {
                color: red
            }
        }
    }
    column {
        label: "Agent Issue"
        cell microchart {
            value: count(survey:)
            breakdownBy cutByMulti {
                value: survey:AgentIssue
            }
            microchart line {
                color: blue
            }
        }
    }