fix: quota percentage at row - quota at totals

metrico · Dec 21, 2023 · ee912af · ee912af
1 parent 7ded1a4
commit ee912af
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 12 deletions.
diff --git a/packages/main/plugins/Cardinality/Configurator.tsx b/packages/main/plugins/Cardinality/Configurator.tsx
@@ -57,7 +57,7 @@ const Configurator: React.FC<ConfiguratorProps> = ({
         useCardinalityStore();
     const handleReset = () => {
         reset();
-        localStorage.setItem("labelValuePairs","")
+        localStorage.setItem("labelValuePairs", "");
         handleCardinalityRequest({
             match: "",
             focusLabel: "",
@@ -139,11 +139,17 @@ const Configurator: React.FC<ConfiguratorProps> = ({
                             totalSeries.diff === 0
                                 ? "none"
                                 : totalSeries.diff > 0
-                                ? "up"
-                                : "down"
+                                  ? "up"
+                                  : "down"
                         }
                         text={"diff"}
                     />
+                    <Totals
+                        theme={theme}
+                        type={"prev"}
+                        value={totalSeries.quota}
+                        text={"quota"}
+                    />
                 </div>
 
                 <div className="buttons-group">

diff --git a/packages/main/plugins/Cardinality/SeriesRow.tsx b/packages/main/plugins/Cardinality/SeriesRow.tsx
@@ -27,6 +27,7 @@ export type SeriesRowProps = {
 
 export type QuotaCellProps = {
     quota: number;
+    cardinality: number;
     isQuotaWarning: boolean;
 };
 
@@ -52,13 +53,17 @@ export const QuotaSquare = (isWarning: boolean) => css`
     }
 `;
 
-export const QuotaCell = ({ quota, isQuotaWarning }: QuotaCellProps) => {
+export const QuotaCell = ({
+    quota,
+    cardinality,
+    isQuotaWarning,
+}: QuotaCellProps) => {
     return (
         <div className={cx(QuotaSquare(isQuotaWarning))}>
             <div className={"square"}></div>
             <div className={"info-icon"}>
                 <Tooltip
-                    title={`cardinality quota ${
+                    title={`cardinality over quota percentage ${
                         isQuotaWarning ? "warning" : "(no warning)"
                     }`}
                 >
@@ -71,7 +76,9 @@ export const QuotaCell = ({ quota, isQuotaWarning }: QuotaCellProps) => {
                     />
                 </Tooltip>
             </div>
-            <p className="quota-num">{quota}</p>
+            <p className="quota-num">
+                {calcQuotaOverCardinality(cardinality, quota)}%
+            </p>
         </div>
     );
 };
@@ -113,7 +120,11 @@ const SeriesRow: React.FC<SeriesRowProps> = ({
 
             {hasShare && <ShareCell share={share} />}
             <div className="cell">
-                <QuotaCell quota={quota} isQuotaWarning={quotaWarning} />
+                <QuotaCell
+                    quota={quota}
+                    cardinality={value}
+                    isQuotaWarning={quotaWarning}
+                />
             </div>
             <div className="cell">
                 <div

diff --git a/packages/main/plugins/Cardinality/Totals.tsx b/packages/main/plugins/Cardinality/Totals.tsx
@@ -7,7 +7,7 @@ type TotalsProps = {
     theme: any;
     value: number | string;
     trend?: "up" | "down" | "none";
-    text: "total" | "percent" | "previous" | "diff";
+    text: "total" | "percent" | "previous" | "diff" | "quota";
     type?: "amount" | "prev" | "diff";
 };
 
@@ -75,6 +75,10 @@ const TOTALS_VALUES = {
         text: "Diff from previous",
         value: (val: string | number | null | undefined) => `${val ?? 0  }`,
     },
+    quota: {
+        text: "Quota",
+        value : (val: string | number ) => `${val}`
+    }
 };
 export const Totals: React.FC<TotalsProps> = ({
     theme,

diff --git a/packages/main/plugins/Cardinality/api/useCardinalityData.tsx b/packages/main/plugins/Cardinality/api/useCardinalityData.tsx
@@ -85,6 +85,7 @@ export const useCardinalityData = (historyManager?, setHistoryItem?) => {
                 amount: result.totalSeries,
                 prev: result.totalSeriesPrev,
                 diff: result.totalSeries - result.totalSeriesPrev,
+                quota: result?.quota || 0
             });
 
             setData({

diff --git a/packages/main/plugins/Cardinality/helpers.tsx b/packages/main/plugins/Cardinality/helpers.tsx
@@ -342,11 +342,12 @@ export const getSeriesProps = (series: any, focusLabel?: string) => {
 };
 
 export function calcQuotaOverCardinality(cardinality: number, quota: number) {
-    return (cardinality / quota) * 100;
+    if (quota === 0) return 0;
+
+    return (cardinality * 100) / quota;
 }
 
 export function isQuotaWarning(quotaOverCardinality: number) {
-
-    if(quotaOverCardinality === Infinity)  return false
+    if (quotaOverCardinality === 0) return false;
     return quotaOverCardinality > 60;
 }
diff --git a/packages/main/plugins/Cardinality/store/CardinalityStore.tsx b/packages/main/plugins/Cardinality/store/CardinalityStore.tsx
@@ -6,6 +6,7 @@ type CardinalityTotal = {
     amount: number;
     prev: number;
     diff: number;
+    quota: number;
 };
 
 type TimeRange = {
@@ -57,7 +58,7 @@ type CardinalityState = {
 };
 
 const initialData = {
-    total: { amount: 0, prev: 0, diff: 0 },
+    total: { amount: 0, prev: 0, diff: 0, quota: 0 },
 
     date: dayjs().format(DATE_FORMAT),
 
@@ -87,6 +88,7 @@ const useCardinalityStore = create<CardinalityState>((set) => ({
 
     setIsUpdating: (isUpdating: boolean) => set(() => ({ isUpdating })),
     setTotal: (t: CardinalityTotal) => set(() => ({ total: t })),
+
     setTimeSeriesSelector: (text: string) =>
         set(() => ({ timeSeriesSelector: text })),
     setTimeRange: (timeRange: TimeRange) => set(() => ({ timeRange })),