├── examples
    ├── README.md
    ├── public
    │   ├── AutoVizuA11y_icon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── style
    │   │   │   ├── Options.css
    │   │   │   ├── Homepage.css
    │   │   │   ├── index.css
    │   │   │   └── App.css
    │   ├── main.jsx
    │   ├── components
    │   │   ├── manual
    │   │   │   ├── chart.constants.js
    │   │   │   ├── ChartGridManual.jsx
    │   │   │   ├── TreeMapManual.jsx
    │   │   │   ├── SingleTimelineManual.jsx
    │   │   │   ├── BarChartManual.jsx
    │   │   │   └── ScatterplotManual.jsx
    │   │   ├── automatic
    │   │   │   ├── chart.constants.js
    │   │   │   ├── ChartGrid.jsx
    │   │   │   ├── TreeMapAutomatic.jsx
    │   │   │   ├── SingleTimelineAutomatic.jsx
    │   │   │   ├── BarChartAutomatic.jsx
    │   │   │   ├── ScatterplotAutomatic.jsx
    │   │   │   └── PieAutomatic.jsx
    │   │   └── custom_shortcut_guide
    │   │   │   └── components
    │   │   │       ├── CustomShortcutGuideBody.tsx
    │   │   │       ├── CustomGuideDescription.tsx
    │   │   │       ├── CustomGuideHeader.tsx
    │   │   │       ├── CustomShortcutGuide.tsx
    │   │   │       ├── CustomShortcutGuideSection.tsx
    │   │   │       └── CustomGuideData.ts
    │   ├── App.jsx
    │   ├── index.js
    │   ├── data
    │   │   ├── transformJSON.js
    │   │   ├── transformJSONmulti.js
    │   │   └── multipleEncodings.json
    │   ├── Options.jsx
    │   ├── Homepage.jsx
    │   └── KeyRequest.jsx
    ├── vite.config.js
    ├── index.html
    ├── .gitignore
    ├── .eslintrc.cjs
    └── package.json
├── .npmignore
├── .npmrc
├── src
    ├── assets
    │   ├── images
    │   │   ├── banner.png
    │   │   └── shortcut_guide_class_anatomy.png
    │   ├── style
    │   │   ├── AutoVizuA11y.css
    │   │   └── NativeShortcutGuide.css
    │   └── data
    │   │   └── GuideData.ts
    ├── components
    │   ├── insights
    │   │   ├── index.ts
    │   │   ├── MessageGenerator.ts
    │   │   └── InsightsKeyHandler.ts
    │   ├── descriptions
    │   │   ├── index.ts
    │   │   ├── DescriptionsKeyHandler.ts
    │   │   └── DescriptionsGenerator.ts
    │   ├── index.ts
    │   ├── navigation
    │   │   ├── index.ts
    │   │   ├── Skip.ts
    │   │   ├── AddAriaLabels.ts
    │   │   ├── AddNavigation.ts
    │   │   ├── JumpX.ts
    │   │   ├── XSetter.ts
    │   │   └── GuideKeyHandler.ts
    │   └── shortcut_guide
    │   │   ├── components
    │   │       ├── NativeGuideDescription.tsx
    │   │       ├── NativeShortcutGuideBody.tsx
    │   │       ├── NativeGuideHeader.tsx
    │   │       ├── NativeShortcutGuide.tsx
    │   │       └── NativeShortcutGuideSection.tsx
    │   │   └── index.tsx
    ├── vite-env.d.ts
    ├── index.ts
    ├── utils
    │   ├── macOSDetector.ts
    │   ├── initToolTutorial.ts
    │   ├── index.ts
    │   ├── handleBlur.ts
    │   ├── showAlert.ts
    │   ├── insightsCalculator.ts
    │   ├── toSafeClassname.ts
    │   ├── wiper.ts
    │   ├── arrayConverter.ts
    │   ├── processData.ts
    │   ├── handleFirstFocus.ts
    │   ├── getElements.ts
    │   ├── maths.ts
    │   └── handleKeyDown.ts
    ├── constants.ts
    └── hooks
    │   └── useIsolatedI18n.ts
├── .prettierrc
├── cypress
    ├── fixtures
    │   └── example.json
    ├── e2e
    │   ├── average.cy.js
    │   ├── chart-attributes.cy.js
    │   ├── data-level.cy.js
    │   ├── compare-to-maximum.cy.js
    │   ├── open-native-guide.cy.js
    │   ├── open-custom-guide.cy.js
    │   ├── close-custom-guide.cy.js
    │   ├── close-native-guide.cy.js
    │   ├── chart-level.cy.js
    │   ├── jump-between-chart-extremes.cy.js
    │   ├── move-between-chart-elements.cy.js
    │   ├── compare-to-chart.cy.js
    │   ├── move-between-chart-series.cy.js
    │   ├── chart-element-attributes.cy.js
    │   ├── change-descriptions.cy.js
    │   ├── jump-between-chart-elements.cy.js
    │   └── internationalization.cy.js
    └── support
    │   ├── e2e.ts
    │   └── commands.ts
├── cypress.config.ts
├── .gitignore
├── .github
    ├── workflows
    │   ├── tests.yml
    │   └── release_package.yml
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── tsconfig.node.json
├── index.html
├── eslint.config.js
├── tsconfig.json
├── CONTRIBUTING.md
├── vite.config.ts
├── CHANGELOG.md
└── package.json


/examples/README.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | examples/


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org


--------------------------------------------------------------------------------
/src/assets/images/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feedzai/AutoVizuA11y/HEAD/src/assets/images/banner.png


--------------------------------------------------------------------------------
/src/components/insights/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./InsightsKeyHandler";
2 | export * from "./MessageGenerator";
3 | 


--------------------------------------------------------------------------------
/examples/public/AutoVizuA11y_icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feedzai/AutoVizuA11y/HEAD/examples/public/AutoVizuA11y_icon.ico


--------------------------------------------------------------------------------
/src/assets/images/shortcut_guide_class_anatomy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feedzai/AutoVizuA11y/HEAD/src/assets/images/shortcut_guide_class_anatomy.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"printWidth": 100,
3 | 	"singleQuote": false,
4 | 	"semi": true,
5 | 	"tabWidth": 2,
6 | 	"trailingComma": "all",
7 | 	"useTabs": true
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/src/assets/style/Options.css:
--------------------------------------------------------------------------------
1 | #cardContainer {
2 |   display: flex;
3 |   flex-direction: row;
4 |   flex-wrap: wrap;
5 |   justify-content: space-around;
6 |   padding-top: 5%;
7 | }
8 | 


--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/public/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 |   <body>
4 |     <noscript>You need to enable JavaScript to run this app.</noscript>
5 |     <div id="root"></div>
6 |   </body>
7 | </html>
8 | 


--------------------------------------------------------------------------------
/examples/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.jsx";
4 | 
5 | ReactDOM.createRoot(document.getElementById("root")).render(<App />);
6 | 


--------------------------------------------------------------------------------
/examples/src/components/manual/chart.constants.js:
--------------------------------------------------------------------------------
1 | export const chartDimensions = {
2 |     marginTop: 0,
3 |     marginLeft: 3,
4 |     marginBottom: 40,
5 |     marginRight: 10,
6 |     width: 400,
7 |     height: 350,
8 | }; // px
9 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/chart.constants.js:
--------------------------------------------------------------------------------
1 | export const chartDimensions = {
2 |     marginTop: 0,
3 |     marginLeft: 3,
4 |     marginBottom: 40,
5 |     marginRight: 10,
6 |     width: 400,
7 |     height: 350,
8 | }; // px
9 | 


--------------------------------------------------------------------------------
/examples/src/assets/style/Homepage.css:
--------------------------------------------------------------------------------
 1 | .Homepage {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | #informationContainer {
 6 |   display: flex;
 7 |   justify-content: center;
 8 | }
 9 | 
10 | #information {
11 |   overflow-wrap: break-word; /* or anywhere */
12 |   width: 50%;
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import "./assets/style/App.css";
 2 | import Homepage from "./Homepage";
 3 | import "@fontsource/outfit";
 4 | 
 5 | function App() {
 6 | 	return (
 7 | 		<div className="App">
 8 | 			<Homepage></Homepage>
 9 | 		</div>
10 | 	);
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/examples/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./assets/style/index.css";
 4 | import App from "./App";
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById("root"));
 7 | root.render(
 8 |   <>
 9 |     <App />
10 |   </>
11 | );
12 | 


--------------------------------------------------------------------------------
/examples/src/data/transformJSON.js:
--------------------------------------------------------------------------------
 1 | export default function transformJSON(inputJSON) {
 2 |   const outputArray = [];
 3 | 
 4 |   for (const key in inputJSON) {
 5 |     if (inputJSON.hasOwnProperty(key)) {
 6 |       outputArray.push({
 7 |         x: key,
 8 |         y: inputJSON[key],
 9 |       });
10 |     }
11 |   }
12 | 
13 |   return outputArray;
14 | }
15 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "cypress";
 2 | import codeCoverageTask from "@cypress/code-coverage/task.js";
 3 | 
 4 | export default defineConfig({
 5 | 	e2e: {
 6 | 		baseUrl: "http://localhost:5173/AutoVizuA11y/",
 7 | 		experimentalRunAllSpecs: true,
 8 | 		setupNodeEvents(on, config) {
 9 | 			codeCoverageTask(on, config);
10 | 			return config;
11 | 		},
12 | 	},
13 | });
14 | 


--------------------------------------------------------------------------------
/examples/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | 
 4 | const COMMON_SERVER_PORT = 5173;
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 | 	server: {
 9 | 		port: COMMON_SERVER_PORT,
10 | 	},
11 | 	preview: {
12 | 		port: COMMON_SERVER_PORT,
13 | 	},
14 | 	plugins: [react()],
15 | 	base: "/AutoVizuA11y/",
16 | });
17 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<link rel="icon" type="image/ico" href="/AutoVizuA11y_icon.ico" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<title>AutoVizuA11y — examples</title>
 8 | 	</head>
 9 | 	<body>
10 | 		<div id="root"></div>
11 | 		<script type="module" src="/src/main.jsx"></script>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/examples/src/data/transformJSONmulti.js:
--------------------------------------------------------------------------------
 1 | export default function transformJSONmulti(multiLineData) {
 2 |   const multiData = [];
 3 | 
 4 |   for (const country in multiLineData) {
 5 |     for (const year in multiLineData[country]) {
 6 |       multiData.push({
 7 |         x: parseInt(year),
 8 |         y: multiLineData[country][year],
 9 |         series: country,
10 |       });
11 |     }
12 |   }
13 | 
14 |   return multiData;
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/src/assets/style/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 4 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .npmrc
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | package-lock.json
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # Cypress files
27 | cypress/results
28 | cypress/screenshots
29 | cypress/downloads
30 | 
31 | # Test coverage
32 | .nyc_output
33 | coverage
34 | 


--------------------------------------------------------------------------------
/cypress/e2e/average.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + K) Average Test", () => {
 2 | 	it("should alert the correct average value for the first chart", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().focus().type("{alt}k");
 8 | 		cy.findAllByTestId("a11y-chart-alert").first().should("have.text", "The average is 456.99"); // Checks if the average is alerted and correct
 9 | 		cy.checkA11y();
10 | 	});
11 | });
12 | 


--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
 1 | name: Testing
 2 | on:
 3 |   - push
 4 |   - pull_request
 5 | jobs:
 6 |   quality:
 7 |     name: E2E tests
 8 |     runs-on: ${{ matrix.os }}
 9 |     strategy:
10 |       matrix:
11 |         node-version:
12 |           - 18.x
13 |           - 20.x
14 |         os:
15 |           - ubuntu-latest
16 |     steps:
17 |       - uses: actions/checkout@v3
18 |       - name: Using node ${{ matrix.node-version }}
19 |         uses: actions/setup-node@v3
20 |         with:
21 |           node-version: ${{ matrix.node-version }}
22 |           cache: npm
23 |       - run: npm ci
24 |       - run: npm run test:ci
25 | 


--------------------------------------------------------------------------------
/cypress/e2e/chart-attributes.cy.js:
--------------------------------------------------------------------------------
 1 | describe("Addition of Attributes to Chart Test", () => {
 2 | 	it("should add aria-labels and tabindexes to the charts", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc")
 8 | 			.first()
 9 | 			.as("chartDescription")
10 | 			.should("have.attr", "aria-label"); // Check if aria-label exists
11 | 		cy.get("@chartDescription").should("have.attr", "tabindex", "0"); // Check if tabindex="0" exists
12 | 		cy.checkA11y();
13 | 	});
14 | });
15 | 


--------------------------------------------------------------------------------
/examples/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/cypress/e2e/data-level.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Down Arrow) Moving to Data Level Test", () => {
 2 | 	it("should add back the tabindexes to the chart elements when moving from the chart level", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc")
 8 | 			.first()
 9 | 			.focus()
10 | 			.type("{downArrow}")
11 | 			.should("not.have.attr", "tabindex", "0"); // Checks if tabindex="0" does not exist
12 | 		cy.findAllByTestId("a11y-chart-element").first().should("have.attr", "tabindex", "0"); // Checks if tabindex="0" exists
13 | 		cy.checkA11y();
14 | 	});
15 | });
16 | 


--------------------------------------------------------------------------------
/cypress/e2e/compare-to-maximum.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + Shift + L) Compare to Maximum of the Chart Test", () => {
 2 | 	it("should alert the correct comparison value between the first element and maximum of the chart", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().focus().type("{downArrow}");
 8 | 		cy.findAllByTestId("a11y-chart-element").first().type("{alt}{shift}l");
 9 | 		cy.findAllByTestId("a11y-chart-alert")
10 | 			.first()
11 | 			.should("have.text", "The value is the same as the Maximum value");
12 | 		cy.checkA11y();
13 | 	});
14 | });
15 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ""
 5 | labels: ""
 6 | assignees: ""
 7 | ---
 8 | 
 9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
11 | 
12 | **Describe your proposed solution**
13 | A clear and concise description of the feature you are proposing and what it should do.
14 | 
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 | 


--------------------------------------------------------------------------------
/cypress/e2e/open-native-guide.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(?) Open Native Shortcut Guide Test", () => {
 2 | 	it("should open the native shortcut guide", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y-native-shortcut-guide")
 8 | 			.first()
 9 | 			.as("nativeGuide")
10 | 			.should("not.be.visible"); // Check if the native shortcut guide is not visible (closed)
11 | 		cy.findAllByTestId("a11y_desc").first().focus().type("?");
12 | 		cy.get("@nativeGuide").should("be.visible"); // Check if the native shortcut guide is visible (opened)
13 | 		cy.checkA11y();
14 | 	});
15 | });
16 | 


--------------------------------------------------------------------------------
/cypress/e2e/open-custom-guide.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(?) Open Custom Shortcut Guide Test", () => {
 2 | 	it("should open the custom shortcut guide", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y-custom-shortcut-guide")
 8 | 			.first()
 9 | 			.as("customGuide")
10 | 			.should("not.be.visible"); // Check if the custom shortcut guide is not visible (closed)
11 | 		cy.findAllByTestId("a11y_desc").first().focus().tab().type("?");
12 | 		cy.get("@customGuide").should("be.visible"); // Check if the custom shortcut guide is visible (opened)
13 | 		cy.checkA11y();
14 | 	});
15 | });
16 | 


--------------------------------------------------------------------------------
/cypress/e2e/close-custom-guide.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Esc) Close Custom Shortcut Guide Test", () => {
 2 | 	it("should close the custom shortcut guide", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().focus().tab().type("?");
 8 | 		cy.get(":focus").click(); // Closing the guide by pressing the button
 9 | 		cy.findAllByTestId("a11y-custom-shortcut-guide").first().should("not.be.visible"); // Check if the custom shortcut guide is not visible (closed)
10 | 		cy.findAllByTestId("a11y_desc").eq(1).should("be.focused"); // Checks if the chart is focused
11 | 		cy.checkA11y();
12 | 	});
13 | });
14 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * 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.
3 |  * 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.
4 |  * 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/>.
5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
6 |  */
7 | 
8 | /// <reference types="vite/client" />
9 | 


--------------------------------------------------------------------------------
/cypress/e2e/close-native-guide.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Esc) Close Native Shortcut Guide Test", () => {
 2 | 	it("should close the native shortcut guide", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().as("chartDescription").focus().type("?");
 8 | 		cy.get(":focus").type("{esc}"); // Closing the guide by pressing the Esc
 9 | 		cy.findAllByTestId("a11y-native-shortcut-guide").first().should("not.be.visible"); // Check if the native shortcut guide is not visible (closed)
10 | 		cy.get("@chartDescription").should("be.focused"); // Checks if the chart is focused
11 | 		cy.checkA11y();
12 | 	});
13 | });
14 | 


--------------------------------------------------------------------------------
/cypress/e2e/chart-level.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Up Arrow) Moving to Chart Level Test", () => {
 2 | 	it("should add back the tabindexes to the charts when moving from the data level", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().as("chartDescription").focus().type("{downArrow}");
 8 | 		cy.findAllByTestId("a11y-chart-element")
 9 | 			.first()
10 | 			.type("{upArrow}")
11 | 			.should("not.have.attr", "tabindex", "0"); // Checks if tabindex="0" does not exist
12 | 		cy.get("@chartDescription").should("have.attr", "tabindex", "0"); // Checks if tabindex="0" exists
13 | 		cy.checkA11y();
14 | 	});
15 | });
16 | 


--------------------------------------------------------------------------------
/cypress/e2e/jump-between-chart-extremes.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + W and Alt + Q) Jump to the Extremes of the Chart Test", () => {
 2 | 	it("should set focus to the extreme elements of the chart", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().focus().type("{downArrow}");
 8 | 		cy.findAllByTestId("a11y-chart-element").first().as("firstChartElement").type("{alt}w");
 9 | 		cy.findAllByTestId("a11y-chart-element").eq(9).should("be.focused").type("{alt}q"); // Checks if the last element is focused
10 | 		cy.get("@firstChartElement").should("be.focused"); // Checks if the first element is focused
11 | 		cy.checkA11y();
12 | 	});
13 | });
14 | 


--------------------------------------------------------------------------------
/cypress/e2e/move-between-chart-elements.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Right and Left Arrow) Move Between Elements of the Chart Test", () => {
 2 | 	it("should move to the next and previous chart elements", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().focus().type("{downArrow}");
 8 | 		cy.findAllByTestId("a11y-chart-element").first().as("firstChartElement").type("{rightArrow}");
 9 | 		cy.findAllByTestId("a11y-chart-element").eq(1).should("be.focused").type("{leftArrow}"); // Checks if the second element is focused
10 | 		cy.get("@firstChartElement").should("be.focused"); // Checks if the first element is focused
11 | 		cy.checkA11y();
12 | 	});
13 | });
14 | 


--------------------------------------------------------------------------------
/examples/src/assets/style/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 | 	text-align: center;
 3 | 	font-family: "Outfit";
 4 | }
 5 | 
 6 | .App-logo {
 7 | 	height: 40vmin;
 8 | 	pointer-events: none;
 9 | }
10 | 
11 | @media (prefers-reduced-motion: no-preference) {
12 | 	.App-logo {
13 | 		animation: App-logo-spin infinite 20s linear;
14 | 	}
15 | }
16 | 
17 | .App-header {
18 | 	background-color: #282c34;
19 | 	min-height: 100vh;
20 | 	display: flex;
21 | 	flex-direction: column;
22 | 	align-items: center;
23 | 	justify-content: center;
24 | 	font-size: calc(10px + 2vmin);
25 | 	color: white;
26 | }
27 | 
28 | .App-link {
29 | 	color: #61dafb;
30 | }
31 | 
32 | @keyframes App-logo-spin {
33 | 	from {
34 | 		transform: rotate(0deg);
35 | 	}
36 | 	to {
37 | 		transform: rotate(360deg);
38 | 	}
39 | }
40 | 
41 | .a11y-examples-title {
42 | 	font-size: 1rem;
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/descriptions/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | export * from "./DescriptionsKeyHandler";
 9 | export * from "./DescriptionsGenerator";
10 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | export * from "./descriptions";
 9 | export * from "./navigation";
10 | export * from "./insights";
11 | 


--------------------------------------------------------------------------------
/cypress/support/e2e.ts:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/e2e.ts is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import "./commands";
18 | import "cypress-axe";
19 | import "cypress-plugin-tab";
20 | import "@cypress/code-coverage/support";
21 | 
22 | // Alternatively you can use CommonJS syntax:
23 | // require('./commands')
24 | 


--------------------------------------------------------------------------------
/cypress/e2e/compare-to-chart.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + Z) Compare to Rest of the Chart Test", () => {
 2 | 	it("should alert the correct comparison value between the first element and rest of the chart", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().as("chartDescription").focus().type("{alt}z");
 8 | 		cy.findAllByTestId("a11y-chart-alert")
 9 | 			.first()
10 | 			.as("chartAlert")
11 | 			.should("have.text", "This shortcut only works inside a chart");
12 | 		cy.get("@chartDescription").type("{downArrow}");
13 | 		cy.findAllByTestId("a11y-chart-element").first().type("{alt}z");
14 | 		cy.get("@chartAlert").should("have.text", "This is the highest value");
15 | 		cy.checkA11y();
16 | 	});
17 | });
18 | 


--------------------------------------------------------------------------------
/cypress/e2e/move-between-chart-series.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + M) Move Between Data Series Test", () => {
 2 | 	it("should move to the next series of data", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().focus().tab().tab().type("{downArrow}");
 8 | 		cy.findAllByTestId("a11y-chart-element").eq(14).should("be.focused"); // Checks if the first element of the first series is focused
 9 | 		cy.get(":focus").type("{alt}m");
10 | 		cy.findAllByTestId("a11y-chart-alert").first().should("have.text", "\u00A0"); // Checks if no error was alerted
11 | 		cy.findAllByTestId("a11y-chart-element").eq(18).should("be.focused"); // Checks if the first element of the second series is focused
12 | 		cy.checkA11y();
13 | 	});
14 | });
15 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import "./i18n";
 9 | 
10 | export { AutoVizuA11y } from "./AutoVizuA11y";
11 | export { NativeShortcutGuide } from "./components/shortcut_guide/components/NativeShortcutGuide";
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ""
 5 | labels: ""
 6 | assignees: ""
 7 | ---
 8 | 
 9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 | 
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 | 
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Evidence**
24 | If applicable, add a screenshot, short video or gif to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 | 
28 | - OS: [e.g. Windows, MacOS]
29 | - Browser: [e.g. Chrome, Safari]
30 | - Screen Reader: [e.g. VoiceOver, Jaws]
31 | - AutoVizuA11y Version: [e.g. 1.0.2]
32 | 
33 | **Additional context**
34 | Add any other context about the problem here.
35 | 


--------------------------------------------------------------------------------
/cypress/e2e/chart-element-attributes.cy.js:
--------------------------------------------------------------------------------
 1 | describe("Addition of Attributes to Chart Elements Test", () => {
 2 | 	it("should add aria-labels, aria-roledescription, empty role but not tabindexes to the chart elements", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.findAllByTestId("a11y-chart-element").first().as("chart-element");
 8 | 		cy.get("@chart-element").should("have.attr", "aria-label"); // Check if aria-label exists
 9 | 		cy.get("@chart-element").should("have.attr", "aria-roledescription"); // Check if aria-roledescription exists
10 | 		cy.get("@chart-element").should("have.attr", "role", "graphics-symbol"); // Check if role exists
11 | 		cy.get("@chart-element").should("not.have.attr", "tabindex", "0"); // Check if tabindex="0" does not exist
12 | 		cy.checkA11y();
13 | 	});
14 | });
15 | 


--------------------------------------------------------------------------------
/cypress/e2e/change-descriptions.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + S and Alt + B) Change Chart Description Test", () => {
 2 | 	it("should toggle between longer and shorter descriptions", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // Wait for AutoVizuA11y to handle descriptions
 7 | 		cy.findAllByTestId("a11y_desc").first().as("chartDescription");
 8 | 		cy.get("@chartDescription")
 9 | 			.invoke("attr", "aria-label")
10 | 			.then((shortDescription) => {
11 | 				cy.get("@chartDescription")
12 | 					.focus()
13 | 					.type("{alt}b")
14 | 					.invoke("attr", "aria-label")
15 | 					.should("not.equal", shortDescription); // Assert that the aria-label has changed
16 | 				cy.get("@chartDescription")
17 | 					.focus()
18 | 					.type("{alt}s")
19 | 					.invoke("attr", "aria-label")
20 | 					.should("equal", shortDescription); // Assert that the aria-label reverted back
21 | 			});
22 | 		cy.checkA11y();
23 | 	});
24 | });
25 | 


--------------------------------------------------------------------------------
/src/components/navigation/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | export * from "./AddNavigation";
 9 | export * from "./AddAriaLabels";
10 | export * from "./NavigationKeyHandler";
11 | export * from "./JumpX";
12 | export * from "./XSetter";
13 | export * from "./Skip";
14 | export * from "./GuideKeyHandler";
15 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | {
 9 | 	"compilerOptions": {
10 | 		"composite": true,
11 | 		"skipLibCheck": true,
12 | 		"module": "ESNext",
13 | 		"moduleResolution": "bundler",
14 | 		"allowSyntheticDefaultImports": true,
15 | 		"strict": true
16 | 	},
17 | 	"include": ["vite.config.ts"]
18 | }
19 | 


--------------------------------------------------------------------------------
/cypress/e2e/jump-between-chart-elements.cy.js:
--------------------------------------------------------------------------------
 1 | describe("(Alt + X) Prompt Test", () => {
 2 | 	it("should open a prompt when Alt + X is pressed and input '2'", () => {
 3 | 		cy.visit("/");
 4 | 		cy.injectAxe();
 5 | 		cy.findByTestId("manual-descriptions-option").click();
 6 | 		cy.wait(500); // AutoVizuA11y waits 500ms before handling descriptions
 7 | 		cy.window().then((win) => {
 8 | 			cy.stub(win, "prompt").returns("2").as("prompt"); // Stub the prompt after Alt + X is pressed
 9 | 			cy.findAllByTestId("a11y_desc").first().focus().type("{downArrow}");
10 | 			cy.findAllByTestId("a11y-chart-element").first().as("firstChartElement").type("{alt}x"); // Simulate pressing Alt + X inside of the chart
11 | 			cy.get("@prompt").should("have.been.calledOnce"); // Verify the prompt was triggered and user input '2'
12 | 			cy.get("@firstChartElement").type("{rightArrow}");
13 | 			cy.findAllByTestId("a11y-chart-element").eq(2).should("be.focused"); // Checks if the third element is focused
14 | 		});
15 | 		cy.checkA11y();
16 | 	});
17 | });
18 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 | -->
 7 | 
 8 | <!DOCTYPE html>
 9 | <html lang="en">
