improvement: add fillToBottom option

to fill timeSeries to 0 instead of to the bottom of the canvas Closes #65 Co-authored-by: WofWca <wofwca@protonmail.com>
joewalnes · Jan 8, 2023 · d86a9db · d86a9db
1 parent ee8ebb2
commit d86a9db
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/builder/index.html b/builder/index.html
@@ -418,6 +418,7 @@
         startControlSection('Series');
         bindColor({target: chart.seriesSet[0].options, name: 'Series line color', propertyName: 'strokeStyle', optional: true, enabled: true, opacity: 1, emptyValue: 'none'});
         bindColor({target: chart.seriesSet[0].options, name: 'Series fill color', propertyName: 'fillStyle', optional: true, enabled: false, opacity: 0.3});
+        bindCheckBox({target: chart.seriesSet[0].options, name: 'Fill to the bottom of the canvas', propertyName: 'fillToBottom'});
         bindRange({target: chart.seriesSet[0].options, name: 'Series line width', propertyName: 'lineWidth', min: 0.5, max: 5, scale: 10});
         bindDropDown({
           target: chart.seriesSet[0].options,

diff --git a/smoothie.d.ts b/smoothie.d.ts
@@ -18,6 +18,11 @@ export interface ITimeSeriesPresentationOptions {
      */
     interpolation?: "linear" | "step" | "bezier";
     tooltipLabel?: string;
+    /**
+     * Determines how far on the Y axis the fill region spans. Truthy value (default) - to the
+     * bottom of the canvas, falsy value - to 0.
+     */
+    fillToBottom?: boolean;
 }
 
 export declare class TimeSeries {

diff --git a/smoothie.js b/smoothie.js
@@ -109,6 +109,7 @@
  * v1.36.1: Fix a potential XSS when `tooltipLabel` or `strokeStyle` are controlled by users, by @WofWca
  * v1.36.2: fix: 1px lines jumping 1px left and right at rational `millisPerPixel`, by @WofWca
  *          perf: improve `render()` performane a bit, by @WofWca
+ * v1.37: Add `fillToBottom` option to fill timeSeries to 0 instead of to the bottom of the canvas, by @socketpair & @WofWca (#140)
  */
 
   // Date.now polyfill
@@ -493,7 +494,9 @@
 
   SmoothieChart.defaultSeriesPresentationOptions = {
     lineWidth: 1,
-    strokeStyle: '#ffffff'
+    strokeStyle: '#ffffff',
+    // Maybe default to false in the next breaking version.
+    fillToBottom: true,
   };
 
   /**
@@ -507,7 +510,8 @@
    *   strokeStyle: '#ffffff',
    *   fillStyle: undefined,
    *   interpolation: undefined;
-   *   tooltipLabel: undefined
+   *   tooltipLabel: undefined,
+   *   fillToBottom: true,
    * }
    * </pre>
    */
@@ -1051,8 +1055,11 @@
 
       if (seriesOptions.fillStyle) {
         // Close up the fill region.
-        context.lineTo(lastX, dimensions.height + lineWidthMaybeZero + 1);
-        context.lineTo(firstX, dimensions.height + lineWidthMaybeZero + 1);
+        var fillEndY = seriesOptions.fillToBottom
+          ? dimensions.height + lineWidthMaybeZero + 1
+          : valueToYPosition(0, 0);
+        context.lineTo(lastX, fillEndY);
+        context.lineTo(firstX, fillEndY);
 
         context.fillStyle = seriesOptions.fillStyle;
         context.fill();