Skip to content

Commit 7275ab3

Browse files
HUSSAR-mtrelaHUSSAR-mtrela
committed
add card layout
1 parent d43edf2 commit 7275ab3

6 files changed

Lines changed: 198 additions & 142 deletions

File tree

‎samples/gallery/dark-theme/index.html‎

Lines changed: 54 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<body >
1717
<div id="root" >
1818

19-
<div class="container sample" style="height: 3000px;" >
19+
<div class="card-container" >
2020

2121
<!-- <div style="padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
2222
<label for="themeSelector" style="font-weight: bold;">Select Theme:</label>
@@ -29,90 +29,84 @@
2929
<!-- TODO add sparkline -->
3030
<!-- TODO add category-chart -->
3131
<!-- TODO add shape-chart -->
32-
<!-- TODO wrap card elements when their min-width exceeds the container -->
33-
34-
<div class="container vertical">
35-
<div class="container horizontal">
36-
<div class="container vertical" width="50%" style="padding: 1rem;">
37-
<label class="ig-title">DataGrid</label>
38-
<igc-data-grid id="dataGrid" width="100%" height="410px"
39-
style="margin-bottom: 3rem;"
32+
33+
<!-- <div class="container vertical"> -->
34+
<div class="card container vertical" style="min-width: 800px; max-width: 800px;">
35+
<label class="ig-title">Data Grid</label>
36+
<igc-data-grid id="dataGrid" width="100%" height="100%"
4037
row-height="40"
4138
is-row-hover-enabled="true"
4239
is-column-options-enabled="true"
43-
is-group-by-area-visible="true"
44-
is-group-collapsable="true"
40+
is-group-by-area-visible="false"
41+
is-group-collapsable="true"
4542
auto-generate-columns="false" >
46-
47-
<igc-numeric-column field="index" header-text="ID" width="60"></igc-numeric-column>
48-
<igc-text-column field="name" header-text="Name" width="*>100"></igc-text-column>
49-
<igc-text-column field="populationAbbr" header-text="Population" horizontal-alignment="right" ></igc-text-column>
50-
<!-- <igc-numeric-column show-grouping-separator="true" header-text="Population" field="population" width="*>160"></igc-numeric-column> -->
51-
<igc-numeric-column show-grouping-separator="true" header-text="GDP Total" field="gdpTotal" width="*>180"></igc-numeric-column>
52-
<igc-numeric-column show-grouping-separator="true" header-text="GDP Person" field="gdpPerPerson" ></igc-numeric-column>
43+
<igc-numeric-column field="index" header-text="ID" width="80"></igc-numeric-column>
44+
<igc-text-column field="name" header-text="Name" width="*>130"></igc-text-column>
45+
<igc-numeric-column id="numColumn1" show-grouping-separator="true" header-text="Population" field="population" width="*>140"></igc-numeric-column>
46+
<igc-numeric-column id="numColumn2" show-grouping-separator="true" header-text="GDP Total" field="gdpTotal" width="*>140"></igc-numeric-column>
47+
<igc-numeric-column id="numColumn3" show-grouping-separator="true" header-text="GDP Person" field="gdpPerPerson" width="*>140"></igc-numeric-column>
5348
<igc-text-column field="region" header-text="Region" width="*>160"></igc-text-column>
5449
<igc-text-column field="continent" header-text="Continent" width="*>160"></igc-text-column>
55-
5650
</igc-data-grid>
5751
</div>
5852

59-
</div>
60-
61-
62-
<div class="container horizontal" style="margin-top: 0rem;">
63-
64-
<div class="card container vertical" width="50%" style="padding: 1rem;">
65-
<label class="ig-title">TreeMap with Fill Scale</label>
66-
<igc-treemap id="treeMap2" width="100%" height="100%"></igc-treemap>
67-
</div>
68-
<div class="card container vertical" width="50%" style="padding: 1rem;">
53+
<div class="card container vertical" >
6954
<label class="ig-title">TreeMap with Fill Brushes</label>
7055
<igc-treemap id="treeMap1" width="100%" height="100%"></igc-treemap>
7156
</div>
57+
<div class="card container vertical" >
58+
<label class="ig-title">TreeMap with Fill Scale</label>
59+
<igc-treemap id="treeMap2" width="100%" height="100%"></igc-treemap>
60+
</div>
7261

