- Update to 3.11.0 for swim core java libs

ajay-gov · ajay-gov · commit 9c83a242e447 · 2021-08-17T13:04:54.000-07:00
- Update to 3.11.1 for swim js libs- fix chart, gauge and pie code to work with the new js version
- Use gradle 7.0
diff --git a/server/build.gradle b/server/build.gradle
@@ -26,7 +26,6 @@ def useModules = jvmVersion >= 9 && !project.hasProperty('no-modules')
 
 repositories {
   mavenCentral()
-  jcenter()
 }
 
 dependencies {
diff --git a/server/gradle.properties b/server/gradle.properties
@@ -1 +1 @@
-swim.version=3.10.2
+swim.version=3.11.0
diff --git a/server/gradle/wrapper/gradle-wrapper.properties b/server/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 #Thu Dec 05 14:19:49 GMT 2019
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.4.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-bin.zip
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
diff --git a/ui/chart.html b/ui/chart.html
@@ -2,44 +2,68 @@
 <html>
   <head>
     <title>Swim Chart</title>
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
   </head>
-  <body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
-    <div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
-    </div>
-    <script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
+  <body swim-theme style="position: fixed; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
+    <script src="https://cdn.swimos.org/js/3.11.1/swim-system.js"></script>
+    <script src="https://cdn.swimos.org/js/3.11.1/swim-toolkit.js"></script>
     <script>
 
-const app = new swim.HtmlAppView(document.getElementById("app"));
+const bodyView = swim.HtmlView.fromNode(document.body);
 
-const chartCanvas = app.append('div').position('relative').append("canvas");
+const containerView = bodyView.append("div").display("flex").width("67%").height("67%").touchAction("none").userSelect("none");
+
+const canvasView = swim.CanvasView.create()
+    .wheelEventsEnabled(true)
+    .mouseEventsEnabled(true)
+    .pointerEventsEnabled(true)
+    .touchEventsEnabled(true)
+    .touchAction("manipulation");
 
-const tween = swim.Transition.duration(1000);
 
 /* Chart View */
-const chart = new swim.ChartView()
-    .bottomAxis(swim.AxisView.bottom("time"))
-    .leftAxis(swim.AxisView.left("0...120"))
-    .domainColor("#4a4a4a")
-    .tickMarkColor("#4a4a4a")
+const chartView = canvasView.append(swim.ChartView)
+    .bottomAxis(true)
+    .leftAxis(true)
+    .xRangePadding([0, 0])
+    .domainTracking(true)
+    .xGestures(true)
     .font("12px sans-serif")
     .textColor("#4a4a4a");
-chartCanvas.append(chart);
 
-const plot = new swim.LineGraphView()
+const graphView = chartView.graph.injectView();
+
+const plotView = graphView.append(swim.LinePlotView)
+    .hitMode("domain")
     .stroke("#50e3c2")
-    .strokeWidth(2);
-chart.addPlot(plot);
+    .strokeWidth(2)
+    .on("pointerover", function (event) {
+      const dataPoint = event.targetView;
+      const y = dataPoint.y.value;
+      dataPoint.label(y.toFixed(2));
+    })
+    .on("pointerout", function (event) {
+      const dataPoint = event.targetView;
+      dataPoint.label(null);
+    });
+plotView.textColor.setLook(swim.Look.mutedColor);
+plotView.modifyMood(swim.Feel.default, [[swim.Feel.primary, 1]]);
 
 function addToPlot(key, value) {
-  const time = key.numberValue();
+  const time = new swim.DateTime(key.numberValue());
   const v = value.get("count").numberValue(0);
-  plot.insertDatum({x: time, y: v, opacity: void 0});
+  plotView.insertDataPoint({
+    x: time,
+    y: v,
+    opacity: void 0,
+    labelPadding: 2,
+    labelPlacement: v > 0 ? "above" : v < 0 ? "below" : "middle",
+  });
 }
 
 function removeFromPlot(key) {
-  const time = key.numberValue();
-  plot.removeDatum(time);
+  const time = new swim.DateTime(key.numberValue());
+  plotView.removeDataPoint(time);
 }
 
 const histogramLink = swim.downlinkMap()
@@ -53,6 +77,9 @@
       removeFromPlot(key);
     })
     .open();
+
+containerView.append(canvasView);
+
     </script>
-  </body>
+</body>
 </html>
diff --git a/ui/gauge.html b/ui/gauge.html
@@ -2,51 +2,57 @@
 <html>
   <head>
     <title>Swim Gauge</title>
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
   </head>
-  <body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
-    <div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
-    </div>
-    <script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
+  <body swim-theme style="position: fixed; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
+    <script src="https://cdn.swimos.org/js/3.11.1/swim-system.js"></script>
+    <script src="https://cdn.swimos.org/js/3.11.1/swim-toolkit.js"></script>
     <script>
 
-const app = new swim.HtmlAppView(document.getElementById("app"));
+const bodyView = swim.HtmlView.fromNode(document.body);
 
-const gaugeCanvas = app.append('div').position('relative').append("canvas");
+const containerView = bodyView.append("div").display("flex").width("67%").height("67%").touchAction("none").userSelect("none");
+
+const canvasView = swim.CanvasView.create()
+    .mouseEventsEnabled(true)
+    .pointerEventsEnabled(true)
+    .touchEventsEnabled(true)
+    .touchAction("manipulation");
 
-const tween = swim.Transition.duration(1000);
 
 /* Gauge View */
-const gauge = new swim.GaugeView()
+const gaugeView = canvasView.append(swim.GaugeView)
+    .innerRadius(swim.Length.pct(25))
     .startAngle(swim.Angle.rad(3 * Math.PI / 4))
     .sweepAngle(swim.Angle.rad(3 * Math.PI / 2))