10 | 	<head>
11 | 		<meta charset="UTF-8" />
12 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13 | 		<title>AutoVizuA11y</title>
14 | 	</head>
15 | 	<body>
16 | 		<div id="root"></div>
17 | 		<script type="module" src="/src/index.tsx"></script>
18 | 	</body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/examples/src/data/multipleEncodings.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "series": "Croatia",
 4 |     "x": 2010,
 5 |     "y": 4.37
 6 |   },
 7 |   {
 8 |     "series": "Croatia",
 9 |     "x": 2015,
10 |     "y": 4.25
11 |   },
12 |   {
13 |     "series": "Croatia",
14 |     "x": 2020,
15 |     "y": 4.1
16 |   },
17 |   {
18 |     "series": "Croatia",
19 |     "x": 2022,
20 |     "y": 4.03
21 |   },
22 |   {
23 |     "series": "Latvia",
24 |     "x": 2010,
25 |     "y": 2.1
26 |   },
27 |   {
28 |     "series": "Latvia",
29 |     "x": 2015,
30 |     "y": 1.99
31 |   },
32 |   {
33 |     "series": "Latvia",
34 |     "x": 2020,
35 |     "y": 1.9
36 |   },
37 |   {
38 |     "series": "Latvia",
39 |     "x": 2022,
40 |     "y": 1.85
41 |   },
42 |   {
43 |     "series": "Lithuania",
44 |     "x": 2010,
45 |     "y": 3.14
46 |   },
47 |   {
48 |     "series": "Lithuania",
49 |     "x": 2015,
50 |     "y": 2.96
51 |   },
52 |   {
53 |     "series": "Lithuania",
54 |     "x": 2020,
55 | 
56 |     "y": 2.82
57 |   },
58 |   {
59 |     "series": "Lithuania",
60 |     "x": 2022,
61 |     "y": 2.75
62 |   }
63 | ]
64 | 


--------------------------------------------------------------------------------
/src/utils/macOSDetector.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | /**
 9 |  * Detects if the user is on macOS
10 |  * @returns {boolean} true if on macOS, false otherwise
11 |  */
12 | export function isMacOS(): boolean {
13 | 	const userAgent = navigator.userAgent.toLowerCase();
14 | 	const platform = navigator.platform.toLowerCase();
15 | 
16 | 	return platform.includes("mac") || userAgent.includes("mac os");
17 | }
18 | 


--------------------------------------------------------------------------------
/src/utils/initToolTutorial.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { getLSItem, setLSItem } from "@feedzai/js-utilities";
 9 | 
10 | /**
11 |  * Ensures the tutorial is heard the first time a chart is focused
12 |  *
13 |  * @export
14 |  */
15 | export function initToolTutorial() {
16 | 	const toolTutorial = getLSItem("toolTutorial");
17 | 
18 | 	if (!toolTutorial) {
19 | 		setLSItem("toolTutorial", "true");
20 | 	}
21 | }
22 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | export * from "./arrayConverter";
 9 | export * from "./insightsCalculator";
10 | export * from "./maths";
11 | export * from "./wiper";
12 | export * from "./handleBlur";
13 | export * from "./handleFirstFocus";
14 | export * from "./handleKeyDown";
15 | export * from "./showAlert";
16 | export * from "./initToolTutorial";
17 | export * from "./processData";
18 | export * from "./macOSDetector";
19 | 


--------------------------------------------------------------------------------
/src/utils/handleBlur.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import React from "react";
 9 | 
10 | import * as constants from "./../constants";
11 | 
12 | /**
13 |  * Removes the 'focus' class when the element loses focus
14 |  *
15 |  * @export
16 |  * @param {React.RefObject<HTMLDivElement>} chartRef - The React reference of the chart.
17 |  */
18 | export const handleBlur = (chartRef: React.RefObject<HTMLDivElement>) => {
19 | 	chartRef.current!.classList.remove(constants.FOCUS_CLASS);
20 | };
21 | 


--------------------------------------------------------------------------------
/src/components/shortcut_guide/components/NativeGuideDescription.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../constants";
 9 | import type { TFunction } from "i18next";
10 | 
11 | export const ShortcutGuideDescription = ({ t }: { t: TFunction }) => {
12 | 	return (
13 | 		<p
14 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideDescription}
15 | 			id={constants.SHORTCUTGUIDE_ID.shortcutGuideDescription}
16 | 		>
17 | 			{t("sg_description")}
18 | 		</p>
19 | 	);
20 | };
21 | 


--------------------------------------------------------------------------------
/examples/src/components/custom_shortcut_guide/components/CustomShortcutGuideBody.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../../../src/constants";
 9 | import React from "react";
10 | 
11 | import { CustomShortcutGuideSection } from "./CustomShortcutGuideSection";
12 | import { CUSTOM_GUIDE_DATA } from "./CustomGuideData";
13 | 
14 | export const CustomShortcutGuideBody = () => (
15 | 	<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideBody}>
16 | 		{CUSTOM_GUIDE_DATA.map((section, sectionIndex) => (
17 | 			<div key={sectionIndex}>
18 | 				<CustomShortcutGuideSection section={section} sectionIndex={sectionIndex} />
19 | 			</div>
20 | 		))}
21 | 	</div>
22 | );
23 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | import globals from "globals";
 8 | import pluginJs from "@eslint/js";
 9 | import tseslint from "typescript-eslint";
10 | import pluginReact from "eslint-plugin-react";
11 | 
12 | const ESLINT_CONFIG = [
13 |   pluginJs.configs.recommended,
14 |   ...tseslint.configs.recommended,
15 |   pluginReact.configs.flat?.recommended,
16 |   {
17 |     files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
18 |     languageOptions: { globals: globals.browser },
19 |     settings: {
20 |       react: {
21 |         version: "18"
22 |       }
23 |     },
24 |     rules: {
25 |       "react/react-in-jsx-scope": "off",
26 |       "react/jsx-uses-react": "off",
27 |     }
28 |   }
29 | ];
30 | 
31 | export default ESLINT_CONFIG;
32 | 


--------------------------------------------------------------------------------
/src/utils/showAlert.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { wait } from "@feedzai/js-utilities";
 9 | 
10 | import * as constants from "./../constants";
11 | 
12 | /**
13 |  * Sets a message in div with the 'alert' role and cleans it after some time
14 |  *
15 |  * @export
16 |  * @param {React.ReactNode | null} alertDiv - Div where the alerts are set.
17 |  * @param {string} message - The message to be set.
18 |  */
19 | export async function showAlert(
20 | 	alertDivRef: React.RefObject<HTMLElement>,
21 | 	message: string,
22 | ): Promise<void> {
23 | 	if (alertDivRef.current) {
24 | 		alertDivRef.current.textContent = message;
25 | 		await wait(constants.ALERT_DURATION);
26 | 		alertDivRef.current.textContent = "\u00A0";
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/shortcut_guide/components/NativeShortcutGuideBody.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../constants";
 9 | import { GUIDE_DATA } from "../../../assets/data/GuideData";
10 | import type { TFunction } from "i18next";
11 | 
12 | import { ShortcutGuideSection } from "./NativeShortcutGuideSection";
13 | 
14 | export const ShortcutGuideBody = ({ t }: { t: TFunction }) => {
15 | 	return (
16 | 		<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideBody}>
17 | 			{GUIDE_DATA.map((section, sectionIndex) => (
18 | 				<ShortcutGuideSection
19 | 					key={sectionIndex}
20 | 					section={{ ...section, title: t(section.title) }}
21 | 					sectionIndex={sectionIndex}
22 | 					t={t}
23 | 				/>
24 | 			))}
25 | 		</div>
26 | 	);
27 | };
28 | 


--------------------------------------------------------------------------------
/src/utils/insightsCalculator.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { sum, avg, max, min } from "./maths";
 9 | /**
10 |  * Calculates insights based on the array with only the values.
11 |  *
12 |  * @export
13 |  * @param {number[]} arrayConverted - The array of numbers to calculate insights from.
14 |  * @return {number[]} Array with the sum, average, maximum and minimum values.
15 |  */
16 | export function insightsCalculator(arrayConverted: number[]): number[] {
17 | 	if (!arrayConverted || arrayConverted.length === 0) {
18 | 		return [];
19 | 	}
20 | 	const total = sum(arrayConverted);
21 | 	const average = avg(arrayConverted);
22 | 	const maximum = max(arrayConverted);
23 | 	const minimum = min(arrayConverted);
24 | 	return [total, average, maximum, minimum];
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | {
 9 | 	"compilerOptions": {
10 | 		"types": ["cypress", "@testing-library/cypress", "cypress-axe"],
11 | 		"target": "ES2020",
12 | 		"useDefineForClassFields": true,
13 | 		"lib": ["ES2020", "DOM", "DOM.Iterable"],
14 | 		"module": "ESNext",
15 | 		"skipLibCheck": true,
16 | 
17 | 		/* Bundler mode */
18 | 		"moduleResolution": "bundler",
19 | 		"allowImportingTsExtensions": true,
20 | 		"resolveJsonModule": true,
21 | 		"isolatedModules": true,
22 | 		"noEmit": true,
23 | 		"jsx": "react-jsx",
24 | 
25 | 		/* Linting */
26 | 		"strict": true,
27 | 		"noUnusedLocals": true,
28 | 		"noUnusedParameters": true,
29 | 		"noFallthroughCasesInSwitch": true
30 | 	},
31 | 	"include": ["src"],
32 | 	"references": [{ "path": "./tsconfig.node.json" }]
33 | }
34 | 


--------------------------------------------------------------------------------
/examples/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "example-demo",
 3 | 	"version": "0.1.1",
 4 | 	"private": true,
 5 | 	"homepage": "https://feedzai.github.io/AutoVizuA11y/",
 6 | 	"dependencies": {
 7 | 		"@emotion/react": "^11.11.1",
 8 | 		"@emotion/styled": "^11.11.0",
 9 | 		"@feedzai/autovizua11y": "file:..",
10 | 		"@fontsource/outfit": "^5.0.13",
11 | 		"@mui/material": "^5.14.11",
12 | 		"@visx/visx": "^3.3.0",
13 | 		"d3-array": "^3.2.4",
14 | 		"react": "^18.2.0",
15 | 		"react-dom": "^18.2.0"
16 | 	},
17 | 	"scripts": {
18 | 		"dev": "vite",
19 | 		"build": "vite build",
20 | 		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
21 | 		"preview": "vite preview",
22 | 		"predeploy": "npm run build",
23 | 		"deploy": "gh-pages -d dist"
24 | 	},
25 | 	"eslintConfig": {
26 | 		"extends": [
27 | 			"react-app",
28 | 			"react-app/jest"
29 | 		]
30 | 	},
31 | 	"browserslist": {
32 | 		"production": [
33 | 			">0.2%",
34 | 			"not dead",
35 | 			"not op_mini all"
36 | 		],
37 | 		"development": [
38 | 			"last 1 chrome version",
39 | 			"last 1 firefox version",
40 | 			"last 1 safari version"
41 | 		]
42 | 	},
43 | 	"devDependencies": {
44 | 		"@types/react": "^18.2.66",
45 | 		"@types/react-dom": "^18.2.22",
46 | 		"@vitejs/plugin-react": "^4.2.1",
47 | 		"eslint": "^8.57.0",
48 | 		"eslint-plugin-react": "^7.34.1",
49 | 		"eslint-plugin-react-hooks": "^4.6.0",
50 | 		"eslint-plugin-react-refresh": "^0.4.6",
51 | 		"gh-pages": "^6.0.0",
52 | 		"vite": "^5.2.0"
53 | 	}
54 | }
55 | 


--------------------------------------------------------------------------------
/src/utils/toSafeClassname.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | /**
 9 |  * Converts the name of the series into a version suitable for a class
10 |  *
11 |  * @export
12 |  * @param {string} multiSeriesValues - One of the multiserie string values
13 |  * @return {string} - The string value refactored to fit a className
14 |  */
15 | export function toSafeClassName(multiSeriesValues: string): string {
16 | 	// Remove leading and trailing whitespace
17 | 	let safeClassName = multiSeriesValues.trim();
18 | 
19 | 	// Replace spaces and invalid characters with dashes
20 | 	safeClassName = safeClassName.replace(/[^a-zA-Z0-9_-]/g, "-");
21 | 
22 | 	// Replace multiple consecutive dashes with a single dash
23 | 	safeClassName = safeClassName.replace(/-+/g, "-");
24 | 
25 | 	return "series_" + safeClassName;
26 | }
27 | 


--------------------------------------------------------------------------------
/cypress/support/commands.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | // ***********************************************
 3 | // This example commands.ts shows you how to
 4 | // create various custom commands and overwrite
 5 | // existing commands.
 6 | //
 7 | // For more comprehensive examples of custom
 8 | // commands please read more here:
 9 | // https://on.cypress.io/custom-commands
10 | // ***********************************************
11 | //
12 | //
13 | // -- This is a parent command --
14 | // Cypress.Commands.add('login', (email, password) => { ... })
15 | //
16 | //
17 | // -- This is a child command --
18 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19 | //
20 | //
21 | // -- This is a dual command --
22 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23 | //
24 | //
25 | // -- This will overwrite an existing command --
26 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27 | //
28 | // declare global {
29 | //   namespace Cypress {
30 | //     interface Chainable {
31 | //       login(email: string, password: string): Chainable<void>
32 | //       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33 | //       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34 | //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35 | //     }
36 | //   }
37 | // }
38 | import "@testing-library/cypress/add-commands";
39 | 


--------------------------------------------------------------------------------
/src/assets/style/AutoVizuA11y.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | .focused {
 9 | 	outline: 2px solid blue;
10 | }
11 | 
12 | .focused .a11y_desc:focus {
13 | 	outline: none; /* Remove default focus outline */
14 | }
15 | 
16 | .visually-hidden {
17 | 	position: absolute;
18 | 	position: absolute !important;
19 | 	width: 1px !important;
20 | 	height: 1px !important;
21 | 	padding: 0 !important;
22 | 	margin: -1px !important;
23 | 	overflow: hidden !important;
24 | 	clip: rect(0, 0, 0, 0) !important;
25 | 	white-space: nowrap !important;
26 | 	border: 0 !important;
27 | }
28 | 
29 | .a11y_nav_guide {
30 | 	position: fixed;
31 | 	z-index: 1000;
32 | 	left: 0;
33 | 	top: 0;
34 | 	width: 100%;
35 | 	height: 100%;
36 | 	overflow: auto;
37 | 	background-color: var(--shortcut-guide-background-color);
38 | 	color: var(--shortcut-guide-color-primary);
39 | }
40 | 


--------------------------------------------------------------------------------
/examples/src/components/custom_shortcut_guide/components/CustomGuideDescription.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../../../src/constants";
 9 | import React from "react";
10 | 
11 | export const CustomShortcutGuideDescription = () => (
12 | 	<p
13 | 		className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideDescription}
14 | 		id={constants.SHORTCUTGUIDE_ID.shortcutGuideDescription}
15 | 	>
16 | 		AutoVizually shortcut guide. AutoVizually lets you navigate between charts and underlying data
17 | 		elements using just the keyboard. When focused on a chart, a description regarding the data will
18 | 		be provided — you might receive a notification indicating that the chart description was
19 | 		produced by an AI model. For JAWS and NVDA users, it is recommended to turn Focus mode before
20 | 		navigating the data using the arrow keys.
21 | 	</p>
22 | );
23 | 


--------------------------------------------------------------------------------
/examples/src/components/custom_shortcut_guide/components/CustomGuideHeader.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../../../src/constants";
 9 | import React from "react";
10 | 
11 | export const CustomShortcutGuideHeader = ({ onClose }: { onClose: () => void }) => (
12 | 	<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideHeader}>
13 | 		<h2
14 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideTitle}
15 | 			id={constants.SHORTCUTGUIDE_ID.shortcutGuideTitle}
16 | 		>
17 | 			Custom Shortcut Guide
18 | 		</h2>
19 | 		<p className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideActionLabel}>
20 | 			Question Mark or Escape
21 | 		</p>
22 | 		<button
23 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideButtonClose}
24 | 			aria-label="Close shortcut guide"
25 | 			onClick={onClose}
26 | 		>
27 | 			&times;
28 | 		</button>
29 | 	</div>
30 | );
31 | 


--------------------------------------------------------------------------------
/src/utils/wiper.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import React from "react";
 9 | 
10 | import * as constants from "./../constants";
11 | 
12 | /**
13 |  * Wipes attributes from the chart and underlying data elements.
14 |  *
15 |  * @export
16 |  * @param {React.RefObject<HTMLElement>} chartRef - Reference to the chart element.
17 |  * @param {boolean} [first=false] - Whether this is the first run.
18 |  */
19 | export function wiper(chartRef: React.RefObject<HTMLElement>, first: boolean = false): void {
20 | 	const chart = chartRef.current;
21 | 	if (!chart) return;
22 | 	if (first) {
23 | 		constants.ATTRIBUTES_TO_REMOVE.forEach((attr) => {
24 | 			chart.querySelectorAll(`[${attr}]`).forEach((element) => {
25 | 				element.removeAttribute(attr);
26 | 			});
27 | 		});
28 | 	} else {
29 | 		chart.querySelectorAll(constants.TABINDEX_ZERO).forEach((element) => {
30 | 			element.removeAttribute("tabindex");
31 | 		});
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/shortcut_guide/components/NativeGuideHeader.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../constants";
 9 | import type { TFunction } from "i18next";
10 | 
11 | export const ShortcutGuideHeader = ({ onClose, t }: { onClose: () => void; t: TFunction }) => {
12 | 	return (
13 | 		<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideHeader}>
14 | 			<h2
15 | 				className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideTitle}
16 | 				id={constants.SHORTCUTGUIDE_ID.shortcutGuideTitle}
17 | 			>
18 | 				{t("sg_title")}
19 | 			</h2>
20 | 			<p className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideActionLabel}>
21 | 				Question Mark or Escape
22 | 			</p>
23 | 			<button
24 | 				className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideButtonClose}
25 | 				aria-label={t("close_shortcut_guide_label")}
26 | 				onClick={onClose}
27 | 			>
28 | 				&times;
29 | 			</button>
30 | 		</div>
31 | 	);
32 | };
33 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Thank you for considering contributing to our project!
 4 | 
 5 | **New to contributing?** Check out this free series [How to Contribute to an Open Source Project on GitHub][egghead] to learn how.
 6 | 
 7 | ## Contact the team
 8 | 
 9 | If you want to discuss AutoVizuA11y in greater depth, **or contribute to the project**, contact us through [data-viz@feedzai.com](mailto:data-viz@feedzai.com).
10 | 
11 | ## Project Setup
12 | 
13 | 1. Fork and clone the repository.
14 | 2. Run `$ npm install` to install dependencies.
15 | 3. Create a new branch for your pull request (PR).
16 | 
17 | > **Tip:** Keep your `main` branch synchronized with the original repository. To set this up, run:
18 | >
19 | > ```bash
20 | > git remote add upstream https://github.com/feedzai/AutoVizuA11y
21 | > git fetch upstream
22 | > git branch --set-upstream-to=upstream/master main
23 | > ```
24 | >
25 | > This ensures that your `main` branch tracks the upstream repository's master branch, facilitating easier updates. Base your pull request branches on this `main` branch.
26 | 
27 | ## Test your changes
28 | 
29 | Before committing your changes, ensure all tests pass.
30 | 
31 | ## Assistance Required
32 | 
33 | Check out the [open issues][issues] for tasks that need assistance. Please follow one of the provided templates when adding an issue to this repository.
34 | 
35 | Also, please consider watching the repository and actively participating in discussions, responding to questions, bug reports, and feature requests. Your engagement is appreciated!
36 | 
37 | <!-- prettier-ignore-start -->
38 | [egghead]: https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github
39 | [issues]: https://github.com/feedzai/AutoVizuA11y/issues
40 | <!-- prettier-ignore-end -->
41 | 


--------------------------------------------------------------------------------
/cypress/e2e/internationalization.cy.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-undef */
 2 | describe("Internationalization Tests", () => {
 3 | 	it("should use default English (en-GB) language when internationalization property is empty", () => {
 4 | 		cy.visit("/");
 5 | 		cy.injectAxe();
 6 | 		cy.findByTestId("manual-descriptions-option").click();
 7 | 		cy.wait(500);
 8 | 		cy.findAllByTestId("a11y_desc").first().focus();
 9 | 		cy.focused().type("{alt}k");
10 | 		cy.findAllByTestId("a11y-chart-alert").first().should("contain.text", "The average is");
11 | 		cy.focused().type("?");
12 | 		cy.get("dialog").should("be.visible");
13 | 		cy.get("dialog h2").should("contain.text", "Shortcut guide");
14 | 		cy.focused().type("{esc}");
15 | 		cy.checkA11y();
16 | 	});
17 | 
18 | 	it("should use default Portuguese (pt-PT) language when language property is pt-PT", () => {
19 | 		cy.visit("/");
20 | 		cy.injectAxe();
21 | 		cy.findByTestId("manual-descriptions-option").click();
22 | 		cy.wait(500);
23 | 		cy.findAllByTestId("a11y_desc").first().focus().tab().tab();
24 | 		cy.focused().type("{alt}k");
25 | 		cy.findAllByTestId("a11y-chart-alert").eq(2).should("contain.text", "A média é");
26 | 		cy.focused().type("?");
27 | 		cy.get("dialog").should("be.visible");
28 | 		cy.get("dialog h2").should("contain.text", "Guia de atalhos");
29 | 		cy.checkA11y();
30 | 	});
31 | 
32 | 	it("should use an overriten en-GB string", () => {
33 | 		cy.visit("/");
34 | 		cy.injectAxe();
35 | 		cy.findByTestId("manual-descriptions-option").click();
36 | 		cy.wait(500);
37 | 		cy.findAllByTestId("a11y_desc").first().focus().tab().tab();
38 | 		cy.focused().type("?");
39 | 		cy.get("dialog").should("be.visible");
40 | 		cy.get("dialog h2").should("contain.text", "Overwritten Shortcut guide title");
41 | 		cy.checkA11y();
42 | 	});
43 | });
44 | 


--------------------------------------------------------------------------------
/examples/src/Options.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Card from "@mui/material/Card";
 3 | import CardContent from "@mui/material/CardContent";
 4 | import { CardActionArea } from "@mui/material";
 5 | import "./assets/style/Options.css";
 6 | import Typography from "@mui/material/Typography";
 7 | 
 8 | const Options = ({ setAutomatic, setManual }) => {
 9 | 	const automaticChosen = () => {
10 | 		setAutomatic(true);
11 | 	};
12 | 	const manualChosen = () => {
13 | 		setManual(true);
14 | 	};
15 | 	return (
16 | 		<>
17 | 			<div id="cardContainer">
18 | 				<Card sx={{ maxWidth: 400 }}>
19 | 					<CardActionArea onClick={automaticChosen} data-testid="automatic-descriptions-option">
20 | 						<CardContent>
21 | 							<h2>Option A</h2> <h3>Automatic Descriptions</h3>
22 | 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
23 | 								The descriptions for each chart are generated by an OpenAI model or one accessible
24 | 								via an OpenAI-compatible API. Because of that,{" "}
25 | 								<b>an OpenAI or OpenAI-compatible API key is needed.</b>
26 | 							</Typography>
27 | 						</CardContent>
28 | 					</CardActionArea>
29 | 				</Card>
30 | 				<Card sx={{ maxWidth: 400 }}>
31 | 					<CardActionArea onClick={manualChosen} data-testid="manual-descriptions-option">
32 | 						<CardContent>
33 | 							<h2>Option B</h2>
34 | 							<h3>Manual Descriptions</h3>
35 | 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
36 | 								The descriptions for each chart were previously generated using an OpenAI model.
37 | 								They were then manually added to each chart.{" "}
38 | 								<b>No OpenAI or OpenAI-compatible API key is needed.</b>
39 | 							</Typography>
40 | 						</CardContent>
41 | 					</CardActionArea>
42 | 				</Card>
43 | 			</div>
44 | 		</>
45 | 	);
46 | };
47 | export default Options;
48 | 


--------------------------------------------------------------------------------
/src/utils/arrayConverter.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | /**
 9 |  * Converts the data object into an array with only the numerical values.
10 |  *
11 |  * @export
12 |  * @template T
13 |  * @param {T[]} data - The array of data objects to convert.
14 |  * @param {keyof T} insight - The key of the numerical value to extract.
15 |  * @return {Promise<number[]>} Promise resolving to an array with numerical values.
16 |  * @throws {Error} If the insight key does not exist in the data objects or if the value is not a number.
17 |  */
18 | export function arrayConverter<T extends Record<string, unknown>>(
19 | 	data: T[],
20 | 	insight: keyof T,
21 | ): number[] {
22 | 	try {
23 | 		if (insight === "") {
24 | 			return [];
25 | 		}
26 | 		if (!insight || typeof insight !== "string") {
27 | 			throw new Error("Invalid insight key provided");
28 | 		}
29 | 		return data.map((item, index) => {
30 | 			const value = item[insight];
31 | 			if (typeof value !== "number") {
32 | 				throw new Error(`Invalid value at index ${index}: expected number, got ${typeof value}`);
33 | 			}
34 | 			return value;
35 | 		});
36 | 	} catch (error) {
37 | 		console.error("Error in arrayConverter:", error);
38 | 		throw error;
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { resolve } from "node:path";
 9 | import { defineConfig } from "vite";
10 | import dts from "vite-plugin-dts";
11 | import tsconfigPaths from "vite-tsconfig-paths";
12 | import react from "@vitejs/plugin-react-swc";
13 | import { libInjectCss } from "vite-plugin-lib-inject-css";
14 | 
15 | // https://vitejs.dev/config/
16 | export default defineConfig({
17 | 	plugins: [
18 | 		react(),
19 | 		dts({
20 | 			insertTypesEntry: true,
21 | 		}),
22 | 		tsconfigPaths(),
23 | 		libInjectCss(),
24 | 	],
25 | 	build: {
26 | 		lib: {
27 | 			entry: resolve(__dirname, "src/index.ts"),
28 | 			name: "AutoVizuA11y",
29 | 			formats: ["es", "umd"],
30 | 			fileName: (format) => {
31 | 				const OUTPUT: Partial<Record<typeof format, string>> = {
32 | 					es: "index.es.mjs",
33 | 					umd: "index.umd.cjs",
34 | 				};
35 | 
36 | 				return OUTPUT[format] ?? "index.umd.cjs";
37 | 			},
38 | 		},
39 | 		rollupOptions: {
40 | 			external: ["react", "react-dom", "react/jsx-runtime"],
41 | 			output: {
42 | 				globals: {
43 | 					react: "React",
44 | 					"react-dom": "ReactDOM",
45 | 					"react/jsx-runtime": "react/jsx-runtime",
46 | 					"@feedzai/js-utilities": "JSUtilities",
47 | 				},
48 | 			},
49 | 		},
50 | 	},
51 | });
52 | 


--------------------------------------------------------------------------------
/src/utils/processData.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { arrayConverter } from "./arrayConverter";
 9 | import { insightsCalculator } from "./insightsCalculator";
10 | 
11 | interface ProcessDataProps {
12 | 	data: Record<string, unknown>[];
13 | 	validatedInsights: string;
14 | 	setArrayConverted: (data: number[]) => void;
15 | 	setInsightsArray: (data: number[]) => void;
16 | }
17 | 
18 | /**
19 |  * Processes the data, by setting the values of the calculated insights
20 |  *
21 |  * @export
22 |  * @param {Record<string, unknown>[]} data - Chart data.
23 |  * @param {string} validatedInsights - Data key from which insights should be calculated.
24 |  * @param {Function} setArrayConverted - Setter function for the converted array of values.
25 |  * @param {Function} setInsightsArray - Setter function for the converted array of insights.
26 |  * @return {number} Average of the data values.
27 |  */
28 | 
29 | export function processData({
30 | 	data,
31 | 	validatedInsights,
32 | 	setArrayConverted,
33 | 	setInsightsArray,
34 | }: ProcessDataProps) {
35 | 	const dataConverted = arrayConverter(data, validatedInsights);
36 | 	setArrayConverted(dataConverted);
37 | 
38 | 	let average = 0;
39 | 	if (validatedInsights !== "") {
40 | 		const insightsArrayAux = insightsCalculator(dataConverted);
41 | 		setInsightsArray(insightsArrayAux);
42 | 
43 | 		average = insightsArrayAux[1];
44 | 	}
45 | 
46 | 	return average;
47 | }
48 | 


--------------------------------------------------------------------------------
/examples/src/components/custom_shortcut_guide/components/CustomShortcutGuide.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "../../../../../src/constants";
 9 | import React from "react";
10 | import { CustomShortcutGuideDescription } from "./CustomGuideDescription";
11 | import { CustomShortcutGuideHeader } from "./CustomGuideHeader";
12 | import { CustomShortcutGuideBody } from "./CustomShortcutGuideBody";
13 | 
14 | interface CustomShortcutGuideProps {
15 | 	dialogRef: React.RefObject<HTMLDialogElement>;
16 | }
17 | 
18 | /**
19 |  * Component that renders the list of all AutoVizuA11y shortcuts.
20 |  *
21 |  * @return Shortcut guide.
22 |  */
23 | const CustomShortcutGuide = ({ dialogRef }: CustomShortcutGuideProps): JSX.Element => {
24 | 	const handleCloseDialog = () => {
25 | 		const dialog = dialogRef.current;
26 | 		if (dialog) {
27 | 			dialog.close();
28 | 		}
29 | 	};
30 | 
31 | 	return (
32 | 		<div
33 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuide}
34 | 			data-testid={"a11y-custom-shortcut-guide"}
35 | 		>
36 | 			<CustomShortcutGuideDescription />
37 | 			<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideContainer}>
38 | 				<CustomShortcutGuideHeader onClose={handleCloseDialog} />
39 | 				<hr className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideBreak} />
40 | 				<CustomShortcutGuideBody />
41 | 			</div>
42 | 		</div>
43 | 	);
44 | };
45 | 
46 | export default CustomShortcutGuide;
47 | 


