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
......@@ -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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment