Show pre-selected data groups

packages/core/src/components/essentials/legend.ts

@@ -268,6 +268,7 @@ export class Legend extends Component {
 				const clickedItemData = clickedItem.datum() as any;
 
 				self.model.toggleDataLabel(clickedItemData.name);
+				self.model.updateSelectedGroups();
 			})
 			.on("mouseout", function () {
 				const hoveredItem = select(this);

packages/core/src/configuration.ts

@@ -151,10 +151,11 @@ const chart: BaseChartOptions = {
 	data: {
 		groupMapsTo: "group",
 		loading: false,
+		selectedGroups: []
 	},
 	color: {
-		scale: null,
-	},
+		scale: null
+	}
 };
 
 /**

packages/core/src/interfaces/charts.ts

@@ -87,6 +87,10 @@ export interface BaseChartOptions {
 		 * used to simulate data loading
 		 */
 		loading?: Boolean;
+		/**
+		 * options related to pre-selected datasets
+		 */
+		selectedGroups?: string[];
 	};
 	/**
 	 * options related to color scales

packages/core/src/model.ts

@@ -288,6 +288,39 @@ export class ChartModel {
 		});
 	}
 
+	/**
+	 * Updates selected datasets
+	 */
+	updateSelectedGroups() {
+		const { ACTIVE, DISABLED } = Configuration.legend.items.status;
+		const dataGroups = this.getDataGroups();
+		const activeItems = dataGroups.filter(group => group.status === ACTIVE);
+
+		const hasDeactivatedItems = dataGroups.some(
+			group => group.status === DISABLED
+		);
+
+		// If there are deactivated items, map the label names into selected datasets
+		if (hasDeactivatedItems) {
+			this.state.options.data.selectedGroups = activeItems.map(activeItem => activeItem.name);
+		} else {
+			// If every item is active, clear array
+			this.state.options.data.selectedGroups = [];
+		};
+	}
+
+	checkSelectedGroups(uniqueDataGroups: string[]) {
+		if (this.state.options.data.selectedGroups.length) {
+			// check if current groups includes every item in selected groups
+			const hasSelectedGroups = this.state.options.data.selectedGroups
+				.every(groupName => uniqueDataGroups.includes(groupName));
+
+			if (!hasSelectedGroups) {
+				this.state.options.data.selectedGroups = [];
+			};
+		};
+	}
+
 	/**
 	 * Should the data point be filled?
 	 * @param group
@@ -417,15 +450,24 @@ export class ChartModel {
 
 	protected generateDataGroups(data) {
 		const { groupMapsTo } = this.getOptions().data;
-		const { ACTIVE } = Configuration.legend.items.status;
+		const { ACTIVE, DISABLED } = Configuration.legend.items.status;
 
 		const uniqueDataGroups = map(
 			data,
 			(datum) => datum[groupMapsTo]
 		).keys();
-		return uniqueDataGroups.map((groupName) => ({
+
+		this.checkSelectedGroups(uniqueDataGroups);
+		const getStatus = (groupName) => {
+			return (!this.state.options.data.selectedGroups.length || 
+				this.state.options.data.selectedGroups.includes(groupName))
+					? ACTIVE
+					: DISABLED;
+		}
+
+		return uniqueDataGroups.map(groupName => ({
 			name: groupName,
-			status: ACTIVE,
+			status: getStatus(groupName)
 		}));
 	}