# Colored labels

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

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.

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FZ7Tag17yI0fJEeRPf9x8%2Fimatge.png?alt=media&#x26;token=cb840f21-2d39-4e88-a035-64f6abea0871" alt=""><figcaption><p>Shimoku table with colored labels</p></figcaption></figure>

## 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:

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FMENJtwo2Xbt8qTc4pdIp%2Fimage.png?alt=media&#x26;token=49ede7c5-f994-42c6-a245-9d02f068e45e" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
It is highly recommended to always use the default colors
{% endhint %}

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

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2Fu71Q5Pncr7VBVyDA9Fh1%2FTable%20with%20Chips.png?alt=media&#x26;token=6382c14a-d33a-4b68-914f-cdce1f74c27b" alt=""><figcaption><p>Basic labels with default colors</p></figcaption></figure>

### 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:

&#x20;                      `(column name`*`, variant option)`*` `                      &#x20;

When executing the following code:

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

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FP2i7eELto3GgY0hDTxrV%2FTable%20with%20Chips%202.png?alt=media&#x26;token=c77bef4c-d1df-4c97-b516-714a30883398" alt=""><figcaption><p>Label variants with default colors</p></figcaption></figure>

### 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:

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FV1n3l9eQRRsciye4jd5n%2Fimage.png?alt=media&#x26;token=c1395326-d932-4806-b25c-c22bc64e3393" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FYSMj4lwsfpODPnETDCsC%2Fimage.png?alt=media&#x26;token=3496ddeb-c243-4efd-bd7d-bd89b9bacb21" alt=""><figcaption></figcaption></figure>

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

<pre><code><strong>                                   #000000 - #FFFFFF 
</strong></code></pre>

&#x20;the other uses a list representation ( *\[R,G,B] )*:

<pre><code><strong>                              [0, 0, 0] - [255, 255, 255] 
</strong></code></pre>

Here is an example on how it would be used:

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

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F5WjxpM1KdoLUPcOdMkRT%2FTable%20with%20Chips%203.png?alt=media&#x26;token=c7d858f2-42d9-45d3-8701-12b7d1f3241d" alt=""><figcaption><p>Labels with custom colors</p></figcaption></figure>

### Multiple Configurations Per Column&#x20;

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:

```python
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:

```json
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,
     } 
}
```

{% hint style="info" %}
&#x20;The definitions of color admit all previous configuration options.
{% endhint %}

Here it can be seen how ranges can be used:

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

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FTYMQSHUbLdIL4mNGg896%2FTable%20with%20Chips%204.png?alt=media&#x26;token=435ced05-92c9-4043-b379-eafd593ea770" alt=""><figcaption><p>Different color configurations per column</p></figcaption></figure>
