Merge pull request #48 from feedzai/develop

Fixed an issue where series values having spaces and invalid characters would invalidate class names

CHANGELOG.md

@@ -1,26 +1,39 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+### Added
+
+- Fixed an issue where series values having spaces would invalidate class names
+
 ## 2.0.3 - 2024-11-04
+
 ### Added
+
 - Adds missing types
 - Fixed the issue where components were not being properly exported
 
 ## 2.0.2 - 2024-10-24
+
 ### Added
+
 - Dynamic changes in the data or DOM elements now trigger updates in the tool
 
 ## 2.0.1 - 2024-10-08
+
 ### Added
+
 - Aligned native ShortcutGuide styling with the prototypes
 
 ## 2.0.0 - 2024-10-04
+
 ### Added
+
 - Changed bundler from babel to vite
 - Replaced jest with cypress
 - Converted Javascript to Typescript
@@ -30,22 +43,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Converted the ShortcutGuide into a prop, making it overridable and customizable
 
 ## 1.0.3 - 2024-01-09
+
 ### Added
+
 - Remove unused dependency
 
 ## 1.0.2 - 2023-12-06
+
 ### Added
+
 - Fixed the previously correction of the "series:" class attribution in the data elements that would break the navigation inside multi series charts
 
 ## 1.0.1 - 2023-12-06
+
 ### Added
+
 - Corrected the attribution of the "series:" class in the data elements that would break the navigation inside multi series charts
 
 ## 1.0.0 - 2023-11-14
+
 ### Added
+
 - Added support for charts with multiple encodings
 
 ## 0.2.0 - 2023-11-02
+
 ### Added
+
 - Extended React compatibility to support projects with React >=16.14.0
 - Set up automatic semantic versioning

examples/src/components/manual/BarChartManual.jsx

