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
  • Configurations
  • Basic Configuration
  • Variants Configuration
  • Custom Colors Configuration
  • Multiple Configurations Per Column

Was this helpful?

  1. Elements
  2. Charts
  3. Table

Colored labels

PreviousSearch barsNextHTML

Last updated 1 year ago

Was this helpful?

Color and shape are great tools to convey information, so we added a flexible way to do just that with tables!

Our tables now have the option to add labels to each entry point, these labels have multiple options to define its color and shape using a comprehensive dictionary as the parameter for the s.plt.table method.

Configurations

This is a flexible feature and it can be used in simple and complex ways, so we will explain it's capabilities separated by complexity.

Basic Configuration

To activate the labels you have to provide a dictionary as the parameter label columns, this dictionary has to define the color for each column that will have labels. The default colors that you can use are the following:

This colors represent abstract ideas and they can be customized for any business, they aren't linked to predefined colors.

It is highly recommended to always use the default colors

data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'labelsA': 'A', 'labelsB': 'B'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'labelsA': 'B', 'labelsB': 'Z'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'labelsA': 'C', 'labelsB': 'W'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'labelsA': 'B', 'labelsB': 'T'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'labelsA': 'A', 'labelsB': 'Z'},
]

s.plt.table(
    data=data, order=0,
    label_columns={
        'labelsA': 'main',
        'labelsB': 'active'
    },
)

Variants Configuration

For each color that is defined you can choose the type of variant that you want to see, the options are filled and outlined.

As it has been shown before the default configuration is filled. You can define the desired variant configuration by passing a tuple as the key of the label definition:

(column name, variant option)

When executing the following code:

data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'labelsA': 'A', 'labelsB': 'B'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'labelsA': 'B', 'labelsB': 'Z'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'labelsA': 'C', 'labelsB': 'W'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'labelsA': 'B', 'labelsB': 'T'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'labelsA': 'A', 'labelsB': 'Z'},
]

s.plt.table(
    data=data, order=0,
    label_columns={
        'x': 'main',
        'y': 'active',
        ('labelsA', 'outlined'): 'error',
        ('labelsB', 'outlined'): 'caution'
    },
)

Custom Colors Configuration

Even if we recommend using the default colors there are situations in which a specific color is needed. We have three ways to define specific colors, by name of a common color, by hexadecimal notation of RGB or by list of values of RGB.

The common color list that can be used is:

The other two definitions use the RGB standards, one uses the hexadecimal representation:

                                   #000000 - #FFFFFF 

the other uses a list representation ( [R,G,B] ):

                              [0, 0, 0] - [255, 255, 255] 

Here is an example on how it would be used:

data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'labelsA': 'A', 'labelsB': 'B'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'labelsA': 'B', 'labelsB': 'Z'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'labelsA': 'C', 'labelsB': 'W'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'labelsA': 'B', 'labelsB': 'T'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'labelsA': 'A', 'labelsB': 'Z'},
]

s.plt.table(
    data=data, order=0,
    label_columns={
        ('x', 'outlined'): 'blue',
        ('y', 'outlined'): '#00FF00',
        'labelsA': [200, 0, 0],
        'labelsB': 'orange'
    }
)

Multiple Configurations Per Column

Sometimes you will need to have different colors and shapes for values in the same column, so we added two ways to handle this situation, color definition per value, or, in case of numeric values, per range of values. To define multiple colors per column you will have to use a dictionary instead of a color or variant, this dictionary will tell which values of the column will have which color.

One value one color:

Here we just define a color for each value:

label_columns = { 
     column_1: {
          value_1_1 : color_definition_1_1,
          value_1_2 : color_definition_1_2,
     },
     column_2: {
          value_2_1 : color_definition_2_1,
          value_2_2 : color_definition_2_2,
     } 
}

Range of values:

In this case we use a tuple to define a range of values that will have the same color configuration:

label_columns = { 
     column_1: {
          (ini_1_1, fin_1_1) : color_definition_1_1,
          (ini_1_2, fin_1_2) : color_definition_1_2,
     },
     column_2: {
          (ini_2_1, fin_2_1) : color_definition_2_1,
          (ini_2_2, fin_2_2) : color_definition_2_2,
     } 
}

The definitions of color admit all previous configuration options.

Here it can be seen how ranges can be used:

from numpy import inf

data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'labelsA': 'A', 'labelsB': 'B'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'labelsA': 'B', 'labelsB': 'Z'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'labelsA': 'C', 'labelsB': 'W'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'labelsA': 'B', 'labelsB': 'T'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'labelsA': 'A', 'labelsB': 'Z'},
]

s.plt.table(
    data=data, order=0,
    label_columns={
        'x': {
            (-inf, 4): 'warning',
            (4,    6): '#00AA33',
            (6,  inf): [50, 150, 255],
        },
        'y': '#00FF00',
        'labelsA': [200, 0, 0],
        ('labelsB', 'outlined'): {
            'B': 'black',
            'Z': 'cyan',
            'W': '#000000',
            'T': [0, 255, 255],
        }
    }
)
💡
Shimoku table with colored labels
Basic labels with default colors
Label variants with default colors
Labels with custom colors
Different color configurations per column