Fix: Quota percentage at row, cardinality name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qryn-view",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Data Explorer UI for qryn",
   "repository": {
     "type": "git",

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">

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

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,

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({

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 - 5;
+    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;
 }

packages/main/plugins/Cardinality/index.tsx

@@ -5,7 +5,7 @@ import { Cardinality } from "./Cardinality";
 
 
 export const CardinalViewPlugin: Plugin = {
-    name: "Cardinal View",
+    name: "Cardinality View",
     section: "Query Item",
     id: nanoid(),
     Component: Cardinality,

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 })),

packages/main/plugins/PluginManagerFactory.tsx

@@ -52,7 +52,6 @@ export function LocalPluginsManagement() {
         if (!plugins[location]) {
             plugins[location] = [];
         }
-
         if (!plugins[location]?.some((s: any) => s.name === plugin.name)) {
             plugins[location].push(plugin);
             localStorage.setItem("plugins", JSON.stringify(plugins));
@@ -171,10 +170,30 @@ export function PluginManagerFactory(locations: ILocations) {
     const lp = LocalPluginsManagement();
     let localPlugins = lp.getAll();
 
-    // const dispatch: any = store.dispatch
+    function registerPlugin(plugin: any, totalPlugins: Plugin[]) {
+        // check for registered plugins vs locally stored
+        if (totalPlugins?.length > 0) {
+            for (const existingPlugin of totalPlugins) {
+                const section = existingPlugin.section;
+
+                if (localPlugins[section]) {
+                    const totalPluginsFound = totalPlugins
+                        .filter((pl) => pl.section === section)
+                        .map(({ name }) => name);
+
+                    const filtered = localPlugins[section]?.filter(
+                        (p) => !totalPluginsFound.includes(p.name)
+                    );
+
+                    if (filtered?.length > 0) {
+                        filtered.forEach(({ section, name }) => {
+                            lp.removePlugin(section, name);
+                        });
+                    }
+                }
+            }
+        }
 
-    // add plugin to a specific location
-    function registerPlugin(plugin: any) {
         if (!plugins[plugin.section]) {
             plugins[plugin.section] = [];
         }
@@ -195,7 +214,7 @@ export function PluginManagerFactory(locations: ILocations) {
     function registerPluginGlobally(plugin: any) {
         for (let location in locations) {
             if (location !== "Main") {
-                registerPlugin(plugin);
+                registerPlugin(plugin, plugins);
             }
         }
     }
@@ -264,7 +283,7 @@ export const PluginManager = PluginManagerFactory(locations);
 export function initPlugins(plugins: Plugin[]) {
     plugins.forEach((plugin: any) => {
         if (plugin.visible) {
-            PluginManager.registerPlugin(plugin);
+            PluginManager.registerPlugin(plugin, plugins);
         }
     });
 }

packages/main/views/Main/helpers.ts

@@ -177,7 +177,7 @@ export async function checkLocalAPI(
                 setResponseType(ResponseEnum.GO);
                 LocalPluginsManagement().togglePluginVisibility(
                     "Query Item",
-                    "Cardinal View",
+                    "Cardinality View",
                     true
                 );
 
@@ -186,12 +186,12 @@ export async function checkLocalAPI(
                 setResponseType(ResponseEnum.NODE);
                 LocalPluginsManagement().togglePluginVisibility(
                     "Query Item",
-                    "Cardinal View",
+                    "Cardinality View",
                     false
                 );
                 LocalPluginsManagement().togglePlugin(
                     "Query Item",
-                    "Cardinal View",
+                    "Cardinality View",
                     false
                 )
                 isReady = true;