Smooth Lines in the Chart

[liuderchi]

it would look better if the line in the chart is smooth. Currently there are cusps.

GOAL

• to have better interpolation methods to have curve with higher dimension (e.g. Bézier)

NOTE

• currently it is drawn with svg <polyline> with point data specified in points attr
• relevant react component: react-sparklines

TODO

• [x] survey possible curve interpolation api for react-sparklines
• [x] understand how react-sparklines generate polyline with data
• [x] check polyline attr to support Bézier curves
• [x] svg path survey

[liuderchi]

Actions

• [x] survey possible curve interpolation api for react-sparklines
  • from README.md looks like NO API for smooth curve
    • using <SparklinesLine />
    • in src it has <SparklinesCurve /> using svg path and additional points are inserted
  • PlanB: manually insert points to look smoother. (Require Bézier Math Lib)
• [x] understand how react-sparklines generate polyline with data
  • array of numbers will be processed then sent to data of <polyline>
• [x] check polyline attr to support Bézier curves
  • NO. polyline is for straight lines. Adding more points won't help when zoomed.
  • BTW svg path supports Bézier curve
  • PlanC use other component to generate svg path from data (D3?)
• [x] svg path survey
  • command C is for cubic Bézier curve
  • command Q is for quadratic Bézier curve
  • currently <SparklinesCurve /> uses C

Result

by using <SparklinesCurve /> with setting prop divisor, we now have smoother curve

• divisor is used to insert additional control points for Bézier curve
  • I set it to 0.33 because it means adding 2 control points at 1/3 and 2/3 of the distance
  • how it looks when zoomed 300%

.