From b43061851de6b25d26c69d7b8dcb6fa5ac005e91 Mon Sep 17 00:00:00 2001 From: Sakari Malkki Date: Fri, 19 Sep 2025 13:17:30 +0300 Subject: [PATCH 01/13] Move footnote before sources --- src/core/tables/htmlTable.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/core/tables/htmlTable.ts b/src/core/tables/htmlTable.ts index 30f0d5d..d8c4b2c 100644 --- a/src/core/tables/htmlTable.ts +++ b/src/core/tables/htmlTable.ts @@ -36,6 +36,13 @@ export function renderHtmlTable(view: View, locale: string, showTitles: boolean, container.append(pUnits); } + // Footnote + if (footnote) { + const pFootnote = document.createElement('p'); + pFootnote.append(footnote); + container.append(pFootnote); + } + // Sources if (showSources) { const pSources = document.createElement('p'); @@ -44,13 +51,6 @@ export function renderHtmlTable(view: View, locale: string, showTitles: boolean, container.append(pSources); } - // Footnote - if (footnote) { - const pFootnote = document.createElement('p'); - pFootnote.append(footnote); - container.append(pFootnote); - } - } catch (error) { console.error(error); container.replaceChildren(); From f7ab67b0fe94b5231de34131f4a66f47d26cf957 Mon Sep 17 00:00:00 2001 From: Sakari Malkki Date: Fri, 19 Sep 2025 14:33:25 +0300 Subject: [PATCH 02/13] Snapshot test to cover footnote and source --- .../__snapshots__/htmlTable.test.ts.snap | 32 +++++++++++++++++++ src/core/tables/htmlTable.test.ts | 23 +++++++++++++ 2 files changed, 55 insertions(+) diff --git a/src/core/tables/__snapshots__/htmlTable.test.ts.snap b/src/core/tables/__snapshots__/htmlTable.test.ts.snap index 1d60f94..9562609 100644 --- a/src/core/tables/__snapshots__/htmlTable.test.ts.snap +++ b/src/core/tables/__snapshots__/htmlTable.test.ts.snap @@ -3542,3 +3542,35 @@ exports[`Html table render tests should match snapshot: Table with row variables 

 " `; + +exports[`Html table render tests should match snapshot: Table with source and footnote 1`] = ` +" +  +  + Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4 +  +  +  +  + 2 548 +  +  +  +  + 

 + Yksikkö: lukumäärä + 

 + 

 + Test footnote + 

 + 

 + Lähde: PxVisualizer-fi + 

 +" +`; diff --git a/src/core/tables/htmlTable.test.ts b/src/core/tables/htmlTable.test.ts index 3d4b4ee..68ab874 100644 --- a/src/core/tables/htmlTable.test.ts +++ b/src/core/tables/htmlTable.test.ts @@ -168,6 +168,29 @@ describe('Html table render tests', () => { document.body.removeChild(div); }); + it('should match snapshot: Table with source and footnote', () => { + const mockVarSelections = extractSelectableVariableValues( + TABLE_WITH_ONE_CELL.pxGraphData.selectableVariableCodes, + TABLE_WITH_ONE_CELL.pxGraphData.metaData, + TABLE_WITH_ONE_CELL.pxGraphData.visualizationSettings.defaultSelectableVariableCodes, + TABLE_WITH_ONE_CELL.selectedVariableCodes); + const mockView = convertPxGrafResponseToView(TABLE_WITH_ONE_CELL.pxGraphData, mockVarSelections); + const locale = 'fi'; + + const testId = 'test-6895638450983059889'; + + const div = document.createElement('div'); + div.id = testId; + document.body.appendChild(div); + + renderHtmlTable(mockView, locale, true, true, true, testId, 'Test footnote'); + + const renderedOutput = prettyDOM(div); + expect(renderedOutput).toMatchSnapshot(); + + document.body.removeChild(div); + }); + it('should match snapshot: Table with missing data and selectable values', () => { const mockVarSelections = extractSelectableVariableValues( SELECTABLE_TABLE_WITH_MISSING_DATA.selectableVariableCodes, From 701335f5bf5a5d126d7affaf62c442a8b467c061 Mon Sep 17 00:00:00 2001 From: Sakari Malkki Date: Fri, 19 Sep 2025 14:49:39 +0300 Subject: [PATCH 03/13] Increment patch version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 31d3478..3761f49 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@statisticsfinland/pxvisualizer", - "version": "1.2.4", + "version": "1.2.5", "description": "Component library for visualizing PxGraf data", "main": "./dist/pxv.cjs", "jestSonar": { From 3602cc707e323136456974c3f203e2f2fed6911b Mon Sep 17 00:00:00 2001 From: Sakari Malkki Date: Mon, 22 Sep 2025 12:08:18 +0300 Subject: [PATCH 04/13] Add table with footnote and source story for storybook --- src/stories/tablestories/table.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/stories/tablestories/table.stories.tsx b/src/stories/tablestories/table.stories.tsx index ddefd1f..1838913 100644 --- a/src/stories/tablestories/table.stories.tsx +++ b/src/stories/tablestories/table.stories.tsx @@ -32,3 +32,12 @@ export const OneCell = { name: 'One cell', args: TABLE_WITH_ONE_CELL, } satisfies StoryObj; + +export const TableWithFootnoteAndSource = { + name: 'Table with source and foot note', + args: { + ...TABLE_WITH_ROW_AND_COLUMN_VARIABLES, + showTableSources: true, + footnote: 'This is the foot note', + }, +} satisfies StoryObj; From 498d4131e0cabac2c066fee11764bc4f9e8b6b53 Mon Sep 17 00:00:00 2001 From: Sakari Malkki Date: Mon, 22 Sep 2025 12:10:22 +0300 Subject: [PATCH 05/13] Show table source by default --- .../chart/__snapshots__/chart.test.tsx.snap | 15 +++++++++++++++ src/react/components/chart/chart.tsx | 4 ++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/react/components/chart/__snapshots__/chart.test.tsx.snap b/src/react/components/chart/__snapshots__/chart.test.tsx.snap index 0fe7d6b..108baed 100644 --- a/src/react/components/chart/__snapshots__/chart.test.tsx.snap +++ b/src/react/components/chart/__snapshots__/chart.test.tsx.snap @@ -115,6 +115,9 @@ exports[`Rendering test renders chart data correctly 1`] = ` +

+ Lähde: PxVisualizer-fi +

@@ -803,6 +806,9 @@ exports[`Rendering test renders table data correctly 1`] = ` +

+ Lähde: PxVisualizer-fi +

@@ -1481,6 +1487,9 @@ exports[`Rendering test renders table data correctly when given footnote 1`] = `

Test footnote

+

+ Lähde: PxVisualizer-fi +

@@ -2839,6 +2848,9 @@ exports[`Rendering test renders table data correctly when titles are forced on 1 +

+ Lähde: PxVisualizer-fi +

@@ -3517,6 +3529,9 @@ exports[`Rendering test renders table data correctly when units are on 1`] = `

Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2

+

+ Lähde: PxVisualizer-fi +

diff --git a/src/react/components/chart/chart.tsx b/src/react/components/chart/chart.tsx index f7fe35a..4aa9090 100644 --- a/src/react/components/chart/chart.tsx +++ b/src/react/components/chart/chart.tsx @@ -166,7 +166,7 @@ const ReactChart: React.FC = ({ options={highChartOptions}/> - + ); @@ -182,7 +182,7 @@ const ReactChart: React.FC = ({ } - + ); } From e319cef9293d6633f7a57099628430eb4058d456 Mon Sep 17 00:00:00 2001 From: Sakari Malkki Date: Fri, 19 Sep 2025 14:29:59 +0300 Subject: [PATCH 06/13] =?UTF-8?q?=EF=BB=BFShow=20title=20by=20default=20fo?= =?UTF-8?q?r=20tables.=20Allow=20hiding=20for=20charts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basicHorizontalBarchartOptions.ts | 2 +- src/core/chartOptions/chartOptions.ts | 19 +- .../groupHorizontalBarChartOptions.ts | 2 +- src/core/chartOptions/lineChartOptions.ts | 2 +- src/core/chartOptions/pyramidChartOptions.ts | 2 +- src/core/chartOptions/scatterPlotOptions.ts | 5 +- src/core/conversion/pxGrafDataConverter.ts | 2 +- src/core/types/chartOptions.ts | 1 + .../chart/__snapshots__/chart.test.tsx.snap | 162 ++++++++++++++++-- src/react/components/chart/chart.test.tsx | 15 +- src/react/components/chart/chart.tsx | 9 +- 11 files changed, 180 insertions(+), 41 deletions(-) diff --git a/src/core/chartOptions/basicHorizontalBarchartOptions.ts b/src/core/chartOptions/basicHorizontalBarchartOptions.ts index 6aa231b..8a29168 100644 --- a/src/core/chartOptions/basicHorizontalBarchartOptions.ts +++ b/src/core/chartOptions/basicHorizontalBarchartOptions.ts @@ -6,7 +6,7 @@ import { IChartOptions } from '../types/chartOptions'; export const basicHorizontalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { return { - ...commonHorizontalBarChartOptions(view, locale), + ...commonHorizontalBarChartOptions(view, locale, options), series: buildBarChartSeries(view, locale, false, options?.accessibilityMode), chart: { type: 'bar', spacingBottom: 60 }, yAxis: { diff --git a/src/core/chartOptions/chartOptions.ts b/src/core/chartOptions/chartOptions.ts index 3f3c434..67a5e2e 100644 --- a/src/core/chartOptions/chartOptions.ts +++ b/src/core/chartOptions/chartOptions.ts @@ -7,14 +7,15 @@ import { getLinearAxisTickPositionerFunction } from './Utility/tickPositioners'; import { IChartOptions } from '../types/chartOptions'; import { buildBarChartSeries, buildColumnChartSeries } from './Utility/seriesDataBuilder'; -export const commonChartOptions = (view: View, locale: string): Options => { +export const commonChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { + const showTitle: boolean = options?.showTitle ?? true; return { accessibility: { point: { descriptionFormatter: getScreenReaderFormatterCallbackFunction(view, locale) } }, - title: { text: view.header[locale] }, + title: { text: showTitle ? 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(', ')}` }, tooltip: { @@ -65,9 +66,9 @@ export const commonBasicHorizontalBarChartYAxisOptions = (view: View, locale: st return yAxisOptions; } -export const commonHorizontalBarChartOptions = (view: View, locale: string): Options => { +export const commonHorizontalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { return { - ...commonChartOptions(view, locale), + ...commonChartOptions(view, locale, options), chart: { type: 'bar' }, xAxis: { categories: view.columnNameGroups.map(cng => cng.map(n => n[locale]).join(', ')), @@ -83,7 +84,7 @@ export const commonHorizontalBarChartOptions = (view: View, locale: string): Opt export const commonStackedHorizontalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { return { - ...commonHorizontalBarChartOptions(view, locale), + ...commonHorizontalBarChartOptions(view, locale, options), series: buildBarChartSeries(view, locale, true, options?.accessibilityMode), legend: { ...commonLegendStyleOptions, @@ -95,9 +96,9 @@ export const commonStackedHorizontalBarChartOptions = (view: View, locale: strin }; } -export const commonVerticalBarChartOptions = (view: View, locale: string): Options => { +export const commonVerticalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { const result = { - ...commonChartOptions(view, locale), + ...commonChartOptions(view, locale, options), chart: { type: 'column' }, xAxis: getXAxisOptions(view, locale), }; @@ -106,7 +107,7 @@ export const commonVerticalBarChartOptions = (view: View, locale: string): Optio export const commonBasicVerticalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { return { - ...commonVerticalBarChartOptions(view, locale), + ...commonVerticalBarChartOptions(view, locale, options), series: buildColumnChartSeries(view, locale, false, options?.accessibilityMode), yAxis: { softMin: 0, @@ -120,7 +121,7 @@ export const commonBasicVerticalBarChartOptions = (view: View, locale: string, o export const commonStackedVerticalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { return { - ...commonVerticalBarChartOptions(view, locale), + ...commonVerticalBarChartOptions(view, locale, options), series: buildColumnChartSeries(view, locale, true, options?.accessibilityMode), legend: { ...commonLegendStyleOptions, diff --git a/src/core/chartOptions/groupHorizontalBarChartOptions.ts b/src/core/chartOptions/groupHorizontalBarChartOptions.ts index 5201bab..66720e5 100644 --- a/src/core/chartOptions/groupHorizontalBarChartOptions.ts +++ b/src/core/chartOptions/groupHorizontalBarChartOptions.ts @@ -6,7 +6,7 @@ import { IChartOptions } from '../types/chartOptions'; export const groupHorizontalBarChartOptions = (view: View, locale: string, options?: IChartOptions): Options => { return { - ...commonHorizontalBarChartOptions(view, locale), + ...commonHorizontalBarChartOptions(view, locale, options), series: buildBarChartSeries(view, locale, false, options?.accessibilityMode), yAxis: { ...commonBasicHorizontalBarChartYAxisOptions(view, locale), diff --git a/src/core/chartOptions/lineChartOptions.ts b/src/core/chartOptions/lineChartOptions.ts index 8ff19cd..89a886f 100644 --- a/src/core/chartOptions/lineChartOptions.ts +++ b/src/core/chartOptions/lineChartOptions.ts @@ -10,7 +10,7 @@ export const lineChartOptions = (view: View, locale: string, options?: IChartOpt const cutValueAxis = !view.visualizationSettings?.cutValueAxis ? 0 : undefined; const markerSettings = options?.accessibilityMode ? { enabledThreshold: 3 } : { enabled: false }; return { - ...commonChartOptions(view, locale), + ...commonChartOptions(view, locale, options), chart: { type: 'line' }, tooltip: { formatter: getLineChartToolTipFormatterFunction(view, locale) diff --git a/src/core/chartOptions/pyramidChartOptions.ts b/src/core/chartOptions/pyramidChartOptions.ts index c6bb484..26990a9 100644 --- a/src/core/chartOptions/pyramidChartOptions.ts +++ b/src/core/chartOptions/pyramidChartOptions.ts @@ -9,7 +9,7 @@ export const pyramidChartOptions = (view: View, locale: string, options?: IChart const categories = view.columnNameGroups.map(cng => cng.map(n => n[locale]).join(', ')); const maxValue = Math.max(...view.series.map(s => Math.max(...s.series.map(dataCell => dataCell.value ?? 0)))); return { - ...commonChartOptions(view, locale), + ...commonChartOptions(view, locale, options), chart: { type: 'bar' }, xAxis: { categories: categories, diff --git a/src/core/chartOptions/scatterPlotOptions.ts b/src/core/chartOptions/scatterPlotOptions.ts index 7e4a692..72f214c 100644 --- a/src/core/chartOptions/scatterPlotOptions.ts +++ b/src/core/chartOptions/scatterPlotOptions.ts @@ -2,12 +2,13 @@ import { Options } from 'highcharts'; import { IDataSeries, View } from "../types/view"; import { getScatterPlotTooltipFormatterFunction } from './Utility/formatters'; import { commonChartOptions, commonYAxisOptions } from './chartOptions'; +import { IChartOptions } from '../types/chartOptions'; -export const scatterPlotOptions = (view: View, locale: string): Options => { +export const scatterPlotOptions = (view: View, locale: string, options?: IChartOptions): Options => { const X_INDEX = 1; const Y_INDEX = 0; const cutValueAxis = !view.visualizationSettings?.cutValueAxis ? 0 : undefined; return { - ...commonChartOptions(view, locale), + ...commonChartOptions(view, locale, options), chart: { type: 'scatter' }, xAxis: { softMin: 0, diff --git a/src/core/conversion/pxGrafDataConverter.ts b/src/core/conversion/pxGrafDataConverter.ts index 37d87ac..5543306 100644 --- a/src/core/conversion/pxGrafDataConverter.ts +++ b/src/core/conversion/pxGrafDataConverter.ts @@ -41,7 +41,7 @@ export const convertPxGraphDataToChartOptions = (locale: string, view: View, opt case EVisualizationType.PyramidChart: return pyramidChartOptions(view, locale, options); case EVisualizationType.ScatterPlot: - return scatterPlotOptions(view, locale); + return scatterPlotOptions(view, locale, options); default: throw new Error('Unsupported chart type'); } diff --git a/src/core/types/chartOptions.ts b/src/core/types/chartOptions.ts index c9881e2..178f38a 100644 --- a/src/core/types/chartOptions.ts +++ b/src/core/types/chartOptions.ts @@ -3,4 +3,5 @@ */ export interface IChartOptions { accessibilityMode?: boolean; + showTitle?: boolean; } \ No newline at end of file diff --git a/src/react/components/chart/__snapshots__/chart.test.tsx.snap b/src/react/components/chart/__snapshots__/chart.test.tsx.snap index 108baed..8e66a12 100644 --- a/src/react/components/chart/__snapshots__/chart.test.tsx.snap +++ b/src/react/components/chart/__snapshots__/chart.test.tsx.snap @@ -115,9 +115,122 @@ exports[`Rendering test renders chart data correctly 1`] = ` -

- Lähde: PxVisualizer-fi -

+ + + + +`; + +exports[`Rendering test renders chart data correctly with hidden title 1`] = ` + +
+
+
+ +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + +
+ + 2015Q1 + + 2015Q2 +
+ Vapaarahoitteinen + + 11 096 + + 11 625 +
+ ARA + + 4 845 + + 5 174 +
@@ -148,7 +261,7 @@ exports[`Rendering test renders table data correctly 1`] = ` class="sc-kpOvIu imTYeK" >
@@ -826,7 +941,7 @@ exports[`Rendering test renders table data correctly when given footnote 1`] = ` class="sc-kpOvIu imTYeK" >