feat(ui) - custom metrics - wip

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx

@@ -3,16 +3,36 @@ import { ResponsiveContainer, Tooltip } from 'recharts';
 import { PieChart, Pie, Cell } from 'recharts';
 import { Styles } from '../../common';
 import { NoContent } from 'UI';
+import { filtersMap } from 'Types/filter/newFilter';
 interface Props {
+    metric: any,
     data: any;
     params: any;
     // seriesMap: any;
     colors: any;
-    onClick?: (event, index) => void;
+    onClick?: (filters) => void;
 }
 
 function CustomMetricPieChart(props: Props) {
-    const { data = { values: [] }, params, colors, onClick = () => null } = props;
+    const { metric, data = { values: [] }, onClick = () => null } = props;
+
+    const onClickHandler = (event) => {
+        if (event) {
+            const filters = Array<any>();
+            let filter = { ...filtersMap[metric.metricOf] }
+            filter.value = [event.payload.name]
+            filter.type = filter.key
+            delete filter.key
+            delete filter.operatorOptions
+            delete filter.category
+            delete filter.icon
+            delete filter.label
+            delete filter.options
+
+            filters.push(filter);
+            onClick(filters);
+        }
+    }
     return (
         <div>
           <NoContent size="small" show={data.values.length === 0} >
@@ -29,6 +49,7 @@ function CustomMetricPieChart(props: Props) {
                         outerRadius={70}
                         // fill={colors[0]}
                         activeIndex={1}
+                        onClick={onClickHandler}
                         labelLine={({
                           cx,
                           cy,

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx

@@ -82,11 +82,8 @@ function CustomMetricWidget(props: Props) {
       period: period,
       ...period.toTimestamps(),
       filters,
-      // timestamp: payload.timestamp,
-      // index,
     }
     props.setActiveWidget(activeWidget);
-    // props.updateActiveState(metric.metricId, data); 
   }
 
   const clickHandler = (event, index) => {
@@ -143,10 +140,11 @@ function CustomMetricWidget(props: Props) {
 
                 {metric.viewType === 'pieChart' && (
                   <CustomMetricPieChart
+                    metric={metric}
                     data={ data[0] }
                     params={ params }
                     colors={ colors }
-                    onClick={ clickHandler }
+                    onClick={ clickHandlerTable }
                   />
                 )}
 

frontend/app/components/Dashboard/Widgets/common/Table.js

@@ -18,7 +18,7 @@ export default class Table extends React.PureComponent {
       small = false,
       compare = false,
       maxHeight = 200,
-      onRowClick = () => {},
+      onRowClick = null,
     } = this.props;
     const { showAll } = this.state;
     
@@ -35,9 +35,9 @@ export default class Table extends React.PureComponent {
         <div className={ cn(stl.content, "thin-scrollbar") } style={{ maxHeight: maxHeight + 'px'}}>
           { rows.take(showAll ? 10 : (small ? 3 : 5)).map(row => (
             <div
-              className={ cn(rowClass, stl.row, { [stl.small]: small}) }
+              className={ cn(rowClass, stl.row, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
               key={ row.key }
-              onClick={(e) => onRowClick(e, row)}
+              onClick={onRowClick ? (e) => onRowClick(e, row) : () => null}
             >
               { cols.map(({ cellClass = '', className = '', Component, key, toText = t => t, width }) => (
                 <div className={ cn(stl.cell, cellClass) } style={{ width }} key={ key }> { Component

frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx

@@ -7,9 +7,6 @@ interface Props {
   init: (instance?, setDefault?) => void;
 }
 function CustomMetrics(props: Props) {
-  useEffect(() => { // TODO remove this block
-    props.init()
-  }, [])
   return (
     <div className="self-start">
       <IconButton plain outline icon="plus" label="CREATE METRIC" onClick={() => props.init()} />