Skip to content

Commit

Permalink
Merge pull request #1641 from kate-deriv/kate/DTRA-2225/chart_colors_…
Browse files Browse the repository at this point in the history 
…updates

DTRA-2225 / Kate / Update colors
  • Loading branch information
@vinu-deriv
vinu-deriv authored Nov 14, 2024
2 parents 1ccbf52 + 5e6c4c8 commit 381493c
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 26 deletions.
41 changes: 25 additions & 16 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 @@ -273,46 +279,49 @@ class DerivChartWrapperState extends State<DerivChartWrapper> {
feedModel.ticks.last,
id: 'last_tick_indicator',
style: HorizontalBarrierStyle(
labelPadding: 8,
color: latestTickColor,
labelShape: LabelShape.pentagon,
hasArrow: false,
textStyle: const TextStyle(
textStyle: TextStyle(
fontSize: 12,
height: 1.3,
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);
}
1 change: 1 addition & 0 deletions sass/components/_barrier.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@
right: -1px;
background-color: $color-blue;
justify-content: space-between;
border-radius: 4px;

.arrow-icon {
height: 41px;
Expand Down
13 changes: 11 additions & 2 deletions src/components/PriceLine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ const PriceLine = ({
if (!showBarrier) return null;

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

return (
<div
Expand Down Expand Up @@ -95,6 +96,8 @@ const PriceLine = ({
width: isOverlappingWithPriceLine ? overlappedBarrierWidth : width,
opacity,
right: price_right_offset,
borderTopRightRadius: isOverlappingWithPriceLine ? 0 : 4,
borderBottomRightRadius: isOverlappingWithPriceLine ? 0 : 4,
}}
>
<HamburgerDragIcon />
Expand All @@ -117,7 +120,13 @@ const PriceLine = ({
{isOverlappingWithPriceLine && (
<div
className='price-overlay'
style={{ backgroundColor: color, width: width - overlappedBarrierWidth + 6, right: isMobile ? 20 : 3 }}
style={{
backgroundColor: color,
width: width - overlappedBarrierWidth + 6,
right: isMobile ? 20 : 3,
borderTopRightRadius: isOverlappingWithPriceLine ? 4 : 0,
borderBottomRightRadius: isOverlappingWithPriceLine ? 4 : 0,
}}
/>
)}
</div>
Expand Down

0 comments on commit 381493c

Please sign in to comment.