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

Was this helpful?

  1. Elements
  2. Data Sets

Data Set Filters

PreviousData SetsNextCreate your own charts

Last updated 1 year ago

Was this helpful?

We provide a way to filter data sets dynamically, to affect all the charts that use a specific data set. The filter is a component in itself so it will be using an order, and it will need to be passed an exiting shared data set by name.

The function to use is the following (using s as the Shimoku client):

s.plt.filter(
    order: int,                   # Order in the view
    data: str,                    # The name of the shared data set
    field: str,                   # The field from the data set to be filtered
    multi_select: bool = False,   # Wether to use the multi select for categoricals
    cols_size: int = 4,           # The number columns that will occupy the filter
    rows_size: int = 1,           # The number of rows that will occupy the filter
    padding: Optional[str] = None # The padding that will be applie to the filter
 )

The filter works with 4 types of inputs, for different types of values, this will be inferred by the field to be filtered. The types are:

  • Numeric values (it lets the user chose the operation):

  • Date values:

  • Categorical values (single or multi select):

For an example we will be using this data set:

data_to_filter = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'filtA': 'A', 'filtB': 'Z', 'name': 'Ana'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'filtA': 'B', 'filtB': 'Z', 'name': 'Laura'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'filtA': 'A', 'filtB': 'W', 'name': 'Audrey'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'filtA': 'B', 'filtB': 'W', 'name': 'Jose'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'filtA': 'A', 'filtB': 'Z', 'name': 'Jorge'},
]

and we will use three linked charts joined to this data set:

s.reuse_data_sets()  # For later executions

s.plt.set_shared_data(dfs={'filters data': pd.DataFrame(data_to_filter)})

s.plt.bar(data='filters data', x='date', y='x', order=0, cols_size=6)
s.plt.doughnut(data='filters data', names='date', values='x', order=1, cols_size=6)
s.plt.stacked_area(data='filters data', x='date', y=['x', 'y'], order=2)

To use the numeric filter we will specify the x field as it has more variation than the y field:

s.plt.filter(order=3, data='filters data', field='x')

The possible operations are the following:

If we set the operation to > and the value to 4 we get:

To use the date range we will use the field date:

s.plt.filter(order=3, data='filters data', field='date')

It lets the user select a range of dates, if we select the range 2021/01/1 - 2021/01/03, the result is:

To use the categorical filter we will use the filtA field. The input is a select dropdown with all the possible options, only one can be selected.

If we set the filter to the value A the result is:

To use the categorical multi select filter we will use the filtB field. The input is a select dropdown with all the possible options, any combination can be selected.

If we set all the values of the filter we get:

It is not recommended to use more than one filter on a single data set, only one filter can have effect on a data set at a time, and this can be confusing for the user.

💡
The charts to be filtered
Numeric filter result
Date range filter result
Single select filter
Multi select filter result