@nside/wefa 0.1.0 → 0.2.0

package/src/components/PlotlyComponent/PlotlyFromTableComponent.spec.ts

@@ -20,8 +20,12 @@ const sampleTableData = [
 ]
 
 const basicConfig = {
-  x: 'month',
-  y: 'consumption',
+  data: [
+    {
+      xKey: 'month',
+      yKey: 'consumption',
+    },
+  ],
   layout: {
     title: 'Test Chart',
     xaxis: { title: 'Month' },
@@ -87,13 +91,15 @@ describe('PlotlyFromTableComponent', () => {
 
   it('applies trace configuration correctly', () => {
     const configWithTrace = {
-      x: 'month',
-      y: 'consumption',
-      traceConfig: {
-        type: 'bar',
-        name: 'Monthly Consumption',
-        marker: { color: 'blue' },
-      },
+      data: [
+        {
+          xKey: 'month',
+          yKey: 'consumption',
+          type: 'bar',
+          name: 'Monthly Consumption',
+          marker: { color: 'blue' },
+        },
+      ],
     }
 
     const wrapper = mount(PlotlyFromTableComponent, {
@@ -135,8 +141,12 @@ describe('PlotlyFromTableComponent', () => {
 
   it('passes config configuration to PlotlyComponent', () => {
     const configWithPlotlyConfig = {
-      x: 'month',
-      y: 'consumption',
+      data: [
+        {
+          xKey: 'month',
+          yKey: 'consumption',
+        },
+      ],
       config: {
         displayModeBar: false,
         responsive: true,
@@ -161,8 +171,7 @@ describe('PlotlyFromTableComponent', () => {
 
   it('handles missing columns gracefully', () => {
     const configWithMissingColumn = {
-      x: 'nonexistent',
-      y: 'consumption',
+      data: [{ xKey: 'nonexistent', yKey: 'consumption' }],
     }
 
     const wrapper = mount(PlotlyFromTableComponent, {
@@ -221,8 +230,7 @@ describe('PlotlyFromTableComponent', () => {
 
     // Change to different columns
     const newConfig = {
-      x: 'temperature',
-      y: 'consumption',
+      data: [{ xKey: 'temperature', yKey: 'consumption' }],
     }
 
     await wrapper.setProps({ config: newConfig })
@@ -263,8 +271,7 @@ describe('PlotlyFromTableComponent', () => {
     ]
 
     const numericConfig = {
-      x: 'x_val',
-      y: 'y_val',
+      data: [{ xKey: 'x_val', yKey: 'y_val' }],
     }
 
     const wrapper = mount(PlotlyFromTableComponent, {

package/src/components/PlotlyComponent/PlotlyFromTableComponent.stories.ts

@@ -66,12 +66,27 @@ const timeSeriesData = [
   { timestamp: '2024-01-01T05:00:00Z', power: 1080, voltage: 232 },
 ]
 
+const timeSeriesData2 = [
+  { timestamp: '2024-01-01T00:00:00Z', forecast: 1200, actual: 1100 },
+  { timestamp: '2024-01-01T01:00:00Z', forecast: 1120, actual: 1050 },
+  { timestamp: '2024-01-01T02:00:00Z', forecast: 1100, actual: 1250 },
+  { timestamp: '2024-01-01T03:00:00Z', forecast: 1050, actual: 1200 },
+  { timestamp: '2024-01-01T04:00:00Z', forecast: 1100, actual: 1250 },
+  { timestamp: '2024-01-01T05:00:00Z', forecast: 1080, actual: 1200 },
+  { timestamp: '2024-01-01T06:00:00Z', forecast: 1000 },
+  { timestamp: '2024-01-01T07:00:00Z', forecast: 1080 },
+]
+
 export const BasicLineChart: Story = {
   args: {
     value: energyConsumptionData,
     config: {
-      x: 'month',
-      y: 'consumption',
+      data: [
+        {
+          xKey: 'month',
+          yKey: 'consumption',
+        },
+      ],
       layout: {
         title: { text: 'plot.title.text', subtitle: { text: 'plot.title.subtitle' } },
         xaxis: { title: { text: 'plot.xaxis.title' } },
@@ -107,14 +122,16 @@ export const ScatterPlot: Story = {
   args: {
     value: energyConsumptionData,
     config: {
-      x: 'temperature',
-      y: 'consumption',
-      traceConfig: {
-        mode: 'markers',
-        type: 'scatter',
-        name: 'Temperature vs Consumption',
-        marker: { size: 8, color: 'blue' },
-      },
+      data: [
+        {
+          xKey: 'temperature',
+          yKey: 'consumption',
+          mode: 'markers',
+          type: 'scatter',
+          name: 'Temperature vs Consumption',
+          marker: { size: 8, color: 'blue' },
+        },
+      ],
       layout: {
         title: { text: 'Energy Consumption vs Temperature' },
         xaxis: { title: { text: 'Temperature (°C)' } },
@@ -134,13 +151,15 @@ export const BarChart: Story = {
   args: {
     value: salesData,
     config: {
-      x: 'product',
-      y: 'sales',
-      traceConfig: {
-        type: 'bar',
-        name: 'Product Sales',
-        marker: { color: 'green' },
-      },
+      data: [
+        {
+          xKey: 'product',
+          yKey: 'sales',
+          type: 'bar',
+          name: 'Product Sales',
+          marker: { color: 'green' },
+        },
+      ],
       layout: {
         title: { text: 'Product Sales by Category' },
         xaxis: { title: { text: 'Product' } },
@@ -160,14 +179,16 @@ export const TimeSeriesChart: Story = {
   args: {
     value: timeSeriesData,
     config: {
-      x: 'timestamp',
-      y: 'power',
-      traceConfig: {
-        type: 'scatter',
-        mode: 'lines+markers',
-        name: 'Power Output',
-        line: { color: 'red' },
-      },
+      data: [
+        {
+          xKey: 'timestamp',
+          yKey: 'power',
+          type: 'scatter',
+          mode: 'lines+markers',
+          name: 'Power Output',
+          line: { color: 'red' },
+        },
+      ],
       layout: {
         title: { text: 'Power Output Over Time' },
         xaxis: {
@@ -186,22 +207,64 @@ export const TimeSeriesChart: Story = {
   },
 }
 
+export const MultipleTraces: Story = {
+  args: {
+    value: timeSeriesData2,
+    config: {
+      data: [
+        {
+          xKey: 'timestamp',
+          yKey: 'forecast',
+          type: 'scatter',
+          mode: 'lines+markers',
+          name: 'Forecast',
+          line: { color: 'red' },
+        },
+        {
+          xKey: 'timestamp',
+          yKey: 'actual',
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Actual',
+          line: { color: 'green', shape: 'spline' },
+        },
+      ],
+      layout: {
+        title: { text: 'Power Forecast and Actuals' },
+        xaxis: {
+          title: { text: 'Time' },
+          type: 'date',
+        },
+        yaxis: { title: { text: 'Power (W)' } },
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitFor(() => {
+      expect(canvas.getByText('Power Forecast and Actuals')).toBeInTheDocument()
+    })
+  },
+}
+
 export const CustomConfiguration: Story = {
   args: {
     value: salesData,
     config: {
-      x: 'sales',
-      y: 'profit',
-      traceConfig: {
-        type: 'scatter',
-        mode: 'markers',
-        name: 'Sales vs Profit',
-        marker: {
-          size: 12,
-          color: 'purple',
-          opacity: 0.7,
+      data: [
+        {
+          xKey: 'sales',
+          yKey: 'profit',
+          type: 'scatter',
+          mode: 'markers',
+          name: 'Sales vs Profit',
+          marker: {
+            size: 12,
+            color: 'purple',
+            opacity: 0.7,
+          },
         },
-      },
+      ],
       layout: {
         title: { text: 'Sales vs Profit Analysis' },
         xaxis: { title: { text: 'Units Sold' } },

package/src/components/PlotlyComponent/PlotlyFromTableComponent.vue

@@ -9,10 +9,15 @@ import PlotlyComponent from '@/components/PlotlyComponent/PlotlyComponent.vue'
 import { useI18nLib } from '@/locales'
 import { applyTranslations } from '@/utils/translations'
 
+// Ideally we'd like to Omit 'x' and 'y' from DataFromTable,
+// but this causes issues with optional fields coming from Data.
+export type DataFromTable = {
+  xKey: string
+  yKey: string
+} & Data
+
 export interface PlotlyFromTableComponentConfig {
-  x: string
-  y: string
-  traceConfig?: Partial<Data>
+  data: DataFromTable[]
   layout?: Partial<Layout>
   config?: Partial<Config>
 }
@@ -60,12 +65,15 @@ const processedLayout: ComputedRef<Partial<Layout> | undefined> = computed(() =>
 )
 
 const plotlyData: ComputedRef<Data[]> = computed(() => {
-  return [
-    {
-      x: value.map((row) => row[config.x]),
-      y: value.map((row) => row[config.y]),
-      ...(config.traceConfig ?? {}),
-    },
-  ] as Data[]
+  return config.data.map((trace) => {
+    const { xKey, yKey, ...other } = trace
+    return {
+      ...other,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      x: value.map((row) => row[xKey] as any),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      y: value.map((row) => row[yKey] as any),
+    }
+  })
 })
 </script>

package/src/components/TableComponent/TableComponent.spec.ts

@@ -1,4 +1,3 @@
-// cspell:ignore datatable
 import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import TableComponent from './TableComponent.vue'

package/src/network/typedApiClient.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable jsdoc/escape-inline-tags */
 // Typed API Client, based on TanStack useQuery and useMutation
 // Integrates with OpenAPI specs using @hey-api/openapi-ts
 
@@ -16,8 +17,8 @@ import type { Ref } from 'vue'
  * Attaches the axios singleton to an OpenAPI Client/SDK,
  * autogenerated by @hey-api/openapi-ts.
  * You need to call this during application startup to have a working OpenAPI Client
- * E.g if you're running : npx @hey-api/openapi-ts --input .path/to/openapi.yaml --output ./src/openapi
- * Then you will have your generated code in @/openapi, and then you can :
+ * E.g., if you're running: npx @hey-api/openapi-ts --input .path/to/openapi.yaml --output ./src/openapi
+ * Then you will have your generated code in @/openapi, and then you can:
  * import { client } from '@/openapi/client.gen'
  * import { typedApiClient } from '@nside/wefa/network'
  * typedApiClient.setupOpenApiClient(client)

package/src/plugins/legalConsent/views/__tests__/LegalConsent.test.ts

@@ -1,9 +1,14 @@
-import { describe, it, expect, vi, beforeEach, type MockInstance } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import { nextTick } from 'vue'
 
 const flushPromises = () => new Promise((resolve) => setTimeout(resolve))
 
+// Minimal local type for a Vitest spy used in this file
+// Avoids importing incompatible vitest types across versions and satisfies ESLint no-explicit-any
+// Use the shape from vi.fn() to ensure compatibility with spies
+type PushSpy = Pick<ReturnType<typeof vi.fn>, 'mock' | 'mockResolvedValue'>
+
 // Mock i18n util to return the key itself for easier assertions
 vi.mock('@/locales', () => ({
   useI18nLib: () => ({ t: (key: string) => key }),
@@ -24,8 +29,8 @@ vi.mock('@/plugins/legalConsent', () => ({
 }))
 
 // Mock PrimeVue toast and confirm composables
-const toastAddSpy: ReturnType<typeof vi.fn> = vi.fn()
-const confirmRequireSpy: ReturnType<typeof vi.fn> = vi.fn()
+const toastAddSpy = vi.fn()
+const confirmRequireSpy = vi.fn()
 vi.mock('primevue/usetoast', () => ({
   useToast: () => ({ add: (...args: unknown[]) => toastAddSpy(...args) }),
 }))
@@ -63,7 +68,7 @@ import LegalConsent from '../LegalConsent.vue'
 
 describe('LegalConsent.vue', () => {
   let router: Router
-  let pushSpy: MockInstance
+  let pushSpy: PushSpy
 
   beforeEach(() => {
     acceptLegalConsentSpy.mockReset()

package/src/utils/componentRegistry.ts

@@ -1,4 +1,3 @@
-// cspell:ignore inputtext inputnumber
 import { defineAsyncComponent } from 'vue'
 
 import type { Component } from 'vue'