Skip to content

[Fix] Replace credits field with captions #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sakari-malkki merged 14 commits into from
Nov 7, 2025
Merged

[Fix] Replace credits field with captions #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9de30c4
Merge pull request #76 from StatisticsFinland/dev
sakari-malkki Feb 3, 2025
b6b9dcb
Merge pull request #80 from StatisticsFinland/dev
sakari-malkki Feb 5, 2025
620fc0d
Merge pull request #83 from StatisticsFinland/dev
sakari-malkki Feb 5, 2025
0f80ea8
Merge pull request #86 from StatisticsFinland/dev
sakari-malkki Mar 6, 2025
029c2c9
Merge pull request #94 from StatisticsFinland/dev
sakari-malkki Apr 3, 2025
59cbbcc
Merge pull request #97 from StatisticsFinland/dev
sakari-malkki Apr 7, 2025
560daf3
Merge pull request #101 from StatisticsFinland/dev
sakari-malkki Apr 15, 2025
6e0d0fe
Merge pull request #106 from StatisticsFinland/dev
sakari-malkki Apr 25, 2025
d9dcab3
Merge pull request #109 from StatisticsFinland/dev
sakari-malkki Jun 4, 2025
ce9a894
Merge pull request #114 from StatisticsFinland/dev
sakari-malkki Sep 3, 2025
510025f
Merge pull request #119 from StatisticsFinland/dev
sakari-malkki Oct 1, 2025
0cea0e2
Merge pull request #124 from StatisticsFinland/dev
sakari-malkki Oct 22, 2025
47bb054
Merge pull request #127 from StatisticsFinland/dev
sakari-malkki Nov 3, 2025
6ac4df4
Replaces credits field with more responsive caption field
sakari-malkki Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 2 additions & 27 deletions src/core/chartOptions/chartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,13 @@ export const commonChartOptions = (view: View, locale: string, options?: IChartO

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 {
Expand All @@ -58,7 +32,8 @@ export const commonChartOptions = (view: View, locale: string, options?: IChartO
},
title: { text: showTitles ? view.header[locale] : undefined },
subtitle: { text: view.subheaderValues.map(sv => sv[locale]).join(' | ') },
credits: creditsConfig,
credits: { enabled: false },
caption: { text: creditsText },
tooltip: {
formatter: getToolTipFormatterFunction(view, locale)
},
Expand Down
48 changes: 24 additions & 24 deletions src/core/conversion/pxGrafDataConverter.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ describe('PxGrafDataConverter tests, VerticalBarChart', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('column');
expect(result.title?.text).toBe('Lukumäärä 2015Q1 muuttujina Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('2015Q1 | Pääkaupunkiseutu (PKS) | Vapaarahoitteinen');
});

Expand All @@ -217,7 +217,7 @@ describe('PxGrafDataConverter tests, VerticalBarChart', () => {
const result = convertPxGraphDataToChartOptions('sv', mockView);
expect(result.chart?.type).toBe('column');
expect(result.title?.text).toBe('Antal 2015Q1 efter Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('2015Q1 | Huvudstadsregionen | Fri finansierad');
});
});
Expand All @@ -229,7 +229,7 @@ describe('PxGrafDataConverter tests, BasicHorizontalBarChart', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('bar');
expect(result.title?.text).toBe('Tiedot 2022Q4 muuttujina Tiedot, Alue, Huoneluku');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('Yksiöt | Lukumäärä');
});

Expand All @@ -239,7 +239,7 @@ describe('PxGrafDataConverter tests, BasicHorizontalBarChart', () => {
const result = convertPxGraphDataToChartOptions('en', mockView);
expect(result.chart?.type).toBe('bar');
expect(result.title?.text).toBe('Information 2022Q4 by Information, Region, Number of rooms');
expect(result.credits?.text).toBe('Source: PxVisualizer-en');
expect(result.caption?.text).toBe('Source: PxVisualizer-en');
expect(result.subtitle?.text).toBe('One-room flat | Number');
});
});
Expand All @@ -251,7 +251,7 @@ describe('PxGrafDataConverter tests, GroupHorizontalBarChart', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('bar');
expect(result.title?.text).toBe('Tiedot 2015Q1-2015Q2 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('Pääkaupunkiseutu (PKS) | Yksiöt | Lukumäärä');
});

