Extended Example

Coding a bigger picture

Aim

Taking into account the information displayed on the previous page, Minimal APP example, it is necessary to use a more developed implementation example that incorporates more features and functionalities in order to provide a broader selection of the platform capabilities.

---

First Steps

Starting with the libraries, it is essential to be able to handle them so your program can use all the extensions and additional features it requires. Intuitively, the most important library to add is the one that enables all the Shimoku magic:

from shimoku import Client

Next, you may want to use some operating system and environment libraries, with the aim of enabling different functionalities, such as defining Environment Variables.

import time
import os
from os import getenv
from dotenv import load_dotenv
from io import StringIO

Finally, it is time to add all those commonly used libraries that provide technical extensions and features. For instance, these three are frequently used for a variety of purposes:

import numpy as np
import pandas as pd
import sklearn as sk

Authentication and Remote Access

In order to be able to use the Shimoku remote services, it is required to follow proper identification and create a Client object, using the Shimoku library.

If more guidance about the authentication process is needed, check the Environment Variables section.

load_dotenv() #load the .env file to acces your credentials

s = Client(
    access_token=os.getenv("SHIMOKU_TOKEN"),
    universe_id=os.getenv("UNIVERSE_ID"),
    verbosity="INFO",
    async_execution=True
)

s.set_workspace(uuid=os.getenv("WORKSPACE_ID"))

Setting the Board

Boards are grouping elements ideal for optimal organization and structuring in a given universe. For more related information, check Managing Boards and Managing Universes.

s.set_board('Car company')

Setting the Menu Path

Menus are pathways that help you distribute the content in a clear and understandable way in a given board. Defining them with a relevant name is crucial for working in a structured environment. More information about them can be found on Menu.

s.set_menu_path(name="Sales Report")

Reading Data

To access your data in a way that is maleable and optimal, use the Pandas library to import your file and convert it into a dataframe variable.

dataframe = pd.read_csv("car_data.csv").to_csv(index=False).encode()

Depending on the characteristics of your file, it may be necessary to add parameters like delimiter or header.

Developing Your Features

Having set up the previous steps, you are ready to start developing your features, and showcasing them using Shimoku's powerful tools. In this example, some simple functionalities done on a car sales report will be showcased in the Shimoku.io site.

---

Firstly, some indicators can be created. They are ideal for simple information showcasing, for instance, the total number of cars that have been sold.

When creating an indicator, first, the data structure has to be created and, afterwards, it is as simple as plotting said indicator. Check Indicators for more guidance in this topic.

total_sales = {
    "description": "total number of sales done in the current natural year",
    "title": "Total Car Sales",
    "value": len(dataframe)
}
total_revenue = {
    "description": "total revenue accomplished in the current natural year",
    "title": "Total Revenue",
    "value": dataframe['price'].sum()
}

s.plt.indicator(
    data=total_sales, order=1,
    rows_size=8, cols_size=12,
)
s.plt.indicator(
    data=total_revenue, order=2,
    rows_size=8, cols_size=12,
)

Next, it can be interesting to use a pie chart to highlight any information desired. There are many types of charts, each one best suited for different application. Have a look at all the different charts provided at Charts.

gender_counts = dataframe['gender'].value_counts()

gender_data = [
    {'gender': 'Male', 'value': gender_counts['Male']/gender_counts*100},
    {'gender': 'Female', 'value': gender_counts['Female']/gender_counts*100}
]

s.plt.pie(
    data=gender_data, names='gender', values='value',
    order=3, rows_size=2, cols_size=12,
)

Using Bento Boxes

Bento box is a tool that enables us to create an intuitive separation between content by providing different shared spaces between plotted elements that have the same context.

It's simple usage only requires the user to set the Bento box space, plot the elements that are going to be placed inside and finally popping out of the Bento box. Take a look at the Bento box for more related information.

#here goes the plotting data declaration previously explained

s.plt.set_bentobox(cols_size=8, rows_size=3) #set bentobox


s.plt.indicator(
    data=total_sales, order=0,
    rows_size=8, cols_size=12,
)

s.plt.indicator(
    data=total_revenue, order=1,
    rows_size=8, cols_size=12,
)

s.plt.pie(
    data=gender_data, names='gender', values='value',
    order=2, rows_size=2, cols_size=12,
)


s.plt.pop_out_of_bentobox() #exit bentobox

Using Tabs

Tabs give the option to separate elements further by grouping them, and only showing the ones selected in that specific tab. Check Tabs for further information.

s.plt.set_tabs_index(('Charts', 'Indicators Tab'), order=0) #set tab box

s.plt.indicator(
    data=total_sales, order=1,
    rows_size=8, cols_size=12,
)
s.plt.indicator(
    data=total_revenue, order=2,
    rows_size=8, cols_size=12,
)

s.plt.change_current_tab('Pie Tab') #change tab

s.plt.pie(
    data=gender_data, names='gender', values='value',
    order=2, rows_size=2, cols_size=12,
)

s.plt.pop_out_of_tabs_group() #exit tab box

Indicators Tab selected

Pie Tab selected

Sharing Your Board

Shimoku's sharing functionality transforms the way you incorporate analytics into web platforms, enabling you to deliver personalized insights to your audience and add significant value to your product offerings with minimal development efforts.

---

Update your persisted Board with the CLI in Shimoku Cloud to make it shareable.

> shimoku cloud update board --board {YOUR BOARD NAME OR ID} --is-public

Done!

Finally, to access the link through the Front End, you must click on the chain icon of your board.

You can find further information about our Shared boards by reading the Shared links section.