Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/line-progress/index.ts

@@ -0,0 +1 @@
+export * from './line-progress'

dashboard/client/components/line-progress/line-progress.scss

@@ -0,0 +1,25 @@
+
+.LineProgress {
+  border-radius: 2px;
+  background: $lineProgressBackground;
+  height: 3px;
+
+  // line indicator
+  .line {
+    background: currentColor;
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    transition: 250ms width ease-in;
+
+    &:after {
+      $offset: $padding;
+      content: "";
+      position: absolute;
+      top: -$offset;
+      left: 0;
+      bottom: -$offset;
+      right: 0;
+    }
+  }
+}

dashboard/client/components/line-progress/line-progress.tsx

@@ -0,0 +1,37 @@
+import "./line-progress.scss";
+import * as React from "react";
+import { cssNames } from "../../utils";
+import { TooltipDecoratorProps, withTooltip } from "../tooltip";
+
+interface Props extends React.HTMLProps<any>, TooltipDecoratorProps {
+  value: number;
+  min?: number;
+  max?: number;
+  className?: any;
+  precise?: number;
+}
+
+@withTooltip
+export class LineProgress extends React.PureComponent<Props> {
+  static defaultProps: Props = {
+    value: 0,
+    min: 0,
+    max: 100,
+    precise: 2,
+  };
+
+  render() {
+    const { className, min, max, value, precise, children, ...props } = this.props;
+    let valuePercents = Math.min(100, value / (max - min) * 100);
+    const valuePercentsRounded = +valuePercents.toFixed(precise)
+    if (valuePercentsRounded) {
+      valuePercents = valuePercentsRounded;
+    }
+    return (
+      <div className={cssNames("LineProgress", className)} {...props}>
+        <div className="line" style={{ width: valuePercents + "%" }}></div>
+        {children}
+      </div>
+    );
+  }
+}