Feat/um 49 query builder api (#1573)

* add uuid to event. add indexes

* eventdata api

* add event data

* remove test data

* update list

components/metrics/DataTable.js

@@ -16,6 +16,7 @@ export default function DataTable({
   height,
   animate = true,
   virtualize = false,
+  showPercentage = true,
 }) {
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
@@ -38,6 +39,7 @@ export default function DataTable({
         animate={animate && !virtualize}
         format={formatFunc}
         onClick={handleSetFormat}
+        showPercentage={showPercentage}
       />
     );
   };
@@ -68,7 +70,15 @@ export default function DataTable({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
+const AnimatedRow = ({
+  label,
+  value = 0,
+  percent,
+  animate,
+  format,
+  onClick,
+  showPercentage = true,
+}) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -82,15 +92,17 @@ const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) =>
       <div className={styles.value} onClick={onClick}>
         <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
       </div>
-      <div className={styles.percent}>
-        <animated.div
-          className={styles.bar}
-          style={{ width: props.width.interpolate(n => `${n}%`) }}
-        />
-        <animated.span className={styles.percentValue}>
-          {props.width.interpolate(n => `${n.toFixed(0)}%`)}
-        </animated.span>
-      </div>
+      {showPercentage && (
+        <div className={styles.percent}>
+          <animated.div
+            className={styles.bar}
+            style={{ width: props.width.interpolate(n => `${n}%`) }}
+          />
+          <animated.span className={styles.percentValue}>
+            {props.width.interpolate(n => `${n.toFixed(0)}%`)}
+          </animated.span>
+        </div>
+      )}
     </div>
   );
 };

components/metrics/FilterTags.js

@@ -5,12 +5,12 @@ import Button from 'components/common/Button';
 import Times from 'assets/times.svg';
 import styles from './FilterTags.module.css';
 
-export default function FilterTags({ params, onClick }) {
+export default function FilterTags({ className, params, onClick }) {
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
   }
   return (
-    <div className={classNames(styles.filters, 'col-12')}>
+    <div className={classNames(styles.filters, 'col-12', className)}>
       {Object.keys(params).map(key => {
         if (!params[key]) {
           return null;

components/metrics/FilterTags.module.css

@@ -7,8 +7,5 @@
 .tag {
   text-align: center;
   margin-bottom: 10px;
-}
-
-.tag + .tag {
-  margin-left: 20px;
+  margin-right: 20px;
 }

components/metrics/WebsiteHeader.js

@@ -1,14 +1,13 @@
-import React from 'react';
+import Arrow from 'assets/arrow-right.svg';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import Favicon from 'components/common/Favicon';
 import Link from 'components/common/Link';
 import OverflowText from 'components/common/OverflowText';
-import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
-import Favicon from 'components/common/Favicon';
+import PageHeader from 'components/layout/PageHeader';
+import { FormattedMessage } from 'react-intl';
 import ActiveUsers from './ActiveUsers';
-import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
 export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {