performance-test/src/views/performance/components/PlotlyCharts.vue

<!--
 * @Author: your name
 * @Date: 2024-08-05 17:19:47
 * @LastEditTime: 2024-08-05 17:27:32
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/plotlyCharts.vue
-->
<template>
  <div id="plotly-chart"></div>
</template>

<script>
import Plotly from "plotly.js-dist";

export default {
  name: "PowerCurvePlot",
  mounted() {
    const data = {
      analysisTypeCode: "power_curve",
      graphType: "scatter",
      data: [
        {
          engineName: "#1",
          windSpeed: [
            3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
          ],
          power: [
            6.06, 76.54, 184.1, 345.94, 574.4, 879.9, 1274.73, 1664.94, 1942.96,
            2004.78, 2004.78, 2004.78, 2004.78, 2004.78, 2004.78, 2004.78,
            2004.78, 2004.78,
          ],
        },
        {
          engineName: "#2",
          windSpeed: [
            2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10,
            10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5,
          ],
          power: [
            2, 9.23, 100.12, 155.51, 230.09, 400.15, 500.95, 689.55, 961.09,
            1257.53, 1346.02, 1479.78, 1528.01, 1618.52, 1789.09, 1819.35,
            1920.29, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52,
            2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52,
            2053.52,
          ],
        },
      ],
    };

    const plotlyData = data.data.map((engine) => ({
      x: engine.windSpeed,
      y: engine.power,
      mode: "lines",
      name: engine.engineName,
    }));

    const layout = {
      title: "Power Curve",
      xaxis: { title: "Wind Speed (m/s)" },
      yaxis: { title: "Power (kW)" },
    };

    Plotly.newPlot("plotly-chart", plotlyData, layout);
  },
};
</script>

<style scoped>
#plotly-chart {
  width: 100%;
  height: 100%;
}
</style>