Implemented an updating sparkline

- sparkline is set with X number of lines
- sparkline height fits X lines
- lines are updated regularly
- size is adjusted relevant to plotted points

#story[876]

visualiser/src/main/java/seng302/Controllers/RaceController.java

@@ -3,6 +3,9 @@ package seng302.Controllers;
 
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
+import javafx.scene.chart.LineChart;
+import javafx.scene.chart.NumberAxis;
+import javafx.scene.chart.XYChart;
 import javafx.scene.control.*;
 import javafx.scene.layout.GridPane;
 import seng302.Mock.StreamedRace;
@@ -22,6 +25,7 @@ public class RaceController extends Controller {
     //user saved data for annotation display
     private ArrayList<Boolean> presetAnno;
 
+    private Integer sparkLineNumber = 0;
     private ResizableRaceCanvas raceMap;
     private ResizableRaceMap raceBoundaries;
     @FXML SplitPane race;
@@ -41,6 +45,9 @@ public class RaceController extends Controller {
     @FXML TableColumn<Boat, String> boatTeamColumn;
     @FXML TableColumn<Boat, String> boatMarkColumn;
     @FXML TableColumn<Boat, String> boatSpeedColumn;
+    @FXML LineChart<Number, Number> sparklineChart;
+    @FXML NumberAxis xAxis;
+    @FXML NumberAxis yAxis;
 
     /**
      * Updates the ResizableRaceCanvas (raceMap) with most recent data
@@ -75,6 +82,7 @@ public class RaceController extends Controller {
 
     @Override
     public void initialize(URL location, ResourceBundle resources) {
+        createSparkLine();
         //listener for fps
         showFPS.selectedProperty().addListener((ov, old_val, new_val) -> {
             if (showFPS.isSelected()) {
@@ -85,6 +93,34 @@ public class RaceController extends Controller {
         });
     }
 
+    private void createSparkLine(){
+        // TODO replace for loop with boatsInRace
+        int [] boats = {1, 2, 3, 4, 5, 6};
+        // set a line for each boat
+        for (int i=0; i<boats.length; i++){
+            XYChart.Series<Number, Number> series = new XYChart.Series();
+            series.getData().add(new XYChart.Data(0, i+1));
+            sparklineChart.getData().add(series);
+        }
+
+        // reverse Y axis order (0 at top) and set axis height/width
+        // TODO change lower bound to boatsInRace + 1
+        yAxis.setLowerBound(boats.length+1);
+        yAxis.setUpperBound(0);
+        yAxis.setAutoRanging(false);
+        xAxis.setAutoRanging(false);
+
+        // hide axis ticks and labels
+        sparklineChart.getXAxis().setTickLabelsVisible(false);
+        sparklineChart.getYAxis().setTickLabelsVisible(false);
+        sparklineChart.getXAxis().setTickMarkVisible(false);
+        sparklineChart.getYAxis().setTickMarkVisible(false);
+        sparklineChart.getXAxis().
+                lookup(".axis-minor-tick-mark").setVisible(false);
+        sparklineChart.getYAxis().
+                lookup(".axis-minor-tick-mark").setVisible(false);
+    }
+
     /**
      * Initializes and runs the race, based on the user's chosen scale factor
      * Currently uses an example racecourse
@@ -163,6 +199,24 @@ public class RaceController extends Controller {
         });
     }
 
+    public void updateSparkline(){
+        // TODO replace for loops with correct boats
+        int [] startingBoats = {1, 2, 3, 4, 5, 6};
+        int [] boatsInRace = {1, 2, 3, 4, 5, 6};
+
+        sparkLineNumber ++;
+        for (int i=0; i<startingBoats.length; i++){
+            for (int j=0; j<boatsInRace.length; j++){
+                // TODO if startingBoat[i] == boatsInRace[j]
+                if (i==j){
+                    sparklineChart.getData().get(i).getData().add(new XYChart.Data<>
+                            (sparkLineNumber, j+1));
+                }
+            }
+        }
+        xAxis.setUpperBound(sparkLineNumber);
+    }
+
     /**
      * Set up boat annotations
      */

visualiser/src/main/java/seng302/Mock/StreamedRace.java

@@ -189,6 +189,7 @@ public class StreamedRace implements Runnable {
             public void handle(long arg0) {
                 if (boatsFinished < startingBoats.size()) {
                     boatsFinished = 0;
+                    controller.updateSparkline();
                     totalTimeElapsed = System.currentTimeMillis() - timeRaceStarted;
 
                     for (Boat boat : startingBoats) {

visualiser/src/main/resources/scenes/race.fxml

@@ -1,19 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.scene.chart.*?>
+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.text.*?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.text.Font?>
-<SplitPane xmlns:fx="http://javafx.com/fxml/1" fx:id="race" dividerPositions="0.7" visible="false" AnchorPane.bottomAnchor="0.0"
+
-           AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
+<SplitPane fx:id="race" dividerPositions="0.7" prefHeight="431.0" prefWidth="610.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.Controllers.RaceController">
-           xmlns="http://javafx.com/javafx/8" fx:controller="seng302.Controllers.RaceController">
     <items>
         <GridPane fx:id="canvasBase">
             <columnConstraints>
-                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
             </columnConstraints>
             <rowConstraints>
-                <RowConstraints minHeight="10.0" vgrow="SOMETIMES"/>
+                <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
             </rowConstraints>
             <children>
                 <Pane prefHeight="200.0" prefWidth="400.0" GridPane.halignment="LEFT" GridPane.valignment="TOP">
@@ -24,28 +27,13 @@
                                     <content>
                                         <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="240.0" prefWidth="200.0">
                                             <children>
-                                                <CheckBox fx:id="showBoatPath" mnemonicParsing="false" selected="true"
+                                                <CheckBox fx:id="showBoatPath" mnemonicParsing="false" selected="true" text="Show Boat Paths" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="104.0" />
-                                                          text="Show Boat Paths" AnchorPane.leftAnchor="0.0"
+                                                <CheckBox fx:id="showAnnotations" layoutX="-2.0" layoutY="14.0" mnemonicParsing="false" selected="true" text="Show Annotations" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" />
-                                                          AnchorPane.topAnchor="104.0"/>
+                                                <CheckBox fx:id="showName" layoutY="39.0" mnemonicParsing="false" selected="true" text="Show Boat Name" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="26.0" />
-                                                <CheckBox fx:id="showAnnotations" layoutX="-2.0" layoutY="14.0"
+                                                <CheckBox fx:id="showAbbrev" layoutY="61.0" mnemonicParsing="false" selected="true" text="Show Boat Abbreviation" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="52.0" />
-                                                          mnemonicParsing="false" selected="true"
+                                                <CheckBox fx:id="showSpeed" layoutY="90.0" mnemonicParsing="false" selected="true" text="Show Boat Speed" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="78.0" />
-                                                          text="Show Annotations" AnchorPane.leftAnchor="0.0"
+                                                <Button fx:id="saveAnno" layoutX="11.0" layoutY="106.0" maxWidth="154.0" mnemonicParsing="false" prefWidth="154.0" text="Save Annotation" AnchorPane.topAnchor="130.0" />
-                                                          AnchorPane.topAnchor="0.0"/>
+                                                <Button fx:id="showSetAnno" layoutX="11.0" layoutY="139.0" mnemonicParsing="false" text="Show Set Annotation" AnchorPane.topAnchor="160.0" />
-                                                <CheckBox fx:id="showName" layoutY="39.0" mnemonicParsing="false"
-                                                          selected="true" text="Show Boat Name"
-                                                          AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="26.0"/>
-                                                <CheckBox fx:id="showAbbrev" layoutY="61.0" mnemonicParsing="false"
-                                                          selected="true" text="Show Boat Abbreviation"
-                                                          AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="52.0"/>
-                                                <CheckBox fx:id="showSpeed" layoutY="90.0" mnemonicParsing="false"
-                                                          selected="true" text="Show Boat Speed"
-                                                          AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="78.0"/>
-                                                <Button fx:id="saveAnno" layoutX="11.0" layoutY="106.0" maxWidth="154.0"
-                                                        mnemonicParsing="false" prefWidth="154.0" text="Save Annotation"
-                                                        AnchorPane.topAnchor="130.0"/>
-                                                <Button fx:id="showSetAnno" layoutX="11.0" layoutY="139.0"
-                                                        mnemonicParsing="false" text="Show Set Annotation"
-                                                        AnchorPane.topAnchor="160.0"/>
                                             </children>
                                         </AnchorPane>
                                     </content>
@@ -54,9 +42,7 @@
                                     <content>
                                         <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                                             <children>
-                                                <CheckBox fx:id="showFPS" layoutX="-14.0" layoutY="13.0"
+                                                <CheckBox fx:id="showFPS" layoutX="-14.0" layoutY="13.0" mnemonicParsing="false" selected="true" text="Show FPS" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" />
-                                                          mnemonicParsing="false" selected="true" text="Show FPS"
-                                                          AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0"/>
                                             </children>
                                         </AnchorPane>
                                     </content>
@@ -65,42 +51,48 @@
                         </Accordion>
                     </children>
                 </Pane>
-                <Label fx:id="timer" layoutX="45.0" layoutY="146.0" maxHeight="20.0" text="0:0"
+                <Label fx:id="timer" layoutX="45.0" layoutY="146.0" maxHeight="20.0" text="0:0" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" GridPane.halignment="RIGHT" GridPane.valignment="BOTTOM">
-                       AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" GridPane.halignment="RIGHT"
-                       GridPane.valignment="BOTTOM">
                     <font>
-                        <Font name="System Bold" size="15.0"/>
+                        <Font name="System Bold" size="15.0" />
                     </font>
                 </Label>
-                <Label fx:id="FPS" text="FPS: 0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
+                <Label fx:id="FPS" text="FPS: 0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" GridPane.halignment="LEFT" GridPane.valignment="BOTTOM">
-                       GridPane.halignment="LEFT" GridPane.valignment="BOTTOM">
                     <font>
-                        <Font name="System Bold" size="15.0"/>
+                        <Font name="System Bold" size="15.0" />
                     </font>
                 </Label>
                 <Label fx:id="timeZone" text="Label" GridPane.halignment="RIGHT" GridPane.valignment="BOTTOM">
                     <GridPane.margin>
-                        <Insets bottom="20.0"/>
+                        <Insets bottom="20.0" />
                     </GridPane.margin>
                     <font>
-                        <Font name="System Bold" size="15.0"/>
+                        <Font name="System Bold" size="15.0" />
                     </font>
                 </Label>
             </children>
         </GridPane>
-        <AnchorPane layoutX="450.0" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="200.0"
+        <AnchorPane layoutX="450.0" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="200.0" GridPane.columnIndex="1">
-                    GridPane.columnIndex="1">
             <children>
-                <TableView fx:id="boatInfoTable" layoutX="-2.0" prefHeight="600.0" prefWidth="264.0"
+                <TableView fx:id="boatInfoTable" layoutX="-2.0" prefHeight="265.0" prefWidth="242.0" AnchorPane.bottomAnchor="164.0" AnchorPane.leftAnchor="-2.0" AnchorPane.rightAnchor="-62.0" AnchorPane.topAnchor="0.0">
-                           AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="-2.0" AnchorPane.rightAnchor="-62.0"
-                           AnchorPane.topAnchor="0.0">
                     <columns>
-                        <TableColumn fx:id="boatPlacingColumn" prefWidth="50.0" text="Place"/>
+                        <TableColumn fx:id="boatPlacingColumn" prefWidth="50.0" text="Place" />
-                        <TableColumn fx:id="boatTeamColumn" prefWidth="100.0" text="Team"/>
+                        <TableColumn fx:id="boatTeamColumn" prefWidth="100.0" text="Team" />
-                        <TableColumn fx:id="boatMarkColumn" prefWidth="130.0" text="Mark"/>
+                        <TableColumn fx:id="boatMarkColumn" prefWidth="130.0" text="Mark" />
-                        <TableColumn fx:id="boatSpeedColumn" prefWidth="75.0" text="Speed"/>
+                        <TableColumn fx:id="boatSpeedColumn" prefWidth="75.0" text="Speed" />
                     </columns>
                 </TableView>
+                <AnchorPane layoutY="265.0" prefHeight="167.0" prefWidth="178.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
+                    <children>
+                        <LineChart fx:id="sparklineChart" layoutX="-211.0" layoutY="-186.0" mouseTransparent="true" prefHeight="167.0" prefWidth="178.0" titleSide="LEFT" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                            <xAxis>
+                                <NumberAxis side="BOTTOM" fx:id="xAxis"/>
+                            </xAxis>
+                            <yAxis>
+                                <NumberAxis side="LEFT" fx:id="yAxis"/>
+                            </yAxis>
+                        </LineChart>
+                    </children>
+                </AnchorPane>
             </children>
         </AnchorPane>
     </items>