Merge pull request #76 from WJSoftware:JP/drilldown_demo

feat(demo):  Add sales drilldown demo page

Author: webJose

src/data-models.d.ts

@@ -9,4 +9,47 @@ export type Person = {
     country_code: string;
     credit_score: number;
     net_worth: number;
-};
+};
+
+export type GeoSale = {
+    id: number;
+    country_code: string;
+    country_name: string;
+    city: string;
+    month: number;
+    year: number;
+    sales_amount: number;
+    product_category: string;
+    quantity_sold: number;
+    total_sales: number;
+    total_costs: number;
+    top_client: string;
+    top_client_fraction: number;
+};
+
+export type GeoSaleQuantities = {
+    sales_amount: number;
+    quantity_sold: number;
+    total_sales: number;
+    total_costs: number;
+};
+
+export type GeoSaleByCountry = GeoSaleQuantities & {
+    country_code: string;
+    country_name: string;
+}
+
+export type GeoSaleByCity = GeoSaleByCountry & {
+    city: string;
+};
+
+export type GeoSalesResult = {
+    detail: GeoSale[];
+    byCountry: GeoSaleByCountry[];
+    byCity: GeoSaleByCity[];
+};
+
+export type GeoSaleColumn = {
+    dataType?: 'string' | 'currency' | 'real-amount' | 'int-amount';
+    numberFormatter?: Intl.NumberFormat;
+};

src/demolib/EditInGitHub.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    type Props = {
+        editUrl: string;
+    };
+
+    let {
+        editUrl,
+    }: Props = $props();
+</script>
+<a
+    class="position-absolute bottom-0 end-0 rounded-circle btn btn-sm btn-secondary mb-3 me-3 semi-transparent"
+    title="See an error?  Want to improve the demo?  Curious about the source code?  View/edit this page in GitHub."
+    href={editUrl}
+    target="_blank"
+>
+    <i class="bi bi-pencil"></i>
+</a>
+
+<style lang="scss">
+    .semi-transparent {
+        opacity: 0.4;
+        &:hover {
+            opacity: 1;
+        }
+    }
+</style>

src/demolib/GlobalOptions.svelte.ts

@@ -0,0 +1,5 @@
+export class GlobalOptions {
+    noViewportInChildren = $state(true);
+}
+
+export const globalOptions = new GlobalOptions();

src/demolib/Numeric.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+
+    type Props = {
+        formatter?: Intl.NumberFormat;
+        value: number;
+    };
+
+    let {
+        formatter = new Intl.NumberFormat(browser ? navigator?.language : undefined, { maximumFractionDigits: 4 }),
+        value,
+    }: Props = $props();
+</script>
+
+<span class="numeric">{formatter.format(value)}</span>
+
+<style>
+    span.numeric {
+        font-family: monospace;
+    }
+</style>

src/routes/demoOptions.svelte.ts renamed to src/demolib/demoOptions.svelte.ts

@@ -0,0 +1,5 @@
+let nextId = 0;
+
+export function nextControlId(prefix?: string) {
+    return `${prefix ?? 'control'}${++nextId}`;
+};

src/demolib/nextControlId.ts

@@ -0,0 +1,21 @@
+import { browser } from "$app/environment";
+
+export const currencyFormatter = new Intl.NumberFormat(browser ? navigator?.language : undefined, {
+    style: 'currency',
+    currency: 'USD',
+    currencyDisplay: 'narrowSymbol'
+});
+
+export function amountFormatterFactory(decimalPlaces: number) {
+    return new Intl.NumberFormat(browser ? navigator?.language : undefined, {
+        style: 'decimal',
+        minimumFractionDigits: decimalPlaces,
+        maximumFractionDigits: decimalPlaces,
+    });
+}
+
+export const fractionFormatter = new Intl.NumberFormat(browser ? navigator?.language : undefined, {
+    style: 'percent',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+});

src/demolib/numberFormatters.ts

@@ -7,6 +7,15 @@
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" class="" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
 		<title>wjfe@dataview - Svelte v5 Data View Component</title>
+		<script type="text/javascript">
+			(function () {
+				var redirect = sessionStorage.redirect;
+				delete sessionStorage.redirect;
+				if (redirect && redirect != location.href) {
+					history.replaceState(null, null, redirect);
+				}
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/routes/themeOptions.svelte.ts renamed to src/demolib/themeOptions.svelte.ts

@@ -1,16 +1,27 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     import type { Snippet } from "svelte";
-    import ThemeSwitch from "./ThemeSwitch.svelte";
     import "../app.scss";
+    import ThemeSwitch from "./ThemeSwitch.svelte";
 
     let { children }: {
         children: Snippet
     } = $props();
 </script>
 
 <div class="d-flex flex-column doc-container">
-    <nav class="navbar bg-primary-subtle px-3">
+    <nav class="navbar navbar-expand-md bg-primary-subtle px-3">
         <span class="navbar-brand">WjDataView Demo</span>
+        <div class="navbar-collapse">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a href={base} class="nav-link">Overview (Home)</a>
+                </li>
+                <li class="nav-item">
+                    <a href="{base}/sales" class="nav-link">Data Drilldown Demo</a>
+                </li>
+            </ul>
+        </div>
         <a
             href="https://github.com/WJSoftware/wjfe-dataview"
             title="Repository"
@@ -22,7 +33,7 @@
         <ThemeSwitch />
     </nav>
     <div class="flex-fill overflow-auto">
-        <div class="container-fluid overflow-auto h-100">
+        <div class="container-fluid overflow-auto h-100 theme-def d-flex flex-column">
             {@render children()}
         </div>
     </div>
@@ -72,4 +83,16 @@
     .footer-logo {
         height: 1em;
     }
+
+    .theme-def {
+        --wjdv-sky-bg-rgb: 200, 240, 250;
+        --wjdv-sky-color: var(--bs-black);
+        --bs-row-selection-bg-color-rgb: 221, 235, 255;
+        
+        :global([data-bs-theme="dark"]) & {
+            --wjdv-sky-bg-rgb: 30, 90, 120;
+            --wjdv-sky-color: var(--bs-white);
+            --bs-row-selection-bg-color-rgb: 21, 35, 55;
+        }
+    }
 </style>