feat: cardinality quota

metrico · Dec 20, 2023 · 4039a65 · 4039a65
1 parent dd4bc28
commit 4039a65
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 15 deletions.
diff --git a/packages/main/plugins/Cardinality/SeriesRow.tsx b/packages/main/plugins/Cardinality/SeriesRow.tsx
@@ -1,11 +1,14 @@
-import { cx } from "@emotion/css";
+import { cx, css } from "@emotion/css";
 import { useCardinalityRequest } from "./api/CardinalityRequest";
 import { SeriesRowStyle } from "./SeriesRowStyles";
 import CardinalityDialog from "./CardinalityDialog";
 import { DiffNumber } from "./DiffNumber";
 import ShareCell from "./ShareCell";
-import React from "react";
-import useCardinalityStore from "./store/CardinalityStore"
+import React, { useMemo } from "react";
+import useCardinalityStore from "./store/CardinalityStore";
+import { calcQuotaOverCardinality, isQuotaWarning } from "./helpers";
+import InfoIcon from "@mui/icons-material/Info";
+import { Tooltip } from "@mui/material";
 
 export type SeriesRowProps = {
     name: string;
@@ -16,11 +19,63 @@ export type SeriesRowProps = {
     theme: any;
     valuePrev?: number;
     source: any;
+    quota?: number;
     onFilter: (e: any, val: any) => void;
 };
 
 // this component is used to display a row in the cardinality table
 
+export type QuotaCellProps = {
+    quota: number;
+    isQuotaWarning: boolean;
+};
+
+export const QuotaSquare = (isWarning: boolean) => css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    //width:80px;
+    .square {
+        content: "";
+        width: 0.75em;
+        height: 0.75em;
+        background: ${isWarning ? "orange" : "green"};
+        border-radius: 2px;
+        color: white;
+    }
+    .info-icon {
+        font-size: 12px;
+    }
+    .quota-num {
+        font-size: 12px;
+    }
+`;
+
+export const QuotaCell = ({ quota, isQuotaWarning }: QuotaCellProps) => {
+    return (
+        <div className={cx(QuotaSquare(isQuotaWarning))}>
+            <div className={"square"}></div>
+            <div className={"info-icon"}>
+                <Tooltip
+                    title={`cardinality quota ${
+                        isQuotaWarning ? "warning" : "(no warning)"
+                    }`}
+                >
+                    <InfoIcon
+                        fontSize={"inherit"}
+                        style={{
+                            cursor: "pointer",
+                            opacity: `${isQuotaWarning ? 1 : 0.5}`,
+                        }}
+                    />
+                </Tooltip>
+            </div>
+            <p className="quota-num">{quota}</p>
+        </div>
+    );
+};
+
 const SeriesRow: React.FC<SeriesRowProps> = ({
     name,
     value,
@@ -30,10 +85,15 @@ const SeriesRow: React.FC<SeriesRowProps> = ({
     theme,
     onFilter,
     source,
+    quota = 4,
 }) => {
-
     const { handleDelete } = useCardinalityRequest();
-    const {isLoading} = useCardinalityStore();
+    const { isLoading } = useCardinalityStore();
+
+    const quotaWarning = useMemo(() => {
+        const quotaOverCardinality = calcQuotaOverCardinality(value, quota);
+        return isQuotaWarning(quotaOverCardinality);
+    }, [quota]);
 
     return (
         <div className={cx(SeriesRowStyle(theme))}>
@@ -52,15 +112,30 @@ const SeriesRow: React.FC<SeriesRowProps> = ({
             </div>
 
             {hasShare && <ShareCell share={share} />}
-
             <div className="cell">
-                <CardinalityDialog
-                    clearFingerPrints={(query) => handleDelete(query, value)}
-                    isLoading={isLoading}
-                    label={name}
-                    value={value}
-                    source={source}
-                />
+                <QuotaCell quota={quota} isQuotaWarning={quotaWarning} />
+            </div>
+            <div className="cell">
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "end",
+                        marginRight: "20px",
+                        flex: "1",
+                        height: "100%",
+                    }}
+                >
+                    <CardinalityDialog
+                        clearFingerPrints={(query) =>
+                            handleDelete(query, value)
+                        }
+                        isLoading={isLoading}
+                        label={name}
+                        value={value}
+                        source={source}
+                    />
+                </div>
             </div>
         </div>
     );

diff --git a/packages/main/plugins/Cardinality/SeriesRowHeaders.tsx b/packages/main/plugins/Cardinality/SeriesRowHeaders.tsx
@@ -33,7 +33,14 @@ const SeriesRowHeaders: React.FC<SeriesRowHeadersProps> = ({
                 <div className="cell-header cell">Share in Total</div>
             )}
 
-            <div className="cell-header cell center">Delete</div>
+            <div className="cell-header cell start">Quota</div>
+
+            <div
+                className="cell-header cell end"
+                style={{ textAlign: "right" }}
+            >
+                Drop
+            </div>
         </div>
     );
 };

diff --git a/packages/main/plugins/Cardinality/SeriesRowStyles.tsx b/packages/main/plugins/Cardinality/SeriesRowStyles.tsx
@@ -28,9 +28,18 @@ export const SeriesRowStyle = (theme: Partial<QrynTheme>) => css`
         letter-spacing: 1px;
         text-transform: uppercase;
         padding: 12px;
+        padding-left: 0px;
         &.center {
             text-align: center;
         }
+        &.start {
+            text-align: left;
+        }
+        .end {
+            text-align: right;
+            padding: 0;
+            padding-right: 0px !important;
+        }
     }
     .interactive {
         transition: 0.25s all;
@@ -49,7 +58,7 @@ export const SeriesRowStyle = (theme: Partial<QrynTheme>) => css`
     .c-value {
         color: ${theme.contrast};
         font-size: 14px;
-        margin: 0px 12px;
+        //margin: 0px 12px;
 
         width: auto;
     }
@@ -74,6 +83,7 @@ export const SeriesRowStyle = (theme: Partial<QrynTheme>) => css`
         grid-template-columns: 1fr auto;
         justify-content: center;
     }
+
     progress {
         background: ${theme.deep};
         border-radius: 3px;

diff --git a/packages/main/plugins/Cardinality/helpers.tsx b/packages/main/plugins/Cardinality/helpers.tsx
@@ -340,3 +340,11 @@ export const getSeriesProps = (series: any, focusLabel?: string) => {
         rows: getRows(series),
     };
 };
+
+export function calcQuotaOverCardinality(cardinality: number, quota: number) {
+    return (cardinality / quota) * 100 - 5;
+}
+
+export function isQuotaWarning(quotaOverCardinality: number) {
+    return quotaOverCardinality > 60;
+}