diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
index b43997b37..fd38e2a55 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
@@ -10,25 +10,25 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function BreakdownOfLoadedResources(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 28 }
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
               <BarChart
-                data={ data.chart }
+                data={ metric.data.chart }
                 margin={ Styles.chartMargins }
               >
                 {gradientDef}
                 <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={metric.params.density/7} />
                 <YAxis
                   {...Styles.yaxis}
                   allowDecimals={false}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
index d64747585..3ae354168 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
@@ -10,25 +10,25 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function CPULoad(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <AreaChart
-                data={ data.chart }
+                data={ metric.data.chart }
                 margin={ Styles.chartMargins }
               >
                 {gradientDef}
                 <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                 <YAxis
                   {...Styles.yaxis}
                   allowDecimals={false}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
new file mode 100644
index 000000000..333fca287
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Loader, NoContent } from 'UI';
+import { Styles, Table } from '../../common';
+import { getRE } from 'App/utils';
+import ImageInfo from './ImageInfo';
+import MethodType from './MethodType';
+import cn from 'classnames';
+import stl from './callWithErrors.css';
+
+const cols = [
+  {
+    key: 'method',
+    title: 'Method',
+    className: 'text-left',
+    Component: MethodType,
+    cellClass: 'ml-2',
+    width: '8%',
+  },
+  {
+    key: 'urlHostpath',
+    title: 'Path',
+    Component: ImageInfo,
+    width: '40%',
+  },
+  {
+    key: 'allRequests',
+    title: 'Requests',
+    className: 'text-left',
+    width: '15%',
+  },
+  {
+    key: '4xx',
+    title: '4xx',
+    className: 'text-left',
+    width: '15%',
+  },
+  {
+    key: '5xx',
+    title: '5xx',
+    className: 'text-left',
+    width: '15%',
+  }
+];
+
+interface Props {
+    data: any
+    metric?: any
+}
+function CallWithErrors(props: Props) {
+    const { data, metric } = props;
+    const [search, setSearch] = React.useState('')
+    const test = (value = '', serach) => getRE(serach, 'i').test(value);
+    const _data = search ? metric.data.chart.filter(i => test(i.urlHostpath, search)) : metric.data.chart.images;
+
+    console.log('data', metric.data)
+
+    const write = ({ target: { name, value } }) => {
+      setSearch(value)
+    };
+
+    return (
+        
+        <NoContent
+          size="small"
+          show={ metric.data.chart.length === 0 }
+          style={{ height: '240px'}}
+        >
+          <div style={{ height: '240px'}}>
+            <div className={ cn(stl.topActions, 'py-3 flex text-right')}>
+              <input disabled={metric.data.chart.length === 0} className={stl.searchField} name="search" placeholder="Filter by Path" onChange={write} />
+            </div>
+            <Table
+              cols={ cols }
+              rows={ _data }
+            />
+          </div>
+        </NoContent>
+   );
+}
+
+export default CallWithErrors;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/Chart.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/Chart.js
new file mode 100644
index 000000000..2f406622d
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/Chart.js
@@ -0,0 +1,16 @@
+import { AreaChart, Area } from 'recharts';
+import { Styles } from '../../common';
+
+const Chart = ({ data, compare }) => {
+  const colors = compare ? Styles.compareColors : Styles.colors;
+
+  return (
+    <AreaChart width={ 90 } height={ 30 } data={ data.chart } >
+      <Area type="monotone" dataKey="count" stroke={colors[0]} fill={colors[3]} fillOpacity={ 0.5 } />
+    </AreaChart>
+  );
+}
+
+Chart.displayName = 'Chart';
+
+export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/ImageInfo.js
new file mode 100644
index 000000000..8251bec60
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/ImageInfo.js
@@ -0,0 +1,12 @@
+import { Popup, Icon, TextEllipsis } from 'UI';
+import styles from './imageInfo.css';
+
+const ImageInfo = ({ data }) => (
+  <div className={ styles.name }>
+    <TextEllipsis text={data.urlHostpath} />
+  </div>
+);
+
+ImageInfo.displayName = 'ImageInfo';
+
+export default ImageInfo;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
new file mode 100644
index 000000000..ba370b481
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Label } from 'UI';
+
+const MethodType = ({ data }) => {
+  return (
+    <Label className="ml-1">{data.method}</Label>
+  )
+}
+
+export default MethodType
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.css b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.css
new file mode 100644
index 000000000..bc37a3991
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.css
@@ -0,0 +1,22 @@
+.topActions {
+  position: absolute;
+  top: -4px;
+  right: 50px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.searchField {
+  padding: 4px 5px;
+  border-bottom: dotted thin $gray-light;
+  border-radius: 3px;
+  &:focus,
+  &:active {
+    border: solid thin transparent !important;
+    box-shadow: none;
+    background-color: $gray-light;
+  }
+  &:hover {
+    border: solid thin $gray-light !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/imageInfo.css b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/imageInfo.css
new file mode 100644
index 000000000..69030a582
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/imageInfo.css
@@ -0,0 +1,39 @@
+.name {
+  display: flex;
+  align-items: center;
+
+  & > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; 
+    max-width: 60%;
+  }
+}
+
+.imagePreview {
+  max-width: 200px;
+  max-height: 200px;
+}
+
+.imageWrapper {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  width: 40px;
+  text-align: center;
+  margin-right: 10px;
+  & > span {
+    height: 16px;
+  }
+  & .label {
+    font-size: 9px;
+    color: $gray-light;
+  }
+}
+
+.popup {
+  background-color: #f5f5f5 !important;
+  &:before {
+    background-color: #f5f5f5 !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/index.ts
new file mode 100644
index 000000000..4d3ba4df8
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/index.ts
@@ -0,0 +1 @@
+export { default } from './CallWithErrors'
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
index bd54bc5e3..f1e192587 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
@@ -9,26 +9,26 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function CallsErrors4xx(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
+    console.log('asd', metric.data.namesMap)
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <BarChart
-              data={data.chart}
+              data={metric.data.chart}
               margin={Styles.chartMargins}
-              syncId="errorsPerType"
-            //   syncId={ showSync ? "errorsPerType" : undefined }
             >
               <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
               <XAxis
                 {...Styles.xaxis}
                 dataKey="time"
-                // interval={params.density/7}
+                interval={metric.params.density/7}
               />
               <YAxis
                 {...Styles.yaxis}
@@ -37,9 +37,9 @@ function CallsErrors4xx(props: Props) {
               />
               <Legend />
               <Tooltip {...Styles.tooltip} />
-              {/* { data.namesMap.map((key, index) => (
+              { Array.isArray(metric.data.namesMap) && metric.data.namesMap.map((key, index) => (
                 <Line key={key} name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />
-              ))} */}
+              ))}
             </BarChart>
           </ResponsiveContainer>
         </NoContent>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
index e55bbb0cb..3dec42162 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
@@ -9,26 +9,25 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function CallsErrors5xx(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <BarChart
-              data={data.chart}
+              data={metric.data.chart}
               margin={Styles.chartMargins}
-              syncId="errorsPerType"
-            //   syncId={ showSync ? "errorsPerType" : undefined }
             >
               <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
               <XAxis
                 {...Styles.xaxis}
                 dataKey="time"
-                // interval={params.density/7}
+                interval={metric.params.density/7}
               />
               <YAxis
                 {...Styles.yaxis}
@@ -37,9 +36,9 @@ function CallsErrors5xx(props: Props) {
               />
               <Legend />
               <Tooltip {...Styles.tooltip} />
-              {/* { data.namesMap.map((key, index) => (
+              { Array.isArray(metric.data.namesMap) && metric.data.namesMap.map((key, index) => (
                 <Line key={key} name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />
-              ))} */}
+              ))}
             </BarChart>
           </ResponsiveContainer>
         </NoContent>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
index 5dffda63d..b27cf319b 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
@@ -10,24 +10,24 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function Crashes(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <AreaChart
-                data={ data.chart }
+                data={ metric.data.chart }
                 margin={ Styles.chartMargins }
               >
                 {gradientDef}
                 <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                 <YAxis
                   {...Styles.yaxis}
                   allowDecimals={false}
@@ -38,7 +38,7 @@ function Crashes(props: Props) {
                 <Area
                   name="Crashes"
                   type="monotone"
-                  dataKey="avg"
+                  dataKey="count"
                   stroke={Styles.colors[0]}
                   fillOpacity={ 1 }
                   strokeWidth={ 2 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
index d14da84e5..ebdcf81ec 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
@@ -18,15 +18,14 @@ interface Props {
     optionsLoading: any
     fetchOptions: any
     options: any
+    metric?: any
 }
 function DomBuildingTime(props: Props) {
-    const { data, optionsLoading } = props;
+    const { data, optionsLoading, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
-
 
     const onSelect = (params) => {
-      const _params = { density: 70 }
+      // const _params = { density: 70 }
       console.log('params', params) // TODO reload the data with new params;
       // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
     }
@@ -34,7 +33,7 @@ function DomBuildingTime(props: Props) {
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center mb-3">
@@ -45,7 +44,7 @@ function DomBuildingTime(props: Props) {
                 onSelect={onSelect}
                 placeholder="Search for Page"
               />
-              <AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
+              <AvgLabel className="ml-auto" text="Avg" count={Math.round(metric.data.avg)} unit="ms" />
             </div>
             <ResponsiveContainer height={ 200 } width="100%">
               <AreaChart
@@ -54,7 +53,7 @@ function DomBuildingTime(props: Props) {
                 >
                   {gradientDef}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                   <YAxis
                     {...Styles.yaxis}
                     allowDecimals={false}
@@ -66,7 +65,7 @@ function DomBuildingTime(props: Props) {
                     name="Avg"
                     type="monotone"
                     // unit="%"
-                    dataKey="avg"
+                    dataKey="value"
                     stroke={Styles.colors[0]}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
index 2eb5aa1dd..8e1a125f0 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
@@ -9,26 +9,25 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function ErrorsByOrigin(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <BarChart
-              data={data.chart}
+              data={metric.data.chart}
               margin={Styles.chartMargins}
-              syncId="errorsPerType"
-            //   syncId={ showSync ? "errorsPerType" : undefined }
             >
               <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
               <XAxis
                 {...Styles.xaxis}
                 dataKey="time"
-                // interval={params.density/7}
+                interval={metric.params.density/7}
               />
               <YAxis
                 {...Styles.yaxis}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
index 993ff8837..0e4494bbc 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
@@ -9,26 +9,25 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function ErrorsByType(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <BarChart
-              data={data.chart}
+              data={metric.data.chart}
               margin={Styles.chartMargins}
-              syncId="errorsPerType"
-            //   syncId={ showSync ? "errorsPerType" : undefined }
             >
               <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
               <XAxis
                 {...Styles.xaxis}
                 dataKey="time"
-                // interval={params.density/7}
+                interval={metric.params.density/7}
               />
               <YAxis
                 {...Styles.yaxis}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
index d51e7539b..aaae19efa 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
@@ -6,19 +6,19 @@ import Bar from 'App/components/Dashboard/Widgets/ErrorsPerDomain/Bar';
 
 interface Props {
     data: any
+    metric?: any
 }
 function ErrorsPerDomain(props: Props) {
-    const { data } = props;
-    console.log('ErrorsPerDomain', data);
+    const { data, metric } = props;
     // const firstAvg = 10;
-    const firstAvg = data.chart[0] && data.chart[0].errorsCount;
+    const firstAvg = metric.data.chart[0] && metric.data.chart[0].errorsCount;
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <div className="w-full" style={{ height: '240px' }}>
-            {data.chart.map((item, i) => 
+            {metric.data.chart.map((item, i) => 
               <Bar
                 key={i}
                 className="mb-2"
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
index 5804e84c8..a6311f7cc 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
@@ -10,16 +10,16 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function FPS(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center justify-end mb-3">
@@ -27,12 +27,12 @@ function FPS(props: Props) {
             </div>
             <ResponsiveContainer height={ 207 } width="100%">
               <AreaChart
-                  data={ data.chart }
+                  data={ metric.data.chart }
                   margin={ Styles.chartMargins }
                 >
                   {gradientDef}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                   <YAxis
                     {...Styles.yaxis}
                     allowDecimals={false}
@@ -43,7 +43,7 @@ function FPS(props: Props) {
                   <Area
                     name="Avg"
                     type="monotone"
-                    dataKey="avg"
+                    dataKey="value"
                     stroke={Styles.colors[0]}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
index eba425c42..3ccb890ed 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
@@ -10,16 +10,16 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function MemoryConsumption(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center justify-end mb-3">
@@ -27,12 +27,12 @@ function MemoryConsumption(props: Props) {
             </div>
             <ResponsiveContainer height={ 207 } width="100%">
               <AreaChart
-                  data={ data.chart }
+                  data={ metric.data.chart }
                   margin={ Styles.chartMargins }
                 >
                   {gradientDef}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                   <YAxis
                     {...Styles.yaxis}
                     allowDecimals={false}
@@ -44,7 +44,7 @@ function MemoryConsumption(props: Props) {
                     name="Avg"
                     unit=" mb"
                     type="monotone"
-                    dataKey="avg"
+                    dataKey="value"
                     stroke={Styles.colors[0]}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
index ce3544f3e..0a3d5567e 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
@@ -37,21 +37,22 @@ const cols = [
 
 interface Props {
     data: any
+    metric?: any
 }
 function MissingResources(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
 
     return (
         <NoContent
           title="No resources missing."
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <div style={{ height: '240px'}}>
             <Table
               small
               cols={ cols }
-              rows={ List(data.chart) }
+              rows={ List(metric.data.chart) }
               rowClass="group"
             />
           </div>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
index 378a3abdc..0423a0007 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
@@ -8,19 +8,19 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function ResourceLoadedVsResponseEnd(props: Props) {
-    const { data } = props;
-    const params = { density: 70 }
+    const { data, metric } = props;
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <ComposedChart
-                data={data.chart}
+                data={metric.data.chart}
                 margin={ Styles.chartMargins}
               >
                 <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
@@ -28,7 +28,7 @@ function ResourceLoadedVsResponseEnd(props: Props) {
                   {...Styles.xaxis}
                   dataKey="time"
                   // interval={3}
-                  interval={(params.density / 7)}
+                  interval={(metric.params.density / 7)}
                 />
                 <YAxis
                   {...Styles.yaxis}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
index cab6b10ee..7c76489a6 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
@@ -8,28 +8,27 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function ResourceLoadedVsVisuallyComplete(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <ComposedChart
-                data={data.chart}
+                data={metric.data.chart}
                 margin={ Styles.chartMargins}
               >
                 <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
                 <XAxis
                   {...Styles.xaxis}
                   dataKey="time"
-                  // interval={3}
-                  interval={(params.density / 7)}
+                  interval={(metric.params.density / 7)}
                 />
                 <YAxis
                   {...Styles.yaxis}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
index f83b7c01f..3baff1f03 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
@@ -27,16 +27,16 @@ interface Props {
     optionsLoading: any
     fetchOptions: any
     options: any
+    metric?: any
 }
 function ResourceLoadingTime(props: Props) {
-    const { data, optionsLoading } = props;
+    const { data, optionsLoading, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
     const [autoCompleteSelected, setSutoCompleteSelected] = React.useState('');
     const [type, setType] = React.useState('');
 
     const onSelect = (params) => {
-      const _params = { density: 70 }
+      // const _params = { density: 70 }
       setSutoCompleteSelected(params.value);
       console.log('params', params) // TODO reload the data with new params;
       // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
@@ -52,7 +52,7 @@ function ResourceLoadingTime(props: Props) {
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center mb-3">
@@ -80,17 +80,17 @@ function ResourceLoadingTime(props: Props) {
             </div>
             <ResponsiveContainer height={ 200 } width="100%">
               <AreaChart
-                  data={ data.chart }
+                  data={ metric.data.chart }
                   margin={ Styles.chartMargins }
                 >
                   {gradientDef}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                   <YAxis
                     {...Styles.yaxis}
                     allowDecimals={false}
                     tickFormatter={val => Styles.tickFormatter(val)}
-                    label={{ ...Styles.axisLabelLeft, value: "CPU Load (%)" }}
+                    label={{ ...Styles.axisLabelLeft, value: "Resource Fetch Time (ms)" }}
                   />
                   <Tooltip {...Styles.tooltip} />
                   <Area
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
index 4a53dd912..d1af7d2b4 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@@ -18,15 +18,15 @@ interface Props {
     optionsLoading: any
     fetchOptions: any
     options: any
+    metric?: any
 }
 function ResponseTime(props: Props) {
-    const { data, optionsLoading } = props;
+    const { data, optionsLoading, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
 
 
     const onSelect = (params) => {
-      const _params = { density: 70 }
+      // const _params = { density: 70 }
       console.log('params', params) // TODO reload the data with new params;
       // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
     }
@@ -34,7 +34,7 @@ function ResponseTime(props: Props) {
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center mb-3">
@@ -45,7 +45,7 @@ function ResponseTime(props: Props) {
                 onSelect={onSelect}
                 placeholder="Search for Page"
               />
-              <AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
+              <AvgLabel className="ml-auto" text="Avg" count={Math.round(metric.data.avg)} unit="ms" />
             </div>
             <ResponsiveContainer height={ 200 } width="100%">
               <AreaChart
@@ -54,7 +54,7 @@ function ResponseTime(props: Props) {
                 >
                   {gradientDef}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                   <YAxis
                     {...Styles.yaxis}
                     allowDecimals={false}
@@ -66,7 +66,7 @@ function ResponseTime(props: Props) {
                     name="Avg"
                     type="monotone"
                     unit=" ms"
-                    dataKey="avgCpu"
+                    dataKey="value"
                     stroke={Styles.colors[0]}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
index df55d3811..a2206f2f9 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
@@ -9,26 +9,25 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function SessionsAffectedByJSErrors(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <BarChart
-              data={data.chart}
+              data={metric.data.chart}
               margin={Styles.chartMargins}
-              syncId="errorsPerType"
-            //   syncId={ showSync ? "errorsPerType" : undefined }
             >
               <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
               <XAxis
                 {...Styles.xaxis}
                 dataKey="time"
-                // interval={params.density/7}
+                interval={metric.params.density/7}
               />
               <YAxis
                 {...Styles.yaxis}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
index 5314a054b..0ba6ec5e8 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
@@ -10,30 +10,32 @@ import {
 
 interface Props {
     data: any
+    metric?: any
 }
 function SessionsImpactedBySlowRequests(props: Props) {
-    const { data } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
+
+    console.log('SessionsImpactedBySlowRequests', metric.data)
 
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <AreaChart
-                data={ data.chart }
+                data={ metric.data.chart }
                 margin={ Styles.chartMargins }
               >
                 {gradientDef}
                 <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                 <YAxis
                   {...Styles.yaxis}
                   allowDecimals={false}
                   tickFormatter={val => Styles.tickFormatter(val)}
-                  label={{ ...Styles.axisLabelLeft, value: "CPU Load (%)" }}
+                  label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
                 />
                 <Tooltip {...Styles.tooltip} />
                 <Area
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
new file mode 100644
index 000000000..5fd2c8d48
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { NoContent } from 'UI';
+import { Styles } from '../../common';
+import { numberWithCommas } from 'App/utils';
+import Bar from 'App/components/Dashboard/Widgets/ErrorsPerDomain/Bar';
+
+interface Props {
+    data: any
+    metric?: any
+}
+function SessionsPerBrowser(props: Props) {
+    const { data, metric } = props;
+    const firstAvg = metric.data.chart[0] && metric.data.chart[0].count;
+
+    const getVersions = item => {
+      return Object.keys(item)
+        .filter(i => i !== 'browser' && i !== 'count')
+        .map(i => ({ key: 'v' +i, value: item[i]}))
+    }
+    return (
+        <NoContent
+          size="small"
+          show={ metric.data.chart.length === 0 }
+        >
+          <div className="w-full" style={{ height: '240px' }}>
+            {metric.data.chart.map((item, i) => 
+              <Bar
+                key={i}
+                className="mb-4"
+                avg={Math.round(item.count)}
+                versions={getVersions(item)}
+                width={Math.round((item.count * 100) / firstAvg) - 10}
+                domain={item.browser}
+                colors={Styles.colors}
+              />
+            )}
+          </div>
+        </NoContent>
+    );
+}
+
+export default SessionsPerBrowser;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts
new file mode 100644
index 000000000..06f0656a1
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionsPerBrowser'
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
index a7334e650..9e2563752 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
@@ -6,17 +6,18 @@ import Bar from 'App/components/Dashboard/Widgets/SlowestDomains/Bar';
 
 interface Props {
     data: any
+    metric?: any
 }
 function SlowestDomains(props: Props) {
-    const { data } = props;
-    const firstAvg = data.chart[0] && data.chart[0].errorsCount;
+    const { data, metric } = props;
+    const firstAvg = metric.data.chart[0] && metric.data.chart[0].errorsCount;
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <div className="w-full" style={{ height: '240px' }}>
-            {data.chart.map((item, i) => 
+            {metric.data.chart.map((item, i) => 
               <Bar
                 key={i}
                 className="mb-2"
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
index 1a3ab28ab..7e3b928bb 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
@@ -18,15 +18,15 @@ interface Props {
     optionsLoading: any
     fetchOptions: any
     options: any
+    metric?: any
 }
 function TimeToRender(props: Props) {
-    const { data, optionsLoading } = props;
+    const { data, optionsLoading, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const params = { density: 70 }
 
 
     const onSelect = (params) => {
-      const _params = { density: 70 }
+      // const _params = { density: 70 }
       console.log('params', params) // TODO reload the data with new params;
       // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
     }
@@ -34,7 +34,7 @@ function TimeToRender(props: Props) {
     return (
         <NoContent
           size="small"
-          show={ data.chart.length === 0 }
+          show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center mb-3">
@@ -49,12 +49,12 @@ function TimeToRender(props: Props) {
             </div>
             <ResponsiveContainer height={ 200 } width="100%">
               <AreaChart
-                  data={ data.chart }
+                  data={ metric.data.chart }
                   margin={ Styles.chartMargins }
                 >
                   {gradientDef}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
                   <YAxis
                     {...Styles.yaxis}
                     // allowDecimals={false}
@@ -66,7 +66,7 @@ function TimeToRender(props: Props) {
                     name="Avg"
                     type="monotone"
                     unit=" ms"
-                    dataKey="avgCpu"
+                    dataKey="value"
                     stroke={Styles.colors[0]}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index c4769c4ce..24cbe0cc4 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -70,7 +70,7 @@ function WidgetChart(props: Props) {
             if (isOverviewWidget) {
                 return <CustomMetricOverviewChart data={data} />
             }
-            return <WidgetPredefinedChart data={data} predefinedKey={metric.predefinedKey} />
+            return <WidgetPredefinedChart metric={metric} data={data} predefinedKey={metric.predefinedKey} />
         }
 
         if (metricType === 'timeseries') {
diff --git a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
index 7ae8a581f..151825b80 100644
--- a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
@@ -22,64 +22,69 @@ import ResourceLoadingTime from 'App/components/Dashboard/Widgets/PredefinedWidg
 import BreakdownOfLoadedResources from 'App/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources';
 import MissingResources from 'App/components/Dashboard/Widgets/PredefinedWidgets/MissingResources';
 import ResourceLoadedVsResponseEnd from 'App/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd';
+import SessionsPerBrowser from 'App/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser';
+import CallWithErrors from '../../Widgets/PredefinedWidgets/CallWithErrors';
 
 interface Props {
     data: any;
     predefinedKey: string
+    metric?: any;
 }
 function WidgetPredefinedChart(props: Props) {
-    const { data, predefinedKey } = props;
+    const { data, predefinedKey, metric } = props;
 
     const renderWidget = () => {
         switch (predefinedKey) {
             // ERRORS
             case 'errors_per_type':
-                return <ErrorsByType data={data} />
+                return <ErrorsByType data={data} metric={metric} />
             case 'errors_per_domains':
-                return <ErrorsPerDomain data={data} />
+                return <ErrorsPerDomain data={data} metric={metric} />
             case 'resources_by_party':
-                return <ErrorsByOrigin data={data} />
+                return <ErrorsByOrigin data={data} metric={metric} />
             case 'impacted_sessions_by_js_errors':
-                return <SessionsAffectedByJSErrors data={data} />
+                return <SessionsAffectedByJSErrors data={data} metric={metric} />
             case 'domains_errors_4xx':
-                return <CallsErrors4xx data={data} />
+                return <CallsErrors4xx data={data} metric={metric} />
             case 'domains_errors_5xx':
-                return <CallsErrors5xx data={data} />
+                return <CallsErrors5xx data={data} metric={metric} />
+            case 'calls_errors':
+                return <CallWithErrors data={data} metric={metric} />
 
             // PERFORMANCE
             // case 'impacted_sessions_by_slow_pages':
             // case 'pages_response_time_distribution':
             // case 'speed_location':
             case 'cpu':
-                return <CPULoad data={data} />
+                return <CPULoad data={data} metric={metric} />
             case 'crashes':
-                return <Crashes data={data} />
+                return <Crashes data={data} metric={metric} />
             case 'pages_dom_buildtime':
-                return <DomBuildingTime data={data} />
+                return <DomBuildingTime data={data} metric={metric} />
             case 'fps':
-                return <FPS data={data} />
+                return <FPS data={data} metric={metric} />
             case 'memory_consumption':
-                return <MemoryConsumption data={data} />
+                return <MemoryConsumption data={data} metric={metric} />
             case 'pages_response_time':
-                return <ResponseTime data={data} />
+                return <ResponseTime data={data} metric={metric} />
             case 'resources_vs_visually_complete':
-                return <ResourceLoadedVsVisuallyComplete data={data} />
+                return <ResourceLoadedVsVisuallyComplete data={data} metric={metric} />
             case 'sessions_per_browser':
-                return <SessionsImpactedBySlowRequests data={data} />
+                return <SessionsPerBrowser data={data} metric={metric} />
             case 'slowest_domains':
-                return <SlowestDomains data={data} />
+                return <SlowestDomains data={data} metric={metric} />
             case 'time_to_render':
-                return <TimeToRender data={data} />
+                return <TimeToRender data={data} metric={metric} />
 
             // Resources
             case 'resources_count_by_type':
-                return <BreakdownOfLoadedResources data={data} />
+                return <BreakdownOfLoadedResources data={data} metric={metric} />
             case 'missing_resources':
-                return <MissingResources data={data} />
+                return <MissingResources data={data} metric={metric} />
             case 'resource_type_vs_response_end':
-                return <ResourceLoadedVsResponseEnd data={data} />
+                return <ResourceLoadedVsResponseEnd data={data} metric={metric} />
             case 'resources_loading_time':
-                return <ResourceLoadingTime data={data} />
+                return <ResourceLoadingTime data={data} metric={metric} />
             // case 'slowest_resources':
 
             default:
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index 1166b245f..73a41b379 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -420,27 +420,6 @@ export default class DashboardStore implements IDashboardSotre {
                         metric.setData(_data)
                         resolve(_data);
                     } else {
-                        // if (metric.predefinedKey === 'errors_per_domains') {
-                        //     console.log('errors_per_domains', data)
-                        //     data.chart = data
-                        // } else {
-                        //     data.chart = getChartFormatter(this.period)(Array.isArray(data) ? data : data.chart)
-                        // }
-                        // data.namesMap = Array.isArray(data) ? data    
-                        //     .map(i => Object.keys(i))
-                        //     .flat()
-                        //     .filter(i => i !== 'time' && i !== 'timestamp')
-                        //     .reduce((unique: any, item: any) => {
-                        //         if (!unique.includes(item)) {
-                        //             unique.push(item);
-                        //         }
-                        //         return unique;
-                        //     }, []) : data.chart;
-                        //     console.log('map', data.namesMap)
-                        // const _data = { ...data, namesMap: data.namesMap, chart: data.chart }
-                        // metric.setData(_data)
-                        // resolve(_data);
-
                         const _data = {
                             ...data,
                         }
@@ -457,7 +436,7 @@ export default class DashboardStore implements IDashboardSotre {
                                     return unique;
                                 }, [])
                         } else {
-                            _data['chart'] = Array.isArray(data) ? data : []
+                            _data['chart'] =  getChartFormatter(this.period)(Array.isArray(data) ? data : []);
                             _data['namesMap'] = Array.isArray(data) ? data.map(i => Object.keys(i))
                                 .flat()
                                 .filter(i => i !== 'time' && i !== 'timestamp')
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index ee9c559b4..2c74ce26b 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -28,6 +28,8 @@ export interface IWidget {
     colSpan: number
     predefinedKey: string
 
+    params: any
+
     udpateKey(key: string, value: any): void
     removeSeries(index: number): void
     addSeries(): void
@@ -57,6 +59,7 @@ export default class Widget implements IWidget {
     dashboards: any[] = []
     dashboardIds: any[] = []
     config: any = {}
+    params: any = { density: 70 }
 
     position: number = 0
     data: any = {