improve default interactive demo, add number formatting

bozerkins · Nov 24, 2024 · e44ad31 · e44ad31
1 parent c658d01
commit e44ad31
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -4,9 +4,9 @@ import { Dimension, Measure, DataAggregator } from '../datasets/DataAggregator';
 import { dataset, model } from '../datasets/FuelConsumption';
 
 export const useInteractiveTable = () => {
-    const [selectedDimensions, setSelectedDimensions] = useState<string[]>([]);
+    const [selectedDimensions, setSelectedDimensions] = useState<string[]>([model.dimensions[0].id, model.dimensions[1].id]);
     const [selectedMeasures, setSelectedMeasures] = useState<string[]>([model.measures[0].id]);
-    const [pivotedDimensions, setPivotedDimensions] = useState<string[]>([]);
+    const [pivotedDimensions, setPivotedDimensions] = useState<string[]>([model.dimensions[0].id]);
     const [aggregatedData, setAggregatedData] = useState<any[] | null>(null);
 
     const toggleDimension = (dimension: Dimension) => {

diff --git a/src/pages/Interactive.tsx b/src/pages/Interactive.tsx
@@ -32,18 +32,20 @@ export default () => {
                     className="info-header"
                     onClick={() => setIsInfoVisible(!isInfoVisible)}
                 >
-                    <h2>About This Demo</h2>
+                    <h2>Interactive Demo</h2>
                     <button className={`collapse-button ${isInfoVisible ? 'expanded' : ''}`}>
                         <i className={`fa ${isInfoVisible ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
                     </button>
                 </div>
 
                 {isInfoVisible && (
                     <div className="info-content">
-                        <h3>Dataset: Fuel Consumption</h3>
+                        <h3>Dataset: Fuel Consumption Ratings 1995-2004 </h3>
                         <p>
                             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.<br />
+
+                            Source: <a href="https://open.canada.ca/data/en/dataset/98f1a129-f628-4ce4-b24d-6f16bf24dd64/resource/42495676-28b7-40f3-b0e0-3d7fe005ca56">open.canada.ca</a>
                         </p>
 
                         <h3>How to Use</h3>