Colored labels

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.

Shimoku table with colored labels

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'
    },
)

Basic labels with default colors

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'
    },
)

Label variants with default colors

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'
    }
)

Labels with custom colors

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],
        }
    }
)

Different color configurations per column