Source after footnote

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": {

src/core/tables/__snapshots__/htmlTable.test.ts.snap

@@ -3542,3 +3542,35 @@ 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>"
+`;

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,

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();

src/react/components/chart/__snapshots__/chart.test.tsx.snap

@@ -115,6 +115,9 @@ exports[`Rendering test renders chart data correctly 1`] = `
             </tr>
           </tbody>
         </table>
+        <p>
+          Lähde: PxVisualizer-fi
+        </p>
       </div>
     </div>
   </div>
@@ -803,6 +806,9 @@ exports[`Rendering test renders table data correctly 1`] = `
           </tr>
         </tbody>
       </table>
+      <p>
+        Lähde: PxVisualizer-fi
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -1481,6 +1487,9 @@ exports[`Rendering test renders table data correctly when given footnote 1`] = `
       <p>
         Test footnote
       </p>
+      <p>
+        Lähde: PxVisualizer-fi
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -2839,6 +2848,9 @@ exports[`Rendering test renders table data correctly when titles are forced on 1
           </tr>
         </tbody>
       </table>
+      <p>
+        Lähde: PxVisualizer-fi
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -3517,6 +3529,9 @@ exports[`Rendering test renders table data correctly when units are on 1`] = `
       <p>
         Yksikkö: Lukumäärä: lukumäärä, Neliövuokra (eur/m2): eur / m2
       </p>
+      <p>
+        Lähde: PxVisualizer-fi
+      </p>
     </div>
   </div>
 </DocumentFragment>

src/react/components/chart/chart.tsx

@@ -166,7 +166,7 @@ const ReactChart: React.FC<IChartProps> = ({
                             options={highChartOptions}/>
                     </ChartContainer>
                     <TableContainer $tableMode={tableMode}>
-                        <TableView showTitles={showTableTitles ?? true} footnote={footnote} showUnits={!!showTableUnits} showSources={!!showTableSources} view={view} locale={validLocale} />
+                        <TableView showTitles={showTableTitles ?? true} footnote={footnote} showUnits={!!showTableUnits} showSources={showTableSources ?? true} view={view} locale={validLocale} />
                     </TableContainer>
                 </ChartWrapper>
             );
@@ -182,7 +182,7 @@ const ReactChart: React.FC<IChartProps> = ({
                             <BurgerMenu menuItemDefinitions={menuItemDefinitions} viewData={view} locale={validLocale} menuIconInheritColor={menuIconInheritColor} />
                         </MenuContainer>
                     }
-                    <TableView showTitles={showTableTitles ?? false} footnote={footnote} showUnits={!!showTableUnits} showSources={!!showTableSources} view={view} locale={validLocale} />
+                    <TableView showTitles={showTableTitles ?? false} footnote={footnote} showUnits={!!showTableUnits} showSources={showTableSources ?? true} view={view} locale={validLocale} />
                 </ChartWrapper>
             );
         }

src/stories/tablestories/table.stories.tsx

@@ -32,3 +32,12 @@ export const OneCell = {
     name: 'One cell',
     args: TABLE_WITH_ONE_CELL,
 } satisfies StoryObj<typeof Chart>;
+
+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<typeof Chart>;