updated histogram

UST-QuAntiL · Dec 6, 2023 · 252a36a · 252a36a
1 parent 5bfbfb3
commit 252a36a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/src/app/components/qunicorn-app/histogram-plot/histogram-plot.component.ts b/src/app/components/qunicorn-app/histogram-plot/histogram-plot.component.ts
@@ -31,7 +31,7 @@ export class HistogramPlotComponent implements OnChanges {
         {
           label: 'Counts',
           data: countsData,// Object.values(this.counts),
-          backgroundColor: "#0000ff"
+          backgroundColor: "#3f51b5"
         },
       ]
     };
@@ -57,7 +57,7 @@ export class HistogramPlotComponent implements OnChanges {
     canvas.setAttribute("height", "5px");
     canvas.setAttribute("width", "50px");
     canvas.width = 500;
-    canvas.height = 500;
+    canvas.height = 300;
     const context = canvas.getContext('2d');
     context.scale(0.5, 0.5);
     //chartcontext.scale(50, 50);

diff --git a/src/app/components/qunicorn-app/qunicorn-view/qunicorn-app.component.html b/src/app/components/qunicorn-app/qunicorn-view/qunicorn-app.component.html
@@ -122,21 +122,25 @@
         </div>
         <div class="response-frame">
           <div *ngIf="result">
-            <h3>Counts:</h3>
-            <ul>
-              <li *ngFor="let count of counts | keyvalue">
-                {{ count.key }}: {{ count.value }}
-              </li>
-            </ul>
-
-            <h3>Probabilities:</h3>
-            <ul>
-              <li *ngFor="let probability of probabilities | keyvalue">
-                {{ probability.key }}: {{ probability.value }}
-              </li>
-            </ul>
+            <div style="width:40%; float:left;">
+              <h3>Counts:</h3>
+              <ul>
+                <li *ngFor="let count of counts | keyvalue">
+                  {{ count.key }}: {{ count.value }}
+                </li>
+              </ul>
+            </div>
+
+            <div style="width:40%; float:left;">
+              <h3>Probabilities:</h3>
+              <ul>
+                <li *ngFor="let probability of probabilities | keyvalue">
+                  {{ probability.key }}: {{ probability.value }}
+                </li>
+              </ul>
+            </div>
 
-            <h3>Histogram:</h3>
+            <h3 style="clear: left;">Histogram:</h3>
             <app-histogram-plot [counts]=counts></app-histogram-plot>
           </div>
         </div>