diff options
Diffstat (limited to 'debian/missing-sources/epoch/sass')
-rw-r--r-- | debian/missing-sources/epoch/sass/_core.scss | 99 | ||||
-rw-r--r-- | debian/missing-sources/epoch/sass/epoch.scss | 12 | ||||
-rw-r--r-- | debian/missing-sources/epoch/sass/themes/_dark.scss | 95 | ||||
-rw-r--r-- | debian/missing-sources/epoch/sass/themes/_default.scss | 189 |
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); +} |