summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/sass
diff options
context:
space:
mode:
Diffstat (limited to 'debian/missing-sources/epoch/sass')
-rw-r--r--debian/missing-sources/epoch/sass/_core.scss99
-rw-r--r--debian/missing-sources/epoch/sass/epoch.scss12
-rw-r--r--debian/missing-sources/epoch/sass/themes/_dark.scss95
-rw-r--r--debian/missing-sources/epoch/sass/themes/_default.scss189
4 files changed, 395 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/sass/_core.scss b/debian/missing-sources/epoch/sass/_core.scss
new file mode 100644
index 0000000..93bc767
--- /dev/null
+++ b/debian/missing-sources/epoch/sass/_core.scss
@@ -0,0 +1,99 @@
+/*
+ * Core Epoch Styles
+ */
+
+/**
+ * Generates the styles needed to define a fill color for a given class name.
+ * @param $name Name of the class to use (sans the leading .)
+ * @param $color Fill color to associate with the class name.
+ */
+@mixin epoch-color($name, $color) {
+ div.ref.#{$name} {
+ background-color: $color;
+ }
+ .#{$name} {
+ .line { stroke: $color; }
+ .area, .dot { fill: $color; }
+ }
+ .arc.#{$name} path {
+ fill: $color;
+ }
+ .bar.#{$name} {
+ fill: $color;
+ }
+ .#{$name} {
+ .bucket { fill: $color; }
+ }
+}
+
+/**
+ * Produces categorical color classes for plots (excluding heatmaps).
+ * @param $list List of colors to use for each category.
+ * @param $entries Size of the input list.
+ */
+@mixin epoch-category-colors($list, $entries) {
+ @for $i from 1 through $entries {
+ div.ref.category#{$i} {
+ background-color: nth($list, $i);
+ }
+ .category#{$i} {
+ .line { stroke: nth($list, $i); }
+ .area, .dot { fill: nth($list, $i); stroke: rgba(0,0,0,0); }
+ }
+ .arc.category#{$i} path {
+ fill: nth($list, $i);
+ }
+ .bar.category#{$i} {
+ fill: nth($list, $i);
+ }
+ }
+}
+
+/**
+ * Produces categorical colors for heatmaps.
+ * @param $list List of colors to use for categories.
+ * @param $entries Size of the input list.
+ */
+@mixin epoch-heatmap-colors($list, $entries) {
+ @for $i from 1 through $entries {
+ .category#{$i} {
+ .bucket { fill: nth($list, $i); }
+ }
+ }
+}
+
+// Axis and Tick Shape Rendering
+.epoch {
+ .axis path, .axis line {
+ shape-rendering: crispEdges;
+ }
+
+ .axis.canvas .tick line {
+ shape-rendering: geometricPrecision;
+ }
+}
+
+/*
+ * Canvas Styles Reference Container
+ *
+ * The reference container is an SVG that is automatically created when Epoch is loaded. It is used
+ * by the canvas based plots to obtain color information from the page styles by creating reference
+ * elements and then reading their computed styles.
+ *
+ * Note: don't mess with this ;)
+ */
+div#_canvas_css_reference {
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: -1000px;
+ left: -1000px;
+ svg {
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -1000px;
+ left: -1000px;
+ }
+}
+
diff --git a/debian/missing-sources/epoch/sass/epoch.scss b/debian/missing-sources/epoch/sass/epoch.scss
new file mode 100644
index 0000000..2689262
--- /dev/null
+++ b/debian/missing-sources/epoch/sass/epoch.scss
@@ -0,0 +1,12 @@
+/*
+ * Epoch Master SCSS
+ *
+ * Includes the core styles and all the themes to produce the complete epoch css file.
+ *
+ * By Ryan Sandor Richards
+ * Copyright 2013 Fastly, Inc.
+ */
+
+@import "core";
+@import "themes/default";
+@import "themes/dark";
diff --git a/debian/missing-sources/epoch/sass/themes/_dark.scss b/debian/missing-sources/epoch/sass/themes/_dark.scss
new file mode 100644
index 0000000..e343eff
--- /dev/null
+++ b/debian/missing-sources/epoch/sass/themes/_dark.scss
@@ -0,0 +1,95 @@
+/*
+ * theme/_dark.scss - Theme design for dark page backgrounds.
+ * Designed by Ryan Sandor Richards
+ */
+
+$axisAndText: #d0d0d0;
+$background: #333;
+
+.epoch-theme-dark {
+ // Axes and Ticks
+ .epoch {
+ .axis path, .axis line {
+ stroke: $axisAndText;
+ }
+ .axis .tick text {
+ fill: $axisAndText;
+ }
+ }
+
+ // Pie Charts
+ .arc.pie {
+ stroke: $background;
+ }
+
+ .arc.pie text {
+ fill: $background;
+ }
+
+ // Gauges
+ .epoch .gauge-labels .value {
+ fill: #BBB;
+ }
+
+ .epoch .gauge {
+ .arc.outer {
+ stroke: #999;
+ }
+ .arc.inner {
+ stroke: #AAA;
+ }
+ .tick {
+ stroke: #AAA;
+ }
+
+ .needle {
+ fill: #F3DE88;
+ }
+
+ .needle-base {
+ fill: #999;
+ }
+ }
+
+ // Categorical Colors
+ $dark_category10:
+ #909CFF, #FFAC89, #E889E8, #78E8D3, #C2FF97,
+ #B7BCD1, #FF857F, #F3DE88, #C9935E, #A488FF;
+
+ .epoch, .epoch.category10 {
+ @include epoch-category-colors($dark_category10, 10);
+ }
+
+ $dark_category20:
+ #909CFF, #626AAD, #FFAC89, #BD7F66,
+ #E889E8, #995A99, #78E8D3, #4F998C,
+ #C2FF97, #789E5E, #B7BCD1, #7F8391,
+ #CCB889, #A1906B, #F3DE88, #A89A5E,
+ #FF857F, #BA615D, #A488FF, #7662B8;
+
+ .epoch.category20 {
+ @include epoch-category-colors($dark_category20, 20);
+ }
+
+ $dark_category20b:
+ #909CFF, #7680D1, #656DB2, #525992,
+ #FFAC89, #D18D71, #AB735C, #92624E,
+ #E889E8, #BA6EBA, #9B5C9B, #7B487B,
+ #78E8D3, #60BAAA, #509B8D, #3F7B70,
+ #C2FF97, #9FD17C, #7DA361, #65854E;
+
+ .epoch.category20b {
+ @include epoch-category-colors($dark_category20b, 20);
+ }
+
+ $dark_category20c:
+ #B7BCD1, #979DAD, #6E717D, #595C66,
+ #FF857F, #DE746E, #B55F5A, #964E4B,
+ #F3DE88, #DBC87B, #BAAA68, #918551,
+ #C9935E, #B58455, #997048, #735436,
+ #A488FF, #8670D1, #705CAD, #52447F;
+
+ .epoch.category20c {
+ @include epoch-category-colors($dark_category20c, 20);
+ }
+}
diff --git a/debian/missing-sources/epoch/sass/themes/_default.scss b/debian/missing-sources/epoch/sass/themes/_default.scss
new file mode 100644
index 0000000..d3075c8
--- /dev/null
+++ b/debian/missing-sources/epoch/sass/themes/_default.scss
@@ -0,0 +1,189 @@
+/*
+ * theme/_default.scss - Default Color Theme
+ * Categorical Colors Adapted from d3:
+ * https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
+ */
+
+// Fonts
+.epoch {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 12pt;
+}
+
+// Axes and Ticks
+.epoch {
+ .axis path, .axis line {
+ fill: transparent;
+ stroke: #000;
+ }
+
+ .axis .tick text {
+ font-size: 9pt;
+ }
+}
+
+// Line Charts
+.epoch .line {
+ fill: transparent;
+ stroke-width: 2px;
+}
+
+.epoch.sparklines .line {
+ stroke-width: 1px;
+}
+
+
+// Area Charts
+.epoch .area {
+ stroke: transparent;
+}
+
+// Pie Charts
+.epoch {
+ .arc.pie {
+ stroke: #fff;
+ stroke-width: 1.5px;
+ }
+
+ .arc.pie text {
+ stroke: transparent;
+ fill: white;
+ font-size: 9pt;
+ }
+}
+
+// Gauge Charts
+.epoch .gauge-labels {
+ .value {
+ text-anchor: middle;
+ font-size: 140%;
+ fill: #666;
+ }
+}
+
+.epoch.gauge-tiny {
+ width: 120px; height: 90px;
+
+ .gauge-labels {
+ .value { font-size: 80%; }
+ }
+
+ .gauge {
+ .arc.outer {
+ stroke-width: 2px;
+ }
+ }
+}
+
+.epoch.gauge-small {
+ width: 180px; height: 135px;
+
+ .gauge-labels {
+ .value { font-size: 120%; }
+ }
+
+ .gauge {
+ .arc.outer {
+ stroke-width: 3px;
+ }
+ }
+}
+
+.epoch.gauge-medium {
+ width: 240px; height: 180px;
+
+ .gauge {
+ .arc.outer {
+ stroke-width: 3px;
+ }
+ }
+}
+
+.epoch.gauge-large {
+ width: 320px; height: 240px;
+ .gauge-labels {
+ .value { font-size: 180%; }
+ }
+}
+
+.epoch .gauge {
+ .arc.outer {
+ stroke-width: 4px;
+ stroke: #666;
+ }
+ .arc.inner {
+ stroke-width: 1px;
+ stroke: #555;
+ }
+ .tick {
+ stroke-width: 1px;
+ stroke: #555;
+ }
+
+ .needle {
+ fill: orange;
+ }
+
+ .needle-base {
+ fill: #666;
+ }
+}
+
+// Categorical Colors
+$category10:
+ #1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd,
+ #8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf;
+
+.epoch, .epoch.category10 {
+ @include epoch-category-colors($category10, 10);
+}
+
+$category20:
+ #1f77b4, #aec7e8, #ff7f0e, #ffbb78, #2ca02c,
+ #98df8a, #d62728, #ff9896, #9467bd, #c5b0d5,
+ #8c564b, #c49c94, #e377c2, #f7b6d2, #7f7f7f,
+ #c7c7c7, #bcbd22, #dbdb8d, #17becf, #9edae5;
+
+.epoch.category20 {
+ @include epoch-category-colors($category20, 20);
+}
+
+$category20b:
+ #393b79, #5254a3, #6b6ecf, #9c9ede, #637939,
+ #8ca252, #b5cf6b, #cedb9c, #8c6d31, #bd9e39,
+ #e7ba52, #e7cb94, #843c39, #ad494a, #d6616b,
+ #e7969c, #7b4173, #a55194, #ce6dbd, #de9ed6;
+
+.epoch.category20b {
+ @include epoch-category-colors($category20b, 20);
+}
+
+$category20c:
+ #3182bd, #6baed6, #9ecae1, #c6dbef,
+ #e6550d, #fd8d3c, #fdae6b, #fdd0a2,
+ #31a354, #74c476, #a1d99b, #c7e9c0,
+ #756bb1, #9e9ac8, #bcbddc, #dadaeb,
+ #636363, #969696, #bdbdbd, #d9d9d9;
+
+.epoch.category20c {
+ @include epoch-category-colors($category20c, 20);
+}
+
+
+/*
+ * Heatmap Colors
+ *
+ * The heatmap real-time graph uses color blending to choose the color for which to render each bucket.
+ * Basic d3 categorical colors do not work well in this instance because the colors in the sequence
+ * vary wildly in precieved luminosity.
+ *
+ * Below we define small subsets that should work well together because they are of similar luminosities.
+ * Note: darker colors work better since we use opacity to denote "height" or "intensity" for each bucket
+ * after picking a mix color.
+ */
+$heatmap5:
+ #1f77b4, #2ca02c, #d62728, #8c564b, #7f7f7f;
+
+.epoch, .epoch.heatmap5 {
+ @include epoch-heatmap-colors($heatmap5, 5);
+}