73-
<div class="card container vertical" width="50%" style="padding: 1rem;">
62+
<div class="card container vertical" >
7463
<label class="ig-title">DataChart with Scatter Point Series</label>
64+
<label class="ig-title">Population vs Total GDP by Continent</label>
7565
<igc-data-chart id="dataScatterPointChart" width="100%" height="100%" ></igc-data-chart>
7666
</div>
77-
<div class="card container vertical" width="50%" style="padding: 1rem;">
67+
<div class="card container vertical" >
7868
<label class="ig-title">DataChart with Bubble Series</label>
69+
<label class="ig-title">Population vs Total GDP vs GDP Person</label>
7970
<igc-data-chart id="dataScatterBubbleChart" width="100%" height="100%" ></igc-data-chart>
8071
</div>
81-
82-
</div>
8372

84-
<div class="container horizontal" style="margin-top: 3rem;">
85-
86-
<div class="card container vertical" width="50%" style="padding: 1rem;">
73+
<div class="card container vertical" >
8774
<label class="ig-title">DataChart with Callout Layer</label>
75+
<label class="ig-title">Olympic Medals by Country</label>
8876
<igc-data-chart id="dataCalloutChart" width="100%" height="100%" ></igc-data-chart>
8977
</div>
9078

91-
<div class="card container vertical" width="50%" style="padding: 1rem;">
92-
<label class="ig-title">DataChart with Stacked 100% Column Series</label>
93-
<igc-data-chart id="dataStackedChart" width="100%" height="100%" ></igc-data-chart>
79+
<div class="card container horizontal" >
80+
<div class=" container vertical" >
81+
<label class="ig-title">DataChart with Stacked Series</label>
82+
<label class="ig-title">Olympic Medals by Country</label>
83+
<igc-data-chart id="dataStackedChart" width="100%" height="100%" ></igc-data-chart>
84+
</div>
85+
<igc-data-legend id="dataStackedLegend" style="align-self: center;"> </igc-data-legend>
9486
</div>
95-
<igc-data-legend id="dataStackedLegend" style="margin-top: 2rem;margin-right: 2rem;"> </igc-data-legend>
9687

97-
<div class="card container vertical" width="50%" style="padding: 1rem;">
98-
<label class="ig-title">DataChart with Column Series</label>
99-
<igc-data-chart id="dataColChart" width="100%" height="100%" ></igc-data-chart>
88+
<div class="card container horizontal" >
89+
<div class=" container vertical" >
90+
<label class="ig-title">DataChart with Column Series</label>
91+
<label class="ig-title">Olympic Medals by Country</label>
92+
<igc-data-chart id="dataColChart" width="100%" height="100%" ></igc-data-chart>
93+
</div>
94+
<igc-data-legend id="dataColLegend" style="align-self: center;"> </igc-data-legend>
10095
</div>
101-
<igc-data-legend id="dataColLegend" style="margin-top: 2rem;margin-right: 2rem;"> </igc-data-legend>
102-
103-
<div class="card container vertical" width="50%" style="padding: 1rem;">
104-
<label class="ig-title">DataChart with Bar Series</label>
105-
<igc-data-chart id="dataBarChart" width="100%" height="100%" ></igc-data-chart>
96+
97+
<div class="card container horizontal" >
98+
<div class=" container vertical" >
99+
<label class="ig-title">DataChart with Bar Series</label>
100+
<label class="ig-title">Olympic Medals by Country</label>
101+
<igc-data-chart id="dataBarChart" width="100%" height="100%" ></igc-data-chart>
102+
</div>
103+
<igc-data-legend id="dataBarLegend" style="align-self: center;"> </igc-data-legend>
106104
</div>
107-
<igc-data-legend id="dataBarLegend" style="margin-top: 2rem;"> </igc-data-legend>
108-
109-
</div>
110105

111-
<div class="container horizontal" style="margin-top: 3rem;">
112106
<div class="card container vertical">
113107
<label class="ig-title">Funnel Chart with Legend</label>
114108
<igc-item-legend id="funnelLegend" orientation="Horizontal"> </igc-item-legend>
115-
<igc-funnel-chart id="funnelChart" width="100%" height="65%" style="margin-top: 1rem;"></igc-funnel-chart>
109+
<igc-funnel-chart id="funnelChart" width="70%" height="65%" style="margin-top: 1rem; align-self: center;"></igc-funnel-chart>
116110
</div>
117111

