Need some help on plotting

[ZishuoFeng]

Hello, everyone! I really need some help here. I have been dealing with the openMCT framework and developing the front end. I am currently stuck with a problem that I want to add three vertical lines in the plotting view, indicating the data interaction time delay. To be more specific, I want to have three vertical lines and they are constantly updated as the time goes by on the X axis. I have tried to change the code in so many places (MctChart, XAxis, overlayplot, and so on), but no change is shown in the plotting view. I don't know if it was me that didn't properly change the code or if I need to change some logic somewhere else. Can anyone help me? (An image of the final effect is attached.)

[ozyx]

Hi @ZishuoFeng ,

Are you able to share your code and/or any console errors that might be appearing?

[ZishuoFeng]

I was trying to make some changes to XAxis.vue. I added a data called "verticalLines", indicating the X value I wanted to insert lines, and tried some functions in the method to draw them out before but it didn't work. I found no errors appear in the console, and my modifications didn't show in the graphs, so I wonder if I’m modifying the right part of the logic. Can you help identify where to change the graph drawing logic?

<script>
import MctTicks from "../MctTicks.vue";
import eventHelpers from '../lib/eventHelpers';
import configStore from "../configuration/ConfigStore";

export default {
    components: {
        MctTicks
    },
    inject: ['openmct', 'domainObject'],
    props: {
        seriesModel: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            selectedXKeyOptionKey: '',
            xKeyOptions: [],
            xAxis: {},
            loaded: false,
            xAxisLabel: '',
            verticalLines: []
        };
    },
    mounted() {
        eventHelpers.extend(this);
        this.xAxis = this.getXAxisFromConfig();
        this.loaded = true;
        this.setUpXAxisOptions();
        this.openmct.time.on('timeSystem', this.syncXAxisToTimeSystem);
        this.listenTo(this.xAxis, 'change', this.setUpXAxisOptions);
    },
    beforeDestroy() {
        this.openmct.time.off('timeSystem', this.syncXAxisToTimeSystem);
    },
    methods: {
        isEnabledXKeyToggle() {
            const isSinglePlot = this.xKeyOptions && this.xKeyOptions.length > 1 && this.seriesModel;
            const isFrozen = this.xAxis.get('frozen');
            const inRealTimeMode = this.openmct.time.clock();

            return isSinglePlot && !isFrozen && !inRealTimeMode;
        },
        getXAxisFromConfig() {
            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
            let config = configStore.get(configId);
            if (config) {
                return config.xAxis;
            }
        },
        toggleXKeyOption() {
            const selectedXKey = this.selectedXKeyOptionKey;
            const seriesData = this.seriesModel.getSeriesData();
            const dataForSelectedXKey = seriesData
                ? seriesData[0][selectedXKey]
                : undefined;

            if (dataForSelectedXKey !== undefined) {
                this.xAxis.set('key', selectedXKey);
            } else {
                this.openmct.notifications.error('Cannot change x-axis view as no data exists for this view type.');
                const xAxisKey = this.xAxis.get('key');
                this.selectedXKeyOptionKey = this.getXKeyOption(xAxisKey).key;
            }
        },
        getXKeyOption(key) {
            return this.xKeyOptions.find(option => option.key === key);
        },
        syncXAxisToTimeSystem(timeSystem) {
            const xAxisKey = this.xAxis.get('key');
            if (xAxisKey !== timeSystem.key) {
                this.xAxis.set('key', timeSystem.key);
                this.xAxis.resetSeries();
                this.setUpXAxisOptions();
            }
        },
        setUpXAxisOptions() {
            const xAxisKey = this.xAxis.get('key');

            this.xKeyOptions = this.seriesModel.metadata
                .valuesForHints(['domain'])
                .map(function (o) {
                    return {
                        name: o.name,
                        key: o.key
                    };
                });
            this.xAxisLabel = this.xAxis.get('label');
            this.selectedXKeyOptionKey = this.getXKeyOption(xAxisKey).key;
        },
        onTickWidthChange(width) {
            this.$emit('tickWidthChanged', width);
        }
    }
};
</script>

[shefalijoshi]

@ZishuoFeng
I believe you need to look at the code in MctTicks.vue.
For example, this section of the Vue template draws the grid lines in the background of plots:
<!-- grid lines follow --> <template v-if="position === 'right'"> <div v-for="(tick, i) in ticks" :key="'tick-right' + i" class="gl-plot-hash hash-v" :style="{ right: (100 * (max - tick.value)) / interval + '%', height: '100%' }" ></div> </template>

You could add another section with a custom position v-if="position === 'vertical-markers'" and use your verticalLines data to draw those lines.
Let me know if you would like a more detailed explanation here. Cheers!