Skip to content

Commit

Permalink
Merge pull request #356 from LayTec-AG/feature/improve-examples
Browse files Browse the repository at this point in the history 
Add dark mode and cleanup code for examples
  • Loading branch information
@sean-mcl
sean-mcl authored Aug 10, 2023
2 parents a1f4d4c + 3d72c5f commit 06c5563
Show file tree
Hide file tree
Showing 25 changed files with 1,605 additions and 877 deletions.
164 changes: 149 additions & 15 deletions Plotly.Blazor.Examples/App.razor
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,150 @@
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
<CascadingValue Value="Theme">
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>

<MudThemeProvider Theme="Theme" IsDarkMode="true" />
<MudDialogProvider />
<MudSnackbarProvider />
</CascadingValue>

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
@code
{
public MudTheme Theme { get; set; } = new()
{
Palette = new PaletteLight
{
Black = "#272c34ff",
Primary = "#0078d7",
Secondary = "#FEB16B",
Success = "#A4D266",
Warning = "#FEB16B",
Dark = "#303030",
Info = "#4889CD",
Error = "#EA4F52",
Surface = "#f0f0f0",
Background = "#f0f0f0",
BackgroundGrey = "#f5f5f5ff",
DrawerBackground = "#f0f0f0",
DrawerText = "#424242ff",
DrawerIcon = "#616161ff",
AppbarBackground = "#0078d7",
AppbarText = "#ffffffff",
TextPrimary = "#424242ff",
TextSecondary = "#00000089",
ActionDefault = "#00000089",
ActionDisabled = "#00000042",
ActionDisabledBackground = "#0000001e",
Divider = "#e0e0e0ff",
DividerLight = "#000000cc",
TableLines = "#e0e0e0ff",
LinesDefault = "#0000001e",
LinesInputs = "#bdbdbdff",
TextDisabled = "#00000060"
},
PaletteDark = new PaletteDark
{
Black = "#000000",
Primary = "#54A68F",
Secondary = "#FEB16B",
Success = "#A4D266",
Warning = "#FEB16B",
Dark = "#303030",
Info = "#4889CD",
Error = "#EA4F52",
Surface = "#303030",
Background = "#212121",
BackgroundGrey = "#303030",
DrawerBackground = "#303030",
DrawerText = "#FFFFFF",
DrawerIcon = "#FFFFFF",
AppbarBackground = "#303030",
AppbarText = "#FFFFFF",
TextPrimary = "#FFFFFF",
TextSecondary = "#FFFFFF",
ActionDefault = "#adadb1",
ActionDisabled = "rgba(255,255,255, 0.26)",
ActionDisabledBackground = "rgba(255,255,255, 0.12)",
Divider = "rgba(255,255,255, 0.12)",
DividerLight = "rgba(255,255,255, 0.06)",
TableLines = "rgba(255,255,255, 0.12)",
LinesDefault = "rgba(255,255,255, 0.12)",
LinesInputs = "rgba(255,255,255, 0.3)",
TextDisabled = "rgba(255,255,255, 0.2)"
},
Typography = new Typography
{
Default = new Default
{
FontSize = "1em"
},
Body1 = new Body1
{
FontSize = "1em"
},
Body2 = new Body2
{
FontSize = ".83em"
},
Caption = new Caption
{
FontSize = "1.12em",
FontWeight = 550
},
Overline = new Overline
{
FontSize = "1.12em",
FontWeight = 550
},
H1 = new H1
{
FontSize = "2em",
FontWeight = 700
},
H2 = new H2
{
FontSize = "1.5em",
FontWeight = 650
},
H3 = new H3
{
FontSize = "1.17em",
FontWeight = 600
},
H4 = new H4
{
FontSize = "1.12em",
FontWeight = 550
},
H5 = new H5
{
FontSize = ".83em",
FontWeight = 500
},
H6 = new H6
{
FontSize = ".75em",
FontWeight = 450
},
Subtitle1 = new Subtitle1
{
FontSize = "3em",
FontWeight = 650
},
Subtitle2 = new Subtitle2
{
FontSize = "1.17em",
FontWeight = 600
}
}
};
}
69 changes: 43 additions & 26 deletions Plotly.Blazor.Examples/Components/BarChart.razor
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,55 @@
@using Plotly.Blazor.LayoutLib
<PlotlyChart Id="TestId" Config="config" Layout="layout" Data="data" @ref="chart"/>
<PlotlyChart style="height: 60vh; min-height: 350px" @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"/>

