adding sorting to the riskiest regions widget

ui/src/layout/Dashboard/RiskiestRegionsWidget/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
+import { orderBy } from 'lodash';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip } from 'recharts';
 import { useFetch } from 'hooks';
 import Loader from 'components/Loader';
@@ -32,12 +33,18 @@ const TooltipHeader = ({data}) => {
 }
 
 const WidgetContent = ({data}) => {
-    const formattedData = data.map(({regionName, findingsCount}) => ({regionName, ...findingsCount}))
-
     const [selectedFilters, setSelectedFilters] = useState([
         ...WIDGET_FINDINGS_ITEMS.map(({dataKey}) => dataKey)
     ]);
 
+    const formattedData = orderBy(data || [], ({findingsCount}) => {
+        return Object.keys(findingsCount || {}).reduce((acc, currFindingKey) => {
+            const count = findingsCount[currFindingKey] || 0;
+
+            return acc + (selectedFilters.includes(currFindingKey) ? count : 0);
+        }, 0);
+    }, ["desc"]).map(({regionName, findingsCount}) => ({regionName, ...findingsCount}));
+
     return (
         <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
             <FindingsFilters