Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improvement: fill timeSeries to 0 instead of to the bottom of the canvas #140

Merged
merged 1 commit into from Jan 8, 2023
Merged

improvement: fill timeSeries to 0 instead of to the bottom of the canvas #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions builder/index.html
View file
Open in desktop
Expand Up @@ -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,
Expand Down
5 changes: 5 additions & 0 deletions smoothie.d.ts
View file
Open in desktop
Expand Up @@ -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 {
Expand Down
15 changes: 11 additions & 4 deletions smoothie.js
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -493,7 +494,9 @@

SmoothieChart.defaultSeriesPresentationOptions = {
lineWidth: 1,
strokeStyle: '#ffffff'
strokeStyle: '#ffffff',
// Maybe default to false in the next breaking version.
fillToBottom: true,
};

/**
Expand All @@ -507,7 +510,8 @@
* strokeStyle: '#ffffff',
* fillStyle: undefined,
* interpolation: undefined;
* tooltipLabel: undefined
* tooltipLabel: undefined,
* fillToBottom: true,
* }
* </pre>
*/
Expand Down Expand Up @@ -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();
Expand Down