diff --git a/styles/_D33dDeaggregationBin.scss b/styles/_D33dDeaggregationBin.scss new file mode 100644 index 0000000000000000000000000000000000000000..d709b277be6346477ac22fff34d69af9f046df2d --- /dev/null +++ b/styles/_D33dDeaggregationBin.scss @@ -0,0 +1,64 @@ +@import '_GraphVariables.scss'; + +.D33dDeaggregationBin { + > g { + > path { + stroke: #666; + stroke-width: 0.5px; + } + + > text { + fill: #666; + font-size: 0.7em; + line-height: 1; + } + } + + [data-bin-index='0'] > path { + fill: $graphColor0; + } + + [data-bin-index='1'] > path { + fill: $graphColor1; + } + + [data-bin-index='2'] > path { + fill: $graphColor2; + } + + [data-bin-index='3'] > path { + fill: $graphColor3; + } + + [data-bin-index='4'] > path { + fill: $graphColor4; + } + + [data-bin-index='5'] > path { + fill: $graphColor5; + } + + [data-bin-index='6'] > path { + fill: $graphColor6; + } + + [data-bin-index='7'] > path { + fill: $graphColor7; + } + + [data-bin-index='8'] > path { + fill: $graphColor8; + } + + [data-bin-index='9'] > path { + fill: $graphColor9; + } + + [data-bin-index='10'] > path { + fill: $graphColor10; + } + + [data-bin-index='11'] > path { + fill: $graphColor11; + } +} diff --git a/styles/_D3View.scss b/styles/_D3View.scss new file mode 100644 index 0000000000000000000000000000000000000000..92878347485a63813df1a92ffa63d59c7a655173 --- /dev/null +++ b/styles/_D3View.scss @@ -0,0 +1,50 @@ +.D3BaseView { + height: 0; + overflow: hidden; + /** + padding-bottom is set to `(100 * height / width)%` by the D3View class. + This preserves aspect ratio, but allows plots to be responsive in IE. + */ + position: relative; + width: 100%; + + /** + work around suggested by + https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3723601/ + */ + &.ms-render-fix { + font-size: 101%; + } + + > svg { + fill: none; + left: 0; + position: absolute; + stroke: none; + stroke-width: 0; + top: 0; + width: 100%; + } + + /* text */ + .plot-title, + .tooltip-content > text { + fill: #000; + } + + .tooltip-content { + .value { + font-weight: bold; + } + } + + .tooltip-outline { + stroke: #000; + stroke-width: 1; + } + + .legend, + .tooltip-outline { + fill: #fff; + } +} diff --git a/styles/_DeaggregationGraphView.scss b/styles/_DeaggregationGraphView.scss new file mode 100644 index 0000000000000000000000000000000000000000..492649f5d17af509ad2a968dff80acb7ea5baf86 --- /dev/null +++ b/styles/_DeaggregationGraphView.scss @@ -0,0 +1,18 @@ +.DeaggregationGraphView { + .axis { + path { + stroke: #999; + stroke-width: 1px; + } + + text { + fill: #999; + font-size: 0.7em; + } + } + + .grid-line { + stroke: #efefef; + stroke-width: 1px; + } +} diff --git a/styles/_GraphVariables.scss b/styles/_GraphVariables.scss new file mode 100644 index 0000000000000000000000000000000000000000..0308f145e9b53512dbf13ba651525d56a36007b8 --- /dev/null +++ b/styles/_GraphVariables.scss @@ -0,0 +1,36 @@ +$lineStroke: 2; +$pointStroke: 3; +$selectedStrokeOffset: 3; + +$selectedGraphColor: #444; + +/* + * Using a diverging (red-yellow-blue) color scheme from: + * http://colorbrewer2.org/#type=diverging&scheme=RdYlBu&n=11 + */ + +$graphColor0: #a50026; +$graphColor1: #d73027; +$graphColor2: #f46d43; +$graphColor3: #fdae61; +$graphColor4: #fee090; +$graphColor5: #ffffbf; +$graphColor6: #e0f3f8; +$graphColor7: #abd9e9; +$graphColor8: #74add1; +$graphColor9: #4575b4; +$graphColor10: #313695; +$graphColor11: #081d58; + +$curveColor0: #1f77b4; +$curveColor1: #ff7f0e; +$curveColor2: #2ca02c; +$curveColor3: #d62728; +$curveColor4: #9467bd; +$curveColor5: #e377c2; +$curveColor6: #bcbd22; +$curveColor7: #17becf; +$curveColor8: #aec7e8; +$curveColor9: #ffbb78; +$curveColor10: #98df8a; +$curveColor11: #ff9896; diff --git a/styles/disagg-d3.scss b/styles/disagg-d3.scss new file mode 100644 index 0000000000000000000000000000000000000000..3baad44135df3cd21209aa6d1194dc456dd171d4 --- /dev/null +++ b/styles/disagg-d3.scss @@ -0,0 +1,4 @@ +@import './D33dDeaggregationBin'; +@import './D3View'; +@import './DeaggregationGraphView'; +@import './GraphVariables';