Prettied up the statistics window for both Ui Themes

This commit is contained in:
Martin Beyer
2020-06-17 11:04:36 +02:00
parent d00d9d98dc
commit 7a69692999
5 changed files with 70 additions and 56 deletions

View File

@@ -18,6 +18,7 @@ import org.cryptomator.ui.common.FxController;
import org.cryptomator.ui.common.WeakBindings;
import javax.inject.Inject;
import java.util.ResourceBundle;
@VaultStatisticsScoped
public class VaultStatisticsController implements FxController {
@@ -35,17 +36,15 @@ public class VaultStatisticsController implements FxController {
public LineChart<Number, Number> lineGraph;
@Inject
public VaultStatisticsController(@VaultStatisticsWindow Stage window, @VaultStatisticsWindow Vault vault) {
public VaultStatisticsController(@VaultStatisticsWindow Stage window, @VaultStatisticsWindow Vault vault, ResourceBundle resourceBundle) {
this.stats = vault.getStats();
this.bpsRead = WeakBindings.bindLong(stats.bytesPerSecondReadProperty());
this.bpsWritten = WeakBindings.bindLong(stats.bytesPerSecondWrittenProperty());
this.readData = new Series<>();
readData.setName("Read Data"); // For Legend
//TODO Add Name to strings.properties
readData.setName(resourceBundle.getString("vaultstatistics.readDataLabel"));
this.writeData = new Series<>();
writeData.setName("Write Data");
//TODO Add Name to strings.properties
writeData.setName(resourceBundle.getString("vaultstatistics.writtenDataLabel"));
this.ioAnimation = new Timeline(); //TODO Research better timer
ioAnimation.getKeyFrames().add(new KeyFrame(Duration.seconds(IO_SAMPLING_INTERVAL), new IoSamplingAnimationHandler(readData, writeData)));

View File

@@ -882,43 +882,51 @@
-fx-background-color: MAIN_BG;
-fx-padding: 20px;
}
/*
.default-color0.chart-line-symbol { -fx-background-color: #00FFFF; }
.default-color1.chart-line-symbol { -fx-background-color: #00FF00; }
*/
/* content */
.chart-content {
-fx-padding: 10px;
-fx-text-fill: TEXT_FILL;
-fx-tick-label-fill: GRAY_3;
-fx-minor-tick-visible: false
}
.chart-horizontal-grid-lines {
-fx-stroke: #FFFFFF;
-fx-stroke: PRIMARY_L2;
}
.chart-vertical-zero-line,
.chart-horizontal-zero-line {
-fx-stroke: #FFFFFF;
-fx-stroke: PRIMARY_L2;
}
.chart-series-line {
-fx-stroke-width: 2px;
}
.chart-alternative-row-fill {
-fx-fill: #E1E1E1;
-fx-fill: GRAY_3;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
.axis {
-fx-tick-label-fill: TEXT_FILL;
-fx-tick-length: 20;
-fx-minor-tick-length: 10;
}
.axis-label {
-fx-text-fill: TEXT_FILL;
}
.default-color0.chart-series-line { -fx-stroke: PRIMARY; }
.default-color1.chart-series-line { -fx-stroke: RED_5 ; }
.default-color0.chart-series-line { -fx-stroke: #FF0000; }
.default-color1.chart-series-line { -fx-stroke: #00FF00 ; }
/* legend */
.chart-legend {
-fx-background-color: transparent;
-fx-padding: 20px;
-fx-text-fill: TEXT_FILL;
-fx-background-color: transparent;
-fx-padding: 0.4em;
}
.chart-legend-item-symbol{
-fx-background-radius: 10;
}
.chart-legend-item{
-fx-text-fill: #FFFFFF;
.chart-line-symbol {
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color0.chart-line-symbol { -fx-background-color: PRIMARY; }
.default-color1.chart-line-symbol { -fx-background-color: RED_5; }

View File

@@ -881,43 +881,51 @@
-fx-background-color: MAIN_BG;
-fx-padding: 20px;
}
/*
.default-color0.chart-line-symbol { -fx-background-color: #00FFFF; }
.default-color1.chart-line-symbol { -fx-background-color: #00FF00; }
*/
/* content */
.chart-content {
-fx-padding: 10px;
-fx-text-fill: TEXT_FILL;
-fx-tick-label-fill: GRAY_3;
-fx-minor-tick-visible: false
}
.chart-horizontal-grid-lines {
-fx-stroke: #000000;
-fx-stroke: PRIMARY_D2;
}
.chart-vertical-zero-line,
.chart-horizontal-zero-line {
-fx-stroke: #000000;
-fx-stroke: PRIMARY_D2;
}
.chart-series-line {
-fx-stroke-width: 2px;
}
.chart-alternative-row-fill {
-fx-fill: #E1E1E1;
-fx-fill: GRAY_8;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
.axis {
-fx-tick-label-fill: TEXT_FILL;
-fx-tick-length: 20;
-fx-minor-tick-length: 10;
}
.axis-label {
-fx-text-fill: TEXT_FILL;
}
.default-color0.chart-series-line { -fx-stroke: PRIMARY; }
.default-color1.chart-series-line { -fx-stroke: RED_5 ; }
.default-color0.chart-series-line { -fx-stroke: #FF0000; }
.default-color1.chart-series-line { -fx-stroke: #00FF00 ; }
/* legend */
.chart-legend {
-fx-background-color: transparent;
-fx-padding: 20px;
-fx-text-fill: TEXT_FILL;
-fx-background-color: transparent;
-fx-padding: 0.4em;
}
.chart-legend-item-symbol{
-fx-background-radius: 10;
}
.chart-legend-item{
-fx-text-fill: #000000;
.chart-line-symbol {
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color0.chart-line-symbol { -fx-background-color: PRIMARY; }
.default-color1.chart-line-symbol { -fx-background-color: RED_5; }

View File

@@ -12,21 +12,8 @@
fx:controller="org.cryptomator.ui.vaultstatistics.VaultStatisticsController"
prefHeight="400.0" prefWidth="600.0">
<HBox alignment="CENTER_RIGHT" spacing="6">
<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondRead"/>
<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsRead}"/>
</HBox>
<HBox alignment="CENTER_RIGHT" spacing="6">
<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondWritten"/>
<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsWritten}"/>
</HBox>
<LineChart
styleClass="chart-plot-background, chart-alternative-row-fill, default-color2.chart-series-line"
fx:id="lineGraph" createSymbols="true" legendVisible="true" prefHeight="372.0" prefWidth="423.0" visible="true" animated="false" title="%vaultstatistics.throughputTitle" verticalZeroLineVisible="true" verticalGridLinesVisible="false" horizontalGridLinesVisible="true">
<LineChart fx:id="lineGraph" VBox.vgrow="ALWAYS" createSymbols="false" legendVisible="true" prefHeight="372.0" prefWidth="423.0" visible="true" animated="false"
title="%vaultstatistics.throughputTitle" verticalZeroLineVisible="true" verticalGridLinesVisible="false" horizontalGridLinesVisible="true">
<xAxis>
<NumberAxis autoRanging="false" lowerBound="0" side="BOTTOM" tickUnit="5" upperBound="100" label="%vaultstatistics.xAxisTimeLabel"/>
</xAxis>
@@ -37,4 +24,14 @@
<Cursor fx:constant="DEFAULT"/>
</cursor>
</LineChart>
<HBox alignment="CENTER_RIGHT" spacing="6">
<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondRead"/>
<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsRead}"/>
</HBox>
<HBox alignment="CENTER_RIGHT" spacing="6">
<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondWritten"/>
<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsWritten}"/>
</HBox>
</VBox>

View File

@@ -165,6 +165,8 @@ vaultstatistics.title=Statistics for %s
vaultstatistics.xAxisTimeLabel=Seconds
vaultstatistics.yAxisThroughputLabel=Throughput in KiB/s
vaultstatistics.throughputTitle=Read and Writes
vaultstatistics.readDataLabel=Read Data
vaultstatistics.writtenDataLabel=Written Data
# Main Window
main.closeBtn.tooltip=Close