[charts] Support color scale

[alexfauquette]

Introduce a way to map values to colors.

Rechart

Use a trick base on gradient color. We used this trick to create https://mui.com/x/react-charts/areas-demo/#areachartfillbyvalue

NB: During this PR, an idea for demo was to display bar chart with monthly temperature going from blue to red

D3 JS

Ordinal scale to map a finit number of value to a finit number of colors. It's just a maaping from and array of values to an array of hexa

const color = d3.scaleOrdinal(d3.schemeBlues[9]);

Sequential scales for continuous values. It can map a continuouse range to color interpolation

const color = d3.scaleSequential(d3.interpolateBlues);

The best might be to let developers provide the interpolation they want to use, and don't try to reinvent them

Echart

They have a notion of visual Map that map values to visual feature such as symbol, size, or color.

For the Gauge they went with a much simpler solution

{
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },

But for Heat chart it's what they use: https://echarts.apache.org/examples/en/editor.html?c=heatmap-large

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@alexfauquette: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.