Table Sparklines and Bars

[mcrascal]

Interface for adding sparklines and bars to data tables.

See discussion and inspiration here #498

[hughess]

Here are some examples of these:

Bars

 <Column id=value_usd contentType=bar/>

Sparklines / sparkbars

 <Column id=value_usd contentType=sparkbar/>

And one other idea:

Dot

 <Column id=value_usd contentType=dotline/>

[archiewood]

Beautiful. Are these Echarts?

[hughess]

Nope! The bars and dots are custom svg, and the sparkbar one is svelte-tiny-charts (we'd probably want to switch to echarts or another library for that one to avoid the dependency issue from that library).

Here's the code for the bar one (but with different colours I was trying out):

<svg width="100%" height="{column.height ?? '1.5em'}" style="padding-top: 5px;">
    <rect width="{row[column.id] / (column.barMax ?? Math.max(...data.map(d => d[column.id]))) * 100}%" height="100%" fill=navy opacity=1></rect>
    <text x="5%" y="60%" fill=white>{formatValue(row[column.id], safeExtractColumn(column).format)}</text>                    
</svg>

And for the dot line:

<svg width=60% height=3em>
     <line x1="0" y1="50%" x2="100%" y2="50%" stroke="lightgrey" stroke-dasharray=2 />
     <circle cx="{Math.min(row[column.id] / Math.max(...data.map(d => d[column.id])) * 100, 95)}%" cy="50%" r="4" fill=navy></circle>
</svg>

[mcrascal]

Nice -- the dots are my favourite. How do you indicate the x axis for the sparkbar?

[hughess]

The way I did it above was accept another dataset into the Column component:

<DataTable data={state_data}>
    <Column id=state/>
    <Column id=current_value/>
    <Column id=current_value title="Trend" align=center contentType=sparkline sparklineData={sparkline_data}/>
</DataTable>

I don't fully remember, but I think I also think I pulled the sparkline logic from BigValue into a Sparkline component and set it up to run on any dataset with a date column.

Then I added this loop into the DataTable code to check whether each row in the sparkLineData dataset matched the current row in the DataTable. For example, if you included a state column and a year column in your sparklineData, this would only show a sparkline on rows in the data table where both of those columns are matched:

 <Sparkline data={column.sparklineData.filter(d => {
      let status = true;
      if(column.otherCols){
          for(let i=0; i<column.otherCols.length; i++){
                 if(d[column.otherCols[i]] === row[column.otherCols[i]]){
                      status = status * true
                  } else {
                       status = false
                  }
           }
     }
    return status;
})}/>