Release v1.4.0 RC1

.storybook/preview.ts

@@ -15,11 +15,43 @@ const preview: Preview = {
                   name: 'Website',
                   styles: {
                       width: '766px',
-                      height: '600px',
+                      height: '635px',
+                  },
+                  type: 'desktop',
+              },
+              small: {
+                  name: 'Small screen',
+                  styles: {
+                      width: '383px',
+                      height: '300px',
+                  },
+                  type: 'desktop',
+              },
+              large: {
+                  name: 'Large screen',
+                  styles: {
+                      width: '1150px',
+                      height: '900px'
                   },
                   type: 'desktop',
               },
-          },
+              mobile: {
+                  name: 'Mobile',
+                  styles: {
+                      width: '540px',
+                      height: '960px',
+                  },
+                  type: 'mobile',
+              },
+              tablet: {
+                  name: 'Tablet',
+                  styles: {
+                      width: '900px',
+                      height: '600px',
+                  },
+                  type: 'tablet',
+              },
+          }
       },
   },
   tags: ['autodocs']

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsfinland/pxvisualizer",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Component library for visualizing PxGraf data",
   "main": "./dist/pxv.cjs",
   "jestSonar": {

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

@@ -1,5 +1,5 @@
 import { DataLabelsOptions, Point, Tooltip } from "highcharts";
-import { formatLocale, getDataFormattedForChartType, getDataLabelFormatterFunction, getLineChartToolTipFormatterFunction, getToolTipFormatterFunction, parseScreenReaderFriendlyTimePeriods, shortenStringValue } from "./formatters";
+import { formatLocale, getDataFormattedForChartType, getDataLabelFormatterFunction, getLineChartToolTipFormatterFunction, getToolTipFormatterFunction, parseScreenReaderFriendlyTimePeriods, shortenStringValue, getFormattedLastUpdatedText } from "./formatters";
 import { combinationValuesLinechartViewFixture, multiselectableLineChartViewFixture, simpleQuarterLinechartViewFixture } from "./fixtures/linechartViews";
 import { simpleHorizontalBarchartViewFixture } from "./fixtures/horizontalbarchartViews";
 import { simpleGroupHorizontalBarchartViewFixture } from "./fixtures/grouphorizontalbarchartViews";
@@ -421,4 +421,31 @@ describe('getDataFormattedForChartType tests', () => {
         const result: string = getDataFormattedForChartType(view, point, 'en', 2);
         expect(result).toBe('12.0% (123.46 kg)');
     });
+});
+
+describe('getFormattedLastUpdatedText tests', () => {
+    it('should format last updated text correctly for Finnish locale', () => {
+        const result = getFormattedLastUpdatedText('2025-09-23', 'fi');
+        expect(result).toBe('Päivitetty: 23.9.2025');
+    });
+
+    it('should format last updated text correctly for Swedish locale', () => {
+        const result = getFormattedLastUpdatedText('2025-09-23', 'sv');
+        expect(result).toBe('Uppdaterad: 2025-09-23');
+    });
+
+    it('should format last updated text correctly for English locale to British English', () => {
+        const result = getFormattedLastUpdatedText('2025-09-23', 'en');
+        expect(result).toBe('Updated: 23/09/2025');
+    });
+
+    it('should return undefined for undefined input', () => {
+        const result = getFormattedLastUpdatedText(undefined, 'fi');
+        expect(result).toBeUndefined();
+    });
+
+    it('should return undefined for invalid date', () => {
+        const result = getFormattedLastUpdatedText('invalid-date', 'fi');
+        expect(result).toBeUndefined();
+    });
 });

src/core/chartOptions/Utility/formatters.ts

@@ -256,4 +256,27 @@ function parsePlacementSuffix(value: string, locale: string) {
     } else {
         return `${value}.`;
     }
