123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598 |
- <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>
|