diff --git a/src/fprime_gds/flask/static/addons/chart-display/addon-templates.js b/src/fprime_gds/flask/static/addons/chart-display/addon-templates.js index 17ad0ef4..2e92f9b3 100644 --- a/src/fprime_gds/flask/static/addons/chart-display/addon-templates.js +++ b/src/fprime_gds/flask/static/addons/chart-display/addon-templates.js @@ -4,17 +4,41 @@ export let chart_wrapper_template = `
-
-
+
+ +
- +
+ + +
@@ -28,14 +52,11 @@ export let chart_display_template = ` - - - {{ channelName }} + {{ selected }}
@@ -52,30 +73,15 @@ export let chart_display_template = `
-
- -
- -
- -
diff --git a/src/fprime_gds/flask/static/addons/chart-display/chart-addon.js b/src/fprime_gds/flask/static/addons/chart-display/addon.js similarity index 54% rename from src/fprime_gds/flask/static/addons/chart-display/chart-addon.js rename to src/fprime_gds/flask/static/addons/chart-display/addon.js index d6c9629e..3047560a 100644 --- a/src/fprime_gds/flask/static/addons/chart-display/chart-addon.js +++ b/src/fprime_gds/flask/static/addons/chart-display/addon.js @@ -5,38 +5,25 @@ * * @author saba-ja */ -import {generate_chart_config, realtime_config} from "./config.js"; +import {generate_chart_config} from "./config.js"; import {chart_wrapper_template, chart_display_template} from "./addon-templates.js"; import { _datastore } from '../../js/datastore.js'; import {_loader} from "../../js/loader.js"; -import '../../third-party/js/chart.js'; -import '../../third-party/js/chartjs-adapter-luxon.min.js'; -import '../../third-party/js/hammer.min.js'; -import '../../third-party/js/chartjs-plugin-zoom.js'; -import '../../third-party/js/chartjs-plugin-streaming.js'; import {SiblingSet} from './sibling.js'; +import './vendor/chart.js'; +import './vendor/chartjs-adapter-luxon.min.js'; +import './vendor/hammer.min.js'; +// Note: these are modified versions of the original plugin files +import './modified-vendor/chartjs-plugin-zoom.js'; +import './modified-vendor/chartjs-plugin-streaming.js'; + function timeToDate(time) { let date = new Date((time.seconds * 1000) + (time.microseconds/1000)); return date; } - - - - - - - - - - - - - - - /** * Wrapper component to allow user add multiple charts to the same page */ @@ -44,8 +31,8 @@ Vue.component("chart-wrapper", { data: function () { return { locked: false, - counter: 0, // Auto incrementing id of each chart box - chartInstances: [], // list of chart objects + isHelpActive: true, + wrappers: [{"id": 0}], siblings: new SiblingSet() }; }, @@ -55,34 +42,16 @@ Vue.component("chart-wrapper", { * Add new chart */ addChart(type) { - this.chartInstances.push({'id': this.counter, 'type': type}); + this.wrappers.push({'id': this.counter}); this.counter += 1; }, /** * Remove chart with the given id */ deleteChart(id) { - const index = this.chartInstances.findIndex(f => f.id === id); - this.chartInstances.splice(index,1); + const index = this.wrappers.findIndex(f => f.id === id); + this.wrappers.splice(index,1); }, - /*siblingZoom(input) { - let chart = (input || {}).chart || (this.siblings || [null])[0]; - if (chart == null || !this.locked) { - return; - } - const other_siblings = this.siblings.filter((sibling) => {return sibling !== chart}); - for (let i = 0; i < other_siblings.length; i++) { - syncToSibling(chart, other_siblings[i]); - } - }, - sync(chart) { - // Find first sibling and bail if we are on first sibling - let prime = (this.siblings || [null])[0]; - if (!this.locked || prime == null || chart === prime) { - return; - } - syncToSibling(prime, chart); - }*/ } }); @@ -91,7 +60,7 @@ Vue.component("chart-wrapper", { */ Vue.component("chart-display", { template: chart_display_template, - props: ["id", "siblings", "siblingZoom", "siblingSync"], + props: ["id", "siblings"], data: function () { let names = Object.values(_loader.endpoints["channel-dict"].data).map((value) => {return value.full_name}); @@ -101,11 +70,9 @@ Vue.component("chart-display", { oldSelected: null, isCollapsed: false, - isHelpActive: false, + pause: false, - chartObj: null, - channelName: "", - showControlBtns: false, + chart: null, }; }, methods: { @@ -113,26 +80,17 @@ Vue.component("chart-display", { * Allow user to pause the chart stream */ toggleStreamFlow() { - const realtimeOpts = this.chartObj.options.scales.x.realtime; + const realtimeOpts = this.chart.options.scales.x.realtime; realtimeOpts.pause = !realtimeOpts.pause; - this.chartObj.update("none"); - this.siblings.pause(!realtimeOpts.pause); + this.pause = realtimeOpts.pause; + this.siblings.pause(realtimeOpts.pause); }, /** * Register a new chart object */ registerChart() { // If there is a chart object destroy it to reset the chart - if (this.chartObj !== null) { - _datastore.deregisterChannelConsumer(this); - this.chartObj.data.datasets.forEach((dataset) => { - dataset.data = []; - }); - this.chartObj.destroy(); - this.showControlBtns = false; - this.siblings.remove(this.chartObj); - } - + this.destroy(); _datastore.registerChannelConsumer(this); let config = generate_chart_config(this.selected); config.options.plugins.zoom.zoom.onZoom = this.siblings.syncToAll; @@ -141,40 +99,30 @@ Vue.component("chart-display", { config.options.scales.x.realtime.onRefresh = this.siblings.sync; this.showControlBtns = true; try { - this.chartObj = new Chart(this.$el.querySelector("#ds-line-chart"), config); + this.chart = new Chart(this.$el.querySelector("#ds-line-chart"), config); } catch(err) { // Todo. This currently suppresses the following bug error // See ChartJs bug report https://github.com/chartjs/Chart.js/issues/9368 } - this.siblings.add(this.chartObj); + this.siblings.add(this.chart); }, /** * Reset chart zoom back to default */ resetZoom() { - this.chartObj.resetZoom("none"); + this.chart.resetZoom("none"); this.siblings.reset(); }, - - /** - * Allow user to collapse or open chart display box - */ - toggleCollapseChart() { - this.isCollapsed = !this.isCollapsed; - }, - - /** - * Show or remove alert box when user click on the help button - */ - toggleShowHelp() { - this.isHelpActive = !this.isHelpActive; - }, - - /** - * Remove alert box when user click on the close button of help alert - */ - dismissHelp () { - this.isHelpActive = false; + destroy() { + // Guard against destroying that which is destroyed + if (this.chart == null) { + return; + } + _datastore.deregisterChannelConsumer(this); + this.chart.data.datasets.forEach((dataset) => {dataset.data = [];}); + this.chart.destroy(); + this.siblings.remove(this.chart); + this.chart = null; }, /** @@ -182,13 +130,12 @@ Vue.component("chart-display", { * @param {int} id of current chart instance known to the parent */ emitDeleteChart(id) { - if (this.chartObj) { - this.chartObj.destroy(); - } + this.destroy(); this.$emit('delete-chart', id); }, + sendChannels(channels) { - if (this.selected == null || this.chartObj == null) { + if (this.selected == null || this.chart == null) { return; } let name = this.selected; @@ -201,8 +148,8 @@ Vue.component("chart-display", { } ); - this.chartObj.data.datasets[0].data.push(...new_channels); - this.chartObj.update('quiet'); + this.chart.data.datasets[0].data.push(...new_channels); + this.chart.update('quiet'); } }, /** diff --git a/src/fprime_gds/flask/static/third-party/js/chartjs-plugin-streaming.js b/src/fprime_gds/flask/static/addons/chart-display/modified-vendor/chartjs-plugin-streaming.js similarity index 99% rename from src/fprime_gds/flask/static/third-party/js/chartjs-plugin-streaming.js rename to src/fprime_gds/flask/static/addons/chart-display/modified-vendor/chartjs-plugin-streaming.js index a915d450..dd97dd0c 100644 --- a/src/fprime_gds/flask/static/third-party/js/chartjs-plugin-streaming.js +++ b/src/fprime_gds/flask/static/addons/chart-display/modified-vendor/chartjs-plugin-streaming.js @@ -1,3 +1,11 @@ +/** + * NOTE: this file was modified by M Starch from its original version. This added following: + * + * - setRealtimeScale() + * - plugin.updateRangeFunctions.realtime = setRealtimeScale; + * + * and is dependent on a modified chartjs-plugin-zoom.js. + */ /*! * chartjs-plugin-streaming v2.0.0 * https://nagix.github.io/chartjs-plugin-streaming diff --git a/src/fprime_gds/flask/static/third-party/js/chartjs-plugin-zoom.js b/src/fprime_gds/flask/static/addons/chart-display/modified-vendor/chartjs-plugin-zoom.js similarity index 99% rename from src/fprime_gds/flask/static/third-party/js/chartjs-plugin-zoom.js rename to src/fprime_gds/flask/static/addons/chart-display/modified-vendor/chartjs-plugin-zoom.js index 09564def..e497c7c5 100644 --- a/src/fprime_gds/flask/static/third-party/js/chartjs-plugin-zoom.js +++ b/src/fprime_gds/flask/static/addons/chart-display/modified-vendor/chartjs-plugin-zoom.js @@ -1,3 +1,10 @@ +/** + * NOTE: this file was modified by M Starch from its original version. This added following: + * + * - doUpdateRange function following the pattern of doZoom to allow for plugins to modify updateRange behavior as + * in line with doZoom's dispatch to plugins. + */ + /*! * chartjs-plugin-zoom v1.1.1 * undefined diff --git a/src/fprime_gds/flask/static/third-party/js/chart.js b/src/fprime_gds/flask/static/addons/chart-display/vendor/chart.js similarity index 100% rename from src/fprime_gds/flask/static/third-party/js/chart.js rename to src/fprime_gds/flask/static/addons/chart-display/vendor/chart.js diff --git a/src/fprime_gds/flask/static/third-party/js/chartjs-adapter-luxon.min.js b/src/fprime_gds/flask/static/addons/chart-display/vendor/chartjs-adapter-luxon.min.js similarity index 100% rename from src/fprime_gds/flask/static/third-party/js/chartjs-adapter-luxon.min.js rename to src/fprime_gds/flask/static/addons/chart-display/vendor/chartjs-adapter-luxon.min.js diff --git a/src/fprime_gds/flask/static/third-party/js/hammer.min.js b/src/fprime_gds/flask/static/addons/chart-display/vendor/hammer.min.js similarity index 100% rename from src/fprime_gds/flask/static/third-party/js/hammer.min.js rename to src/fprime_gds/flask/static/addons/chart-display/vendor/hammer.min.js diff --git a/src/fprime_gds/flask/static/addons/enabled.js b/src/fprime_gds/flask/static/addons/enabled.js index a411eee7..193cfd65 100644 --- a/src/fprime_gds/flask/static/addons/enabled.js +++ b/src/fprime_gds/flask/static/addons/enabled.js @@ -1,3 +1,3 @@ // Add addon imports here, try used to prevent errors from crashing GDS import "./image-display/addon.js" -import "./chart-display/chart-addon.js" +import "./chart-display/addon.js" diff --git a/src/fprime_gds/flask/static/addons/sequencer/addon-template.js b/src/fprime_gds/flask/static/addons/sequencer/addon-template.js new file mode 100644 index 00000000..e69de29b diff --git a/src/fprime_gds/flask/static/addons/sequencer/addon.js b/src/fprime_gds/flask/static/addons/sequencer/addon.js new file mode 100644 index 00000000..e69de29b