Added accessibility textures and markers

src/core/chartOptions/Utility/fixtures/verticalbarchartViews.ts

@@ -0,0 +1,108 @@
+import { ETimeVariableInterval, EVisualizationType } from "../../../types";
+import { View } from "../../../types/view";
+
+export const simpleQuarterVerticalBarchartViewFixture: View = {
+    header: {
+        "fi": "Muutos edelliseen neljännekseen (indeksi 2015=100), Koko maa, Talotyypit yhteensä 2023Q1-2023Q4",
+        "sv": "Kvartalsförändring (index 2015=100), Hela landet, Hustyp totalt 2023Q1-2023Q4",
+        "en": "Quarterly change (index 2015=100), Whole country, Building types total 2023Q1-2023Q4"
+    },
+    tableReferenceName: "table.px",
+    subheaderValues: [],
+    units: [
+        {
+            name: {
+                "fi": "Muutos edelliseen neljännekseen (indeksi 2015=100)",
+                "sv": "Kvartalsförändring (index 2015=100)",
+                "en": "Quarterly change (index 2015=100)"
+            },
+            unit: {
+                "fi": "%",
+                "sv": "%",
+                "en": "%"
+            }
+        }
+    ],
+    sources: [
+        {
+            "fi": "PxVisualizer-fi",
+            "sv": "PxVisualizer-sv",
+            "en": "PxVisualizer-en"
+        }
+    ],
+    columnNameGroups: [
+        [
+            {
+                "fi": "2023Q1",
+                "sv": "2023Q1",
+                "en": "2023Q1"
+            }
+        ],
+        [
+            {
+                "fi": "2023Q2",
+                "sv": "2023Q2",
+                "en": "2023Q2"
+            }
+        ],
+        [
+            {
+                "fi": "2023Q3",
+                "sv": "2023Q3",
+                "en": "2023Q3"
+            }
+        ],
+        [
+            {
+                "fi": "2023Q4",
+                "sv": "2023Q4",
+                "en": "2023Q4"
+            }
+        ]
+    ],
+    series: [
+        {
+            rowNameGroup: [],
+            series: [
+                {
+                    "value": 1.2,
+                    "precision": 1,
+                    "preliminary": false
+                },
+                {
+                    "value": -0.8,
+                    "precision": 1,
+                    "preliminary": false
+                },
+                {
+                    "value": 2.5,
+                    "precision": 1,
+                    "preliminary": false
+                },
+                {
+                    "value": 0.3,
+                    "precision": 1,
+                    "preliminary": false
+                }
+            ]
+        }
+    ],
+    colVarNames: [
+        {
+            "fi": "Vuosineljännes",
+            "sv": "Kvartal",
+            "en": "Quarter"
+        }
+    ],
+    rowVarNames: [],
+    selectableVarNames: [],
+    visualizationSettings: {
+        visualizationType: EVisualizationType.VerticalBarChart,
+        timeVariableIntervals: ETimeVariableInterval.Quarter,
+        timeSeriesStartingPoint: "2023-01-01T00:00:00",
+        cutValueAxis: false,
+        showLastLabel: true,
+        showDataPoints: true
+    },
+    seriesType: 0
+};

src/core/chartOptions/Utility/formatters.test.ts

@@ -1,8 +1,8 @@
 import { DataLabelsOptions, Point, Tooltip } from "highcharts";
 import { formatLocale, getDataFormattedForChartType, getDataLabelFormatterFunction, getLineChartToolTipFormatterFunction, getToolTipFormatterFunction, parseScreenReaderFriendlyTimePeriods, shortenStringValue } from "./formatters";
