Introduccing the zoom bar

app/javascript/components/timeline-options/timeline.jsx

@@ -1,82 +1,7 @@
 import React from 'react';
-import PropTypes, { element } from 'prop-types';
+import PropTypes from 'prop-types';
 import { LineChart } from '@carbon/charts-react';
 
-const testData = {
-  groupMapsTo: "value", // could this bet the way to get it to map to not numbers?
-  labels: ["one", "two", "three"], // no idea what these are supposed to be
-  datasets: [
-    {
-      label: "Creation",
-      data: [
-        {
-          date: "2019-12-30T05:00:00.000Z", //date
-          value: 10, // number of Creation events on this date
-        },
-        {
-          date: "2019-12-31T05:00:00.000Z",
-          value: 10,
-        },
-        {
-          date: "2020-01-01T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-02T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-03T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-04T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-05T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-05T05:00:00.000Z",
-          value: 10
-        }
-      ]
-    },
-    {
-      label: "Deletion",
-      data: [
-        {
-          date: "2019-12-30T05:00:00.000Z", //date
-          value: 10,
-          // cant be the number of Creation events on this date
-          // we can cheat our way by making these all have the same value so its a 'line'
-          // but we cant change the size to be different for each point on the line i dont think
-
-          // dont bother trying to make it look how we want it to, just commit to the number of events for that dataset
-        },
-        {
-          date: "2020-01-03T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-04T05:00:00.000Z",
-          value: 10
-        },
-        {
-          date: "2020-01-05T05:00:00.000Z",
-          value: 10
-        },
-        {
-          // will this date format work // yes it does :sparkles:
-          date: "Mon, 17 Oct 2022 14:27:03 +0000",
-          value: 10
-        }
-      ]
-    }
-  ]
-};
-
 const buildDataObj = (data) => {
   var datasets = [];
   data.forEach((rawDataset) => {
@@ -117,15 +42,29 @@ const MiqTimelineComponent = ({ data, title }) => {
     title,
     axes: {
       left: {
-        mapsTo: "value"
+        // scaleType: "labels",
+        // option: "labels" - will only show the values we have (ex. if we have 9 events and 1 event, it will only show 1 and 9 equidistant from eachother)
+        // option: "linear" - will show all the values including ones we dont have but on smaller cases (ie we only have 1 event) it will show decimals
+        // fun fact the decimals disappear when you have 1 and *5* events, anything lower renders decimals
+        mapsTo: "value",
+        title: "# of Events"
       },
       bottom: {
-        scaleType: "time"
+        scaleType: "time",
+        title: "Date"
       }
     },
     legend: {
       clickable: true
     },
+    tooltip: {
+      totalLabel: "Total Events",
+      // customHTML: (e) => {
+      //   // this kicks off on hover
+      //   console.log("hello")
+      //   console.log(e)
+      // }
+    },
     points: {
       /**
        * sets the radius of the point
@@ -135,6 +74,16 @@ const MiqTimelineComponent = ({ data, title }) => {
       filled: true,
       enabled: true
     },
+    zoomBar: {
+      top: {
+        enabled: true,
+        type: "graph_view",
+        // initialZoomDomain: [
+        //   window.ManageIQ.calendar.calDateFrom,
+        //   window.ManageIQ.calendar.calDateTo
+        // ]
+      }
+    },
     height: "400px"
   };