38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { path } from "ramda";
|
|
import { ForecastDatePicker } from "@/components/ui/DatePicker";
|
|
|
|
export const Options = function ({ state, updateState }) {
|
|
const defaultDate = path(["options", "defaultDate"], state);
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5 w-full h-full"
|
|
style={{ maxWidth: "810px", maxHeight: "470px" }}
|
|
>
|
|
<h1 className="text-lg font-medium mb-1">Options</h1>
|
|
<label className="font-medium">
|
|
Chart line width:
|
|
<Input
|
|
type="number"
|
|
defaultValue="1"
|
|
min="1"
|
|
value={path(["options", "lineWidth"], state)}
|
|
onChange={(e) =>
|
|
updateState({ options: { lineWidth: e.target.value } })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
<ForecastDatePicker
|
|
dateTime={defaultDate || null}
|
|
onChange={(dateTime) => {
|
|
updateState({ options: { defaultDate: dateTime } });
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
);
|
|
};
|