Shimoku docs
  • 🚀QuickStart
    • Installation & Setup
    • Minimal APP example
    • Extended Example
    • Templates & tutorials
  • 🤖Artificial Intelligence
    • Classification
      • Train Classification
        • Train Classification Outputs
      • Predict Classification
        • Predict Classification Outputs
    • Generate Insights
      • Generate Insights Outputs
  • 🛠️Building Web App
    • Environment
      • Overview
      • Environment Variables
    • Management
      • Managing Universes
      • Managing Workspaces
      • Managing Boards
    • Menu
      • Changing the Menu Path
      • Updating the Menu Path
      • Deleting the Menu Path
    • Grid
      • Using the Grid
    • Theming
      • Colors Usage
    • Actions
    • Modals
    • IO
  • 💡Elements
    • Summary
    • Charts
      • Table
        • Buttons Column
        • Filters
        • Search bars
        • Colored labels
      • HTML
        • Raw HTML
        • Beautiful Titles
        • Background Indicators
        • Click to New Tab
        • Box With Button
        • Panel
      • Indicators
        • Indicator
        • Grouped Indicators
        • Vertical Indicators
        • Color by Value
        • Gauge Indicator
        • Indicators with Header
      • Scatter Charts
        • Scatter
        • Scatter with Effect
      • Line Charts
        • Line
        • Predictive Line
        • Segmented Line
        • Marked Line
        • Line With Confidence Area
        • Top Bottom Line Charts
        • Summary Line
      • Area Charts
        • Area
        • Stacked Area
        • Segmented Area
        • Top Bottom Area Charts
      • Bar Charts
        • Bar
        • Stacked Bar
        • Horizontal Bar
        • Stacked Horizontal Bar
        • Zero Centered Bar
      • Pie Charts
        • Pie
        • Doughnut
        • Rose
      • Gauge Charts
        • Shimoku Gauge
        • Speed Gauge
      • Input forms
        • Group chained Inputs
        • List input search
        • Conditional inputs
        • Audio input
        • Drag & Drop
      • Line and Bar
      • Waterfall
      • Annotated Chart
      • Heatmap
      • Radar
      • Sunburst
      • Tree
      • Treemap
      • Sankey Diagram
      • Funnel chart
      • iFrame
    • Composite Template Charts
      • Infographics text bubble
      • Chart and Modal Button
      • Chart and Indicators
    • Data Sets
      • Data Set Filters
    • Create your own charts
      • Free Echarts
      • Bento box
    • Features & Navigation
      • Tabs
      • History navigation & Breadcrumb
  • 🔍Advanced usage
    • CLI
    • Workflow Triggers
    • Code Generation
  • 🌍Cloud & Community
    • Shimoku Cloud
    • Shared links
    • Handling Workspaces & Users
      • User authentication
      • Inviting users
      • Creating users
      • Users with multi-workspace access
  • 🌐Releases
    • 2024
      • v.2.6
      • v.2.5
      • v.2.4
      • v.2.3
        • v.2.3.1
      • v.2.2
        • v.2.2.3
        • v.2.2.2
        • v.2.2.1
      • v.2.1
        • v.2.1.2
        • v.2.1.1
      • v.2.0
        • v.2.0.(1..4)
      • v.1.6
        • v.1.6.1
      • v.1.5
    • 2023
      • v.1.4
        • v.1.4.1
        • v.1.4.2
      • v.1.3
      • v.1.2
        • v.1.2.1
      • v.1.1
        • v.1.1.1
      • v.1.0
        • v.1.0.2
        • v.1.0.1
      • v.0.20
      • v.0.19
      • v.0.18
      • v.0.17
        • v.0.17.1
      • v.0.16
        • v.0.16.3
        • v.0.16.2
        • v.0.16.1
      • v.0.15
      • v.0.14
    • 2022
      • v.0.13
        • v.0.13.3
      • v.0.12
      • v.0.11
      • v.0.10
        • v.0.10.4
        • v.0.10.3
        • v.0.10.1
      • v.0.9
      • v.0.8
      • v.0.7
        • v.0.7.1
      • v.0.6
      • v.0.5
      • v.0.4
      • v.0.3
        • v0.3.2
        • v0.3.1
      • v.0.2
Powered by GitBook
On this page
  • Shimoku Gauges Group
  • Interesting Usages

Was this helpful?

  1. Elements
  2. Charts
  3. Gauge Charts

Shimoku Gauge

Half ring gauge

Gauge charts with the Shimoku flavor, they are called the Shimoku gauges. They are minimalist and useful for a quick view on various metrics. The function is called s.plt.shimoku_gauge.

The method accepts various types of colors as the parameter color. There are a group of default colors that can be used passing an integer from 1 to 10, also it can accept some keywords that will activate dashboard specific colors, the list is:

'success', 'error', 'warning', 'success-light', 'error-light', 'warning-light', 'status-error'

By default they show the percentage symbol but it can be deactivated by setting the parameter is_percentage to False.

An example on how to use them is:

s.plt.shimoku_gauge(
    value=-48, menu_path=menu_path, order=0,
    rows_size=1, cols_size=3, name="Shimoku",
    color=1
)
    
s.plt.shimoku_gauge(
    value=3.56, menu_path=menu_path, order=1,
    rows_size=1, cols_size=3,
    color="status-error"
)
    
s.plt.shimoku_gauge(
    value=-90, menu_path=menu_path, order=2,
    rows_size=1, cols_size=3, name="gauges",
    color='#00F0FF'
)

Shimoku Gauges Group

It makes use of the Shimoku gauge and the Bento box feature. It takes as data a list of dictionaries (or dataFrame) where the necessary information for each gauge must be provided.

This component can calculate the percentages of the group of gauges provided, like the stacked bar chart component, this can be activated by setting the parameter calculate_percentages to True.

# Same data as for the stacked barcharts
df = pd.read_csv('../data/test_stack_distribution.csv')

value_columns = [col for col in df.columns if col != "Segment"]
df = df[['Segment'] + value_columns]

gauges_data = pd.DataFrame(columns=["name", "value", "color"])
df_transposed = df.transpose().reset_index().drop(0)
value_columns = [col for col in df_transposed.columns if col != "index"]
gauges_data["value"] = df_transposed[value_columns].apply(lambda row: sum(row), axis=1)
gauges_data["name"] = df_transposed['index']
gauges_data["color"] = range(1, len(df_transposed) + 1)

s.plt.shimoku_gauges_group(
    gauges_data=gauges_data, order=0,
    cols_size=12, rows_size=3,
    calculate_percentages=True,
)

Interesting Usages

  • Showing progress towards a goal: Gauge charts are ideal for showing progress towards a goal. For example, you could use a gauge chart to show how much of a fundraising goal has been reached.

  • Displaying key performance indicators (KPIs): Gauge charts can also be used to display key performance indicators, such as the completion rate of a project or the percentage of customer complaints resolved within a certain time-frame.

PreviousGauge ChartsNextSpeed Gauge

Last updated 1 year ago

Was this helpful?

💡
Shimoku gauges
Shimoku gauges group with percentages calculated
Project progress
KPIs tracking