296 lines
16 KiB
HTML
296 lines
16 KiB
HTML
<style>
|
|
input.series-color {
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
input.series-color::-webkit-color-swatch {
|
|
border: none;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('ui_chart',{
|
|
category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
|
|
color: 'rgb(119, 198, 204)',
|
|
defaults: {
|
|
name: {value: ''},
|
|
group: {type: 'ui_group', required: true},
|
|
order: {value: 0},
|
|
width: {value: 0, validate: function(v) {
|
|
var width = v||0;
|
|
var currentGroup = $('#node-input-group').val()||this.group;
|
|
var groupNode = RED.nodes.node(currentGroup);
|
|
var valid = !groupNode || +width <= +groupNode.width;
|
|
$("#node-input-size").toggleClass("input-error",!valid);
|
|
return valid;
|
|
}},
|
|
height: {value: 0},
|
|
label: {value: 'chart'},
|
|
chartType: {value: 'line'},
|
|
legend: {value: 'false'},
|
|
xformat: {value: 'HH:mm:ss'},
|
|
interpolate: {value: 'linear', required:true},
|
|
nodata: {value: ''},
|
|
dot: {value: false},
|
|
ymin: {value: '', validate:function(value) { return value === '' || RED.validators.number(); }},
|
|
ymax: {value: '', validate:function(value) { return value === '' || RED.validators.number(); }},
|
|
removeOlder: {value: 1, validate:RED.validators.number(), required:true},
|
|
removeOlderPoints: {value: '', validate:function(value) { return value === '' || RED.validators.number(); }},
|
|
removeOlderUnit: {value: '3600', required:true},
|
|
cutout: {value: 0},
|
|
useOneColor: {value: false},
|
|
useUTC: {value: false},
|
|
colors: {value: ['#1F77B4', '#AEC7E8', '#FF7F0E', '#2CA02C', '#98DF8A', '#D62728', '#FF9896', '#9467BD', '#C5B0D5']},
|
|
outputs: {value: 1},
|
|
useDifferentColor: {value: false},
|
|
className: {value: ''}
|
|
},
|
|
inputs:1,
|
|
outputs:1,
|
|
inputLabels: function() { return this.chartType; },
|
|
outputLabels: ["chart state"],
|
|
align: "right",
|
|
icon: "ui_chart.png",
|
|
paletteLabel: 'chart',
|
|
label: function() { return this.name || (~this.label.indexOf("{{") ? null : this.label) || 'chart'; },
|
|
labelStyle: function() { return this.name?"node_label_italic":""; },
|
|
oneditprepare: function() {
|
|
var oldouts = this.outputs;
|
|
if (RED.nodes.filterLinks({source:{id:this.id},sourcePort:1}).length > 0) { this.outputs = 2; }
|
|
else { this.outputs = 1; }
|
|
if (this.outputs !== oldouts) { this.changed = true; }
|
|
if (!$("#node-input-chartType").val()) {
|
|
$("#node-input-chartType").val("line");
|
|
}
|
|
$("#node-input-size").elementSizer({
|
|
width: "#node-input-width",
|
|
height: "#node-input-height",
|
|
group: "#node-input-group"
|
|
});
|
|
$("#node-input-chartType").on("change", function() {
|
|
$("#legend-show").hide();
|
|
$("#show-useDifferentColor").hide();
|
|
if ($(this).val() === "horizontalBar") {
|
|
$("#y-label-show").hide();
|
|
$("#x-label-show").show();
|
|
}
|
|
else {
|
|
$("#y-label-show").show();
|
|
$("#x-label-show").hide();
|
|
}
|
|
if ($(this).val() === "line") {
|
|
$("#x-axis-show").show();
|
|
$("#x-axis-label-show").show();
|
|
$("#interpolate-show").show();
|
|
$("#legend-show").show();
|
|
$("#y-axis-show").show();
|
|
$("#hole-size-show").hide();
|
|
$("#show-dot-field").show();
|
|
$("#show-useOneColor").hide();
|
|
}
|
|
else {
|
|
$("#x-axis-show").hide();
|
|
$("#x-axis-label-show").hide();
|
|
$("#interpolate-show").hide();
|
|
$("#show-dot-field").hide();
|
|
if (($(this).val() === "bar")||($(this).val() === "horizontalBar")) {
|
|
$("#show-useOneColor").show();
|
|
$("#legend-show").show();
|
|
}
|
|
else {
|
|
$("#show-useOneColor").hide();
|
|
}
|
|
if ($(this).val() === "pie") {
|
|
$("#y-axis-show").hide();
|
|
$("#legend-show").show();
|
|
$("#hole-size-show").show();
|
|
}
|
|
else if ($(this).val() === "polar-area") {
|
|
$("#y-axis-show").show();
|
|
$("#legend-show").show();
|
|
$("#hole-size-show").hide();
|
|
$("#show-useDifferentColor").show();
|
|
}
|
|
else if ($(this).val() === "radar") {
|
|
$("#y-axis-show").show();
|
|
$("#legend-show").show();
|
|
$("#hole-size-show").hide();
|
|
}
|
|
else {
|
|
$("#y-axis-show").show();
|
|
$("#hole-size-show").hide();
|
|
}
|
|
}
|
|
|
|
});
|
|
var setColour = function(id, value) {
|
|
$(id).val(value);
|
|
$(id).css("background-color", value);
|
|
var rgb = tinycolor(value).toRgb();
|
|
var level = ((rgb.r*299) + (rgb.g*587) + (rgb.b*114))/1000;
|
|
var textColor = (level >= 128) ? '#111111' : '#eeeeee';
|
|
$(id).css("color", textColor);
|
|
}
|
|
$(".series-color").on("change", function() {
|
|
setColour("#"+$(this).attr("id"), $(this).val());
|
|
});
|
|
var oval = $("#node-input-xformat").val();
|
|
if (!oval) { $("#node-input-xformat").val("HH:mm:ss"); }
|
|
var odef = 'custom';
|
|
if (oval === "HH:mm:ss") { odef = oval; }
|
|
if (oval === "HH:mm") { odef = oval; }
|
|
if (oval === "Y-M-D") { odef = oval; }
|
|
if (oval === "D/M") { odef = oval; }
|
|
if (oval === "dd HH:mm") { odef = oval; }
|
|
if (oval === "auto") { odef = oval; }
|
|
var ohms = {value: "HH:mm:ss", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.HHmmss"), hasValue: false};
|
|
var ohm = {value: "HH:mm", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.HHmm"), hasValue: false};
|
|
var oymd = {value: "Y-M-D", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.yearMonthDate"), hasValue: false};
|
|
var odm = {value: "D/M", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.dateMonth"), hasValue: false};
|
|
var oahm = {value: "dd HH:mm", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.dayHHmm"), hasValue: false};
|
|
var ocus = {value: "custom", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.custom"), icon: "red/images/typedInput/az.png"};
|
|
var oaut = {value: "auto", label: RED._("node-red-dashboard/ui_chart:ui_chart.label.automatic"), hasValue: false};
|
|
$("#node-input-xformat").typedInput({
|
|
default: odef,
|
|
types:[ ohms, ohm, oahm, odm, oymd, ocus, oaut ]
|
|
});
|
|
var defaultColors = ['#1F77B4', '#AEC7E8', '#FF7F0E', '#2CA02C', '#98DF8A', '#D62728', '#FF9896', '#9467BD', '#C5B0D5'];
|
|
|
|
if (this.colors) {
|
|
for (var i=0; i<this.colors.length; i++) {
|
|
var value = this.colors[i] || defaultColors[i];
|
|
setColour("#node-input-color"+(i+1), value);
|
|
}
|
|
}
|
|
else {
|
|
for (var c=0; c<defaultColors.length; c++) {
|
|
setColour("#node-input-color"+(c+1), defaultColors[c]);
|
|
}
|
|
}
|
|
|
|
},
|
|
oneditsave: function() {
|
|
if ($("#node-input-xformat").typedInput('type') !== 'custom') {
|
|
$("#node-input-xformat").val($("#node-input-xformat").typedInput('type'));
|
|
}
|
|
this.colors = [$("#node-input-color1").val(),$("#node-input-color2").val(),$("#node-input-color3").val(),
|
|
$("#node-input-color4").val(),$("#node-input-color5").val(),$("#node-input-color6").val(),
|
|
$("#node-input-color7").val(),$("#node-input-color8").val(),$("#node-input-color9").val()];
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui_chart">
|
|
<div class="form-row">
|
|
<label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui_chart.label.group"></label>
|
|
<input type="text" id="node-input-group">
|
|
</div>
|
|
<div class="form-row">
|
|
<label><i class="fa fa-object-group"></i> <span data-i18n="ui_chart.label.size"></label>
|
|
<input type="hidden" id="node-input-width">
|
|
<input type="hidden" id="node-input-height">
|
|
<button class="editor-button" id="node-input-size"></button>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui_chart.label.label"></label>
|
|
<input type="text" id="node-input-label" data-i18n="[placeholder]ui_chart.label.optionalChartTitle">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-removeOlder"><i class="fa fa-line-chart"></i> <span data-i18n="ui_chart.label.type"></label>
|
|
<select id="node-input-chartType" style="width:159px; font-family:'FontAwesome','Helvetica Neue', Helvetica, Arial, sans-serif">
|
|
<option value="line" data-i18n="[html]ui_chart.label.lineChart"></option>
|
|
<option value="bar" data-i18n="[html]ui_chart.label.barChart"></option>
|
|
<option value="horizontalBar" data-i18n="[html]ui_chart.label.barChartH"></option>
|
|
<option value="pie" data-i18n="[html]ui_chart.label.pieChart"></option>
|
|
<option value="polar-area" data-i18n="[html]ui_chart.label.polarAreaChart"></option>
|
|
<option value="radar" data-i18n="[html]ui_chart.label.radarChart"></option>
|
|
</select>
|
|
<div id="show-dot-field" style="display:inline-block;">
|
|
<input type="checkbox" id="node-input-dot" style="display:inline-block; width:auto; vertical-align:baseline; margin-left:40px; margin-right:5px;"><span data-i18n="ui_chart.label.enlargePoints">
|
|
</div>
|
|
</div>
|
|
<div class="form-row" id="x-axis-show">
|
|
<label for="node-input-removeOlder" data-i18n="ui_chart.label.xAxis"></label>
|
|
<label for="node-input-removeOlder" style="width:auto" data-i18n="ui_chart.label.last"></label>
|
|
<input type="text" id="node-input-removeOlder" style="width:50px;">
|
|
<select id="node-input-removeOlderUnit" style="width:80px;">
|
|
<option value="1" data-i18n="ui_chart.label.seconds"></option>
|
|
<option value="60" data-i18n="ui_chart.label.minutes"></option>
|
|
<option value="3600" data-i18n="ui_chart.label.hours"></option>
|
|
<option value="86400" data-i18n="ui_chart.label.days"></option>
|
|
<option value="604800" data-i18n="ui_chart.label.weeks"></option>
|
|
</select>
|
|
<label for="node-input-removeOlderPoints" style="width:auto; margin-left:10px; margin-right:10px;" data-i18n="ui_chart.label.or"></label>
|
|
<input type="text" id="node-input-removeOlderPoints" style="width:60px;" placeholder="1000">
|
|
<span style="margin-left:5px;" data-i18n="ui_chart.label.points"></span>
|
|
</div>
|
|
<div class="form-row" id="x-axis-label-show">
|
|
<label for="node-input-xformat" data-i18n="ui_chart.label.xAxisLabel"></label>
|
|
<input type="text" id="node-input-xformat" style="width:250px;">
|
|
<input type="checkbox" id="node-input-useUTC" style="display:inline-block; width:auto; vertical-align:baseline; margin-left:8px; margin-right:4px;"> <span data-i18n="ui_chart.label.asUTC"></span>
|
|
</div>
|
|
<div class="form-row" id="y-axis-show">
|
|
<label id="y-label-show" for="node-input-ymin" data-i18n="ui_chart.label.yAxis"></label>
|
|
<label id="x-label-show" for="node-input-ymin" data-i18n="ui_chart.label.xAxis"></label>
|
|
<label for="node-input-ymin" style="width:auto" data-i18n="ui_chart.label.min"></label>
|
|
<input type="text" id="node-input-ymin" style="width:92px">
|
|
<label for="node-input-ymax" style="width:auto; margin-left:20px;" data-i18n="ui_chart.label.max"></label>
|
|
<input type="text" id="node-input-ymax" style="width:92px">
|
|
</div>
|
|
<div class="form-row" id="legend-show">
|
|
<label for="node-input-legend" data-i18n="ui_chart.label.legend"></label>
|
|
<select id="node-input-legend" style="width:120px;">
|
|
<option value="false" data-i18n="ui_chart.label.none"></option>
|
|
<option value="true" data-i18n="ui_chart.label.show"></option>
|
|
</select>
|
|
<span id="interpolate-show"> <span data-i18n="ui_chart.label.interpolate"></span>
|
|
<select id="node-input-interpolate" style="width:120px;">
|
|
<option value="linear" data-i18n="ui_chart.label.linear"></option>
|
|
<option value="step" data-i18n="ui_chart.label.step"></option>
|
|
<option value="bezier" data-i18n="ui_chart.label.bezier"></option>
|
|
<option value="cubic" data-i18n="ui_chart.label.cubic"></option>
|
|
<option value="monotone" data-i18n="ui_chart.label.cubicMono"></option>
|
|
</select>
|
|
</span>
|
|
<span id="hole-size-show"> <span data-i18n="ui_chart.label.cutout"></span>
|
|
<input type="text" id="node-input-cutout" style="width:35px"> %
|
|
</span>
|
|
</div>
|
|
<div id="show-useOneColor" style="display:none; height:24px;">
|
|
<input type="checkbox" id="node-input-useOneColor" style="display:inline-block; width:auto; vertical-align:baseline; margin-left:105px; margin-right:5px;"><span data-i18n="ui_chart.label.useFirstColourForAllBars"></span>
|
|
</div>
|
|
<div class="form-row" id="ui-chart-colours">
|
|
<label for="node-input-color1" data-i18n="ui_chart.label.seriesColours"></label>
|
|
<input type="color" id="node-input-color1" class="series-color" style="width:100px;"/>
|
|
<input type="color" id="node-input-color2" class="series-color" style="width:100px;"/>
|
|
<input type="color" id="node-input-color3" class="series-color" style="width:100px;"/>
|
|
<div style="margin-top:5px; margin-left:104px;">
|
|
<input type="color" id="node-input-color4" class="series-color" style="width:100px;"/>
|
|
<input type="color" id="node-input-color5" class="series-color" style="width:100px;"/>
|
|
<input type="color" id="node-input-color6" class="series-color" style="width:100px;"/>
|
|
</div>
|
|
<div style="margin-top:5px; margin-left:104px;">
|
|
<input type="color" id="node-input-color7" class="series-color" style="width:100px;"/>
|
|
<input type="color" id="node-input-color8" class="series-color" style="width:100px;"/>
|
|
<input type="color" id="node-input-color9" class="series-color" style="width:100px;"/>
|
|
</div>
|
|
</div>
|
|
<div id="show-useDifferentColor" class="form-row">
|
|
<label></label>
|
|
<input type="checkbox" id="node-input-useDifferentColor" style="display:inline-block; width:auto; vertical-align:top;">
|
|
<span data-i18n="ui_chart.label.useDifferentColor"></span>
|
|
</input>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-nodata" data-i18n="ui_chart.label.blankLabel"></label>
|
|
<input type="text" id="node-input-nodata" data-i18n="[placeholder]ui_chart.label.displayThisTextBeforeValidDataArrives">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui_chart.label.className"></span></label>
|
|
<input type="text" id="node-input-className" data-i18n="[placeholder]ui_chart.label.classNamePlaceholder"/>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
|
|
<input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
|
|
</div>
|
|
</script>
|