Skip to content

Commit 8e6bfb5

Browse files
gvreddy04gvreddy04
committed
Update color documentation and improve layout
Changed section headers in ColorUtilDocumentation.razor to enhance visual hierarchy. Replaced grid layouts with table layouts in ColorUtil_Demo_01_CategoricalSixColor.razor and ColorUtil_Demo_02_CategoricalTwelveColor.razor for better organization and consistency in color displays. NOTE: This commit message is auto-generated using GitHub Copilot.
1 parent 0319ed5 commit 8e6bfb5

3 files changed

Lines changed: 34 additions & 454 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/Utils/ColorUtil/ColorUtilDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
</SubTitleTemplate>
1010
</PageHero>
1111

12-
<Section Size="HeadingSize.H2" Name="Categorical 6-color" PageUrl="@pageUrl" Link="categorical-6-color">
12+
<Section Class="p-0" Size="HeadingSize.H4" Name="Categorical 6-color" PageUrl="@pageUrl" Link="categorical-6-color">
1313
<Block>
1414
<ColorUtil_Demo_01_CategoricalSixColor />
1515
</Block>
1616
</Section>
1717

18-
<Section Size="HeadingSize.H2" Name="Categorical 12-color" PageUrl="@pageUrl" Link="categorical-12-color">
18+
<Section Class="p-0" Size="HeadingSize.H4" Name="Categorical 12-color" PageUrl="@pageUrl" Link="categorical-12-color">
1919
<Block>
2020
<ColorUtil_Demo_02_CategoricalTwelveColor />
2121
</Block>

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/Utils/ColorUtil/ColorUtil_Demo_01_CategoricalSixColor.razor‎

Lines changed: 16 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,17 @@
1-
<div class="grid">
2-
<div class="cell">
3-
4-
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[0]</div>
5-
6-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString().ToLowerInvariant()}")">
7-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0];width:48px;height:48px;"></div>
8-
</Tooltip>
9-
10-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
11-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
12-
</Tooltip>
13-
14-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
15-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
16-
</Tooltip>
17-
18-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
19-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
20-
</Tooltip>
21-
22-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
23-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
24-
</Tooltip>
25-
26-
</div>
27-
<div class="cell">
28-
29-
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[1]</div>
30-
31-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 1 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString().ToLowerInvariant()}")">
32-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1];width:48px;height:48px;"></div>
33-
</Tooltip>
34-
35-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 1 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
36-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
37-
</Tooltip>
38-
39-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 1 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
40-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
41-
</Tooltip>
42-
43-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 1 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
44-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
45-
</Tooltip>
46-
47-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 1 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
48-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
49-
</Tooltip>
50-
51-
</div>
52-
<div class="cell">
53-
54-
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[2]</div>
55-
56-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 2 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString().ToLowerInvariant()}")">
57-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2];width:48px;height:48px;"></div>
58-
</Tooltip>
59-
60-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 2 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
61-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
62-
</Tooltip>
63-
64-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 2 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
65-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
66-
</Tooltip>
67-
68-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 2 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
69-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
70-
</Tooltip>
71-
72-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 2 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
73-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
74-
</Tooltip>
75-
76-
</div>
77-
<div class="cell">
78-
79-
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[3]</div>
80-
81-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 3 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString().ToLowerInvariant()}")">
82-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3];width:48px;height:48px;"></div>
83-
</Tooltip>
84-
85-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 3 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
86-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
87-
</Tooltip>
88-
89-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 3 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
90-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
91-
</Tooltip>
92-
93-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 3 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
94-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
95-
</Tooltip>
96-
97-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 3 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
98-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
99-
</Tooltip>
100-
101-
</div>
102-
<div class="cell">
103-
104-
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[4]</div>
105-
106-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 4 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString().ToLowerInvariant()}")">
107-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4];width:48px;height:48px;"></div>
108-
</Tooltip>
109-
110-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 4 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
111-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
112-
</Tooltip>
113-
114-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 4 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
115-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
116-
</Tooltip>
117-
118-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 4 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
119-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
120-
</Tooltip>
121-
122-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 4 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
123-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
124-
</Tooltip>
125-
126-
</div>
127-
<div class="cell">
128-
129-
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[5]</div>
130-
131-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 5 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbString().ToLowerInvariant()}")">
132-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5];width:48px;height:48px;"></div>
133-
</Tooltip>
134-
135-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 5 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
136-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
137-
</Tooltip>
138-
139-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 5 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
140-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
141-
</Tooltip>
142-
143-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 5 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
144-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
145-
</Tooltip>
146-
147-
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 5 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
148-
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
149-
</Tooltip>
150-
151-
</div>
1+
<div class="table-container">
2+
<table class="table">
3+
<tbody>
4+
@foreach (var c in ColorUtility.CategoricalSixColors.Select((c, i) => new { Color = c, Index = i }))
5+
{
6+
<tr>
7+
<td>@c.Color</td>
8+
<td class="m-1 p-2" style="background-color: @c.Color;width:48px;height:48px;" Title="@($"Index: {c.Index}, Color: {@ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbString().ToLowerInvariant()}")"></td>
9+
<td class="m-1 p-2" style="background-color: @ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.8);width:48px;height:48px;" Title="@($"Index: {c.Index}, Color: {@ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")"></td>
10+
<td class="m-1 p-2" style="background-color: @ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.6);width:48px;height:48px;" Title="@($"Index: {c.Index}, Color: {@ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")"></td>
11+
<td class="m-1 p-2" style="background-color: @ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.4);width:48px;height:48px;" Title="@($"Index: {c.Index}, Color: {@ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")"></td>
12+
<td class="m-1 p-2" style="background-color: @ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.2);width:48px;height:48px;" Title="@($"Index: {c.Index}, Color: {@ColorUtility.CategoricalSixColors[c.Index].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")"></td>
13+
</tr>
14+
}
15+
</tbody>
16+
</table>
15217
</div>

0 commit comments

Comments
 (0)