--------------------------------------------------------------------------------
/src/components/shortcut_guide/components/NativeShortcutGuide.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import "../../../assets/style/NativeShortcutGuide.css";
 9 | 
10 | import * as constants from "../../../constants";
11 | import { ShortcutGuideDescription } from "./NativeGuideDescription";
12 | import { ShortcutGuideHeader } from "./NativeGuideHeader";
13 | import { ShortcutGuideBody } from "./NativeShortcutGuideBody";
14 | import type { TFunction } from "i18next";
15 | 
16 | interface NativeShortcutGuideProps {
17 | 	dialogRef: React.RefObject<HTMLDialogElement>;
18 | 	t: TFunction;
19 | }
20 | 
21 | /**
22 |  * Component that renders the list of all AutoVizuA11y shortcuts.
23 |  *
24 |  * @return Shortcut guide.
25 |  */
26 | export const NativeShortcutGuide = ({ dialogRef, t }: NativeShortcutGuideProps): JSX.Element => {
27 | 	const handleCloseDialog = () => {
28 | 		const dialog = dialogRef.current;
29 | 		if (dialog) {
30 | 			dialog.close();
31 | 		}
32 | 	};
33 | 
34 | 	return (
35 | 		<div
36 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuide}
37 | 			data-testid={"a11y-native-shortcut-guide"}
38 | 			aria-label={t("sg_title")}
39 | 		>
40 | 			<ShortcutGuideDescription t={t} />
41 | 			<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideContainer}>
42 | 				<ShortcutGuideHeader onClose={handleCloseDialog} t={t} />
43 | 				<hr className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideBreak} />
44 | 				<ShortcutGuideBody t={t} />
45 | 			</div>
46 | 		</div>
47 | 	);
48 | };
49 | 


--------------------------------------------------------------------------------
/src/components/shortcut_guide/components/NativeShortcutGuideSection.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { Section } from "../../../assets/data/GuideData";
 9 | import * as constants from "../../../constants";
10 | import type { TFunction } from "i18next";
11 | 
12 | interface ShortcutGuideSectionProps {
13 | 	section: Section;
14 | 	sectionIndex: number;
15 | 	t: TFunction;
16 | }
17 | 
18 | export const ShortcutGuideSection = ({ section, sectionIndex, t }: ShortcutGuideSectionProps) => {
19 | 	return (
20 | 		<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideSection}>
21 | 			<h3
22 | 				className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideListTitle}
23 | 				id={`listHeader${sectionIndex}`}
24 | 				aria-label={`Section: ${t(section.title)}`}
25 | 			>
26 | 				{t(section.title)}
27 | 			</h3>
28 | 			<dl
29 | 				className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideList}
30 | 				aria-labelledby={`listHeader${sectionIndex}`}
31 | 			>
32 | 				{section.shortcuts.map((shortcut, shortcutIndex) => (
33 | 					<div
34 | 						key={shortcutIndex}
35 | 						className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideRow}
36 | 						tabIndex={0}
37 | 					>
38 | 						<dt className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideCellShortcut}>
39 | 							{shortcut.keys}
40 | 						</dt>
41 | 						<dd className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideCellExplanation}>
42 | 							{t(shortcut.description)}
43 | 						</dd>
44 | 					</div>
45 | 				))}
46 | 			</dl>
47 | 		</div>
48 | 	);
49 | };
50 | 


--------------------------------------------------------------------------------
/examples/src/components/custom_shortcut_guide/components/CustomShortcutGuideSection.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { Section } from "../../../../../src/assets/data/GuideData";
 9 | import * as constants from "../../../../../src/constants";
10 | import React from "react";
11 | 
12 | interface CustomShortcutGuideSectionProps {
13 | 	section: Section;
14 | 	sectionIndex: number;
15 | }
16 | 
17 | export const CustomShortcutGuideSection = ({
18 | 	section,
19 | 	sectionIndex,
20 | }: CustomShortcutGuideSectionProps) => (
21 | 	<div className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideSection}>
22 | 		<h3
23 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideListTitle}
24 | 			id={`listHeader${sectionIndex}`}
25 | 			aria-label={`Section: ${section.title}`}
26 | 		>
27 | 			{section.title}
28 | 		</h3>
29 | 		<div
30 | 			className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideList}
31 | 			aria-labelledby={`listHeader${sectionIndex}`}
32 | 		>
33 | 			{section.shortcuts.map((shortcut, shortcutIndex) => (
34 | 				<dl
35 | 					key={shortcutIndex}
36 | 					className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideRow}
37 | 					aria-label={`${shortcut.description}: ${shortcut.keys}`}
38 | 					tabIndex={0}
39 | 				>
40 | 					<dt className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideCellShortcut}>
41 | 						{shortcut.keys}
42 | 					</dt>
43 | 					<dd className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideCellExplanation}>
44 | 						{shortcut.description}
45 | 					</dd>
46 | 				</dl>
47 | 			))}
48 | 		</div>
49 | 	</div>
50 | );
51 | 


--------------------------------------------------------------------------------
/src/components/descriptions/DescriptionsKeyHandler.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { template } from "@feedzai/js-utilities";
 9 | 
10 | type AutoDescriptionsProps = {
11 | 	dynamicDescriptions?: boolean;
12 | 	apiKey: string;
13 | 	model?: string;
14 | 	temperature?: number;
15 | };
16 | 
17 | interface DescriptionsKeyHandlerParams {
18 | 	chartRef: React.RefObject<HTMLElement>;
19 | 	setDescriptionContent: (value: string) => void;
20 | 	type: string;
21 | 	descs: string[];
22 | 	title: string;
23 | 	autoDescriptions?: AutoDescriptionsProps;
24 | 	event?: React.KeyboardEvent;
25 | }
26 | 
27 | /**
28 |  * Handles the longer and shorter description change when Alt (option) + B or Alt (option) + S are pressed, respectively.
29 |  *
30 |  * @export
31 |  */
32 | export function descriptionsKeyHandler({
33 | 	chartRef,
34 | 	setDescriptionContent,
35 | 	type,
36 | 	descs,
37 | 	title,
38 | 	autoDescriptions,
39 | 	event,
40 | }: DescriptionsKeyHandlerParams): void {
41 | 	if (!chartRef.current) return;
42 | 
43 | 	const isItAutomatic = autoDescriptions ? "Automatic description: " : "";
44 | 
45 | 	const fullTitle = template("{{title}}, {{type}}. {{isItAutomatic}}", {
46 | 		title,
47 | 		type,
48 | 		isItAutomatic,
49 | 	});
50 | 	if (!event) {
51 | 		setDescriptionContent(fullTitle + descs[1]);
52 | 		return;
53 | 	}
54 | 	if (event.altKey) {
55 | 		switch (event.code) {
56 | 			case "KeyS":
57 | 				setDescriptionContent(fullTitle + descs[1]);
58 | 				break;
59 | 			case "KeyB":
60 | 				setDescriptionContent(fullTitle + descs[0]);
61 | 				break;
62 | 		}
63 | 	}
64 | }
65 | 


--------------------------------------------------------------------------------
/src/utils/handleFirstFocus.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import React from "react";
 9 | import { wait, getLSItem, setLSItem } from "@feedzai/js-utilities";
10 | 
11 | import * as constants from "./../constants";
12 | import { TFunction } from "i18next";
13 | 
14 | interface HandleFirstFocusProps {
15 | 	alertDiv: React.ReactNode | null;
16 | 	chartRef: React.RefObject<HTMLDivElement>;
17 | 	alertDivRef: React.RefObject<HTMLElement>;
18 | 	t: TFunction<"translation", undefined>;
19 | }
20 | 
21 | /**
22 |  * Handles the first focus of an AutoVizuA11y chart.
23 |  *
24 |  * @export
25 |  * @param {React.ReactNode | null} alertDiv - Div where the alerts are set.
26 |  * @param {React.RefObject<HTMLDivElement>} chartRef - React reference of the chart.
27 |  * @param {React.RefObject<HTMLElement>} alertDivRef - React reference of the alertDiv.
28 |  * @param {TFunction<"translation", undefined>} t - Translation function from useTranslation hook.
29 |  */
30 | export async function handleFirstFocus({
31 | 	alertDiv,
32 | 	chartRef,
33 | 	alertDivRef,
34 | 	t,
35 | }: HandleFirstFocusProps) {
36 | 	const chart = chartRef.current;
37 | 	const alertElement = alertDivRef.current;
38 | 	if (!chart || !alertElement) {
39 | 		console.warn("Chart or alert element not found");
40 | 		return;
41 | 	}
42 | 	chart.classList.add(constants.FOCUS_CLASS);
43 | 	const toolTutorial = getLSItem(constants.TOOL_TUTORIAL_KEY);
44 | 	if (toolTutorial === "true" && alertDiv) {
45 | 		alertElement.textContent = t("alert");
46 | 		await wait(constants.ALERT_DURATION);
47 | 		alertElement.textContent = "\u00A0";
48 | 		setLSItem(constants.TOOL_TUTORIAL_KEY, "false");
49 | 	}
50 | }
51 | 


--------------------------------------------------------------------------------
/src/components/navigation/Skip.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import React from "react";
 9 | import { getElements } from "../../utils/getElements";
10 | 
11 | interface SkipParams {
12 | 	event: React.KeyboardEvent;
13 | 	chartRef: React.RefObject<HTMLElement>;
14 | 	selectorType: {
15 | 		element?: string;
16 | 		className?: string;
17 | 	};
18 | 	selectedSeries: string;
19 | }
20 | 
21 | /**
22 |  * Enables the navigation to the end/beginning of a chart.
23 |  *
24 |  * @param {SkipParams} params - The parameters for the skip function.
25 |  */
26 | export function skip({ event, chartRef, selectorType, selectedSeries }: SkipParams): void {
27 | 	const elements = getElements({ chartRef, selectorType, selectedSeries });
28 | 	const activeElement = document.activeElement as HTMLElement | null;
29 | 
30 | 	if (!activeElement || !elements.includes(activeElement)) {
31 | 		return;
32 | 	}
33 | 	const { nativeEvent } = event;
34 | 
35 | 	if (isSkipToBeginning(nativeEvent)) {
36 | 		nativeEvent.preventDefault();
37 | 		elements[0]?.focus();
38 | 	} else if (isSkipToEnd(nativeEvent)) {
39 | 		nativeEvent.preventDefault();
40 | 		elements[elements.length - 1]?.focus();
41 | 	}
42 | }
43 | 
44 | /**
45 |  * Checks if the Q or Home keys are being pressed.
46 |  */
47 | function isSkipToBeginning(nativeEvent: Event): boolean {
48 | 	return (
49 | 		nativeEvent instanceof KeyboardEvent &&
50 | 		((nativeEvent.altKey && nativeEvent.code === "KeyQ") || nativeEvent.code === "Home")
51 | 	);
52 | }
53 | 
54 | /**
55 |  * Checks if the W or End keys are being pressed.
56 |  */
57 | function isSkipToEnd(nativeEvent: Event): boolean {
58 | 	return (
59 | 		nativeEvent instanceof KeyboardEvent &&
60 | 		((nativeEvent.altKey && nativeEvent.code === "KeyW") || nativeEvent.code === "End")
61 | 	);
62 | }
63 | 


