iot-backend/software/flow/node_modules/node-red-dashboard/nodes/ui_chart.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">&nbsp;&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;<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>