Expand All @@ -261,7 +261,7 @@ describe('PxGrafDataConverter tests, GroupHorizontalBarChart', () => {
const result = convertPxGraphDataToChartOptions('en', mockView);
expect(result.chart?.type).toBe('bar');
expect(result.title?.text).toBe('Information 2015Q1-2015Q2 by Information, Region, Number of rooms, Type of funding');
expect(result.credits?.text).toBe('Source: PxVisualizer-en');
expect(result.caption?.text).toBe('Source: PxVisualizer-en');
expect(result.subtitle?.text).toBe('Greater Helsinki | One-room flat | Number');
});
});
Expand All @@ -273,7 +273,7 @@ describe('PxGrafDataConverter tests, PieBarChart', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('pie');
expect(result.title?.text).toBe('Lukumäärä, Yksiöt 2022Q4 muuttujana Alue');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('');
});

Expand All @@ -283,7 +283,7 @@ describe('PxGrafDataConverter tests, PieBarChart', () => {
const result = convertPxGraphDataToChartOptions('en', mockView);
expect(result.chart?.type).toBe('pie');
expect(result.title?.text).toBe('Number, One-room flat 2022Q4 by Region');
expect(result.credits?.text).toBe('Source: PxVisualizer-en');
expect(result.caption?.text).toBe('Source: PxVisualizer-en');
expect(result.subtitle?.text).toBe('');
});
});
Expand All @@ -295,7 +295,7 @@ describe('PxGrafDataConverter tests, GroupVerticalBarChart', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('column');
expect(result.title?.text).toBe('Tiedot 2015Q1-2015Q2 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('Pääkaupunkiseutu (PKS) | Yksiöt | Lukumäärä');
});

Expand All @@ -305,7 +305,7 @@ describe('PxGrafDataConverter tests, GroupVerticalBarChart', () => {
const result = convertPxGraphDataToChartOptions('sv', mockView);
expect(result.chart?.type).toBe('column');
expect(result.title?.text).toBe('Uppgifter 2015Q1-2015Q2 efter Uppgifter, Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('Huvudstadsregionen | Enrumslägenhet | Antal');
});
});
Expand All @@ -318,7 +318,7 @@ describe('PxGrafDataConverter tests, StackedVerticalBarChart', () => {
expect(result.chart?.type).toBe('column');
expect(result.plotOptions?.column?.stacking).toBe('normal');
expect(result.title?.text).toBe('Tiedot 2015Q1-2015Q2 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('Pääkaupunkiseutu (PKS) | Yksiöt | Lukumäärä');
});

Expand All @@ -329,7 +329,7 @@ describe('PxGrafDataConverter tests, StackedVerticalBarChart', () => {
expect(result.chart?.type).toBe('column');
expect(result.plotOptions?.column?.stacking).toBe('normal');
expect(result.title?.text).toBe('Uppgifter 2015Q1-2015Q2 efter Uppgifter, Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('Huvudstadsregionen | Enrumslägenhet | Antal');
});
});
Expand All @@ -342,7 +342,7 @@ describe('PxGrafDataConverter tests, StackedHorizontalBarChart', () => {
expect(result.chart?.type).toBe('bar');
expect(result.plotOptions?.bar?.stacking).toBe('normal');
expect(result.title?.text).toBe('Tiedot 2015Q1 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('2015Q1 | Pääkaupunkiseutu (PKS) | Yksiöt');
});

Expand All @@ -353,7 +353,7 @@ describe('PxGrafDataConverter tests, StackedHorizontalBarChart', () => {
expect(result.chart?.type).toBe('bar');
expect(result.plotOptions?.bar?.stacking).toBe('normal');
expect(result.title?.text).toBe('Uppgifter 2015Q1 efter Uppgifter, Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('2015Q1 | Huvudstadsregionen | Enrumslägenhet');
});
});
Expand All @@ -371,7 +371,7 @@ describe('PxGrafDataConverter tests, PercentVerticalBarChart', () => {
expect(result.chart?.type).toBe('column');
expect(result.plotOptions?.column?.stacking).toBe('percent');
expect(result.title?.text).toBe('Lukumäärä 2021Q4 muuttujina Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('2022Q1 | Yksiöt');
});

Expand All @@ -387,7 +387,7 @@ describe('PxGrafDataConverter tests, PercentVerticalBarChart', () => {
expect(result.chart?.type).toBe('column');
expect(result.plotOptions?.column?.stacking).toBe('percent');
expect(result.title?.text).toBe('Antal 2021Q4 efter Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('2022Q1 | Enrumslägenhet');
});
});
Expand All @@ -405,7 +405,7 @@ describe('PxGrafDataConverter tests, PercentHorizontalBarChart', () => {
expect(result.chart?.type).toBe('bar');
expect(result.plotOptions?.bar?.stacking).toBe('percent');
expect(result.title?.text).toBe('Lukumäärä 2022Q4 muuttujina Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('Kaksiot');
});

Expand All @@ -421,7 +421,7 @@ describe('PxGrafDataConverter tests, PercentHorizontalBarChart', () => {
expect(result.chart?.type).toBe('bar');
expect(result.plotOptions?.bar?.stacking).toBe('percent');
expect(result.title?.text).toBe('Antal 2022Q4 efter Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('Tvårumslägenhet');
});
});
Expand All @@ -434,7 +434,7 @@ describe('PxGrafDataConverter tests, PyramidChart', () => {
expect(result.chart?.type).toBe('bar');
expect(result.plotOptions?.series?.stacking).toBe('normal');
expect(result.title?.text).toBe('Väestö 31.12. 2020 muuttujina Alue, Ikä, Sukupuoli');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('KOKO MAA | 2020');
});

