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 { ...@@ -16,7 +16,7 @@ import {
import { AnalysisResultsProvider, Result } from "./analysisResults"; import { AnalysisResultsProvider, Result } from "./analysisResults";
import { ModestCommands } from "./commands"; import { ModestCommands } from "./commands";
import { getDocumentVars, initializeTools, ModestSidebarProvider } from "./sidebar"; import { getDocumentVars, initializeTools, ModestSidebarProvider } from "./sidebar";
import { ResultNotification } from "./utils"; import { ResultNotification, getNonce } from "./utils";
export let client: LanguageClient | undefined; export let client: LanguageClient | undefined;
export let provider: ModestSidebarProvider; export let provider: ModestSidebarProvider;
...@@ -238,7 +238,7 @@ export function activate(context: ExtensionContext) { ...@@ -238,7 +238,7 @@ export function activate(context: ExtensionContext) {
); );
vscode.commands.registerCommand( vscode.commands.registerCommand(
"analysisResults.plotValue", "analysisResults.plotValue",
(res: Result) => plotValue(res) (res: Result) => plotValue(res, context)
); );
vscode.commands.registerCommand( vscode.commands.registerCommand(
...@@ -336,8 +336,12 @@ function openInEditor(prov: AnalysisResultsProvider, res: Result) { ...@@ -336,8 +336,12 @@ function openInEditor(prov: AnalysisResultsProvider, res: Result) {
const date = new Date().toISOString().split('.')[0]; const date = new Date().toISOString().split('.')[0];
const parent = res.getParentName() ? res.getParentName() + "-" : ""; const parent = res.getParentName() ? res.getParentName() + "-" : "";
const newPath = `${wsPath}/analysis/${prov.getModestFile()}-${parent}${res.getLabel()}.txt`; const newPath = `${wsPath}/analysis/${prov.getModestFile()}-${parent}${res.getLabel()}.txt`;
const regex = new RegExp('(\\)|\\.),', 'gm'); var newText = res.getValue();
const newText = res.getValue().replace(regex, "$1,\n");
if (res.getIsPlottable()) {
const regex = new RegExp('(\\)|\\.),', 'gm');
newText = res.getValue().replace(regex, "$1,\n");
}
if (pathExists(newPath)) { if (pathExists(newPath)) {
vscode.workspace.openTextDocument(newPath).then(async document => { vscode.workspace.openTextDocument(newPath).then(async document => {
...@@ -457,13 +461,14 @@ function highlight(res: Result) { ...@@ -457,13 +461,14 @@ function highlight(res: Result) {
analysisResultsCompProvider.refresh(); analysisResultsCompProvider.refresh();
} }
function plotValue(res: Result) { function plotValue(res: Result, context: ExtensionContext) {
const panel = vscode.window.createWebviewPanel( const panel = vscode.window.createWebviewPanel(
'plotGraph', 'plotGraph',
`Plot of ${res.getLabel()} of ${res.getParentName()}`, `Plot of ${res.getLabel()} of ${res.getParentName()}`,
vscode.ViewColumn.One, vscode.ViewColumn.One,
{ {
enableScripts: true enableScripts: true,
localResourceRoots: [context.extensionUri]
} }
); );
...@@ -476,33 +481,120 @@ function plotValue(res: Result) { ...@@ -476,33 +481,120 @@ function plotValue(res: Result) {
dataPoints.push({x: Number(element[0]), y: Number(element[1])}); dataPoints.push({x: Number(element[0]), y: Number(element[1])});
}); });
console.log(dataPoints); 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 QuickChart = require('quickchart-js'); const styleVSCodeUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, 'media', 'vscode.css'));
const nonce = getNonce();
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());
panel.webview.html = ` panel.webview.html = `
<html> <html>
<head>
<link href="${styleResetUri}" rel="stylesheet">
<link href="${styleVSCodeUri}" rel="stylesheet">
</head>
<body> <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> </body>
</html> </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 { 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