Skip to content

Commit 77f4ab4

Browse files
author
Jeremy Buentello
committed
Some updates to the tree map. Update for tree view and implementing a new standardized way of dealing with hierarchical data
1 parent bc2ac4d commit 77f4ab4

11 files changed

Lines changed: 152 additions & 296 deletions

File tree

‎Blatomic.Examples/Pages/Themes.razor‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ Theme.Add(""SuperButton"", new Palette()
109109
});";
110110
private string themeUpdateCode => @"@inject ThemeService ThemeService
111111
@inject ITheme Theme
112-
@inject NavigationManager Nav
113112
114113
<Button OnClickedAsync=""UpdateTheme"">Update Primary Theme</Button>
115114
<Button OnClickedAsync=""ResetTheme"">Reset Primary Theme</Button>

‎Blatomic.Examples/Pages/Tools.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545

4646
private List<CovidCases> test = new()
4747
{
48-
new CovidCases { Country = "NeverLand1", Cases = 50 },
49-
new CovidCases { Country = "NeverLand2", Cases = 900 },
50-
new CovidCases { Country = "NeverLand3", Cases = 500 },
51-
new CovidCases { Country = "NeverLand4", Cases = 300 },
48+
new CovidCases { Country = "NeverLand1", Cases = 5 },
49+
new CovidCases { Country = "NeverLand2", Cases = 90 },
50+
new CovidCases { Country = "NeverLand3", Cases = 50 },
51+
new CovidCases { Country = "NeverLand4", Cases = 30 },
5252
new CovidCases { Country = "NeverLand5", Cases = 30 },
53-
new CovidCases { Country = "NeverLand6", Cases = 1000 },
53+
new CovidCases { Country = "NeverLand6", Cases = 200 },
5454
new CovidCases { Country = "NeverLand7", Cases = 400 },
5555
};
5656

‎Blatomic.Examples/Pages/TreeViews/Example1.razor‎

Lines changed: 27 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,36 @@
1-
<TreeView Items="@test" Context="item">
1+
@using Blatomic.Extensions
2+
3+
<TreeView Items="@hierarchyData" Context="item">
24
<ItemsTemplate>
3-
@item
5+
@item.Name
46
</ItemsTemplate>
57
</TreeView>
68

