Add jarmon graphing for Proton.

5 files changed, 192 insertions, 0 deletions

diff --git a/jarmon-style/jquerytools.tabs.tabs-no-images.scss b/jarmon-style/jquerytools.tabs.tabs-no-images.scss
new file mode 100644
index 0000000..d97f579
--- /dev/null
+++ b/jarmon-style/jquerytools.tabs.tabs-no-images.scss
@@ -0,0 +1,69 @@
+/* Skin for jQuery Tools tabs.
+ *
+ * Based on <https://github.com/jquerytools/jquerytools.github.com/blob/master/media/css/tabs-no-images.css>.
+ *
+ * Documentation on tabs: <http://jquerytools.github.io/documentation/tabs/index.html>
+ */
+
+$tabs-tab-height: 15px;
+$tabs-tab-vpad: 2px;
+$tabs-tab-hpad: 10px;
+$tabs-border-width: 1px;
+$tabs-border-style: solid #666;
+$tabs-background-primary: #ddd;
+$tabs-background-secondary: #efefef;
+
+/* root element for tab bar */
+ul.css-tabs {
+    margin: 0;
+    padding: 0;
+    height: $tabs-tab-height;
+    border-bottom: $tabs-border-width $tabs-border-style;
+
+    /* single tab */
+    li {
+        float: left;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+
+        /* link inside the tab */
+        a {
+            display:block;
+            height: $tabs-tab-height; /* $tabs-tab-height - 2*($tabs-tab-vpad+$tabs-border-width) */
+            padding: $tabs-tab-vpad $tabs-tab-hpad;
+            border: $tabs-border-width $tabs-border-style;
+            border-bottom: 0;
+
+            margin-right: 2px;
+            border-radius: 4px 4px 0 0;
+            text-decoration: none;
+
+            background: $tabs-background-secondary;
+            color: #777;
+
+            &:hover {
+                background-color: #F7F7F7;
+                color: #333;
+            }
+
+            /* selected tab */
+            &.current {
+                background: $tabs-background-primary;
+                border-bottom: $tabs-border-width solid $tabs-background-primary;
+                color: #000;
+                cursor:default;
+            }
+        }
+    }
+}
+
+/* tab pane */
+.css-panes > div {
+    display: none;
+    border: $tabs-border-width $tabs-border-style;
+    border-top: 0;
+    background: $tabs-background-primary;
+
+    padding: 15px 20px;
+}
diff --git a/jarmon-style/loading.gif b/jarmon-style/loading.gif
new file mode 120000
index 0000000..03b9781
--- /dev/null
+++ b/jarmon-style/loading.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/loading.gif
\ No newline at end of file
diff --git a/jarmon-style/next.gif b/jarmon-style/next.gif
new file mode 120000
index 0000000..16a6d9d
--- /dev/null
+++ b/jarmon-style/next.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/next.gif
\ No newline at end of file
diff --git a/jarmon-style/prev.gif b/jarmon-style/prev.gif
new file mode 120000
index 0000000..72199f2
--- /dev/null
+++ b/jarmon-style/prev.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/prev.gif
\ No newline at end of file
diff --git a/jarmon-style/style.scss b/jarmon-style/style.scss
new file mode 100644
index 0000000..6e12541
--- /dev/null
+++ b/jarmon-style/style.scss
@@ -0,0 +1,120 @@
+.jarmon-proton {
+    width: 50%;
+    border: solid 1px black;
+    padding: -1px;
+    border-radius: 4px;
+
+    .chartRangeControl {
+        .range-inputs {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            & > * {
+                width: 20%;
+                margin: 1px;
+                padding: 0;
+                border: solid 1px #666;
+                border-radius: 2px;
+                &[type="button"] {
+                    width: auto;
+                }
+                &[type="datetime-local"] {
+                    width: 25%;
+                }
+            }
+        }
+        .range-preview {
+            display: none;
+            height: 32px;
+            width: 100%;
+        }
+    }
+
+    .css-panes > div {
+        padding: 0;
+        padding-left: 15px;
+    }
+
+    h2 {
+        margin: 0;
+        font-size: 100%;
+        text-align: center;
+    }
+
+    .tabbed-chart-interface {
+        .css-panes {
+            height: 550px;
+            & > div {
+                height: 100%;
+                overflow-y: scroll;
+                overflow-x: hidden;
+            }
+        }
+        .chart-container {
+            &.loading .title {
+                background-repeat: no-repeat;
+                background-position: 0 50%;
+                background-image: url(loading.gif);
+            }
+
+            .chart {
+                height: 125px;
+                width: 100%;
+                margin: 0 auto 0 auto;
+                clear: both;
+                
+                .tickLabel {
+                    overflow:hidden;
+                }
+
+                .yaxisUnitLabel {
+                    /* Y */
+                    position: absolute;
+                    top: 50%;
+                    /* In this translateY, the 75% is: 50% for the `top:50%` overshooting
+                     * by our `height/2`; the additional 25% accounts
+                     * for 1 line-height being chopped off the bottom
+                     * of the graph for the x-axis labels. */
+                    transform: translateY(-75%);
+
+                    /* X */
+                    width: 100px;
+                    margin-left: -100px;
+                    text-align: right;
+
+                    /* styling */
+                    padding: 2px;
+
+                    /* rotate */
+                    transform: rotate(-90deg);
+                    width: 0;
+                    margin-left: -10px;
+                }
+            }
+
+            .graph-legend {
+                width: 100%;
+                padding: 2px 0;
+                margin: 2px auto 0;
+                background-color: #f7f7f7;
+
+                .legendItem {
+                    float: left;
+                    cursor: pointer;
+                    margin-right: 20px;
+                    margin-top: 5px;
+                    margin-left: 5px;
+
+                    .legendColorBox {
+                        float: left;
+                        margin-right: 5px;
+                    }
+
+                    &.disabled {
+                        text-decoration: line-through;
+                    }
+                }
+            }
+        }
+    }
+}