Axis refactor v12d - Enable split and align on mainAxis

CHANGELOG.md

@@ -6,7 +6,16 @@
 
 - Fix invalid read/write when animation is contiguous (onFinish callback calls setKeyframe).
 - Waterfall chart preset not aligned.
-- Split chart count negative values too. 
+- Split chart count negative values too.
+
+### Changed
+
+- Separate Channel properties to AxisChannel properties at config.
+- Channels 'set' rewrite doesn't clear AxisChannel properties.
+
+### Added
+
+- Enable split and align on mainAxis.
 
 ## [0.16.0] - 2024-11-28
 

docs/tutorial/align_range/01.js

@@ -1,8 +1,8 @@
 chart.animate({
 	config: {
-		align: 'center',
 		channels: {
 			y: {
+				align: 'center',
 				labels: false
 			}
 		}

docs/tutorial/align_range/02_b.js

@@ -1,10 +1,8 @@
 chart.animate({
 	config: {
-		align: 'stretch',
-		channels: {
-			y: {
-				labels: true
-			}
+		y: {
+			align: 'stretch',
+			labels: true
 		}
 	}
 })

docs/tutorial/align_range/03_b.js

@@ -1,5 +1,7 @@
 chart.animate({
 	config: {
-		align: 'none'
+		y: {
+			align: 'none'
+		}
 	}
 })

docs/tutorial/orientation_split_polar/02_b.js

@@ -1,5 +1,5 @@
 chart.animate({
 	config: {
-		split: true
+		x: { split: true }
 	}
 })

docs/tutorial/orientation_split_polar/03_b.js

@@ -1,5 +1,5 @@
 chart.animate({
 	config: {
-		split: false
+		x: { split: false }
 	}
 })

docs/tutorial/shorthands_store/01.js

@@ -1,5 +1,7 @@
 chart.animate({
 	// config: {
-	align: 'stretch'
+	y: {
+		align: 'stretch'
+	}
 	// }
 })

docs/tutorial/shorthands_store/03_b.js

@@ -9,10 +9,10 @@ chart
 			},
 			// y: { detach: [ 'Kinds' ] },
 			y: {
-				detach: 'Kinds'
+				detach: 'Kinds',
+				align: 'none'
 			}
-		},
-		align: 'none'
+		}
 	})
 	.activated.then((control) => {
 		animation = control.store()

docs/tutorial/shorthands_store/08.js

@@ -3,9 +3,12 @@ chart.animate(
 		style: null,
 		config: {
 			title: 'Store function',
-			align: 'stretch',
+
 			channels: {
-				y: ['Popularity', 'Kinds'],
+				y: {
+					set: ['Popularity', 'Kinds'],
+					align: 'stretch'
+				},
 				x: ['Genres'],
 				label: ['Popularity']
 			},

docs/tutorial/shorthands_store/09.js

@@ -2,9 +2,11 @@ chart.animate({
 	style: null,
 	config: {
 		title: 'Store function',
-		align: 'stretch',
 		channels: {
-			y: ['Popularity', 'Kinds'],
+			y: {
+				set: ['Popularity', 'Kinds'],
+				align: 'stretch'
+			},
 			x: ['Genres'],
 			label: ['Popularity']
 		},

docs/tutorial/sorting/01.js

@@ -1,5 +1,5 @@
 chart.animate({
 	config: {
-		sort: 'byValue'
+		x: { sort: 'byValue' }
 	}
 })

docs/tutorial/sorting/02_b.js

@@ -1,5 +1,5 @@
 chart.animate({
 	config: {
-		reverse: true
+		x: { reverse: true }
 	}
 })

docs/tutorial/sorting/03_b.js

@@ -1,6 +1,8 @@
 chart.animate({
 	config: {
-		sort: 'none',
-		reverse: false
+		x: {
+			sort: 'none',
+			reverse: false
+		}
 	}
 })

src/apps/weblib/ts-api/plugins/presetconfigs.js

@@ -25,20 +25,18 @@ export const presetConfigs = {
 	splittedColumn: {
 		channels: {
 			x: { set: [{ name: 'x' }] },
-			y: { set: [{ name: 'y' }, { name: 'splittedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'splittedBy' }], split: true },
 			color: { set: [{ name: 'splittedBy' }] },
 			label: { set: [{ name: 'y' }] }
-		},
-		split: true
+		}
 	},
 	percentageColumn: {
 		channels: {
 			x: { set: [{ name: 'x' }] },
-			y: { set: [{ name: 'y' }, { name: 'stackedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'stackedBy' }], align: 'stretch' },
 			color: { set: [{ name: 'stackedBy' }] },
 			label: { set: [{ name: 'y' }] }
-		},
-		align: 'stretch'
+		}
 	},
 	waterfall: {
 		channels: {
@@ -59,11 +57,10 @@ export const presetConfigs = {
 	marimekko: {
 		channels: {
 			x: { set: [{ name: 'x' }, { name: 'groupedBy' }] },
-			y: { set: [{ name: 'y' }, { name: 'stackedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'stackedBy' }], align: 'stretch' },
 			color: { set: [{ name: 'stackedBy' }] },
 			label: { set: [{ name: 'x' }] }
-		},
-		align: 'stretch'
+		}
 	},
 	bar: {
 		channels: {
@@ -90,21 +87,19 @@ export const presetConfigs = {
 	},
 	splittedBar: {
 		channels: {
-			x: { set: [{ name: 'x' }, { name: 'splittedBy' }] },
+			x: { set: [{ name: 'x' }, { name: 'splittedBy' }], split: true },
 			y: { set: [{ name: 'y' }] },
 			color: { set: [{ name: 'splittedBy' }] },
 			label: { set: [{ name: 'x' }] }
-		},
-		split: true
+		}
 	},
 	percentageBar: {
 		channels: {
-			x: { set: [{ name: 'x' }, { name: 'stackedBy' }] },
+			x: { set: [{ name: 'x' }, { name: 'stackedBy' }], align: 'stretch' },
 			y: { set: [{ name: 'y' }] },
 			color: { set: [{ name: 'stackedBy' }] },
 			label: { set: [{ name: 'x' }] }
-		},
-		align: 'stretch'
+		}
 	},
 	lollipop: {
 		channels: {
@@ -151,58 +146,50 @@ export const presetConfigs = {
 	percentageArea: {
 		channels: {
 			x: { set: [{ name: 'x' }] },
-			y: { set: [{ name: 'y' }, { name: 'stackedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'stackedBy' }], align: 'stretch' },
 			color: { set: [{ name: 'stackedBy' }] }
 		},
-		align: 'stretch',
 		geometry: 'area'
 	},
 	splittedArea: {
 		channels: {
 			x: { set: [{ name: 'x' }] },
-			y: { set: [{ name: 'y' }, { name: 'splittedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'splittedBy' }], split: true },
 			color: { set: [{ name: 'splittedBy' }] }
 		},
-		split: true,
 		geometry: 'area'
 	},
 	stream: {
 		channels: {
 			x: { set: [{ name: 'x' }] },
-			y: { set: [{ name: 'y' }, { name: 'stackedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'stackedBy' }], align: 'center' },
 			color: { set: [{ name: 'stackedBy' }] }
 		},
-		geometry: 'area',
-		align: 'center'
+		geometry: 'area'
 	},
 	verticalStream: {
 		channels: {
-			x: { set: [{ name: 'x' }, { name: 'stackedBy' }] },
+			x: { set: [{ name: 'x' }, { name: 'stackedBy' }], align: 'center' },
 			y: { set: [{ name: 'y' }] },
 			color: { set: [{ name: 'stackedBy' }] }
 		},
-		geometry: 'area',
-		align: 'center'
+		geometry: 'area'
 	},
 	violin: {
 		channels: {
 			x: { set: [{ name: 'x' }] },
-			y: { set: [{ name: 'y' }, { name: 'splittedBy' }] },
+			y: { set: [{ name: 'y' }, { name: 'splittedBy' }], align: 'center', split: true },
 			color: { set: [{ name: 'splittedBy' }] }
 		},
-		geometry: 'area',
-		align: 'center',
-		split: true
+		geometry: 'area'
 	},
 	verticalViolin: {
 		channels: {
-			x: { set: [{ name: 'x' }, { name: 'splittedBy' }] },
+			x: { set: [{ name: 'x' }, { name: 'splittedBy' }], align: 'center', split: true },
 			y: { set: [{ name: 'y' }] },
 			color: { set: [{ name: 'splittedBy' }] }
 		},
-		geometry: 'area',
-		align: 'center',
-		split: true
+		geometry: 'area'
 	},
 	line: {
 		channels: {
@@ -280,13 +267,12 @@ export const presetConfigs = {
 	},
 	nestedDonut: {
 		channels: {
-			x: { set: [{ name: 'angle' }, { name: 'stackedBy' }] },
+			x: { set: [{ name: 'angle' }, { name: 'stackedBy' }], align: 'stretch' },
 			y: { set: [{ name: 'radius' }], range: { min: '-50%' } },
 			color: { set: [{ name: 'stackedBy' }] },
 			label: { set: [{ name: 'angle' }] }
 		},
-		coordSystem: 'polar',
-		align: 'stretch'
+		coordSystem: 'polar'
 	},
 	polarScatter: {
 		channels: {