feat: add cubic bezier curve

[fran68]

This PR adds the option to use the cubic Bezier C curve for a line graph. In this case using the show_state: last the state value matches the value shown by touching the last point.

It correlates much better to the values by the linear curve since it's not shaped in the way the quadratic bezier curve is.

[ildar170975]

Will check it when be near a PC.
Just a quick remark: please move “0.15” to const.js.

[ildar170975]

Is it needed to specify minBound or maxBound?
(these are optional arguments of checkNumericOption())
IMHO - should be 0...0.25 (or smaller)

[ildar170975]

@fran68
In Readme, it is needed to add a description of a tension option (if this is a config option).
Also, is the "tension" a good name? Shouldn't the name reflect what it is related to? (like smoothing_tension, you better know a physical meaning of this parameter)
Googled the subject a bit, seems that "tension" is a some kind of "official" designation, let's stick to it, but perhaps we need to rename it to "smoothing_tension".
Also, add a note in a description that it only matters in case of smoothing = bezierc.

[ildar170975]

Does it mean that the smoothing option can be false/true or bezierc? Let's specify it here explicitly. Please check a proposed description, see below.

[ildar170975]

There is a mix of different namings here, let's follow this rule: if a property has a getter/setter - then it's name is this._something (starts with "_"), otherwise just this.something. THing is that some not-undescored properties are only used in the class, so it is really a mix imho... I will go through all properties of Graph class & set "underscore" where i it is needed (although it is just a cosmetic/stylistic change).

[ildar170975]

We need to add some description of the new smoothing method into Readme.
User should understand (in some extent) a difference between smoothing: true & smoothing: bezierc (and for more details they can google, but some minimal info should be provided in Docs, may be a few words). And a possible user question might be "why not making the new method as a default if it is better?"

As a variant:
| smoothing | boolean or string | true | v0.8.0 | Set the graph line shape: false (straight lines), true (quadratic Bezier curve, legacy method), or 'cubic' (cubic Bezier curve, gives a more precise presentation). |

Here:

1. I intentionally do not use a "smoothness" word in a description to allow to add a new "stepline" method in future (like in a stock history-graph). Imho "shape" can refer both to a "smoothness" & "stepline".
2. The bezierc word might be "too much"; since the current method is "quadratic" - why not to add a new "cubic" method? (i.e. rename the bezierc to cubic)

[ildar170975]

In this case using the show_state: last the state value matches the value shown by touching the last point.

1. Note that per-entity option show_state can only be true/false.
2. Currently with a show.state: last we already can see the last point's value, please check:

Imho, the main point here might be "the new BezierC smoothing gives a nicer look" or something similar...
(better than the currently implemented quadratic spline etc etc)

For the record - it seems that this is called "Catmull-Rom spline to Bezier curve conversion" (using 4 points to create a curve based on cubic curves).

Here is what I got with this PR:

type: custom:mini-graph-card
entities:
  - entity: sensor.xiaomi_cg_1_co2
    smoothing: bezierc
    _show_graph: false
  - entity: sensor.xiaomi_cg_1_co2
    smoothing: true
    _show_graph: false
  - entity: sensor.xiaomi_cg_1_co2
    smoothing: false
    line_width: 2
    color: black
    _show_graph: false
height: 200
show:
  points: true
  labels: true
  state: true
  fill: false

Number of points for smoothing=false & bezierc are same (12 = 24*0.5), there are points in the beginning & in the end (points for both methods are same).
For the current quadratic curve (smoothing=true) there are 11 points (because of midPoints), there are no points in the beginning & in the end.
I would say, the current method is suspicious in comparison to the proposed one.

Totally like the new tension option))))

We need to set min/maxBound for this option.
IMHO - should be 0...0.25 (or smaller)

[ildar170975]

Shouldn't they be addressed as p[X] instead of p[0] ? (for consistency)
Same comment for coords[0][0] above.

[ildar170975]

Better to remove this comment since we may change a default value in "const.js"

[ildar170975]

Same as 1/6 ? (approx). Saw this "1/6" parameter in formulae in internet.