-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New feature: enter quarter-hourly electricity values using a textarea input.
- Loading branch information
Showing
17 changed files
with
2,031 additions
and
3,511 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| import {FunctionComponent} from "react" | ||
| import {useNavigate} from "react-router-dom" | ||
| import {Button} from "primereact/button" | ||
| import { SiMicrosoftexcel } from "react-icons/si"; | ||
| import {PiMicrosoftExcelLogoFill} from "react-icons/pi" | ||
|
|
||
| export const ImportExcelButton: FunctionComponent = () => { | ||
| const navigate = useNavigate() | ||
|
|
||
| return ( | ||
| <Button onClick={() => navigate("/admin/import-excel")} aria-label="Importeer Excel"> | ||
| <SiMicrosoftexcel /> | ||
| <Button onClick={() => navigate("/admin/import-excel")} aria-label="Importeer Excel" style={{padding: "0 1em"}}> | ||
| <PiMicrosoftExcelLogoFill size="1.6rem" /> | ||
| | ||
| Importeer Excel | ||
| </Button> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 26 additions & 28 deletions
54
frontend/src/components/company-survey-v2/generic/label-row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,31 @@ | ||
| import {css} from '@emotion/react' | ||
| import {PropsWithChildren} from 'react' | ||
| import {FunctionComponent, PropsWithChildren} from "react" | ||
| import {flash} from '../flash' | ||
|
|
||
| export const LabelRow = ({label, children}: PropsWithChildren<{label: any}>) => { | ||
| return ( | ||
| <label css={[css` | ||
| display: flex; | ||
| `, flash]}> | ||
| <div css={css` | ||
| text-align: right; | ||
| width: 50%; | ||
| padding: 0.3rem; | ||
| export const LabelRow: FunctionComponent<PropsWithChildren<{ label: any }>> = ({label, children}) => ( | ||
| <label css={[css` | ||
| display: flex; | ||
| `, flash]}> | ||
| <div css={css` | ||
| text-align: right; | ||
| width: 50%; | ||
| padding: 0.3rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| `}> | ||
| {label} | ||
| </div> | ||
| <div css={css` | ||
| width: 50%; | ||
| padding: 0.3rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| `}> | ||
| {label} | ||
| </div> | ||
| <div css={css` | ||
| width: 50%; | ||
| padding: 0.3rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| `}> | ||
| {children} | ||
| </div> | ||
| </label> | ||
| ) | ||
| } | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| `}> | ||
| {children} | ||
| </div> | ||
| </label> | ||
| ) |
41 changes: 41 additions & 0 deletions
41
frontend/src/components/company-survey-v2/time-series/time-series-electricity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import {targetYear} from "./time-series-util" | ||
| import {TimeSeriesTextareaAdapter} from "./time-series-textarea-adapter" | ||
| import {FunctionComponent} from "react" | ||
| import {UseFormReturn} from "react-hook-form" | ||
| import {TimeSeriesType} from "zero-zummon" | ||
|
|
||
| export const TimeSeriesElectricity: FunctionComponent<{form: UseFormReturn, prefix: string}> = ({form, prefix}) => { | ||
| return ( | ||
| <> | ||
| <h2>2. Kwartierwaarden electriciteit</h2> | ||
|
|
||
| <p>Richtlijnen</p> | ||
|
|
||
| <ul> | ||
| <li>Geef waarden op van het gehele jaar {targetYear}.</li> | ||
| <li>De eerste waarde betreft het verbruik in het kwartier van 1 januari {targetYear} van 00:00 | ||
| tot 00:15 CET. | ||
| </li> | ||
| <li>De laatste waarde betreft het verbruik in het kwartier van 31 december {targetYear} 23:45 | ||
| tot 1 januari {targetYear + 1} om 00:00 CET. | ||
| </li> | ||
| <li>Een langere periode mag.</li> | ||
| </ul> | ||
| <h3>Kwartierwaarden levering</h3> | ||
| <TimeSeriesTextareaAdapter | ||
| timeSeries={form.watch(`${prefix}.quarterHourlyDelivery_kWh`)} | ||
| timeSeriesType={TimeSeriesType.ELECTRICITY_DELIVERY} | ||
| setTimeSeries={timeSeries => form.setValue(`${prefix}.quarterHourlyDelivery_kWh`, timeSeries)} /> | ||
| <h3>Kwartierwaarden teruglevering</h3> | ||
| <TimeSeriesTextareaAdapter | ||
| timeSeries={form.watch(`${prefix}.quarterHourlyFeedIn_kWh`)} | ||
| timeSeriesType={TimeSeriesType.ELECTRICITY_FEED_IN} | ||
| setTimeSeries={timeSeries => form.setValue(`${prefix}.quarterHourlyFeedIn_kWh`, timeSeries)} /> | ||
| <h3>Kwartierwaarden brutoproductiemeter</h3> | ||
| <TimeSeriesTextareaAdapter | ||
| timeSeries={form.watch(`${prefix}.quarterHourlyProduction_kWh`)} | ||
| timeSeriesType={TimeSeriesType.ELECTRICITY_PRODUCTION} | ||
| setTimeSeries={timeSeries => form.setValue(`${prefix}.quarterHourlyProduction_kWh`, timeSeries)} /> | ||
| </> | ||
| ) | ||
| } |
27 changes: 27 additions & 0 deletions
27
frontend/src/components/company-survey-v2/time-series/time-series-textarea-adapter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import {FunctionComponent} from "react" | ||
| import {targetYear} from "./time-series-util" | ||
| import {TimeSeries, TimeSeriesType, timeSeriesFromJson, createEmptyTimeSeriesForYear} from "zero-zummon" | ||
| import {TimeSeriesTextarea} from "./time-series-textarea" | ||
|
|
||
| /** | ||
| * Has a plain JS object as input and output. | ||
| * Converts that objects to a {@link TimeSeries} domain object for use in {@link TimeSeriesTextarea} | ||
| */ | ||
| export const TimeSeriesTextareaAdapter: FunctionComponent<{ | ||
| timeSeries?: any, | ||
| timeSeriesType?: TimeSeriesType, | ||
| setTimeSeries?: (obj: any) => void | ||
| }> = ({ | ||
| timeSeries, | ||
| timeSeriesType = TimeSeriesType.ELECTRICITY_DELIVERY, | ||
| setTimeSeries = console.log, | ||
| }) => { | ||
| const timeSeriesDomainObject = timeSeries ? timeSeriesFromJson(JSON.stringify(timeSeries)) : createEmptyTimeSeriesForYear(timeSeriesType, targetYear) | ||
|
|
||
| return ( | ||
| <TimeSeriesTextarea | ||
| timeSeries={timeSeriesDomainObject} setTimeSeries={(timeSeries: TimeSeries) => { | ||
| setTimeSeries(JSON.parse(timeSeries.toJson())) | ||
| }} /> | ||
| ) | ||
| } |
80 changes: 80 additions & 0 deletions
80
frontend/src/components/company-survey-v2/time-series/time-series-textarea.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import {LocalDateTime, ZonedDateTime, ZoneId} from "@js-joda/core" | ||
| import "@js-joda/timezone/dist/js-joda-timezone-2017-2027.esm.js" | ||
| import {FunctionComponent, useState} from "react" | ||
| import {TimeSeries} from "zero-zummon" | ||
| import {InputTextarea} from "primereact/inputtextarea" | ||
| import {LabelRow} from "../generic/label-row" | ||
| import {displayTimeZone, kotlinInstantToJsJodaInstant, prettyPrint} from "./time-series-util" | ||
| import {Dropdown} from "primereact/dropdown" | ||
| import {InputText} from "primereact/inputtext" | ||
|
|
||
| const placeholder = ` | ||
| bijvoorbeeld: | ||
| 0.23 | ||
| 0,23 | ||
| .23 | ||
| 23 | ||
| 2.3 | ||
| `.trim() | ||
|
|
||
| const kwhNumberFormatter = new Intl.NumberFormat("nl-NL", {maximumFractionDigits: 1}) | ||
|
|
||
| export const TimeSeriesTextarea: FunctionComponent<{timeSeries: TimeSeries, setTimeSeries: (t: TimeSeries) => void}> = ({timeSeries, setTimeSeries}) => { | ||
| const [internalTimeSeries, setInternalTimeSeries] = useState(timeSeries) | ||
|
|
||
| const setTimeSeriesImpl = (timeSeries: TimeSeries) => { | ||
| setInternalTimeSeries(timeSeries) | ||
| if (timeSeries.isValid()) { | ||
| setTimeSeries(timeSeries) | ||
| } | ||
| } | ||
|
|
||
| const localStart = kotlinInstantToJsJodaInstant(internalTimeSeries.start) | ||
| .atZone(ZoneId.of(displayTimeZone)) | ||
| .toLocalDateTime() | ||
|
|
||
| const end = kotlinInstantToJsJodaInstant(internalTimeSeries.calculateEnd()) | ||
|
|
||
| return ( | ||
| <> | ||
| <LabelRow label="Datum en tijd begin kwartierwaarden"> | ||
| <InputText type="datetime-local" id="start" name="start" defaultValue={localStart.toString()} | ||
| onChange={e => { | ||
| const local = LocalDateTime.parse(e.target.value) | ||
| const zoned = ZonedDateTime.of(local, ZoneId.of(displayTimeZone)) | ||
| setTimeSeriesImpl( | ||
| internalTimeSeries.withStartEpochSeconds(zoned.toEpochSecond()), | ||
| ) | ||
| }} /> | ||
| </LabelRow> | ||
| <LabelRow label="Tijdzone"> | ||
| <Dropdown options={[{ label: 'Nederlandse tijd', value: displayTimeZone }]} value={displayTimeZone}/> | ||
| </LabelRow> | ||
| <LabelRow label="Plak hier de waarden in kWh"> | ||
| <InputTextarea | ||
| id="values" | ||
| name="values" | ||
| defaultValue={internalTimeSeries.values.values().map(val => val.toLocaleString()).toArray().join("\n")} | ||
| onInput={e => {setTimeSeriesImpl(internalTimeSeries.withValues(parseTextArea((e.target as HTMLTextAreaElement).value)))}} | ||
| // onChange={e => setTimeSeriesImpl(internalTimeSeries.withValues(parseTextArea((e.target as HTMLTextAreaElement).value)))} | ||
| style={{display: "block", height: "10rem"}} | ||
| placeholder={placeholder} /> | ||
| </LabelRow> | ||
|
|
||
| <p>Eind kwartierwaarden: {prettyPrint(end)}</p> | ||
| <p>Totaal: <span id="total">{kwhNumberFormatter.format(internalTimeSeries.sum())}</span> kWh</p> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| function parseTextArea(content: String): Float32Array { | ||
| const lines = content.split("\n") | ||
|
|
||
| const numberArray = lines.map(line => line | ||
| .trim() | ||
| .replace(",", ".") | ||
| ).filter(line => line).map(parseFloat) | ||
|
|
||
| return new Float32Array(numberArray) | ||
| } | ||
|
|
23 changes: 23 additions & 0 deletions
23
frontend/src/components/company-survey-v2/time-series/time-series-util.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import {convert, Instant} from "@js-joda/core" | ||
| import "@js-joda/timezone/dist/js-joda-timezone-2017-2027.esm.js" | ||
| import {instantToEpochSeconds, toJsJodaInstant} from "zero-zummon" | ||
|
|
||
| export const targetYear = 2023 | ||
| export const displayTimeZone = "Europe/Amsterdam" | ||
|
|
||
| // This seems dubious because it mixes different versions of js-joda. | ||
| // If this leads to issues we can do it with a conversion through epoch seconds | ||
| // export const kotlinInstantToJsJodaInstant = (kotlinInstant: any): Instant => toJsJodaInstant(kotlinInstant) | ||
| export const kotlinInstantToJsJodaInstant = (kotlinInstant: any): Instant => Instant.ofEpochSecond(instantToEpochSeconds(kotlinInstant)) | ||
|
|
||
| // We use native date formatting because js-joda does not support Dutch locale | ||
| const dateFormatter = new Intl.DateTimeFormat("nl-NL", { | ||
| dateStyle: "full", | ||
| timeStyle: "long", | ||
| timeZone: displayTimeZone, | ||
| }) | ||
|
|
||
| export function prettyPrint(instant: Instant): string { | ||
| const jsDate = convert(instant).toDate() | ||
| return dateFormatter.format(jsDate) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.