+}
+
+/**
+ * Formats the last updated text based on the provided date string and locale.
+ * @param lastUpdated Date string representing the last updated date.
+ * @param locale Locale string for formatting the date.
+ * @returns Formatted last updated text or undefined if input is invalid.
+ */
+export function getFormattedLastUpdatedText(lastUpdated: string | undefined, locale: string): string | undefined {
+    if (!lastUpdated) return undefined;
+
+    try {
+        const date = new Date(lastUpdated);
+        if (Number.isNaN(date.getTime())) return undefined;
+
+        const dateLocale = locale === 'en' ? 'en-GB' : locale; // Use en-GB for English to get DD/MM/YYYY format if not specified
+        const formattedDate: string = Intl.DateTimeFormat(dateLocale).format(date);
+
+        return `${Translations.lastUpdated[locale]}: ${formattedDate}`;
+    } catch (error) {
+        console.error('Error formatting date:', error);
+        return undefined;
+    }
 }

src/core/chartOptions/chartOptions.ts

@@ -1,23 +1,64 @@
 import { LegendOptions, Options, PlotSeriesDataLabelsOptions, YAxisOptions } from 'highcharts';
 import { View } from "../types/view";
-import { getAxisLabelShorteningFunction, getFormattedUnits, getToolTipFormatterFunction, getScreenReaderFormatterCallbackFunction, getDataLabelFormatterFunction } from './Utility/formatters';
-import { Translations } from '../conversion/translations';
+import { getAxisLabelShorteningFunction, getFormattedUnits, getToolTipFormatterFunction, getScreenReaderFormatterCallbackFunction, getDataLabelFormatterFunction, getFormattedLastUpdatedText } from './Utility/formatters';
 import { getXAxisOptions } from './Utility/timeIntervals';
 import { getLinearAxisTickPositionerFunction } from './Utility/tickPositioners';
 import { IChartOptions } from '../types/chartOptions';
 import { buildBarChartSeries, buildColumnChartSeries } from './Utility/seriesDataBuilder';