-    .dialColor("#cccccc")
-    .meterColor("#989898")
-    .title(new swim.TextRunView("Foo, Bar, Baz").font("20px sans-serif"))
     .font("14px sans-serif")
-    .textColor("#4a4a4a");
-gaugeCanvas.append(gauge);
+    .title(swim.TextRunView.fromAny("Foo, Bar, Baz").font("20px sans-serif"))
+    .font("14px sans-serif")
+    .textColor("#4a4a4a")
+    .on("pointerover", function (event) {
+      if (event.targetView instanceof swim.DialView) {
+        event.targetView.modifyMood(swim.Feel.default, [[swim.Feel.secondary, 1]], true);
+      }
+    })
+    .on("pointerout", function (event) {
+      if (event.targetView instanceof swim.DialView) {
+        event.targetView.modifyMood(swim.Feel.default, [[swim.Feel.secondary, void 0]], true);
+      }
+    });
 
-const fooDial = new swim.DialView()
-    .label("FOO");
-gauge.setChildView("foo", fooDial);
+const fooDial = gaugeView.append(swim.DialView, "FOO");
 
-const barDial = new swim.DialView()
-    .label("BAR");
-gauge.setChildView("bar", barDial);
+const barDial = gaugeView.append(swim.DialView, "BAR");
 
-const bazDial = new swim.DialView()
-    .label("BAZ");
-gauge.setChildView("baz", bazDial);
+const bazDial = gaugeView.append(swim.DialView, "BAZ");
 
 function updateDial(dial, max, key, value) {
   const v = value.get(key).numberValue();
   const percent = v / max;
   const legend = key + ": " + (v) + " out of " + max;
-  dial.value(v, tween)
-      .total(max)
-      .meterColor(percent < 0.5 ? "#989898" : percent < 0.9 ? "#4a4a4a" : "#000000", tween);
-  dial.label().text(legend);
+  const timing = swim.Easing.linear.withDuration(1000);
+  dial.value(percent, timing);
+  dial.label(legend);
 }
 
 /* Data Subscriptions */
@@ -61,6 +67,8 @@
     })
     .open();
 
+containerView.append(canvasView);
+
     </script>
   </body>
 </html>
diff --git a/ui/pie.html b/ui/pie.html
@@ -2,47 +2,55 @@
 <html>
   <head>
     <title>Swim Pie</title>
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
   </head>
-  <body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
-    <div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
-    </div>
-    <script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
+  <body swim-theme style="position: fixed; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
+    <script src="https://cdn.swimos.org/js/3.11.1/swim-system.js"></script>
+    <script src="https://cdn.swimos.org/js/3.11.1/swim-toolkit.js"></script>
     <script>
 
-const app = new swim.HtmlAppView(document.getElementById("app"));
+const bodyView = swim.HtmlView.fromNode(document.body);
 
-const pieCanvas = app.append('div').position('relative').append("canvas");
+const containerView = bodyView.append("div").display("flex").width("67%").height("67%").touchAction("none").userSelect("none");
 
-const tween = swim.Transition.duration(1000);
+const canvasView = swim.CanvasView.create()
+    .mouseEventsEnabled(true)
+    .pointerEventsEnabled(true)
+    .touchEventsEnabled(true)
+    .touchAction("manipulation");
 
 /* Pie View */
+const pieView = canvasView.append(swim.PieView)
+    .font("14px sans-serif");
+
 const sliceColors = [swim.Color.parse("#00a6ed"),
     swim.Color.parse("#6acd00"),
     swim.Color.parse("#c200fa")];
-const pie = new swim.PieView()
-    // .innerRadius("15%")
-    .outerRadius("25%")
-    .tickColor("#b7b7b7")
-    .font("14px sans-serif")
-    .textColor("#4a4a4a");
-pieCanvas.append(pie);
+
 const pieIndices = {"foo": 0, "bar": 1, "baz": 2};
 
 function updateSlice(key, value) {
   const v = value.get(key).numberValue();
-  let slice = pie.getChildView(key);
+  let slice = pieView.getChildView(key);
   if (slice) {
-    slice.value(v, tween);
-    slice.label().text(v);
+    const timing = swim.Easing.linear.withDuration(1000);
+    slice.value(v, timing);
+    slice.label(v.toFixed());
   } else {
     const sliceColor = sliceColors[pieIndices[key]];
-    slice = new swim.SliceView()
+    slice = pieView.append(swim.SliceView, key)
         .value(v)
         .sliceColor(sliceColor)
         .label(v.toFixed())
-        .legend(key);
-    pie.setChildView(key, slice);    
+        .legend(key)
+        .textColor("#4a4a4a")
+        .on("pointerenter", function (event) {
+          slice0View.modifyMood(swim.Feel.default, [[swim.Feel.primary, 1]], true);
+        })
+        .on("pointerleave", function (event) {
+          slice0View.modifyMood(swim.Feel.default, [[swim.Feel.primary, void 0]], true);
+        });
+
   }
 }
 
@@ -58,6 +66,8 @@
     })
     .open();
 
+containerView.append(canvasView);
+
     </script>
-  </body>
+</body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,6 @@ def useModules = jvmVersion >= 9 && !project.hasProperty('no-modules')`
`26`	`26`
`27`	`27`	`repositories {`
`28`	`28`	`mavenCentral()`
`29`		`- jcenter()`
`30`	`29`	`}`
`31`	`30`
`32`	`31`	`dependencies {`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-swim.version=3.10.2`
	`1`	`+swim.version=3.11.0`