change(ui): errors by domain examples and card type chagne

frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx

@@ -1,38 +1,40 @@
 import React from 'react';
-import { NoContent } from 'UI';
+import { Icon, NoContent } from 'UI';
 import { Styles } from '../../common';
 import { numberWithCommas } from 'App/utils';
 import Bar from './Bar';
-import { NO_METRIC_DATA } from 'App/constants/messages'
+import { NO_METRIC_DATA } from 'App/constants/messages';
+import ListWithIcons from 'Components/Dashboard/Widgets/ListWithIcons';
 
 interface Props {
-    data: any
+  data: any;
 }
+
 function ErrorsPerDomain(props: Props) {
-    const { data } = props;
-    // const firstAvg = 10;
-    const firstAvg = data.chart[0] && data.chart[0].errorsCount;
-    return (
-        <NoContent
-          size="small"
-          show={ data.chart.length === 0 }
-          style={{ height: '240px'}}
-          title={NO_METRIC_DATA}
-        >
-          <div className="w-full" style={{ height: '240px' }}>
-            {data.chart.map((item, i) =>
-              <Bar
-                key={i}
-                className="mb-2"
-                avg={numberWithCommas(Math.round(item.errorsCount))}
-                width={Math.round((item.errorsCount * 100) / firstAvg) - 10}
-                domain={item.domain}
-                color={Styles.colors[i]}
-              />
-            )}
-          </div>
-        </NoContent>
-    );
+  const { data } = props;
+  // const firstAvg = 10;
+  // const firstAvg = data.chart[0] && data.chart[0].errorsCount;
+
+  const highest = data.chart[0] && data.chart[0].errorsCount;
+  const list = data.chart.slice(0, 4).map((item: any) => ({
+    name: item.domain,
+    icon: <Icon name="link-45deg" size={24} />,
+    value: Math.round(item.errorsCount),
+    progress: Math.round((item.errorsCount * 100) / highest)
+  }));
+
+  return (
+    <NoContent
+      size="small"
+      show={data.chart.length === 0}
+      style={{ height: '240px' }}
+      title={NO_METRIC_DATA}
+    >
+      <div className="w-full" style={{ height: '240px' }}>
+        <ListWithIcons list={list} />
+      </div>
+    </NoContent>
+  );
 }
 
 export default ErrorsPerDomain;

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx

@@ -410,8 +410,8 @@ export const CARD_LIST: CardType[] = [
         cardType: ERRORS,
         metricOf: FilterKey.ERRORS_PER_DOMAINS,
         category: CARD_CATEGORIES[3].key,
-        example: Bars,
-        data: generateRandomBarsData(),
+        example: SlowestDomains,
+        // data: generateRandomBarsData(),
     },
     {
         title: 'Errors by Type',