79
@code {
8-
private ITree<string> test = TreeBuilder.Create<string>()
9-
.AddChild("1.1")
10-
.AddChild("1.2")
11-
.AddChild("1.3").GoTo()
12-
.AddChild("1.3.1")
13-
.AddChild("1.3.2").GoTo()
14-
.AddChild("1.3.3.1")
15-
.AddChild("1.3.3.2")
16-
.AddChild("1.3.3.3").GoTo()
17-
.AddChild("1.3.3.3.1")
18-
.AddChild("1.3.3.3.2")
19-
.AddChild("1.3.3.3.3").GoTo()
20-
.AddChild("1.3.3.3.3.1")
21-
.AddChild("1.3.3.3.3.2").GoToParent()
22-
.GoToParent()
23-
.GoToParent()
24-
.AddChild("1.3.3").GoToParent()
25-
.AddChild("1.3")
26-
.AddChild("1.4")
27-
.AddChild("1.5")
28-
.AddChild("1.6").GoTo()
29-
.AddChild("1.6.1")
30-
.AddChild("1.6.2")
31-
.AddChild("1.6.2.1").GoTo()
32-
.AddChild("1.6.2.2")
33-
.AddChild("1.6.2.3")
34-
.Build();
35-
10+
private class Hierarchy : IHierarchy<int?>
11+
{
12+
public int? Id { get; set; }
13+
public int? ParentId { get; set; }
14+
public string Name { get; set; }
15+
}
3616

37-
private ITree<string> defaultExample = new Tree<string>()
17+
private List<Hierarchy> testHierarchy = new()
3818
{
39-
Children = new List<ITreeItem<string>>()
40-
{
41-
new TreeItem<string>("test 1"),
42-
new TreeItem<string>("test 2")
43-
{
44-
Children = new List<ITreeItem<string>>()
45-
{
46-
new TreeItem<string>("SubChild 1"),
47-
new TreeItem<string>("SubChild 2")
48-
{
49-
Children = new List<ITreeItem<string>>()
50-
{
51-
new TreeItem<string>("SS 1"),
52-
new TreeItem<string>("SS 2")
53-
{
54-
Children = new List<ITreeItem<string>>()
55-
{
56-
new TreeItem<string>("SSSS 1"),
57-
new TreeItem<string>("SSSS 2"),
58-
new TreeItem<string>("SSSS 3"),
59-
}
60-
},
61-
new TreeItem<string>("SS 3"),
62-
new TreeItem<string>("SS 4"),
63-
}
64-
},
65-
new TreeItem<string>("SubChild 3"),
66-
}
67-
},
68-
new TreeItem<string>("test 3"),
69-
new TreeItem<string>("test 4"),
70-
}
19+
new() { Id = 1, ParentId = null, Name = "Top Level 1" },
20+
new() { Id = 12, ParentId = 3, Name = "Top Level 1.2.1" },
21+
new() { Id = 5, ParentId = 4, Name = "Top Level 2.1" },
22+
new() { Id = 2, ParentId = 1, Name = "Top Level 1.1" },
23+
new() { Id = 4, ParentId = null, Name = "Top Level 2" },
24+
new() { Id = 10, ParentId = 1, Name = "Top Level 1.3" },
25+
new() { Id = 3, ParentId = 1, Name = "Top Level 1.2" },
26+
new() { Id = 14, ParentId = 13, Name = "Top Level 2.3.1.1" },
27+
new() { Id = 11, ParentId = 1, Name = "Top Level 1.4" },
28+
new() { Id = 6, ParentId = 4, Name = "Top Level 2.2" },
29+
new() { Id = 7, ParentId = 4, Name = "Top Level 2.3" },
30+
new() { Id = 13, ParentId = 7, Name = "Top Level 2.3.1" },
31+
new() { Id = 8, ParentId = 4, Name = "Top Level 2.4" },
32+
new() { Id = 9, ParentId = null, Name = "Top Level 3" },
7133
};
34+
35+
private IEnumerable<IHierarchyNode<Hierarchy>> hierarchyData => testHierarchy.ToHierarchy<Hierarchy,int?>();
7236
}

‎Blatomic.Examples/Pages/TreeViews/TreeViews.razor‎

Lines changed: 27 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -25,76 +25,40 @@
2525

2626