@@ -61,8 +61,6 @@ function BarChartManual({ longDesc, shortDesc }) {
 
 	const dataTransformed = transformJSON(sortedObj);
 
-	console.log(dataTransformed);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/HeatmapManual.jsx

@@ -183,8 +183,6 @@ function HeatmapManual({ longDesc, shortDesc }) {
 
 	const dataTransformed = transformJSON(final);
 
-	console.log(dataTransformed);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/MultiTimelineManual.jsx

@@ -82,8 +82,6 @@ function MultiSeriesTimelineManual({ longDesc, shortDesc }) {
 
 	const dataTransformed = transformJSONmulti(final);
 
-	console.log(dataTransformed);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/PieManual.jsx

@@ -66,8 +66,6 @@ function PieManual({ longDesc, shortDesc }) {
 
 	const dataTransformed = transformJSON(autovizData);
 
-	console.log(dataTransformed);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/ScatterplotManual.jsx

@@ -108,8 +108,6 @@ function ScatterplotManual({ longDesc, shortDesc }) {
 		textAnchor: "end",
 	});
 
-	console.log(AutoVizuA11yArrayAux);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/SingleTimelineManual.jsx

@@ -62,8 +62,6 @@ function SingleSeriesTimelineManual({ longDesc, shortDesc }) {
 
 	const dataTransformed = transformJSON(autovizData);
 
-	console.log(dataTransformed);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/StackedBarManual.jsx

@@ -101,8 +101,6 @@ function StackedBarManual({ longDesc, shortDesc }) {
 		verticalAnchor: "middle",
 	});
 
-	console.log(mergedAux);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

examples/src/components/manual/TreeMapManual.jsx

@@ -50,8 +50,6 @@ function TreemapManual({ longDesc, shortDesc }) {
 
 	const dataTransformed = transformJSON(autovizData);
 
-	console.log(dataTransformed);
-
 	return (
 		<div style={{ textAlign: "left" }}>
 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>

src/AutoVizuA11y.tsx

@@ -25,6 +25,7 @@ import "./assets/style/AutoVizuA11y.css";
 import { initToolTutorial } from "./utils/initToolTutorial";
 import { processData } from "./utils/processData";
 import { ShortcutGuideContainer } from "./components/shortcut_guide/index";
+import { toSafeClassName } from "./utils/toSafeClassname";
 
 type AutoDescriptionsProps = {
 	dynamicDescriptions?: boolean;
@@ -223,7 +224,9 @@ export const AutoVizuA11y = ({
 		const initSeries = () => {
 			if (multiSeries) {
 				const uniqueValues = [
-					...new Set(data.map((item: Record<string, unknown>) => item[multiSeries])),
+					...new Set(
+						data.map((item: Record<string, unknown>) => toSafeClassName(String(item[multiSeries]))),
+					),
 				];
 				setSeries(uniqueValues as string[]);
 				setSelectedSeries(uniqueValues[0] as string);

src/components/navigation/AddAriaLabels.ts

@@ -5,6 +5,7 @@
  * Other licensing options may be available, please reach out to [email protected] for more information.
  */
 import { getElements } from "../../utils/getElements";
+import { toSafeClassName } from "../../utils/toSafeClassname";
 
 type SelectorType = {
 	element?: string;
@@ -35,8 +36,8 @@ function setElementAttributes(
 }
 
 function addSeriesClass(element: HTMLElement, seriesValue: string): void {
-	const seriesClass = seriesValue.replace(/ /g, "-");
-	element.classList.add(`series:${seriesClass}`);
+	const seriesClass = toSafeClassName(seriesValue);
+	element.classList.add(`${seriesClass}`);
 }
 
 /**
@@ -65,7 +66,8 @@ export function addAriaLabels({
 		setElementAttributes(element, item, descriptor);
 
 		if (multiSeries) {
-			addSeriesClass(element, item[multiSeries] as string);
+			const series = item[multiSeries] as string;
+			addSeriesClass(element, series);
 		}
 	});
 }

src/components/navigation/JumpX.ts

@@ -36,9 +36,7 @@ export async function jumpXElements({
 	// Filter elements for the selected series
 	if (series.length > 0 && selectedSeries) {
 		const currentSeriesName = selectedSeries.replace(/ /g, "-");
-		elements = elements.filter((element) =>
-			element.classList.contains(`series:${currentSeriesName}`),
-		);
+		elements = elements.filter((element) => element.classList.contains(currentSeriesName));
 	}
 
 	const activeElement = document.activeElement as HTMLElement;

src/components/navigation/NavigationKeyHandler.ts

@@ -237,14 +237,14 @@ function switchSeries({
 	const elements = getElements({ chartRef, selectorType });
 
 	const previousSeries =
-		elements?.filter((element) => element.classList.contains(`series:${selectedSeries}`)) ?? [];
+		elements?.filter((element) => element.classList.contains(selectedSeries)) ?? [];
 	const previousIndex = previousSeries.indexOf(previousPoint);
 	const previousSeriesPos = series.indexOf(selectedSeries);
 
 	const currentSeriesPos = (previousSeriesPos + 1) % series.length;
 	const currentSeriesName = series[currentSeriesPos].replace(/ /g, "-");
 	const currentSeries =
-		elements?.filter((element) => element.classList.contains(`series:${currentSeriesName}`)) ?? [];
+		elements?.filter((element) => element.classList.contains(currentSeriesName)) ?? [];
 
 	wiper(chartRef);
 

src/utils/getElements.ts

@@ -51,7 +51,8 @@ export function getElements({
 	}
 
 	const seriesArray = Array.isArray(selectedSeries) ? selectedSeries : [selectedSeries];
+
 	return elementsArray.filter((element) =>
-		seriesArray.some((series) => element.classList.contains(`series:${series}`)),
+		seriesArray.some((series) => element.classList.contains(series)),
 	);
 }

src/utils/toSafeClassname.ts

@@ -0,0 +1,26 @@
+/**
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, version 3 of the License.
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ * You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+ * Other licensing options may be available, please reach out to [email protected] for more information.
+ */
+
+/**
+ * Converts the name of the series into a version suitable for a class
+ *
+ * @export
+ * @param {string} multiSeriesValues - One of the multiserie string values
+ * @return {string} - The string value refactored to fit a className
+ */
+export function toSafeClassName(multiSeriesValues: string): string {
+	// Remove leading and trailing whitespace
+	let safeClassName = multiSeriesValues.trim();
+
+	// Replace spaces and invalid characters with dashes
+	safeClassName = safeClassName.replace(/[^a-zA-Z0-9_-]/g, "-");
+
+	// Replace multiple consecutive dashes with a single dash
+	safeClassName = safeClassName.replace(/-+/g, "-");
+
+	return "series_" + safeClassName;
+}