diff --git a/packages/main/plugins/Cardinality/SeriesRow.tsx b/packages/main/plugins/Cardinality/SeriesRow.tsx
index 0ff77313..eaa4478e 100644
--- 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 (
+
+ );
+};
+
const SeriesRow: React.FC = ({
name,
value,
@@ -30,10 +85,15 @@ const SeriesRow: React.FC = ({
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 (
@@ -52,15 +112,30 @@ const SeriesRow: React.FC = ({
{hasShare && }
-
- handleDelete(query, value)}
- isLoading={isLoading}
- label={name}
- value={value}
- source={source}
- />
+
+
+
+
+
+ handleDelete(query, value)
+ }
+ isLoading={isLoading}
+ label={name}
+ value={value}
+ source={source}
+ />
+
);
diff --git a/packages/main/plugins/Cardinality/SeriesRowHeaders.tsx b/packages/main/plugins/Cardinality/SeriesRowHeaders.tsx
index 55f8c0a9..4211e79b 100644
--- a/packages/main/plugins/Cardinality/SeriesRowHeaders.tsx
+++ b/packages/main/plugins/Cardinality/SeriesRowHeaders.tsx
@@ -33,7 +33,14 @@ const SeriesRowHeaders: React.FC = ({
Share in Total
)}
- Delete
+ Quota
+
+
+ Drop
+
);
};
diff --git a/packages/main/plugins/Cardinality/SeriesRowStyles.tsx b/packages/main/plugins/Cardinality/SeriesRowStyles.tsx
index 76f97c29..8ee26807 100644
--- a/packages/main/plugins/Cardinality/SeriesRowStyles.tsx
+++ b/packages/main/plugins/Cardinality/SeriesRowStyles.tsx
@@ -28,9 +28,18 @@ export const SeriesRowStyle = (theme: Partial) => 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) => 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) => 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
index 4dd30663..2252b591 100644
--- 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;
+}