search

Complex Plotting

Learn how to create more complex plots

If you've chosen to have full-customization on the dashboard you're going to build, you can use our charming_fork_zephyr library and follow Apache Echarts' specification.

Below is an example of how it can be implemented for the Creating the Dashboard tutorial:

Again as before, we can have all the logic in a single function build_dashboard, which takes as argument the aggregated_data Map we just built. Let's break down an example:

use zephyr_sdk::{
    charting::{Dashboard, DashboardEntry, Table}
use charming_fork_zephyr::{component::{Axis, Grid, Legend, Title}, element::{AreaStyle, AxisType, Color, ColorStop, Tooltip, Trigger}, series::{Bar, Line}, Chart};


pub fn build_dashboard<'a>(env: &EnvClient, aggregated_data: HashMap<&'a str, HashMap<&'a str, AggregatedData>>, collaterals: &Vec<Collateral>, borroweds: &Vec<Borrowed>) -> Dashboard {
    let mut dashboard = Dashboard::new().title(&"Blend Porotocol Dashboard").description(&"Explore the Blend protocol's mainnet activity.");
    let categories: Vec<String> = vec!["Supply".into(), "Collateral".into(), "Borrowed".into()];

    for (pool, assets) in aggregated_data {
        let auctions_table = {
            let positions_count = get_from_ledger(env, &pool);
            let table = Table::new().columns(vec!["count".into()]).row(vec![positions_count.to_string()]);
            DashboardEntry::new().title("Current Unique Users With Positions").table(table)
        };

        dashboard = dashboard.entry(auctions_table);

        let val = get_from_instance(env, pool, "Name");
        let ScVal::String(string) = val else {panic!()};
        let pool = string.to_utf8_string().unwrap();
        
        env.log().debug("Iterating over data", None);

        for (asset, data) in assets {
            let meta: StellarAssetContractMetadata = env.from_scval(&get_from_instance(env, asset, "METADATA"));
//            let asset = soroban_string_to_string(env, meta.name);
            let denom = soroban_string_to_string(env, meta.symbol);
            let asset = denom.clone();


            let bar = {
                let chart = Chart::new().legend(Legend::new().show(true).left("150px").top("3%")).tooltip(Tooltip::new().trigger(Trigger::Axis))
                .x_axis(Axis::new().type_(AxisType::Category).data(categories.clone()))
                .y_axis(Axis::new().type_(AxisType::Value)).series(Bar::new()
                .name(format!("Pool: {}, Asset {}", pool, asset))
                .data(vec![data.total_supply as i64 / STROOP as i64, data.total_collateral as i64 / STROOP as i64, data.total_borrowed as i64 / STROOP as i64]));

                DashboardEntry::new().title("Distribution all time").chart(chart)
            };
            
            dashboard = dashboard.entry(bar);
      }
      
      dashboard
}

Be aware that to build the charts, we need to import some types from the Zephyr SDK and Charmig. Then we create the dashboard calling Dashboard::new(). As you can see we can set a title and a description for the dashboard.

Now we start iterating through our map for each pool and asset:

hashtag
Building a Table

The first element of our dashboard is going to be a table stating for each liquidity pool the current unique users with a position in it.

For each pool in our aggregated_data Map, we count how many unique users’ positions there are with the get_from_ledger(env, &pool) method, we create a table with Table::new() and define the column count, while the row will be the count. To add the table to the dashboard, we create a new Dashboard Entry with DashboardEntry::new(), set its title, and insert our table. Finally, we can add our entry (the table) to the previously created dashboard.

hashtag
Building a Chart

Let's look at an example of how to plot a chart. Specifically, we will create multiple bar charts showing the distribution of supply, collateral, and borrowed amounts over time for each pool and asset. The chart can be defined as follows:

For each asset and each pool, we obtain the asset name as a string (from a Soroban String—more details in Working with Data). We then create the chart using Chart::new(), define its dimensions and basic parameters, and set up the axes with .x_axis(Axis::new()) and .y_axis(Axis::new()). On the x-axis, we want to display the categories: supply, collateral, and borrowed amounts. We specify that the axis type will be 'Category' using .type_(AxisType::Category), and set our categories with .data(categories.clone()), defined as follows:

On y instead, we will have the values of the respective categories .type_(AxisType::Value)) expressed in a bar chart: .series(Bar::new()).

We then use .name() to specify the chart's name, including the specific pool and asset being plotted. Finally, we provide the data to be plotted using .data(), accessing the total_supply, total_collateral, and total_borrowed fields of the AggregatedData instances. Note that previously, we only aggregated data for total_supply (refer to the complete example for details on other aggregations).

As before, we create a new entry with DashboardEntry::new(), set its title, and add the entry to the dashboard element. Now we are all set and set dashboard as the return of our function.

To continue the tutorial, go back to Creating the Dashboard.

Last updated