Skip to content

Commit 381493c

Browse files
vinu-derivvinu-deriv
authored
Merge pull request #1641 from kate-deriv/kate/DTRA-2225/chart_colors_updates
DTRA-2225 / Kate / Update colors
2 parents 1ccbf52 + 5e6c4c8 commit 381493c

File tree

7 files changed

+140
-26
lines changed

7 files changed

+140
-26
lines changed

‎chart_app/lib/deriv_chart_wrapper.dart‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -251,11 +251,17 @@ class DerivChartWrapperState extends State<DerivChartWrapper> {
251251

252252
final bool isTickGranularity = granularity < 60000;
253253

254+
final bool isLightMode =
255+
configModel.theme is ChartDefaultLightTheme;
256+
254257
final DataSeries<Tick> mainSeries =
255258
getDataSeries(feedModel, configModel, granularity);
256259

257-
final Color latestTickColor = Color.fromRGBO(
258-
255, 68, 81, configModel.isSymbolClosed ? 0.32 : 1);
260+
final Color latestTickColor = isLightMode
261+
? Color.fromRGBO(
262+
0, 0, 0, configModel.isSymbolClosed ? 0.32 : 1)
263+
: Color.fromRGBO(255, 255, 255,
264+
configModel.isSymbolClosed ? 0.32 : 1);
259265

260266
final Duration animationDuration = _getAnimationDuration(
261267
isTickGranularity: isTickGranularity);
@@ -273,46 +279,49 @@ class DerivChartWrapperState extends State<DerivChartWrapper> {
273279
feedModel.ticks.last,
274280
id: 'last_tick_indicator',
275281
style: HorizontalBarrierStyle(
282+
labelPadding: 8,
276283
color: latestTickColor,
277-
labelShape: LabelShape.pentagon,
278284
hasArrow: false,
279-
textStyle: const TextStyle(
285+
textStyle: TextStyle(
280286
fontSize: 12,
281287
height: 1.3,
282288
fontWeight: FontWeight.w600,
283-
color: Colors.white,
284-
fontFeatures: <FontFeature>[
289+
color: isLightMode
290+
? Colors.white
291+
: Colors.black,
292+
fontFeatures: const <FontFeature>[
285293
FontFeature.tabularFigures()
286294
],
287295
)),
288296
visibility: HorizontalBarrierVisibility
289297
.keepBarrierLabelVisible,
290298
),
291299
if (configModel.isLive)
292-
BlinkingTickIndicator(
293-
feedModel.ticks.last,
294-
id: 'blink_tick_indicator',
295-
visibility: HorizontalBarrierVisibility
296-
.keepBarrierLabelVisible,
297-
),
300+
BlinkingTickIndicator(feedModel.ticks.last,
301+
id: 'blink_tick_indicator',
302+
visibility: HorizontalBarrierVisibility
303+
.keepBarrierLabelVisible,
304+
style: HorizontalBarrierStyle(
305+
color: isLightMode
306+
? Colors.black
307+
: Colors.white,
308+
)),
298309
if (app.configModel.showTimeInterval &&
299310
!isTickGranularity)
300311
TimeIntervalIndicator(
301312
app.configModel.remainingTime,
302313
feedModel.ticks.last.close,
303314
longLine: false,
304315
style: HorizontalBarrierStyle(
305-
color: configModel.theme
306-
is ChartDefaultLightTheme
316+
color: isLightMode
307317
? Colors.black
308318
: Colors.white,
309319
hasArrow: false,
310320
textStyle: TextStyle(
311321
fontSize: 12,
312322
height: 1.3,
313323
fontWeight: FontWeight.w600,
314-
color: configModel.theme
315-
is ChartDefaultLightTheme
324+
color: isLightMode
316325
? Colors.white
317326
: Colors.black,
318327
fontFeatures: const <FontFeature>[

‎chart_app/lib/src/helpers/series.dart‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import 'package:chart_app/src/models/chart_config.dart';
22
import 'package:chart_app/src/models/chart_feed.dart';
33
import 'package:chart_app/src/series/custom_line_series.dart';
4-
import 'package:deriv_chart/deriv_chart.dart';
4+
import 'package:deriv_chart/deriv_chart.dart' hide CandleSeries;
55
import 'package:flutter/material.dart';
6+
import '../series/candle_series.dart';
67

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

2021
switch (configModel.style) {
@@ -31,7 +32,9 @@ DataSeries<Tick> getDataSeries(
3132
return CustomLineSeries(
3233
ticks,
3334
style: LineStyle(
34-
color: Color.fromRGBO(133, 172, 176, opacity),
35+
color: isLightMode
36+
? Color.fromRGBO(0, 0, 0, opacity)
37+
: Color.fromRGBO(255, 255, 255, opacity),
3538
hasArea: true,
3639
),
3740
);

‎chart_app/lib/src/painters/blink_tick_painter.dart‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ class BlinkingTickPainter<T extends BlinkingTickIndicator>
1717
required QuoteToY quoteToY,
1818
required AnimationInfo animationInfo,
1919
}) {
20-
final Paint _paint = Paint()..color = Colors.redAccent;
20+
final HorizontalBarrierStyle style =
21+
series.style as HorizontalBarrierStyle? ?? theme.horizontalBarrierStyle;
22+
23+
final Paint _paint = Paint()..color = style.color;
2124

2225
/// Animated Value
2326
double? animatedValue;
@@ -57,15 +60,15 @@ class BlinkingTickPainter<T extends BlinkingTickIndicator>
5760
YAxisConfig.instance.yAxisClipping(canvas, size, () {
5861
canvas.drawCircle(
5962
Offset(dotX!, y),
60-
3 + (animationInfo.currentTickPercent * 6),
63+
4 + (animationInfo.currentTickPercent * 6),
6164
Paint()..color = _paint.color.withOpacity(0.15),
6265
);
6366
});
6467
}
6568
YAxisConfig.instance.yAxisClipping(canvas, size, () {
6669
canvas.drawCircle(
6770
Offset(dotX!, y),
68-
3,
71+
4,
6972
_paint,
7073
);
7174
});

‎chart_app/lib/src/series/candle_painter.dart‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import 'package:deriv_chart/deriv_chart.dart';
2+
import 'package:flutter/material.dart';
3+
4+
/// A [DataPainter] for painting CandleStick data.
5+
class CandlePainter extends OhlcPainter {
6+
/// Initializes
7+
CandlePainter(DataSeries<Candle> series) : super(series);
8+
9+
late Paint _linePaint;
10+
late Paint _positiveCandlePaint;
11+
late Paint _negativeCandlePaint;
12+
13+
@override
14+
void onPaintCandle(
15+
Canvas canvas,
16+
OhlcPainting currentPainting,
17+
OhlcPainting prevPainting,
18+
) {
19+
final CandleStyle style = series.style as CandleStyle? ?? theme.candleStyle;
20+
21+
_linePaint = Paint()
22+
..color = currentPainting.yOpen > currentPainting.yClose
23+
? style.positiveColor
24+
: style.negativeColor
25+
..strokeWidth = 1.2;
26+
27+
_positiveCandlePaint = Paint()..color = style.positiveColor;
28+
_negativeCandlePaint = Paint()..color = style.negativeColor;
29+
30+
canvas.drawLine(
31+
Offset(currentPainting.xCenter, currentPainting.yHigh),
32+
Offset(currentPainting.xCenter, currentPainting.yLow),
33+
_linePaint,
34+
);
35+
36+
if (currentPainting.yOpen == currentPainting.yClose) {
37+
canvas.drawLine(
38+
Offset(currentPainting.xCenter - currentPainting.width / 2,
39+
currentPainting.yOpen),
40+
Offset(currentPainting.xCenter + currentPainting.width / 2,
41+
currentPainting.yOpen),
42+
_linePaint,
43+
);
44+
} else if (currentPainting.yOpen > currentPainting.yClose) {
45+
canvas.drawRect(
46+
Rect.fromLTRB(
47+
currentPainting.xCenter - currentPainting.width / 2,
48+
currentPainting.yClose,
49+
currentPainting.xCenter + currentPainting.width / 2,
50+
currentPainting.yOpen,
51+
),
52+
_positiveCandlePaint,
53+
);
54+
} else {
55+
canvas.drawRect(
56+
Rect.fromLTRB(
57+
currentPainting.xCenter - currentPainting.width / 2,
58+
currentPainting.yOpen,
59+
currentPainting.xCenter + currentPainting.width / 2,
60+
currentPainting.yClose,
61+
),
62+
_negativeCandlePaint,
63+
);
64+
}
65+
}
66+
}

‎chart_app/lib/src/series/candle_series.dart‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import 'package:deriv_chart/deriv_chart.dart' hide OHLCTypeSeries;
2+
import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_series/ohlc_series/ohlc_type_series.dart';
3+
import './candle_painter.dart';
4+
5+
/// CandleStick series
6+
class CandleSeries extends OHLCTypeSeries {
7+
/// Initializes
8+
CandleSeries(
9+
List<Candle> entries, {
10+
String? id,
11+
String? painterType,
12+
CandleStyle? style,
13+
HorizontalBarrierStyle? lastTickIndicatorStyle,
14+
}) : super(
15+
entries,
16+
id ?? 'CandleSeries',
17+
style: style,
18+
lastTickIndicatorStyle: lastTickIndicatorStyle,
19+
);
20+
21+
@override
22+
SeriesPainter<DataSeries<Candle>> createPainter() => CandlePainter(this);
23+
}

‎sass/components/_barrier.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@
9696
right: -1px;
9797
background-color: $color-blue;
9898
justify-content: space-between;
99+
border-radius: 4px;
99100

100101
.arrow-icon {
101102
height: 41px;

‎src/components/PriceLine.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ const PriceLine = ({
5959
if (!showBarrier) return null;
6060

6161
const width = priceLineWidth + 12;
62-
const price_right_offset = (isOverlappingWithPriceLine ? width - overlappedBarrierWidth : 0) + (isMobile ? 20 : 3);
62+
const price_right_offset =
63+
(isOverlappingWithPriceLine ? width + 6 - overlappedBarrierWidth : 0) + (isMobile ? 20 : 3);
6364

6465
return (
6566
<div
@@ -95,6 +96,8 @@ const PriceLine = ({
9596
width: isOverlappingWithPriceLine ? overlappedBarrierWidth : width,
9697
opacity,
9798
right: price_right_offset,
99+
borderTopRightRadius: isOverlappingWithPriceLine ? 0 : 4,
100+
borderBottomRightRadius: isOverlappingWithPriceLine ? 0 : 4,
98101
}}
99102
>
100103
<HamburgerDragIcon />
@@ -117,7 +120,13 @@ const PriceLine = ({
117120
{isOverlappingWithPriceLine && (
118121
<div
119122
className='price-overlay'
120-
style={{ backgroundColor: color, width: width - overlappedBarrierWidth + 6, right: isMobile ? 20 : 3 }}
123+
style={{
124+
backgroundColor: color,
125+
width: width - overlappedBarrierWidth + 6,
126+
right: isMobile ? 20 : 3,
127+
borderTopRightRadius: isOverlappingWithPriceLine ? 4 : 0,
128+
borderBottomRightRadius: isOverlappingWithPriceLine ? 4 : 0,
129+
}}
121130
/>
122131
)}
123132
</div>

0 commit comments

Comments
 (0)