diff --git a/src/datasets/DataAggregator.ts b/src/datasets/DataAggregator.ts index 0f4d160..38a7356 100644 --- a/src/datasets/DataAggregator.ts +++ b/src/datasets/DataAggregator.ts @@ -23,6 +23,18 @@ export interface Measure { field?: string; } +function formatNumber(value: unknown): string { + // First check if it's a valid number + if (typeof value !== 'number' || isNaN(value)) { + return ''; + } + + return new Intl.NumberFormat('en-US', { + minimumFractionDigits: Number.isInteger(value) ? 0 : 2, + maximumFractionDigits: Number.isInteger(value) ? 0 : 2 + }).format(value); +} + export class DataAggregator { private data: DataRow[]; @@ -91,7 +103,7 @@ export class DataAggregator { // Calculate aggregations for measures config.measures.forEach(measure => { const values = groupedRow[`${measure.field}_values`]; - resultRow[measure.field] = this.calculateAggregation(values, measure.type); + resultRow[measure.field] = formatNumber(this.calculateAggregation(values, measure.type)); delete groupedRow[`${measure.field}_values`]; }); diff --git a/src/hooks/useInteractiveTable.ts b/src/hooks/useInteractiveTable.ts index 950e1ac..3304904 100644 --- a/src/hooks/useInteractiveTable.ts +++ b/src/hooks/useInteractiveTable.ts @@ -4,9 +4,9 @@ import { Dimension, Measure, DataAggregator } from '../datasets/DataAggregator'; import { dataset, model } from '../datasets/FuelConsumption'; export const useInteractiveTable = () => { - const [selectedDimensions, setSelectedDimensions] = useState([]); + const [selectedDimensions, setSelectedDimensions] = useState([model.dimensions[0].id, model.dimensions[1].id]); const [selectedMeasures, setSelectedMeasures] = useState([model.measures[0].id]); - const [pivotedDimensions, setPivotedDimensions] = useState([]); + const [pivotedDimensions, setPivotedDimensions] = useState([model.dimensions[0].id]); const [aggregatedData, setAggregatedData] = useState(null); const toggleDimension = (dimension: Dimension) => { diff --git a/src/pages/Interactive.tsx b/src/pages/Interactive.tsx index 13b129b..7293500 100644 --- a/src/pages/Interactive.tsx +++ b/src/pages/Interactive.tsx @@ -32,7 +32,7 @@ export default () => { className="info-header" onClick={() => setIsInfoVisible(!isInfoVisible)} > -

About This Demo

+

Interactive Demo

@@ -40,10 +40,12 @@ export default () => { {isInfoVisible && (
-

Dataset: Fuel Consumption

+

Dataset: Fuel Consumption Ratings 1995-2004

This demo uses a dataset containing vehicle fuel consumption ratings. - The data includes various vehicle characteristics and their fuel efficiency metrics. + The data includes various vehicle characteristics and their fuel efficiency metrics.
+ + Source: open.canada.ca

How to Use