2727
@code {
28-
private string example1 = @"<TreeView Items=""@test"" Context=""item"">
28+
private string example1 = @"@using Blatomic.Extensions
29+
30+
<TreeView Items=""@hierarchyData"" Context=""item"">
2931
<ItemsTemplate>
30-
@item
32+
@item.Name
3133
</ItemsTemplate>
3234
</TreeView>
3335
3436
@code {
35-
private ITree<string> test = TreeBuilder.Create<string>()
36-
.AddChild(""1.1"")
37-
.AddChild(""1.2"")
38-
.AddChild(""1.3"").GoTo()
39-
.AddChild(""1.3.1"")
40-
.AddChild(""1.3.2"").GoTo()
41-
.AddChild(""1.3.3.1"")
42-
.AddChild(""1.3.3.2"")
43-
.AddChild(""1.3.3.3"").GoTo()
44-
.AddChild(""1.3.3.3.1"")
45-
.AddChild(""1.3.3.3.2"")
46-
.AddChild(""1.3.3.3.3"").GoTo()
47-
.AddChild(""1.3.3.3.3.1"")
48-
.AddChild(""1.3.3.3.3.2"").GoToParent()
49-
.GoToParent()
50-
.GoToParent()
51-
.AddChild(""1.3.3"").GoToParent()
52-
.AddChild(""1.3"")
53-
.AddChild(""1.4"")
54-
.AddChild(""1.5"")
55-
.AddChild(""1.6"").GoTo()
56-
.AddChild(""1.6.1"")
57-
.AddChild(""1.6.2"")
58-
.AddChild(""1.6.2.1"").GoTo()
59-
.AddChild(""1.6.2.2"")
60-
.AddChild(""1.6.2.3"")
61-
.Build();
62-
37+
private class TestHierarchy
38+
{
39+
public int Id { get; set; }
40+
public int? ParentId { get; set; }
41+
public string Name { get; set; }
42+
}
6343
64-
private ITree<string> defaultExample = new Tree<string>()
44+
private List<TestHierarchy> testHierarchy = new()
6545
{
66-
Children = new List<ITreeItem<string>>()
67-
{
68-
new TreeItem<string>(""test 1""),
69-
new TreeItem<string>(""test 2"")
70-
{
71-
Children = new List<ITreeItem<string>>()
72-
{
73-
new TreeItem<string>(""SubChild 1""),
74-
new TreeItem<string>(""SubChild 2"")
75-
{
76-
Children = new List<ITreeItem<string>>()
77-
{
78-
new TreeItem<string>(""SS 1""),
79-
new TreeItem<string>(""SS 2"")
80-
{
81-
Children = new List<ITreeItem<string>>()
82-
{
83-
new TreeItem<string>(""SSSS 1""),
84-
new TreeItem<string>(""SSSS 2""),
85-
new TreeItem<string>(""SSSS 3""),
86-
}
87-
},
88-
new TreeItem<string>(""SS 3""),
89-
new TreeItem<string>(""SS 4""),
90-
}
91-
},
92-
new TreeItem<string>(""SubChild 3""),
93-
}
94-
},
95-
new TreeItem<string>(""test 3""),
96-
new TreeItem<string>(""test 4""),
97-
}
46+
new() { Id = 1, ParentId = null, Name = ""Top Level 1"" },
47+
new() { Id = 2, ParentId = 1, Name = ""Top Level 1.1"" },
48+
new() { Id = 3, ParentId = 1, Name = ""Top Level 1.2"" },
49+
new() { Id = 12, ParentId = 3, Name = ""Top Level 1.2.1"" },
50+
new() { Id = 10, ParentId = 1, Name = ""Top Level 1.3"" },
51+
new() { Id = 11, ParentId = 1, Name = ""Top Level 1.4"" },
52+
new() { Id = 4, ParentId = null, Name = ""Top Level 2"" },
53+
new() { Id = 5, ParentId = 4, Name = ""Top Level 2.1"" },
54+
new() { Id = 6, ParentId = 4, Name = ""Top Level 2.2"" },
55+
new() { Id = 7, ParentId = 4, Name = ""Top Level 2.3"" },
56+
new() { Id = 13, ParentId = 7, Name = ""Top Level 2.3.1"" },
57+
new() { Id = 14, ParentId = 13, Name = ""Top Level 2.3.1.1"" },
58+
new() { Id = 8, ParentId = 4, Name = ""Top Level 2.4"" },
59+
new() { Id = 9, ParentId = null, Name = ""Top Level 3"" },
9860
};
61+
62+
private IEnumerable<IHierarchicalData<TestHierarchy>> hierarchyData => testHierarchy.CreateHierarchy(t => t.Id, t => t.ParentId);
9963
}";
10064
}