Expand All @@ -445,7 +445,7 @@ describe('PxGrafDataConverter tests, PyramidChart', () => {
expect(result.chart?.type).toBe('bar');
expect(result.plotOptions?.series?.stacking).toBe('normal');
expect(result.title?.text).toBe('Befolkning 31.12. 2020 efter Område, Ålder, Kön');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('HELA LANDET | 2020');
});
});
Expand All @@ -457,7 +457,7 @@ describe('PxGrafDataConverter tests, ScatterPlot', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('scatter');
expect(result.title?.text).toBe('Tiedot 2015Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('Pääkaupunkiseutu (PKS) | Yksiöt | Vapaarahoitteinen');
});

Expand All @@ -467,7 +467,7 @@ describe('PxGrafDataConverter tests, ScatterPlot', () => {
const result = convertPxGraphDataToChartOptions('sv', mockView);
expect(result.chart?.type).toBe('scatter');
expect(result.title?.text).toBe('Uppgifter 2015Q1-2022Q4 efter Uppgifter, Område, Antal rum, Finansieringssätt');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('Huvudstadsregionen | Enrumslägenhet | Fri finansierad');
});
});
Expand All @@ -479,7 +479,7 @@ describe('PxGrafDataConverter tests, LineChart', () => {
const result = convertPxGraphDataToChartOptions('fi', mockView);
expect(result.chart?.type).toBe('line');
expect(result.title?.text).toBe('Neliövuokra (eur/m2), Yksiöt, Vapaarahoitteinen 2015Q1-2022Q4 muuttujana Alue');
expect(result.credits?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.caption?.text).toBe('Lähde: PxVisualizer-fi');
expect(result.subtitle?.text).toBe('');
});

Expand All @@ -489,7 +489,7 @@ describe('PxGrafDataConverter tests, LineChart', () => {
const result = convertPxGraphDataToChartOptions('sv', mockView);
expect(result.chart?.type).toBe('line');
expect(result.title?.text).toBe('Kvadratmeterspris (eur/m2), Enrumslägenhet, Fri finansierad 2015Q1-2022Q4 efter Område');
expect(result.credits?.text).toBe('Källa: PxVisualizer-sv');
expect(result.caption?.text).toBe('Källa: PxVisualizer-sv');
expect(result.subtitle?.text).toBe('');
});
});
3 changes: 2 additions & 1 deletion src/core/highcharts/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const defaultTheme: (locale: string, fontFamily?: string) => Highcharts.O
accessibility: {
thousandsSep: Translations.thousandsSepAccessibility[locale],
credits: Translations.credits[locale],
caption: Translations.credits[locale],
chartTypes: {
barMultiple: Translations.barMultiple[locale],
barSingle: Translations.barSingle[locale],
Expand Down Expand Up @@ -154,7 +155,7 @@ export const defaultTheme: (locale: string, fontFamily?: string) => Highcharts.O
},
align: 'left',
},
credits: {
caption: {
position: {
align: "left",
x: 5
Expand Down
8 changes: 8 additions & 0 deletions src/stories/chartstories/linechart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ export const CombinationSeries = {
args: LINE_CHART_WITH_COMBINATION_SERIES,
} satisfies StoryObj<typeof Chart>;

export const CombinationSeriesWithLastUpdated = {
name: 'Combination series (with last updated)',
args: {
...LINE_CHART_WITH_COMBINATION_SERIES,
showLastUpdated: true
}
} satisfies StoryObj<typeof Chart>;

export const NegativeValues = {
name: 'Negative values',
args: LINE_CHART_WITH_NEGATIVE_VALUES,
Expand Down
Loading