aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/correlation/corr_scatter_plot.py4
-rw-r--r--wqflask/wqflask/templates/corr_scatter_plot.html84
2 files changed, 66 insertions, 22 deletions
diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py
index dd98c7d5..f7fbffd2 100644
--- a/wqflask/wqflask/correlation/corr_scatter_plot.py
+++ b/wqflask/wqflask/correlation/corr_scatter_plot.py
@@ -29,7 +29,7 @@ class CorrScatterPlot(object):
try:
circle_color = params['circle_color']
except:
- circle_color = 'steelblue'
+ circle_color = '#3D85C6'
self.circle_color = circle_color
try:
@@ -41,7 +41,7 @@ class CorrScatterPlot(object):
try:
line_color = params['line_color']
except:
- line_color = 'red'
+ line_color = '#FF0000'
self.line_color = line_color
try:
diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html
index dd9168a8..490024ec 100644
--- a/wqflask/wqflask/templates/corr_scatter_plot.html
+++ b/wqflask/wqflask/templates/corr_scatter_plot.html
@@ -6,6 +6,7 @@
<link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
<link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" />
+ <link rel="stylesheet" type="text/css" href="http://bgrins.github.io/spectrum/spectrum.css" />
{% endblock %}
{% block content %}
@@ -25,24 +26,12 @@
<td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td>
</tr>
<tr>
- <td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td>
- <td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td>
- <td>
- <select name="circle_color" style="width: 100px;">
- <option value="red">Red</option>
- <option value="green">Green</option>
- <option value="blue">Blue</option>
- </select>
- </td>
- <td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td>
- <td>
- <select name="line_color" style="width: 100px;">
- <option value="red">Red</option>
- <option value="green">Green</option>
- <option value="blue">Blue</option>
- </select>
- </td>
- <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td>
+ <td style="vertical-align:middle;"><input type="text" name="width" value="{{width}}" style="width: 100px; margin: auto;"></td>
+ <td style="vertical-align:middle;"><input type="text" name="height" value="{{height}}" style="width: 100px; margin: auto;"></td>
+ <td style="vertical-align:middle;"><input type="text" name="circle_color" id="circle_color" /></td>
+ <td style="vertical-align:middle;"><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px; margin: auto;"></td>
+ <td style="vertical-align:middle;"><input type="text" name="line_color" id="line_color" /></td>
+ <td style="vertical-align:middle;"><input type="text" name="line_width" value="{{line_width}}" style="width: 100px; margin: auto;"></td>
</tr>
</table>
</form>
@@ -51,9 +40,64 @@
{% block js %}
<script>
- js_data = {{ js_data | safe }}
- </script>
+ js_data = {{ js_data | safe }};
+ </script>
<script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+ <script language="javascript" type="text/javascript" src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/corr_scatter_plot.js"></script>
+ <script>
+ $("#circle_color").spectrum({
+ color: "{{circle_color}}",
+ showInput: true,
+ className: "circle_color",
+ showInitial: true,
+ showPalette: true,
+ showSelectionPalette: true,
+ maxPaletteSize: 10,
+ preferredFormat: "hex",
+ localStorageKey: "circle_color",
+ palette: [
+ ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
+ ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
+ "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
+ ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
+ "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
+ "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
+ "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
+ "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
+ "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
+ "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
+ "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
+ "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
+ "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
+ ]
+ });
+ $("#line_color").spectrum({
+ color: "{{line_color}}",
+ showInput: true,
+ className: "line_color",
+ showInitial: true,
+ showPalette: true,
+ showSelectionPalette: true,
+ maxPaletteSize: 10,
+ preferredFormat: "hex",
+ localStorageKey: "line_color",
+ palette: [
+ ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
+ ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
+ "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
+ ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
+ "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
+ "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
+ "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
+ "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
+ "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
+ "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
+ "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
+ "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
+ "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
+ ]
+ });
+ </script>
{% endblock %} \ No newline at end of file
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-23 15:49:25 +0000