Merge branch 'main' into feature/sc-46279/explo-sdk-table-render-mini…

…-map-for-geo-point

package.json

@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "lerna": "^8.1.2",
-    "nx": "^19.0.7"
+    "nx": "^19.2.3"
   },
   "dependencies": {
     "-": "^0.0.1"

packages/visualizations-react/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.25.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/[email protected]...@opendatasoft/[email protected]) (2024-06-26)
+
+
+### Features
+
+* **Table:** loading state ([#240](https://github.com/opendatasoft/ods-dataviz-sdk/issues/240)) ([65bbcea](https://github.com/opendatasoft/ods-dataviz-sdk/commit/65bbcea85313c602bebb0f46c4b6647594c9c623))
+
+
+
+
+
 ## [0.24.1](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/[email protected]...@opendatasoft/[email protected]) (2024-06-03)
 
 

packages/visualizations-react/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Opendatasoft
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/visualizations-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opendatasoft/visualizations-react",
-    "version": "0.24.1",
+    "version": "0.25.0",
     "license": "MIT",
     "author": "opendatasoft",
     "homepage": "https://github.com/opendatasoft/ods-dataviz-sdk",
@@ -52,7 +52,7 @@
         "arrowParens": "avoid"
     },
     "dependencies": {
-        "@opendatasoft/visualizations": "0.24.1",
+        "@opendatasoft/visualizations": "0.25.0",
         "use-callback-ref": "^1.2.4"
     },
     "devDependencies": {
@@ -114,5 +114,5 @@
         "tslib": "^2.1.0",
         "typescript": "4.6"
     },
-    "gitHead": "d8439e859fbc458019572f50ac920e367719476a"
+    "gitHead": "5b28cc594764f53129f0de5847152dd55e27ab24"
 }

packages/visualizations-react/stories/Table/Table.stories.tsx

@@ -20,6 +20,11 @@ const data: Async<TableData> = {
     loading: false,
 };
 
+const fetchingData: Async<TableData> = {
+    value: [],
+    loading: true,
+};
+
 const Template: ComponentStory<typeof Table> = args => <Table {...args} />;
 
 export const Playground = Template.bind({});
@@ -76,4 +81,16 @@ export const Unstyled = Template.bind({});
 Unstyled.args = {
     data,
     options: { ...options, unstyled: true },
-};
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+    data: fetchingData,
+    options,
+};
+
+export const emptyState = Template.bind({});
+emptyState.args = {
+    data: { value: [], loading: false },
+    options: { ...options, emptyStateLabel: 'Neniuj registroj trovitaj...' },
+};

packages/visualizations/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.25.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/[email protected]...@opendatasoft/[email protected]) (2024-06-26)
+
+
+### Bug Fixes
+
+* **Table:** basic select style ([#244](https://github.com/opendatasoft/ods-dataviz-sdk/issues/244)) ([6095574](https://github.com/opendatasoft/ods-dataviz-sdk/commit/6095574a7a0df037b4710ddcd778bdc72b200498))
+
+
+### Features
+
+* **Table:** loading state ([#240](https://github.com/opendatasoft/ods-dataviz-sdk/issues/240)) ([65bbcea](https://github.com/opendatasoft/ods-dataviz-sdk/commit/65bbcea85313c602bebb0f46c4b6647594c9c623))
+
+
+
+
+
 ## [0.24.1](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/[email protected]...@opendatasoft/[email protected]) (2024-06-03)
 
 

packages/visualizations/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Opendatasoft
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/visualizations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opendatasoft/visualizations",
-    "version": "0.24.1",
+    "version": "0.25.0",
     "license": "MIT",
     "author": "opendatasoft",
     "homepage": "https://github.com/opendatasoft/ods-dataviz-sdk",
@@ -21,6 +21,7 @@
     "module": "dist/index.es.js",
     "types": "dist/index.d.ts",
     "styles": "dist/index.css",
+    "svelte": "src/index.ts",
     "scripts": {
         "prepare": "rimraf dist && rollup --config",
         "build": "rollup --config",
@@ -81,7 +82,6 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-svelte": "^6.1.0",
         "rollup-plugin-terser": "^7.0.2",
-        "sass": "^1.70.0",
         "svelte": "^3.43.2",
         "svelte-check": "^2.2.7",
         "svelte-eslint-parser": "^0.33.1",
@@ -106,6 +106,8 @@
         "markdown-it": "^12.0.4",
         "markdown-it-link-attributes": "^3.0.0",
         "markdown-it-mark": "^3.0.1",
+        "sass": "^1.70.0",
         "tippy.js": "^6.3.7"
-    }
+    },
+    "gitHead": "5b28cc594764f53129f0de5847152dd55e27ab24"
 }

packages/visualizations/src/components/Chart/index.ts

@@ -1,21 +1,18 @@
-import * as ChartJs from 'chart.js';
+import { Chart as ChartModule, registerables, defaults } from 'chart.js';
 import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
+import DataLabels from 'chartjs-plugin-datalabels';
 import Stacked100Plugin from 'chartjs-plugin-stacked100';
 import Chart from './Chart.svelte';
 import PieDataLabelsPlugin from './pieDataLabelsPlugin';
 
-ChartJs.Chart.register(...ChartJs.registerables);
-ChartJs.Chart.register(ChartDataLabels);
-ChartJs.Chart.register(PieDataLabelsPlugin);
-ChartJs.Chart.register(Stacked100Plugin);
-ChartJs.Chart.register(TreemapController, TreemapElement);
+ChartModule.register(...registerables);
+ChartModule.register(DataLabels);
+ChartModule.register(PieDataLabelsPlugin);
+ChartModule.register(Stacked100Plugin);
+ChartModule.register(TreemapController, TreemapElement);
 
-ChartJs.defaults.animation = false;
+defaults.animation = false;
 
-// Export ChartJS to allow reusing instance and changing default, use case not supported
 // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
-export const _ChartJs = ChartJs;
-// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
-export const _ChartDataLabels = ChartDataLabels;
+export const _ChartDataLabels = DataLabels;
 export default Chart;

packages/visualizations/src/components/ChoroplethMap/Svg/Map.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { geoPath, GeoProjection } from 'd3-geo';
+    import { geoPath } from 'd3-geo';
+    import type { GeoProjection } from 'd3-geo';
     import type { Feature, FeatureCollection } from 'geojson';
     import type { SvgPropertyMapping } from './types';
 

packages/visualizations/src/components/Pagination/PageSize.svelte

@@ -23,12 +23,21 @@
     {/each}
 </select>
 
+<!-- disabling max-len doesn't work in style block, so we turn it off here -->
+<!-- eslint-disable max-len -->
 <style>
     :global(.ods-dataviz--default) select {
         background-color: white;
         padding: var(--spacing-50);
         border: solid 1px var(--border-color);
         border-radius: var(--border-radius-2);
         width: fit-content;
+        /* remove all styles and re-add arrow to fix Safari appearance */
+        background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+')
+            no-repeat 95% 50%;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+        padding-right: var(--spacing-100);
     }
 </style>

packages/visualizations/src/components/Table/Body.svelte

@@ -1,19 +1,38 @@
 <script lang="ts">
     import type { Column, TableData } from './types';
-    import Cell from './Cell';
+    import Cell, { LoadingCell } from './Cell';
 
+    export let loadingRowsNumber: number | null;
     export let columns: Column[];
     export let records: TableData;
+    export let emptyStateLabel = 'No records found...';
 </script>
 
 <tbody>
-    {#each records as record}
+    {#if records.length === 0 && !loadingRowsNumber}
         <tr>
-            {#each columns as column}
-                <Cell rawValue={record[column.key]} {column} />
-            {/each}
+            <td colspan={columns.length}>
+                <em>{emptyStateLabel}</em>
+            </td>
         </tr>
-    {/each}
+    {/if}
+    {#if loadingRowsNumber}
+        {#each Array(loadingRowsNumber) as _}
+            <tr>
+                {#each columns as __}
+                    <LoadingCell />
+                {/each}
+            </tr>
+        {/each}
+    {:else}
+        {#each records as record}
+            <tr>
+                {#each columns as column}
+                    <Cell rawValue={record[column.key]} {column} />
+                {/each}
+            </tr>
+        {/each}
+    {/if}
 </tbody>
 
 <style>
@@ -24,4 +43,10 @@
     :global(.ods-dataviz--default) tr:last-child {
         border-bottom: none;
     }
+
+    :global(.ods-dataviz--default) em {
+        text-align: center;
+        width: 100%;
+        display: block;
+    }
 </style>

packages/visualizations/src/components/Table/Cell/LoadingCell.svelte

@@ -0,0 +1,34 @@
+<td>
+    <div />
+</td>
+
+<style>
+    div {
+        min-height: 21px;
+        width: 100%;
+        background-color: #f6f8fb;
+        border-radius: 3px;
+        overflow: hidden;
+        position: relative;
+    }
+    div::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 60%;
+        height: 100%;
+        background-color: #cbd2db;
+        filter: blur(26px);
+        animation: move 800ms linear 0s infinite alternate both;
+    }
+
+    @keyframes move {
+        0% {
+            transform: translateX(-100%);
+        }
+        100% {
+            transform: translateX(200%);
+        }
+    }
+</style>

packages/visualizations/src/components/Table/Cell/index.ts

@@ -1,3 +1,5 @@
 import Cell from './Cell.svelte';
+import LoadingCell from './LoadingCell.svelte';
 
+export { LoadingCell };
 export default Cell;

packages/visualizations/src/components/Table/Table.svelte

@@ -5,18 +5,20 @@
     import Headers from './Headers';
     import Body from './Body.svelte';
 
+    export let loadingRowsNumber: number | null;
     export let columns: Column[];
     export let records: DataFrame | undefined;
     export let description: string | undefined;
+    export let emptyStateLabel: string | undefined;
 
     const tableId = `table-${generateId()}`;
 </script>
 
-<div>
+<div class="scrollbox">
     <table aria-describedby={description ? tableId : undefined}>
         <Headers {columns} />
         {#if records}
-            <Body {records} {columns} />
+            <Body {loadingRowsNumber} {records} {columns} {emptyStateLabel} />
         {/if}
     </table>
 </div>
@@ -30,7 +32,7 @@
         display: none;
     }
 
-    :global(.ods-dataviz--default) div {
+    :global(.ods-dataviz--default) .scrollbox {
         border: solid 1px var(--border-color);
         border-radius: var(--border-radius-2);
         overflow-x: auto;