Skip to content

KeyFigure visualization type #116

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

Open
sakari-malkki wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

KeyFigure visualization type #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f90d94e
Support for key figure visualizationtype
sakari-malkki Sep 4, 2025
1a804da
Exclude **/testFixtures/** from sonar
sakari-malkki Sep 4, 2025
f0bcda0
Support for customized styling of key figures
sakari-malkki Sep 5, 2025
22ca73e
Solve merge conflicts
sakari-malkki Sep 25, 2025
9920810
More test coverage
sakari-malkki Sep 25, 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
4 changes: 2 additions & 2 deletions sonar-project.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ sonar.testExecutionReportPaths=reports/test-reporter.xml
sonar.sources=src
sonar.tests=src
sonar.test.inclusions=**/*.test.js,**/*.test.ts,**/*.test.tsx
sonar.exclusions=**/*.test.js,**/*.test.ts,**/*.test.tsx,**/*.test.tsx.snap,src/stories/**,**/fixtures/**
sonar.cpd.exclusions=**/fixtures/**
sonar.exclusions=**/*.test.js,**/*.test.ts,**/*.test.tsx,**/*.test.tsx.snap,src/stories/**,**/fixtures/**,**/testFixtures/**
sonar.cpd.exclusions=**/fixtures/**,**/testFixtures/**
62 changes: 62 additions & 0 deletions src/core/styles/chart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,66 @@
margin-bottom: 2rem;
margin-top: 6px;
width: 90%;
}

.keyFigureChart {
font-family: "Barlow Semi Condensed", Verdana, sans-serif;
}

.keyFigure-container {
border: 1px solid #adadad;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
background-color: white;
}

.keyFigure-title {
font-weight: 600;
letter-spacing: 0;
line-height: 1.4;
color: #1a3061;
}

.keyFigure-value-main {
font-weight: 600;
font-size: 2rem;
margin-inline-end: 0.25rem;
color: #1a3061;
line-height: 1.2;
}

.keyFigure-unit {
font-weight: 400;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 0rem;
color: #1a3061;
}

.keyFigure-time {
margin: 0;
line-height: 1.6;
font-size: 1rem;
font-weight: 400;
max-width: 100%;
color: #1a3061;
}

.keyFigure-lastupdated {
margin: 0;
line-height: 1.6;
font-size: 0.9rem;
font-weight: 400;
max-width: 100%;
color: #1a3061;
}

.keyFigure-preliminary {
margin: 0;
line-height: 1.6;
font-size: 1rem;
font-weight: 400;
max-width: 100%;
color: #1a3061;
}
72 changes: 40 additions & 32 deletions src/core/tables/__snapshots__/htmlTable.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Html table render tests should match snapshot: Key figure 1`] = `
"<div
id="test-49871891798765432"
>
<div
class="keyFigure-container"
>
<div
class="keyFigure-title"
>
Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4
</div>
<div
class="keyFigure-value"
>
<span
class="keyFigure-value-main"
>
2 548
</span>
<span
class="keyFigure-unit"
>
 lukumäärä
</span>
</div>
<div
class="keyFigure-time"
>
2022Q4
</div>
<div
class="keyFigure-lastupdated"
>
2023-03-15
</div>
</div>
</div>"
`;

exports[`Html table render tests should match snapshot: Table with column variables only 1`] = `
"<div
id="test-49857934857938475938475"
Expand Down Expand Up @@ -3542,35 +3582,3 @@ exports[`Html table render tests should match snapshot: Table with row variables
</p>
</div>"
`;

exports[`Html table render tests should match snapshot: Table with source and footnote 1`] = `
"<div
id="test-6895638450983059889"
>
<table
tabindex="0"
>
<caption
class="tableChart-caption"
>
Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4
</caption>
<tbody>
<tr>
<td>
2 548
</td>
</tr>
</tbody>
</table>
<p>
Yksikkö: lukumäärä
</p>
<p>
Test footnote
</p>
<p>
Lähde: PxVisualizer-fi
</p>
</div>"
`;
58 changes: 34 additions & 24 deletions src/core/tables/htmlTable.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import { TABLE_WITH_ONE_CELL, TABLE_WITH_ONLY_ROW_VARIABLES, TABLE_WITH_ROW_AND_
import { SELECTABLE_TABLE_WITH_MISSING_DATA, TABLE_WITH_ONLY_COLUMN_VARIABLES } from "../conversion/fixtures/tableChart";
import { extractSelectableVariableValues } from "../conversion/helpers";
import { convertPxGrafResponseToView } from "../conversion/viewUtils";
import { renderHtmlTable } from "./htmlTable";
import { renderHtmlKeyFigure, renderHtmlTable } from "./htmlTable";
import { SELECTABLE_TABLE_WITH_INVALID_MISSING_DATA } from "./fixtures/pxGrafResponses";
import { EVisualizationType } from "../types";

describe('Html table render tests', () => {
it('should match snapshot: Table with column variables only', () => {
Expand Down Expand Up @@ -168,29 +169,6 @@ 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,
Expand Down Expand Up @@ -246,4 +224,36 @@ describe('Html table render tests', () => {

spy.mockRestore();
});

it('should match snapshot: Key figure', () => {
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);
mockView.visualizationSettings = {
...mockView.visualizationSettings,
visualizationType: EVisualizationType.KeyFigure,
showUnit: true
}

const locale = 'fi';

const testId = 'test-49871891798765432';

const div = document.createElement('div');
div.id = testId;
document.body.appendChild(div);

const timeVariableValue = "2022Q4";
const lastUpdated = "2023-03-15";

renderHtmlKeyFigure(mockView, locale, testId, timeVariableValue, lastUpdated);

const renderedOutput = prettyDOM(div);
expect(renderedOutput).toMatchSnapshot();

document.body.removeChild(div);
});
});
84 changes: 75 additions & 9 deletions src/core/tables/htmlTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getFormattedUnits } from "../chartOptions/Utility/formatters";
import { Translations } from "../conversion/translations";
import { TMultiLanguageString } from "../types/queryVisualizationResponse";
import { IDataSeries, View } from "../types/view";
import { getFormattedUnits } from "../../core/chartOptions/Utility/formatters";
import { Translations } from "../../core/conversion/translations";
import { TMultiLanguageString } from "../../core/types/queryVisualizationResponse";
import { IDataSeries, View } from "../../core/types/view";
import { formatMissingData, formatNumericValue } from "./tableUtils";

export function renderHtmlTable(view: View, locale: string, showTitles: boolean, showUnits: boolean, showSources: boolean, containerId: string, footnote?: string): void {
Expand Down Expand Up @@ -60,9 +60,71 @@ export function renderHtmlTable(view: View, locale: string, showTitles: boolean,
}
}

export function renderHtmlKeyFigure(view: View, locale: string, containerId: string, timeVariableValue: string, lastUpdated: string, className?: string): void {
const container = document.getElementById(containerId);
if (!container) throw new Error("No container with matching id found in the DOM tree");

try {
// Create the key figure display container
const keyFigureContainer = document.createElement('div');
keyFigureContainer.className = className ? `keyFigure-container ${className}` : 'keyFigure-container';

// Add title if available
const title = document.createElement('div');
title.className = className ? `keyFigure-title ${className}` : 'keyFigure-title';
title.textContent = view.header[locale];
keyFigureContainer.append(title);

const dataCell = view.series[0].series[0];
const valueContainer = document.createElement('div');
valueContainer.className = className ? `keyFigure-value ${className}` : 'keyFigure-value';

// Format the value or show missing data message
if (dataCell.value === null) {
valueContainer.textContent = formatMissingData(dataCell.missingCode, locale, true);
} else {
const valueSpan = document.createElement('span');
valueSpan.className = 'keyFigure-value-main';
valueSpan.textContent = formatNumericValue(dataCell.value, dataCell.precision, locale, true);
valueContainer.append(valueSpan);
// If show units is enabled, append the unit to the value in a span
if (view.visualizationSettings.showUnit && view.units.length > 0) {
const unitName = getFormattedUnits(view.units, locale);
const unitSpan = document.createElement('span');
unitSpan.className = 'keyFigure-unit';
unitSpan.textContent = ` ${unitName}`;
valueContainer.append(unitSpan);
}
}

keyFigureContainer.append(valueContainer);

const timeElem = document.createElement('div');
timeElem.className = className ? `keyFigure-time ${className}` : 'keyFigure-time';
timeElem.textContent = dataCell.preliminary
? `${timeVariableValue} ${Translations.preliminaryData[locale]}`
: timeVariableValue;
keyFigureContainer.append(timeElem);

const lastUpdatedElem = document.createElement('div');
lastUpdatedElem.className = className ? `keyFigure-lastupdated ${className}` : 'keyFigure-lastupdated';
lastUpdatedElem.textContent = lastUpdated;
keyFigureContainer.append(lastUpdatedElem);

container.append(keyFigureContainer);

} catch (error) {
console.error(error);
container.replaceChildren();
const errorMessage = document.createElement('h1');
errorMessage.append(Translations.graphCreationError[locale]);
container.append(errorMessage);
}
}

export function generateTable(view: View, locale: string): HTMLTableElement {
const colHeaderRows = view.columnNameGroups[0].length ?? 0;
const rowHeaderCols = view.series[0].rowNameGroup.length ?? 0;
const colHeaderRows = view.columnNameGroups[0]?.length ?? 0;
const rowHeaderCols = view.series[0]?.rowNameGroup.length ?? 0;

const table: HTMLTableElement = Object.assign(document.createElement('table'), { tabIndex: 0 });

Expand Down Expand Up @@ -140,17 +202,19 @@ function buildDataRows(series: IDataSeries[], locale: string): HTMLTableRowEleme
}

const compare = (a: TMultiLanguageString, b: TMultiLanguageString) =>
Object.keys(a).every(lang => a[lang] == b[lang]);
Object.keys(a).every(lang => a[lang] === b[lang]);

const calculateRowSpans = (series: IDataSeries[]): number[] => {
if (!series[0].rowNameGroup || series[0].rowNameGroup.length === 0) return [];
const rowSpans: number[] = Array(series[0].rowNameGroup.length).fill(1);

for (let col = 0; col < series[0].rowNameGroup.length; col++) {
let span = 1;
for (let row = 0; row < series.length - 1; row++) {
if (compare(series[row].rowNameGroup[col], series[row+1].rowNameGroup[col])) rowSpans[col]++;
if (compare(series[row].rowNameGroup[col], series[row+1].rowNameGroup[col])) span++;
else break;
}
rowSpans[col] = span;
}
return rowSpans;
}
Expand All @@ -160,10 +224,12 @@ const calculateColSpans = (columnNameGroups: TMultiLanguageString[][]): number[]
const colSpans: number[] = Array(columnNameGroups[0].length).fill(1);

for (let row = 0; row < columnNameGroups[0].length; row++) {
let span = 1;
for (let col = 0; col < columnNameGroups.length - 1; col++) {
if (compare(columnNameGroups[col][row], columnNameGroups[col + 1][row])) colSpans[row]++;
if (compare(columnNameGroups[col][row], columnNameGroups[col + 1][row])) span++;
else break;
}
colSpans[row] = span;
}
return colSpans;
}
2 changes: 1 addition & 1 deletion src/core/tables/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export { renderHtmlTable } from "./htmlTable";
export { renderHtmlTable, renderHtmlKeyFigure } from "./htmlTable";

export { generateCsv } from "./csvTable";
export { viewToDownloadCSVOption } from "./csvTable";
Expand Down
5 changes: 4 additions & 1 deletion src/core/types/queryVisualizationResponse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export type TVisualizationType =
| 'LineChart'
| 'ScatterPlot'
| 'Table'
| 'KeyFigure'


export enum EVisualizationType {
Expand All @@ -45,7 +46,8 @@ export enum EVisualizationType {
PieChart = 'PieChart',
LineChart = 'LineChart',
ScatterPlot = 'ScatterPlot',
Table = 'Table'
Table = 'Table',
KeyFigure = 'KeyFigure'
}

export type TVariableType =
Expand Down Expand Up @@ -128,4 +130,5 @@ export interface IVisualizationSettings {
markerSize?: number;
cutYAxis?: boolean;
showDataPoints?: boolean;
showUnit?: boolean;
}
Loading
Loading