@code
{
PlotlyChart chart;
[CascadingParameter]
private MudTheme Theme { get; set; }

Config config = new Config
{
Responsive = true
};
private PlotlyChart chart;
private Config config;
private Layout layout;
private IList<ITrace> data;

Layout layout = new Layout
/// <inheritdoc />
protected override void OnInitialized()
{
Title = new Title
config = new Config
{
Text = "Bar"
},
BarMode = BarModeEnum.Stack,
Height = 500
};
Responsive = true
};

List<ITrace> data = new List<ITrace>
{
new Bar
layout = new Layout
{
X = new List<object> {"giraffes", "orangutans", "monkeys"},
Y = new List<object> {20, 14, 23},
Name = "SF Zoo"
},
new Bar
Title = new Title
{
Text = GetType().Name
},
PaperBgColor = Theme.PaletteDark.Surface.ToString(),
PlotBgColor = Theme.PaletteDark.Surface.ToString(),
Font = new Font
{
Color = Theme.PaletteDark.TextPrimary.ToString()
},
BarMode = BarModeEnum.Stack
};

data = new List<ITrace>
{
X = new List<object> {"giraffes", "orangutans", "monkeys"},
Y = new List<object> {12, 18, 29},
Name = "LA Zoo"
}
};
new Bar
{
X = new List<object> { "giraffes", "orangutans", "monkeys" },
Y = new List<object> { 20, 14, 23 },
Name = "SF Zoo"
},
new Bar
{
X = new List<object> { "giraffes", "orangutans", "monkeys" },
Y = new List<object> { 12, 18, 29 },
Name = "LA Zoo"
}
};

base.OnInitialized();
}
}
86 changes: 52 additions & 34 deletions Plotly.Blazor.Examples/Components/BoxChart.razor
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,61 @@
@using Plotly.Blazor.LayoutLib
<PlotlyChart Id="BoxChart" Config="config" Layout="layout" Data="data" @ref="chart"/>
@using Plotly.Blazor.Traces.BoxLib
<PlotlyChart style="height: 60vh; min-height: 350px" @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"/>

@code
{
[CascadingParameter]
private MudTheme Theme { get; set; }

@code {
PlotlyChart chart;
private PlotlyChart chart;
private Config config;
private Layout layout;
private IList<ITrace> data;

Config config = new Config
/// <inheritdoc />
protected override void OnInitialized()
{
Responsive = true
};

Layout layout = new Layout
{
Title = new Title
config = new Config
{
Text = "Box"
},
Height = 500
};
Responsive = true
};

List<ITrace> data = new List<ITrace>
{
new Box
layout = new Layout
{
Y = new List<object> {86, 92, 77, 81, 70, 71, 72, 39, 48, 38, 6, 23, 69, 84, 60, 96, 75, 84, 84, 92, 75, 80, 47, 32, 16},
Name = "trace 0"
},
new Box
{
Y = new List<object> {79, 65, 58, 49, 95, 29, 81, 38, 27, 21, 96, 68, 58, 40, 62, 30, 45, 53, 80, 83, 41, 39, 54, 50, 34},
Name = "trace 1",
BoxMean = Traces.BoxLib.BoxMeanEnum.SD
},
new Box
Title = new Title
{
Text = GetType().Name
},
PaperBgColor = Theme.PaletteDark.Surface.ToString(),
PlotBgColor = Theme.PaletteDark.Surface.ToString(),
Font = new Font
{
Color = Theme.PaletteDark.TextPrimary.ToString()
}
};

data = new List<ITrace>
{
Name = "trace 2",
Y = new List<object> {31, 50, 4, 6, 54, 58, 69, 32, 40, 24, 20, 17, 33, 8, 12, 97, 0, 4, 75, 10, 43, 70, 88, 0, 17},
BoxMean = Traces.BoxLib.BoxMeanEnum.True,
BoxPoints = Traces.BoxLib.BoxPointsEnum.All
}
};
}
new Box
{
Y = new List<object> { 86, 92, 77, 81, 70, 71, 72, 39, 48, 38, 6, 23, 69, 84, 60, 96, 75, 84, 84, 92, 75, 80, 47, 32, 16 },
Name = "trace 0"
},
new Box
{
Y = new List<object> { 79, 65, 58, 49, 95, 29, 81, 38, 27, 21, 96, 68, 58, 40, 62, 30, 45, 53, 80, 83, 41, 39, 54, 50, 34 },
Name = "trace 1",
BoxMean = BoxMeanEnum.SD
},
new Box
{
Name = "trace 2",
Y = new List<object> { 31, 50, 4, 6, 54, 58, 69, 32, 40, 24, 20, 17, 33, 8, 12, 97, 0, 4, 75, 10, 43, 70, 88, 0, 17 },
BoxMean = BoxMeanEnum.True,
BoxPoints = BoxPointsEnum.All
}
};

base.OnInitialized();
}
}
Loading

0 comments on commit 06c5563

Please sign in to comment.