Skip to content

Commit 2c465c3

Browse files
IIsakuIIsaku
authored
Merge pull request #100 from mendix/feat/add-line-chart-native-styles
[N] Line chart - Add styling & typings
2 parents c6aa9c5 + 3943b59 commit 2c465c3

File tree

8 files changed

+453
-0
lines changed

8 files changed

+453
-0
lines changed

‎settings-native.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1412,6 +1412,23 @@
14121412
]
14131413
}
14141414
],
1415+
"com.mendix.widget.native.linechart.LineChart": [
1416+
{
1417+
"name": "Chart size",
1418+
"type": "Dropdown",
1419+
"description": "Size of the chart.",
1420+
"options": [
1421+
{
1422+
"name": "Square",
1423+
"class": "lineChartSquare"
1424+
},
1425+
{
1426+
"name": "Maximum space",
1427+
"class": "lineChartMaxSpace"
1428+
}
1429+
]
1430+
}
1431+
],
14151432
"com.mendix.widget.native.listviewswipe.ListViewSwipe": [
14161433
{
14171434
"name": "Panel size",

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

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

‎styles/native/js/core/widgets/linechart.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_linechart_LineChart = {
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+
- lineWidth (number)
35+
- padding (number)
36+
- paddingBottom (number)
37+
- paddingHorizontal (number)
38+
- paddingLeft (number)
39+
- paddingRight (number)
40+
- paddingTop (number)
41+
- paddingVertical (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+
- lineWidth (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+
- lineWidth (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+
lines: {
113+
/*
114+
Allowed properties:
115+
- lineColorPalette (string with array of colors separated by ';')
116+
*/
117+
lineColorPalette: Object.values(brand)
118+
.map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`))
119+
.join(""),
120+
customLineStyles: {
121+
any_custom_line_style_name: {
122+
line: {
123+
/*
124+
Allowed properties:
125+
- dashArray (string)
126+
- ending ("flat" or "round")
127+
- lineColor (string)
128+
- lineWidth (number)
129+
*/
130+
},
131+
markers: {
132+
/*
133+
Allowed properties:
134+
- backgroundColor (string)
135+
- borderColor (string)
136+
- borderWidth (number)
137+
- display ("false" or "underneath" or "onTop")
138+
- size (number)
139+
- symbol ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp")
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
@@ -29,6 +29,8 @@ export * from "./core/widgets/images";
2929
export * from "./core/helpers/images";
3030
export * from "./core/widgets/introscreen";
3131
export * from "./core/widgets/layoutgrid";
32+
export * from "./core/widgets/linechart";
33+
export * from "./core/helpers/linechart";
3234
export * from "./core/widgets/listviews";
3335
export * from "./core/helpers/listviews";
3436
export * from "./core/widgets/listviewswipe";

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

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

‎styles/native/ts/core/widgets/linechart.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 { LineChartType } 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_linechart_LineChart: LineChartType = {
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+
- lineWidth (number)
37+
- padding (number)
38+
- paddingBottom (number)
39+
- paddingHorizontal (number)
40+
- paddingLeft (number)
41+
- paddingRight (number)
42+
- paddingTop (number)
43+
- paddingVertical (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+
- lineWidth (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+
- lineWidth (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+
lines: {
115+
/*
116+
Allowed properties:
117+
- lineColorPalette (string with array of colors separated by ';')
118+
*/
119+
lineColorPalette: Object.values(brand)
120+
.map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`))
121+
.join(""),
122+
customLineStyles: {
123+
any_custom_line_style_name: {
124+
line: {
125+
/*
126+
Allowed properties:
127+
- dashArray (string)
128+
- ending ("flat" or "round")
129+
- lineColor (string)
130+
- lineWidth (number)
131+
*/
132+
},
133+
markers: {
134+
/*
135+
Allowed properties:
136+
- backgroundColor (string)
137+
- borderColor (string)
138+
- borderWidth (number)
139+
- display ("false" or "underneath" or "onTop")
140+
- size (number)
141+
- symbol ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp")
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)