118112
<div class="card container vertical">
@@ -132,36 +126,27 @@
132126
<igc-item-legend id="dataPieLegend" orientation="Horizontal"> </igc-item-legend>
133127
<igc-data-pie-chart id="dataPieChart" width="100%" height="100%" ></igc-data-pie-chart>
134128
</div>
135-
</div>
136-
137-
<div class="container horizontal">
138-
<div class="card container vertical" width="50%" style="padding: 1rem;">
129+
130+
<div class="card container vertical" >
139131
<label class="ig-title">GeoMap with Symbol and PolyLine Series</label>
140132
<igc-geographic-map id="geoMap1" width="100%" height="100%"></igc-geographic-map>
141133
</div>
142-
<div class="card container vertical" width="50%" style="padding: 1rem;">
134+
<div class="card container vertical" >
143135
<label class="ig-title">GeoMap with Shape Series</label>
144136
<igc-geographic-map id="geoMap2" width="100%" height="100%"></igc-geographic-map>
145137
</div>
146-
</div>
147138

148-
<div class="container horizontal">
149139
<div class="card container vertical">
150140
<label class="ig-title">Bullet Graph</label>
151-
<igc-bullet-graph id="bulletGauge" width="100%" height="30%" style="margin-top: 1rem;"></igc-bullet-graph>
141+
<igc-bullet-graph id="bulletGauge" height="30%" style="margin-bottom: 2rem;"></igc-bullet-graph>
152142
<label class="ig-title">Linear Gauge</label>
153-
<igc-linear-gauge id="linearGauge" width="100%" height="30%" style="margin-top: 1rem;"></igc-linear-gauge>
143+
<igc-linear-gauge id="linearGauge" height="30%" ></igc-linear-gauge>
154144
</div>
145+
155146
<div class="card container vertical">
156147
<label class="ig-title">Radial Gauges</label>
157-
<igc-radial-gauge id="radialGauge" width="100%" height="80%" ></igc-radial-gauge>
148+
<igc-radial-gauge id="radialGauge" height="80%" ></igc-radial-gauge>
158149
</div>
159-
</div>
160-
161-
162-
163-
</div>
164-
165150

166151
</div>
167152

‎samples/gallery/dark-theme/src/WorldData.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,6 @@ export class WorldData {
102102
this.olympicResult.push(new WorldOlympicResult({ year: 2016, medalsUSA: 121, medalsCHN: 78, medalsRUS: 56, medalsSPA: 10, medalsFRA: 68, medalsGER: 60 }));
103103
this.olympicResult.push(new WorldOlympicResult({ year: 2020, medalsUSA: 125, medalsCHN: 82, medalsRUS: 53, medalsSPA: 24, medalsFRA: 70, medalsGER: 64 }));
104104
this.olympicResult.push(new WorldOlympicResult({ year: 2024, medalsUSA: 124, medalsCHN: 88, medalsRUS: 52, medalsSPA: 18, medalsFRA: 75, medalsGER: 68 }));
105-
106-
107105

108106
this.onShapeLoaded = this.onShapeLoaded.bind(this);
109107
console.log("WorldData loadData");
@@ -122,7 +120,7 @@ export class WorldData {
122120

123121
let regionsLookup: any = {};
124122
let continentsLookup: any = {};
125-
123+
126124
// parsing shapefile data
127125
for (const record of shapeRecords) {
128126
// using field/column names from .DBF file
@@ -136,7 +134,7 @@ export class WorldData {
136134
gdpTotal: record.fieldValues.GDP * 1000000,
137135
});
138136
country.gdpPerPerson = Math.round(country.gdpTotal / country.population);
139-
country.gdpPerPersonAbbr = WorldUtils2.toStringAbbr(country.gdpPerPerson );
137+
country.gdpPerPersonAbbr = WorldUtils2.toStringAbbr(country.gdpPerPerson);
140138
country.gdpTotalAbbr = WorldUtils2.toStringAbbr(country.gdpTotal);
141139
country.populationAbbr = WorldUtils2.toStringAbbr(country.population);
142140

‎samples/gallery/dark-theme/src/index.css‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
/* shared styles are loaded from: */
22
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
33

4+
.card-container {
5+
/* background-color: red; */
6+
display: flex;
7+
flex-flow: row;
8+
height: 100%;
9+
width: 100%;
10+
flex-wrap: wrap;
11+
justify-content: center;
12+
align-content: flex-start;
13+
box-sizing: border-box;
14+
}
415

516
.card {
6-
background-color: blue !important;
7-
17+
/* background-color: orange !important; */
18+
min-width: 400px;
19+
min-height: 400px;
20+
max-width: 400px;
21+
max-height: 400px;
22+
margin: 0.5rem;
23+
}
24+
25+
.card-label, .ig-title {
26+
margin-bottom: 0.2rem;
27+
text-align: center;
28+
font-size: 1rem;
29+
font-weight: 400;
30+
font-family: 'Titillium Web', Verdana, Tahoma, sans-serif;
831
}

0 commit comments

Comments
 (0)