there are no up to date vue versions of plotly.js, so here is the version for this repository.

• PlotlyChart.vue is located in src/components.
• refer to https://plotly.com/javascript/ for documentation.

<template>
  <PlotlyChart :data="data" :config="{ displayModeBar: false }" :layout="layout" :key="componentKey" />
</template>
<script setup>
// ps this example is not functional
import PlotlyChart from '@/components/PlotlyChart.vue';

const data = ref(); // see below
const layout = ref(); // see below

const componentKey = ref(0); // this is meant to change upon every update so the chart gets force updates. not sure if there are workarounds. 
</script>

• required: yes
• datatype: array of object(s), minimum 1 object
  • type: chart data type (ex. scatter, bar, ternary, etc), required
  • name: name of dataset
  • the data, can exist as various different object keys (most common tend to be xyz)
  • other customization options such as marker can be used
• for data structure specific to a type of chart, refer to plotly docs.

const data = ref([
    {
      type: "scatter", // on most charts, you are able to 
      x: ["1", "1"],
      y: [0.5, 0.05],
      name: "dataset",
      marker: {
        color: "#FFA500",
      },
    },
  ]);

• it would be preferred that the creation of the data reactive variable is done with a function. if there are updates, it is easier to do so (unless better practices can be used).

• required: no, but preferred
• datatype: object of various properties
• see plotly docs https://plotly.com/javascript/reference/layout/
• options:

const layout = ref({
    title: "Water pH",
    margin: {
      t: 10,
      r: 40,
    },
    height: 70,
    xaxis: {
      fixedrange: true,
    },
  });

charts will adhere to their own color scheme. throughout the repository, making all charts have the same theme as the current website settings is done with a function that takes styles as an input. example function:

function phOptions(styles) {
  const layout = {
    plot_bgcolor: styles.surfaceCard,
    paper_bgcolor: styles.surfaceCard,
    font: {
      size: 10,
      color: styles.textColor,
      family: styles.font,
    },
  };

  return layout;
}

the above function takes a styles input, which is this function throughout various vue files:

import { useLayout } from '@/layout/composables/layout';

function getStyles() {
    const documentStyle = getComputedStyle(document.documentElement);
    return {
        textColor: documentStyle.getPropertyValue('--p-text-color'),
        textColorSecondary: documentStyle.getPropertyValue('--p-text-muted-color'),
        surfaceBorder: documentStyle.getPropertyValue('--p-content-border-color'),
        surfaceCard: documentStyle.getPropertyValue('--surface-card'),
        font: documentStyle.getPropertyValue('font-family')
    };
}

this function can be customized to have more or less documentstyles based on the chart theming needs. (it is adapted from the charts on sakai-vue template, so if any improvements can be made please do)

• required: no, but preferred
• datatype: object of various properties
• see plotly docs https://plotly.com/javascript/configuration-options/

{ displayModeBar: false }