Skip to content

Commit

Permalink
CLI-627: vault landing screen graph (#221)
Browse files Browse the repository at this point in the history
* add chart radio buttons

* fine tune graph

* comment

* comment

---------

Co-authored-by: Mike <[email protected]>
  • Loading branch information
mike-dydx and mike-dydx committed Aug 20, 2024
1 parent 45588a2 commit 613c480
Show file tree
Hide file tree
Showing 7 changed files with 327 additions and 11 deletions.
2 changes: 1 addition & 1 deletion PlatformUI/PlatformUI/DesignSystem/Theme/ThemeConfig.swift
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@ public struct FontTypeDetail: Codable, Equatable {

public extension ThemeFont {

private func uiFont(of fontType: FontType, fontSize: FontSize) -> UIFont? {
func uiFont(of fontType: FontType, fontSize: FontSize) -> UIFont? {
let sizeValue: Float
switch fontSize {
case .custom(size: let size):
Expand Down
19 changes: 10 additions & 9 deletions PlatformUI/PlatformUI/DesignSystem/Theme/ThemeViewModifiers.swift
Original file line number Diff line number Diff line change
Expand Up @@ -291,13 +291,13 @@ public extension View {
modifier(BorderModifier(cornerRadius: cornerRadius, borderWidth: borderWidth, borderColor: borderColor))
}

func borderAndClip(style: BorderAndClipStyle, borderColor: ThemeColor.SemanticColor, lineWidth: CGFloat = 1) -> some View {
func borderAndClip(style: ClipStyle, borderColor: ThemeColor.SemanticColor, lineWidth: CGFloat = 1) -> some View {
modifier(BorderAndClipModifier(style: style, borderColor: borderColor, lineWidth: lineWidth))
}
}

/// The clip shape/style
public enum BorderAndClipStyle {
public enum ClipStyle {
/// A rectangular shape with rounded corners with specified corner radius, aligned inside the frame of the view containing it.
case cornerRadius(CGFloat)
/// A capsule shape is equivalent to a rounded rectangle where the corner radius is chosen as half the length of the rectangle’s smallest edge.
Expand All @@ -306,7 +306,7 @@ public enum BorderAndClipStyle {
}

private struct BorderAndClipModifier: ViewModifier {
let style: BorderAndClipStyle
let style: ClipStyle
let borderColor: ThemeColor.SemanticColor
let lineWidth: CGFloat

Expand Down Expand Up @@ -453,14 +453,15 @@ public extension View {

private struct CenterAlignedModifier: ViewModifier {
func body(content: Content) -> some View {
HStack {
Spacer()
VStack {
Spacer()
// forcing minLength to 0 does make a difference, default behavior is black box behavior which seems to vary
HStack(spacing: 0) {
Spacer(minLength: 0)
VStack(spacing: 0) {
Spacer(minLength: 0)
content
Spacer()
Spacer(minLength: 0)
}
Spacer()
Spacer(minLength: 0)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ import Foundation
open func stringForValue(_ value: Double, axis _: AxisBase?) -> String {
var result: String = ""
if let anchor = GraphingAnchor.shared?.date {
// what is 2500 here?
let time = anchor.addingTimeInterval(unitInterval() * (Double(Int(value)) - 2500.0))
switch resolution {
case .unknown:
Expand Down
16 changes: 16 additions & 0 deletions dydx/dydxViews/dydxViews.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@
02FD2B8B292307A200A5609E /* LeverageRiskChange.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02FD2B8A292307A200A5609E /* LeverageRiskChange.swift */; };
02FF0BCE29AE928700781EDA /* dydxWalletListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02FF0BCD29AE928700781EDA /* dydxWalletListView.swift */; };
02FF0BD529AEB91900781EDA /* dydxWalletView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02FF0BD429AEB91900781EDA /* dydxWalletView.swift */; };
2700A3172C5D72BB00880AFA /* dydxVaultChartViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2700A3162C5D72BB00880AFA /* dydxVaultChartViewModel.swift */; };
27044F7F2BBB1D5A004C750D /* dydxTakeProfitStopLossViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27044F7E2BBB1D5A004C750D /* dydxTakeProfitStopLossViewModel.swift */; };
270BA8CF2A6F1470009212EA /* dydxDebugThemeViewerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 270BA8CE2A6F1470009212EA /* dydxDebugThemeViewerView.swift */; };
270E7E342A5F700B00136793 /* dydxOrderbookManagerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 270E7E332A5F700B00136793 /* dydxOrderbookManagerView.swift */; };
Expand Down Expand Up @@ -195,6 +196,7 @@
27AFE4EA2C1902BF00168B0B /* dydxReceiptChangeItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27AFE4DD2C1902BF00168B0B /* dydxReceiptChangeItemView.swift */; };
27BAAF112BD851B500F650C3 /* dydxTakeProfitStopLossStatusViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27BAAF102BD851B500F650C3 /* dydxTakeProfitStopLossStatusViewModel.swift */; };
27C027452AFD734800E92CCB /* dydxSettingsHelpRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27C027442AFD734800E92CCB /* dydxSettingsHelpRowView.swift */; };
27C6AE182C618055005517B5 /* RadioButtons.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27C6AE172C618055005517B5 /* RadioButtons.swift */; };
27C6E4C92BC8C30E00ED892A /* dydxCustomLimitPriceViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27C6E4BC2BC8C30E00ED892A /* dydxCustomLimitPriceViewModel.swift */; };
27CDA3D42BBF1AD700FEAFFE /* dydxMultipleOrdersExistViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27CDA3D32BBF1AD700FEAFFE /* dydxMultipleOrdersExistViewModel.swift */; };
27DBF3C92C4A05B9009EB2D6 /* dydxTitledNumberField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 27DBF3C82C4A05B9009EB2D6 /* dydxTitledNumberField.swift */; };
Expand Down Expand Up @@ -536,6 +538,7 @@
02FD2B8A292307A200A5609E /* LeverageRiskChange.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LeverageRiskChange.swift; sourceTree = "<group>"; };
02FF0BCD29AE928700781EDA /* dydxWalletListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxWalletListView.swift; sourceTree = "<group>"; };
02FF0BD429AEB91900781EDA /* dydxWalletView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxWalletView.swift; sourceTree = "<group>"; };
2700A3162C5D72BB00880AFA /* dydxVaultChartViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxVaultChartViewModel.swift; sourceTree = "<group>"; };
27044F7E2BBB1D5A004C750D /* dydxTakeProfitStopLossViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxTakeProfitStopLossViewModel.swift; sourceTree = "<group>"; };
270BA8CE2A6F1470009212EA /* dydxDebugThemeViewerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxDebugThemeViewerView.swift; sourceTree = "<group>"; };
270E7E332A5F700B00136793 /* dydxOrderbookManagerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxOrderbookManagerView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -570,6 +573,7 @@
27AFE4DD2C1902BF00168B0B /* dydxReceiptChangeItemView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = dydxReceiptChangeItemView.swift; sourceTree = "<group>"; };
27BAAF102BD851B500F650C3 /* dydxTakeProfitStopLossStatusViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxTakeProfitStopLossStatusViewModel.swift; sourceTree = "<group>"; };
27C027442AFD734800E92CCB /* dydxSettingsHelpRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxSettingsHelpRowView.swift; sourceTree = "<group>"; };
27C6AE172C618055005517B5 /* RadioButtons.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtons.swift; sourceTree = "<group>"; };
27C6E4BC2BC8C30E00ED892A /* dydxCustomLimitPriceViewModel.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = dydxCustomLimitPriceViewModel.swift; sourceTree = "<group>"; };
27CDA3D32BBF1AD700FEAFFE /* dydxMultipleOrdersExistViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxMultipleOrdersExistViewModel.swift; sourceTree = "<group>"; };
27DBF3C82C4A05B9009EB2D6 /* dydxTitledNumberField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = dydxTitledNumberField.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -1487,7 +1491,9 @@
2751D6762C597BEC00B36F95 /* Landing */ = {
isa = PBXGroup;
children = (
27C6AE0A2C618044005517B5 /* RadioButtons */,
2751D6542C59646700B36F95 /* dydxVaultViewModel.swift */,
2700A3162C5D72BB00880AFA /* dydxVaultChartViewModel.swift */,
);
path = Landing;
sourceTree = "<group>";
Expand Down Expand Up @@ -1540,6 +1546,14 @@
path = Banner;
sourceTree = "<group>";
};
27C6AE0A2C618044005517B5 /* RadioButtons */ = {
isa = PBXGroup;
children = (
27C6AE172C618055005517B5 /* RadioButtons.swift */,
);
path = RadioButtons;
sourceTree = "<group>";
};
27D276222C519C98002775F2 /* dydxComponents */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -2016,6 +2030,7 @@
022EDC8E29A048B3003D59A7 /* dydxClosePositionHeaderView.swift in Sources */,
27E0736B2C20D27F0034B963 /* dydxCancelPendingIsolatedOrdersView.swift in Sources */,
02F1D3882BEAA6CA00A9376C /* dydxTradeInputMarginView.swift in Sources */,
2700A3172C5D72BB00880AFA /* dydxVaultChartViewModel.swift in Sources */,
0256F53629AFFC9800A083C0 /* dydxOnboardConnectView.swift in Sources */,
024F48902965CE9200E40247 /* dydxPortfolioDetailsView.swift in Sources */,
02A8976028E6A962006F1658 /* dydxMarketAssetListView.swift in Sources */,
Expand Down Expand Up @@ -2193,6 +2208,7 @@
0230377328C13BBB00412B72 /* dydxMarketsView.swift in Sources */,
02F958142A1BDEE500828F9A /* dydxKeyExportView.swift in Sources */,
0238B90B29FB38F200FCE4D0 /* dydxThemeLoader.swift in Sources */,
27C6AE182C618055005517B5 /* RadioButtons.swift in Sources */,
0279DE872BED3F5400F9ECF8 /* dydxAdjustMarginDirectionView.swift in Sources */,
023DC88F29CCBD2C000DD920 /* dydxOnboardQRCodeView.swift in Sources */,
0238FE08296EF8E5002E1C1A /* dydxMarketPositionView.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
//
// RadioButtonGroup.swift
// dydxViews
//
// Created by Michael Maguire on 8/5/24.
//

import Foundation
import SwiftUI
import PlatformUI

protocol RadioButtonContentDisplayable: Equatable {
var displayText: String { get }
}

/// A simplified version of TabGroup which supports binding for the selected option and does not require a view builder for each item.
/// Use TabGroup when the radio buttons are not displaying exclusively Text.
struct RadioButtonGroup<ButtonItem: RadioButtonContentDisplayable>: View {

@Binding var selected: ButtonItem

let options: [ButtonItem]

let buttonClipStyle: ClipStyle
/// when not specified, width will be natural. When specified, width will be forced
let itemWidth: CGFloat?
/// when not specified, height will be natural. When specified, height will be forced
let itemHeight: CGFloat?

var body: some View {
HStack(spacing: 8) {
ForEach(0..<options.count, id: \.self) { index in
let option = options[index]
RadioButton(displayText: option.displayText,
isSelected: selected == option,
clipStyle: buttonClipStyle,
width: itemWidth,
height: itemHeight
) {
selected = option
}
}
}
}
}

struct RadioButton: View {
let displayText: String
let isSelected: Bool
let clipStyle: ClipStyle
let width: CGFloat?
let height: CGFloat?
let selectionAction: () -> Void

private var verticalSpacer: some View {
Spacer(minLength: 11)
}

private var horizontalSpacer: some View {
Spacer(minLength: 8)
}

var body: some View {
Text(displayText)
.lineLimit(1)
.themeColor(foreground: isSelected ? .textPrimary : .textTertiary)
.themeFont(fontType: .base, fontSize: .smaller)
// if width is specified, i.e. non-nil, setting horizontal inset to 0 will allow entire space to be used horizontally
.padding(.horizontal, width == nil ? 8 : 0)
// if height is specified, i.e. non-nil, setting vertical inset to 0 will allow entire space to be used horizontally
.padding(.horizontal, width == nil ? 8 : 0)
.centerAligned()
.frame(width: width, height: height)
.fixedSize()
.themeColor(background: isSelected ? .layer1 : .layer3)
.borderAndClip(style: clipStyle, borderColor: .borderDefault)
.onTapGesture {
selectionAction()
}
}
}
Loading

0 comments on commit 613c480

Please sign in to comment.