evcc-io/assets/js/components/Optimize/OptimizeHeader.stories.ts
2026-08-09 10:37:22 +02:00

50 lines
1.5 KiB
TypeScript

import OptimizeHeader from "./OptimizeHeader.vue";
import { CURRENCY, OptimizationStatus } from "@/types/evcc";
import type { Meta, StoryFn } from "@storybook/vue3";
export default {
title: "Optimize/OptimizeHeader",
component: OptimizeHeader,
parameters: {
layout: "padded",
},
} as Meta<typeof OptimizeHeader>;
const base = {
updated: new Date(Date.now() - 2 * 60 * 1000).toISOString(),
horizonHours: 47,
currency: CURRENCY.EUR,
chargingStrategies: [
"charge_before_export",
"attenuate_demand_peaks",
"attenuate_feedin_peaks",
"attenuate_grid_peaks",
"none",
],
selectedStrategy: "charge_before_export",
pending: false,
};
const Template: StoryFn<typeof OptimizeHeader> = (args) => ({
components: { OptimizeHeader },
setup() {
return { args };
},
template: '<div class="container px-0"><OptimizeHeader v-bind="args" /></div>',
});
// you pay the grid (normal case): neutral color
export const Payment = Template.bind({});
Payment.args = { ...base, status: OptimizationStatus.OPTIMAL, netCost: 12.4 };
// solar surplus, you receive a credit: green, signed
export const Credit = Template.bind({});
Credit.args = { ...base, status: OptimizationStatus.OPTIMAL, netCost: -3.8 };
// usable but not proven optimal plan
export const Feasible = Template.bind({});
Feasible.args = { ...base, status: OptimizationStatus.FEASIBLE, netCost: 12.4 };
// solver could not produce a plan
export const Infeasible = Template.bind({});
Infeasible.args = { ...base, status: OptimizationStatus.INFEASIBLE, netCost: 0 };