@gooddata/sdk-ui-dashboard 11.2.0-alpha.3 → 11.2.0-alpha.5

package/styles/scss/kdaDialog.scss

@@ -0,0 +1,571 @@
+// (C) 2025 GoodData Corporation
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+
+.gd-kda-dialog {
+    width: 948px;
+    height: 704px;
+    //stylelint-disable-next-line
+    max-width: none !important;
+
+    //dialog sections - structure
+    .gd-kda-dialog-sections {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &-header {
+            flex: 0 0 auto;
+        }
+
+        &-content {
+            flex: 1 1 auto;
+            overflow: hidden;
+        }
+
+        &-footer {
+            flex: 0 0 auto;
+        }
+
+        &-divider {
+            height: 0;
+            border-bottom: 1px solid var(--gd-palette-complementary-2);
+            margin: 20px -20px;
+        }
+    }
+
+    //dialog header
+    .gd-kda-dialog-header {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        &-title {
+            display: flex;
+            padding: 3px 0;
+            justify-content: flex-start;
+            align-items: center;
+            gap: 10px;
+
+            &-text {
+                color: var(--gd-palette-complementary-8);
+                font-size: 20px;
+                font-style: normal;
+                font-weight: 700;
+                line-height: 26px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-right: 30px;
+            }
+        }
+
+        &-bars {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            align-self: stretch;
+        }
+    }
+
+    //dialog bart
+    .gd-kda-dialog-bar {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
+
+        &-title {
+            color: var(--gd-palette-complementary-6);
+            font-size: 11px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 21px;
+            text-transform: uppercase;
+        }
+
+        &-content {
+            display: flex;
+            gap: 5px;
+        }
+
+        &__metric {
+            max-width: 300px;
+        }
+
+        &__date {
+            max-width: 300px;
+        }
+
+        &__attribute {
+            max-width: 300px;
+        }
+    }
+
+    //dialog footer
+    .gd-kda-dialog-footer {
+        display: flex;
+        flex-direction: row;
+
+        &-content {
+            flex: 1 1 auto;
+            display: flex;
+        }
+
+        &-buttons {
+            flex: 0 0 auto;
+            display: flex;
+        }
+    }
+
+    //dialog content
+    .gd-kda-dialog-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        gap: 20px;
+
+        &-left-panel {
+            flex: 0 0 250px;
+            max-width: 250px;
+        }
+
+        &-divider {
+            width: 0;
+            border-right: 1px solid var(--gd-palette-complementary-2);
+        }
+
+        &-right-panel {
+            flex: 1 1 auto;
+            overflow: hidden;
+        }
+    }
+
+    //key drivers panel
+    .gd-kda-key-drivers-panel {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &-summary {
+            flex: 0 0 auto;
+            width: 100%;
+
+            .gd-kda-item-summary.gd-kda-item-summary-focused:focus-visible {
+                outline-offset: -2px;
+                outline: 2px solid -webkit-focus-ring-color;
+            }
+        }
+
+        &-title {
+            flex: 0 0 auto;
+            margin-top: 20px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            color: var(--gd-palette-complementary-7);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 21px;
+        }
+
+        &-trend {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 5px;
+
+            button {
+                width: 50%;
+            }
+        }
+
+        &-list {
+            flex: 1 1 auto;
+            margin-top: 10px;
+            overflow: hidden;
+            margin-right: -20px;
+
+            .gd-ui-kit-listbox {
+                margin: 0;
+                padding: 0;
+                max-height: 100%;
+                height: 100%;
+
+                &::-webkit-scrollbar {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    width: 10px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background-color: var(--gd-palette-complementary-7);
+                    border: 2px solid transparent;
+                    border-radius: 5px;
+                    background-clip: padding-box;
+                }
+
+                &:hover::-webkit-scrollbar-thumb:hover {
+                    border: 0;
+                    background-color: var(--gd-palette-complementary-5);
+                }
+
+                li {
+                    margin-top: 10px;
+                }
+
+                li:first-child {
+                    margin-top: 0;
+                }
+
+                ul:focus-visible .gd-kda-item.gd-kda-item-focused {
+                    background-color: var(--gd-palette-complementary-2);
+                    outline-offset: -2px;
+                    outline: 2px solid -webkit-focus-ring-color;
+                }
+            }
+
+            &-loading {
+                display: flex;
+                gap: 10px;
+                flex-direction: column;
+                margin-right: 20px;
+            }
+
+            &-empty {
+                display: flex;
+                padding: 40px 10px;
+                gap: 10px;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                align-self: stretch;
+                color: var(--gd-palette-complementary-6);
+            }
+        }
+    }
+
+    //key driver summary item
+    .gd-kda-item-summary {
+        display: flex;
+        width: 250px;
+        height: 40px;
+        padding: 10px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        border-radius: 3px;
+        border: 1px solid var(--gd-palette-complementary-3);
+        background: var(--gd-palette-complementary-0);
+        cursor: pointer;
+
+        $root: &;
+
+        &-title {
+            color: var(--gd-palette-complementary-8);
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 20px;
+        }
+
+        //hover state
+        &:hover {
+            border: 1px solid var(--gd-palette-complementary-3);
+            background: var(--gd-palette-complementary-2);
+        }
+        //selected state
+        &.gd-kda-item-summary-selected {
+            border: 1px solid color-mix(in sRGB, var(--gd-palette-primary-base) 30%, transparent);
+            background: color-mix(in sRGB, var(--gd-palette-primary-base) 10%, transparent);
+
+            .gd-kda-item-summary-title {
+                color: var(--gd-palette-complementary-8);
+            }
+        }
+        //selected state: hover
+        &.gd-kda-item-summary-selected:hover {
+            border: 1px solid color-mix(in sRGB, var(--gd-palette-primary-base) 30%, transparent);
+            background: color-mix(in sRGB, var(--gd-palette-primary-base) 10%, transparent);
+
+            .gd-kda-item-summary-title {
+                color: var(--gd-palette-primary-base);
+            }
+        }
+    }
+
+    //key driver item
+    .gd-kda-item {
+        position: relative;
+        display: flex;
+        width: 250px;
+        padding: 10px;
+        align-items: center;
+        gap: 5px;
+
+        border-radius: 3px;
+        border: 1px solid var(--gd-palette-complementary-3);
+        background: var(--gd-palette-complementary-0);
+        cursor: pointer;
+
+        &-text {
+            flex: 1 1 auto;
+            color: var(--gd-palette-complementary-8);
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 20px;
+        }
+
+        &-value {
+            flex: 0 0 auto;
+            color: var(--gd-palette-complementary-8);
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 20px;
+            text-align: right;
+        }
+
+        &-progress {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 3px;
+
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: var(--kda-item-width);
+                background: var(--gd-palette-primary-base);
+            }
+        }
+
+        &.gd-kda-item-selected {
+            background: color-mix(in sRGB, var(--gd-palette-primary-base) 10%, transparent);
+            border: 1px solid color-mix(in sRGB, var(--gd-palette-primary-base) 30%, transparent);
+
+            .gd-kda-item-text {
+                color: var(--gd-palette-complementary-8);
+            }
+
+            .gd-kda-item-value {
+                color: var(--gd-palette-complementary-8);
+            }
+        }
+
+        &:hover {
+            background-color: var(--gd-palette-complementary-2);
+
+            .gd-kda-item-text {
+                color: var(--gd-palette-complementary-8);
+            }
+
+            .gd-kda-item-value {
+                color: var(--gd-palette-complementary-8);
+            }
+        }
+
+        &.gd-kda-item-selected:hover {
+            .gd-kda-item-text {
+                color: var(--gd-palette-primary-base);
+            }
+
+            .gd-kda-item-value {
+                color: var(--gd-palette-primary-base);
+            }
+        }
+    }
+
+    //key drivers overview
+    .gd-kda-key-drivers-overview {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 20px;
+        flex: 1 0 0;
+        align-self: stretch;
+        height: 100%;
+
+        &-title {
+            color: var(--gd-palette-complementary-8);
+            text-align: left;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 26px;
+        }
+
+        &-headline {
+            display: flex;
+        }
+
+        &-drivers {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    }
+
+    //key drivers detail
+    .gd-kda-key-drivers-detail {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 20px;
+        flex: 1 0 0;
+        align-self: stretch;
+        height: 100%;
+
+        &-title {
+            color: var(--gd-palette-complementary-8);
+            text-align: left;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 26px;
+        }
+
+        &-description {
+            color: var(--gd-palette-complementary-7);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 23px;
+        }
+
+        &-visualisation {
+            width: 100%;
+            display: flex;
+            flex: 1 1 auto;
+        }
+
+        &-info {
+            color: var(--gd-palette-complementary-7);
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 17px;
+        }
+    }
+
+    //key driver headline
+    .gd-kda-key-driver-headline {
+        gap: 20px;
+        display: flex;
+        align-items: flex-start;
+        align-self: stretch;
+    }
+
+    //key driver headline
+    .gd-kda-headline {
+        //date, diff
+        &-date,
+        &-diff {
+            color: var(--gd-palette-complementary-8);
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 20px;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            gap: 5px;
+        }
+    }
+
+    //key driver summary drivers
+    .gd-kda-key-drivers-summary {
+        gap: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        height: 100%;
+        width: 100%;
+        flex: 1 1 auto;
+
+        &-title {
+            flex: 0 0 auto;
+            color: var(--gd-palette-complementary-8);
+            font-size: 17px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 23px;
+        }
+
+        &-info {
+            flex: 0 0 auto;
+            display: flex;
+            padding: 10px;
+            align-items: center;
+            gap: 20px;
+            align-self: stretch;
+            justify-content: space-between;
+            border-radius: 3px;
+            background: color-mix(in sRGB, var(--gd-palette-complementary-5) 10%, transparent);
+
+            &-text {
+                color: var(--gd-palette-complementary-7);
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 23px;
+            }
+        }
+
+        &-list {
+            flex: 1 1 auto;
+            width: 100%;
+            overflow: hidden;
+
+            .gd-ui-kit-async-table__header:focus-visible {
+                outline-offset: -2px;
+                outline: 2px solid -webkit-focus-ring-color;
+            }
+        }
+    }
+
+    //attributes dropdown
+    .gd-kda-attributes-dropdown {
+        display: inline-flex;
+    }
+}
+
+//date select in popover
+.gd-kda-dialog-bar__date-select {
+    margin-top: -10px;
+    margin-bottom: -10px;
+    margin-left: -10px;
+    width: calc(100% + 20px);
+}
+
+//attributes dropdown header
+.gd-kda-attributes-dropdown__header {
+    color: var(--gd-palette-complementary-6);
+    background: var(--gd-palette-complementary-2);
+    display: flex;
+    padding: 10px;
+    align-items: flex-start;
+    align-self: stretch;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
+//attributes dropdown no search
+.gd-kda-attributes-dropdown__no-search {
+    display: flex;
+    margin-top: 6px;
+}

package/styles/scss/main.scss

@@ -43,3 +43,4 @@
 @use "descriptionPanel";
 @use "automationFilters";
 @use "pdfExportDialog";
+@use "kdaDialog";

package/esm/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/PoweredByGDLogo.d.ts

@@ -1,8 +0,0 @@
-/**
- * @internal
- */
-export interface PoweredByGDLogoProps {
-    isSmall?: boolean;
-}
-export declare function PoweredByGDLogo({ isSmall }: PoweredByGDLogoProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PoweredByGDLogo.d.ts.map

package/esm/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/PoweredByGDLogo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PoweredByGDLogo.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/PoweredByGDLogo.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAgBD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE,oBAAoB,2CA4BhE"}

package/esm/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/PoweredByGDLogo.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// (C) 2007-2025 GoodData Corporation
-import { createSelector } from "@reduxjs/toolkit";
-import cx from "classnames";
-import { selectCanManageWorkspace, selectEnableCompanyLogoInEmbeddedUI, selectIsEmbedded, selectPlatformEdition, useDashboardSelector, useDashboardUserInteraction, } from "../../../../../model/index.js";
-const getHref = (canManageWorkspace) => {
-    const href = canManageWorkspace
-        ? "https://help.gooddata.com/pages/viewpage.action?pageId=86793763&"
-        : "https://gooddata.com/?";
-    const utmParameters = "utm_medium=platform&utm_source=product&utm_content=logo";
-    return href + utmParameters;
-};
-const isPoweredByGDLogoPresent = createSelector([selectIsEmbedded, selectPlatformEdition, selectEnableCompanyLogoInEmbeddedUI], (isEmbedded, platformEdition, enableCompanyLogoInEmbeddedUI) => isEmbedded && platformEdition === "free" && enableCompanyLogoInEmbeddedUI);
-export function PoweredByGDLogo({ isSmall }) {
-    const canManageWorkspace = useDashboardSelector(selectCanManageWorkspace);
-    const isPresent = useDashboardSelector(isPoweredByGDLogoPresent);
-    const userInteraction = useDashboardUserInteraction();
-    return (_jsx(_Fragment, { children: isPresent ? (_jsx("div", { className: cx("gd-powered-by-logo-wrapper", {
-                "gd-powered-by-logo-wrapper-small": isSmall,
-                "gd-powered-by-logo-wrapper-large": !isSmall,
-            }), onClick: userInteraction.poweredByGDLogoClicked, children: _jsx("a", { className: cx("gd-powered-by-logo-img", {
-                    "gd-powered-by-logo-img-small": isSmall,
-                    "gd-powered-by-logo-img-large": !isSmall,
-                }), href: getHref(canManageWorkspace), target: "_blank", rel: "noopener noreferrer", "aria-label": "Powered by GoodData" }) })) : null }));
-}
-//# sourceMappingURL=PoweredByGDLogo.js.map

package/esm/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/PoweredByGDLogo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PoweredByGDLogo.js","sourceRoot":"","sources":["../../../../../../src/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/PoweredByGDLogo.tsx"],"names":[],"mappings":";AAAA,qCAAqC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EACH,wBAAwB,EACxB,mCAAmC,EACnC,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,GAC9B,MAAM,+BAA+B,CAAC;AASvC,MAAM,OAAO,GAAG,CAAC,kBAA2B,EAAE,EAAE;IAC5C,MAAM,IAAI,GAAG,kBAAkB;QAC3B,CAAC,CAAC,kEAAkE;QACpE,CAAC,CAAC,wBAAwB,CAAC;IAC/B,MAAM,aAAa,GAAG,yDAAyD,CAAC;IAChF,OAAO,IAAI,GAAG,aAAa,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,cAAc,CAC3C,CAAC,gBAAgB,EAAE,qBAAqB,EAAE,mCAAmC,CAAC,EAC9E,CAAC,UAAU,EAAE,eAAe,EAAE,6BAA6B,EAAE,EAAE,CAC3D,UAAU,IAAI,eAAe,KAAK,MAAM,IAAI,6BAA6B,CAChF,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,EAAE,OAAO,EAAwB;IAC7D,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,wBAAwB,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,oBAAoB,CAAC,wBAAwB,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,2BAA2B,EAAE,CAAC;IACtD,OAAO,CACH,4BACK,SAAS,CAAC,CAAC,CAAC,CACT,cACI,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE;gBACxC,kCAAkC,EAAE,OAAO;gBAC3C,kCAAkC,EAAE,CAAC,OAAO;aAC/C,CAAC,EACF,OAAO,EAAE,eAAe,CAAC,sBAAsB,YAE/C,YACI,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE;oBACpC,8BAA8B,EAAE,OAAO;oBACvC,8BAA8B,EAAE,CAAC,OAAO;iBAC3C,CAAC,EACF,IAAI,EAAE,OAAO,CAAC,kBAAkB,CAAC,EACjC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,gBACd,qBAAqB,GAClC,GACA,CACT,CAAC,CAAC,CAAC,IAAI,GACT,CACN,CAAC;AACN,CAAC"}