BI Components

Bar Chart

Simple Bar Chart

UICode

<bar-chart
  table="stocks"
  measure="max(stock_value)"
  by="company"
  limit="10"
  order_by="max(stock_value) desc">
</bar-chart>

Horizontal Bar Chart

UICode

<bar-chart
  table="stocks"
  measure="max(stock_value)"
  by="company"
  limit="10"
  order_by="max(stock_value) desc"
  horizontal>
</bar-chart>

Multi Bar Chart

UICode

<bar-chart
  table="stocks"
  measure="max(stock_value)"
  by="year"
  breakdown_by="company"
  limit="10">
</bar-chart>

Multi Horizontal Bar Chart

UICode

<bar-chart
  table="stocks"
  measure="max(stock_value)"
  by="year"
  breakdown_by="company"
  limit="10"
  horizontal>
</bar-chart>

Stacked Bar Chart

UICode

<bar-chart
  table="stocks"
  measure="max(stock_value)"
  by="year"
  breakdown_by="company"
  limit="10"
  stacked>
</bar-chart>

Stacked Horizontal Bar Chart

UICode

<bar-chart
  table="stocks"
  measure="max(stock_value)"
  by="year"
  breakdown_by="company"
  limit="10"
  stacked
  horizontal>
</bar-chart>

Line Chart

Simple Line Chart

UICode

<line-chart
  table="stocks"
  measure="max(stock_value)"
  by="company"
  limit="10"
  order_by="max(stock_value) desc">
</line-chart>

Multi Line Chart

UICode

<line-chart
  table="stocks"
  measure="max(stock_value)"
  by="year"
  breakdown_by="company"
  limit="10">
</line-chart>

Stacked Line Chart

UICode

<line-chart
  table="stocks"
  measure="max(stock_value)"
  by="year"
  breakdown_by="company"
  limit="10"
  stacked>
</line-chart>

Data

Simple Value

UICode

<simple-value
  table="stocks"
  value="count(distinct company)">
</simple-value>

Score Card

UICode

<score-card
  title="Nb companies"
  table="stocks"
  value="count(distinct company)">
</score-card>

Table Chart

UICode

<table-chart
  table="stocks"
  measures="sum(volume), sum(close)"
  by="date, company"
  limit="10"
  order_by="date desc">
</table-chart>

Tables List

UICode

<tables-list-chart></tables-list-chart>

Table Schema

UICode

<table-description-chart table="stocks"></table-description-chart>

Source Table

UICode

Source Table component is invisible on the page. The data is downloaded in the background and loaded into a DuckDB table.

<source-table
  name="stocks"
  url="https://idl.uw.edu/mosaic/data/stocks.parquet"
  columns="*, Symbol as company, Close as stock_value, date_trunc('month', Date) as month, strftime(date, '%Y') as year">
</source-table>

Controls

Date Range

UICode

<date-range-picker></date-range-picker>

Submit