Change save series button

Co-authored-by: kev-ngo <[email protected]>
Co-authored-by: CourageWolf <[email protected]>
Co-authored-by: DennisLpz <[email protected]>
Co-authored-by: C-STYR <[email protected]>

Author: 5 people

src/app/components/BarGraph.tsx

@@ -12,6 +12,7 @@ import { schemeSet3 } from 'd3-scale-chromatic';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { save } from '../actions/actions';
 
 /* TYPESCRIPT */
 interface data {
@@ -102,8 +103,35 @@ const BarGraph = (props) => {
   const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
+
+   const toStorage = {
+    currentTab,
+    title: tabs[currentTab]['title'],
+    data,
+   };
+  
+  const animateButton = function (e) {
+    e.preventDefault;
+    e.target.classList.add('animate');
+    e.target.innerHTML = 'Saved!';
+    setTimeout(function () {
+      e.target.innerHTML = 'Save Series';
+      e.target.classList.remove('animate');
+    }, 1000);
+  };
+  const classname = document.getElementsByClassName('save-series-button');
+  for (let i = 0; i < classname.length; i++) {
+    classname[i].addEventListener('click', animateButton, false);
+  }
   return (
     <div>
+      <button
+          className='save-series-button'
+      onClick={(e) => {
+        dispatch(save(toStorage))
+      }}>
+          Save Series
+      </button>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -177,6 +205,8 @@ const BarGraph = (props) => {
               )
             }
           </BarStack>
+
+
         </Group>
         <AxisLeft
           top={margin.top}

src/app/components/BarGraphComparison.tsx

@@ -19,7 +19,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
-import { save } from '../actions/actions';
+// import { save } from '../actions/actions';
 /* TYPESCRIPT */
 interface data {
   snapshotId?: string;
@@ -178,12 +178,6 @@ const BarGraphComparison = (props) => {
     setXpoints();
   };
 
-  const toStorage = {
-    currentTab,
-    title: tabs[currentTab]['title'],
-    data,
-  };
-
   //manually assignin X -axis points with tab ID.
   function setXpointsComparison() {
     comparison[series].data.barStack.forEach((elem) => {
@@ -231,13 +225,6 @@ const BarGraphComparison = (props) => {
               )}
             </Select>
           </FormControl>
-
-          <button
-            className='save-series-button'
-            onClick={() => dispatch(save(toStorage))}
-          >
-            Save Series
-          </button>
         </div>
       </div>
 

src/app/styles/components/_buttons.scss

@@ -16,9 +16,13 @@
   width: 120px;
   background: $red-color-gradient;
   height: 30px;
-}
-.save-series-button:hover {
-  box-shadow: $box-shadow-red;
+  position: absolute;
+  right: 2.5rem;
+
+   &.animate {
+    background: rgb(41, 164, 41);
+  }
+
 }
 
 .empty-button {