feat: add basic KPI poc

options now named "lolptions", no SvelteImpl
opendatasoft · Dec 29, 2023 · a1e578a · a1e578a
1 parent f356fa5
commit a1e578a
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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';