-import { combinationValuesLinechartViewFixture, simpleQuarterLinechartViewFixture } from "./testFixtures/linechartViews";
-import { simpleHorizontalBarchartViewFixture } from "./testFixtures/horizontalbarchartViews";
-import { simpleGroupHorizontalBarchartViewFixture } from "./testFixtures/grouphorizontalbarchartViews";
+import { combinationValuesLinechartViewFixture, simpleQuarterLinechartViewFixture } from "./fixtures/linechartViews";
+import { simpleHorizontalBarchartViewFixture } from "./fixtures/horizontalbarchartViews";
+import { simpleGroupHorizontalBarchartViewFixture } from "./fixtures/grouphorizontalbarchartViews";
 import { View } from "../../types/view";
 
 describe('formatLocale tests', () => {

src/core/chartOptions/Utility/patternFill.test.ts

@@ -0,0 +1,53 @@
+import { buildPatternObject } from "./patternFill";
+import { defaultColors } from "../../highcharts/defaultColors";
+import { defaultFillPatterns } from "../../highcharts/fillPatterns";
+import { PatternOptionsObject } from "highcharts";
+
+describe("buildPatternObject", () => {
+    it("should return a valid PatternObject with the correct color and pattern", () => {
+        const index = 0;
+        const result = buildPatternObject(index);
+
+        expect(result).toHaveProperty("color");
+        expect(result.color).toHaveProperty("pattern");
+
+        const patternObj = result.color.pattern as PatternOptionsObject;
+
+        expect(patternObj.backgroundColor).toBe(defaultColors[index]);
+        expect(patternObj.path).toHaveProperty("d", defaultFillPatterns[index]);
+        expect(patternObj.path).toHaveProperty("stroke", "white");
+        expect(patternObj.path).toHaveProperty("strokeWidth", 2);
+        expect(patternObj).toHaveProperty("width", 10);
+        expect(patternObj).toHaveProperty("height", 10);
+    });
+
+    it("should use the correct defaultFillPatterns for different indices", () => {
+        for (let i = 0; i < defaultFillPatterns.length; i++) {
+            const result = buildPatternObject(i);
+            const patternObj = result.color.pattern as PatternOptionsObject;
+
+            expect(patternObj.path).toHaveProperty('d', defaultFillPatterns[i]);
+        }
+    });
+
+    it("should use the correct defaultColors for different indices", () => {
+        for (let i = 0; i < defaultColors.length; i++) {
+            const result = buildPatternObject(i);
+            const patternObj = result.color.pattern as PatternOptionsObject;
+
+            expect(patternObj.backgroundColor).toBe(defaultColors[i]);
+        }
+    });
+
+    it("if the index exceeds the number of items in the default patterns, start again from the beginning of the list", () => {
+        const result = buildPatternObject(defaultFillPatterns.length);
+        const patternObj = result.color.pattern as PatternOptionsObject;
+        expect(patternObj.path).toHaveProperty('d', defaultFillPatterns[0]);
+    });
+
+    it("if the index exceeds the number of items in the default colors, start again from the beginning of the list", () => {
+        const result = buildPatternObject(defaultColors.length);
+        const patternObj = result.color.pattern as PatternOptionsObject;
+        expect(patternObj.backgroundColor).toBe(defaultColors[0]);
+    });
+});

src/core/chartOptions/Utility/patternFill.ts

@@ -0,0 +1,20 @@
+import { PatternObject } from "highcharts";
+import { defaultColors } from "../../highcharts/defaultColors";
+import { defaultFillPatterns } from "../../highcharts/fillPatterns";
+
+export function buildPatternObject(index: number): { color: PatternObject } {
+    return {
+        color: {
+            pattern: {
+                backgroundColor: defaultColors[index % defaultColors.length],
+                path: {
+                    stroke: "white",
+                    d: defaultFillPatterns[index % defaultFillPatterns.length],
+                    strokeWidth: 2
+                },
+                width: 10,
+                height: 10
+            }
+        }
+    }
+}

src/core/chartOptions/Utility/seriesDataBuilder.test.ts

@@ -1,6 +1,7 @@
-import { buildHighchartSeries } from "./seriesDataBuilder";
-import { simpleGroupHorizontalBarchartViewFixture } from "./testFixtures/grouphorizontalbarchartViews";
-import { simpleQuarterLinechartViewFixture } from "./testFixtures/linechartViews";
+import { buildLineChartSeries, buildBarChartSeries, buildColumnChartSeries } from "./seriesDataBuilder";
+import { simpleGroupHorizontalBarchartViewFixture } from "./fixtures/grouphorizontalbarchartViews";
+import { simpleQuarterLinechartViewFixture } from "./fixtures/linechartViews";
+import { simpleQuarterVerticalBarchartViewFixture } from "./fixtures/verticalbarchartViews";
 
 describe('Highcharts series builder tests', () => {
 
@@ -81,13 +82,25 @@ describe('Highcharts series builder tests', () => {
             }
         ];
 
-        expect(buildHighchartSeries(simpleQuarterLinechartViewFixture, 'line', 'fi')).toEqual(expectedSeries);
+        expect(buildLineChartSeries(simpleQuarterLinechartViewFixture, 'fi')).toEqual(expectedSeries);
     });
 
-    it('Should return valid series for group horizontal bar charts', () => {
+    it('Should return valid series for group horizontal bar charts with accessibility patterns', () => {
         const expectedSeries = [
             {
                 animation: false,
+                color: {
+                    pattern: {
+                        backgroundColor: "#1a56ec",
+                        height: 10,
+                        path: {
+                            d: "M -2 -2 L 12 12 M -12 -2 L 2 12 M -2 -12 L 12 2",
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        width: 10,
+                    }
+                },
                 data: [
                     {
                         custom: { "precision": 0, "preliminary": false },
@@ -106,6 +119,18 @@ describe('Highcharts series builder tests', () => {
             },
             {
                 animation: false,
+                color: {
+                    pattern: {
+                        backgroundColor: "#f2644c",
+                        height: 10,
+                        path: {
+                            d: "M -2 12 L 12 -2 M -12 12 L 2 -2 M -2 22 L 12 8",
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        width: 10,
+                    },
+                },
                 data: [
                     {
                         custom: { "precision": 0, "preliminary": false },
@@ -124,6 +149,131 @@ describe('Highcharts series builder tests', () => {
             }
         ];
 
-        expect(buildHighchartSeries(simpleGroupHorizontalBarchartViewFixture, 'bar', 'fi')).toEqual(expectedSeries);
+        expect(buildBarChartSeries(simpleGroupHorizontalBarchartViewFixture, 'fi', false, true)).toEqual(expectedSeries);
+    });
+
+    it('Should return valid series for vertical bar chart with accesibility patterns', () => {
+        const expectedSeries = [
+            {
+                animation: false,
+                color: {
+                    pattern: {
+                        backgroundColor: "#1a56ec",
+                        height: 10,
+                        path: {
+                            d: "M -2 -2 L 12 12 M -12 -2 L 2 12 M -2 -12 L 12 2",
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        width: 10,
+                    },
+                },
+                data: [
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q1",
+                        "y": 1.2
+                    },
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q2",
+                        y: -0.8
+                    },
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q3",
+                        y: 2.5
+                    },
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q4",
+                        y: 0.3
+                    }
+                ],
+                index: 0,
+                name: "",
+                type: "column"
+            }
+        ];
+
+        expect(buildColumnChartSeries(simpleQuarterVerticalBarchartViewFixture, 'fi', false, true)).toEqual(expectedSeries);
+    });
+
+    it('Should return valid series for group horizontal bar charts without patterns', () => {
+        const expectedSeries = [
+            {
+                animation: false,
+                data: [
+                    {
+                        custom: { "precision": 0, "preliminary": false },
+                        name: "Vapaarahoitteinen",
+                        "y": 11096
+                    },
+                    {
+                        custom: { "precision": 0, "preliminary": false },
+                        name: "ARA",
+                        y: 4845
+                    }
+                ],
+                index: 0,
+                name: "2015Q1",
+                type: "bar"
+            },
+            {
+                animation: false,
+                data: [
+                    {
+                        custom: { "precision": 0, "preliminary": false },
+                        name: "Vapaarahoitteinen",
+                        "y": 11625
+                    },
+                    {
+                        custom: { "precision": 0, "preliminary": false },
+                        name: "ARA",
+                        y: 5174
+                    }
+                ],
+                index: 1,
+                name: "2015Q2",
+                type: "bar"
+            }
+        ];
+
+        expect(buildBarChartSeries(simpleGroupHorizontalBarchartViewFixture, 'fi')).toEqual(expectedSeries);
+    });
+
+    it('Should return valid series for vertical bar chart without patterns', () => {
+        const expectedSeries = [
+            {
+                animation: false,
+                data: [
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q1",
+                        "y": 1.2
+                    },
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q2",
+                        y: -0.8
+                    },
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q3",
+                        y: 2.5
+                    },
+                    {
+                        custom: { "precision": 1, "preliminary": false },
+                        name: "2023Q4",
+                        y: 0.3
+                    }
+                ],
+                index: 0,
+                name: "",
+                type: "column"
+            }
+        ];
+
+        expect(buildColumnChartSeries(simpleQuarterVerticalBarchartViewFixture, 'fi')).toEqual(expectedSeries);
     });
 });