Skip to content

Commit 57da81d

Browse files
jordanchjordanch
authored
Merge pull request #107 from mendix/add-bar-chart-native-styling
Introduce bar chart styling for native platform
2 parents e02245c + 4ae5462 commit 57da81d

File tree

8 files changed

+457
-0
lines changed

8 files changed

+457
-0
lines changed

‎settings-native.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1482,6 +1482,23 @@
14821482
]
14831483
}
14841484
],
1485+
"com.mendix.widget.native.barchart.BarChart": [
1486+
{
1487+
"name": "Chart size",
1488+
"type": "Dropdown",
1489+
"description": "Size of the chart.",
1490+
"options": [
1491+
{
1492+
"name": "Square",
1493+
"class": "barChartSquare"
1494+
},
1495+
{
1496+
"name": "Maximum space",
1497+
"class": "barChartMaxSpace"
1498+
}
1499+
]
1500+
}
1501+
],
14851502
"com.mendix.widget.native.progressbar.ProgressBar": [
14861503
{
14871504
"name": "Progress bar style",

‎styles/native/js/core/helpers/barchart.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const barChartSquare = {
2+
chart: {
3+
aspectRatio: 1
4+
}
5+
};
6+
export const barChartMaxSpace = {
7+
chart: {
8+
flex: 1,
9+
aspectRatio: undefined
10+
}
11+
};

‎styles/native/js/core/widgets/barchart.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { border, brand, font, spacing } from "../variables";
2+
/*
3+
4+
DISCLAIMER:
5+
Do not change this file because it is core styling.
6+
Customizing core files will make updating Atlas much more difficult in the future.
7+
To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
8+
9+
==========================================================================
10+
Line Chart
11+
12+
Default Class For Mendix Line Chart Widget
13+
========================================================================== */
14+
// eslint-disable-next-line @typescript-eslint/camelcase
15+
export const com_mendix_widget_native_barchart_BarChart = {
16+
container: {
17+
// All ViewStyle properties are allowed
18+
},
19+
errorMessage: {
20+
// All TextStyle properties are allowed
21+
fontFamily: font.family,
22+
fontSize: font.sizeSmall,
23+
fontWeight: font.weightNormal
24+
},
25+
chart: {
26+
// All ViewStyle properties are allowed
27+
},
28+
grid: {
29+
/*
30+
Allowed properties:
31+
- backgroundColor (string)
32+
- dashArray (string)
33+
- lineColor (string)
34+
- padding (number)
35+
- paddingBottom (number)
36+
- paddingHorizontal (number)
37+
- paddingLeft (number)
38+
- paddingRight (number)
39+
- paddingTop (number)
40+
- paddingVertical (number)
41+
- width (number)
42+
*/
43+
lineColor: border.color,
44+
paddingBottom: 32,
45+
paddingLeft: 32,
46+
paddingRight: 8,
47+
paddingTop: 8
48+
},
49+
xAxis: {
50+
/*
51+
Allowed properties:
52+
- color (string)
53+
- dashArray (string)
54+
- fontFamily (string)
55+
- fontSize (number)
56+
- fontStyle ("normal" or "italic")
57+
- fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
58+
- lineColor (string)
59+
- width (number)
60+
*/
61+
color: font.color,
62+
fontFamily: font.family,
63+
fontSize: font.sizeSmall,
64+
fontWeight: font.weightNormal,
65+
lineColor: border.color,
66+
label: {
67+
/*
68+
All TextStyle properties are allowed and:
69+
- relativePositionGrid ("bottom" or "right")
70+
*/
71+
color: font.color,
72+
alignSelf: "center",
73+
marginHorizontal: 0,
74+
marginVertical: spacing.smallest,
75+
fontFamily: font.family,
76+
fontSize: font.sizeSmall,
77+
fontWeight: font.weightNormal,
78+
relativePositionGrid: "bottom"
79+
},
80+
},
81+
yAxis: {
82+
/*
83+
Allowed properties:
84+
- color (string)
85+
- dashArray (string)
86+
- fontFamily (string)
87+
- fontSize (number)
88+
- fontStyle ("normal" or "italic")
89+
- fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
90+
- lineColor (string)
91+
- width (number)
92+
*/
93+
color: font.color,
94+
fontFamily: font.family,
95+
fontSize: font.sizeSmall,
96+
fontWeight: font.weightNormal,
97+
lineColor: border.color,
98+
label: {
99+
/*
100+
All TextStyle properties are allowed and:
101+
- relativePositionGrid ("top" or "left")
102+
*/
103+
color: font.color,
104+
marginHorizontal: 0,
105+
marginVertical: spacing.smallest,
106+
fontFamily: font.family,
107+
fontSize: font.sizeSmall,
108+
fontWeight: font.weightNormal,
109+
relativePositionGrid: "top"
110+
},
111+
},
112+
bars: {
113+
/*
114+
Allowed properties:
115+
- barColorPalette (string with array of colors separated by ';')
116+
- barsOffset (number)
117+
118+
*/
119+
barColorPalette: Object.values(brand)
120+
.map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`))
121+
.join(""),
122+
barsOffset: 20,
123+
customBarStyles: {
124+
your_static_or_dynamic_attribute_value: {
125+
bar: {
126+
/*
127+
Allowed properties:
128+
- ending (number)
129+
- barColor (string)
130+
- width (number)
131+
*/
132+
},
133+
label: {
134+
/*
135+
Allowed properties:
136+
- fontFamily (string)
137+
- fontSize (number)
138+
- fontStyle ("normal" or "italic")
139+
- fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
140+
*/
141+
}
142+
}
143+
}
144+
},
145+
legend: {
146+
container: {
147+
// All ViewStyle properties are allowed
148+
justifyContent: "flex-start",
149+
marginHorizontal: 0,
150+
marginVertical: spacing.smallest
151+
},
152+
item: {
153+
// All ViewStyle properties are allowed
154+
padding: 0,
155+
paddingRight: spacing.smaller
156+
},
157+
indicator: {
158+
// All ViewStyle properties are allowed
159+
marginRight: spacing.smallest
160+
},
161+
label: {
162+
// All TextStyle properties are allowed
163+
color: font.color,
164+
fontFamily: font.family,
165+
fontSize: font.sizeSmall,
166+
fontWeight: font.weightNormal
167+
}
168+
}
169+
};

‎styles/native/js/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export * from "./core/widgets/introscreen";
3131
export * from "./core/widgets/layoutgrid";
3232
export * from "./core/widgets/linechart";
3333
export * from "./core/helpers/linechart";
34+
export * from "./core/widgets/barchart";
35+
export * from "./core/helpers/barchart";
3436
export * from "./core/widgets/listviews";
3537
export * from "./core/helpers/listviews";
3638
export * from "./core/widgets/listviewswipe";

‎styles/native/ts/core/helpers/barchart.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export const barChartSquare = {
2+
chart: {
3+
aspectRatio: 1
4+
}
5+
};
6+
7+
export const barChartMaxSpace = {
8+
chart: {
9+
flex: 1,
10+
aspectRatio: undefined
11+
}
12+
};

‎styles/native/ts/core/widgets/barchart.ts‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import { border, brand, font, spacing } from "../variables";
2+
import { BarChartType } from "../../types/widgets";
3+
4+
/*
5+
6+
DISCLAIMER:
7+
Do not change this file because it is core styling.
8+
Customizing core files will make updating Atlas much more difficult in the future.
9+
To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
10+
11+
==========================================================================
12+
Line Chart
13+
14+
Default Class For Mendix Line Chart Widget
15+
========================================================================== */
16+
// eslint-disable-next-line @typescript-eslint/camelcase
17+
export const com_mendix_widget_native_barchart_BarChart: BarChartType = {
18+
container: {
19+
// All ViewStyle properties are allowed
20+
},
21+
errorMessage: {
22+
// All TextStyle properties are allowed
23+
fontFamily: font.family,
24+
fontSize: font.sizeSmall,
25+
fontWeight: font.weightNormal
26+
},
27+
chart: {
28+
// All ViewStyle properties are allowed
29+
},
30+
grid: {
31+
/*
32+
Allowed properties:
33+
- backgroundColor (string)
34+
- dashArray (string)
35+
- lineColor (string)
36+
- padding (number)
37+
- paddingBottom (number)
38+
- paddingHorizontal (number)
39+
- paddingLeft (number)
40+
- paddingRight (number)
41+
- paddingTop (number)
42+
- paddingVertical (number)
43+
- width (number)
44+
*/
45+
lineColor: border.color,
46+
paddingBottom: 32,
47+
paddingLeft: 32,
48+
paddingRight: 8,
49+
paddingTop: 8
50+
},
51+
xAxis: {
52+
/*
53+
Allowed properties:
54+
- color (string)
55+
- dashArray (string)
56+
- fontFamily (string)
57+
- fontSize (number)
58+
- fontStyle ("normal" or "italic")
59+
- fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
60+
- lineColor (string)
61+
- width (number)
62+
*/
63+
color: font.color,
64+
fontFamily: font.family,
65+
fontSize: font.sizeSmall,
66+
fontWeight: font.weightNormal,
67+
lineColor: border.color,
68+
label: {
69+
/*
70+
All TextStyle properties are allowed and:
71+
- relativePositionGrid ("bottom" or "right")
72+
*/
73+
color: font.color,
74+
alignSelf: "center",
75+
marginHorizontal: 0,
76+
marginVertical: spacing.smallest,
77+
fontFamily: font.family,
78+
fontSize: font.sizeSmall,
79+
fontWeight: font.weightNormal,
80+
relativePositionGrid: "bottom"
81+
},
82+
},
83+
yAxis: {
84+
/*
85+
Allowed properties:
86+
- color (string)
87+
- dashArray (string)
88+
- fontFamily (string)
89+
- fontSize (number)
90+
- fontStyle ("normal" or "italic")
91+
- fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
92+
- lineColor (string)
93+
- width (number)
94+
*/
95+
color: font.color,
96+
fontFamily: font.family,
97+
fontSize: font.sizeSmall,
98+
fontWeight: font.weightNormal,
99+
lineColor: border.color,
100+
label: {
101+
/*
102+
All TextStyle properties are allowed and:
103+
- relativePositionGrid ("top" or "left")
104+
*/
105+
color: font.color,
106+
marginHorizontal: 0,
107+
marginVertical: spacing.smallest,
108+
fontFamily: font.family,
109+
fontSize: font.sizeSmall,
110+
fontWeight: font.weightNormal,
111+
relativePositionGrid: "top"
112+
},
113+
},
114+
bars: {
115+
/*
116+
Allowed properties:
117+
- barColorPalette (string with array of colors separated by ';')
118+
- barsOffset (number)
119+
120+
*/
121+
barColorPalette: Object.values(brand)
122+
.map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`))
123+
.join(""),
124+
barsOffset: 20,
125+
customBarStyles: {
126+
your_static_or_dynamic_attribute_value: {
127+
bar: {
128+
/*
129+
Allowed properties:
130+
- ending (number)
131+
- barColor (string)
132+
- width (number)
133+
*/
134+
},
135+
label: {
136+
/*
137+
Allowed properties:
138+
- fontFamily (string)
139+
- fontSize (number)
140+
- fontStyle ("normal" or "italic")
141+
- fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
142+
*/
143+
}
144+
}
145+
}
146+
},
147+
legend: {
148+
container: {
149+
// All ViewStyle properties are allowed
150+
justifyContent: "flex-start",
151+
marginHorizontal: 0,
152+
marginVertical: spacing.smallest
153+
},
154+
item: {
155+
// All ViewStyle properties are allowed
156+
padding: 0,
157+
paddingRight: spacing.smaller
158+
},
159+
indicator: {
160+
// All ViewStyle properties are allowed
161+
marginRight: spacing.smallest
162+
},
163+
label: {
164+
// All TextStyle properties are allowed
165+
color: font.color,
166+
fontFamily: font.family,
167+
fontSize: font.sizeSmall,
168+
fontWeight: font.weightNormal
169+
}
170+
}
171+
};

0 commit comments

Comments
 (0)