evcc-io/assets/js/components/ChargingPlanPreview.story.vue

100 lines
2.5 KiB
Vue

<script setup>
import ChargingPlanPreview from "./ChargingPlanPreview.vue";
const now = new Date();
function createDate(hoursFromNow) {
const result = new Date(now.getTime());
result.setHours(result.getHours() + hoursFromNow);
return result;
}
function createRate(price, hoursFromNow, durationHours = 1) {
const start = new Date(now.getTime());
start.setHours(start.getHours() + hoursFromNow);
start.setMinutes(0);
start.setSeconds(0);
start.setMilliseconds(0);
const end = new Date(start.getTime());
end.setHours(start.getHours() + durationHours);
end.setMinutes(0);
end.setSeconds(0);
end.setMilliseconds(0);
return { start: start.toISOString(), end: end.toISOString(), price };
}
const co2 = {
rates: [
545, 518, 545, 518, 0, 545, 527, 527, 536, 518, 400, 336, 336, 339, 344, 336, 336, 336, 372,
400, 555, 555, 545, 555, 564, 545, 555, 545, 536, 545, 527, 536, 518, 545, 509, 336, 336,
336,
].map((price, i) => createRate(price, i)),
duration: 8695,
plan: [createRate(213, 4), createRate(336, 11), createRate(336, 12)],
smartCostType: "co2",
targetTime: createDate(14),
};
const fixed = {
rates: [createRate(0.442, 0, 50)],
duration: 8695,
plan: [createRate(0.442, 12, 3)],
smartCostType: "price",
currency: "EUR",
targetTime: createDate(14),
};
const zoned = {
rates: [
createRate(3.72, 0, 4),
createRate(2.39, 4, 12),
createRate(3.72, 16, 12),
createRate(2.39, 28, 12),
createRate(3.72, 40, 12),
],
duration: 8695,
plan: [createRate(2.39, 13, 3)],
smartCostType: "price",
currency: "DKK",
targetTime: createDate(17),
};
const unknown = {
rates: co2.rates.slice(0, 16),
duration: 8695,
plan: [createRate(213, 4), createRate(336, 11), createRate(336, 12)],
smartCostType: "co2",
targetTime: createDate(14),
};
const dynamic = {
rates: [
0.12, 0.15, 0, -0.05, -0.11, -0.24, -0.08, 0.12, 0.25, 0.29, 0.22, 0.31, 0.31, 0.33,
].map((price, i) => createRate(price, i)),
duration: 8695,
plan: [createRate(0.23, 2, 5)],
smartCostType: "price",
currency: "EUR",
targetTime: createDate(13),
};
</script>
<template>
<Story title="ChargingPlanPreview">
<Variant title="co2">
<ChargingPlanPreview v-bind="co2" />
</Variant>
<Variant title="fixed">
<ChargingPlanPreview v-bind="fixed" />
</Variant>
<Variant title="zoned">
<ChargingPlanPreview v-bind="zoned" />
</Variant>
<Variant title="unknown">
<ChargingPlanPreview v-bind="unknown" />
</Variant>
<Variant title="dynamic">
<ChargingPlanPreview v-bind="dynamic" />
</Variant>
</Story>
</template>