Skip to content

Commit

Permalink
refactor: change colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@kate-deriv
kate-deriv committed Nov 5, 2024
1 parent 772d361 commit 88bce37
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 25 deletions.
43 changes: 26 additions & 17 deletions chart_app/lib/deriv_chart_wrapper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,11 +251,17 @@ class DerivChartWrapperState extends State<DerivChartWrapper> {

final bool isTickGranularity = granularity < 60000;

final bool isLightMode =
configModel.theme is ChartDefaultLightTheme;

final DataSeries<Tick> mainSeries =
getDataSeries(feedModel, configModel, granularity);

final Color latestTickColor = Color.fromRGBO(
255, 68, 81, configModel.isSymbolClosed ? 0.32 : 1);
final Color latestTickColor = isLightMode
? Color.fromRGBO(
0, 0, 0, configModel.isSymbolClosed ? 0.32 : 1)
: Color.fromRGBO(255, 255, 255,
configModel.isSymbolClosed ? 0.32 : 1);

final Duration animationDuration = _getAnimationDuration(
isTickGranularity: isTickGranularity);
Expand All @@ -274,45 +280,48 @@ class DerivChartWrapperState extends State<DerivChartWrapper> {
id: 'last_tick_indicator',
style: HorizontalBarrierStyle(
color: latestTickColor,
labelShape: LabelShape.pentagon,
hasArrow: false,
textStyle: const TextStyle(
labelHeight: 26,
textStyle: TextStyle(
fontSize: 12,
height: 1.3,
height: 1.8,
fontWeight: FontWeight.w600,
color: Colors.white,
fontFeatures: <FontFeature>[
color: isLightMode
? Colors.white
: Colors.black,
fontFeatures: const <FontFeature>[
FontFeature.tabularFigures()
],
)),
visibility: HorizontalBarrierVisibility
.keepBarrierLabelVisible,
),
if (configModel.isLive)
BlinkingTickIndicator(
feedModel.ticks.last,
id: 'blink_tick_indicator',
visibility: HorizontalBarrierVisibility
.keepBarrierLabelVisible,
),
BlinkingTickIndicator(feedModel.ticks.last,
id: 'blink_tick_indicator',
visibility: HorizontalBarrierVisibility
.keepBarrierLabelVisible,
style: HorizontalBarrierStyle(
color: isLightMode
? Colors.black
: Colors.white,
)),
if (app.configModel.showTimeInterval &&
!isTickGranularity)
TimeIntervalIndicator(
app.configModel.remainingTime,
feedModel.ticks.last.close,
longLine: false,
style: HorizontalBarrierStyle(
color: configModel.theme
is ChartDefaultLightTheme
color: isLightMode
? Colors.black
: Colors.white,
hasArrow: false,
textStyle: TextStyle(
fontSize: 12,
height: 1.3,
fontWeight: FontWeight.w600,
color: configModel.theme
is ChartDefaultLightTheme
color: isLightMode
? Colors.white
: Colors.black,
fontFeatures: const <FontFeature>[
Expand Down
13 changes: 8 additions & 5 deletions chart_app/lib/src/helpers/series.dart
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import 'package:chart_app/src/models/chart_config.dart';
import 'package:chart_app/src/models/chart_feed.dart';
import 'package:chart_app/src/series/custom_line_series.dart';
import 'package:deriv_chart/deriv_chart.dart';
import 'package:deriv_chart/deriv_chart.dart' hide CandleSeries;
import 'package:flutter/material.dart';
import '../series/candle_series.dart';

/// Gets the data series
DataSeries<Tick> getDataSeries(
ChartFeedModel feedModel, ChartConfigModel configModel, int granularity) {
final List<Tick> ticks = feedModel.ticks;
final double opacity = configModel.isSymbolClosed ? 0.32 : 1;
final bool isLightMode = configModel.theme is ChartDefaultLightTheme;
// Min granularity 1m
if (ticks is List<Candle> && granularity >= 60000) {
final CandleStyle style = CandleStyle(
positiveColor: Color.fromRGBO(76, 175, 80, opacity),
negativeColor: Color.fromRGBO(249, 84, 84, opacity),
neutralColor: Color.fromRGBO(85, 89, 117, opacity),
positiveColor: Color.fromRGBO(0, 195, 144, opacity),
negativeColor: Color.fromRGBO(222, 0, 64, opacity),
);

switch (configModel.style) {
Expand All @@ -31,7 +32,9 @@ DataSeries<Tick> getDataSeries(
return CustomLineSeries(
ticks,
style: LineStyle(
color: Color.fromRGBO(133, 172, 176, opacity),
color: isLightMode
? Color.fromRGBO(0, 0, 0, opacity)
: Color.fromRGBO(255, 255, 255, opacity),
hasArea: true,
),
);
Expand Down
9 changes: 6 additions & 3 deletions chart_app/lib/src/painters/blink_tick_painter.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ class BlinkingTickPainter<T extends BlinkingTickIndicator>
required QuoteToY quoteToY,
required AnimationInfo animationInfo,
}) {
final Paint _paint = Paint()..color = Colors.redAccent;
final HorizontalBarrierStyle style =
series.style as HorizontalBarrierStyle? ?? theme.horizontalBarrierStyle;

final Paint _paint = Paint()..color = style.color;

/// Animated Value
double? animatedValue;
Expand Down Expand Up @@ -57,15 +60,15 @@ class BlinkingTickPainter<T extends BlinkingTickIndicator>
YAxisConfig.instance.yAxisClipping(canvas, size, () {
canvas.drawCircle(
Offset(dotX!, y),
3 + (animationInfo.currentTickPercent * 6),
4 + (animationInfo.currentTickPercent * 6),
Paint()..color = _paint.color.withOpacity(0.15),
);
});
}
YAxisConfig.instance.yAxisClipping(canvas, size, () {
canvas.drawCircle(
Offset(dotX!, y),
3,
4,
_paint,
);
});
Expand Down
66 changes: 66 additions & 0 deletions chart_app/lib/src/series/candle_painter.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import 'package:deriv_chart/deriv_chart.dart';
import 'package:flutter/material.dart';

/// A [DataPainter] for painting CandleStick data.
class CandlePainter extends OhlcPainter {
/// Initializes
CandlePainter(DataSeries<Candle> series) : super(series);

late Paint _linePaint;
late Paint _positiveCandlePaint;
late Paint _negativeCandlePaint;

@override
void onPaintCandle(
Canvas canvas,
OhlcPainting currentPainting,
OhlcPainting prevPainting,
) {
final CandleStyle style = series.style as CandleStyle? ?? theme.candleStyle;

_linePaint = Paint()
..color = currentPainting.yOpen > currentPainting.yClose
? style.positiveColor
: style.negativeColor
..strokeWidth = 1.2;

_positiveCandlePaint = Paint()..color = style.positiveColor;
_negativeCandlePaint = Paint()..color = style.negativeColor;

canvas.drawLine(
Offset(currentPainting.xCenter, currentPainting.yHigh),
Offset(currentPainting.xCenter, currentPainting.yLow),
_linePaint,
);

if (currentPainting.yOpen == currentPainting.yClose) {
canvas.drawLine(
Offset(currentPainting.xCenter - currentPainting.width / 2,
currentPainting.yOpen),
Offset(currentPainting.xCenter + currentPainting.width / 2,
currentPainting.yOpen),
_linePaint,
);
} else if (currentPainting.yOpen > currentPainting.yClose) {
canvas.drawRect(
Rect.fromLTRB(
currentPainting.xCenter - currentPainting.width / 2,
currentPainting.yClose,
currentPainting.xCenter + currentPainting.width / 2,
currentPainting.yOpen,
),
_positiveCandlePaint,
);
} else {
canvas.drawRect(
Rect.fromLTRB(
currentPainting.xCenter - currentPainting.width / 2,
currentPainting.yOpen,
currentPainting.xCenter + currentPainting.width / 2,
currentPainting.yClose,
),
_negativeCandlePaint,
);
}
}
}
23 changes: 23 additions & 0 deletions chart_app/lib/src/series/candle_series.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import 'package:deriv_chart/deriv_chart.dart' hide OHLCTypeSeries;
import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_series/ohlc_series/ohlc_type_series.dart';
import './candle_painter.dart';

/// CandleStick series
class CandleSeries extends OHLCTypeSeries {
/// Initializes
CandleSeries(
List<Candle> entries, {
String? id,
String? painterType,
CandleStyle? style,
HorizontalBarrierStyle? lastTickIndicatorStyle,
}) : super(
entries,
id ?? 'CandleSeries',
style: style,
lastTickIndicatorStyle: lastTickIndicatorStyle,
);

@override
SeriesPainter<DataSeries<Candle>> createPainter() => CandlePainter(this);
}

0 comments on commit 88bce37

Please sign in to comment.