Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleaner formatting for trading charts date axes #4715

Merged
merged 3 commits into from
Nov 2, 2020
Merged

Cleaner formatting for trading charts date axes #4715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c0af9f9
Cleaner formatting for trading charts date axes
deusmax Oct 25, 2020
162c119
Added date format for each chart interval period.
deusmax Oct 29, 2020
24784cb
Minor style formatting.
deusmax Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 34 additions & 12 deletions desktop/src/main/java/bisq/desktop/main/market/trades/TradesChartsView.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,8 +332,9 @@ private void createCharts() {
priceSeries = new XYChart.Series<>();

priceAxisX = new NumberAxis(0, model.maxTicks + 1, 1);
priceAxisX.setTickUnit(1);
priceAxisX.setMinorTickCount(0);
priceAxisX.setTickUnit(4);
priceAxisX.setMinorTickCount(4);
priceAxisX.setMinorTickVisible(true);
priceAxisX.setForceZeroInRange(false);
priceAxisX.setTickLabelFormatter(getTimeAxisStringConverter());

Expand Down Expand Up @@ -376,8 +377,8 @@ public Number fromString(String string) {
}
});
priceChart.setId("price-chart");
priceChart.setMinHeight(178);
priceChart.setPrefHeight(178);
priceChart.setMinHeight(188);
priceChart.setPrefHeight(188);
priceChart.setMaxHeight(300);
priceChart.setLegendVisible(false);
priceChart.setPadding(new Insets(0));
Expand All @@ -396,8 +397,9 @@ public Number fromString(String string) {
volumeSeries = new XYChart.Series<>();

volumeAxisX = new NumberAxis(0, model.maxTicks + 1, 1);
volumeAxisX.setTickUnit(1);
volumeAxisX.setMinorTickCount(0);
volumeAxisX.setTickUnit(4);
volumeAxisX.setMinorTickCount(4);
volumeAxisX.setMinorTickVisible(true);
volumeAxisX.setForceZeroInRange(false);
volumeAxisX.setTickLabelFormatter(getTimeAxisStringConverter());

Expand Down Expand Up @@ -430,8 +432,8 @@ public Number fromString(String string) {
});
volumeChart.setId("volume-chart");
volumeChart.setData(FXCollections.observableArrayList(List.of(volumeSeries)));
volumeChart.setMinHeight(128);
volumeChart.setPrefHeight(128);
volumeChart.setMinHeight(138);
volumeChart.setPrefHeight(138);
volumeChart.setMaxHeight(200);
volumeChart.setLegendVisible(false);
volumeChart.setPadding(new Insets(0));
Expand Down Expand Up @@ -477,11 +479,31 @@ private StringConverter<Number> getTimeAxisStringConverter() {
@Override
public String toString(Number object) {
long index = MathUtils.doubleToLong((double) object);
// The last tick is on the chart edge, it is not well spaced with
// the previous tick and interferes with its label.
if (model.maxTicks + 1 == index) return "";

long time = model.getTimeFromTickIndex(index);
if (model.tickUnit.ordinal() <= TradesChartsViewModel.TickUnit.DAY.ordinal())
return index % 4 == 0 ? DisplayUtils.formatDate(new Date(time)) : "";
else
return index % 3 == 0 ? DisplayUtils.formatTime(new Date(time)) : "";
String fmt = "";
switch (model.tickUnit) {
case YEAR:
fmt = "yyyy";
break;
case MONTH:
fmt = "MMMyy";
break;
case WEEK:
case DAY:
fmt = "dd/MMM\nyyyy";
break;
case HOUR :
case MINUTE_10:
fmt = "HH:mm\ndd/MMM";
break;
default: // nothing here
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might want to reformat the style of the switch statement so fmt = "..." are on separate lines. Not sure codacy will complain about this, but other devs might want the switch style to be consistent with the rest of the code base.
(This is the 1st time I've seen this style in Bisq; I'm not saying there may be other examples in the code base.)

switch (model.tickUnit) {
                    case YEAR:
                        fmt = "yyyy";
                        break;
                    case MONTH:
                        fmt = "MMMyy";
                        break;
                    case WEEK:
                    case DAY:
                        fmt = "dd/MMM\nyyyy";
                        break;
                    case HOUR:
                    case MINUTE_10:
                        fmt = "HH:mm\ndd/MMM";
                        break;
                    default:        // nothing here
                }

}

return DisplayUtils.formatDateAxis(new Date(time), fmt);
}

@Override
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/main/java/bisq/desktop/main/market/trades/charts/price/CandleStickChart.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ protected void layoutPlotChildren() {
double candleWidth = -1;
if (getXAxis() instanceof NumberAxis) {
NumberAxis xa = (NumberAxis) getXAxis();
candleWidth = xa.getDisplayPosition(xa.getTickUnit()) * 0.60; // use 90% width between ticks
candleWidth = xa.getDisplayPosition(1) * 0.60; // use 60% width between units
}
// update candle
candle.update(close - y, high - y, low - y, candleWidth);
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/main/java/bisq/desktop/main/market/trades/charts/volume/VolumeChart.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ protected void layoutPlotChildren() {
double candleWidth = -1;
if (getXAxis() instanceof NumberAxis) {
NumberAxis xa = (NumberAxis) getXAxis();
candleWidth = xa.getDisplayPosition(xa.getTickUnit()) * 0.60; // use 90% width between ticks
candleWidth = xa.getDisplayPosition(1) * 0.60; // use 60% width between units
}

// 97 is visible chart data height if chart height is 140.
Expand Down
10 changes: 10 additions & 0 deletions desktop/src/main/java/bisq/desktop/util/DisplayUtils.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
import org.apache.commons.lang3.time.DurationFormatUtils;

import java.text.DateFormat;
import java.text.SimpleDateFormat;

import java.math.BigDecimal;
import java.math.RoundingMode;
Expand Down Expand Up @@ -67,6 +68,15 @@ public static String formatDate(Date date) {
}
}

public static String formatDateAxis(Date date, String format) {
if (date != null) {
SimpleDateFormat dateFormatter = new SimpleDateFormat(format, GlobalSettings.getLocale());
return dateFormatter.format(date);
} else {
return "";
}
}

public static String formatAccountAge(long durationMillis) {
durationMillis = Math.max(0, durationMillis);
String day = Res.get("time.day").toLowerCase();
Expand Down