598 lines
31 KiB
HTML
598 lines
31 KiB
HTML
<style>
|
|
#ui-chart-colors input[type="color"] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#ui-chart-colors input[type="color"]::-webkit-color-swatch,
|
|
#ui-chart-colors input[type="color"]::-moz-color-swatch {
|
|
border: none;
|
|
}
|
|
|
|
.node-chart-properties {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 70%;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.node-chart-properties .red-ui-typedInput-container {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.node-chart-property {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.node-chart-property label {
|
|
margin: 0;
|
|
}
|
|
|
|
.node-chart-property#node-container-category {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
(function () {
|
|
const l8n = function (property) {
|
|
return RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.' + property)
|
|
}
|
|
const noneType = { value: 'none', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.none'), hasValue: false }
|
|
const propertyType = { value: 'property', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.key') }
|
|
|
|
function hexToRgb (hex) {
|
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
|
return result
|
|
? {
|
|
r: parseInt(result[1], 16),
|
|
g: parseInt(result[2], 16),
|
|
b: parseInt(result[3], 16)
|
|
}
|
|
: null
|
|
}
|
|
|
|
function getSeriesTypes (xAxisType) {
|
|
if (xAxisType === 'category') {
|
|
return [noneType, 'msg', 'str', 'json', propertyType]
|
|
} else {
|
|
return [noneType, 'msg', 'str', 'json', propertyType]
|
|
}
|
|
}
|
|
|
|
RED.nodes.registerType('ui-chart', {
|
|
category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
|
|
color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
|
|
defaults: {
|
|
group: { type: 'ui-group', required: true },
|
|
name: { value: '' },
|
|
label: { value: 'chart' },
|
|
order: { value: Number.MAX_SAFE_INTEGER },
|
|
chartType: { value: 'line' },
|
|
category: { value: 'topic' },
|
|
categoryType: { value: 'msg' },
|
|
xAxisLabel: { value: '' },
|
|
xAxisProperty: { value: null },
|
|
xAxisPropertyType: { value: 'property' },
|
|
xAxisType: { value: 'time' },
|
|
xAxisFormat: { value: '' },
|
|
xAxisFormatType: { value: 'auto' },
|
|
yAxisLabel: { value: '' },
|
|
yAxisProperty: { value: null },
|
|
ymin: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
|
|
ymax: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
|
|
action: { value: 'append' },
|
|
stackSeries: { value: false },
|
|
pointShape: { value: 'circle' },
|
|
pointRadius: { value: 4 },
|
|
showLegend: { value: true },
|
|
removeOlder: { value: 1, validate: RED.validators.number(), required: true },
|
|
removeOlderUnit: { value: '3600', required: true },
|
|
removeOlderPoints: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
|
|
colors: { value: ['#0095FF', '#FF0000', '#FF7F0E', '#2CA02C', '#A347E1', '#D62728', '#FF9896', '#9467BD', '#C5B0D5'] },
|
|
textColor: { value: ['#666666'] },
|
|
textColorDefault: { value: true },
|
|
gridColor: { value: ['#e5e5e5'] },
|
|
gridColorDefault: { value: true },
|
|
width: {
|
|
value: 6,
|
|
validate: function (v) {
|
|
const width = v || 0
|
|
const currentGroup = $('#node-input-group').val() || this.group
|
|
const groupNode = RED.nodes.node(currentGroup)
|
|
const valid = !groupNode || +width <= +groupNode.width
|
|
$('#node-input-size').toggleClass('input-error', !valid)
|
|
return valid
|
|
}
|
|
},
|
|
height: { value: 8 },
|
|
className: { value: '' }
|
|
},
|
|
inputs: 1,
|
|
outputs: 1,
|
|
inputLabels: function () { return this.chartType },
|
|
outputLabels: ['chart state'],
|
|
icon: 'font-awesome/fa-line-chart',
|
|
align: 'right',
|
|
paletteLabel: 'chart',
|
|
label: function () {
|
|
return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || this.mode + ' chart'
|
|
},
|
|
labelStyle: function () { return this.name ? 'node_label_italic' : '' },
|
|
oneditprepare: function () {
|
|
const node = this
|
|
// add "Clear History" button
|
|
const clearHistoryBtn = $('<button>')
|
|
.attr('class', 'ui-button ui-corner-all ui-widget leftButton')
|
|
.attr('id', 'node-dialog-clear-history')
|
|
.text('Clear Chart History')
|
|
.on('click', () => {
|
|
// call the HTTP Admin Endpoint
|
|
$.ajax({
|
|
url: `dashboard/chart/${node.id}/clear`,
|
|
type: 'POST',
|
|
success: (data) => {
|
|
RED.notify(l8n('notifications.clearSuccess'), { type: 'success' })
|
|
},
|
|
error: (xhr, status, error) => {
|
|
RED.notify(node._('common.notification.error', { message: 'Unable to clear chart history' }), 'error')
|
|
}
|
|
})
|
|
})
|
|
|
|
$('.red-ui-tray-toolbar').append(clearHistoryBtn)
|
|
|
|
// if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
|
|
// as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
|
|
if (RED.nodes.subflow(this.z)) {
|
|
// change inputs from hidden to text & display them
|
|
$('#node-input-width').attr('type', 'text')
|
|
$('#node-input-height').attr('type', 'text')
|
|
$('div.form-row.nr-db-ui-element-sizer-row').hide()
|
|
$('div.form-row.nr-db-ui-manual-size-row').show()
|
|
} else {
|
|
// not in a subflow, use the elementSizer
|
|
$('div.form-row.nr-db-ui-element-sizer-row').show()
|
|
$('div.form-row.nr-db-ui-manual-size-row').hide()
|
|
$('#node-input-size').elementSizer({
|
|
width: '#node-input-width',
|
|
height: '#node-input-height',
|
|
group: '#node-input-group'
|
|
})
|
|
}
|
|
|
|
// use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
|
|
$('.ui-node-popover-title').tooltip({
|
|
show: {
|
|
effect: 'slideDown',
|
|
delay: 150
|
|
}
|
|
})
|
|
|
|
// Allowable "X-Axis Type" choices for chart type
|
|
// line : time, linear
|
|
// bar : categorical (or just hide)
|
|
// scatter : time, linear
|
|
// pie : radial
|
|
// doughnut : radial
|
|
|
|
// handle event when x axis type is changed
|
|
$('#node-input-xAxisType').on('change', (evt) => {
|
|
const value = $('#node-input-xAxisType').val()
|
|
if (value === 'time') {
|
|
$('#x-axis-format').show()
|
|
} else {
|
|
$('#x-axis-format').hide()
|
|
}
|
|
|
|
if (value === 'radial') {
|
|
// hide irrelevant fields
|
|
$('#node-container-xAxisLabel').hide()
|
|
$('#node-container-yAxisLabel').hide()
|
|
$('#y-axis-show').hide()
|
|
} else {
|
|
// make sure they're shown
|
|
$('#node-container-xAxisLabel').show()
|
|
$('#node-container-yAxisLabel').show()
|
|
$('#y-axis-show').show()
|
|
}
|
|
|
|
// update the series types allowed
|
|
$('#node-input-category').typedInput('types', getSeriesTypes(value))
|
|
})
|
|
|
|
$('#node-input-xAxisFormat').typedInput({
|
|
default: 'auto',
|
|
typeField: $('#node-input-xAxisFormatType'),
|
|
types: [
|
|
{ value: 'HH:mm:ss', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.HHmmss'), hasValue: false },
|
|
{ value: 'HH:mm', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.HHmm'), hasValue: false },
|
|
{ value: 'y-L-d', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.yLd'), hasValue: false },
|
|
{ value: 'd/L', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.dL'), hasValue: false },
|
|
{ value: 'ccc HH:mm', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.cccHHmm'), hasValue: false },
|
|
{ value: 'custom', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.custom'), icon: 'fa fa-font' },
|
|
{ value: 'auto', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.auto'), hasValue: false }
|
|
]
|
|
})
|
|
|
|
$('#node-input-category').typedInput({
|
|
default: 'msg',
|
|
typeField: $('#node-input-categoryType'),
|
|
types: getSeriesTypes($('#node-input-xAxisType').val())
|
|
})
|
|
$('#node-input-xAxisProperty').typedInput({
|
|
default: propertyType.value,
|
|
typeField: $('#node-input-xAxisPropertyType'),
|
|
types: ['msg', 'str', propertyType]
|
|
})
|
|
$('#node-input-yAxisProperty').typedInput({
|
|
default: propertyType.value,
|
|
typeField: $('#node-input-yAxisPropertyType'),
|
|
types: [propertyType]
|
|
})
|
|
|
|
const updateXAxisTypeOptions = function (options, defaultValue) {
|
|
const $el = $('#node-input-xAxisType')
|
|
const currentValue = $el.val() || node.xAxisType
|
|
const allOptions = [
|
|
{ value: 'time', text: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.timescale') },
|
|
{ value: 'linear', text: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.linear') },
|
|
{ value: 'radial', text: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.radial') },
|
|
{ value: 'category', text: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.categorical') }
|
|
]
|
|
const theseOptions = allOptions.filter((option) => options.indexOf(option.value) !== -1)
|
|
$el.css('pointer-events', 'none') // temporarily inhibit events
|
|
$el.empty()
|
|
theseOptions.forEach((option) => {
|
|
$el.append($('<option>', option))
|
|
})
|
|
|
|
// set the value to the current value if it's still valid otherwise set to default/first option
|
|
if (theseOptions.find((option) => option.value === currentValue)) {
|
|
$el.val(currentValue)
|
|
} else if (defaultValue && theseOptions.find((option) => option.value === defaultValue)) {
|
|
$el.val(defaultValue)
|
|
} else if (theseOptions.length > 0) {
|
|
$el.val(theseOptions[0].value)
|
|
} else {
|
|
$el.val('')
|
|
}
|
|
$el.css('pointer-events', '') // remove the inhibition
|
|
$el.trigger('change') // trigger the change event to update the UI
|
|
}
|
|
|
|
// handle event when chart's type is changed
|
|
$('#node-input-chartType').on('change', (evt) => {
|
|
const value = $(evt.target).val()
|
|
|
|
if (value === 'line' || value === 'scatter') {
|
|
// for line and scatter
|
|
// types - time, linear
|
|
updateXAxisTypeOptions(['time', 'linear'], 'time')
|
|
// no concept of stacking in line/scatter charts
|
|
$('#config-stackSeries').hide()
|
|
// show x-axis limit options & points sizing
|
|
$('#x-axis-show').show()
|
|
$('#point-radius-show').show()
|
|
} else if (value === 'pie' || value === 'doughnut') {
|
|
// for pie/doughnut
|
|
// types - radial
|
|
updateXAxisTypeOptions(['radial'], 'radial')
|
|
// no stacking options in pie/doughnut charts
|
|
$('#config-stackSeries').hide()
|
|
// hide x-axis limit options & points sizing
|
|
$('#x-axis-show').hide()
|
|
$('#point-radius-show').hide()
|
|
} else if (value === 'bar') {
|
|
// for bar
|
|
// types - categorical
|
|
updateXAxisTypeOptions(['category'], 'category')
|
|
// show the ability to control if content is stacked or not
|
|
$('#config-stackSeries').show()
|
|
// hide x-axis limit options & points sizing
|
|
$('#x-axis-show').hide()
|
|
$('#point-radius-show').hide()
|
|
}
|
|
})
|
|
|
|
// handle event when chart's type is changed
|
|
$('#node-input-category').change((evt) => {
|
|
const categoryType = $(evt.target).val()
|
|
|
|
if (categoryType === 'json') {
|
|
// hide y-axis property setting as category will now control that
|
|
$('#node-container-yAxisProperty').hide()
|
|
} else {
|
|
$('#node-container-yAxisProperty').show()
|
|
}
|
|
})
|
|
|
|
// ensure the xAxis PropertyType isn't an invalid value
|
|
if (this.xAxisPropertyType === 'msg' && this.xAxisProperty === '') {
|
|
// auto-fix it for the user
|
|
this.xAxisPropertyType = propertyType.value
|
|
$('#node-input-xAxisProperty').typedInput('type', propertyType.value)
|
|
}
|
|
|
|
// Stack/Group-By Options - convert from bool to string values for <select>
|
|
if (this.stackSeries === true) {
|
|
$('#chart-input-stackSeries').val('true')
|
|
} else {
|
|
$('#chart-input-stackSeries').val('false')
|
|
}
|
|
|
|
// Series Color Pickers
|
|
const setColor = function (id, value) {
|
|
$(id).val(value)
|
|
$(id).css('background-color', value)
|
|
const rgb = hexToRgb(value)
|
|
const level = ((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114)) / 1000
|
|
const textColor = (level >= 128) ? '#111111' : '#eeeeee'
|
|
$(id).css('color', textColor)
|
|
}
|
|
$('.series-color').on('change', function () {
|
|
setColor('#' + $(this).attr('id'), $(this).val())
|
|
})
|
|
const defaultColors = ['#1F77B4', '#AEC7E8', '#FF7F0E', '#2CA02C', '#98DF8A', '#D62728', '#FF9896', '#9467BD', '#C5B0D5']
|
|
|
|
if (this.colors) {
|
|
for (let i = 0; i < this.colors.length; i++) {
|
|
const value = this.colors[i] || defaultColors[i]
|
|
setColor('#node-input-color' + (i + 1), value)
|
|
}
|
|
} else {
|
|
for (let c = 0; c < defaultColors.length; c++) {
|
|
setColor('#node-input-color' + (c + 1), defaultColors[c])
|
|
}
|
|
}
|
|
|
|
if (this.textColor) {
|
|
setColor('#node-chart-text-color', this.textColor[0])
|
|
} else {
|
|
setColor('#node-chart-text-color', '#666666')
|
|
}
|
|
|
|
if (this.gridColor) {
|
|
setColor('#node-chart-grid-color', this.gridColor[0])
|
|
} else {
|
|
setColor('#node-chart-grid-color', '#e5e5e5')
|
|
}
|
|
|
|
if (this.textColorDefault || this.textColorDefault === undefined) {
|
|
$('#node-chart-text-color').hide()
|
|
}
|
|
if (this.gridColorDefault || this.gridColorDefault === undefined) {
|
|
$('#node-chart-grid-color').hide()
|
|
}
|
|
},
|
|
oneditsave: function () {
|
|
// Stack By - convert from string values to bool
|
|
this.stackSeries = $('#chart-input-stackSeries').val() === 'true'
|
|
|
|
// Colors
|
|
const colors = []
|
|
for (let i = 0; i < 9; i++) {
|
|
const color = $('#node-input-color' + (i + 1)).val()
|
|
if (color) {
|
|
colors.push(color)
|
|
}
|
|
}
|
|
this.colors = colors
|
|
|
|
const textColor = []
|
|
const color = $('#node-chart-text-color').val()
|
|
if (color) {
|
|
textColor.push(color)
|
|
}
|
|
this.textColor = textColor
|
|
|
|
const gridColor = []
|
|
const gcolor = $('#node-chart-grid-color').val()
|
|
if (gcolor) {
|
|
gridColor.push(gcolor)
|
|
}
|
|
this.gridColor = gridColor
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-chart">
|
|
<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>
|
|
<div class="form-row">
|
|
<label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-chart.label.group"></span></label>
|
|
<input type="text" id="node-input-group">
|
|
</div>
|
|
<div class="form-row nr-db-ui-element-sizer-row">
|
|
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-chart-group.label.size"></label>
|
|
<button class="editor-button" id="node-input-size"></button>
|
|
</div>
|
|
<div class="form-row nr-db-ui-manual-size-row">
|
|
<label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-chart-group.label.width">Width</label>
|
|
<input type="hidden" id="node-input-width">
|
|
</div>
|
|
<div class="form-row nr-db-ui-manual-size-row">
|
|
<label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-chart-group.label.height">Height</label>
|
|
<input type="hidden" id="node-input-height">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-chart.label.label"></span></label>
|
|
<input type="text" id="node-input-label" data-i18n="[placeholder]ui-chart.label.optionalChartTitle">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-chart.label.class"></span></label>
|
|
<div style="display: inline;">
|
|
<input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-chart.label.optionalCssClassNames" style="flex-grow: 1;">
|
|
<a
|
|
data-html="true"
|
|
title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
|
|
class="red-ui-button ui-node-popover-title"
|
|
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
|
|
<i style="font-family: ui-serif;">fx</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<h4>Chart Configuration</h4>
|
|
<div class="form-row" style="display: flex; align-items: center; gap: 36px;">
|
|
<div>
|
|
<label for="node-input-chartType"><i class="fa fa-bar-chart"></i> <span data-i18n="ui-chart.label.type"></span></label>
|
|
<select id="node-input-chartType">
|
|
<option value="line" data-i18n="ui-chart.label.line"></option>
|
|
<option value="bar" data-i18n="ui-chart.label.bar"></option>
|
|
<option value="scatter" data-i18n="ui-chart.label.scatter"></option>
|
|
<option value="pie" data-i18n="ui-chart.label.pie"></option>
|
|
<option value="doughnut" data-i18n="ui-chart.label.doughnut"></option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style="width:auto" for="node-input-showLegend"><i class="fa fa-th-list"></i> <span data-i18n="ui-chart.label.showLegend"></span></label>
|
|
<input type="checkbox" checked id="node-input-showLegend" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
|
|
</div>
|
|
</div>
|
|
<div class="form-row" id="config-stackSeries">
|
|
<!-- do not use node-input here to prevent NR automatic binding -->
|
|
<label for="chart-input-stackSeries"><i class="fa fa-bookmark"></i> <span data-i18n="ui-chart.label.stackSeries"></span></label>
|
|
<select id="chart-input-stackSeries">
|
|
<option value="true" data-i18n="ui-chart.label.stackSeriesTrue"></option>
|
|
<option value="false" data-i18n="ui-chart.label.stackSeriesFalse"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-action" data-i18n="ui-chart.label.action"></label></label>
|
|
<select id="node-input-action">
|
|
<option value="append" data-i18n="ui-chart.label.append"></option>
|
|
<option value="replace" data-i18n="ui-chart.label.replace"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row form-row-flex" id="point-radius-show">
|
|
<label for="node-input-pointRadius" data-i18n="ui-chart.label.pointStyle"></label>
|
|
<div style="display: flex; align-items: center; gap: 36px;">
|
|
<div>
|
|
<label for="node-input-pointShape" style="width: auto; display: none;" data-i18n="ui-chart.label.pointShape"></label>
|
|
<select id="node-input-pointShape">
|
|
<option value="circle" data-i18n="ui-chart.label.circle"></option>
|
|
<option value="cross" data-i18n="ui-chart.label.cross"></option>
|
|
<option value="crossRot" data-i18n="ui-chart.label.crossRotated"></option>
|
|
<option value="dash" data-i18n="ui-chart.label.dash"></option>
|
|
<option value="line" data-i18n="ui-chart.label.line2"></option>
|
|
<option value="rect" data-i18n="ui-chart.label.rectangle"></option>
|
|
<option value="rectRounded" data-i18n="ui-chart.label.roundedRectangle"></option>
|
|
<option value="rectRot" data-i18n="ui-chart.label.rotatedRectangle"></option>
|
|
<option value="star" data-i18n="ui-chart.label.star"></option>
|
|
<option value="triangle" data-i18n="ui-chart.label.triangle"></option>
|
|
<option value="false" data-i18n="ui-chart.label.none"></option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="node-input-pointRadius" style="width: auto;" data-i18n="ui-chart.label.pointRadius"></label>
|
|
<input type="number" id="node-input-pointRadius">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4>Axis Configuration</h4>
|
|
<div class="form-row">
|
|
<label for="node-input-xAxisType" data-i18n="ui-chart.label.xType"></label></label>
|
|
<select id="node-input-xAxisType"> </select>
|
|
</div>
|
|
<div class="form-row" id="x-axis-format">
|
|
<label for="node-input-xAxisFormat" data-i18n="ui-chart.label.xFormat"></label></label>
|
|
<input type="text" id="node-input-xAxisFormat">
|
|
<input type="hidden" id="node-input-xAxisFormatType">
|
|
</div>
|
|
<div class="form-row" id="node-container-xAxisLabel">
|
|
<label for="node-input-xAxisLabel" data-i18n="ui-chart.label.xLabel"></label></label>
|
|
<input type="text" id="node-input-xAxisLabel">
|
|
</div>
|
|
<div class="form-row" id="x-axis-show">
|
|
<label for="node-input-removeOlder" data-i18n="ui-chart.label.xLimit"></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:100px;">
|
|
<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="node-container-yAxisLabel">
|
|
<label for="node-input-yAxisLabel" data-i18n="ui-chart.label.yLabel"></label></label>
|
|
<input type="text" id="node-input-yAxisLabel">
|
|
</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 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">
|
|
<label data-i18n="ui-chart.label.properties"></label>
|
|
<div id="node-container-axisKeys" class="node-chart-properties">
|
|
<div id="node-container-category" class="node-chart-property">
|
|
<label style="width: auto" for="node-input-category" data-i18n="ui-chart.label.series"></label>
|
|
<input style="flex-grow: 1" type="text" id="node-input-category" placeholder="topic">
|
|
<input type="hidden" id="node-input-categoryType">
|
|
</div>
|
|
<div id="node-container-xAxisProperty" class="node-chart-property">
|
|
<label style="width: auto" for="node-input-xAxisProperty">X:</label>
|
|
<input style="flex-grow: 1" type="text" id="node-input-xAxisProperty" data-i18n="[placeholder]ui-chart.label.propertyPlaceholder">
|
|
<input type="hidden" id="node-input-xAxisPropertyType">
|
|
</div>
|
|
<div id="node-container-yAxisProperty" class="node-chart-property">
|
|
<label style="width: auto" for="node-input-yAxisProperty">Y:</label>
|
|
<input style="flex-grow: 1" type="text" id="node-input-yAxisProperty" data-i18n="[placeholder]ui-chart.label.propertyPlaceholder">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4>Styling/Colors</h4>
|
|
<div class="form-row" id="ui-chart-colors">
|
|
<label for="node-input-color1" data-i18n="ui-chart.label.seriesColors"></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 class="form-row" style="display: flex; align-items: center; gap: 36px; height: 34px;">
|
|
<div>
|
|
<label for="node-chart-text-color" data-i18n="ui-chart.label.textColor"></label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" checked id="node-input-textColorDefault" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;" onclick="this.checked ? $('#node-chart-text-color').hide(): $('#node-chart-text-color').show()">
|
|
<label style="width:auto" for="node-input-textColorDefault"> <span data-i18n="ui-chart.label.setTextColorDefault"></span></label>
|
|
</div>
|
|
<div>
|
|
<input type="color" id="node-chart-text-color" class="series-color" style="width:100px;"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-row" style="display: flex; align-items: center; gap: 36px; height: 34px;">
|
|
<div>
|
|
<label for="node-chart-grid-color" data-i18n="ui-chart.label.gridColor"></label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" checked id="node-input-gridColorDefault" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;" onclick="this.checked ? $('#node-chart-grid-color').hide() : $('#node-chart-grid-color').show()">
|
|
<label style="width:auto" for="node-input-gridColorDefault"> <span data-i18n="ui-chart.label.setGridColorDefault"></span></label>
|
|
</div>
|
|
<div>
|
|
<input type="color" id="node-chart-grid-color" class="series-color" style="width:100px;"/>
|
|
</div>
|
|
</div>
|
|
</script> |