Skip to content
Snippets Groups Projects
Commit 170fc61b authored by Sytze de Witte's avatar Sytze de Witte
Browse files

plot

parent eb08c59c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 118 additions and 26 deletions
src/extension.ts
+ 118
− 26
View file @ 170fc61b
......@@ -16,7 +16,7 @@ import {
import { AnalysisResultsProvider, Result } from "./analysisResults";
import { ModestCommands } from "./commands";
import { getDocumentVars, initializeTools, ModestSidebarProvider } from "./sidebar";
import { ResultNotification } from "./utils";
import { ResultNotification, getNonce } from "./utils";
export let client: LanguageClient | undefined;
export let provider: ModestSidebarProvider;
......@@ -238,7 +238,7 @@ export function activate(context: ExtensionContext) {
);
vscode.commands.registerCommand(
"analysisResults.plotValue",
(res: Result) => plotValue(res)
(res: Result) => plotValue(res, context)
);
vscode.commands.registerCommand(
......@@ -336,8 +336,12 @@ function openInEditor(prov: AnalysisResultsProvider, res: Result) {
const date = new Date().toISOString().split('.')[0];
const parent = res.getParentName() ? res.getParentName() + "-" : "";
const newPath = `${wsPath}/analysis/${prov.getModestFile()}-${parent}${res.getLabel()}.txt`;
const regex = new RegExp('(\\)|\\.),', 'gm');
const newText = res.getValue().replace(regex, "$1,\n");
var newText = res.getValue();
if (res.getIsPlottable()) {
const regex = new RegExp('(\\)|\\.),', 'gm');
newText = res.getValue().replace(regex, "$1,\n");
}
if (pathExists(newPath)) {
vscode.workspace.openTextDocument(newPath).then(async document => {
......@@ -457,13 +461,14 @@ function highlight(res: Result) {
analysisResultsCompProvider.refresh();
}
function plotValue(res: Result) {
function plotValue(res: Result, context: ExtensionContext) {
const panel = vscode.window.createWebviewPanel(
'plotGraph',
`Plot of ${res.getLabel()} of ${res.getParentName()}`,
vscode.ViewColumn.One,
{
enableScripts: true
enableScripts: true,
localResourceRoots: [context.extensionUri]
}
);
......@@ -476,33 +481,120 @@ function plotValue(res: Result) {
dataPoints.push({x: Number(element[0]), y: Number(element[1])});
});
console.log(dataPoints);
const QuickChart = require('quickchart-js');
const myChart = new QuickChart();
myChart
.setConfig({
type: 'scatter',
data: {
datasets: [{
label: res.getParentName(),
data: dataPoints
}]
}
})
.setBackgroundColor('white'); // transparent
// Print the chart URL
console.log(myChart.getUrl());
const chart = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, 'node_modules', 'chart.js', 'dist', 'Chart.js'));
const styleResetUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, 'media', 'reset.css'));
const styleVSCodeUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, 'media', 'vscode.css'));
const nonce = getNonce();
panel.webview.html = `
<html>
<head>
<link href="${styleResetUri}" rel="stylesheet">
<link href="${styleVSCodeUri}" rel="stylesheet">
</head>
<body>
<img src="${myChart.getUrl()}" />
<canvas id="myChart"></canvas>
<button style="width: fit-content; padding: var(--input-margin-vertical) 0.8em;" onclick="save()">Save as Image</button>
<script nonce="${nonce}" src="${chart}"></script>
<script nonce="${nonce}">
var htmlStyle = document.documentElement.style;
var fgColor = htmlStyle.getPropertyValue("--vscode-editor-foreground");
var darkFgColor = htmlStyle.getPropertyValue("--vscode-sideBar-background");
var bgColor = htmlStyle.getPropertyValue("--vscode-editor-background");
Chart.defaults.global.defaultFontColor = fgColor;
Chart.defaults.scale.gridLines.color = fgColor;
Chart.plugins.register({
beforeDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
}
});
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '${res.getParentName()}',
data: [${dataPoints.map(elem => `{x:${elem.x},y:${elem.y}}`)}],
backgroundColor: 'rgba(0, 152, 255, 1)',
pointRadius: 4,
borderColor: 'rgba(0, 114, 191, 1)',
borderWidth: 1,
fill: false,
showLine: true,
tension: 0
}]
},
options: {
scales: {
xAxes: [{
display: true,
gridLines: {
color: darkFgColor,
zeroLineColor: fgColor
}
}],
yAxes: [{
display: true,
gridLines: {
color: darkFgColor,
zeroLineColor: fgColor
}
}]
},
bezierCurve: false,
animation: {
onComplete: done
}
}
});
const vscode = acquireVsCodeApi();
var image;
function done(){
image = document.getElementById('myChart').toDataURL('image/png');
}
function save(){
if (image) {
vscode.postMessage({
command: 'save',
url: image.toString()
})
}
}
</script>
</body>
</html>
`;
panel.webview.onDidReceiveMessage(
message => {
switch (message.command) {
case 'save':
var data = message.url.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
saveImage(res, buf);
return;
}
},
undefined,
context.subscriptions
);
}
function saveImage(res: Result, url: Buffer) {
const defaultUri = vscode.workspace.workspaceFolders
? vscode.Uri.parse(`${vscode.workspace.workspaceFolders[0].uri.fsPath}/analysis/${res.getParentName()}-${res.getLabel()}.png`)
: undefined;
vscode.window.showSaveDialog({ defaultUri: defaultUri }).then(f => {
if (f) {
fs.writeFileSync(f.fsPath, url);
}
});
}
function pathExists(p: string): boolean {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment