chore: add path aliases

packages/visualizations/.eslintrc.js

@@ -3,6 +3,11 @@ module.exports = {
         browser: true,
         es2021: true,
     },
+    settings: {
+        "import/resolver": {
+            typescript: {}
+        },
+    },
     extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',

packages/visualizations/package.json

@@ -44,6 +44,7 @@
     "devDependencies": {
         "@babel/core": "^7.13.10",
         "@babel/preset-env": "^7.13.10",
+        "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-babel": "^5.3.0",
         "@rollup/plugin-commonjs": "^19.0.0",
         "@rollup/plugin-json": "^4.1.0",
@@ -67,6 +68,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.3.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-svelte": "^2.35.1",

packages/visualizations/rollup.config.js

@@ -2,6 +2,7 @@ import svelte from 'rollup-plugin-svelte';
 import autoPreprocess from 'svelte-preprocess';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
+import path from 'path';
 // import visualizer from 'rollup-plugin-visualizer';
 import { terser } from 'rollup-plugin-terser';
 import typescript from '@rollup/plugin-typescript';
@@ -10,13 +11,22 @@ import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { babel } from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
+import alias from '@rollup/plugin-alias';
 import { defineConfig } from 'rollup';
 import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
+const projectRootDir = path.resolve(__dirname);
 
 function basePlugins() {
     return [
+        alias({
+            entries: {
+                "components": path.resolve(projectRootDir, 'src/components'),
+                "stores": path.resolve(projectRootDir, 'src/stores'),
+                "types": path.resolve(projectRootDir, 'src/types'),
+            },
+        }),
         svelte({
             // enable run-time checks when not in production
             dev: !production,

packages/visualizations/src/components/Chart/Chart.svelte

@@ -3,12 +3,15 @@
     import type { ChartConfiguration } from 'chart.js';
     import { Chart } from 'chart.js';
     import 'chartjs-adapter-luxon';
-    import type { DataFrame } from '../types';
-    import { generateId } from '../utils';
-    import SourceLink from '../utils/SourceLink.svelte';
-    import { defaultNumberFormat } from '../utils/formatter';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { LegendPositions, CategoryLegend as CategoryLegendType } from '../Legend/types';
+    import type { DataFrame } from 'components/types';
+    import { generateId } from 'components/utils';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import { defaultNumberFormat } from 'components/utils/formatter';
+    import CategoryLegend from 'components/Legend/CategoryLegend.svelte';
+    import type {
+        LegendPositions,
+        CategoryLegend as CategoryLegendType,
+    } from 'components/Legend/types';
     import { ChartSeriesType } from './types';
     import type {
         ChartProps,

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

@@ -1,13 +1,13 @@
 import type { ChartDataset } from 'chart.js';
 import type { Options as DataLabelsOptions } from 'chartjs-plugin-datalabels/types/options';
+import { defaultCompactNumberFormat, assureMaxLength } from 'components/utils/formatter';
+import type { DataFrame } from 'components/types';
 import type {
     ChartSeries,
     DataLabelsConfiguration,
     FillConfiguration,
     ScriptableTreemapContext,
 } from './types';
-import type { DataFrame } from '../types';
-import { defaultCompactNumberFormat, assureMaxLength } from '../utils/formatter';
 import {
     defaultValue,
     singleChartJsColor,

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

@@ -1,9 +1,9 @@
 import type { LegendOptions, ChartConfiguration, Chart } from 'chart.js';
 import type { _DeepPartialObject } from 'chart.js/dist/types/utils';
+import { assureMaxLength } from 'components/utils/formatter';
+import { CATEGORY_ITEM_VARIANT } from 'components/Legend/types';
 import type { ChartOptions } from './types';
-import { assureMaxLength } from '../utils/formatter';
 import { defaultValue, DEFAULT_GREY_COLOR } from './utils';
-import { CATEGORY_ITEM_VARIANT } from '../Legend/types';
 
 const LEGEND_MAX_LENGTH = 50;
 

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

@@ -8,6 +8,7 @@ import type {
 } from 'chart.js';
 import { DateTime } from 'luxon';
 import type { DeepPartial } from 'chart.js/dist/types/utils';
+import { assureMaxLength, defaultCompactNumberFormat } from 'components/utils/formatter';
 import type {
     CartesianAxisConfiguration,
     ChartOptions,
@@ -16,7 +17,6 @@ import type {
     TimeCartesianAxisConfiguration,
 } from './types';
 import { defaultValue, singleChartJsColor } from './utils';
-import { assureMaxLength, defaultCompactNumberFormat } from '../utils/formatter';
 
 const TICK_MAX_LENGTH = 40;
 

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

@@ -1,6 +1,6 @@
-import type { Color, DataFrame, Source } from '../types';
-import type { LegendConfiguration } from '../Legend/types';
-import type { Async } from '../../types';
+import type { Async } from 'types';
+import type { Color, DataFrame, Source } from 'components/types';
+import type { LegendConfiguration } from 'components/Legend/types';
 
 export interface ChartOptions {
     /** Specify label column in DataFrame (mandatory for all charts except Treemap) */

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

@@ -1,4 +1,4 @@
-import type { Color } from '../types';
+import type { Color } from 'components/types';
 
 export const DEFAULT_GREY_COLOR = '#F0F0F0';
 

packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethGeoJson.svelte

@@ -3,7 +3,7 @@
     import type { ExpressionSpecification, SourceSpecification, GestureOptions } from 'maplibre-gl';
     import type { BBox, FeatureCollection } from 'geojson';
     import { debounce } from 'lodash';
-    import type { ColorScale, DataBounds, Color, Source } from '../../types';
+    import type { ColorScale, DataBounds, Color, Source } from 'components/types';
     import MapRender from './MapRender.svelte';
     import { BLANK } from '../mapStyles';
     import {

packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethVectorTiles.svelte

@@ -7,7 +7,7 @@
     } from 'maplibre-gl';
     import type { BBox } from 'geojson';
     import { debounce } from 'lodash';
-    import type { ColorScale, DataBounds, Color, Source } from '../../types';
+    import type { ColorScale, DataBounds, Color, Source } from 'components/types';
     import MapRender from './MapRender.svelte';
     import { BLANK } from '../mapStyles';
     import {

packages/visualizations/src/components/ChoroplethMap/WebGl/MapRender.svelte

@@ -16,13 +16,13 @@
     import { onMount } from 'svelte';
     import { debounce } from 'lodash';
     import type { BBox } from 'geojson';
-    import SourceLink from '../../utils/SourceLink.svelte';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import ColorsLegend from 'components/Legend/ColorsLegend.svelte';
+    import BackButton from 'components/utils/BackButton.svelte';
+    import MiniMap from 'components/utils/MiniMap.svelte';
+    import type { ColorScale, DataBounds, Source } from 'components/types';
+    import type { LegendVariant } from 'components/Legend/types';
     import { computeMaxZoomFromGeoJsonFeatures, getFixedTooltips } from '../utils';
-    import ColorsLegend from '../../Legend/ColorsLegend.svelte';
-    import BackButton from '../../utils/BackButton.svelte';
-    import MiniMap from '../../utils/MiniMap.svelte';
-    import type { ColorScale, DataBounds, Source } from '../../types';
-    import type { LegendVariant } from '../../Legend/types';
     import type {
         ChoroplethFixedTooltipDescription,
         MapLayer,

packages/visualizations/src/components/ChoroplethMap/types.ts

@@ -1,8 +1,8 @@
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { FillLayerSpecification, Popup, GestureOptions, LngLatBoundsLike } from 'maplibre-gl';
 import type { DebouncedFunc } from 'lodash';
-import type { LegendPositions } from '../Legend/types';
-import type { ColorScale, Color, Source } from '../types';
+import type { LegendPositions } from 'components/Legend/types';
+import type { ColorScale, Color, Source } from 'components/types';
 
 export interface ChoroplethOptions {
     /** Configuration for the color scale used to color the choropleth shapes. */

packages/visualizations/src/components/ChoroplethMap/utils.ts

@@ -4,8 +4,8 @@ import maplibregl, { ExpressionInputType, ExpressionSpecification } from 'maplib
 import { viewport } from '@placemarkio/geo-viewport';
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { Scale } from 'chroma-js';
+import { assertUnreachable } from 'components/utils';
 import { DEFAULT_COLORS } from './constants';
-import { assertUnreachable } from '../utils';
 import {
     Color,
     ColorScale,

packages/visualizations/src/components/KpiCard/KpiCard.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import tippy from '../utils/tippy';
+    import tippy from 'components/utils/tippy';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import { defaultCompactNumberFormat, defaultNumberFormat } from 'components/utils/formatter';
     import type { KpiProps } from './types';
-    import SourceLink from '../utils/SourceLink.svelte';
-    import { defaultCompactNumberFormat, defaultNumberFormat } from '../utils/formatter';
 
     type $$Props = KpiProps;
     export let data: $$Props['data'];

packages/visualizations/src/components/KpiCard/types.ts

@@ -1,5 +1,5 @@
-import type { Color, Source } from '../types';
-import type { Async } from '../../types';
+import type { Async } from 'types';
+import type { Color, Source } from 'components/types';
 
 export interface KpiCardOptions {
     title?: string;

packages/visualizations/src/components/Legend/ColorsLegend.svelte

@@ -3,9 +3,9 @@
 <script lang="ts">
     import { onDestroy } from 'svelte';
     import { debounce } from 'lodash';
-    import type { DataBounds, ColorScale } from '../types';
+    import type { DataBounds, ColorScale } from 'components/types';
+    import { defaultCompactLegendNumberFormat } from 'components/utils/formatter';
     import type { LegendVariant, LegendPositions } from './types';
-    import { defaultCompactLegendNumberFormat } from '../utils/formatter';
 
     // options to customize the component
     export let dataBounds: DataBounds;

packages/visualizations/src/components/Legend/types.ts

@@ -1,4 +1,4 @@
-import type { Color } from '../types';
+import type { Color } from 'components/types';
 
 export const LEGEND_POSITIONS = {
     bottom: 'bottom',

packages/visualizations/src/components/Map/Poi/Poi.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import CategoryLegend from '../../Legend/CategoryLegend.svelte';
-    import SourceLink from '../../utils/SourceLink.svelte';
+    import CategoryLegend from 'components/Legend/CategoryLegend.svelte';
+    import SourceLink from 'components/utils/SourceLink.svelte';
     import WelGlMap from '../WebGl';
 
     import type { PoiMapProps } from './types';

packages/visualizations/src/components/Map/Poi/types.ts

@@ -1,7 +1,7 @@
-import type { Async } from '../../../types';
-import type { Source } from '../../types';
+import type { Async } from 'types';
+import type { Source } from 'components/types';
+import type { CategoryLegend } from 'components/Legend/types';
 import type { WebGlMapData, WebGlMapOptions } from '../WebGl/types';
-import type { CategoryLegend } from '../../Legend/types';
 
 export type PoiMapData = Async<WebGlMapData>;
 

packages/visualizations/src/components/Map/WebGl/WebGl.svelte

@@ -4,7 +4,7 @@
     import type { LngLatBoundsLike } from 'maplibre-gl';
     import { onDestroy, onMount } from 'svelte';
 
-    import createDeepEqual from '../../../stores/createDeepEqual';
+    import createDeepEqual from 'stores/createDeepEqual';
 
     import Map from './WebGl';
     import {

packages/visualizations/src/components/Map/WebGl/constants.ts

@@ -4,7 +4,7 @@ import type {
     ControlPosition,
     PopupOptions,
 } from 'maplibre-gl';
-import type { Color } from '../../types';
+import type { Color } from 'components/types';
 
 import type { PopupDisplayTypes } from './types';
 

packages/visualizations/src/components/Map/WebGl/types.ts

@@ -10,8 +10,8 @@ import type {
 } from 'maplibre-gl';
 
 import type { BBox, GeoJsonProperties } from 'geojson';
+import type { Color } from 'components/types';
 import type { POPUP_DISPLAY } from './constants';
-import type { Color } from '../../types';
 
 export type WebGlMapData = Partial<{
     sources: StyleSpecification['sources'];

packages/visualizations/src/components/Map/WebGl/utils.ts

@@ -8,7 +8,7 @@ import type {
     FilterSpecification,
 } from 'maplibre-gl';
 
-import { isGroupByForMatchExpression, Color } from '../../types';
+import { isGroupByForMatchExpression, Color } from 'components/types';
 
 import type {
     CircleLayer,