Fix: usage shifts

src/lib/charts/line.svelte

@@ -7,6 +7,8 @@
     export let series: LineSeriesOption[];
     export let options: EChartsOption = null;
     export let formatted: 'days' | 'hours' = 'days';
+
+    export let applyStyles: boolean = true;
 </script>
 
 <Base
@@ -16,10 +18,11 @@
         s.type = 'line';
         s.stack = 'total';
         s.lineStyle = {
-            shadowBlur: 38,
-            shadowColor: Colors.Primary,
-            shadowOffsetY: 15,
-            shadowOffsetX: 0
+            shadowBlur: applyStyles ? 38 : undefined,
+            shadowColor: applyStyles ? Colors.Primary : undefined,
+            shadowOffsetY: applyStyles ? 15 : undefined,
+            shadowOffsetX: 0,
+            width: applyStyles ? undefined : 2
         };
         s.showSymbol = false;
 

src/lib/components/card.svelte

@@ -17,6 +17,7 @@
         danger?: boolean;
         style?: string;
         class?: string;
+        fullHeightChild?: boolean;
     };
 
     type ButtonProps = {
@@ -40,19 +41,20 @@
     export let padding: $$Props['padding'] = 'm';
     export let radius: $$Props['radius'] = 'm';
     export let variant: $$Props['variant'] = 'primary';
+    export let fullHeightChild: $$Props['fullHeightChild'] = false;
 
     $: resolvedClasses = [classes].filter(Boolean).join(' ');
 </script>
 
 {#if href}
     <Card.Link class={resolvedClasses} {href} {style} {padding} {radius} {variant} on:click>
-        <Layout.Stack gap="xl">
+        <Layout.Stack gap="xl" height={fullHeightChild ? '100%' : undefined}>
             <slot />
         </Layout.Stack>
     </Card.Link>
 {:else if isButton}
     <Card.Button class={resolvedClasses} {style} {padding} {radius} {variant} on:click>
-        <Layout.Stack gap="xl">
+        <Layout.Stack gap="xl" height={fullHeightChild ? '100%' : undefined}>
             <slot />
         </Layout.Stack>
     </Card.Button>
@@ -64,7 +66,7 @@
         {padding}
         {radius}
         {variant}>
-        <Layout.Stack gap="xl">
+        <Layout.Stack gap="xl" height={fullHeightChild ? '100%' : undefined}>
             <slot />
         </Layout.Stack>
     </Card.Base>

src/lib/helpers/faker.ts

@@ -250,3 +250,30 @@ function generateSingleValue(
         }
     }
 }
+
+function seededRandom(seed: number) {
+    const x = Math.sin(seed) * 10000;
+    return x - Math.floor(x);
+}
+
+const BASE_TIME_MS = Date.now();
+
+export function generateFakeBarChartData(seed = 1) {
+    const fakeData: [number, number][] = [];
+    for (let i = 23; i >= 0; i--) {
+        const val = seededRandom(seed + i) * 1_000_000;
+        fakeData.push([BASE_TIME_MS - i * 60 * 60 * 1000, Math.round(val)]);
+    }
+    return fakeData;
+}
+
+export function generateFakeLineChartData(seed = 2) {
+    const fakeData: [number, number][] = [];
+    let value = seededRandom(seed) * 5000 + 5000;
+    for (let i = 23; i >= 0; i--) {
+        value += (seededRandom(seed + i) - 0.5) * 1000;
+        value = Math.max(0, value);
+        fakeData.push([BASE_TIME_MS - i * 60 * 60 * 1000, Math.round(value)]);
+    }
+    return fakeData;
+}

src/routes/(console)/project-[region]-[project]/overview/(components)/skeletons/extended.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import { Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+
+    let {
+        loading = false,
+        metricName,
+        resourceMetric = null
+    }: {
+        loading: boolean;
+        metricName: string;
+        resourceMetric?:
+            | string
+            | {
+                  value: string;
+                  unit: string;
+              }
+            | null;
+    } = $props();
+
+    function isMetricObject(
+        metric: typeof resourceMetric
+    ): metric is { value: string; unit: string } {
+        return metric !== null && typeof metric === 'object';
+    }
+</script>
+
+<Layout.Stack gap="xxxs">
+    <Typography.Title>
+        <div class="overlay-container">
+            {#if loading}
+                <div class="overlay-item skeleton" transition:fade={{ duration: 300 }}>
+                    <Skeleton height="100%" width="7.5rem" variant="line" style="opacity: 0.35" />
+                </div>
+            {:else if resourceMetric !== null}
+                <div class="overlay-item" transition:fade={{ duration: 300 }}>
+                    {#if isMetricObject(resourceMetric)}
+                        {resourceMetric.value}
+                        <span style:line-height="0%" style:font-size="var(--font-size-0)">
+                            {resourceMetric.unit}
+                        </span>
+                    {:else}
+                        {resourceMetric}
+                    {/if}
+                </div>
+            {/if}
+        </div>
+    </Typography.Title>
+
+    <Typography.Text>{metricName}</Typography.Text>
+</Layout.Stack>
+
+<style lang="scss">
+    .overlay-container {
+        display: grid;
+        min-height: 1lh;
+        align-items: stretch;
+        grid-template-areas: 'content';
+    }
+
+    .overlay-item {
+        grid-area: content;
+
+        &.skeleton {
+            display: flex;
+            align-items: center;
+        }
+    }
+</style>

src/routes/(console)/project-[region]-[project]/overview/(components)/skeletons/simple.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import { Skeleton, Typography } from '@appwrite.io/pink-svelte';
+
+    let {
+        value,
+        resource,
+        unit = null,
+        loading = false
+    }: {
+        loading: boolean;
+        resource: string;
+        unit?: string;
+        value: string | number | boolean;
+    } = $props();
+</script>
+
+<Typography.Title>
+    <div class="overlay-container">
+        {#if loading}
+            <div class="overlay-item skeleton" transition:fade={{ duration: 150 }}>
+                <Skeleton
+                    height="80%"
+                    width="5rem"
+                    variant="line"
+                    style="opacity: 0.35; margin-inline-start: -2px" />
+            </div>
+        {:else}
+            <div class="overlay-item" transition:fade={{ duration: 150, delay: 75 }}>
+                {value}
+                {#if unit}
+                    <span style:line-height="0%" style:font-size="var(--font-size-0)">
+                        {unit}
+                    </span>
+                {/if}
+            </div>
+        {/if}
+    </div>
+</Typography.Title>
+
+<Typography.Text>
+    {resource}
+</Typography.Text>
+
+<style lang="scss">
+    .overlay-container {
+        display: grid;
+        min-height: 1lh;
+        align-items: stretch;
+        grid-template-areas: 'content';
+    }
+
+    .overlay-item {
+        grid-area: content;
+
+        &.skeleton {
+            display: flex;
+            align-items: center;
+        }
+    }
+</style>