Skip to content

Commit

Permalink
feat: goto feature; hit g to open a menu with locations to go to, suc…
Browse files Browse the repository at this point in the history 
…h as max and min value
  • Loading branch information
@ellvix
ellvix committed Jan 21, 2025
1 parent 54e4f9c commit 54c563f
Show file tree
Hide file tree
Showing 15 changed files with 311 additions and 88 deletions.
1 change: 1 addition & 0 deletions galleries/bar_plot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1154,6 +1154,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/boxplot_horizontal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1684,6 +1684,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
<html></html>
Expand Down
1 change: 1 addition & 0 deletions galleries/boxplot_vertical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1802,6 +1802,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/dodged_bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,6 +824,7 @@
<script src="../src/js/histogram.js"></script>
<script src="../src/js/segmented.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/heatmap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1656,6 +1656,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/histogram.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1548,6 +1548,7 @@
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/histogram.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/lineplot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1003,6 +1003,7 @@
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/lineplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/scatterplot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5885,6 +5885,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/stacked.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -756,6 +756,7 @@
<script src="../src/js/histogram.js"></script>
<script src="../src/js/segmented.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/stacked_normalized.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -789,6 +789,7 @@
<script src="../src/js/histogram.js"></script>
<script src="../src/js/segmented.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ gulp.task('scripts', function () {
'./src/js/lineplot.js',
'./src/js/segmented.js',
'./src/js/controls.js',
'./src/js/goto.js',
'./src/js/init.js',
]) // order matters here
.pipe(concat('maidr.js'))
Expand Down
30 changes: 30 additions & 0 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,36 @@
/* pointer-events: none; */
}

.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
}

.btn-link.active {
color: #0056b3;
border: 2px solid #0056b3;
}

/* Menu stuff */
.modal {
position: fixed;
Expand Down
178 changes: 90 additions & 88 deletions src/js/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,95 +200,97 @@ class Control {
SetPrefixControls() {
// prefix events, l + x, where x is a key for the title, axis, etc
// we listen for a moment when l is hit for a key to follow
constants.events.push([
document,
'keydown',
function (e) {
// init
let pressedTimeout = null;

// enable / disable prefix mode
if (e.key == 'l') {
control.pressedL = true;
if (pressedTimeout != null) {
clearTimeout(pressedTimeout);
pressedTimeout = null;
}
pressedTimeout = setTimeout(function () {
control.pressedL = false;
}, constants.keypressInterval);
}

// Prefix mode stuff: L is enabled, look for these keys
if (control.pressedL) {
if (e.key == 'x') {
// X: x label
let xlabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
xlabel = plot.plotLegend.x;
} else if (singleMaidr.type == 'hist') {
xlabel = plot.legendX;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type.includes('point')
) {
xlabel = plot.x_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
xlabel = plot.plotLegend.x;
}
display.displayInfo('x label', xlabel);
control.pressedL = false;
} else if (e.key == 'y') {
// Y: y label
let ylabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
ylabel = plot.plotLegend.y;
} else if (singleMaidr.type == 'hist') {
ylabel = plot.legendY;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type == 'line' ||
singleMaidr.type.includes('point')
) {
ylabel = plot.y_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
ylabel = plot.plotLegend.y;
}
display.displayInfo('y label', ylabel);
control.pressedL = false;
} else if (e.key == 't') {
// T: title
display.displayInfo('title', plot.title);
control.pressedL = false;
} else if (e.key == 's') {
// subtitle
display.displayInfo('subtitle', plot.subtitle);
control.pressedL = false;
} else if (e.key == 'c') {
// caption
display.displayInfo('caption', plot.caption);
control.pressedL = false;
} else if (e.key == 'f') {
display.displayInfo('fill', plot.fill);
control.pressedL = false;
} else if (e.key != 'l') {
control.pressedL = false;
for (let i = 0; i < this.allControlElements.length; i++) {
constants.events.push([
this.allControlElements[i],
'keydown',
function (e) {
// init
let pressedTimeout = null;

// enable / disable prefix mode
if (e.key == 'l') {
control.pressedL = true;
if (pressedTimeout != null) {
clearTimeout(pressedTimeout);
pressedTimeout = null;
}
pressedTimeout = setTimeout(function () {
control.pressedL = false;
}, constants.keypressInterval);
}

// Prefix mode stuff: L is enabled, look for these keys
if (control.pressedL) {
if (e.key == 'x') {
// X: x label
let xlabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
xlabel = plot.plotLegend.x;
} else if (singleMaidr.type == 'hist') {
xlabel = plot.legendX;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type.includes('point')
) {
xlabel = plot.x_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
xlabel = plot.plotLegend.x;
}
display.displayInfo('x label', xlabel);
control.pressedL = false;
} else if (e.key == 'y') {
// Y: y label
let ylabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
ylabel = plot.plotLegend.y;
} else if (singleMaidr.type == 'hist') {
ylabel = plot.legendY;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type == 'line' ||
singleMaidr.type.includes('point')
) {
ylabel = plot.y_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
ylabel = plot.plotLegend.y;
}
display.displayInfo('y label', ylabel);
control.pressedL = false;
} else if (e.key == 't') {
// T: title
display.displayInfo('title', plot.title);
control.pressedL = false;
} else if (e.key == 's') {
// subtitle
display.displayInfo('subtitle', plot.subtitle);
control.pressedL = false;
} else if (e.key == 'c') {
// caption
display.displayInfo('caption', plot.caption);
control.pressedL = false;
} else if (e.key == 'f') {
display.displayInfo('fill', plot.fill);
control.pressedL = false;
} else if (e.key != 'l') {
control.pressedL = false;
}
}
}
},
]);
},
]);
}
}

/**
Expand Down
Loading

0 comments on commit 54c563f

Please sign in to comment.