Fixed typings

packages/grafana-ui/package.json

@@ -24,6 +24,7 @@
     "react-popper": "^1.3.0",
     "react-popper": "^1.3.0",
     "react-transition-group": "^2.2.1",
     "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.21.0",
     "react-virtualized": "^9.21.0",
+    "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tinycolor2": "^1.4.1"
     "tinycolor2": "^1.4.1"
   },
   },
@@ -35,6 +36,8 @@
     "@types/react": "^16.7.6",
     "@types/react": "^16.7.6",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-test-renderer": "^16.0.3",
     "@types/react-test-renderer": "^16.0.3",
+    "@types/tether-drop": "^1.4.8",
+    "@types/tinycolor2": "^1.4.1",
     "react-test-renderer": "^16.7.0",
     "react-test-renderer": "^16.7.0",
     "typescript": "^3.2.2"
     "typescript": "^3.2.2"
   }
   }

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -19,7 +19,7 @@ export class ColorPicker extends React.Component<Props, any> {
     ReactDOM.render(dropContent, dropContentElem);
     ReactDOM.render(dropContent, dropContentElem);
 
 
     const drop = new Drop({
     const drop = new Drop({
-      target: this.pickerElem,
+      target: this.pickerElem as Element,
       content: dropContentElem,
       content: dropContentElem,
       position: 'top center',
       position: 'top center',
       classes: 'drop-popover',
       classes: 'drop-popover',
@@ -27,6 +27,7 @@ export class ColorPicker extends React.Component<Props, any> {
       hoverCloseDelay: 200,
       hoverCloseDelay: 200,
       tetherOptions: {
       tetherOptions: {
         constraints: [{ to: 'scrollParent', attachment: 'none both' }],
         constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+        attachment: 'bottom center',
       },
       },
     });
     });
 
 

packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx

@@ -51,6 +51,7 @@ export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
       remove: true,
       remove: true,
       tetherOptions: {
       tetherOptions: {
         constraints: [{ to: 'scrollParent', attachment: 'none both' }],
         constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+        attachment: 'bottom center',
       },
       },
     });
     });
 
 

packages/grafana-ui/src/utils/colors.ts

@@ -72,21 +72,21 @@ const colors = [
 function sortColorsByHue(hexColors: string[]) {
 function sortColorsByHue(hexColors: string[]) {
   const hslColors = _.map(hexColors, hexToHsl);
   const hslColors = _.map(hexColors, hexToHsl);
 
 
-  let sortedHSLColors = _.sortBy(hslColors, ['h']);
-  sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
-  sortedHSLColors = _.map(sortedHSLColors, chunk => {
+  const sortedHSLColors = _.sortBy(hslColors, ['h']);
+  const chunkedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
+  const sortedChunkedHSLColors = _.map(chunkedHSLColors, chunk => {
     return _.sortBy(chunk, 'l');
     return _.sortBy(chunk, 'l');
   });
   });
-  sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
+  const flattenedZippedSortedChunkedHSLColors = _.flattenDeep(_.zip(...sortedChunkedHSLColors));
 
 
-  return _.map(sortedHSLColors, hslToHex);
+  return _.map(flattenedZippedSortedChunkedHSLColors, hslToHex);
 }
 }
 
 
 function hexToHsl(color: string) {
 function hexToHsl(color: string) {
   return tinycolor(color).toHsl();
   return tinycolor(color).toHsl();
 }
 }
 
 
-function hslToHex(color: string) {
+function hslToHex(color: any) {
   return tinycolor(color).toHexString();
   return tinycolor(color).toHexString();
 }
 }
 
 

yarn.lock

@@ -1098,7 +1098,7 @@
   dependencies:
   dependencies:
     "@types/react" "*"
     "@types/react" "*"
 
 
-"@types/react-transition-group@^2.0.15":
+"@types/react-transition-group@*", "@types/react-transition-group@^2.0.15":
   version "2.0.15"
   version "2.0.15"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
   integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
   integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
@@ -1118,6 +1118,23 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-0.2.5.tgz#2443fc12da514c81346b1a665675559cee21fa75"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-0.2.5.tgz#2443fc12da514c81346b1a665675559cee21fa75"
   integrity sha512-dEoVvo/I9QFomyhY+4Q6Qk+I+dhG59TYceZgC6Q0mCifVPErx6Y83PNTKGDS5e9h9Eti6q0S2mm16BU6iQK+3w==
   integrity sha512-dEoVvo/I9QFomyhY+4Q6Qk+I+dhG59TYceZgC6Q0mCifVPErx6Y83PNTKGDS5e9h9Eti6q0S2mm16BU6iQK+3w==
 
 
+"@types/tether-drop@^1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@types/tether-drop/-/tether-drop-1.4.8.tgz#8d64288e673259d1bc28518250b80b5ef43af0bc"
+  integrity sha512-QzrJDUxnLoqACUm7opxGOwa9mgMBlkyb7hHYWApMLM3ywWif4pWraTiotooiG3ePZmnTe8wQj2nx7GWMX4pb+w==
+  dependencies:
+    "@types/tether" "*"
+
+"@types/tether@*":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@types/tether/-/tether-1.4.4.tgz#0fde1ccbd2f1fad74f8f465fe6227ff3b7bff634"
+  integrity sha512-6qhsFJVMuMqaQRVyQVi3zUBLfKYyryktL0ZP0Z3zegzeQ7WKm0PZNCdl3JsaitJbzqaoQ9qsFKMfaj5MiMfcSQ==
+
+"@types/tinycolor2@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.1.tgz#2f5670c9d1d6e558897a810ed284b44918fc1253"
+  integrity sha512-25L/RL5tqZkquKXVHM1fM2bd23qjfbcPpAZ2N/H05Y45g3UEi+Hw8CbDV28shKY8gH1SHiLpZSxPI1lacqdpGg==
+
 "@types/uglify-js@*":
 "@types/uglify-js@*":
   version "3.0.3"
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.3.tgz#801a5ca1dc642861f47c46d14b700ed2d610840b"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.3.tgz#801a5ca1dc642861f47c46d14b700ed2d610840b"