@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/analyticsAnalysisOverlay.md

@@ -0,0 +1,630 @@
+# AnalyticsAnalysisOverlay
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#/components/analyticsAnalysisOverlay
+*Captured:* 2026-04-27T14:57:28.096Z
+
+Development overlay for visualizing tracked GA elements directly in the viewport. It scans DOM nodes with tracking data attributes and overlays aggregated metrics from uploaded analytics CSV files. See the new helper demo for getTrackingAttributes.
+
+## AnalyticsAnalysisOverlay
+
+Download the demo CSV and upload it in the draggable overlay banner to see metrics mapped to the tracked elements below.
+
+Download demo CSV
+
+### Example: Example 1
+
+Card with visibility tracking
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
+Button
+
+Button with click tracking
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
+Button
+Button with autoTrackingKey
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
+Button
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';
+import { FormattedMessage, IntlProvider } from 'react-intl';
+
+import { analyticsAnalysisOverlayExampleMessages } from './AnalyticsAnalysisOverlayExampleData';
+
+const trackedCardClassName = 'card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct';
+
+export default () => (
+    <div className='position-relative padding-15 bg-color-lightest rounded'>
+        <IntlProvider locale='en-GB' messages={analyticsAnalysisOverlayExampleMessages}>
+            <div className='display-grid gap-20 grid-auto-fit-300'>
+                <div
+                    className='display-grid gap-15'
+                    style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}
+                >
+                    <div
+                        className={trackedCardClassName}
+                        {...getTrackingAttributes({
+                            trigger: 'visibility',
+                            category: 'uikit demo',
+                            action: 'card seen',
+                            label: 'vehicle_overview',
+                        })}
+                    >
+                        <h6 className='margin-top-0'>Card with visibility tracking</h6>
+                        <p className='margin-bottom-10'>
+                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+                            invidunt ut labore et dolore.
+                        </p>
+                        <Button
+                            as='a'
+                            bsStyle='default'
+                            href='https://rio.cloud/en?utm_source=uikit_Demo&utm_medium=button&utm_campaign=analytics_demo&utm_content=analytics_overlay_examples'
+                            target='_blank'
+                            rel='noreferrer noopener'
+                            {...getTrackingAttributes({
+                                trigger: 'click',
+                                category: 'uikit demo',
+                                action: 'button click',
+                                label: 'open_vehicle_details',
+                            })}
+                        >
+                            Button
+                        </Button>
+                    </div>
+                </div>
+
+                <div
+                    className={trackedCardClassName}
+                    {...getTrackingAttributes({
+                        trigger: 'click',
+                        category: 'uikit demo',
+                        action: 'button click',
+                        label: 'intl-msg:analyticsAnalysisOverlay.data.cardB.title',
+                    })}
+                >
+                    <h6 className='margin-top-0'>
+                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardB.title' />
+                    </h6>
+                    <p className='margin-bottom-10'>
+                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardB.description' />
+                    </p>
+                    <Button
+                        bsStyle='default'
+                        {...getTrackingAttributes({
+                            trigger: 'click',
+                            category: 'uikit demo',
+                            action: 'button click',
+                            label: 'intl-msg:analyticsAnalysisOverlay.data.cardB.button',
+                        })}
+                    >
+                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardB.button' />
+                    </Button>
+                </div>
+
+                <div className={trackedCardClassName}>
+                    <h6 className='margin-top-0'>
+                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardC.title' />
+                    </h6>
+                    <p className='margin-bottom-10'>
+                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardC.description' />
+                    </p>
+                    <Button bsStyle='default' autoTrackingKey='intl-msg:analyticsAnalysisOverlay.data.cardC.button'>
+                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardC.button' />
+                    </Button>
+                </div>
+            </div>
+        </IntlProvider>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="position-relative padding-15 bg-color-lightest rounded">
+    <div class="display-grid gap-20 grid-auto-fit-300">
+        <div class="display-grid gap-15" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
+            <div class="card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct" data-track-ga-event-trigger="visibility" data-track-ga-event-category="uikit demo" data-track-ga-event-action="card seen" data-track-ga-event-label="vehicle_overview">
+                <h6 class="margin-top-0">Card with visibility tracking</h6>
+                <p class="margin-bottom-10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
+                <a href="https://rio.cloud/en?utm_source=uikit_Demo&amp;utm_medium=button&amp;utm_campaign=analytics_demo&amp;utm_content=analytics_overlay_examples" target="_blank" rel="noreferrer noopener" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="open_vehicle_details" class="btn btn-default gap-0 btn-component" tabindex="0">Button</a>
+            </div>
+        </div>
+        <div class="card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="intl-msg:analyticsAnalysisOverlay.data.cardB.title">
+            <h6 class="margin-top-0">Button with click tracking</h6>
+            <p class="margin-bottom-10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
+            <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="intl-msg:analyticsAnalysisOverlay.data.cardB.button" class="btn btn-default btn-component" tabindex="0">Button</button>
+        </div>
+        <div class="card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct">
+            <h6 class="margin-top-0">Button with autoTrackingKey</h6>
+            <p class="margin-bottom-10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
+            <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="button autoTracking" data-track-ga-event-action="button click" data-track-ga-event-label="intl-msg:analyticsAnalysisOverlay.data.cardC.button" class="btn btn-default btn-component" tabindex="0">Button</button>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
+| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |
+
+### Example: Example 2
+
+Expander Row 1
+Expander Card 1
+This card is inside row 1 and is tracked when it becomes visible.
+Row 1 Button
+
+Expander Row 2
+
+Expander Row 3
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';
+
+const trackedPanelClassName = 'max-width-300';
+
+export default () => {
+    const items = [
+        {
+            id: 'expander-row-1',
+            header: 'Expander Row 1',
+            open: true,
+            trackingAttributes: getTrackingAttributes({
+                trigger: 'click',
+                category: 'uikit demo',
+                action: 'button click',
+                label: 'expander_row_1_header',
+            }),
+            body: (
+                <ExpanderPanel
+                    title='Expander Card 1'
+                    open
+                    bsStyle='info'
+                    className={trackedPanelClassName}
+                    trackingAttributes={getTrackingAttributes({
+                        trigger: 'visibility',
+                        category: 'uikit demo',
+                        action: 'card seen',
+                        label: 'expander_row_1_card',
+                    })}
+                >
+                    <p className='margin-bottom-10'>
+                        This card is inside row 1 and is tracked when it becomes visible.
+                    </p>
+                    <Button
+                        bsStyle='info'
+                        {...getTrackingAttributes({
+                            trigger: 'click',
+                            category: 'uikit demo',
+                            action: 'button click',
+                            label: 'expander_row_1_button',
+                        })}
+                    >
+                        Row 1 Button
+                    </Button>
+                </ExpanderPanel>
+            ),
+        },
+        {
+            id: 'expander-row-2',
+            header: 'Expander Row 2',
+            trackingAttributes: getTrackingAttributes({
+                trigger: 'click',
+                category: 'uikit demo',
+                action: 'button click',
+                label: 'expander_row_2_header',
+            }),
+            body: (
+                <ExpanderPanel
+                    title='Expander Card 2'
+                    open
+                    bsStyle='success'
+                    className={trackedPanelClassName}
+                    trackingAttributes={getTrackingAttributes({
+                        trigger: 'visibility',
+                        category: 'uikit demo',
+                        action: 'card seen',
+                        label: 'expander_row_2_card',
+                    })}
+                >
+                    <p className='margin-bottom-10'>
+                        This card is inside row 2 and is tracked when it becomes visible.
+                    </p>
+                    <Button
+                        bsStyle='success'
+                        {...getTrackingAttributes({
+                            trigger: 'click',
+                            category: 'uikit demo',
+                            action: 'button click',
+                            label: 'expander_row_2_button',
+                        })}
+                    >
+                        Row 2 Button
+                    </Button>
+                </ExpanderPanel>
+            ),
+        },
+        {
+            id: 'expander-row-3',
+            header: 'Expander Row 3',
+            trackingAttributes: getTrackingAttributes({
+                trigger: 'click',
+                category: 'uikit demo',
+                action: 'button click',
+                label: 'expander_row_3_header',
+            }),
+            body: (
+                <ExpanderPanel
+                    title='Expander Card 3'
+                    open
+                    bsStyle='danger'
+                    className={trackedPanelClassName}
+                    trackingAttributes={getTrackingAttributes({
+                        trigger: 'visibility',
+                        category: 'uikit demo',
+                        action: 'card seen',
+                        label: 'expander_row_3_card',
+                    })}
+                >
+                    <p className='margin-bottom-10'>
+                        This card is inside row 3 and is tracked when it becomes visible.
+                    </p>
+                    <Button
+                        bsStyle='danger'
+                        {...getTrackingAttributes({
+                            trigger: 'click',
+                            category: 'uikit demo',
+                            action: 'button click',
+                            label: 'expander_row_3_button',
+                        })}
+                    >
+                        Row 3 Button
+                    </Button>
+                </ExpanderPanel>
+            ),
+        },
+    ];
+
+    return (
+        <div className='padding-15 bg-color-lightest rounded'>
+            <ExpanderList items={items} />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-15 bg-color-lightest rounded">
+    <ul class="expander-list list-group rounded border">
+        <li class="list-group-item expandable open">
+            <div class="expander-list-header" aria-label="expander item header" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_1_header">
+                <span class="expander-list-header-content">Expander Row 1</span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+            <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                <div class="expander-list-body-wrapper">
+                    <div class="expander-list-body" aria-label="expander item body">
+                        <div class="expander-panel panel panel-info max-width-300" aria-label="expander panel">
+                            <div class="panel-heading open" aria-label="panel heading" data-track-ga-event-trigger="visibility" data-track-ga-event-category="uikit demo" data-track-ga-event-action="card seen" data-track-ga-event-label="expander_row_1_card">
+                                <span class="title">Expander Card 1</span>
+                                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                                </span>
+                            </div>
+                            <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                                <div>
+                                    <div class="panel-body">
+                                        <p class="margin-bottom-10">This card is inside row 1 and is tracked when it becomes visible.</p>
+                                        <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_1_button" class="btn btn-info btn-component" tabindex="0">Row 1 Button</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </li>
+        <li class="list-group-item expandable">
+            <div class="expander-list-header" aria-label="expander item header" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_2_header">
+                <span class="expander-list-header-content">Expander Row 2</span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item expandable">
+            <div class="expander-list-header" aria-label="expander item header" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_3_header">
+                <span class="expander-list-header-content">Expander Row 3</span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+    </ul>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
+| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |
+
+### Example: Example 3
+
+Open dialog
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Dialog from '@rio-cloud/rio-uikit/Dialog';
+import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';
+
+const dialogTitle = 'Analytics Overlay Demo Dialog';
+
+export default () => {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const closeDialog = () => {
+        setIsDialogOpen(false);
+    };
+
+    return (
+        <div className='padding-15 bg-color-lightest rounded'>
+            <Button
+                bsStyle='primary'
+                onClick={() => setIsDialogOpen(true)}
+                {...getTrackingAttributes({
+                    trigger: 'click',
+                    category: 'uikit demo',
+                    action: 'button click',
+                    label: 'analytics_overlay_dialog_open',
+                })}
+            >
+                Open dialog
+            </Button>
+
+            <Dialog
+                show={isDialogOpen}
+                title={dialogTitle}
+                showCloseButton
+                onClose={closeDialog}
+                body={
+                    <div
+                        {...getTrackingAttributes({
+                            trigger: 'visibility',
+                            category: 'uikit demo',
+                            action: 'dialog seen',
+                            label: 'analytics_overlay_dialog_body',
+                        })}
+                    >
+                        <p className='margin-bottom-10'>
+                            This is dummy dialog content for the AnalyticsAnalysisOverlay demo.
+                        </p>
+                        <p className='margin-0'>
+                            Upload the demo CSV in the overlay banner and inspect tracked values on this dialog.
+                        </p>
+                    </div>
+                }
+                footer={
+                    <div className='display-flex justify-content-end gap-10'>
+                        <Button
+                            bsStyle='default'
+                            onClick={closeDialog}
+                            {...getTrackingAttributes({
+                                trigger: 'click',
+                                category: 'uikit demo',
+                                action: 'button click',
+                                label: 'analytics_overlay_dialog_cancel',
+                            })}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            bsStyle='primary'
+                            onClick={closeDialog}
+                            {...getTrackingAttributes({
+                                trigger: 'click',
+                                category: 'uikit demo',
+                                action: 'button click',
+                                label: 'analytics_overlay_dialog_confirm',
+                            })}
+                        >
+                            Save
+                        </Button>
+                    </div>
+                }
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-15 bg-color-lightest rounded">
+    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="analytics_overlay_dialog_open" class="btn btn-primary btn-component" tabindex="0">Open dialog</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
+| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |
+
+### Example: Was this helpful?
+
+Was this helpful?
+Not really Kind of Yes, it was Reset
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import { motion } from '@rio-cloud/rio-uikit/motion';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Fade from '@rio-cloud/rio-uikit/Fade';
+import FeedbackInlineButtons from '@rio-cloud/rio-uikit/FeedbackInlineButtons';
+import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';
+
+export default () => {
+    const [hasVoted, setHasVoted] = useState(false);
+
+    const handleVote = () => {
+        setHasVoted(true);
+    };
+
+    return (
+        <div
+            className='padding-15 bg-color-lightest rounded'
+            {...getTrackingAttributes({
+                trigger: 'visibility',
+                category: 'uikit demo',
+                action: 'card seen',
+                label: 'feedback_subtle_section',
+            })}
+        >
+            <div className='height-40 display-flex align-items-center'>
+                <Fade>
+                    {hasVoted ? (
+                        <motion.div
+                            initial={{ opacity: 0, x: 20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            className='display-flex gap-5 align-items-center'
+                        >
+                            <div className='text-color-success text-size-18 line-height-20'>
+                                <span className='rioglyph rioglyph-ok-sign' />
+                            </div>
+                            <div className='text-color-dark'>Thank you for your feedback</div>
+                        </motion.div>
+                    ) : (
+                        <FeedbackInlineButtons
+                            headline='Was this helpful?'
+                            buttons={[
+                                <Button
+                                    key='no'
+                                    bsStyle='muted'
+                                    bsSize='sm'
+                                    onClick={handleVote}
+                                    {...getTrackingAttributes({
+                                        trigger: 'click',
+                                        category: 'uikit demo',
+                                        action: 'button click',
+                                        label: 'feedback_subtle_not_really',
+                                    })}
+                                >
+                                    <span className='rioglyph rioglyph-face-frown text-color-danger' />
+                                    <span>Not really</span>
+                                </Button>,
+                                <Button
+                                    key='kinda'
+                                    bsStyle='muted'
+                                    bsSize='sm'
+                                    onClick={handleVote}
+                                    {...getTrackingAttributes({
+                                        trigger: 'click',
+                                        category: 'uikit demo',
+                                        action: 'button click',
+                                        label: 'feedback_subtle_kind_of',
+                                    })}
+                                >
+                                    <span className='rioglyph rioglyph-face-neutral text-color-warning' />
+                                    <span>Kind of</span>
+                                </Button>,
+                                <Button
+                                    key='yes'
+                                    bsStyle='muted'
+                                    bsSize='sm'
+                                    onClick={handleVote}
+                                    {...getTrackingAttributes({
+                                        trigger: 'click',
+                                        category: 'uikit demo',
+                                        action: 'button click',
+                                        label: 'feedback_subtle_yes_it_was',
+                                    })}
+                                >
+                                    <span className='rioglyph rioglyph-face-smile text-color-success' />
+                                    <span>Yes, it was</span>
+                                </Button>,
+                            ]}
+                        />
+                    )}
+                </Fade>
+            </div>
+            <Button
+                bsSize='sm'
+                className='margin-top-25'
+                onClick={() => setHasVoted(false)}
+                {...getTrackingAttributes({
+                    trigger: 'click',
+                    category: 'uikit demo',
+                    action: 'button click',
+                    label: 'feedback_subtle_reset',
+                })}
+            >
+                Reset
+            </Button>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-15 bg-color-lightest rounded" data-track-ga-event-trigger="visibility" data-track-ga-event-category="uikit demo" data-track-ga-event-action="card seen" data-track-ga-event-label="feedback_subtle_section">
+    <div class="height-40 display-flex align-items-center">
+        <div style="opacity: 1; transform: none;">
+            <div class="display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none">
+                <div class="text-color-dark">Was this helpful?</div>
+                <div class="btn-toolbar gap-5">
+                    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_not_really" class="btn btn-muted btn-sm btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-face-frown text-color-danger">
+                        </span>
+                        <span>Not really</span>
+                    </button>
+                    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_kind_of" class="btn btn-muted btn-sm btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-face-neutral text-color-warning">
+                        </span>
+                        <span>Kind of</span>
+                    </button>
+                    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_yes_it_was" class="btn btn-muted btn-sm btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-face-smile text-color-success">
+                        </span>
+                        <span>Yes, it was</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_reset" class="btn btn-default btn-sm btn-component margin-top-25" tabindex="0">Reset</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
+| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |

package/dist/docs/components/animatedNumber.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/animatedNumber
-*Captured:* 2026-03-06T10:40:35.709Z
+*Captured:* 2026-04-27T14:57:51.727Z
 
 ## AnimatedNumber
 
@@ -51,7 +51,7 @@ export default () => (
 <div>
     <label>Default AnimatedNumber</label>
     <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
-        <span class="">23</span>
+        <span class="">25</span>
     </div>
     <label>AnimatedNumber with prefix and unit</label>
     <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">