I’m trying to make this sessions tool based on something that someone else posted work with one rectangle because the thousands of rectangles it draws on every bar make my charts lag.
const predef = require("./tools/predef");
const { px, du, op, min } = require("./tools/graphics");
class Sessions {
init() {
this.sessions = [
{
key: "oil 1",
start_time: 500,
end_time: 1130,
fillStyle: {
color: "white",
opacity: 3,
}
},
{
key: "oil 2",
start_time: 600,
end_time: 1300,
fillStyle: {
color: "white",
opacity: 3,
}
},
{
key: "oil 3",
start_time: 0,
end_time: 200,
fillStyle: {
color: "white",
opacity: 3,
}
},
];
}
map(d, i, history) {
let items = [];
for (const session of this.sessions) {
let hr_min = d.timestamp().getHours() * 100 + d.timestamp().getMinutes();
if (hr_min >= session.start_time && hr_min < session.end_time) {
items.push({
tag: "Shapes",
key: session.key,
primitives: [
{
tag: "Rectangle",
position: {
x: du(d.index() - 0.5),
y: px(0),
},
size: {
height: px(1000),
width: du(1.0),
},
},
],
fillStyle: session.fillStyle
});
}
}
return {
graphics: {
items: items,
},
};
}
}
module.exports = {
name: "Sessions",
description: "Sessions",
inputType: "bars",
calculator: Sessions,
tags: ["A"],
params: {},
};
The rectangle code requires a center point and dimensions, so I need to find the center between the session start bar and current bar. The width would be the full distance between those two, and the height would ideally be infinite, or like 10k if that doesn’t work. If not possible with one rectangle I can try polygon.
* This is a `Shape` primitive. Defines an instance of a Rectangle shape for use in the Shapes or ContourShapes `primitives` value.
* Usage:
* javascript
* // Inside a calculator's map function, this particular definition will draw
* // red 24x24px squares centered at { x: index, y: value } of each rendered bar
* ...
* {
* graphics: {
* items: [
* {
* tag: 'Shapes',
* key: 'rects',
* //the rectangle is a primitve
* primitives: [
* {
* tag: 'Rectangle',
* position: {
* x: du(d.index()),
* y: du(d.value()),
* }
* size: {
* height: px(24),
* width: px(24)
* }
* }
* ],
* fillStyle: {
* color: '#f00'
* }
* }
* ]
* }
* }
* ...
*
*/
export interface Rectangle {
readonly tag: 'Rectangle';
/** */
readonly position: Point;
readonly size: Size;
readonly infiniteStart?: boolean;
readonly infiniteEnd?: boolean;
}
_____________________________________
* This is a `Shape` primitive. Defines an instance of a `Polygon` shape for use in the `Shapes` or `ContourShapes` `primitives` value.
* Usage:
* javascript
* //within a map function's return object. This will draw a red triangle rect at each rendered
* //bar's value and index.
* ...
* {
* graphics: {
* items: [
* {
* tag: "Shapes",
* key: 'tris',
* //the polygon is a primitve
* primitives: [
* {
* tag: 'Polygon',
* points: [
* //top
* {
* x: du(d.index()),
* y: op(du(d.value()), '-', px(4))
* },
* //right
* {
* x: op(du(d.index()), '+', px(4)),
* y: du(d.value())
* },
* //left
* {
* x: op(du(d.index()), '-', px(4)),
* y: du(d.value())
* }
* ]
* }
* ],
* fillStyle: {
* color: '#f00'
* }
* }
* ]
* }
* }
* ...
*
*/
export interface Polygon {
readonly tag: 'Polygon';
/** An array of `Point` objects that describe this `Polygon`. */
readonly points: readonly Point[];
}
How can I store session start bar, use it to measure width and center of rectangle relative to current bar, and then stop drawing rectangle at session end bar?
Also, is it possible to just set the session end in the future at the actual session end bar?
Can one of you wizards help me?