‎Blatomic/Components/TreeMaps/MapSector.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
var flow = SplitWidth ? "b-flex b-flex-col" : "b-flex";
1212
double percentage = (itemsAmount[0] / itemsAmount.Sum()) * 100;
1313
double remaining = 100 - percentage;
14-
<div class="b-border-2 b-border-current @commonClasses" style="@($"{property}{percentage}%;")">
14+
<div class="b-outline b-outline-2 b-outline-current @commonClasses" style="@($"{property}{percentage}%;")">
1515
@if (DataTemplate is not null)
1616
{
1717
var mapData = new Blatomic.Components.TreeMaps.TreeMap<TData>.MapData(){ Data = Items[0], Percentage = totalPercentage };
@@ -22,7 +22,7 @@
2222
@Items[0]
2323
}
2424
</div>
25-
<div class="@flow @commonClasses" style="@($"{property}{remaining}%;")">
25+
<div class="@flow" style="@($"{property}{remaining}%;")">
2626
@{
2727
var leftover = Items.Skip(1).ToList();
2828
}
@@ -36,7 +36,7 @@
3636
}
3737
else
3838
{
39-
<div class="b-border-2 b-border-current @commonClasses" style="@($"{property}100%")">
39+
<div class="b-outline b-outline-2 b-outline-current @commonClasses" style="@($"{property}100%")">
4040
@if (DataTemplate is not null)
4141
{
4242
var mapData = new Blatomic.Components.TreeMaps.TreeMap<TData>.MapData(){ Data = Items[0], Percentage = totalPercentage };

‎Blatomic/Components/TreeMaps/TreeMap.razor‎

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@typeparam TData
2-
<div class="b-flex b-w-full b-h-full">
2+
<div class="b-flex b-w-full b-h-full b-m-[2px]">
33
<MapSector TData="TData"
44
MapProperty="MapProperty"
55
DataTemplate="DataTemplate"
@@ -31,7 +31,7 @@
3131
{
3232
foreach (var child in treeNode.Children)
3333
{
34-
value += MapProperty(child.Data);
34+
value += GetNodeValue(child);
3535
}
3636
return value;
3737
}
@@ -48,14 +48,20 @@
4848
{
4949
public TData Data { get; set; }
5050
public List<TreeNode> Children { get; set; } = new();
51-
public bool NewSector { get; set; } = false;
51+
public double Height { get; set; } = 0;
52+
public double Width { get; set; } = 0;
5253
}
5354

5455
private void SquarifyTree()
5556
{
5657
SquarifySector(treeNodes, width, height);
5758
}
5859

60+
private double AspectRatio(double height, double width)
61+
{
62+
return Math.Abs(height - width);
63+
}
64+
5965
private void SquarifySector(List<TreeNode> sectorNodes, double width, double height)
6066
{
6167
// First find out what direction this sector will be going in
@@ -67,8 +73,8 @@
6773
var proposedWidth = width * percentage;
6874
var proposedHeight = height * percentage;
6975

70-
var widthRatio = Math.Abs(Math.Abs(proposedWidth / height) - 1);
71-
var heightRatio = Math.Abs(Math.Abs(proposedHeight / width) - 1);
76+
var widthRatio = AspectRatio(height, proposedWidth);
77+
var heightRatio = AspectRatio(proposedHeight, width);
7278

7379
var isColumn = widthRatio < heightRatio ? true : false;
7480
var direction = isColumn ? Direction.Column : Direction.Row;
@@ -79,6 +85,8 @@
7985
// Try to fit as many items in that sector without sacrifying aspect ratio
8086
var calculatedWidth = width;
8187
var calculatedHeight = height;
88+
var totalSectorValue = firstNodeValue;
89+
8290
if (direction == Direction.Column)
8391
{
8492
calculatedWidth = proposedWidth;
@@ -87,7 +95,7 @@
8795
{
8896
calculatedHeight = proposedHeight;
8997
}
90-
var totalSectorValue = firstNodeValue;
98+
9199
while (newLowestRatio <= previousLowestRatio)
92100
{
93101
nodesInsideSector += 1;
@@ -112,30 +120,12 @@
112120
var insideNodeHeight = calculatedHeight * insideNodePercentage;
113121
var insideNodeWidth = calculatedWidth * insideNodePercentage;
114122

115-
var insideNodeWidthRatio = Math.Abs(Math.Abs(insideNodeWidth / calculatedHeight) - 1);
116-
var insideNodeHeightRatio = Math.Abs(Math.Abs(insideNodeHeight / calculatedWidth) - 1);
123+
var insideNodeWidthRatio = AspectRatio(calculatedHeight,insideNodeWidth);
124+
var insideNodeHeightRatio = AspectRatio(insideNodeHeight,calculatedWidth);
117125
}
118126
}
119127
}
120128

121-
private Direction GetSectorDirection(List<TreeNode> treeNodes, double width, double height)
122-
{
123-
var total = treeNodes.Sum(node => GetNodeValue(node));
124-
var value = GetNodeValue(treeNodes.First());
125-
126-
var percentage = value / total;
127-
128-
var proposedWidth = width * percentage;
129-
var proposedHeight = height * percentage;
130-
131-
var widthRatio = Math.Abs(Math.Abs(proposedWidth / height) - 1);
132-
var heightRatio = Math.Abs(Math.Abs(proposedHeight / width) - 1);
133-
134-
var isColumn = widthRatio < heightRatio ? true : false;
135-
return isColumn ? Direction.Column : Direction.Row;
136-
}
137-
138-
139129
private void CreateTreeNodes()
140130
{
141131
if (Data is null)

0 commit comments

Comments
 (0)