Enchance Timeseries Chart (#1622)

* Added designed zoomable slider

* Added ScaleControls

* Design updates

* Added default log base to 10

* Added margin in pixels

* Removed hard coded values

* Fixed issue with infinity log for zero values

* Added optional title on chart above legend

* Override for legend selection

* Make zoomControls optional

* Fixed zoom icons

* Fixing issues with overlapping elements

* Override default restore event

* Quick fix

* Moved & cleared props to parent for ScaleControls

* Added ScaleButton

* Fixes for icons

* Fixed label format and contrast

* Breakdown useEffect to multiple

* Moved chart to state

* useRef for timeseriesChart

* Lint fix

* Fixed icons focus display

web/src/components/charts/ScaleControls/ScaleButton.tsx

@@ -0,0 +1,43 @@
+/**
+ * Panther is a Cloud-Native SIEM for the Modern Security Team.
+ * Copyright (C) 2020 Panther Labs Inc
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { AbstractButton } from 'pouncejs';
+
+interface ScaleButtonProps {
+  title: string;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const ScaleButton: React.FC<ScaleButtonProps> = ({ title, selected, onClick }) => {
+  return (
+    <AbstractButton
+      borderRadius="pill"
+      py={1}
+      px={4}
+      fontSize="small"
+      backgroundColor={selected ? 'blue-400' : 'transparent'}
+      _hover={!selected && { backgroundColor: 'navyblue-300' }}
+      onClick={onClick}
+    >
+      {title}
+    </AbstractButton>
+  );
+};
+
+export default ScaleButton;

web/src/components/charts/ScaleControls/ScaleControls.tsx

@@ -0,0 +1,46 @@
+/**
+ * Panther is a Cloud-Native SIEM for the Modern Security Team.
+ * Copyright (C) 2020 Panther Labs Inc
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { Flex } from 'pouncejs';
+import { EChartOption } from 'echarts';
+import ScaleButton from 'Components/charts/ScaleControls/ScaleButton';
+
+interface ScaleControlsProps {
+  scaleType: string;
+  onSelection: (option: EChartOption.BasicComponents.CartesianAxis.Type) => void;
+}
+
+const ScaleControls: React.FC<ScaleControlsProps> = ({ scaleType = 'value', onSelection }) => {
+  return (
+    <Flex spacing={2}>
+      <ScaleButton
+        title="Linear"
+        selected={scaleType === 'value'}
+        onClick={() => onSelection('value')}
+      />
+      <ScaleButton
+        title="Logarithmic"
+        selected={scaleType === 'log'}
+        onClick={() => onSelection('log')}
+      />
+    </Flex>
+  );
+};
+
+export default ScaleControls;

web/src/components/charts/ScaleControls/index.tsx

@@ -0,0 +1,19 @@
+/**
+ * Panther is a Cloud-Native SIEM for the Modern Security Team.
+ * Copyright (C) 2020 Panther Labs Inc
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export { default } from './ScaleControls';