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.

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

2dplot small improvements #28

Open
wants to merge 7 commits into
base: uPlot
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions assets/blocksConfig/uPlotSection.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,29 @@
"type": "scatter",
"opt": {
"pxAlign": false,
"cursor": {
"drag": {
"x":true,
"y":true,
"uni": 50
}
},
"scales": {
"x": {
"time": false,
"auto": true
"auto": true,
"range": [0,10]
},
"y": {
"auto": true
"auto": true,
"range": [0,10]
}
},
"axes": [{
"axis": [{
"space": 30
},{
"space":30
}],
"cursor": {
"show": true
},
"series": [{}, {}]
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/blockContainer/blockContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ module.exports = class BlockContainer {
this.htmlComponent.classList.add('grid-stack-item');
this.content = document.createElement('div');
this.content.style.flex = '1';

this.content.style.overflow = 'auto';

this.body = this.buildBody();
this.header = this.buildHeader();

Expand Down Expand Up @@ -132,7 +133,7 @@ module.exports = class BlockContainer {

}

uptadeBlockGeneralConfig(newConfig) {
updateBlockGeneralConfig(newConfig) {

this.eventHandler.dispatchEvent('DashboardNotSaved');

Expand Down
110 changes: 110 additions & 0 deletions src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@


Comment on lines +1 to +2
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Linha vazias

module.exports = function wheelZoomPlugin(opts) {
let factor = opts.factor || 0.75;

let xMin, xMax, yMin, yMax, xRange, yRange;

function clamp(nRange, nMin, nMax, fRange, fMin, fMax) {
if (nRange > fRange) {
nMin = fMin;
nMax = fMax;
}
else if (nMin < fMin) {
nMin = fMin;
nMax = fMin + nRange;
}
else if (nMax > fMax) {
nMax = fMax;
nMin = fMax - nRange;
}

return [nMin, nMax];
}

return {
hooks: {
ready: u => {
xMin = u.scales.x.min;
xMax = u.scales.x.max;
yMin = u.scales.y.min;
yMax = u.scales.y.max;

xRange = xMax - xMin;
yRange = yMax - yMin;

let over = u.over;
let rect = over.getBoundingClientRect();

over.addEventListener("mousedown", e => {
if (e.button == 1) {
e.preventDefault();

let left0 = e.clientX;

let scXMin0 = u.scales.x.min;
let scXMax0 = u.scales.x.max;

let xUnitsPerPx = u.posToVal(1, 'x') - u.posToVal(0, 'x');

function onMove(e) {
e.preventDefault();

let left1 = e.clientX;

let dx = xUnitsPerPx * (left1 - left0);

u.setScale('x', {
min: scXMin0 - dx,
max: scXMax0 - dx,
});
}

function onUp(e) {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
}

document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
});

over.addEventListener("wheel", e => {
e.preventDefault();

let { left, top } = u.cursor;

let leftPct = left / rect.width;
let btmPct = 1 - top / rect.height;
let xVal = u.posToVal(left, "x");
let yVal = u.posToVal(top, "y");
let oxRange = u.scales.x.max - u.scales.x.min;
let oyRange = u.scales.y.max - u.scales.y.min;

let nxRange = e.deltaY < 0 ? oxRange * factor : oxRange / factor;
let nxMin = xVal - leftPct * nxRange;
let nxMax = nxMin + nxRange;
[nxMin, nxMax] = clamp(nxRange, nxMin, nxMax, xRange, xMin, xMax);

let nyRange = e.deltaY < 0 ? oyRange * factor : oyRange / factor;
let nyMin = yVal - btmPct * nyRange;
let nyMax = nyMin + nyRange;
[nyMin, nyMax] = clamp(nyRange, nyMin, nyMax, yRange, yMin, yMax);

u.batch(() => {
u.setScale("x", {
min: nxMin,
max: nxMax,
});

u.setScale("y", {
min: nyMin,
max: nyMax,
});
});
});
}
}
};
}
54 changes: 37 additions & 17 deletions src/components/blocks/Blocks/uPlot/scatter.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const Block = require('../block');
const uPlot = require('uplot');
const { v4: uuidv4 } = require('uuid');
const ZoomWheelPlugin = require('./plugins/zoom-wheel');
// eslint-disable-next-line no-unused-vars
const ElementResize = require('javascript-detect-element-resize');

Expand All @@ -20,10 +21,30 @@ module.exports = class Scatter extends Block {
this.initR = false;

this.type = "uPlot";

this.opt.plugins = [
ZoomWheelPlugin({ factor: 0.75 })
]
}

get formConfig() {

const response = {
axis: {
x: {
dir: this.opt.scales.x.dir,
inputName: this.opt.series[0].label,
side: this.opt.axis[0].side,
},
y: {
dir: this.opt.scales.y.dir,
side: this.opt.axis[1].side,
type: this.opt.scales.y.distr
}
}
}

this._formConfig.uPlot.scatter = { ...response };
return this._formConfig

}
Expand Down Expand Up @@ -67,16 +88,18 @@ module.exports = class Scatter extends Block {

if (!notRedraw) this.redraw();

this.opt.scales.x.range = undefined;
this.opt.scales.y.range = undefined;

}

editXAxis(newConfig) {

this.opt.series[0].inputName = newConfig.inputName;
this.opt.series[0].label = newConfig.inputName;

this.opt.scales.x.distr = Number(newConfig.type);
this.opt.scales.x.dir = newConfig.dir;
this.opt.axes[0].side = Number(newConfig.side);
this.opt.scales.x.dir = Number(newConfig.dir);
this.opt.axis[0].side = Number(newConfig.side);
this.redraw();
}

Expand All @@ -86,7 +109,7 @@ module.exports = class Scatter extends Block {

this.opt.scales.y.dir = newConfig.dir;

this.opt.axes[1].side = Number(newConfig.side);
this.opt.axis[1].side = Number(newConfig.side);

this.redraw();

Expand Down Expand Up @@ -115,28 +138,22 @@ module.exports = class Scatter extends Block {
});
}

removeSerie(rmvdSerie) {
removeSerie(removedSerie) {

let currSerie = this.opt.series.find(serie => serie.uuid === rmvdSerie.uuid);
let currSerie = this.opt.series.find(serie => serie.uuid === removedSerie.uuid);
let index = this.opt.series.indexOf(currSerie);

if (index >= 0) {

if (this.opt.series.length === 2) {
this.data = [[...Array(11).keys()], []];
this.opt.series.push();
this.opt.series.splice(index + 1, 1);

const newMockData = [...Array(11).keys()].map((value) => (Math.sin(value) + (this.opt.series.length - 2)));
if (this.opt.series.length > this.data.length) this.data.push(newMockData);
this.opt.series.splice(1, 1);
this.opt.series.push({});
} else {
this.opt.series.splice(index, 1);
this.data.pop();
}


}

this.redraw();
}

Expand Down Expand Up @@ -168,15 +185,16 @@ module.exports = class Scatter extends Block {

setAutoResize() {

const widget = this.htmlComponent.parentElement;
const widget = this.htmlComponent;

addResizeListener(widget, () => {

this.plot.setSize({
width: widget.offsetWidth,
height: widget.offsetHeight * 0.8,
});

this.redraw();

});

}
Expand Down Expand Up @@ -225,7 +243,9 @@ module.exports = class Scatter extends Block {

this.data = preSavedConfig.data;
this.opt = preSavedConfig.opt;

this.opt.plugins = [
ZoomWheelPlugin({ factor: 0.75 })
]
this.plot = new uPlot(this.opt, this.data, this.htmlComponent);

for (let i = 0; i < this.opt.series.length; i++) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/blocks/Blocks/uPlot/uPlot.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ module.exports = class uPlot {

try {
return new blocks[preConfig.uPlot.type](preConfig, htmlComponent);
} catch {
} catch(error) {
console.warn(`TIPO DE BLOCO AINDA NÃO IMPLEMENTADO: ${preConfig.uPlot.type}`, error)
}

i
}

};
8 changes: 4 additions & 4 deletions src/components/components.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ const fs = require('fs');

module.exports = class Components {

static spliter(id, text, content, startOpen) {
static splitter(id, text, content, startOpen) {

const card = document.createElement('div');
card.className = 'card menuSpliter';
card.className = 'card menuSplitter';

const cardHeader = document.createElement('div');

Expand All @@ -27,11 +27,11 @@ module.exports = class Components {
if (startOpen) {

cardBodyCollapse.className = 'collapse show';
cardHeader.className = 'card-header menuSpliter-header';
cardHeader.className = 'card-header menuSplitter-header';

} else {

cardHeader.className = 'card-header menuSpliter-header collapsed';
cardHeader.className = 'card-header menuSplitter-header collapsed';
cardBodyCollapse.className = 'collapse';

}
Expand Down
4 changes: 2 additions & 2 deletions src/components/formBuilder/Field.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ module.exports = class Field {
cont++;

}
const splited = attributesUntilHere.split('.');
const sliced = splited.slice(0, splited.length - cont);
const splitted = attributesUntilHere.split('.');
const sliced = splitted.slice(0, splitted.length - cont);

this.att.split('.').forEach((att) => {

Expand Down
12 changes: 6 additions & 6 deletions src/components/formBuilder/formBuilder.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ class FormPattern {
}
if (attributesUntilHere !== undefined) {

const splited = attributesUntilHere.split('.');
const sliced = splited.slice(0, splited.length - cont);
const splitted = attributesUntilHere.split('.');
const sliced = splitted.slice(0, splitted.length - cont);
sliced.push(this.att);
this.att = sliced.join('.');

Expand Down Expand Up @@ -335,14 +335,14 @@ class Container extends FormPattern {
return container;

}
static spliter(config, containerConfig) {
static splitter(config, containerConfig) {

containerConfig = containerConfig || {};
const container = new Container(config, containerConfig);

const card = document.createElement('div');

card.className = 'card menuSpliter';
card.className = 'card menuSplitter';

const cardHeader = document.createElement('div');

Expand All @@ -367,11 +367,11 @@ class Container extends FormPattern {
if (containerConfig.startOpen) {

cardBodyCollapse.className = 'collapse show';
cardHeader.className = 'card-header menuSpliter-header';
cardHeader.className = 'card-header menuSplitter-header';

} else {

cardHeader.className = 'card-header menuSpliter-header collapsed';
cardHeader.className = 'card-header menuSplitter-header collapsed';
cardBodyCollapse.className = 'collapse';

}
Expand Down
Loading