[IMP] website, web_editor: add new chart snippet

Introducing a new snippet called Chart.
This snippet uses the lib https://www.chartjs.org/

6 types of graph are possible:
Bar vertical
Bar horizontal
Line
Pie
Doughnut
Radar

task-2092267

closes odoo/odoo#40051

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js

@@ -158,16 +158,32 @@ const ColorPaletteWidget = Widget.extend({
                 return ColorpickerDialog.normalizeCSSColor(el.style.backgroundColor);
             })
         ));
+        this.trigger_up('get_custom_colors', {
+            onSuccess: (colors) => {
+                colors.forEach(color => {
+                    this._addCustomColor(existingColors, color);
+                });
+            },
+        });
         _.each(this.options.$editable.find('[style*="color"]'), el => {
             for (const colorProp of ['color', 'backgroundColor']) {
-                const color = ColorpickerDialog.normalizeCSSColor(el.style[colorProp]);
-                if (color && !existingColors.has(color)) {
-                    this._addCustomColorButton(color);
-                    existingColors.add(color);
-                }
+                this._addCustomColor(existingColors, el.style[colorProp]);
             }
         });
     },
+    /**
+     * Add the color to the custom color section if it is not in the existingColors.
+     *
+     * @param {string[]} existingColors Colors currently in the colorpicker
+     * @param {string} color Color to add to the cuustom colors
+     */
+    _addCustomColor: function (existingColors, color) {
+        const normColor = ColorpickerDialog.normalizeCSSColor(color);
+        if (color && !existingColors.has(normColor)) {
+            this._addCustomColorButton(normColor);
+            existingColors.add(normColor);
+        }
+    },
     /**
      * Add a custom button in the coresponding section.
      *

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -408,6 +408,47 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        // Chart Snippet
+        we-matrix {
+            overflow-y: auto;
+
+            table {
+                table-layout: fixed;
+                width: 100%;
+
+                td, th {
+                    text-align: center;
+                    we-button {
+                        display: inline-block;
+                        color: white;
+                        height: 100%;
+
+                        &.o_we_matrix_remove_col, &.o_we_matrix_remove_row {
+                            display: none;
+                        }
+                    }
+                    input {
+                        border: 1px solid var(--o-we-bg-color-dark);
+                        background-color: var(--o-we-bg-color-dark);
+                        color: var(--o-we-color);
+                        font-size: 12px;
+                        width: 100%;
+                    }
+                    &:last-child {
+                        width: 28px;
+                    }
+                }
+                &.o_we_matrix_five_col {
+                    width: auto;
+                    td, th {
+                        input {
+                            width: 43px;
+                        }
+                    }
+                }
+            }
+        }
+
         //----------------------------------------------------------------------
         // Layout Utils
         //----------------------------------------------------------------------