Update Graphs.JS

jktjkt · jktjkt · commit c08bddae80aa · 2020-03-18T12:58:45.000+01:00
This update changes rendering of graph legend. Previously, our code relied on "graph lines" and "graph points" of different colors (the "points" were colored, while the connecting line was implicitly dark). An upstream change in Graphs.JS changed this, they now use the line color for legend fill area, which means that we will have a gray legend unless we make extra changes. And gray legend for two graphs of different colors is not really awesome. There are many possible ways of fixing this. After experimenting with this, I decided not to go the legend.labels.usePointStyle way, and instead I'm just tweaking several colors, line stroke widths and point diameters in a rather ad-hoc style. Well, it works; the key was really amking the orange a little bit darker and also ensuring that the orange stroke width is a wee bit wider. Change-Id: I720577800b7108a091d469f2e6801da522073305 Bug: chartjs/Chart.js#6644 Bug: chartjs/Chart.js#5621 Bug: chartjs/Chart.js#5375
diff --git a/sdn-roadm-add-drop/graphs.js b/sdn-roadm-add-drop/graphs.js
@@ -100,20 +100,24 @@ const main = async () => {
                     showLine: true,
                     lineTension: 0,
                     fill: false,
-                    borderWidth: 2,
-                    pointRadius: 1,
+                    borderWidth: 0.3,
+                    pointRadius: 2.0,
                     pointHoverRadius: 1,
                     backgroundColor: "teal",
+                    borderColor: "teal",
+                    pointBorderColor: "teal",
                 },
                 {
                     label: "Express OUT",
                     showLine: true,
                     lineTension: 0,
                     fill: false,
-                    borderWidth: 2,
-                    pointRadius: 1,
+                    borderWidth: 0.6,
+                    pointRadius: 2.0,
                     pointHoverRadius: 1,
-                    backgroundColor: "orange",
+                    backgroundColor: "darkorange",
+                    borderColor: "orange",
+                    pointBorderColor: "darkorange",
                 },
 
             ],
diff --git a/sdn-roadm-add-drop/index.html b/sdn-roadm-add-drop/index.html
@@ -1,8 +1,8 @@
 <html>
     <head>
-        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
         <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
-        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5"></script>
         <title>Add/Drop</title>
         <style>
             .error-message {
diff --git a/sdn-roadm-line/graphs.js b/sdn-roadm-line/graphs.js
@@ -100,20 +100,24 @@ const main = async () => {
                     showLine: true,
                     lineTension: 0,
                     fill: false,
-                    borderWidth: 2,
-                    pointRadius: 1,
+                    borderWidth: 0.3,
+                    pointRadius: 2.0,
                     pointHoverRadius: 1,
                     backgroundColor: "blue",
+                    borderColor: "blue",
+                    pointBorderColor: "blue",
                 },
                 {
                     label: "Line OUT",
                     showLine: true,
                     lineTension: 0,
                     fill: false,
-                    borderWidth: 2,
-                    pointRadius: 1,
+                    borderWidth: 0.3,
+                    pointRadius: 2.0,
                     pointHoverRadius: 1,
                     backgroundColor: "red",
+                    borderColor: "red",
+                    pointBorderColor: "red",
                 },
 
             ],
diff --git a/sdn-roadm-line/index.html b/sdn-roadm-line/index.html
@@ -1,8 +1,8 @@
 <html>
     <head>
-        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
         <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
-        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5"></script>
         <title>Line/Degree</title>
         <style>
             .error-message {

-Original file line number
+Diff line change
@@ @@ -1,8 +1,8 @@ @@
 <html>
     <head>
 -        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 +        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 -        <script src="https://cdn.jsdelivr.net/npm/[email protected].4"></script>
 +        <script src="https://cdn.jsdelivr.net/npm/[email protected].5"></script>
         <title>Add/Drop</title>
         <style>
             .error-message {