From c48ba4301bcdd3472158bd12a70418d83055186e Mon Sep 17 00:00:00 2001 From: Jordan Hunt Date: Tue, 8 Dec 2020 15:39:10 +0200 Subject: [PATCH 1/3] feat(bar-chart-native): styling --- styles/native/js/core/widgets/barchart.js | 169 +++++++++++++++++++++ styles/native/js/main.js | 1 + styles/native/ts/core/widgets/barchart.ts | 171 ++++++++++++++++++++++ styles/native/ts/main.ts | 1 + styles/native/ts/types/widgets.d.ts | 73 +++++++++ 5 files changed, 415 insertions(+) create mode 100644 styles/native/js/core/widgets/barchart.js create mode 100644 styles/native/ts/core/widgets/barchart.ts diff --git a/styles/native/js/core/widgets/barchart.js b/styles/native/js/core/widgets/barchart.js new file mode 100644 index 00000000..cfcf64db --- /dev/null +++ b/styles/native/js/core/widgets/barchart.js @@ -0,0 +1,169 @@ +import { border, brand, font, spacing } from "../variables"; +/* + +DISCLAIMER: +Do not change this file because it is core styling. +Customizing core files will make updating Atlas much more difficult in the future. +To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. + +========================================================================== + Line Chart + + Default Class For Mendix Line Chart Widget +========================================================================== */ +// eslint-disable-next-line @typescript-eslint/camelcase +export const com_mendix_widget_native_barchart_BarChart = { + container: { + // All ViewStyle properties are allowed + }, + errorMessage: { + // All TextStyle properties are allowed + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal + }, + chart: { + // All ViewStyle properties are allowed + }, + grid: { + /* + Allowed properties: + - backgroundColor (string) + - dashArray (string) + - lineColor (string) + - padding (number) + - paddingBottom (number) + - paddingHorizontal (number) + - paddingLeft (number) + - paddingRight (number) + - paddingTop (number) + - paddingVertical (number) + - width (number) + */ + lineColor: border.color, + paddingBottom: 32, + paddingLeft: 32, + paddingRight: 8, + paddingTop: 8 + }, + xAxis: { + /* + Allowed properties: + - color (string) + - dashArray (string) + - fontFamily (string) + - fontSize (number) + - fontStyle ("normal" or "italic") + - fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900") + - lineColor (string) + - width (number) + */ + color: font.color, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + lineColor: border.color, + label: { + /* + All TextStyle properties are allowed and: + - relativePositionGrid ("bottom" or "right") + */ + color: font.color, + alignSelf: "center", + marginHorizontal: 0, + marginVertical: spacing.smallest, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + relativePositionGrid: "bottom" + }, + }, + yAxis: { + /* + Allowed properties: + - color (string) + - dashArray (string) + - fontFamily (string) + - fontSize (number) + - fontStyle ("normal" or "italic") + - fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900") + - lineColor (string) + - width (number) + */ + color: font.color, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + lineColor: border.color, + label: { + /* + All TextStyle properties are allowed and: + - relativePositionGrid ("top" or "left") + */ + color: font.color, + marginHorizontal: 0, + marginVertical: spacing.smallest, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + relativePositionGrid: "top" + }, + }, + bars: { + /* + Allowed properties: + - barColorPalette (string with array of colors separated by ';') + - barsOffset (number) + + */ + barColorPalette: Object.values(brand) + .map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`)) + .join(""), + barsOffset: 20, + customBarStyles: { + your_static_or_dynamic_attribute_value: { + bar: { + /* + Allowed properties: + - ending (number) + - barColor (string) + - width (number) + */ + }, + label: { + /* + Allowed properties: + - fontFamily (string) + - fontSize (number) + - fontStyle ("normal" or "italic") + - fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900") + */ + } + } + } + }, + legend: { + container: { + // All ViewStyle properties are allowed + justifyContent: "flex-start", + marginHorizontal: 0, + marginVertical: spacing.smallest + }, + item: { + // All ViewStyle properties are allowed + padding: 0, + paddingRight: spacing.smaller + }, + indicator: { + // All ViewStyle properties are allowed + marginRight: spacing.smallest + }, + label: { + // All TextStyle properties are allowed + color: font.color, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal + } + } +}; diff --git a/styles/native/js/main.js b/styles/native/js/main.js index fa66e5d6..66ea2f40 100644 --- a/styles/native/js/main.js +++ b/styles/native/js/main.js @@ -31,6 +31,7 @@ export * from "./core/widgets/introscreen"; export * from "./core/widgets/layoutgrid"; export * from "./core/widgets/linechart"; export * from "./core/helpers/linechart"; +export * from "./core/widgets/barchart"; export * from "./core/widgets/listviews"; export * from "./core/helpers/listviews"; export * from "./core/widgets/listviewswipe"; diff --git a/styles/native/ts/core/widgets/barchart.ts b/styles/native/ts/core/widgets/barchart.ts new file mode 100644 index 00000000..2c65ced6 --- /dev/null +++ b/styles/native/ts/core/widgets/barchart.ts @@ -0,0 +1,171 @@ +import { border, brand, font, spacing } from "../variables"; +import { BarChartType } from "../../types/widgets"; + +/* + +DISCLAIMER: +Do not change this file because it is core styling. +Customizing core files will make updating Atlas much more difficult in the future. +To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. + +========================================================================== + Line Chart + + Default Class For Mendix Line Chart Widget +========================================================================== */ +// eslint-disable-next-line @typescript-eslint/camelcase +export const com_mendix_widget_native_barchart_BarChart: BarChartType = { + container: { + // All ViewStyle properties are allowed + }, + errorMessage: { + // All TextStyle properties are allowed + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal + }, + chart: { + // All ViewStyle properties are allowed + }, + grid: { + /* + Allowed properties: + - backgroundColor (string) + - dashArray (string) + - lineColor (string) + - padding (number) + - paddingBottom (number) + - paddingHorizontal (number) + - paddingLeft (number) + - paddingRight (number) + - paddingTop (number) + - paddingVertical (number) + - width (number) + */ + lineColor: border.color, + paddingBottom: 32, + paddingLeft: 32, + paddingRight: 8, + paddingTop: 8 + }, + xAxis: { + /* + Allowed properties: + - color (string) + - dashArray (string) + - fontFamily (string) + - fontSize (number) + - fontStyle ("normal" or "italic") + - fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900") + - lineColor (string) + - width (number) + */ + color: font.color, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + lineColor: border.color, + label: { + /* + All TextStyle properties are allowed and: + - relativePositionGrid ("bottom" or "right") + */ + color: font.color, + alignSelf: "center", + marginHorizontal: 0, + marginVertical: spacing.smallest, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + relativePositionGrid: "bottom" + }, + }, + yAxis: { + /* + Allowed properties: + - color (string) + - dashArray (string) + - fontFamily (string) + - fontSize (number) + - fontStyle ("normal" or "italic") + - fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900") + - lineColor (string) + - width (number) + */ + color: font.color, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + lineColor: border.color, + label: { + /* + All TextStyle properties are allowed and: + - relativePositionGrid ("top" or "left") + */ + color: font.color, + marginHorizontal: 0, + marginVertical: spacing.smallest, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal, + relativePositionGrid: "top" + }, + }, + bars: { + /* + Allowed properties: + - barColorPalette (string with array of colors separated by ';') + - barsOffset (number) + + */ + barColorPalette: Object.values(brand) + .map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`)) + .join(""), + barsOffset: 20, + customBarStyles: { + your_static_or_dynamic_attribute_value: { + bar: { + /* + Allowed properties: + - ending (number) + - barColor (string) + - width (number) + */ + }, + label: { + /* + Allowed properties: + - fontFamily (string) + - fontSize (number) + - fontStyle ("normal" or "italic") + - fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900") + */ + } + } + } + }, + legend: { + container: { + // All ViewStyle properties are allowed + justifyContent: "flex-start", + marginHorizontal: 0, + marginVertical: spacing.smallest + }, + item: { + // All ViewStyle properties are allowed + padding: 0, + paddingRight: spacing.smaller + }, + indicator: { + // All ViewStyle properties are allowed + marginRight: spacing.smallest + }, + label: { + // All TextStyle properties are allowed + color: font.color, + fontFamily: font.family, + fontSize: font.sizeSmall, + fontWeight: font.weightNormal + } + } +}; diff --git a/styles/native/ts/main.ts b/styles/native/ts/main.ts index ceb44c03..2ace916f 100644 --- a/styles/native/ts/main.ts +++ b/styles/native/ts/main.ts @@ -31,6 +31,7 @@ export * from "./core/widgets/introscreen"; export * from "./core/widgets/layoutgrid"; export * from "./core/widgets/linechart"; export * from "./core/helpers/linechart"; +export * from "./core/widgets/barchart"; export * from "./core/widgets/listviews"; export * from "./core/helpers/listviews"; export * from "./core/widgets/listviewswipe"; diff --git a/styles/native/ts/types/widgets.d.ts b/styles/native/ts/types/widgets.d.ts index 0cf07fa1..1c1f747f 100644 --- a/styles/native/ts/types/widgets.d.ts +++ b/styles/native/ts/types/widgets.d.ts @@ -341,6 +341,79 @@ export interface LineChartType { }; } +// Bar chart +interface BarChartGridStyle { + backgroundColor?: string; + dashArray?: string; + lineColor?: string; + padding?: number; + paddingBottom?: number; + paddingHorizontal?: number; + paddingLeft?: number; + paddingRight?: number; + paddingTop?: number; + paddingVertical?: number; + width?: number; +} + +interface BarChartAxisStyle { + color?: string; + dashArray?: string; + fontFamily?: string; + fontSize?: number; + fontStyle?: "normal" | "italic"; + fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"; + label?: TextStyle & { + relativePositionGrid?: T extends "X" ? "bottom" | "right" : "top" | "left"; + }; + lineColor?: string; + width?: number; +} + +interface BarChartBarStyle { + ending?: number; + barColor?: string; + width?: number; +} + +interface BarChartBarLabelStyle { + // color is the same as bar color + fontFamily?: string; + fontSize?: number; + fontStyle?: "normal" | "italic"; + fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"; +} + +export interface BarChartLegendStyle { + container?: ViewStyle; + item?: ViewStyle; + indicator?: ViewStyle; + label?: TextStyle; +} + +export interface BarChartType { + container?: ViewStyle; + errorMessage?: TextStyle; + chart?: ViewStyle; + grid?: BarChartGridStyle; + xAxis?: BarChartAxisStyle<"X">; + yAxis?: BarChartAxisStyle<"Y">; + legend?: BarChartLegendStyle; + bars?: { + customBarStyles?: { + [key: string]: { + bar?: BarChartBarStyle, + label?: BarChartBarLabelStyle + } + }; + barsOffset?: number; // only applicable to Grouped presentation mode + barColorPalette?: string; + }; + domain?: { + padding?: { x?: number; y?: number }; + }; +} + // List view export interface ListViewType { container?: ViewStyle & { From 4ae5462d1033ba94a1b0ccf475b2285f06b8c64b Mon Sep 17 00:00:00 2001 From: Jordan Hunt Date: Wed, 9 Dec 2020 11:51:22 +0200 Subject: [PATCH 2/3] feat(bar-chart-native): add design properties --- settings-native.json | 17 +++++++++++++++++ styles/native/js/core/helpers/barchart.js | 11 +++++++++++ styles/native/js/main.js | 1 + styles/native/ts/core/helpers/barchart.ts | 12 ++++++++++++ styles/native/ts/main.ts | 1 + 5 files changed, 42 insertions(+) create mode 100644 styles/native/js/core/helpers/barchart.js create mode 100644 styles/native/ts/core/helpers/barchart.ts diff --git a/settings-native.json b/settings-native.json index d31c9b1d..eb711dc1 100644 --- a/settings-native.json +++ b/settings-native.json @@ -1482,6 +1482,23 @@ ] } ], + "com.mendix.widget.native.barchart.BarChart": [ + { + "name": "Chart size", + "type": "Dropdown", + "description": "Size of the chart.", + "options": [ + { + "name": "Square", + "class": "barChartSquare" + }, + { + "name": "Maximum space", + "class": "barChartMaxSpace" + } + ] + } + ], "com.mendix.widget.native.progressbar.ProgressBar": [ { "name": "Progress bar style", diff --git a/styles/native/js/core/helpers/barchart.js b/styles/native/js/core/helpers/barchart.js new file mode 100644 index 00000000..834992c1 --- /dev/null +++ b/styles/native/js/core/helpers/barchart.js @@ -0,0 +1,11 @@ +export const barChartSquare = { + chart: { + aspectRatio: 1 + } +}; +export const barChartMaxSpace = { + chart: { + flex: 1, + aspectRatio: undefined + } +}; diff --git a/styles/native/js/main.js b/styles/native/js/main.js index 66ea2f40..8d865c78 100644 --- a/styles/native/js/main.js +++ b/styles/native/js/main.js @@ -32,6 +32,7 @@ export * from "./core/widgets/layoutgrid"; export * from "./core/widgets/linechart"; export * from "./core/helpers/linechart"; export * from "./core/widgets/barchart"; +export * from "./core/helpers/barchart"; export * from "./core/widgets/listviews"; export * from "./core/helpers/listviews"; export * from "./core/widgets/listviewswipe"; diff --git a/styles/native/ts/core/helpers/barchart.ts b/styles/native/ts/core/helpers/barchart.ts new file mode 100644 index 00000000..5ff5e998 --- /dev/null +++ b/styles/native/ts/core/helpers/barchart.ts @@ -0,0 +1,12 @@ +export const barChartSquare = { + chart: { + aspectRatio: 1 + } +}; + +export const barChartMaxSpace = { + chart: { + flex: 1, + aspectRatio: undefined + } +}; diff --git a/styles/native/ts/main.ts b/styles/native/ts/main.ts index 2ace916f..3218416c 100644 --- a/styles/native/ts/main.ts +++ b/styles/native/ts/main.ts @@ -32,6 +32,7 @@ export * from "./core/widgets/layoutgrid"; export * from "./core/widgets/linechart"; export * from "./core/helpers/linechart"; export * from "./core/widgets/barchart"; +export * from "./core/helpers/barchart"; export * from "./core/widgets/listviews"; export * from "./core/helpers/listviews"; export * from "./core/widgets/listviewswipe"; From d1561a7f372b5cd1b9bfc11f875b43be6cbb7e6a Mon Sep 17 00:00:00 2001 From: Jordan Hunt Date: Mon, 28 Dec 2020 10:36:02 +0200 Subject: [PATCH 3/3] bump version Bump the patch number twice, once for native bar chart styles, second for a misalignment between this version number and the release number --- package.json | 2 +- styles/native/js/core/manifest.json | 2 +- styles/native/ts/core/manifest.json | 2 +- styles/web/sass/core/manifest.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index c4b83430..377da3ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "atlas-ui-framework", - "version": "2.6.5", + "version": "2.6.7", "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.", "main": "", "scripts": { diff --git a/styles/native/js/core/manifest.json b/styles/native/js/core/manifest.json index 9e1bed64..cddd4933 100644 --- a/styles/native/js/core/manifest.json +++ b/styles/native/js/core/manifest.json @@ -1,4 +1,4 @@ { "name": "Atlas-UI-Framework", - "version": "2.6.5" + "version": "2.6.7" } \ No newline at end of file diff --git a/styles/native/ts/core/manifest.json b/styles/native/ts/core/manifest.json index 9e1bed64..cddd4933 100644 --- a/styles/native/ts/core/manifest.json +++ b/styles/native/ts/core/manifest.json @@ -1,4 +1,4 @@ { "name": "Atlas-UI-Framework", - "version": "2.6.5" + "version": "2.6.7" } \ No newline at end of file diff --git a/styles/web/sass/core/manifest.json b/styles/web/sass/core/manifest.json index 9e1bed64..cddd4933 100644 --- a/styles/web/sass/core/manifest.json +++ b/styles/web/sass/core/manifest.json @@ -1,4 +1,4 @@ { "name": "Atlas-UI-Framework", - "version": "2.6.5" + "version": "2.6.7" } \ No newline at end of file