From a1e578a7c16c132647d9fe23325a537c4005a372 Mon Sep 17 00:00:00 2001
From: Etienne Burdet <etienne.burdet@hey.com>
Date: Fri, 29 Dec 2023 15:12:44 +0100
Subject: [PATCH] feat: add basic KPI poc

options now named "lolptions", no SvelteImpl
---
 .../src/components/KpiCard.tsx                | 40 ++++++++++++++++---
 .../stories/KpiCard/Single.stories.tsx        |  8 ++--
 .../src/components/KpiCard/KpiCard.svelte     | 36 ++++++++---------
 .../src/components/KpiCard/index.ts           |  1 +
 packages/visualizations/src/index.ts          |  1 +
 5 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/packages/visualizations-react/src/components/KpiCard.tsx b/packages/visualizations-react/src/components/KpiCard.tsx
index 1ad9d7e6..981555d0 100644
--- a/packages/visualizations-react/src/components/KpiCard.tsx
+++ b/packages/visualizations-react/src/components/KpiCard.tsx
@@ -1,8 +1,38 @@
-import { KpiCard as _KpiCard, KpiCardOptions } from '@opendatasoft/visualizations';
-import { FC } from 'react';
-import { Props } from './Props';
-import wrap from './ReactImpl';
+import { KpiCard as _KpiCard, KpiCardImpl, KpiCardOptions } from '@opendatasoft/visualizations';
+import React, { useLayoutEffect, useRef } from 'react';
+
+// export const useSvelteComponent = <P extends object>({
+//     Component,
+//     props,
+//     svelteRef,
+// }: SvelteComponentProps<P> & {
+//     svelteRef: RefObject<HTMLDivElement>;
+// }) => {
+//     useLayoutEffect(() => {
+//         while (svelteRef.current?.firstChild) {
+//             svelteRef.current?.firstChild?.remove();
+//         }
+//         new Component({
+//             target: svelteRef.current,
+//             props,
+//         });
+//     }, [Component, props, svelteRef]);
+// };
 
 // Explicit name and type are needed for storybook
-const KpiCard: FC<Props<number, KpiCardOptions>> = wrap(_KpiCard);
+const KpiCard = (props: any) => {
+    const svelteRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (svelteRef?.current) {
+            new KpiCardImpl({
+                target: svelteRef.current,
+                props,
+            });
+        }
+    }, [props, svelteRef]);
+
+    return <div ref={svelteRef} />;
+};
+
 export default KpiCard;