--------------------------------------------------------------------------------
/src/utils/getElements.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | interface SelectorType {
 9 | 	element?: string;
10 | 	className?: string;
11 | }
12 | 
13 | interface GetElementsParams {
14 | 	chartRef: React.RefObject<HTMLElement>;
15 | 	selectorType?: SelectorType;
16 | 	selectedSeries?: string | string[];
17 | }
18 | 
19 | /**
20 |  * Get elements based on selector type and selected series.
21 |  *
22 |  * @export
23 |  * @param {Object} params - The parameters for getting elements.
24 |  * @param {React.RefObject<HTMLElement>} params.chartRef - The container to search for elements.
25 |  * @param {SelectorType} [params.selectorType] - Type of selector to use.
26 |  * @param {string | string[]} [params.selectedSeries] - Selected series to filter elements.
27 |  * @return {HTMLElement[]} Array with HTML elements representing the chart data.
28 |  */
29 | export function getElements({
30 | 	chartRef,
31 | 	selectorType,
32 | 	selectedSeries,
33 | }: GetElementsParams): HTMLElement[] {
34 | 	if (!chartRef.current) return [];
35 | 
36 | 	let elements: NodeListOf<HTMLElement> | HTMLCollectionOf<Element>;
37 | 
38 | 	if (selectorType?.element) {
39 | 		elements = chartRef.current.querySelectorAll(selectorType.element);
40 | 	} else if (selectorType?.className) {
41 | 		elements = chartRef.current.getElementsByClassName(selectorType.className);
42 | 	} else {
43 | 		console.warn("No valid selector type provided");
44 | 		return [];
45 | 	}
46 | 
47 | 	const elementsArray = Array.from(elements) as HTMLElement[];
48 | 
49 | 	if (!selectedSeries || (Array.isArray(selectedSeries) && selectedSeries.length === 0)) {
50 | 		return elementsArray;
51 | 	}
52 | 
53 | 	const seriesArray = Array.isArray(selectedSeries) ? selectedSeries : [selectedSeries];
54 | 
55 | 	return elementsArray.filter((element) =>
56 | 		seriesArray.some((series) => element.classList.contains(series)),
57 | 	);
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/shortcut_guide/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { guideKeyHandler } from "../navigation";
 9 | import * as constants from "../../constants";
10 | import { NativeShortcutGuide } from "./components/NativeShortcutGuide";
11 | import { cloneValidElement } from "@feedzai/js-utilities";
12 | import type { TFunction } from "i18next";
13 | 
14 | interface ShortcutGuideContainerProps {
15 | 	shortcutGuide: React.ReactElement | undefined;
16 | 	shortcutGuideRef: React.RefObject<HTMLDialogElement>;
17 | 	setIsShortcutGuideOpen: (bool: boolean) => void;
18 | 	t: TFunction;
19 | }
20 | 
21 | /**
22 |  * Component that renders the a ShortcutGuide.
23 |  *
24 |  * @export
25 |  * @param {JSX.Element | undefined} shortcutGuide - A custom ShortcutGuide.
26 |  * @param {React.RefObject<HTMLDialogElement>} shortcutGuideRef - The React reference to this shortcut guide.
27 |  * @param {(bool: boolean) => void} setIsShortcutGuideOpen - Setter function that deals with the logic of opening the guide.
28 |  * @return Either the native ShortcutGuide or a custom one.
29 |  */
30 | export const ShortcutGuideContainer = ({
31 | 	shortcutGuide,
32 | 	shortcutGuideRef,
33 | 	setIsShortcutGuideOpen,
34 | 	t,
35 | }: ShortcutGuideContainerProps): JSX.Element => {
36 | 	return (
37 | 		<dialog
38 | 			ref={shortcutGuideRef}
39 | 			onKeyDown={(event) => {
40 | 				guideKeyHandler({ event, shortcutGuideRef, setIsShortcutGuideOpen });
41 | 			}}
42 | 			aria-describedby={constants.SHORTCUTGUIDE_ID.shortcutGuideDescription}
43 | 			aria-labelledby={constants.SHORTCUTGUIDE_ID.shortcutGuideTitle}
44 | 			className={constants.AUTOVIZUA11Y_CLASSES.a11yNavGuide}
45 | 			onClose={() => {
46 | 				setIsShortcutGuideOpen(false);
47 | 			}}
48 | 		>
49 | 			{cloneValidElement(shortcutGuide, { dialogRef: shortcutGuideRef, t }) ?? (
50 | 				<NativeShortcutGuide dialogRef={shortcutGuideRef} t={t} />
51 | 			)}
52 | 		</dialog>
53 | 	);
54 | };
55 | 


--------------------------------------------------------------------------------
/examples/src/Homepage.jsx:
--------------------------------------------------------------------------------
 1 | import "./assets/style/Homepage.css";
 2 | import { useState } from "react";
 3 | import Options from "./Options";
 4 | import KeyRequest from "./KeyRequest";
 5 | import CardGrid from "./components/automatic/ChartGrid";
 6 | import CardGridManual from "./components/manual/ChartGridManual";
 7 | 
 8 | function Homepage() {
 9 | 	const [apiKey, setApiKey] = useState("");
10 | 	const [model, setModel] = useState("gpt-3.5-turbo");
11 | 	const [baseUrl, setBaseUrl] = useState("https://api.openai.com/v1/");
12 | 	const [isValid, setIsValid] = useState(false);
13 | 	const [automatic, setAutomatic] = useState(false);
14 | 	const [manual, setManual] = useState(false);
15 | 	const [home, setHome] = useState(true);
16 | 
17 | 	const goBack = () => {
18 | 		setHome(true);
19 | 		setAutomatic(false);
20 | 		setManual(false);
21 | 		setIsValid(false);
22 | 	};
23 | 
24 | 	return (
25 | 		<main className="Homepage" role="main">
26 | 			<h1>AutoVizuA11y — examples</h1>
27 | 			{home === false ? (
28 | 				<button onClick={goBack} tabIndex={0}>
29 | 					Go back
30 | 				</button>
31 | 			) : (
32 | 				<p>
33 | 					{" "}
34 | 					Choose one of the options to access a gallery of charts built using{" "}
35 | 					<a href="https://github.com/feedzai/AutoVizuA11y" target="_blank">
36 | 						AutoVizuA11y
37 | 					</a>{" "}
38 | 				</p>
39 | 			)}
40 | 			{isValid && apiKey !== "" ? (
41 | 				<>
42 | 					<div style={{ marginTop: 20 }}>
43 | 						<CardGrid apiKey={apiKey} model={model} baseUrl={baseUrl} setHome={setHome} />
44 | 					</div>
45 | 					<p>
46 | 						Data from{" "}
47 | 						<a href="https://data.un.org/" target="_blank">
48 | 							UN Data
49 | 						</a>
50 | 					</p>
51 | 				</>
52 | 			) : manual ? (
53 | 				<>
54 | 					<div style={{ marginTop: 20 }}>
55 | 						<CardGridManual setHome={setHome} />
56 | 					</div>
57 | 					<p>
58 | 						Data from{" "}
59 | 						<a href="https://data.un.org/" target="_blank">
60 | 							UN Data
61 | 						</a>
62 | 					</p>
63 | 				</>
64 | 			) : automatic ? (
65 | 				<div style={{ margin: 20 }}>
66 | 					<KeyRequest
67 | 						apiKey={apiKey}
68 | 						setApiKey={setApiKey}
69 | 						model={model}
70 | 						setModel={setModel}
71 | 						baseUrl={baseUrl}
72 | 						setBaseUrl={setBaseUrl}
73 | 						isValid={isValid}
74 | 						setIsValid={setIsValid}
75 | 						home={home}
76 | 						setHome={setHome}
77 | 						setAutomatic={setAutomatic}
78 | 					/>
79 | 				</div>
80 | 			) : home ? (
81 | 				<Options setAutomatic={setAutomatic} setManual={setManual} />
82 | 			) : (
83 | 				<p></p>
84 | 			)}
85 | 		</main>
86 | 	);
87 | }
88 | 
89 | export default Homepage;
90 | 


--------------------------------------------------------------------------------
/src/components/insights/MessageGenerator.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import { TFunction } from "i18next";
 9 | import { getOrdinalNumber, median, rounding } from "../../utils";
10 | 
11 | /**
12 |  * Creates the message regarding the insight requested.
13 |  */
14 | export function messageInsights(
15 | 	code: string,
16 | 	insight: number,
17 | 	focusedData: number,
18 | 	t: TFunction<"translation", undefined>,
19 | ): string {
20 | 	const difference = Math.abs(insight - focusedData);
21 | 	const roundedDifference = rounding(difference);
22 | 	if (insight > focusedData) {
23 | 		return t("difference_below", { difference: roundedDifference, code: code });
24 | 	}
25 | 	if (insight < focusedData) {
26 | 		return t("difference_above", { difference: roundedDifference, code: code });
27 | 	}
28 | 	return t("difference_same", { code: code });
29 | }
30 | /**
31 |  * Creates the message regarding the comparison between a data element and all others.
32 |  */
33 | export function messageOverall(
34 | 	arrayConverted: number[],
35 | 	focusedData: number,
36 | 	t: TFunction<"translation", undefined>,
37 | ): string {
38 | 	const dataSuperConverted = trimAndSort(arrayConverted);
39 | 	const positionValue = dataSuperConverted.indexOf(focusedData);
40 | 	const med = median(dataSuperConverted);
41 | 	const median_message = t("median_message");
42 | 	if (focusedData === med) {
43 | 		return median_message;
44 | 	}
45 | 	if (focusedData > med) {
46 | 		const rank = dataSuperConverted.length - positionValue;
47 | 		return t("highest_message", { ordinalNumber: getOrdinalNumber(rank) });
48 | 	}
49 | 	if (focusedData < med) {
50 | 		const rank = positionValue + 1;
51 | 		return t("lowest_message", { ordinalNumber: getOrdinalNumber(rank) });
52 | 	}
53 | 	return "";
54 | }
55 | /**
56 |  * Trims and sorts an array of numbers.
57 |  */
58 | function trimAndSort(arrayConverted: number[]): number[] {
59 | 	return Array.from(new Set(arrayConverted)).sort((a, b) => a - b);
60 | }
61 | 


--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | const DECIMAL_PLACES = 2;
 9 | 
10 | export const TIME_TO_WAIT_BEFORE_HANDLING_DESCRIPTIONS = 500;
11 | export const OPENAI_MODEL = "gpt-3.5-turbo";
12 | export const OPENAI_BASE_URL = "https://api.openai.com/v1/";
13 | export const OPENAI_ENDPOINT = "chat/completions";
14 | export const TIMEOUT_DURATION = 1000;
15 | export const DESC_CLASS = "a11y_desc";
16 | export const ROUNDING_FACTOR = 10 ** DECIMAL_PLACES;
17 | export const ATTRIBUTES_TO_REMOVE = ["aria-describedby", "aria-labelledby"];
18 | export const TABINDEX_ZERO = '[tabindex="0"]';
19 | export const TOOL_TUTORIAL_KEY = "toolTutorial";
20 | export const FOCUS_CLASS = "focused";
21 | export const ALERT_DURATION = 1000;
22 | export const AUTOVIZUA11Y_CLASSES = {
23 | 	alertDiv: "a11y_alert visually-hidden",
24 | 	a11yWrapper: "a11y_wrapper",
25 | 	a11yChart: "a11y_chart",
26 | 	a11yDesc: "a11y_desc visually-hidden",
27 | 	a11yNavGuide: "a11y_nav_guide",
28 | };
29 | export const SHORTCUTGUIDE_CLASSES = {
30 | 	shortcutGuide: "shortcut-guide",
31 | 	shortcutGuideContainer: "shortcut-guide__container",
32 | 	shortcutGuideHeader: "shortcut-guide__header",
33 | 	shortcutGuideTitle: "shortcut-guide__title",
34 | 	shortcutGuideActionLabel: "shortcut-guide__action-label",
35 | 	shortcutGuideButtonClose: "shortcut-guide__button-close",
36 | 	shortcutGuideBreak: "shortcut-guide__break",
37 | 	shortcutGuideBody: "shortcut-guide__body",
38 | 	shortcutGuideSection: "shortcut-guide__section",
39 | 	shortcutGuideListTitle: "shortcut-guide__list--title",
40 | 	shortcutGuideRow: "shortcut-guide__row",
41 | 	shortcutGuideCellShortcut: "shortcut-guide__cell shortcut-guide__cell--shortcut",
42 | 	shortcutGuideCellExplanation: "shortcut-guide__cell shortcut-guide__cell--explanation",
43 | 	shortcutGuideDescription: "visually-hidden",
44 | 	shortcutGuideList: "shortcut-guide__list",
45 | };
46 | export const SHORTCUTGUIDE_ID = {
47 | 	shortcutGuideDescription: "shortcut-guide__description",
48 | 	shortcutGuideTitle: "shortcut-guide__title",
49 | };
50 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | All notable changes to this project will be documented in this file.
 3 | 
 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 6 | 
 7 | ## Unreleased
 8 | 
 9 | ## 3.0.3 - 2025-12-03
10 | ### Added
11 | - Fixed vulnerable dependency
12 | 
13 | ## 3.0.2 - 2025-12-03
14 | ### Added
15 | - Fixed multiple vulnerable dependencies
16 | 
17 | ## 3.0.1 - 2025-10-06
18 | ### Added
19 | - Fixed vulnerable dependency
20 | 
21 | ## 3.0.0 - 2025-09-15
22 | ### Added
23 | - Implemented i18n alternatives as the new "internationalization" property
24 | - Fixed tests / github pipeline errors
25 | - Adapted the ShortcutGuide to vary between "Alt" and "option" depending on the OS
26 | - Added support for OpenAI API-compatible providers via the new `baseUrl` prop
27 | - Added new i18n Cypress tests
28 | - Added Arrow Navigation to the ShortcutGuide
29 | 
30 | ### Changed
31 | - Replaced arrow symbols with text on the ShortcutGuide
32 | - Re-did ShortcutGuide `<dl>` structure
33 | - Moved the context prop to inside autoDescriptions
34 | 
35 | ## 2.0.4 - 2025-01-06
36 | ### Added
37 | - Fixed an issue where series values having spaces would invalidate class names
38 | 
39 | ## 2.0.3 - 2024-11-04
40 | ### Added
41 | - Adds missing types
42 | - Fixed the issue where components were not being properly exported
43 | 
44 | ## 2.0.2 - 2024-10-24
45 | ### Added
46 | - Dynamic changes in the data or DOM elements now trigger updates in the tool
47 | 
48 | ## 2.0.1 - 2024-10-08
49 | ### Added
50 | - Aligned native ShortcutGuide styling with the prototypes
51 | 
52 | ## 2.0.0 - 2024-10-04
53 | ### Added
54 | - Changed bundler from babel to vite
55 | - Replaced jest with cypress
56 | - Converted Javascript to Typescript
57 | - Added documentation
58 | - Revised the file structure
59 | - Refactored code with React best practices
60 | - Converted the ShortcutGuide into a prop, making it overridable and customizable
61 | 
62 | ## 1.0.3 - 2024-01-09
63 | ### Added
64 | - Remove unused dependency
65 | 
66 | ## 1.0.2 - 2023-12-06
67 | ### Added
68 | - Fixed the previously correction of the "series:" class attribution in the data elements that would break the navigation inside multi series charts
69 | 
70 | ## 1.0.1 - 2023-12-06
71 | ### Added
72 | - Corrected the attribution of the "series:" class in the data elements that would break the navigation inside multi series charts
73 | 
74 | ## 1.0.0 - 2023-11-14
75 | ### Added
76 | - Added support for charts with multiple encodings
77 | 
78 | ## 0.2.0 - 2023-11-02
79 | ### Added
80 | - Extended React compatibility to support projects with React >=16.14.0
81 | - Set up automatic semantic versioning
82 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/ChartGrid.jsx:
--------------------------------------------------------------------------------
 1 | import Card from "@mui/material/Card";
 2 | import CardContent from "@mui/material/CardContent";
 3 | import BarChart from "./BarChartAutomatic";
 4 | import SingleSeriesTimeline from "./SingleTimelineAutomatic";
 5 | import MultiSeriesTimeline from "./MultiTimelineAutomatic";
 6 | import Pie_ from "./PieAutomatic";
 7 | import Treemap_ from "./TreeMapAutomatic";
 8 | import Grid from "@mui/material/Grid";
 9 | import Heatmap from "./HeatmapAutomatic";
10 | import StackedBar from "./StackedBarAutomatic";
11 | import Scatterplot from "./ScatterplotAutomatic";
12 | 
13 | function CardGrid({ apiKey, model, baseUrl, setHome }) {
14 | 	setHome(false);
15 | 	return (
16 | 		<Grid container direction="row" spacing={2} justifyContent="center" alignItems="center">
17 | 			<Grid item>
18 | 				<Card sx={{ minWidth: 275, width: 450 }}>
19 | 					<CardContent>
20 | 						<BarChart apiKey={apiKey} model={model} baseUrl={baseUrl}></BarChart>
21 | 					</CardContent>
22 | 				</Card>
23 | 			</Grid>
24 | 			<Grid item>
25 | 				<Card sx={{ minWidth: 275, width: 450 }}>
26 | 					<CardContent>
27 | 						<SingleSeriesTimeline
28 | 							apiKey={apiKey}
29 | 							model={model}
30 | 							baseUrl={baseUrl}
31 | 						></SingleSeriesTimeline>
32 | 					</CardContent>
33 | 				</Card>
34 | 			</Grid>
35 | 			<Grid item>
36 | 				<Card sx={{ minWidth: 275, width: 450 }}>
37 | 					<CardContent>
38 | 						<MultiSeriesTimeline
39 | 							apiKey={apiKey}
40 | 							model={model}
41 | 							baseUrl={baseUrl}
42 | 						></MultiSeriesTimeline>
43 | 					</CardContent>
44 | 				</Card>
45 | 			</Grid>
46 | 
47 | 			<Grid item>
48 | 				<Card sx={{ minWidth: 275, width: 450 }}>
49 | 					<CardContent>
50 | 						<Pie_ apiKey={apiKey} model={model} baseUrl={baseUrl}></Pie_>
51 | 					</CardContent>
52 | 				</Card>
53 | 			</Grid>
54 | 			<Grid item>
55 | 				<Card sx={{ minWidth: 275, width: 450 }}>
56 | 					<CardContent>
57 | 						<Treemap_ apiKey={apiKey} model={model} baseUrl={baseUrl}></Treemap_>
58 | 					</CardContent>
59 | 				</Card>
60 | 			</Grid>
61 | 			<Grid item>
62 | 				<Card sx={{ minWidth: 275, width: 450 }}>
63 | 					<CardContent>
64 | 						<Heatmap apiKey={apiKey} model={model} baseUrl={baseUrl}></Heatmap>
65 | 					</CardContent>
66 | 				</Card>
67 | 			</Grid>
68 | 			<Grid item>
69 | 				<Card sx={{ minWidth: 275, width: 450 }}>
70 | 					<CardContent>
71 | 						<StackedBar apiKey={apiKey} model={model} baseUrl={baseUrl}></StackedBar>
72 | 					</CardContent>
73 | 				</Card>
74 | 			</Grid>
75 | 			<Grid item>
76 | 				<Card sx={{ minWidth: 275, width: 450 }}>
77 | 					<CardContent>
78 | 						<Scatterplot apiKey={apiKey} model={model} baseUrl={baseUrl}></Scatterplot>
79 | 					</CardContent>
80 | 				</Card>
81 | 			</Grid>
82 | 		</Grid>
83 | 	);
84 | }
85 | 
86 | export default CardGrid;
87 | 


--------------------------------------------------------------------------------
/src/components/navigation/AddAriaLabels.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | import { getElements } from "../../utils/getElements";
 8 | import { toSafeClassName } from "../../utils/toSafeClassname";
 9 | 
10 | type SelectorType = {
11 | 	element?: string;
12 | 	className?: string;
13 | };
14 | 
15 | interface AddAriaLabelsProps {
16 | 	chartRef: React.RefObject<HTMLElement>;
17 | 	selectorType: SelectorType;
18 | 	data: Record<string, unknown>[];
19 | 	descriptor?: string;
20 | 	multiSeries?: string;
21 | }
22 | 
23 | /**
24 |  * Sets a series of attributes on the retrieved DOM elements.
25 |  */
26 | function setElementAttributes(
27 | 	element: HTMLElement,
28 | 	item: Record<string, unknown>,
29 | 	descriptor: string,
30 | ): void {
31 | 	const ariaLabel = Object.values(item).join(", ");
32 | 	element.setAttribute("aria-label", ariaLabel);
33 | 	element.setAttribute("role", "graphics-symbol");
34 | 	element.setAttribute("aria-roledescription", descriptor);
35 | 	element.setAttribute("data-testid", "a11y-chart-element");
36 | }
37 | 
38 | function addSeriesClass(element: HTMLElement, seriesValue: string): void {
39 | 	const seriesClass = toSafeClassName(seriesValue);
40 | 	element.classList.add(`${seriesClass}`);
41 | }
42 | 
43 | /**
44 |  * Adds aria-labels to data elements inside a chart.
45 |  *
46 |  * @export
47 |  * @param {React.RefObject<HTMLElement>} chartRef - The React reference of the chart.
48 |  * @param {SelectorType} selectorType - The selector to be used when retrieving the data elements.
49 |  * @param {Record<string, string>[]} data - Chart data.
50 |  * @param {string} descriptor - Data descriptor.
51 |  * @param {string} multiSeries - Key in the data object that defines each series;.
52 |  */
53 | export function addAriaLabels({
54 | 	chartRef,
55 | 	selectorType,
56 | 	data,
57 | 	descriptor = "",
58 | 	multiSeries = "",
59 | }: AddAriaLabelsProps): void {
60 | 	if (!chartRef.current) return;
61 | 	const elements = getElements({ chartRef, selectorType });
62 | 
63 | 	data.forEach((item, i) => {
64 | 		const element = elements[i];
65 | 		if (!element) return;
66 | 		setElementAttributes(element, item, descriptor);
67 | 
68 | 		if (multiSeries) {
69 | 			const series = item[multiSeries] as string;
70 | 			addSeriesClass(element, series);
71 | 		}
72 | 	});
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/navigation/AddNavigation.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import React from "react";
 9 | import { getElements } from "../../utils/getElements";
10 | 
11 | interface SelectorType {
12 | 	element?: string;
13 | 	className?: string;
14 | }
15 | interface AddDataNavigationParams {
16 | 	chartRef: React.RefObject<HTMLElement>;
17 | 	selectorType?: SelectorType;
18 | 	selectedSeries?: string | string[];
19 | 	focusPoint?: HTMLElement | null;
20 | }
21 | 
22 | /**
23 |  * Adds navigation between data elements inside a chart.
24 |  *
25 |  * @param {Object} params - The parameters for adding data navigation.
26 |  * @param {React.RefObject<HTMLElement>} params.chartRef - Reference to the chart container.
27 |  * @param {SelectorType} [params.selectorType] - Type of selector to use for finding elements.
28 |  * @param {string | string[]} [params.selectedSeries] - Selected series to filter elements.
29 |  * @param {HTMLElement | null} [params.focusPoint] - Specific element to focus on.
30 |  */
31 | export function addDataNavigation({
32 | 	chartRef,
33 | 	selectorType,
34 | 	selectedSeries,
35 | 	focusPoint,
36 | }: AddDataNavigationParams): void {
37 | 	if (!chartRef.current) {
38 | 		console.warn("Chart reference is not available");
39 | 		return;
40 | 	}
41 | 
42 | 	const elements = getElements({ chartRef, selectorType, selectedSeries });
43 | 
44 | 	if (!elements.length) {
45 | 		console.warn("No elements found for navigation");
46 | 		return;
47 | 	}
48 | 
49 | 	addTabIndex(elements);
50 | 	focusFirstElement(elements, focusPoint);
51 | }
52 | 
53 | /**
54 |  * Adds a tabindex attribute to an array of HTML elements.
55 |  *
56 |  * @param {HTMLElement[]} elements - The elements to add tabindex to.
57 |  */
58 | function addTabIndex(elements: HTMLElement[]): void {
59 | 	elements.forEach((element) => {
60 | 		element.setAttribute("tabindex", "0");
61 | 	});
62 | }
63 | 
64 | /**
65 |  * Adds keyboard focus to a data element.
66 |  *
67 |  * @param {HTMLElement[]} elements - The array of elements to potentially focus.
68 |  * @param {HTMLElement | null} [focusPoint] - Specific element to focus on.
69 |  */
70 | function focusFirstElement(elements: HTMLElement[], focusPoint?: HTMLElement | null): void {
71 | 	if (focusPoint) {
72 | 		focusPoint.focus();
73 | 	} else if (elements.length > 0) {
74 | 		elements[0].focus();
75 | 	} else {
76 | 		console.warn("No elements available to focus");
77 | 	}
78 | }
79 | 


--------------------------------------------------------------------------------
/examples/src/KeyRequest.jsx:
--------------------------------------------------------------------------------
  1 | import Card from "@mui/material/Card";
  2 | import CardContent from "@mui/material/CardContent";
  3 | import Typography from "@mui/material/Typography";
  4 | import "./assets/style/Options.css";
  5 | 
  6 | const KeyRequest = ({
  7 | 	apiKey,
  8 | 	setApiKey,
  9 | 	model,
 10 | 	setModel,
 11 | 	baseUrl,
 12 | 	setBaseUrl,
 13 | 	setIsValid,
 14 | 	setHome,
 15 | }) => {
 16 | 	setHome(false);
 17 | 
 18 | 	const isValidOpenAiApiKey = (key) => {
 19 | 		return key.startsWith("sk-proj-");
 20 | 	};
 21 | 
 22 | 	const isOpenAiApi = (baseUrl) => {
 23 | 		const parsedBaseUrl = URL.parse(baseUrl);
 24 | 
 25 | 		if (parsedBaseUrl) {
 26 | 			return parsedBaseUrl.host === "api.openai.com";
 27 | 		}
 28 | 
 29 | 		return false;
 30 | 	};
 31 | 
 32 | 	const handleApiKeyChange = (e) => {
 33 | 		setApiKey(e.target.value);
 34 | 	};
 35 | 
 36 | 	const handleModelChange = (e) => {
 37 | 		setModel(e.target.value);
 38 | 	};
 39 | 
 40 | 	const handleBaseUrl = (e) => {
 41 | 		setBaseUrl(e.target.value);
 42 | 	};
 43 | 
 44 | 	const handleSubmit = (e) => {
 45 | 		e.preventDefault();
 46 | 
 47 | 		if (isOpenAiApi(baseUrl) && !isValidOpenAiApiKey(apiKey)) {
 48 | 			alert("The OpenAI API key should start with 'sk-proj-'.");
 49 | 			setIsValid(false);
 50 | 		} else {
 51 | 			setIsValid(true);
 52 | 		}
 53 | 	};
 54 | 
 55 | 	return (
 56 | 		<>
 57 | 			<div id="cardContainer">
 58 | 				<Card sx={{ maxWidth: 400 }}>
 59 | 					<CardContent>
 60 | 						<form onSubmit={handleSubmit}>
 61 | 							<h2>Option A</h2>
 62 | 							<h3>Automatic Descriptions</h3>
 63 | 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
 64 | 								Please provide an{" "}
 65 | 								<a href="https://platform.openai.com/account/api-keys" target="_blank">
 66 | 									OpenAI
 67 | 								</a>{" "}
 68 | 								or OpenAI-compatible API key (the key is not saved). <br></br>The OpenAI API key
 69 | 								should start with 'sk-proj-'.
 70 | 							</Typography>
 71 | 							<br />
 72 | 							<label>
 73 | 								API key:{" "}
 74 | 								<input
 75 | 									type="text"
 76 | 									required
 77 | 									placeholder="sk-proj-... OR ..."
 78 | 									value={apiKey}
 79 | 									onChange={handleApiKeyChange}
 80 | 								/>
 81 | 							</label>
 82 | 							<br />
 83 | 							<label>
 84 | 								Model: <input type="text" required value={model} onChange={handleModelChange} />
 85 | 							</label>
 86 | 							<br />
 87 | 							<label>
 88 | 								Base URL:{" "}
 89 | 								<input
 90 | 									type="url"
 91 | 									required
 92 | 									pattern="^https://.*|^http://localhost:\d+.*"
 93 | 									value={baseUrl}
 94 | 									onChange={handleBaseUrl}
 95 | 								/>
 96 | 							</label>
 97 | 							<br />
 98 | 							<button type="submit" tabIndex={0}>
 99 | 								Submit
100 | 							</button>
101 | 						</form>
102 | 						{apiKey.length > 0 && !isValidOpenAiApiKey(apiKey) && isOpenAiApi(baseUrl) && (
103 | 							<p style={{ color: "red" }} role="alert">
104 | 								Invalid OpenAI API key format.
105 | 							</p>
106 | 						)}
107 | 					</CardContent>
108 | 				</Card>
109 | 			</div>
110 | 		</>
111 | 	);
112 | };
113 | 
114 | export default KeyRequest;
115 | 


--------------------------------------------------------------------------------
/src/utils/maths.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import * as constants from "./../constants";
 9 | 
10 | /**
11 |  * Rounds a given number to two decimal places.
12 |  *
13 |  * @param {number} number - The number to round.
14 |  * @return {number} Rounded number.
15 |  */
16 | export function rounding(number: number): number {
17 | 	return Math.round(number * constants.ROUNDING_FACTOR) / constants.ROUNDING_FACTOR;
18 | }
19 | 
20 | /**
21 |  * Calculates the median value of an array of numbers.
22 |  *
23 |  * @param {number[]} arr - The array of numbers.
24 |  * @return {number} Median value.
25 |  */
26 | export function median(arr: number[]): number {
27 | 	if (arr.length === 0) return 0;
28 | 
29 | 	const sortedArr = [...arr].sort((a, b) => a - b);
30 | 	const mid = Math.floor(sortedArr.length / 2);
31 | 
32 | 	return sortedArr.length % 2 === 0 ? (sortedArr[mid - 1] + sortedArr[mid]) / 2 : sortedArr[mid];
33 | }
34 | 
35 | /**
36 |  * Transforms number to ordinal.
37 |  *
38 |  * @param {number} number - The number to transform.
39 |  * @return {string} Ordinal number.
40 |  */
41 | export function getOrdinalNumber(number: number): string {
42 | 	if (number === 1) return "the";
43 | 
44 | 	const suffixes = ["th", "st", "nd", "rd"];
45 | 	const lastTwoDigits = number % 100;
46 | 	const suffix =
47 | 		lastTwoDigits >= 11 && lastTwoDigits <= 13 ? suffixes[0] : suffixes[number % 10] || suffixes[0];
48 | 
49 | 	return `${number}${suffix}`;
50 | }
51 | 
52 | /**
53 |  * Calculates the sum of an array of numbers.
54 |  *
55 |  * @param {number[]} array - The array of numbers.
56 |  * @return {number} Sum of values.
57 |  */
58 | export function sum(array: number[]): number {
59 | 	return rounding(array.reduce((a, b) => a + b, 0));
60 | }
61 | 
62 | /**
63 |  * Calculates the average of an array of numbers.
64 |  *
65 |  * @param {number[]} array - The array of numbers.
66 |  * @return {number} Average value.
67 |  */
68 | export function avg(array: number[]): number {
69 | 	return array.length ? rounding(sum(array) / array.length) : 0;
70 | }
71 | 
72 | /**
73 |  * Calculates the max of an array of numbers.
74 |  *
75 |  * @param {number[]} array - The array of numbers.
76 |  * @return {number} Maximum value.
77 |  */
78 | export function max(array: number[]): number {
79 | 	return array.length ? rounding(Math.max(...array)) : 0;
80 | }
81 | 
82 | /**
83 |  * Calculates the min of an array of numbers.
84 |  *
85 |  * @param {number[]} array - The array of numbers.
86 |  * @return {number} Minimum value.
87 |  */
88 | export function min(array: number[]): number {
89 | 	return array.length ? rounding(Math.min(...array)) : 0;
90 | }
91 | 


--------------------------------------------------------------------------------
/src/components/navigation/JumpX.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 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.
 3 |  * 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.
 4 |  * 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/>.
 5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
 6 |  */
 7 | 
 8 | import React from "react";
 9 | 
10 | interface JumpXElementsParams {
11 | 	event: React.KeyboardEvent;
12 | 	number: number;
13 | 	elements: HTMLElement[];
14 | 	selectedSeries: string;
15 | 	series: string[];
16 | }
17 | interface JumpXChartsParams {
18 | 	event: React.KeyboardEvent;
19 | 	charts: HTMLElement[];
20 | 	chart: HTMLElement;
21 | }
22 | /**
23 |  * Handles the navigation between X data elements inside a chart.
24 |  *
25 |  * @param {JumpXElementsParams} params - The parameters for jumping between elements.
26 |  */
27 | export async function jumpXElements({
28 | 	event,
29 | 	number,
30 | 	elements,
31 | 	selectedSeries,
32 | 	series,
33 | }: JumpXElementsParams): Promise<void> {
34 | 	const { key, nativeEvent } = event;
35 | 
36 | 	// Filter elements for the selected series
37 | 	if (series.length > 0 && selectedSeries) {
38 | 		const currentSeriesName = selectedSeries.replace(/ /g, "-");
39 | 		elements = elements.filter((element) => element.classList.contains(currentSeriesName));
40 | 	}
41 | 
42 | 	const activeElement = document.activeElement as HTMLElement;
43 | 
44 | 	if (!activeElement || !Array.isArray(elements)) return;
45 | 
46 | 	const currentPosition = elements.indexOf(activeElement);
47 | 
48 | 	if (currentPosition === -1) return;
49 | 
50 | 	let newPosition = currentPosition;
51 | 
52 | 	switch (key) {
53 | 		case "ArrowLeft":
54 | 			if (currentPosition === 0) return;
55 | 			nativeEvent.preventDefault();
56 | 			newPosition = Math.max(0, currentPosition - number);
57 | 			break;
58 | 		case "ArrowRight":
59 | 			if (currentPosition === elements.length - 1) return;
60 | 			nativeEvent.preventDefault();
61 | 			newPosition = Math.min(elements.length - 1, currentPosition + number);
62 | 			break;
63 | 		default:
64 | 			return;
65 | 	}
66 | 	elements[newPosition].focus();
67 | }
68 | /**
69 |  * Handles the navigation between charts.
70 |  *
71 |  * @param {JumpXChartsParams} params - The parameters for jumping between charts.
72 |  */
73 | export function jumpXCharts({ event, charts, chart }: JumpXChartsParams): void {
74 | 	if (chart !== document.activeElement || !charts.includes(chart)) return;
75 | 
76 | 	const currentPosition = charts.indexOf(chart);
77 | 	const { key, nativeEvent } = event;
78 | 	let newPosition = currentPosition;
79 | 
80 | 	switch (key) {
81 | 		case "ArrowLeft":
82 | 			if (currentPosition === 0) return;
83 | 			nativeEvent.preventDefault();
84 | 			newPosition = currentPosition - 1;
85 | 			break;
86 | 		case "ArrowRight":
87 | 			if (currentPosition === charts.length - 1) return;
88 | 			nativeEvent.preventDefault();
89 | 			newPosition = currentPosition + 1;
90 | 			break;
91 | 		default:
92 | 			return;
93 | 	}
94 | 	charts[newPosition].focus();
95 | }
96 | 


--------------------------------------------------------------------------------
/src/utils/handleKeyDown.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import React from "react";
  9 | import { descriptionsKeyHandler, insightsKeyHandler, navigationKeyHandler } from "../components";
 10 | import { TFunction } from "i18next";
 11 | interface AutoDescriptionsProps {
 12 | 	dynamicDescriptions?: boolean;
 13 | 	apiKey: string;
 14 | 	model?: string;
 15 | 	temperature?: number;
 16 | }
 17 | interface SelectorType {
 18 | 	element?: string;
 19 | 	className?: string;
 20 | }
 21 | interface HandleKeyDownProps {
 22 | 	alertDivRef: React.RefObject<HTMLElement>;
 23 | 	type: string;
 24 | 	number: number;
 25 | 	chartRef: React.RefObject<HTMLDivElement>;
 26 | 	elements: HTMLElement[];
 27 | 	selectedSeries: string;
 28 | 	series: string[];
 29 | 	selectorType: SelectorType;
 30 | 	setSelectedSeries: (series: string) => void;
 31 | 	setNumber: (num: number) => void;
 32 | 	setDescriptionContent: (content: string) => void;
 33 | 	insights: string;
 34 | 	insightsArray: number[];
 35 | 	arrayConverted: number[];
 36 | 	title: string;
 37 | 	descs: string[];
 38 | 	isShortcutGuideOpen: boolean;
 39 | 	setIsShortcutGuideOpen: (bool: boolean) => void;
 40 | 	shortcutGuideRef: React.RefObject<HTMLDialogElement>;
 41 | 	autoDescriptions?: AutoDescriptionsProps;
 42 | 	multiSeries?: string;
 43 | 	t: TFunction<"translation", undefined>;
 44 | }
 45 | /**
 46 |  * Sets the appropriate navigation keys and shortcuts in the charts and data.
 47 |  */
 48 | export async function handleKeyDown(
 49 | 	event: React.KeyboardEvent<HTMLDivElement>,
 50 | 	{
 51 | 		alertDivRef,
 52 | 		type,
 53 | 		number,
 54 | 		chartRef,
 55 | 		elements,
 56 | 		selectedSeries,
 57 | 		series,
 58 | 		selectorType,
 59 | 		setSelectedSeries,
 60 | 		setNumber,
 61 | 		setDescriptionContent,
 62 | 		insights,
 63 | 		insightsArray,
 64 | 		arrayConverted,
 65 | 		title,
 66 | 		descs,
 67 | 		autoDescriptions,
 68 | 		multiSeries,
 69 | 		shortcutGuideRef,
 70 | 		isShortcutGuideOpen,
 71 | 		setIsShortcutGuideOpen,
 72 | 		t,
 73 | 	}: HandleKeyDownProps,
 74 | ): Promise<void> {
 75 | 	const newNumber = await navigationKeyHandler({
 76 | 		type,
 77 | 		event,
 78 | 		number,
 79 | 		chartRef,
 80 | 		elements,
 81 | 		alertDivRef,
 82 | 		selectedSeries,
 83 | 		series,
 84 | 		selectorType,
 85 | 		multiSeries,
 86 | 		setSelectedSeries,
 87 | 		shortcutGuideRef,
 88 | 		isShortcutGuideOpen,
 89 | 		setIsShortcutGuideOpen,
 90 | 		t,
 91 | 	});
 92 | 	setNumber(newNumber);
 93 | 	descriptionsKeyHandler({
 94 | 		chartRef,
 95 | 		setDescriptionContent,
 96 | 		type,
 97 | 		descs,
 98 | 		title,
 99 | 		autoDescriptions,
100 | 		event,
101 | 	});
102 | 	insightsKeyHandler({
103 | 		event,
104 | 		elements,
105 | 		alertDivRef,
106 | 		insights,
107 | 		insightsArray,
108 | 		arrayConverted,
109 | 		t,
110 | 	});
111 | }
112 | 


--------------------------------------------------------------------------------
/examples/src/components/custom_shortcut_guide/components/CustomGuideData.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | export interface Shortcut {
  9 | 	keys: string;
 10 | 	description: string;
 11 | }
 12 | 
 13 | export interface Section {
 14 | 	title: string;
 15 | 	shortcuts: Shortcut[];
 16 | }
 17 | 
 18 | export const CUSTOM_GUIDE_DATA: Section[] = [
 19 | 	{
 20 | 		title: "Access the guide",
 21 | 		shortcuts: [
 22 | 			{ keys: "Question Mark", description: "Enter shortcut guide" },
 23 | 			{ keys: "Question Mark or Escape", description: "Leave shortcut guide" },
 24 | 		],
 25 | 	},
 26 | 	{
 27 | 		title: "Move between page elements",
 28 | 		shortcuts: [
 29 | 			{ keys: "Down Arrow", description: "Get into a chart" },
 30 | 			{ keys: "Up Arrow", description: "Get out of a chart" },
 31 | 			{ keys: "Right Arrow", description: "Move forward in a page element" },
 32 | 			{ keys: "Left Arrow", description: "Move backward in a page element" },
 33 | 			{
 34 | 				keys: "Alt + M",
 35 | 				description: "Move between series of data inside the chart",
 36 | 			},
 37 | 		],
 38 | 	},
 39 | 	{
 40 | 		title: "Chart navigation shortcuts",
 41 | 		shortcuts: [
 42 | 			{
 43 | 				keys: "Home or Alt + Q",
 44 | 				description: "Jump to the beginning of a chart",
 45 | 			},
 46 | 			{
 47 | 				keys: "End or Alt + W",
 48 | 				description: "Jump to the end of a chart",
 49 | 			},
 50 | 			{
 51 | 				keys: "Alt + X",
 52 | 				description: "Define the number of data points to be jumped at a time",
 53 | 			},
 54 | 			{
 55 | 				keys: "+",
 56 | 				description: "Add one number to the data points to be jumped at a time",
 57 | 			},
 58 | 			{
 59 | 				keys: "-",
 60 | 				description: "Subtract one number to the data points to be jumped at a time",
 61 | 			},
 62 | 		],
 63 | 	},
 64 | 	{
 65 | 		title: "Statistical insights (works when navigating a chart)",
 66 | 		shortcuts: [
 67 | 			{ keys: "Alt + J", description: "Minimum" },
 68 | 			{ keys: "Alt + K", description: "Average" },
 69 | 			{ keys: "Alt + L", description: "Maximum" },
 70 | 		],
 71 | 	},
 72 | 	{
 73 | 		title: "Statistical insights (works when a chart element is focused)",
 74 | 		shortcuts: [
 75 | 			{
 76 | 				keys: "Alt + Shift + J",
 77 | 				description: "Compare current data element to minimum value",
 78 | 			},
 79 | 			{
 80 | 				keys: "Alt + Shift + K",
 81 | 				description: "Compare current data element to average value",
 82 | 			},
 83 | 			{
 84 | 				keys: "Alt + Shift + L",
 85 | 				description: "Compare current data element to maximum value",
 86 | 			},
 87 | 			{
 88 | 				keys: "Alt + Z",
 89 | 				description: "Compare current data element to the rest of the chart",
 90 | 			},
 91 | 		],
 92 | 	},
 93 | 	{
 94 | 		title: "Change chart descriptions",
 95 | 		shortcuts: [
 96 | 			{
 97 | 				keys: "Alt + B",
 98 | 				description: "Set longer description of the chart",
 99 | 			},
100 | 			{
101 | 				keys: "Alt + S",
102 | 				description: "Set shorter description of the chart (default)",
103 | 			},
104 | 		],
105 | 	},
106 | ];
107 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "@feedzai/autovizua11y",
  3 | 	"description": "AutoVizuA11y is a React library that automates the process of creating accessible data visualizations",
  4 | 	"private": false,
  5 | 	"version": "3.0.3",
  6 | 	"author": "Feedzai",
  7 | 	"license": "AGPL-3.0",
  8 | 	"keywords": [
  9 | 		"accessibility",
 10 | 		"visualization",
 11 | 		"dataviz",
 12 | 		"react",
 13 | 		"javascript"
 14 | 	],
 15 | 	"type": "module",
 16 | 	"main": "./dist/index.umd.cjs",
 17 | 	"module": "./dist/index.es.mjs",
 18 | 	"types": "./dist/AutoVizuA11y.d.ts",
 19 | 	"exports": {
 20 | 		".": {
 21 | 			"types": "./dist/AutoVizuA11y.d.ts",
 22 | 			"import": "./dist/index.es.mjs",
 23 | 			"require": "./dist/index.umd.cjs"
 24 | 		},
 25 | 		"./styles.css": "./dist/styles.css"
 26 | 	},
 27 | 	"repository": {
 28 | 		"type": "git",
 29 | 		"url": "git+https://github.com/feedzai/AutoVizuA11y.git"
 30 | 	},
 31 | 	"engines": {
 32 | 		"node": ">= 18",
 33 | 		"npm": ">= 8"
 34 | 	},
 35 | 	"scripts": {
 36 | 		"format": "npx prettier --write '**/*.{jsx,ts,tsx,js}'",
 37 | 		"reinstall": "rimraf node_modules && npm install",
 38 | 		"lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
 39 | 		"build": "npm run lint && vite build",
 40 | 		"postbuild": "size-limit",
 41 | 		"docs:install": "cd ./examples && npm install",
 42 | 		"docs:dev": "cd ./examples && npm run dev",
 43 | 		"docs:build": "npm run docs:install && cd ./examples && npm run build",
 44 | 		"docs:preview": "cd ./examples && npm run preview",
 45 | 		"docs:ci": "npm run build && npm run docs:build && npm run docs:preview",
 46 | 		"test:e2e-open": "cypress open --e2e",
 47 | 		"test:e2e-run": "cypress run --e2e",
 48 | 		"test:local": "start-server-and-test docs:ci http://localhost:5173/AutoVizuA11y/ 'npm run test:e2e-open'",
 49 | 		"test:ci": "start-server-and-test docs:ci http://localhost:5173/AutoVizuA11y/ 'npm run test:e2e-run'"
 50 | 	},
 51 | 	"peerDependencies": {
 52 | 		"react": ">= 17.0.2",
 53 | 		"react-dom": ">= 17.0.2"
 54 | 	},
 55 | 	"dependencies": {
 56 | 		"@feedzai/js-utilities": "^1.6.0",
 57 | 		"i18next": "^25.5.2",
 58 | 		"i18next-browser-languagedetector": "^8.2.0",
 59 | 		"i18next-http-backend": "^3.0.2",
 60 | 		"react": ">= 17.0.2",
 61 | 		"react-dom": ">= 17.0.2",
 62 | 		"react-i18next": "^15.7.3"
 63 | 	},
 64 | 	"devDependencies": {
 65 | 		"@cypress/code-coverage": "^3.13.2",
 66 | 		"@eslint/js": "^9.13.0",
 67 | 		"@size-limit/preset-small-lib": "^11.0.2",
 68 | 		"@testing-library/cypress": "^10.0.2",
 69 | 		"@types/node": "^20.11.20",
 70 | 		"@types/react": "^18.2.56",
 71 | 		"@types/react-dom": "^18.2.19",
 72 | 		"@typescript-eslint/eslint-plugin": "^7.0.2",
 73 | 		"@typescript-eslint/parser": "^7.0.2",
 74 | 		"@visx/visx": "^3.8.0",
 75 | 		"@vitejs/plugin-react-swc": "^3.5.0",
 76 | 		"cypress": "^13.14.2",
 77 | 		"cypress-axe": "^1.5.0",
 78 | 		"cypress-plugin-tab": "^1.0.5",
 79 | 		"eslint": "^8.57.1",
 80 | 		"eslint-plugin-react": "^7.37.2",
 81 | 		"eslint-plugin-react-hooks": "^4.6.0",
 82 | 		"eslint-plugin-react-refresh": "^0.4.5",
 83 | 		"globals": "^15.11.0",
 84 | 		"jsdom": "^24.0.0",
 85 | 		"rimraf": "^6.0.0",
 86 | 		"size-limit": "^11.0.2",
 87 | 		"start-server-and-test": "^2.1.2",
 88 | 		"typescript": "^5.2.2",
 89 | 		"typescript-eslint": "^8.12.2",
 90 | 		"vite": "^5.3.1",
 91 | 		"vite-plugin-dts": "^4.3.0",
 92 | 		"vite-plugin-lib-inject-css": "^2.1.1",
 93 | 		"vite-tsconfig-paths": "^4.3.2"
 94 | 	},
 95 | 	"size-limit": [
 96 | 		{
 97 | 			"path": "dist/index.umd.cjs",
 98 | 			"limit": "30 kB",
 99 | 			"ignore": [
100 | 				"fs"
101 | 			]
102 | 		},
103 | 		{
104 | 			"path": "dist/index.es.mjs",
105 | 			"limit": "30 kB",
106 | 			"ignore": [
107 | 				"fs"
108 | 			]
109 | 		}
110 | 	],
111 | 	"bugs": {
112 | 		"url": "https://github.com/feedzai/AutoVizuA11y/issues"
113 | 	},
114 | 	"homepage": "https://github.com/feedzai/AutoVizuA11y#readme"
115 | }
116 | 


--------------------------------------------------------------------------------
/src/assets/data/GuideData.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import { isMacOS } from "../../utils/macOSDetector";
  9 | 
 10 | export interface Shortcut {
 11 | 	keys: string;
 12 | 	description: string;
 13 | }
 14 | 
 15 | export interface Section {
 16 | 	title: string;
 17 | 	shortcuts: Shortcut[];
 18 | }
 19 | 
 20 | /**
 21 |  * Generates guide data with appropriate key names based on the operating system
 22 |  * Uses "Option" for macOS and "Alt" for other systems
 23 |  */
 24 | export function getGuideData(): Section[] {
 25 | 	const modifierKey = isMacOS() ? "option" : "Alt";
 26 | 
 27 | 	return [
 28 | 		{
 29 | 			title: "sg_access_title",
 30 | 			shortcuts: [
 31 | 				{ keys: "Question Mark", description: "sg_enter_description" },
 32 | 				{ keys: "Question Mark or Escape", description: "sg_leave_description" },
 33 | 			],
 34 | 		},
 35 | 		{
 36 | 			title: "sg_move_elements_title",
 37 | 			shortcuts: [
 38 | 				{ keys: "Down Arrow", description: "sg_get_into_chart" },
 39 | 				{ keys: "Up Arrow", description: "sg_get_out_of_chart" },
 40 | 				{ keys: "Right Arrow", description: "sg_move_forward" },
 41 | 				{ keys: "Left Arrow", description: "sg_move_backward" },
 42 | 				{
 43 | 					keys: `${modifierKey} + M`,
 44 | 					description: "sg_move_series",
 45 | 				},
 46 | 			],
 47 | 		},
 48 | 		{
 49 | 			title: "sg_chart_nav_title",
 50 | 			shortcuts: [
 51 | 				{
 52 | 					keys: `Home or ${modifierKey} + Q`,
 53 | 					description: "sg_jump_beginning",
 54 | 				},
 55 | 				{
 56 | 					keys: `End or ${modifierKey} + W`,
 57 | 					description: "sg_jump_end",
 58 | 				},
 59 | 				{
 60 | 					keys: `${modifierKey} + X`,
 61 | 					description: "sg_define_jump_points",
 62 | 				},
 63 | 				{
 64 | 					keys: "+",
 65 | 					description: "sg_add_jump_point",
 66 | 				},
 67 | 				{
 68 | 					keys: "-",
 69 | 					description: "sg_subtract_jump_point",
 70 | 				},
 71 | 			],
 72 | 		},
 73 | 		{
 74 | 			title: "sg_stats_nav_title",
 75 | 			shortcuts: [
 76 | 				{ keys: `${modifierKey} + J`, description: "minimum" },
 77 | 				{ keys: `${modifierKey} + K`, description: "average" },
 78 | 				{ keys: `${modifierKey} + L`, description: "maximum" },
 79 | 			],
 80 | 		},
 81 | 		{
 82 | 			title: "sg_stats_focused_title",
 83 | 			shortcuts: [
 84 | 				{
 85 | 					keys: `${modifierKey} + Shift + J`,
 86 | 					description: "sg_compare_minimum",
 87 | 				},
 88 | 				{
 89 | 					keys: `${modifierKey} + Shift + K`,
 90 | 					description: "sg_compare_average",
 91 | 				},
 92 | 				{
 93 | 					keys: `${modifierKey} + Shift + L`,
 94 | 					description: "sg_compare_maximum",
 95 | 				},
 96 | 				{
 97 | 					keys: `${modifierKey} + Z`,
 98 | 					description: "sg_compare_rest",
 99 | 				},
100 | 			],
101 | 		},
102 | 		{
103 | 			title: "sg_change_desc_title",
104 | 			shortcuts: [
105 | 				{
106 | 					keys: `${modifierKey} + B`,
107 | 					description: "sg_longer_desc",
108 | 				},
109 | 				{
110 | 					keys: `${modifierKey} + S`,
111 | 					description: "sg_shorter_desc",
112 | 				},
113 | 			],
114 | 		},
115 | 	];
116 | }
117 | 
118 | // Legacy export for backward compatibility - but this will now be dynamic
119 | export const GUIDE_DATA = getGuideData();
120 | 


--------------------------------------------------------------------------------
/examples/src/components/manual/ChartGridManual.jsx:
--------------------------------------------------------------------------------
  1 | import Card from "@mui/material/Card";
  2 | import CardContent from "@mui/material/CardContent";
  3 | import BarChartManual from "./BarChartManual";
  4 | import SingleSeriesTimelineManual from "./SingleTimelineManual";
  5 | import MultiSeriesTimelineManual from "./MultiTimelineManual";
  6 | import PieManual from "./PieManual";
  7 | import TreemapManual from "./TreeMapManual";
  8 | import Grid from "@mui/material/Grid";
  9 | import HeatmapManual from "./HeatmapManual";
 10 | import StackedBarManual from "./StackedBarManual";
 11 | import manualDescriptions from "../../data/manualDescriptions.json";
 12 | import ScatterplotManual from "./ScatterplotManual";
 13 | 
 14 | const manualDescsAux = manualDescriptions[0];
 15 | 
 16 | function CardGridManual({ setHome }) {
 17 |   setHome(false);
 18 |   return (
 19 |     <Grid
 20 |       container
 21 |       direction="row"
 22 |       spacing={2}
 23 |       justifyContent="center"
 24 |       alignItems="center"
 25 |     >
 26 |       <Grid item>
 27 |         <Card sx={{ minWidth: 275, width: 450 }}>
 28 |           <CardContent>
 29 |             <BarChartManual
 30 |               longDesc={manualDescsAux["longDesc1"]}
 31 |               shortDesc={manualDescsAux["shortDesc1"]}
 32 |             ></BarChartManual>
 33 |           </CardContent>
 34 |         </Card>
 35 |       </Grid>
 36 |       <Grid item>
 37 |         <Card sx={{ minWidth: 275, width: 450 }}>
 38 |           <CardContent>
 39 |             <SingleSeriesTimelineManual
 40 |               longDesc={manualDescsAux["longDesc2"]}
 41 |               shortDesc={manualDescsAux["shortDesc2"]}
 42 |             ></SingleSeriesTimelineManual>
 43 |           </CardContent>
 44 |         </Card>
 45 |       </Grid>
 46 |       <Grid item>
 47 |         <Card sx={{ minWidth: 275, width: 450 }}>
 48 |           <CardContent>
 49 |             <MultiSeriesTimelineManual
 50 |               longDesc={manualDescsAux["longDesc3"]}
 51 |               shortDesc={manualDescsAux["shortDesc3"]}
 52 |             ></MultiSeriesTimelineManual>
 53 |           </CardContent>
 54 |         </Card>
 55 |       </Grid>
 56 | 
 57 |       <Grid item>
 58 |         <Card sx={{ minWidth: 275, width: 450 }}>
 59 |           <CardContent>
 60 |             <PieManual
 61 |               longDesc={manualDescsAux["longDesc4"]}
 62 |               shortDesc={manualDescsAux["shortDesc4"]}
 63 |             ></PieManual>
 64 |           </CardContent>
 65 |         </Card>
 66 |       </Grid>
 67 |       <Grid item>
 68 |         <Card sx={{ minWidth: 275, width: 450 }}>
 69 |           <CardContent>
 70 |             <TreemapManual
 71 |               longDesc={manualDescsAux["longDesc5"]}
 72 |               shortDesc={manualDescsAux["shortDesc5"]}
 73 |             ></TreemapManual>
 74 |           </CardContent>
 75 |         </Card>
 76 |       </Grid>
 77 |       <Grid item>
 78 |         <Card sx={{ minWidth: 275, width: 450 }}>
 79 |           <CardContent>
 80 |             <HeatmapManual
 81 |               longDesc={manualDescsAux["longDesc6"]}
 82 |               shortDesc={manualDescsAux["shortDesc6"]}
 83 |             ></HeatmapManual>
 84 |           </CardContent>
 85 |         </Card>
 86 |       </Grid>
 87 |       <Grid item>
 88 |         <Card sx={{ minWidth: 275, width: 450 }}>
 89 |           <CardContent>
 90 |             <StackedBarManual
 91 |               longDesc={manualDescsAux["longDesc7"]}
 92 |               shortDesc={manualDescsAux["shortDesc7"]}
 93 |             ></StackedBarManual>
 94 |           </CardContent>
 95 |         </Card>
 96 |       </Grid>
 97 |       <Grid item>
 98 |         <Card sx={{ minWidth: 275, width: 450 }}>
 99 |           <CardContent>
100 |             <ScatterplotManual
101 |               longDesc={manualDescsAux["longDesc8"]}
102 |               shortDesc={manualDescsAux["shortDesc8"]}
103 |             ></ScatterplotManual>
104 |           </CardContent>
105 |         </Card>
106 |       </Grid>
107 |     </Grid>
108 |   );
109 | }
110 | 
111 | export default CardGridManual;
112 | 


--------------------------------------------------------------------------------
/src/components/navigation/XSetter.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import React from "react";
  9 | import { showAlert } from "../../utils/showAlert";
 10 | import { TFunction } from "i18next";
 11 | 
 12 | interface XSetterParams {
 13 | 	event: React.KeyboardEvent;
 14 | 	type: string;
 15 | 	number: number;
 16 | 	alertDivRef: React.RefObject<HTMLElement>;
 17 | 	t: TFunction<"translation", undefined>;
 18 | }
 19 | 
 20 | /**
 21 |  * Handles the X number of data elements to be jumped inside a chart.
 22 |  *
 23 |  * @param {XSetterParams} params - The parameters for the xSetter function.
 24 |  * @return {Promise<number>} Number of points being jumped at a time inside the wrapped chart.
 25 |  */
 26 | export async function xSetter({
 27 | 	event,
 28 | 	type,
 29 | 	number,
 30 | 	alertDivRef,
 31 | 	t,
 32 | }: XSetterParams): Promise<number> {
 33 | 	try {
 34 | 		const { nativeEvent } = event;
 35 | 
 36 | 		if (nativeEvent instanceof KeyboardEvent) {
 37 | 			if (nativeEvent.altKey && nativeEvent.code === "KeyX") {
 38 | 				return await handleAltX(event, type, number, alertDivRef, t);
 39 | 			}
 40 | 			if (nativeEvent.key === "-") {
 41 | 				return await handleMinus(type, number, alertDivRef, t);
 42 | 			}
 43 | 			if (nativeEvent.key === "+") {
 44 | 				return await handlePlus(type, number, alertDivRef, t);
 45 | 			}
 46 | 		}
 47 | 
 48 | 		return number;
 49 | 	} catch (error) {
 50 | 		console.error("Error in xSetter:", error);
 51 | 
 52 | 		return number;
 53 | 	}
 54 | }
 55 | 
 56 | /**
 57 |  * Handles the pressing of the Alt + X keys.
 58 |  */
 59 | async function handleAltX(
 60 | 	event: React.KeyboardEvent,
 61 | 	type: string,
 62 | 	number: number,
 63 | 	alertDivRef: React.RefObject<HTMLElement>,
 64 | 	t: TFunction<"translation", undefined>,
 65 | ): Promise<number> {
 66 | 	try {
 67 | 		event.preventDefault();
 68 | 		const activeElement = document.activeElement as HTMLElement | null;
 69 | 		const input = prompt(t("prompt_enter_number"));
 70 | 
 71 | 		if (input !== null && input !== "") {
 72 | 			const parsedInput = parseInt(input, 10);
 73 | 
 74 | 			if (!isNaN(parsedInput) && parsedInput > 0) {
 75 | 				showAlert(alertDivRef, t("alert_jumping_data_points", { count: parsedInput, type }));
 76 | 				activeElement?.focus();
 77 | 				return parsedInput;
 78 | 			} else {
 79 | 				showAlert(alertDivRef, t("alert_invalid_input_number"));
 80 | 			}
 81 | 		}
 82 | 
 83 | 		activeElement?.focus();
 84 | 
 85 | 		return number;
 86 | 	} catch (error) {
 87 | 		console.error("Error in handleAltX:", error);
 88 | 
 89 | 		return number;
 90 | 	}
 91 | }
 92 | 
 93 | /**
 94 |  * Handles the pressing of the - (minus) key.
 95 |  */
 96 | async function handleMinus(
 97 | 	type: string,
 98 | 	number: number,
 99 | 	alertDivRef: React.RefObject<HTMLElement>,
100 | 	t: TFunction<"translation", undefined>,
101 | ): Promise<number> {
102 | 	if (number === 1) {
103 | 		return number;
104 | 	}
105 | 
106 | 	showAlert(alertDivRef, t("alert_jumping_data_points", { count: number - 1, type }));
107 | 
108 | 	return number - 1;
109 | }
110 | 
111 | /**
112 |  * Handles the pressing of the + (plus) key.
113 |  */
114 | async function handlePlus(
115 | 	type: string,
116 | 	number: number,
117 | 	alertDivRef: React.RefObject<HTMLElement>,
118 | 	t: TFunction<"translation", undefined>,
119 | ): Promise<number> {
120 | 	showAlert(alertDivRef, t("alert_jumping_data_points", { count: number + 1, type }));
121 | 	return number + 1;
122 | }
123 | 


--------------------------------------------------------------------------------
/src/hooks/useIsolatedI18n.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import { useEffect, useMemo } from "react";
  9 | import { createInstance, i18n } from "i18next";
 10 | import { initReactI18next, useTranslation } from "react-i18next";
 11 | // @ts-expect-error - i18n.js file doesn't have TypeScript declarations
 12 | import globalI18n from "../i18n";
 13 | 
 14 | export type CustomTranslations = {
 15 | 	[languageCode: string]: Record<string, string>;
 16 | };
 17 | 
 18 | /**
 19 |  * Hook that creates an isolated i18n instance for each component to prevent
 20 |  * language changes from affecting other components on the same page
 21 |  * @param {string} language - The language to use for the component
 22 |  * @param {CustomTranslations} customTranslations - The custom translations to use for the component
 23 |  * @return The i18n instance and the translation function
 24 |  */
 25 | export const useIsolatedI18n = (
 26 | 	language?: string,
 27 | 	customTranslations?: CustomTranslations,
 28 | ): { t: ReturnType<typeof useTranslation>["t"]; i18n: i18n } => {
 29 | 	const isolatedI18n = useMemo(() => {
 30 | 		const instance = createInstance();
 31 | 
 32 | 		// Isolated resources with custom translations
 33 | 		const getIsolatedResources = () => {
 34 | 			// Base resources from global i18n
 35 | 			const baseResources: Record<string, { translation: Record<string, string> }> = {};
 36 | 			Object.entries(globalI18n.options.resources).forEach(([lang, resource]) => {
 37 | 				if (
 38 | 					resource &&
 39 | 					typeof resource === "object" &&
 40 | 					"translation" in resource &&
 41 | 					resource.translation
 42 | 				) {
 43 | 					baseResources[lang] = {
 44 | 						translation: { ...resource.translation },
 45 | 					};
 46 | 				}
 47 | 			});
 48 | 
 49 | 			// Apply custom translations
 50 | 			if (customTranslations) {
 51 | 				Object.entries(customTranslations).forEach(([languageCode, translations]) => {
 52 | 					if (languageCode && translations && typeof translations === "object") {
 53 | 						if (baseResources[languageCode]) {
 54 | 							// Merge custom translations with existing ones (custom takes precedence)
 55 | 							baseResources[languageCode] = {
 56 | 								translation: {
 57 | 									...baseResources[languageCode].translation,
 58 | 									...translations,
 59 | 								},
 60 | 							};
 61 | 						} else {
 62 | 							// For new languages, use English as base
 63 | 							const englishFallback = baseResources["en-GB"]?.translation || {};
 64 | 							baseResources[languageCode] = {
 65 | 								translation: {
 66 | 									...englishFallback,
 67 | 									...translations,
 68 | 								},
 69 | 							};
 70 | 						}
 71 | 					}
 72 | 				});
 73 | 			}
 74 | 
 75 | 			return baseResources;
 76 | 		};
 77 | 
 78 | 		instance.use(initReactI18next).init({
 79 | 			fallbackLng: "en-GB",
 80 | 			debug: false,
 81 | 			resources: getIsolatedResources(),
 82 | 			interpolation: {
 83 | 				escapeValue: false,
 84 | 			},
 85 | 			react: {
 86 | 				useSuspense: false,
 87 | 			},
 88 | 		});
 89 | 
 90 | 		return instance;
 91 | 	}, [customTranslations]);
 92 | 
 93 | 	// Handle language changes for this specific instance only
 94 | 	useEffect(() => {
 95 | 		if (language && language !== isolatedI18n.language) {
 96 | 			isolatedI18n.changeLanguage(language);
 97 | 		}
 98 | 	}, [language, isolatedI18n]);
 99 | 
100 | 	const { t } = useTranslation("translation", { i18n: isolatedI18n });
101 | 
102 | 	return { t, i18n: isolatedI18n };
103 | };
104 | 


--------------------------------------------------------------------------------
/src/components/navigation/GuideKeyHandler.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import * as constants from "../../constants";
  9 | 
 10 | /**
 11 |  * Handles the pressing of right arrow key inside the Shortcut Guide
 12 |  */
 13 | function handleArrowRight(
 14 | 	event: React.KeyboardEvent,
 15 | 	shortcutGuideRef: React.RefObject<HTMLDialogElement>,
 16 | ): void {
 17 | 	event.preventDefault();
 18 | 
 19 | 	const shortcutGuide = shortcutGuideRef.current;
 20 | 	if (!shortcutGuide) return;
 21 | 
 22 | 	const rows = Array.from(
 23 | 		shortcutGuide.querySelectorAll(`.${constants.SHORTCUTGUIDE_CLASSES.shortcutGuideRow}`),
 24 | 	);
 25 | 	if (rows.length === 0) return;
 26 | 
 27 | 	const activeElement = document.activeElement;
 28 | 	const currentRowIndex = rows.findIndex((row) => row === activeElement);
 29 | 
 30 | 	const nextIndex = currentRowIndex === -1 ? 0 : currentRowIndex + 1;
 31 | 
 32 | 	if (nextIndex < rows.length) {
 33 | 		(rows[nextIndex] as HTMLElement).focus();
 34 | 	}
 35 | }
 36 | 
 37 | /**
 38 |  * Handles the pressing of left arrow key inside the Shortcut Guide
 39 |  */
 40 | function handleArrowLeft(
 41 | 	event: React.KeyboardEvent,
 42 | 	shortcutGuideRef: React.RefObject<HTMLDialogElement>,
 43 | ): void {
 44 | 	event.preventDefault();
 45 | 
 46 | 	const shortcutGuide = shortcutGuideRef.current;
 47 | 	if (!shortcutGuide) return;
 48 | 
 49 | 	const rows = Array.from(
 50 | 		shortcutGuide.querySelectorAll(`.${constants.SHORTCUTGUIDE_CLASSES.shortcutGuideRow}`),
 51 | 	);
 52 | 	if (rows.length === 0) return;
 53 | 
 54 | 	const activeElement = document.activeElement;
 55 | 	const currentRowIndex = rows.findIndex((row) => row === activeElement);
 56 | 
 57 | 	let prevIndex = currentRowIndex - 1;
 58 | 	if (currentRowIndex === -1) {
 59 | 		prevIndex = rows.length - 1;
 60 | 	}
 61 | 
 62 | 	if (prevIndex >= 0) {
 63 | 		(rows[prevIndex] as HTMLElement).focus();
 64 | 	}
 65 | }
 66 | 
 67 | /**
 68 |  * Listens for shortcutGuide related keypresses and handles the outcomes.
 69 |  *
 70 |  * @param {React.KeyboardEvent} event - The keyboard event.
 71 |  * @param {React.RefObject<HTMLElement>} chartRef - Reference to the chart element.
 72 |  */
 73 | export function guideKeyHandler({
 74 | 	event,
 75 | 	shortcutGuideRef,
 76 | 	setIsShortcutGuideOpen,
 77 | }: {
 78 | 	event: React.KeyboardEvent;
 79 | 	shortcutGuideRef: React.RefObject<HTMLDialogElement>;
 80 | 	setIsShortcutGuideOpen: (bool: boolean) => void;
 81 | }): void {
 82 | 	const { key } = event;
 83 | 
 84 | 	const shouldHandleKey = shortcutGuideRef.current?.contains(document.activeElement);
 85 | 
 86 | 	switch (key) {
 87 | 		case "Escape":
 88 | 		case "?":
 89 | 			if (shouldHandleKey) {
 90 | 				event.preventDefault();
 91 | 				returnGuide(shortcutGuideRef, setIsShortcutGuideOpen);
 92 | 			}
 93 | 			break;
 94 | 		case "ArrowLeft":
 95 | 			handleArrowLeft(event, shortcutGuideRef);
 96 | 			break;
 97 | 		case "ArrowRight":
 98 | 			handleArrowRight(event, shortcutGuideRef);
 99 | 			break;
100 | 		default:
101 | 			break;
102 | 	}
103 | 
104 | 	return;
105 | }
106 | 
107 | /**
108 |  * Hides the ShortcutGuide and gives keyboard focus to the previously focused element.
109 |  *
110 |  * @param {React.RefObject<HTMLElement>} chartRef - Reference to the chart element.
111 |  */
112 | export function returnGuide(
113 | 	shortcutGuideRef: React.RefObject<HTMLDialogElement>,
114 | 	setIsShortcutGuideOpen: (bool: boolean) => void,
115 | ): void {
116 | 	shortcutGuideRef.current!.close();
117 | 	setIsShortcutGuideOpen(false);
118 | }
119 | 


--------------------------------------------------------------------------------
/src/components/insights/InsightsKeyHandler.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import { wait, isUndefined } from "@feedzai/js-utilities";
  9 | 
 10 | import { messageInsights, messageOverall } from "./MessageGenerator";
 11 | 
 12 | import * as constants from "../../constants";
 13 | import { TFunction } from "i18next";
 14 | 
 15 | type InsightsKeyHandlerProps = {
 16 | 	event: React.KeyboardEvent;
 17 | 	elements: HTMLElement[];
 18 | 	alertDivRef: React.RefObject<HTMLElement>;
 19 | 	insights: string;
 20 | 	insightsArray: number[];
 21 | 	arrayConverted?: number[];
 22 | 	t: TFunction<"translation", undefined>;
 23 | };
 24 | 
 25 | /**
 26 |  * Listens for keypresses and handles the outcomes.
 27 |  *
 28 |  * @export
 29 |  */
 30 | export function insightsKeyHandler({
 31 | 	event,
 32 | 	elements,
 33 | 	alertDivRef,
 34 | 	insights,
 35 | 	insightsArray,
 36 | 	arrayConverted,
 37 | 	t,
 38 | }: InsightsKeyHandlerProps) {
 39 | 	const shortcut_error = t("shortcut_error");
 40 | 	const shortcut_error2 = t("shortcut_error2");
 41 | 	const average_word = t("average");
 42 | 	const maximum_word = t("maximum");
 43 | 	const minimum_word = t("minimum");
 44 | 	const average_message = t("average_message");
 45 | 	const maximum_message = t("maximum_message");
 46 | 	const minimum_message = t("minimum_message");
 47 | 
 48 | 	if (!arrayConverted || !alertDivRef.current) return;
 49 | 
 50 | 	const { altKey, shiftKey, code } = event.nativeEvent;
 51 | 
 52 | 	const focusedIndex = Array.prototype.findIndex.call(
 53 | 		elements,
 54 | 		(el: HTMLElement) => el === document.activeElement,
 55 | 	);
 56 | 
 57 | 	const focusedData = arrayConverted[focusedIndex];
 58 | 
 59 | 	async function showMessage(message: string) {
 60 | 		alertDivRef.current!.textContent = message;
 61 | 
 62 | 		await wait(constants.TIMEOUT_DURATION);
 63 | 
 64 | 		alertDivRef.current!.textContent = "\u00A0";
 65 | 	}
 66 | 
 67 | 	const handleInsightComparison = (type: string, value: number) => {
 68 | 		if (insights === "") {
 69 | 			showMessage(shortcut_error2);
 70 | 			return;
 71 | 		} else if (typeof focusedData === "undefined") {
 72 | 			showMessage(shortcut_error);
 73 | 		} else {
 74 | 			showMessage(messageInsights(type, value, focusedData, t));
 75 | 		}
 76 | 	};
 77 | 
 78 | 	const handleStatisticalInsight = (message: string) => {
 79 | 		if (insights === "") {
 80 | 			showMessage(shortcut_error2);
 81 | 			return;
 82 | 		} else {
 83 | 			showMessage(message);
 84 | 		}
 85 | 	};
 86 | 
 87 | 	if (altKey && shiftKey) {
 88 | 		switch (code) {
 89 | 			case "KeyK":
 90 | 				handleInsightComparison(average_word, insightsArray[1]);
 91 | 				break;
 92 | 			case "KeyL":
 93 | 				handleInsightComparison(maximum_word, insightsArray[2]);
 94 | 				break;
 95 | 			case "KeyJ":
 96 | 				handleInsightComparison(minimum_word, insightsArray[3]);
 97 | 				break;
 98 | 		}
 99 | 	} else if (altKey) {
100 | 		switch (code) {
101 | 			case "KeyK":
102 | 				handleStatisticalInsight(`${average_message} ${insightsArray[1]}`);
103 | 				break;
104 | 			case "KeyL":
105 | 				handleStatisticalInsight(`${maximum_message} ${insightsArray[2]}`);
106 | 				break;
107 | 			case "KeyJ":
108 | 				handleStatisticalInsight(`${minimum_message} ${insightsArray[3]}`);
109 | 				break;
110 | 			case "KeyZ":
111 | 				if (insights === "") {
112 | 					showMessage(shortcut_error2);
113 | 					break;
114 | 				}
115 | 
116 | 				showMessage(
117 | 					isUndefined(focusedData)
118 | 						? shortcut_error
119 | 						: messageOverall(arrayConverted, focusedData, t),
120 | 				);
121 | 				break;
122 | 		}
123 | 	}
124 | 
125 | 	return;
126 | }
127 | 


--------------------------------------------------------------------------------
/examples/src/components/manual/TreeMapManual.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { Treemap, hierarchy, stratify, treemapSquarify } from "@visx/hierarchy";
  3 | import countryData from "../../data/country_data.json";
  4 | import { chartDimensions } from "./chart.constants.js";
  5 | import { Text } from "@visx/text";
  6 | import { descending } from "d3-array";
  7 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  8 | import transformJSON from "../../data/transformJSON.js";
  9 | 
 10 | function TreemapManual({ longDesc, shortDesc }) {
 11 | 	const intValuesCountryData = countryData.map((country) => {
 12 | 		return {
 13 | 			...country, //copies all countrys first...
 14 | 			Value: parseFloat(country.Value), //...then overwrites pippo
 15 | 		};
 16 | 	});
 17 | 
 18 | 	const surfaceCountryData = intValuesCountryData
 19 | 		.slice()
 20 | 		.filter((country) => country.Series === "Surface area (thousand km2)" && country.Year === 2020)
 21 | 		.map((elem) => {
 22 | 			elem.Surface = elem.Series;
 23 | 			elem.SurfaceValue = elem.Value;
 24 | 			elem.Country = elem["Population, density and surface area"];
 25 | 			elem.Parent = 1;
 26 | 			delete elem.Series;
 27 | 			delete elem.Value;
 28 | 			delete elem["Population, density and surface area"];
 29 | 			return elem;
 30 | 		});
 31 | 	const parent = {
 32 | 		Country: 1,
 33 | 		SurfaceValue: 0,
 34 | 		Parent: null,
 35 | 	};
 36 | 	const autovizData = Object.fromEntries(
 37 | 		surfaceCountryData
 38 | 			.sort((a, b) => descending(a.SurfaceValue, b.SurfaceValue))
 39 | 			.map((country) => [country["Country"], country.SurfaceValue]),
 40 | 	);
 41 | 	surfaceCountryData.push(parent);
 42 | 
 43 | 	const dataStratified = stratify()
 44 | 		.id((d) => d["Country"])
 45 | 		.parentId((d) => d["Parent"])(surfaceCountryData)
 46 | 		.sum((d) => d.SurfaceValue ?? 0);
 47 | 	const xMax = chartDimensions.width - chartDimensions.marginLeft - chartDimensions.marginRight;
 48 | 	const yMax = chartDimensions.height - chartDimensions.marginTop;
 49 | 	const root = hierarchy(dataStratified).sort((a, b) => (b.value || 0) - (a.value || 0));
 50 | 
 51 | 	const dataTransformed = transformJSON(autovizData);
 52 | 
 53 | 	return (
 54 | 		<div style={{ textAlign: "left" }}>
 55 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 56 | 				Russia, Canada, China and the USA are the largest countries
 57 | 			</h2>
 58 | 			<p style={{ marginBottom: 4, marginTop: 4, fontSize: 12 }}>Surface area (thousand km2)</p>
 59 | 			<AutoVizuA11y
 60 | 				data={dataTransformed}
 61 | 				type="Tree map"
 62 | 				selectorType={{ element: "rect" }}
 63 | 				descriptor="millions"
 64 | 				insights="y"
 65 | 				title="Russia, Canada, China and the USA are the largest countries"
 66 | 				context={"A few countries like Russia, Canada, China, and USA occupy a significant area. "}
 67 | 				manualDescriptions={{
 68 | 					longer: longDesc,
 69 | 					shorter: shortDesc,
 70 | 				}}
 71 | 			>
 72 | 				<svg width={chartDimensions.width} height={chartDimensions.height}>
 73 | 					<Treemap
 74 | 						top={chartDimensions.marginTop}
 75 | 						root={root}
 76 | 						size={[xMax, yMax]}
 77 | 						tile={treemapSquarify}
 78 | 						round
 79 | 					>
 80 | 						{(treemap) => (
 81 | 							<Group>
 82 | 								{treemap.descendants().map((node, i) => {
 83 | 									const nodeWidth = node.x1 - node.x0;
 84 | 									const nodeHeight = node.y1 - node.y0;
 85 | 									return (
 86 | 										<Group
 87 | 											key={`node-${i}`}
 88 | 											top={node.y0 + chartDimensions.marginTop}
 89 | 											left={node.x0 + chartDimensions.marginLeft}
 90 | 										>
 91 | 											{node.depth === 1 && (
 92 | 												<>
 93 | 													<rect
 94 | 														width={nodeWidth}
 95 | 														height={nodeHeight}
 96 | 														strokeWidth={2}
 97 | 														stroke="white"
 98 | 														fill={node.value > 9000 ? "#D74D51" : "#B3B7C4"}
 99 | 													/>
100 | 													{node.data.data.SurfaceValue > 9000 ? (
101 | 														<Text
102 | 															x={node.x0 + 5}
103 | 															y={(node.y1 - node.y0) / 5}
104 | 															style={{
105 | 																fontSize: 10,
106 | 																fill: "white",
107 | 															}}
108 | 														>
109 | 															{node.data.data.Country}
110 | 														</Text>
111 | 													) : null}
112 | 												</>
113 | 											)}
114 | 										</Group>
115 | 									);
116 | 								})}
117 | 							</Group>
118 | 						)}
119 | 					</Treemap>
120 | 				</svg>
121 | 			</AutoVizuA11y>
122 | 		</div>
123 | 	);
124 | }
125 | 
126 | export default TreemapManual;
127 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/TreeMapAutomatic.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { Treemap, hierarchy, stratify, treemapSquarify } from "@visx/hierarchy";
  3 | import countryData from "../../data/country_data.json";
  4 | import { chartDimensions } from "./chart.constants.js";
  5 | import { Text } from "@visx/text";
  6 | import { descending } from "d3-array";
  7 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  8 | import transformJSON from "../../data/transformJSON.js";
  9 | 
 10 | function Treemap_({ apiKey, model, baseUrl }) {
 11 | 	const intValuesCountryData = countryData.map((country) => {
 12 | 		return {
 13 | 			...country, //copies all countrys first...
 14 | 			Value: parseFloat(country.Value), //...then overwrites pippo
 15 | 		};
 16 | 	});
 17 | 
 18 | 	const surfaceCountryData = intValuesCountryData
 19 | 		.slice()
 20 | 		.filter((country) => country.Series === "Surface area (thousand km2)" && country.Year === 2020)
 21 | 		.map((elem) => {
 22 | 			elem.Surface = elem.Series;
 23 | 			elem.SurfaceValue = elem.Value;
 24 | 			elem.Country = elem["Population, density and surface area"];
 25 | 			elem.Parent = 1;
 26 | 			delete elem.Series;
 27 | 			delete elem.Value;
 28 | 			delete elem["Population, density and surface area"];
 29 | 			return elem;
 30 | 		});
 31 | 	const parent = {
 32 | 		Country: 1,
 33 | 		SurfaceValue: 0,
 34 | 		Parent: null,
 35 | 	};
 36 | 	const autovizData = Object.fromEntries(
 37 | 		surfaceCountryData
 38 | 			.sort((a, b) => descending(a.SurfaceValue, b.SurfaceValue))
 39 | 			.map((country) => [country["Country"], country.SurfaceValue]),
 40 | 	);
 41 | 	surfaceCountryData.push(parent);
 42 | 
 43 | 	const dataStratified = stratify()
 44 | 		.id((d) => d["Country"])
 45 | 		.parentId((d) => d["Parent"])(surfaceCountryData)
 46 | 		.sum((d) => d.SurfaceValue ?? 0);
 47 | 	const xMax = chartDimensions.width - chartDimensions.marginLeft - chartDimensions.marginRight;
 48 | 	const yMax = chartDimensions.height - chartDimensions.marginTop;
 49 | 	const root = hierarchy(dataStratified).sort((a, b) => (b.value || 0) - (a.value || 0));
 50 | 
 51 | 	const dataTransformed = transformJSON(autovizData);
 52 | 
 53 | 	return (
 54 | 		<div style={{ textAlign: "left" }}>
 55 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 56 | 				Russia, Canada, China and the USA are the largest countries
 57 | 			</h2>
 58 | 			<p style={{ marginBottom: 4, marginTop: 4, fontSize: 12 }}>Surface area (thousand km2)</p>
 59 | 			<AutoVizuA11y
 60 | 				data={dataTransformed}
 61 | 				type="Tree map"
 62 | 				selectorType={{ element: "rect" }}
 63 | 				descriptor="millions"
 64 | 				insights="y"
 65 | 				title="Russia, Canada, China and the USA are the largest countries"
 66 | 				context={"A few countries like Russia, Canada, China, and USA occupy a significant area. "}
 67 | 				autoDescriptions={{
 68 | 					dynamicDescriptions: false,
 69 | 					apiKey: apiKey,
 70 | 					model: model,
 71 | 					baseUrl: baseUrl,
 72 | 					temperature: 0.1,
 73 | 				}}
 74 | 			>
 75 | 				<svg width={chartDimensions.width} height={chartDimensions.height}>
 76 | 					<Treemap
 77 | 						top={chartDimensions.marginTop}
 78 | 						root={root}
 79 | 						size={[xMax, yMax]}
 80 | 						tile={treemapSquarify}
 81 | 						round
 82 | 					>
 83 | 						{(treemap) => (
 84 | 							<Group>
 85 | 								{treemap.descendants().map((node, i) => {
 86 | 									const nodeWidth = node.x1 - node.x0;
 87 | 									const nodeHeight = node.y1 - node.y0;
 88 | 									return (
 89 | 										<Group
 90 | 											key={`node-${i}`}
 91 | 											top={node.y0 + chartDimensions.marginTop}
 92 | 											left={node.x0 + chartDimensions.marginLeft}
 93 | 										>
 94 | 											{node.depth === 1 && (
 95 | 												<>
 96 | 													<rect
 97 | 														width={nodeWidth}
 98 | 														height={nodeHeight}
 99 | 														strokeWidth={2}
100 | 														stroke="white"
101 | 														fill={node.value > 9000 ? "#D74D51" : "#B3B7C4"}
102 | 													/>
103 | 													{node.data.data.SurfaceValue > 9000 ? (
104 | 														<Text
105 | 															x={node.x0 + 5}
106 | 															y={(node.y1 - node.y0) / 5}
107 | 															style={{
108 | 																fontSize: 10,
109 | 																fill: "white",
110 | 															}}
111 | 														>
112 | 															{node.data.data.Country}
113 | 														</Text>
114 | 													) : null}
115 | 												</>
116 | 											)}
117 | 										</Group>
118 | 									);
119 | 								})}
120 | 							</Group>
121 | 						)}
122 | 					</Treemap>
123 | 				</svg>
124 | 			</AutoVizuA11y>
125 | 		</div>
126 | 	);
127 | }
128 | 
129 | export default Treemap_;
130 | 


--------------------------------------------------------------------------------
/.github/workflows/release_package.yml:
--------------------------------------------------------------------------------
  1 | # 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.
  2 | # 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.
  3 | # 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/>.
  4 | # Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  5 | 
  6 | name: Release new version
  7 | on:
  8 |   workflow_dispatch:
  9 |     inputs:
 10 |       release-type:
 11 |         description: "Release type (one of): patch, minor, major, prepatch, preminor, premajor, prerelease"
 12 |         required: true
 13 | 
 14 | jobs:
 15 |   release:
 16 |     runs-on: ubuntu-latest
 17 |     steps:
 18 |       # Checkout project repository
 19 |       - name: Checkout
 20 |         uses: actions/checkout@v3
 21 | 
 22 |       # Setup Node.js environment
 23 |       - name: Setup Node.js
 24 |         uses: actions/setup-node@v3
 25 |         with:
 26 |           registry-url: https://registry.npmjs.org/
 27 |           node-version: "18"
 28 | 
 29 |       # Install dependencies (required by Run tests step)
 30 |       - name: Install dependencies
 31 |         run: npm install
 32 | 
 33 |       # Build
 34 |       - name: Run build
 35 |         run: npm run build
 36 | 
 37 |       # Configure Git
 38 |       - name: Git configuration
 39 |         run: |
 40 |           git config --global user.name $GITHUB_NAME
 41 |           git config --global user.email $GITHUB_EMAIL
 42 |         env:
 43 |           GITHUB_NAME: ${{ github.event.sender.login }}
 44 |           GITHUB_EMAIL: ${{ github.event.sender.id }}+${{ github.event.sender.login }}@users.noreply.github.com
 45 | 
 46 |       # Bump package version
 47 |       # Use tag latest
 48 |       - name: Bump release version
 49 |         if: startsWith(github.event.inputs.release-type, 'pre') != true
 50 |         run: |
 51 |           echo "NEW_VERSION=$(npm --no-git-tag-version version $RELEASE_TYPE)" >> $GITHUB_ENV
 52 |           echo "RELEASE_TAG=latest" >> $GITHUB_ENV
 53 |         env:
 54 |           RELEASE_TYPE: ${{ github.event.inputs.release-type }}
 55 | 
 56 |       # Bump package pre-release version
 57 |       # Use tag beta for pre-release versions
 58 |       - name: Bump pre-release version
 59 |         if: startsWith(github.event.inputs.release-type, 'pre')
 60 |         run: |
 61 |           echo "NEW_VERSION=$(npm --no-git-tag-version --preid=beta version $RELEASE_TYPE)" >> $GITHUB_ENV
 62 |           echo "RELEASE_TAG=beta" >> $GITHUB_ENV
 63 |         env:
 64 |           RELEASE_TYPE: ${{ github.event.inputs.release-type }}
 65 | 
 66 |       # Update changelog unreleased section with new version
 67 |       - name: Update changelog
 68 |         uses: superfaceai/release-changelog-action@4bba78f5472dbbc2d0d534447a8363a1e6e27518
 69 |         with:
 70 |           path-to-changelog: CHANGELOG.md
 71 |           version: ${{ env.NEW_VERSION }}
 72 |           operation: release
 73 | 
 74 |       # Commit changes
 75 |       - name: Commit CHANGELOG.md and package.json changes and create tag
 76 |         run: |
 77 |           git add "package.json"
 78 |           git add "CHANGELOG.md"
 79 |           git commit -m "chore: release ${{ env.NEW_VERSION }}"
 80 |           git tag ${{ env.NEW_VERSION }}
 81 | 
 82 |       # Publish version to public repository
 83 |       - name: Publish
 84 |         run: npm publish --verbose --access public --tag ${{ env.RELEASE_TAG }}
 85 |         env:
 86 |           NODE_AUTH_TOKEN: ${{ secrets.NPMJS_ACCESS_TOKEN }}
 87 | 
 88 |       # Push repository changes
 89 |       - name: Push changes to repository
 90 |         run: |
 91 |           git push origin && git push --tags
 92 | 
 93 |       # Read version changelog
 94 |       - name: Get version changelog
 95 |         id: get-changelog
 96 |         uses: superfaceai/release-changelog-action@4bba78f5472dbbc2d0d534447a8363a1e6e27518
 97 |         with:
 98 |           path-to-changelog: CHANGELOG.md
 99 |           version: ${{ env.NEW_VERSION }}
100 |           operation: read
101 | 
102 |       # Update GitHub release with changelog
103 |       - name: Update GitHub release documentation
104 |         uses: softprops/action-gh-release@de2c0eb89ae2a093876385947365aca7b0e5f844
105 |         with:
106 |           tag_name: ${{ env.NEW_VERSION }}
107 |           body: ${{ steps.get-changelog.outputs.changelog }}
108 |           prerelease: ${{ startsWith(github.event.inputs.release-type, 'pre') }}
109 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/SingleTimelineAutomatic.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { GridColumns } from "@visx/grid";
  3 | import { Axis } from "@visx/axis";
  4 | import { scaleLinear } from "@visx/scale";
  5 | import { LinePath } from "@visx/shape";
  6 | import countryData from "../../data/country_data.json";
  7 | import { chartDimensions } from "./chart.constants.js";
  8 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  9 | import transformJSON from "../../data/transformJSON.js";
 10 | 
 11 | function SingleSeriesTimeline({ apiKey, model, baseUrl }) {
 12 | 	const intValuesCountryData = countryData.map((country) => {
 13 | 		return {
 14 | 			...country, //copies all countrys first...
 15 | 			Value: parseFloat(country.Value), //...then overwrites pippo
 16 | 		};
 17 | 	});
 18 | 
 19 | 	const sortedCountryData = intValuesCountryData
 20 | 		.slice()
 21 | 		.filter(
 22 | 			(country) =>
 23 | 				country.Series === "Population mid-year estimates (millions)" &&
 24 | 				country["Population, density and surface area"] === "India",
 25 | 		);
 26 | 
 27 | 	const autovizData = Object.fromEntries(
 28 | 		sortedCountryData.map((country, i) => [country["Year"], country.Value]),
 29 | 	);
 30 | 
 31 | 	const accessors = {
 32 | 		xAccessor: (d) => d.Year,
 33 | 		yAccessor: (d) => d.Value,
 34 | 	};
 35 | 	const xMax = 380 - 40 - 20;
 36 | 	const yMax = chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 37 | 
 38 | 	const yScale = scaleLinear({
 39 | 		range: [yMax, 0],
 40 | 		domain: [0, 1500],
 41 | 		nice: true,
 42 | 	});
 43 | 	const xScale = scaleLinear({
 44 | 		range: [0, xMax],
 45 | 		domain: [2010, 2022],
 46 | 	});
 47 | 
 48 | 	const bottomLabelProps = () => ({
 49 | 		"aria-hidden": "true",
 50 | 		fontSize: 12,
 51 | 		textAnchor: "middle",
 52 | 	});
 53 | 	const leftTickLabelProps = () => ({
 54 | 		"aria-hidden": "true",
 55 | 		fontSize: 12,
 56 | 		x: -10,
 57 | 		dy: 5,
 58 | 		textAnchor: "end",
 59 | 	});
 60 | 	const formatDate = (year) => year.toString();
 61 | 
 62 | 	const dataTransformed = transformJSON(autovizData);
 63 | 
 64 | 	return (
 65 | 		<div style={{ textAlign: "left" }}>
 66 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 67 | 				<mark
 68 | 					style={{
 69 | 						backgroundColor: "#965FE6",
 70 | 						color: "black",
 71 | 						paddingLeft: 2,
 72 | 						paddingRight: 2,
 73 | 					}}
 74 | 				>
 75 | 					India's
 76 | 				</mark>{" "}
 77 | 				population went from 1.24 billion in 2010 to 1.42 billion in 2022
 78 | 			</h2>
 79 | 			<p
 80 | 				style={{
 81 | 					marginBottom: 4,
 82 | 					marginTop: 4,
 83 | 					fontSize: 12,
 84 | 					fontStyle: "italic",
 85 | 				}}
 86 | 			>
 87 | 				millions
 88 | 			</p>
 89 | 			<AutoVizuA11y
 90 | 				data={dataTransformed}
 91 | 				insights="y"
 92 | 				type="Single line chart"
 93 | 				selectorType={{ element: "circle" }}
 94 | 				descriptor="millions"
 95 | 				title="India's population went from 1.24 billion in 2010 to 1.42 billion in 2022"
 96 | 				context={"Data portrays the growth in population in India in the last decade "}
 97 | 				autoDescriptions={{
 98 | 					dynamicDescriptions: false,
 99 | 					apiKey: apiKey,
100 | 					model: model,
101 | 					baseUrl: baseUrl,
102 | 					temperature: 0.1,
103 | 				}}
104 | 			>
105 | 				<svg width={380} height={chartDimensions.height}>
106 | 					<Group left={40} top={0}>
107 | 						<GridColumns
108 | 							scale={xScale}
109 | 							numTicks={4}
110 | 							strokeDasharray={[3, 5]}
111 | 							strokeWidth={0.8}
112 | 							width={xMax}
113 | 							height={yMax}
114 | 						></GridColumns>
115 | 						<Axis
116 | 							scale={yScale}
117 | 							orientation="left"
118 | 							nice
119 | 							hideAxisLine
120 | 							numTicks={4}
121 | 							tickLength={5}
122 | 							tickLabelProps={leftTickLabelProps}
123 | 						/>
124 | 						{sortedCountryData.map((circ) => {
125 | 							return (
126 | 								<>
127 | 									<circle
128 | 										cx={xScale(accessors.xAccessor(circ))}
129 | 										cy={yScale(accessors.yAccessor(circ))}
130 | 										r={3}
131 | 										opacity={1}
132 | 										fill={"#965FE6"}
133 | 									></circle>
134 | 								</>
135 | 							);
136 | 						})}
137 | 						<LinePath
138 | 							data={sortedCountryData}
139 | 							x={(d) => xScale(accessors.xAccessor(d))}
140 | 							y={(d) => yScale(accessors.yAccessor(d))}
141 | 							stroke={"#965FE6"}
142 | 							strokeWidth={1}
143 | 						></LinePath>
144 | 						<Axis
145 | 							scale={xScale}
146 | 							orientation="bottom"
147 | 							nice
148 | 							numTicks={4}
149 | 							tickFormat={formatDate}
150 | 							top={yMax}
151 | 							tickLength={5}
152 | 							tickLabelProps={bottomLabelProps}
153 | 						/>
154 | 					</Group>
155 | 				</svg>
156 | 			</AutoVizuA11y>
157 | 		</div>
158 | 	);
159 | }
160 | 
161 | export default SingleSeriesTimeline;
162 | 


--------------------------------------------------------------------------------
/examples/src/components/manual/SingleTimelineManual.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { GridColumns } from "@visx/grid";
  3 | import { Axis } from "@visx/axis";
  4 | import { scaleLinear } from "@visx/scale";
  5 | import { LinePath } from "@visx/shape";
  6 | import countryData from "../../data/country_data.json";
  7 | import { chartDimensions } from "./chart.constants.js";
  8 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  9 | import transformJSON from "../../data/transformJSON.js";
 10 | import CustomShortcutGuide from "../custom_shortcut_guide/components/CustomShortcutGuide.tsx";
 11 | 
 12 | function SingleSeriesTimelineManual({ longDesc, shortDesc }) {
 13 | 	const intValuesCountryData = countryData.map((country) => {
 14 | 		return {
 15 | 			...country, //copies all countrys first...
 16 | 			Value: parseFloat(country.Value), //...then overwrites pippo
 17 | 		};
 18 | 	});
 19 | 
 20 | 	const sortedCountryData = intValuesCountryData
 21 | 		.slice()
 22 | 		.filter(
 23 | 			(country) =>
 24 | 				country.Series === "Population mid-year estimates (millions)" &&
 25 | 				country["Population, density and surface area"] === "India",
 26 | 		);
 27 | 
 28 | 	const autovizData = Object.fromEntries(
 29 | 		sortedCountryData.map((country) => [country["Year"], country.Value]),
 30 | 	);
 31 | 
 32 | 	const accessors = {
 33 | 		xAccessor: (d) => d.Year,
 34 | 		yAccessor: (d) => d.Value,
 35 | 	};
 36 | 	const xMax = 380 - 40 - 20;
 37 | 	const yMax = chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 38 | 
 39 | 	const yScale = scaleLinear({
 40 | 		range: [yMax, 0],
 41 | 		domain: [0, 1500],
 42 | 		nice: true,
 43 | 	});
 44 | 	const xScale = scaleLinear({
 45 | 		range: [0, xMax],
 46 | 		domain: [2010, 2022],
 47 | 	});
 48 | 
 49 | 	const bottomLabelProps = () => ({
 50 | 		"aria-hidden": "true",
 51 | 		fontSize: 12,
 52 | 		textAnchor: "middle",
 53 | 	});
 54 | 	const leftTickLabelProps = () => ({
 55 | 		"aria-hidden": "true",
 56 | 		fontSize: 12,
 57 | 		x: -10,
 58 | 		dy: 5,
 59 | 		textAnchor: "end",
 60 | 	});
 61 | 	const formatDate = (year) => year.toString();
 62 | 
 63 | 	const dataTransformed = transformJSON(autovizData);
 64 | 
 65 | 	return (
 66 | 		<div style={{ textAlign: "left" }}>
 67 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 68 | 				<mark
 69 | 					style={{
 70 | 						backgroundColor: "#965FE6",
 71 | 						color: "black",
 72 | 						paddingLeft: 2,
 73 | 						paddingRight: 2,
 74 | 					}}
 75 | 				>
 76 | 					India's
 77 | 				</mark>{" "}
 78 | 				population went from 1.24 billion in 2010 to 1.42 billion in 2022
 79 | 			</h2>
 80 | 			<p
 81 | 				style={{
 82 | 					marginBottom: 4,
 83 | 					marginTop: 4,
 84 | 					fontSize: 12,
 85 | 					fontStyle: "italic",
 86 | 				}}
 87 | 			>
 88 | 				millions
 89 | 			</p>
 90 | 			<AutoVizuA11y
 91 | 				data={dataTransformed}
 92 | 				type="Single line chart"
 93 | 				selectorType={{ element: "circle" }}
 94 | 				descriptor="millions"
 95 | 				insights="y"
 96 | 				title="India's population went from 1.24 billion in 2010 to 1.42 billion in 2022"
 97 | 				context={"Data portrays the growth in population in India in the last decade "}
 98 | 				manualDescriptions={{
 99 | 					longer: longDesc,
100 | 					shorter: shortDesc,
101 | 				}}
102 | 				shortcutGuide={<CustomShortcutGuide></CustomShortcutGuide>}
103 | 			>
104 | 				<svg width={380} height={chartDimensions.height}>
105 | 					<Group left={40} top={0}>
106 | 						<GridColumns
107 | 							scale={xScale}
108 | 							numTicks={4}
109 | 							strokeDasharray={[3, 5]}
110 | 							strokeWidth={0.8}
111 | 							width={xMax}
112 | 							height={yMax}
113 | 						></GridColumns>
114 | 						<Axis
115 | 							scale={yScale}
116 | 							orientation="left"
117 | 							nice
118 | 							hideAxisLine
119 | 							numTicks={4}
120 | 							tickLength={5}
121 | 							tickLabelProps={leftTickLabelProps}
122 | 						/>
123 | 						{sortedCountryData.map((circ) => {
124 | 							return (
125 | 								<>
126 | 									<circle
127 | 										cx={xScale(accessors.xAccessor(circ))}
128 | 										cy={yScale(accessors.yAccessor(circ))}
129 | 										r={3}
130 | 										opacity={1}
131 | 										fill={"#965FE6"}
132 | 									></circle>
133 | 								</>
134 | 							);
135 | 						})}
136 | 						<LinePath
137 | 							data={sortedCountryData}
138 | 							x={(d) => xScale(accessors.xAccessor(d))}
139 | 							y={(d) => yScale(accessors.yAccessor(d))}
140 | 							stroke={"#965FE6"}
141 | 							strokeWidth={1}
142 | 						></LinePath>
143 | 						<Axis
144 | 							scale={xScale}
145 | 							orientation="bottom"
146 | 							nice
147 | 							numTicks={4}
148 | 							tickFormat={formatDate}
149 | 							top={yMax}
150 | 							tickLength={5}
151 | 							tickLabelProps={bottomLabelProps}
152 | 						/>
153 | 					</Group>
154 | 				</svg>
155 | 			</AutoVizuA11y>
156 | 		</div>
157 | 	);
158 | }
159 | 
160 | export default SingleSeriesTimelineManual;
161 | 


--------------------------------------------------------------------------------
/src/components/descriptions/DescriptionsGenerator.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | 
  8 | import { TFunction } from "i18next";
  9 | 
 10 | import * as constants from "../../constants";
 11 | 
 12 | interface GenerateDescriptionsParams {
 13 | 	title: string;
 14 | 	dataString: string;
 15 | 	average: number;
 16 | 	context: string;
 17 | 	apiKey: string;
 18 | 	model?: string;
 19 | 	baseUrl?: string;
 20 | 	temperature?: number;
 21 | 	t: TFunction<"translation", undefined>;
 22 | }
 23 | 
 24 | interface LongerDescriptionsParam {
 25 | 	data: string;
 26 | 	title: string;
 27 | 	average: number;
 28 | 	context: string;
 29 | 	key: string;
 30 | 	adjustedModel: string;
 31 | 	adjustedLink: URL;
 32 | 	adjustedTemperature: number;
 33 | 	t: TFunction<"translation", undefined>;
 34 | }
 35 | 
 36 | interface SmallerDescriptionsParam {
 37 | 	desc: string;
 38 | 	key: string;
 39 | 	adjustedModel: string;
 40 | 	adjustedLink: URL;
 41 | 	adjustedTemperature: number;
 42 | 	t: TFunction<"translation", undefined>;
 43 | }
 44 | 
 45 | /**
 46 |  * Generates the automatic descriptions.
 47 |  *
 48 |  * @export
 49 |  * @return An array with both longer and smaller descriptions.
 50 |  */
 51 | export async function generateDescriptions({
 52 | 	title,
 53 | 	dataString,
 54 | 	average,
 55 | 	context,
 56 | 	apiKey: key,
 57 | 	model,
 58 | 	baseUrl,
 59 | 	temperature,
 60 | 	t,
 61 | }: GenerateDescriptionsParams): Promise<string[]> {
 62 | 	const adjustedModel = model ?? constants.OPENAI_MODEL;
 63 | 
 64 | 	const adjustedBaseUrl = baseUrl
 65 | 		? baseUrl.endsWith("/")
 66 | 			? baseUrl
 67 | 			: baseUrl + "/"
 68 | 		: constants.OPENAI_BASE_URL;
 69 | 	const adjustedLink = new URL(constants.OPENAI_ENDPOINT, adjustedBaseUrl);
 70 | 
 71 | 	const adjustedTemperature = temperature ?? 0;
 72 | 
 73 | 	// Generates the longer one
 74 | 	const longerDesc = await longerDescription({
 75 | 		data: dataString,
 76 | 		title,
 77 | 		average,
 78 | 		context,
 79 | 		key,
 80 | 		adjustedModel,
 81 | 		adjustedLink,
 82 | 		adjustedTemperature,
 83 | 		t,
 84 | 	});
 85 | 
 86 | 	// Generates the smaller one
 87 | 	const smallerDesc = await smallerDescription({
 88 | 		desc: longerDesc,
 89 | 		key,
 90 | 		adjustedModel,
 91 | 		adjustedLink,
 92 | 		adjustedTemperature,
 93 | 		t,
 94 | 	});
 95 | 	const descs = [longerDesc, smallerDesc];
 96 | 
 97 | 	return descs;
 98 | }
 99 | 
100 | /**
101 |  * Calls the OpenAI or OpenAI-compatible API to generate the longer description.
102 |  *
103 |  * @return Longer chart description.
104 |  */
105 | async function longerDescription({
106 | 	data,
107 | 	title,
108 | 	average,
109 | 	context,
110 | 	key,
111 | 	adjustedModel,
112 | 	adjustedLink,
113 | 	adjustedTemperature,
114 | 	t,
115 | }: LongerDescriptionsParam): Promise<string> {
116 | 	const averageString = average ? t("prompt_average_text") + JSON.stringify(average) : "";
117 | 
118 | 	const prompt = t("prompt_longer_description", { context, title, averageString, data });
119 | 
120 | 	const response = await fetch(adjustedLink, {
121 | 		method: "POST",
122 | 		headers: {
123 | 			"Content-Type": "application/json",
124 | 			Authorization: `Bearer ${key}`,
125 | 		},
126 | 		body: JSON.stringify({
127 | 			model: adjustedModel,
128 | 			messages: [
129 | 				{
130 | 					role: "user",
131 | 					content: prompt,
132 | 				},
133 | 			],
134 | 			temperature: adjustedTemperature,
135 | 		}),
136 | 	});
137 | 	const output = await response.json();
138 | 	return output.choices[0].message.content;
139 | }
140 | 
141 | /**
142 |  * Calls the OpenAI or OpenAI-compatible API to generate the smaller description.
143 |  *
144 |  * @return Smaller chart description.
145 |  */
146 | async function smallerDescription({
147 | 	desc,
148 | 	key,
149 | 	adjustedModel,
150 | 	adjustedLink,
151 | 	adjustedTemperature,
152 | 	t,
153 | }: SmallerDescriptionsParam): Promise<string> {
154 | 	const prompt = t("prompt_shorter_description") + " " + desc;
155 | 
156 | 	const response = await fetch(adjustedLink, {
157 | 		method: "POST",
158 | 		headers: {
159 | 			"Content-Type": "application/json",
160 | 			Authorization: `Bearer ${key}`,
161 | 		},
162 | 		body: JSON.stringify({
163 | 			model: adjustedModel,
164 | 			messages: [
165 | 				{
166 | 					role: "user",
167 | 					content: prompt,
168 | 				},
169 | 			],
170 | 			temperature: adjustedTemperature,
171 | 		}),
172 | 	});
173 | 	const output = await response.json();
174 | 	return output.choices[0].message.content;
175 | }
176 | 


--------------------------------------------------------------------------------
/examples/src/components/manual/BarChartManual.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { GridColumns } from "@visx/grid";
  3 | import { Axis } from "@visx/axis";
  4 | import { scaleBand, scaleLinear } from "@visx/scale";
  5 | import { ascending, descending } from "d3-array";
  6 | import { Text } from "@visx/text";
  7 | import countryData from "../../data/country_data.json";
  8 | import { chartDimensions } from "./chart.constants";
  9 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
 10 | import transformJSON from "../../data/transformJSON.js";
 11 | 
 12 | function BarChartManual({ longDesc, shortDesc }) {
 13 | 	const intValuesCountryData = countryData.map((country) => {
 14 | 		return {
 15 | 			...country, //copies all countrys first...
 16 | 			Value: parseFloat(country.Value), //...then overwrites pippo
 17 | 		};
 18 | 	});
 19 | 
 20 | 	const sortedCountryData = intValuesCountryData
 21 | 		.slice()
 22 | 		.filter(
 23 | 			(country) =>
 24 | 				country.Series === "Population mid-year estimates (millions)" && country.Year === 2022,
 25 | 		)
 26 | 		.sort((a, b) => descending(a.Value, b.Value))
 27 | 		.filter((_, i) => i < 10)
 28 | 		.sort((a, b) => ascending(a.Value, b.Value));
 29 | 
 30 | 	const autovizData = Object.fromEntries(
 31 | 		sortedCountryData.map((country) => [
 32 | 			country["Population, density and surface area"],
 33 | 			country.Value,
 34 | 		]),
 35 | 	);
 36 | 	let sortedArr = Object.entries(autovizData).sort((a, b) => b[1] - a[1]);
 37 | 	let sortedObj = Object.fromEntries(sortedArr);
 38 | 	const accessors = {
 39 | 		xAccessor: (d) => d.Value,
 40 | 		yAccessor: (d) => d["Population, density and surface area"],
 41 | 	};
 42 | 	const xMax = chartDimensions.width - chartDimensions.marginLeft - chartDimensions.marginRight;
 43 | 	const yMax = chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 44 | 
 45 | 	const xScale = scaleLinear({
 46 | 		range: [0, xMax],
 47 | 		domain: [0, 1500],
 48 | 		nice: true,
 49 | 	});
 50 | 	const yScale = scaleBand({
 51 | 		range: [yMax, 0],
 52 | 		domain: sortedCountryData.map((d) => d["Population, density and surface area"]),
 53 | 		padding: 0.3,
 54 | 	});
 55 | 
 56 | 	const bottomLabelProps = () => ({
 57 | 		"aria-hidden": "true",
 58 | 		fontSize: 12,
 59 | 		textAnchor: "middle",
 60 | 	});
 61 | 
 62 | 	const dataTransformed = transformJSON(sortedObj);
 63 | 
 64 | 	return (
 65 | 		<div style={{ textAlign: "left" }}>
 66 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 67 | 				<mark
 68 | 					style={{
 69 | 						backgroundColor: "#00A39E",
 70 | 						color: "black",
 71 | 						paddingLeft: 2,
 72 | 						paddingRight: 2,
 73 | 					}}
 74 | 				>
 75 | 					China
 76 | 				</mark>{" "}
 77 | 				and{" "}
 78 | 				<mark
 79 | 					style={{
 80 | 						backgroundColor: "#965fe6",
 81 | 						color: "black",
 82 | 						paddingLeft: 2,
 83 | 						paddingRight: 2,
 84 | 					}}
 85 | 				>
 86 | 					India
 87 | 				</mark>{" "}
 88 | 				are the most populated countries in the world
 89 | 			</h2>
 90 | 			<p
 91 | 				style={{
 92 | 					marginBottom: 4,
 93 | 					marginTop: 4,
 94 | 					fontSize: 12,
 95 | 					fontStyle: "italic",
 96 | 				}}
 97 | 			>
 98 | 				Top 10 from 2022 (millions)
 99 | 			</p>
100 | 			<AutoVizuA11y
101 | 				data={dataTransformed}
102 | 				type="Bar chart"
103 | 				selectorType={{ element: "rect" }}
104 | 				descriptor="millions"
105 | 				insights="y"
106 | 				title="China and India are the most populated countries"
107 | 				context={
108 | 					"List of the 10 most populated countries according with UN statistics from 2020. Data is in millions. "
109 | 				}
110 | 				manualDescriptions={{
111 | 					longer: longDesc,
112 | 					shorter: shortDesc,
113 | 				}}
114 | 			>
115 | 				<svg width={chartDimensions.width} height={chartDimensions.height}>
116 | 					<Group left={chartDimensions.marginLeft} top={chartDimensions.marginTop}>
117 | 						<GridColumns
118 | 							scale={xScale}
119 | 							numTicks={4}
120 | 							strokeDasharray={[3, 5]}
121 | 							strokeWidth={0.8}
122 | 							width={xMax}
123 | 							height={yMax}
124 | 						></GridColumns>
125 | 						{sortedCountryData
126 | 							.sort((a, b) => descending(a.Value, b.Value))
127 | 							.map((rect) => {
128 | 								const barHeight = 20;
129 | 								const barWidth = xScale(accessors.xAccessor(rect));
130 | 								const barY = yScale(accessors.yAccessor(rect));
131 | 								const barX = 0;
132 | 								const name = rect["Population, density and surface area"];
133 | 								return (
134 | 									<>
135 | 										<rect
136 | 											x={barX}
137 | 											y={barY}
138 | 											width={barWidth}
139 | 											height={barHeight}
140 | 											opacity={1}
141 | 											fill={name === "China" ? "#00A39E" : name === "India" ? "#965fe6" : "#B3B7C4"}
142 | 										></rect>
143 | 										<Text
144 | 											x={name === "China" || name === "India" ? barX + 5 : barWidth + 5}
145 | 											y={barY}
146 | 											dy={15}
147 | 											style={{
148 | 												fontSize: 14,
149 | 												fill: "black",
150 | 											}}
151 | 										>
152 | 											{name}
153 | 										</Text>
154 | 									</>
155 | 								);
156 | 							})}
157 | 						<Axis
158 | 							scale={xScale}
159 | 							orientation="bottom"
160 | 							nice
161 | 							numTicks={4}
162 | 							top={yMax}
163 | 							tickLength={5}
164 | 							tickLabelProps={bottomLabelProps}
165 | 						/>
166 | 					</Group>
167 | 				</svg>
168 | 			</AutoVizuA11y>
169 | 		</div>
170 | 	);
171 | }
172 | 
173 | export default BarChartManual;
174 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/BarChartAutomatic.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { GridColumns } from "@visx/grid";
  3 | import { Axis } from "@visx/axis";
  4 | import { scaleBand, scaleLinear } from "@visx/scale";
  5 | import { ascending, descending } from "d3-array";
  6 | import { Text } from "@visx/text";
  7 | import countryData from "../../data/country_data.json";
  8 | import { chartDimensions } from "./chart.constants.js";
  9 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
 10 | import transformJSON from "../../data/transformJSON.js";
 11 | 
 12 | function BarChart({ apiKey, model, baseUrl }) {
 13 | 	const intValuesCountryData = countryData.map((country) => {
 14 | 		return {
 15 | 			...country, //copies all countrys first...
 16 | 			Value: parseFloat(country.Value), //...then overwrites pippo
 17 | 		};
 18 | 	});
 19 | 
 20 | 	const sortedCountryData = intValuesCountryData
 21 | 		.slice()
 22 | 		.filter(
 23 | 			(country) =>
 24 | 				country.Series === "Population mid-year estimates (millions)" && country.Year === 2022,
 25 | 		)
 26 | 		.sort((a, b) => descending(a.Value, b.Value))
 27 | 		.filter((_, i) => i < 10)
 28 | 		.sort((a, b) => ascending(a.Value, b.Value));
 29 | 
 30 | 	const autovizData = Object.fromEntries(
 31 | 		sortedCountryData.map((country) => [
 32 | 			country["Population, density and surface area"],
 33 | 			country.Value,
 34 | 		]),
 35 | 	);
 36 | 	let sortedArr = Object.entries(autovizData).sort((a, b) => b[1] - a[1]);
 37 | 	let sortedObj = Object.fromEntries(sortedArr);
 38 | 	const accessors = {
 39 | 		xAccessor: (d) => d.Value,
 40 | 		yAccessor: (d) => d["Population, density and surface area"],
 41 | 	};
 42 | 	const xMax = chartDimensions.width - chartDimensions.marginLeft - chartDimensions.marginRight;
 43 | 	const yMax = chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 44 | 
 45 | 	const xScale = scaleLinear({
 46 | 		range: [0, xMax],
 47 | 		domain: [0, 1500],
 48 | 		nice: true,
 49 | 	});
 50 | 	const yScale = scaleBand({
 51 | 		range: [yMax, 0],
 52 | 		domain: sortedCountryData.map((d) => d["Population, density and surface area"]),
 53 | 		padding: 0.3,
 54 | 	});
 55 | 
 56 | 	const bottomLabelProps = () => ({
 57 | 		"aria-hidden": "true",
 58 | 		fontSize: 12,
 59 | 		textAnchor: "middle",
 60 | 	});
 61 | 
 62 | 	const dataTransformed = transformJSON(sortedObj);
 63 | 
 64 | 	return (
 65 | 		<div style={{ textAlign: "left" }}>
 66 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 67 | 				<mark
 68 | 					style={{
 69 | 						backgroundColor: "#00A39E",
 70 | 						color: "black",
 71 | 						paddingLeft: 2,
 72 | 						paddingRight: 2,
 73 | 					}}
 74 | 				>
 75 | 					China
 76 | 				</mark>{" "}
 77 | 				and{" "}
 78 | 				<mark
 79 | 					style={{
 80 | 						backgroundColor: "#965fe6",
 81 | 						color: "black",
 82 | 						paddingLeft: 2,
 83 | 						paddingRight: 2,
 84 | 					}}
 85 | 				>
 86 | 					India
 87 | 				</mark>{" "}
 88 | 				are the most populated countries in the world
 89 | 			</h2>
 90 | 			<p
 91 | 				style={{
 92 | 					marginBottom: 4,
 93 | 					marginTop: 4,
 94 | 					fontSize: 12,
 95 | 					fontStyle: "italic",
 96 | 				}}
 97 | 			>
 98 | 				Top 10 from 2022 (millions)
 99 | 			</p>
100 | 			<AutoVizuA11y
101 | 				data={dataTransformed}
102 | 				type="Bar chart"
103 | 				selectorType={{ element: "rect" }}
104 | 				descriptor="millions"
105 | 				insights="y"
106 | 				title="China and India are the most populated countries"
107 | 				context={
108 | 					"List of the 10 most populated countries according with UN statistics from 2020. Data is in millions. "
109 | 				}
110 | 				autoDescriptions={{
111 | 					dynamicDescriptions: false,
112 | 					apiKey: apiKey,
113 | 					model: model,
114 | 					baseUrl: baseUrl,
115 | 					temperature: 0.1,
116 | 				}}
117 | 			>
118 | 				<svg width={chartDimensions.width} height={chartDimensions.height}>
119 | 					<Group left={chartDimensions.marginLeft} top={chartDimensions.marginTop}>
120 | 						<GridColumns
121 | 							scale={xScale}
122 | 							numTicks={4}
123 | 							strokeDasharray={[3, 5]}
124 | 							strokeWidth={0.8}
125 | 							width={xMax}
126 | 							height={yMax}
127 | 						></GridColumns>
128 | 						{sortedCountryData
129 | 							.sort((a, b) => descending(a.Value, b.Value))
130 | 							.map((rect) => {
131 | 								const barHeight = 20;
132 | 								const barWidth = xScale(accessors.xAccessor(rect));
133 | 								const barY = yScale(accessors.yAccessor(rect));
134 | 								const barX = 0;
135 | 								const name = rect["Population, density and surface area"];
136 | 								return (
137 | 									<>
138 | 										<rect
139 | 											x={barX}
140 | 											y={barY}
141 | 											width={barWidth}
142 | 											height={barHeight}
143 | 											opacity={1}
144 | 											fill={name === "China" ? "#00A39E" : name === "India" ? "#965fe6" : "#B3B7C4"}
145 | 										></rect>
146 | 										<Text
147 | 											x={name === "China" || name === "India" ? barX + 5 : barWidth + 5}
148 | 											y={barY}
149 | 											dy={15}
150 | 											style={{
151 | 												fontSize: 14,
152 | 												fill: "black",
153 | 											}}
154 | 										>
155 | 											{name}
156 | 										</Text>
157 | 									</>
158 | 								);
159 | 							})}
160 | 						<Axis
161 | 							scale={xScale}
162 | 							orientation="bottom"
163 | 							nice
164 | 							numTicks={4}
165 | 							top={yMax}
166 | 							tickLength={5}
167 | 							tickLabelProps={bottomLabelProps}
168 | 						/>
169 | 					</Group>
170 | 				</svg>
171 | 			</AutoVizuA11y>
172 | 		</div>
173 | 	);
174 | }
175 | 
176 | export default BarChart;
177 | 


--------------------------------------------------------------------------------
/examples/src/components/manual/ScatterplotManual.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { GridColumns } from "@visx/grid";
  3 | import { Axis } from "@visx/axis";
  4 | import { scaleLinear } from "@visx/scale";
  5 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  6 | import countryData from "../../data/country_data.json";
  7 | import { chartDimensions } from "./chart.constants";
  8 | import { ascending } from "d3-array";
  9 | 
 10 | function ScatterplotManual({ longDesc, shortDesc }) {
 11 | 	const intValuesCountryData = countryData.map((country) => {
 12 | 		return {
 13 | 			...country,
 14 | 			Value: parseInt(country.Value),
 15 | 		};
 16 | 	});
 17 | 
 18 | 	const populationCountryData = intValuesCountryData
 19 | 		.slice()
 20 | 		.filter(
 21 | 			(country) =>
 22 | 				country.Series === "Population mid-year estimates (millions)" && country.Year === 2022,
 23 | 		);
 24 | 	const surfaceCountryData = intValuesCountryData
 25 | 		.slice()
 26 | 		.filter((country) => country.Series === "Surface area (thousand km2)" && country.Year === 2020)
 27 | 		.map((elem) => {
 28 | 			elem.Surface = elem.Series;
 29 | 			elem.SurfaceValue = elem.Value;
 30 | 			delete elem.Series;
 31 | 			delete elem.Value;
 32 | 			return elem;
 33 | 		});
 34 | 
 35 | 	// Create a mapping of surfaceCountryData based on the common key
 36 | 	const surfaceDataMapping = new Map();
 37 | 	surfaceCountryData.forEach((item) => {
 38 | 		const key = item["Population, density and surface area"];
 39 | 		surfaceDataMapping.set(key, item);
 40 | 	});
 41 | 
 42 | 	const mergedCountryData = populationCountryData
 43 | 		.map((item) => {
 44 | 			const key = item["Population, density and surface area"];
 45 | 			const matchingSurfaceData = surfaceDataMapping.get(key);
 46 | 
 47 | 			if (matchingSurfaceData) {
 48 | 				return {
 49 | 					"Population, density and surface area": key,
 50 | 					Value: item.Value,
 51 | 					SurfaceValue: matchingSurfaceData.SurfaceValue,
 52 | 				};
 53 | 			}
 54 | 
 55 | 			return null; // If no matching entry is found
 56 | 		})
 57 | 		.filter(Boolean) // Remove null entries
 58 | 		.sort((a, b) => ascending(a.SurfaceValue, b.SurfaceValue));
 59 | 
 60 | 	const AutoVizuA11yArray = [];
 61 | 
 62 | 	mergedCountryData.forEach((data) => {
 63 | 		// Create a new object with only the desired keys
 64 | 		const newObj = {
 65 | 			"Population, density and surface area": data["Population, density and surface area"],
 66 | 			Value: data.Value + " million people",
 67 | 			SurfaceValue: data.SurfaceValue + " thousand square kilometers",
 68 | 		};
 69 | 
 70 | 		// Push the new object to the newArray
 71 | 		AutoVizuA11yArray.push(newObj);
 72 | 	});
 73 | 
 74 | 	let mergedCountryDataAux = mergedCountryData.slice(-10);
 75 | 	let AutoVizuA11yArrayAux = AutoVizuA11yArray.slice(-10);
 76 | 
 77 | 	const accessors = {
 78 | 		xAccessor: (d) => d.SurfaceValue,
 79 | 		yAccessor: (d) => d.Value,
 80 | 	};
 81 | 	const xMax = 380 - 40 - 20;
 82 | 	const yMax = chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 83 | 
 84 | 	const yScale = scaleLinear({
 85 | 		range: [yMax, 0],
 86 | 		domain: [0, 1500],
 87 | 		nice: true,
 88 | 	});
 89 | 	// const xScale = scaleLog({
 90 | 	//   range: [0, xMax],
 91 | 	//   domain: [1, 100000],
 92 | 	// });
 93 | 	const xScale = scaleLinear({
 94 | 		range: [0, xMax],
 95 | 		domain: [0, 20000],
 96 | 	});
 97 | 
 98 | 	const bottomLabelProps = () => ({
 99 | 		"aria-hidden": "true",
100 | 		fontSize: 12,
101 | 		textAnchor: "middle",
102 | 	});
103 | 	const leftTickLabelProps = () => ({
104 | 		"aria-hidden": "true",
105 | 		fontSize: 12,
106 | 		x: -10,
107 | 		dy: 5,
108 | 		textAnchor: "end",
109 | 	});
110 | 
111 | 	return (
112 | 		<div style={{ textAlign: "left" }}>
113 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
114 | 				Countries with the highest surface area
115 | 			</h2>
116 | 			<p
117 | 				style={{
118 | 					marginBottom: 4,
119 | 					marginTop: 4,
120 | 					fontSize: 12,
121 | 					fontStyle: "italic",
122 | 				}}
123 | 			>
124 | 				Top 10 from 2020 (millions per thousand km2)
125 | 			</p>
126 | 			<AutoVizuA11y
127 | 				data={AutoVizuA11yArrayAux}
128 | 				type="Scatterplot"
129 | 				selectorType={{ element: "circle" }}
130 | 				descriptor=""
131 | 				insights=""
132 | 				title="Countries with the highest surface area"
133 | 				context={"series of charts depicting world population"}
134 | 				manualDescriptions={{
135 | 					longer: longDesc,
136 | 					shorter: shortDesc,
137 | 				}}
138 | 			>
139 | 				<svg width={380} height={chartDimensions.height}>
140 | 					<Group left={40} top={20}>
141 | 						<GridColumns
142 | 							scale={xScale}
143 | 							numTicks={4}
144 | 							strokeDasharray={[3, 5]}
145 | 							strokeWidth={0.8}
146 | 							width={xMax}
147 | 							height={yMax}
148 | 						></GridColumns>
149 | 						<Axis
150 | 							scale={yScale}
151 | 							orientation="left"
152 | 							nice
153 | 							hideAxisLine
154 | 							numTicks={4}
155 | 							tickLength={5}
156 | 							tickLabelProps={leftTickLabelProps}
157 | 						/>
158 | 						<Axis
159 | 							scale={xScale}
160 | 							orientation="bottom"
161 | 							nice
162 | 							numTicks={4}
163 | 							top={yMax}
164 | 							tickLength={5}
165 | 							tickLabelProps={bottomLabelProps}
166 | 						/>
167 | 						{mergedCountryDataAux.map((circ) => {
168 | 							return (
169 | 								<>
170 | 									<circle
171 | 										cx={xScale(accessors.xAccessor(circ))}
172 | 										cy={yScale(accessors.yAccessor(circ))}
173 | 										r={3}
174 | 										opacity={1}
175 | 										fill={"#43aa8b"}
176 | 									></circle>
177 | 								</>
178 | 							);
179 | 						})}
180 | 					</Group>
181 | 				</svg>
182 | 			</AutoVizuA11y>
183 | 		</div>
184 | 	);
185 | }
186 | 
187 | export default ScatterplotManual;
188 | 


--------------------------------------------------------------------------------
/src/assets/style/NativeShortcutGuide.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 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.
  3 |  * 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.
  4 |  * 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/>.
  5 |  * Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.
  6 |  */
  7 | @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700&display=swap");
  8 | 
  9 | .shortcut-guide {
 10 | 	--shortcut-guide-background-color: rgba(0, 15, 58, 0.35);
 11 | 	--shortcut-guide-color-primary: #000f3a;
 12 | 	--shortcut-guide-font-family: "Roboto", Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,
 13 | 		Helvetica, Arial, sans-serif;
 14 | 	--shortcut-guide-font-size-small: small;
 15 | 	--shortcut-guide-background-light: #ffffff;
 16 | 	--shortcut-guide-backdrop-blur: blur(6.5px);
 17 | 	--shortcut-guide-close-button-color: #aaa;
 18 | 	--shortcut-guide-close-button-hover-color: black;
 19 | 	--shortcut-guide-header-background: #f5f5f7;
 20 | 	--shortcut-guide-border-radius: 0.5rem;
 21 | 	--shortcut-guide-title-font-size: 1rem;
 22 | 	--shortcut-guide-title-font-weight: 700;
 23 | 	--shortcut-guide-cell-background: #f5f5f7;
 24 | 	--shortcut-guide-cell-title-font-size: 0.75rem;
 25 | 	--shortcut-guide-cell-shortcut-font-size: 0.75rem;
 26 | 	--shortcut-guide-cell-shortcut-background: #f5f5f7;
 27 | 	--shortcut-guide-cell-shortcut-height: 1.5rem;
 28 | 	--shortcut-guide-cell-shortcut-width: 110px;
 29 | 	--shortcut-guide-explanation-font-size: 0.688rem;
 30 | 	--shortcut-guide-text-blue: #1c2950;
 31 | 	--shortcut-guide-text-darker-blue: #000f3a;
 32 | }
 33 | 
 34 | .shortcut-guide__container {
 35 | 	font-family: var(--shortcut-guide-font-family);
 36 | 	font-size: var(--shortcut-guide-font-size-small);
 37 | 	margin: 10% auto;
 38 | 	padding: 0;
 39 | 	border: none;
 40 | 	width: 90%;
 41 | 	border-radius: var(--shortcut-guide-border-radius);
 42 | 	background: var(--shortcut-guide-background-light);
 43 | 	backdrop-filter: var(--shortcut-guide-backdrop-blur);
 44 | }
 45 | 
 46 | .shortcut-guide__button-close {
 47 | 	color: var(--shortcut-guide-close-button-color);
 48 | 	font-size: 1.5rem;
 49 | 	background: transparent no-repeat;
 50 | 	border: none;
 51 | 	height: 2rem;
 52 | 	cursor: pointer;
 53 | 	margin: 0;
 54 | }
 55 | 
 56 | /* .shortcut-guide__button-close:hover,
 57 | .shortcut-guide__button-close:focus {
 58 | 	color: var(--shortcut-guide-close-button-hover-color);
 59 | 	text-decoration: none;
 60 | } */
 61 | 
 62 | .shortcut-guide__title {
 63 | 	margin-right: auto;
 64 | 	font-size: var(--shortcut-guide-title-font-size);
 65 | 	font-weight: var(--shortcut-guide-title-font-weight);
 66 | 	color: var(--shortcut-guide-text-darker-blue);
 67 | }
 68 | 
 69 | .shortcut-guide__action-label {
 70 | 	display: none;
 71 | 	margin-right: 0.5rem;
 72 | 	font-weight: 300;
 73 | }
 74 | 
 75 | .shortcut-guide__break {
 76 | 	display: none;
 77 | }
 78 | 
 79 | .shortcut-guide__header {
 80 | 	display: flex;
 81 | 	align-items: center;
 82 | 	justify-content: space-between;
 83 | 	background-color: var(--shortcut-guide-header-background);
 84 | 	padding-left: 1rem;
 85 | 	padding-right: 1rem;
 86 | 	border-radius: var(--shortcut-guide-border-radius) var(--shortcut-guide-border-radius) 0 0;
 87 | 	border: none;
 88 | }
 89 | 
 90 | .shortcut-guide__cell--empty {
 91 | 	display: none;
 92 | }
 93 | 
 94 | .shortcut-guide__list--title {
 95 | 	margin: 0 auto 0 0;
 96 | 	color: var(--shortcut-guide-text-blue);
 97 | }
 98 | 
 99 | .shortcut-guide__list--title,
100 | .shortcut-guide__cell--explanation {
101 | 	text-align: left;
102 | 	padding-left: 0;
103 | 	margin: 0;
104 | }
105 | 
106 | .shortcut-guide__list--title,
107 | .shortcut-guide__cell--shortcut {
108 | 	font-size: var(--shortcut-guide-cell-title-font-size);
109 | }
110 | 
111 | .shortcut-guide__list--title {
112 | 	white-space: nowrap;
113 | 	font-weight: var(--shortcut-guide-title-font-weight);
114 | 	overflow: hidden;
115 | 	text-overflow: ellipsis;
116 | }
117 | 
118 | .shortcut-guide__cell--shortcut {
119 | 	display: flex;
120 | 	align-items: center;
121 | 	justify-content: center;
122 | 	background-color: var(--shortcut-guide-cell-shortcut-background);
123 | 	font-weight: var(--shortcut-guide-title-font-weight);
124 | 	border-radius: 2px;
125 | 	min-height: var(--shortcut-guide-cell-shortcut-height);
126 | 	width: var(--shortcut-guide-cell-shortcut-width);
127 | 	color: var(--shortcut-guide-text-blue);
128 | 	word-wrap: break-word;
129 | 	overflow-wrap: break-word;
130 | 	hyphens: auto;
131 | 	text-align: center;
132 | 	padding: 0.25rem;
133 | 	box-sizing: border-box;
134 | }
135 | 
136 | .shortcut-guide__cell--explanation {
137 | 	display: flex;
138 | 	align-items: center;
139 | 	justify-content: center;
140 | 	font-weight: 400;
141 | 	font-size: var(--shortcut-guide-explanation-font-size);
142 | 	padding-left: 0.75rem;
143 | 	color: var(--shortcut-guide-text-blue);
144 | }
145 | 
146 | .shortcut-guide__row--empty {
147 | 	padding-top: 1rem;
148 | }
149 | 
150 | .shortcut-guide__row {
151 | 	border-collapse: separate;
152 | 	margin: 0.5rem 0;
153 | 	display: flex;
154 | 	flex-direction: row;
155 | }
156 | 
157 | .shortcut-guide__body {
158 | 	display: flex;
159 | 	flex-direction: column;
160 | 	flex-wrap: wrap;
161 | 	align-content: safe space-around;
162 | 	height: 360px;
163 | 	overflow-y: auto;
164 | 	gap: 1rem;
165 | 	margin: 0.5rem 1rem 1rem 1rem;
166 | }
167 | 
168 | .shortcut-guide__section {
169 | 	margin: 0.5rem;
170 | }
171 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/ScatterplotAutomatic.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { GridColumns } from "@visx/grid";
  3 | import { Axis } from "@visx/axis";
  4 | import { scaleLinear } from "@visx/scale";
  5 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  6 | import countryData from "../../data/country_data.json";
  7 | import { chartDimensions } from "./chart.constants";
  8 | import { ascending } from "d3-array";
  9 | 
 10 | function Scatterplot({ apiKey, model, baseUrl }) {
 11 | 	const intValuesCountryData = countryData.map((country) => {
 12 | 		return {
 13 | 			...country,
 14 | 			Value: parseInt(country.Value),
 15 | 		};
 16 | 	});
 17 | 
 18 | 	const populationCountryData = intValuesCountryData
 19 | 		.slice()
 20 | 		.filter(
 21 | 			(country) =>
 22 | 				country.Series === "Population mid-year estimates (millions)" && country.Year === 2022,
 23 | 		);
 24 | 	const surfaceCountryData = intValuesCountryData
 25 | 		.slice()
 26 | 		.filter((country) => country.Series === "Surface area (thousand km2)" && country.Year === 2020)
 27 | 		.map((elem) => {
 28 | 			elem.Surface = elem.Series;
 29 | 			elem.SurfaceValue = elem.Value;
 30 | 			delete elem.Series;
 31 | 			delete elem.Value;
 32 | 			return elem;
 33 | 		});
 34 | 
 35 | 	// Create a mapping of surfaceCountryData based on the common key
 36 | 	const surfaceDataMapping = new Map();
 37 | 	surfaceCountryData.forEach((item) => {
 38 | 		const key = item["Population, density and surface area"];
 39 | 		surfaceDataMapping.set(key, item);
 40 | 	});
 41 | 
 42 | 	const mergedCountryData = populationCountryData
 43 | 		.map((item) => {
 44 | 			const key = item["Population, density and surface area"];
 45 | 			const matchingSurfaceData = surfaceDataMapping.get(key);
 46 | 
 47 | 			if (matchingSurfaceData) {
 48 | 				return {
 49 | 					"Population, density and surface area": key,
 50 | 					Value: item.Value,
 51 | 					SurfaceValue: matchingSurfaceData.SurfaceValue,
 52 | 				};
 53 | 			}
 54 | 
 55 | 			return null; // If no matching entry is found
 56 | 		})
 57 | 		.filter(Boolean) // Remove null entries
 58 | 		.sort((a, b) => ascending(a.SurfaceValue, b.SurfaceValue));
 59 | 
 60 | 	const AutoVizuA11yArray = [];
 61 | 
 62 | 	mergedCountryData.forEach((data) => {
 63 | 		// Create a new object with only the desired keys
 64 | 		const newObj = {
 65 | 			"Population, density and surface area": data["Population, density and surface area"],
 66 | 			Value: data.Value + " million people",
 67 | 			SurfaceValue: data.SurfaceValue + " thousand square kilometers",
 68 | 		};
 69 | 
 70 | 		// Push the new object to the newArray
 71 | 		AutoVizuA11yArray.push(newObj);
 72 | 	});
 73 | 
 74 | 	let mergedCountryDataAux = mergedCountryData.slice(-10);
 75 | 	let AutoVizuA11yArrayAux = AutoVizuA11yArray.slice(-10);
 76 | 
 77 | 	const accessors = {
 78 | 		xAccessor: (d) => d.SurfaceValue,
 79 | 		yAccessor: (d) => d.Value,
 80 | 	};
 81 | 	const xMax = 380 - 40 - 20;
 82 | 	const yMax = chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 83 | 
 84 | 	const yScale = scaleLinear({
 85 | 		range: [yMax, 0],
 86 | 		domain: [0, 1500],
 87 | 		nice: true,
 88 | 	});
 89 | 	// const xScale = scaleLog({
 90 | 	//   range: [0, xMax],
 91 | 	//   domain: [1, 100000],
 92 | 	// })
 93 | 	const xScale = scaleLinear({
 94 | 		range: [0, xMax],
 95 | 		domain: [0, 20000],
 96 | 	});
 97 | 
 98 | 	const bottomLabelProps = () => ({
 99 | 		"aria-hidden": "true",
100 | 		fontSize: 12,
101 | 		textAnchor: "middle",
102 | 	});
103 | 	const leftTickLabelProps = () => ({
104 | 		"aria-hidden": "true",
105 | 		fontSize: 12,
106 | 		x: -10,
107 | 		dy: 5,
108 | 		textAnchor: "end",
109 | 	});
110 | 
111 | 	return (
112 | 		<div style={{ textAlign: "left" }}>
113 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
114 | 				Countries with the highest surface area
115 | 			</h2>
116 | 			<p
117 | 				style={{
118 | 					marginBottom: 4,
119 | 					marginTop: 4,
120 | 					fontSize: 12,
121 | 					fontStyle: "italic",
122 | 				}}
123 | 			>
124 | 				Top 10 from 2020 (millions per thousand km2)
125 | 			</p>
126 | 			<AutoVizuA11y
127 | 				data={AutoVizuA11yArrayAux}
128 | 				type="Scatterplot"
129 | 				selectorType={{ element: "circle" }}
130 | 				descriptor=""
131 | 				insights=""
132 | 				title="Countries with the highest surface area"
133 | 				context={"series of charts depicting world population"}
134 | 				autoDescriptions={{
135 | 					dynamicDescriptions: false,
136 | 					apiKey: apiKey,
137 | 					model: model,
138 | 					baseUrl: baseUrl,
139 | 					temperature: 0.1,
140 | 				}}
141 | 			>
142 | 				<svg width={380} height={chartDimensions.height}>
143 | 					<Group left={40} top={20}>
144 | 						<GridColumns
145 | 							scale={xScale}
146 | 							numTicks={4}
147 | 							strokeDasharray={[3, 5]}
148 | 							strokeWidth={0.8}
149 | 							width={xMax}
150 | 							height={yMax}
151 | 						></GridColumns>
152 | 						<Axis
153 | 							scale={yScale}
154 | 							orientation="left"
155 | 							nice
156 | 							hideAxisLine
157 | 							numTicks={4}
158 | 							tickLength={5}
159 | 							tickLabelProps={leftTickLabelProps}
160 | 						/>
161 | 						<Axis
162 | 							scale={xScale}
163 | 							orientation="bottom"
164 | 							nice
165 | 							numTicks={4}
166 | 							top={yMax}
167 | 							tickLength={5}
168 | 							tickLabelProps={bottomLabelProps}
169 | 						/>
170 | 						{mergedCountryDataAux.map((circ) => {
171 | 							return (
172 | 								<>
173 | 									<circle
174 | 										cx={xScale(accessors.xAccessor(circ))}
175 | 										cy={yScale(accessors.yAccessor(circ))}
176 | 										r={3}
177 | 										opacity={1}
178 | 										fill={"#43aa8b"}
179 | 									></circle>
180 | 								</>
181 | 							);
182 | 						})}
183 | 					</Group>
184 | 				</svg>
185 | 			</AutoVizuA11y>
186 | 		</div>
187 | 	);
188 | }
189 | 
190 | export default Scatterplot;
191 | 


--------------------------------------------------------------------------------
/examples/src/components/automatic/PieAutomatic.jsx:
--------------------------------------------------------------------------------
  1 | import { Group } from "@visx/group";
  2 | import { Pie } from "@visx/shape";
  3 | import { scaleOrdinal } from "@visx/scale";
  4 | import countryData from "../../data/country_data.json";
  5 | import { chartDimensions } from "./chart.constants.js";
  6 | import { Text } from "@visx/text";
  7 | import { AutoVizuA11y } from "@feedzai/autovizua11y";
  8 | import transformJSON from "../../data/transformJSON.js";
  9 | 
 10 | function Pie_({ apiKey, model, baseUrl }) {
 11 | 	const intValuesCountryData = countryData.map((country) => {
 12 | 		return {
 13 | 			...country, //copies all countrys first...
 14 | 			Value: parseInt(country.Value), //...then overwrites pippo
 15 | 		};
 16 | 	});
 17 | 
 18 | 	const populationCountryData = intValuesCountryData
 19 | 		.slice()
 20 | 		.filter(
 21 | 			(country) =>
 22 | 				country.Series === "Population mid-year estimates (millions)" &&
 23 | 				country.Year === 2022 &&
 24 | 				country["Population, density and surface area"] !== "India" &&
 25 | 				country["Population, density and surface area"] !== "China",
 26 | 		);
 27 | 
 28 | 	const shortData = intValuesCountryData
 29 | 		.slice()
 30 | 		.filter(
 31 | 			(country) =>
 32 | 				country.Series === "Population mid-year estimates (millions)" &&
 33 | 				country.Year === 2022 &&
 34 | 				(country["Population, density and surface area"] === "India" ||
 35 | 					country["Population, density and surface area"] === "China"),
 36 | 		);
 37 | 
 38 | 	const sum = {
 39 | 		"Population, density and surface area": "Other Countries",
 40 | 		Value: populationCountryData.reduce((acc, obj) => acc + obj.Value, 0),
 41 | 	};
 42 | 
 43 | 	shortData.push(sum);
 44 | 
 45 | 	const innerWidth =
 46 | 		chartDimensions.width - chartDimensions.marginLeft - chartDimensions.marginRight;
 47 | 	const innerHeight =
 48 | 		chartDimensions.height - chartDimensions.marginTop - chartDimensions.marginBottom;
 49 | 	const radius = Math.min(innerWidth, innerHeight) / 2;
 50 | 	const centerY = innerHeight / 2;
 51 | 	const centerX = innerWidth / 2;
 52 | 	const donutThickness = 50;
 53 | 
 54 | 	const autovizData = Object.fromEntries(
 55 | 		shortData.map((country) => [
 56 | 			country["Population, density and surface area"],
 57 | 			`Population: ${country.Value}`,
 58 | 		]),
 59 | 	);
 60 | 
 61 | 	const value = (d) => d.Value;
 62 | 	const getColor = scaleOrdinal({
 63 | 		domain: ["India", "China", "Other Countries"],
 64 | 		range: ["#965fe6", "#00A39E", "#B3B7C4"],
 65 | 	});
 66 | 
 67 | 	const dataTransformed = transformJSON(autovizData);
 68 | 
 69 | 	return (
 70 | 		<div style={{ textAlign: "left" }}>
 71 | 			<h2 className={"a11y-examples-title"} style={{ marginBottom: 2 }}>
 72 | 				More than one third of the world's population lives in{" "}
 73 | 				<mark
 74 | 					style={{
 75 | 						backgroundColor: "#00A39E",
 76 | 						color: "black",
 77 | 						paddingLeft: 2,
 78 | 						paddingRight: 2,
 79 | 					}}
 80 | 				>
 81 | 					China
 82 | 				</mark>{" "}
 83 | 				and{" "}
 84 | 				<mark
 85 | 					style={{
 86 | 						backgroundColor: "#965fe6",
 87 | 						color: "black",
 88 | 						paddingLeft: 2,
 89 | 						paddingRight: 2,
 90 | 					}}
 91 | 				>
 92 | 					India
 93 | 				</mark>{" "}
 94 | 			</h2>
 95 | 			<p
 96 | 				style={{
 97 | 					marginBottom: 4,
 98 | 					marginTop: 4,
 99 | 					fontSize: 12,
100 | 					fontStyle: "italic",
101 | 				}}
102 | 			>
103 | 				millions
104 | 			</p>
105 | 			<AutoVizuA11y
106 | 				data={dataTransformed}
107 | 				type="Pie chart"
108 | 				selectorType={{ element: "path" }}
109 | 				descriptor="millions"
110 | 				title="More than one third of the world's population lives in China and India"
111 | 				context={
112 | 					"A significant proportion of the world's population is concentrated in these two countries."
113 | 				}
114 | 				insights=""
115 | 				autoDescriptions={{
116 | 					dynamicDescriptions: false,
117 | 					apiKey: apiKey,
118 | 					model: model,
119 | 					baseUrl: baseUrl,
120 | 					temperature: 0.1,
121 | 				}}
122 | 			>
123 | 				<svg width={chartDimensions.width} height={chartDimensions.height}>
124 | 					<Group
125 | 						left={centerX + chartDimensions.marginLeft}
126 | 						top={centerY + chartDimensions.marginTop + chartDimensions.marginBottom}
127 | 					>
128 | 						<Pie
129 | 							data={shortData}
130 | 							pieValue={value}
131 | 							outerRadius={radius}
132 | 							innerRadius={radius - donutThickness}
133 | 							cornerRadius={3}
134 | 							padAngle={0.005}
135 | 						>
136 | 							{(pie) => {
137 | 								return pie.arcs.map((arc, index) => {
138 | 									const [centroidX, centroidY] = pie.path.centroid(arc);
139 | 									const arcPath = pie.path(arc); // svg path for the arc
140 | 									const arcFill = getColor(arc.data["Population, density and surface area"]); // We will use our custom function above to get the color of the shape.
141 | 									return (
142 | 										<>
143 | 											<g key={`arc-${arc.data["Population, density and surface area"]}-${index}`}>
144 | 												<path d={arcPath} fill={arcFill} />
145 | 											</g>
146 | 											<Text
147 | 												x={
148 | 													arc.data["Population, density and surface area"] === "China" ||
149 | 													arc.data["Population, density and surface area"] === "India"
150 | 														? centroidX + 30
151 | 														: centroidX - 90
152 | 												}
153 | 												y={
154 | 													arc.data["Population, density and surface area"] === "China" ||
155 | 													arc.data["Population, density and surface area"] === "Other Countries"
156 | 														? centroidY
157 | 														: centroidY + 40
158 | 												}
159 | 												style={{
160 | 													fontSize: 14,
161 | 													fill:
162 | 														arc.data["Population, density and surface area"] === "China" ||
163 | 														arc.data["Population, density and surface area"] === "India"
164 | 															? "black"
165 | 															: "black",
166 | 												}}
167 | 												width={30}
168 | 											>
169 | 												{arc.data["Population, density and surface area"] + " " + arc.value}
170 | 											</Text>
171 | 										</>
172 | 									);
173 | 								});
174 | 							}}
175 | 						</Pie>
176 | 					</Group>
177 | 				</svg>
178 | 			</AutoVizuA11y>
179 | 		</div>
180 | 	);
181 | }
182 | 
183 | export default Pie_;
184 | 


--------------------------------------------------------------------------------