+import { Translations } from "../conversion/translations";
 
 export const commonChartOptions = (view: View, locale: string, options?: IChartOptions): Options => {
-    const showTitle: boolean = options?.showTitle ?? true;
+    const showTitles: boolean = options?.showTitles ?? true;
+
+    const sourceText = Translations.source[locale];
+    let creditsText = `${sourceText}: ${view.sources.map(s => s[locale]).join(', ')}`;
+    let creditsConfig: any = {
+        enabled: true,
+        text: creditsText
+    };
+
+    const hasLastUpdated = options?.showLastUpdated && view.lastUpdated;
+
+    if (hasLastUpdated) {
+        const lastUpdatedText = getFormattedLastUpdatedText(view.lastUpdated, locale);
+        if (lastUpdatedText) {
+            creditsText = `${lastUpdatedText}<br>${sourceText}: ${view.sources.map(s => s[locale]).join(', ')}`;
+            creditsConfig = {
+                enabled: true,
+                text: creditsText,
+                useHTML: true,
+                position: {
+                    x: 5,
+                    y: -30  // More space needed for two-line credits
+                }
+            };
+        }
+    } else {
+        // Single line credits, less spacing needed
+        creditsConfig = {
+            enabled: true,
+            text: creditsText,
+            position: {
+                align: 'left',
+                verticalAlign: 'bottom',
+                x: 5,
+                y: -10  // Less space needed for single line
+            }
+        };
+    }
+
     return {
+        chart: {
+            spacingBottom: hasLastUpdated ? 50 : 30  // Conditional spacing based on lastUpdated presence
+        },
         accessibility: {
             point: {
                 descriptionFormatter: getScreenReaderFormatterCallbackFunction(view, locale)
             }
         },
-        title: { text: showTitle ? view.header[locale] : undefined },
+        title: { text: showTitles ? view.header[locale] : undefined },
         subtitle: { text: view.subheaderValues.map(sv => sv[locale]).join(' | ') },
-        credits: { text: `${Translations.source[locale]}: ${view.sources.map(s => s[locale]).join(', ')}` },
+        credits: creditsConfig,
         tooltip: {
             formatter: getToolTipFormatterFunction(view, locale)
         },

src/core/chartOptions/pieChartOptions.ts

@@ -7,7 +7,7 @@ import { buildPatternObject } from './Utility/patternFill';
 
 export const pieChartOptions = (view: View, locale: string, options?: IChartOptions): Options => {
     return {
-        ...commonChartOptions(view, locale),
+        ...commonChartOptions(view, locale, options),
         chart: { type: 'pie' },
         plotOptions: {
             pie: {

src/core/conversion/fixtures/percentHorizontalBarChart.ts

@@ -222,6 +222,7 @@ export const PERCENT_HORIZONTAL_BAR_CHART_VIEW: View = {
         "sv": "Antal, Enrumslägenhet 2022Q4 efter Område, Finansieringssätt",
         "en": "Number, One-room flat 2022Q4 by Region, Type of funding"
     },
+    lastUpdated: "2023-01-19T06:00:00Z",
     subheaderValues: [],
     units: [
         {
@@ -595,6 +596,7 @@ export const PERCENT_HORIZONTAL_BAR_CHART_WITH_SELECTABLES_VIEW: View = {
         "sv": "Antal 2022Q4 efter Område, Antal rum, Finansieringssätt",
         "en": "Number 2022Q4 by Region, Number of rooms, Type of funding"
     },
+    "lastUpdated": "2023-01-19T06:00:00Z",
     subheaderValues: [
         {
             "fi": "Kaksiot",

src/core/conversion/fixtures/percentVerticalBarChart.ts

@@ -280,6 +280,7 @@ export const PERCENT_VERTICAL_BAR_CHART_VIEW: View = {
         "sv": "Antal, Helsingfors, Fri finansierad 2021Q2-2022Q4 efter Antal rum",
         "en": "Number, Helsinki, Non subsidised 2021Q2-2022Q4 by Number of rooms"
     },
+    lastUpdated: "2023-01-19T06:00:00Z",
     subheaderValues: [],
     units: [{
         name: {
@@ -843,6 +844,7 @@ export const PERCENT_VERTICAL_BAR_CHART_WITH_SELECTABLES_VIEW: View = {
         "sv": "Antal 2021Q4 efter Område, Antal rum, Finansieringssätt",
         "en": "Number 2021Q4 by Region, Number of rooms, Type of funding"
     },
+    lastUpdated: "2023-01-19T06:00:00Z",
     subheaderValues: [
         {
             "fi": "2022Q1",
@@ -1241,6 +1243,7 @@ export const PERCENT_VERTICAL_BAR_CHART_PIVOTED_WITH_SELECTABLES_VIEW: View = {
         "sv": "Antal 2022Q4 efter Område, Antal rum, Finansieringssätt",
         "en": "Number 2022Q4 by Region, Number of rooms, Type of funding"
     },
+    lastUpdated: "2023-01-19T06:00:00Z",
     subheaderValues: [
         {
             "fi": "Vapaarahoitteinen",

src/core/conversion/translations/defaultTranslations.ts

@@ -330,6 +330,11 @@ export const DefaultTranslations: TTranslations = {
         'fi': 'Poista kuviosta symbolit',
         'sv': 'Ta bort symbolerna från diagrammet',
         'en': 'Remove symbols from the figure'
+    },
+    lastUpdated: {
+        'fi': 'Päivitetty',
+        'sv': 'Uppdaterad',
+        'en': 'Updated'
     }
 }
 

src/core/conversion/translations/translationManager.test.ts

@@ -199,6 +199,9 @@ const mockTranslationPackage: TTranslationPackage = {
         },
         toggleAccessibilityModeOff: {
             'foo': 'Piilota kuviosta symbolit',
+        },
+        lastUpdated: {
+            'foo': 'Päivitetty: {date}',
         }
     },
     ArrayTranslations: {

src/core/conversion/translations/translationTypes.ts

@@ -67,6 +67,7 @@ export type TTranslations = {
     dataMissing: TMultiLanguageString;
     toggleAccessibilityModeOn: TMultiLanguageString;
     toggleAccessibilityModeOff: TMultiLanguageString;
+    lastUpdated: TMultiLanguageString;
 }
 
 export type TArrayTranslations = {