diff --git a/packages/visualizations-react/stories/KpiCard/Single.stories.tsx b/packages/visualizations-react/stories/KpiCard/Single.stories.tsx
index b87ac7a2..d4045a7b 100644
--- a/packages/visualizations-react/stories/KpiCard/Single.stories.tsx
+++ b/packages/visualizations-react/stories/KpiCard/Single.stories.tsx
@@ -9,7 +9,7 @@ const meta: ComponentMeta<typeof KpiCard> = {
         data: {
             value: CONTROLS.number,
         },
-        options: {
+        lolptions: {
             header: CONTROLS.text,
             imgSrc: CONTROLS.image,
             title: CONTROLS.text,
@@ -64,7 +64,7 @@ const meta: ComponentMeta<typeof KpiCard> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof KpiCard> = args => (
+const Template: ComponentStory<typeof KpiCard> = (args) => (
     <div
         style={{
             display: 'flex',
@@ -82,7 +82,7 @@ Default.args = {
         loading: false,
         value: 1000,
     },
-    options: {
+    lolptions: {
         header: 'Header',
         title: 'KPI Card',
         description: 'This is a description',
@@ -103,7 +103,7 @@ FullCustom.args = {
         loading: false,
         value: 12345,
     },
-    options: {
+    lolptions: {
         header: 'Header',
         imgSrc: IMAGES.gov,
         title: 'Title',
diff --git a/packages/visualizations/src/components/KpiCard/KpiCard.svelte b/packages/visualizations/src/components/KpiCard/KpiCard.svelte
index 6c8a310d..3f083e58 100644
--- a/packages/visualizations/src/components/KpiCard/KpiCard.svelte
+++ b/packages/visualizations/src/components/KpiCard/KpiCard.svelte
@@ -6,16 +6,16 @@
     import { defaultCompactNumberFormat, defaultNumberFormat } from '../utils/formatter';
 
     export let data: Async<number>;
-    export let options: KpiCardOptions;
+    export let lolptions: KpiCardOptions;
 
     let displayValue: string;
     let tooltipValue: string;
     let format: (value: number) => string;
     let formatCompact: (value: number) => string;
 
-    $: format = options.format || defaultNumberFormat;
+    $: format = lolptions.format || defaultNumberFormat;
 
-    $: formatCompact = options.formatCompact || defaultCompactNumberFormat;
+    $: formatCompact = lolptions.formatCompact || defaultCompactNumberFormat;
 
     $: if (data.value !== undefined) {
         displayValue = formatCompact(data.value);
@@ -30,22 +30,22 @@
     {#if data.error}
         Error : {JSON.stringify(data.error)}
     {:else}
-        {#if options.header}
-            <div class="kpi-card__header">{options.header}</div>
+        {#if lolptions.header}
+            <div class="kpi-card__header">{lolptions.header}</div>
         {/if}
         <div class="kpi-card__body">
-            {#if options.imgSrc}
-                <img src={options.imgSrc} alt="" aria-hidden="true" class="kpi-card__img" />
+            {#if lolptions.imgSrc}
+                <img src={lolptions.imgSrc} alt="" aria-hidden="true" class="kpi-card__img" />
             {/if}
             <div class="kpi-card__content">
-                {#if options.title}
-                    <h3 class="kpi-card__title">{options.title}</h3>
+                {#if lolptions.title}
+                    <h3 class="kpi-card__title">{lolptions.title}</h3>
                 {/if}
                 <!-- the weird syntax is to avoid any space at all between the value and the prefix or suffix
                 The reason is that you want to support units that "stick" the value without any space, such as $45 or 45€
                 If you want to have a space (45 Cars), the prefix or suffix itself has to contain the space -->
                 <div class="kpi-card__value">
-                    {#if options.prefix}<span class="kpi-card__prefix">{options.prefix}</span
+                    {#if lolptions.prefix}<span class="kpi-card__prefix">{lolptions.prefix}</span
                         >{/if}{#if data.loading}<span
                             class="kpi-card__value-loading"
                         />{:else if tooltipValue !== displayValue}<span
@@ -55,22 +55,22 @@
                             aria-label={tooltipValue}
                             class="kpi-card__value-number">{displayValue}</span
                         >{:else}<span class="kpi-card__value-number">{displayValue}</span
-                        >{/if}{#if options.suffix}<span class="kpi-card__suffix"
-                            >{options.suffix}</span
+                        >{/if}{#if lolptions.suffix}<span class="kpi-card__suffix"
+                            >{lolptions.suffix}</span
                         >{/if}
                 </div>
-                {#if options.description}
-                    <p class="kpi-card__description">{options.description}</p>
+                {#if lolptions.description}
+                    <p class="kpi-card__description">{lolptions.description}</p>
                 {/if}
             </div>
         </div>
-        {#if options.source}
+        {#if lolptions.source}
             <div class="kpi-card__source-link">
-                <SourceLink source={options.source} />
+                <SourceLink source={lolptions.source} />
             </div>
         {/if}
-        {#if options.footer}
-            <div class="kpi-card__footer">{options.footer}</div>
+        {#if lolptions.footer}
+            <div class="kpi-card__footer">{lolptions.footer}</div>
         {/if}
     {/if}
 </div>
diff --git a/packages/visualizations/src/components/KpiCard/index.ts b/packages/visualizations/src/components/KpiCard/index.ts
index 0034b26a..142ef423 100644
--- a/packages/visualizations/src/components/KpiCard/index.ts
+++ b/packages/visualizations/src/components/KpiCard/index.ts
@@ -2,6 +2,7 @@ import KpiCardImpl from './KpiCard.svelte';
 import SvelteImpl from '../SvelteImpl';
 import type { KpiCardOptions } from './types';
 
+export { KpiCardImpl };
 export default class KpiCard extends SvelteImpl<number, KpiCardOptions> {
     protected getSvelteComponentClass(): typeof KpiCardImpl {
         return KpiCardImpl;
diff --git a/packages/visualizations/src/index.ts b/packages/visualizations/src/index.ts
index e9b46583..be6275e2 100644
--- a/packages/visualizations/src/index.ts
+++ b/packages/visualizations/src/index.ts
@@ -1,6 +1,7 @@
 export { default as Chart, _ChartJs, _ChartDataLabels } from './components/Chart';
 export { default as MarkdownText } from './components/MarkdownText';
 export { default as KpiCard } from './components/KpiCard';
+export { KpiCardImpl } from './components/KpiCard';
 export { ChoroplethGeoJson, ChoroplethVectorTiles } from './components/Map/WebGl';
 export { default as ChoroplethSvg } from './components/Map/Svg';
 export { default as PoiMap } from './components/MapPoi';