avraham/calendar-optimizer-inferno
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust css; develop atom pattern

Browse Source
This commit is contained in:
Avraham Sakal
2023-10-15 19:37:01 -04:00
parent 582d868568
commit 9dec57681f
10 changed files with 279 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/App.module.css
Vendored
+12 -1
View File
@@ -3,7 +3,18 @@
flex-direction: column;
display: flex;
}
.App-module__app_gPMrEW__001 > .App-module__picker_gPMrEW__001 {
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 {
flex-direction: column;
max-width: 30em;
display: flex;
}
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__underlyingPrice_gPMrEW__001 {
flex-direction: row;
justify-content: flex-start;
gap: .6em;
display: flex;
}
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__picker_gPMrEW__001 {
flex-direction: row;
justify-content: space-between;
display: flex;
dist/App.module.js
Vendored
+3 -1
View File
@@ -1,7 +1,9 @@
// src/App.module.css
var App_module_default = {
"app": "App-module__app_gPMrEW__001",
"picker": "App-module__picker_gPMrEW__001"
"form": "App-module__form_gPMrEW__001",
"picker": "App-module__picker_gPMrEW__001",
"underlyingPrice": "App-module__underlyingPrice_gPMrEW__001"
};
export {
App_module_default as default
dist/index.css
Vendored
+12 -1
View File
@@ -3,7 +3,18 @@
flex-direction: column;
display: flex;
}
.App-module__app_gPMrEW__001 > .App-module__picker_gPMrEW__001 {
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 {
flex-direction: column;
max-width: 30em;
display: flex;
}
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__underlyingPrice_gPMrEW__001 {
flex-direction: row;
justify-content: flex-start;
gap: .6em;
display: flex;
}
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__picker_gPMrEW__001 {
flex-direction: row;
justify-content: space-between;
display: flex;
dist/index.js
Vendored
+94 -58
View File
@@ -1100,7 +1100,7 @@ var require_react_development = __commonJS({
var dispatcher = resolveDispatcher();
return dispatcher.useRef(initialValue);
}
function useEffect5(create, deps) {
function useEffect6(create, deps) {
var dispatcher = resolveDispatcher();
return dispatcher.useEffect(create, deps);
}
@@ -1116,7 +1116,7 @@ var require_react_development = __commonJS({
var dispatcher = resolveDispatcher();
return dispatcher.useCallback(callback2, deps);
}
function useMemo2(create, deps) {
function useMemo3(create, deps) {
var dispatcher = resolveDispatcher();
return dispatcher.useMemo(create, deps);
}
@@ -1882,12 +1882,12 @@ var require_react_development = __commonJS({
exports.useContext = useContext2;
exports.useDebugValue = useDebugValue2;
exports.useDeferredValue = useDeferredValue;
exports.useEffect = useEffect5;
exports.useEffect = useEffect6;
exports.useId = useId;
exports.useImperativeHandle = useImperativeHandle;
exports.useInsertionEffect = useInsertionEffect;
exports.useLayoutEffect = useLayoutEffect;
exports.useMemo = useMemo2;
exports.useMemo = useMemo3;
exports.useReducer = useReducer2;
exports.useRef = useRef3;
exports.useState = useState;
@@ -24379,10 +24379,10 @@ var require_react_jsx_runtime_development = __commonJS({
return jsxWithValidation(type, props, key, false);
}
}
var jsx6 = jsxWithValidationDynamic;
var jsx7 = jsxWithValidationDynamic;
var jsxs4 = jsxWithValidationStatic;
exports.Fragment = REACT_FRAGMENT_TYPE;
exports.jsx = jsx6;
exports.jsx = jsx7;
exports.jsxs = jsxs4;
})();
}
@@ -24417,7 +24417,7 @@ function Header() {
var Header_default = Header;
// src/Picker.tsx
var import_react2 = __toESM(require_react(), 1);
var import_react3 = __toESM(require_react(), 1);
// node_modules/jotai/esm/vanilla.mjs
var keyCount = 0;
@@ -25064,31 +25064,40 @@ function useAtom(atom2, options) {
];
}
// src/util.ts
var import_react2 = __toESM(require_react(), 1);
function useLocalAtom(initialValue, deps) {
return (0, import_react2.useMemo)(() => atom(initialValue), deps);
}
function useCommand(fn, deps) {
return useSetAtom((0, import_react2.useMemo)(() => atom(null, fn), deps));
}
// src/Picker.tsx
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
function Picker({
$url,
$options = (0, import_react2.useMemo)(() => atom([]), []),
$isLoading = (0, import_react2.useMemo)(() => atom(true), []),
$isEnabled = (0, import_react2.useMemo)(() => atom(true), []),
$selectedOption = (0, import_react2.useMemo)(() => atom(""), [])
$options = (0, import_react3.useMemo)(() => atom([]), []),
$isLoading = (0, import_react3.useMemo)(() => atom(true), []),
$isEnabled = (0, import_react3.useMemo)(() => atom(true), []),
$selectedOptionValue = (0, import_react3.useMemo)(() => atom(""), [])
}) {
const url = useAtomValue($url);
const options = useAtomValue($options);
const isLoading = useAtomValue($isLoading);
const [selectedOption, setSelectedOption] = useAtom($selectedOption);
const [selectedOptionValue, setSelectedOptionValue] = useAtom($selectedOptionValue);
const isEnabled = useAtomValue($isEnabled);
const optionsFetched = useSetAtom((0, import_react2.useMemo)(() => atom(null, (get, set2, options2) => {
const handleFetchedOptions = useCommand((get, set2, options2) => {
set2($options, options2);
set2($isLoading, false);
}), [$options, $isLoading]));
(0, import_react2.useEffect)(() => {
}, [$options, $isLoading]);
(0, import_react3.useEffect)(() => {
if (isEnabled) {
fetch(url).then((x) => x.json()).catch((err) => ["AAPL", "MSFT", "GOOG"]).then(optionsFetched);
fetch(url).then((x) => x.json()).catch((err) => ["AAPL", "MSFT", "GOOG"]).then(handleFetchedOptions);
}
}, [url, isEnabled]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading..." }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("select", { value: selectedOption, onChange: (e) => {
setSelectedOption(e.target.value);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading..." }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("select", { value: selectedOptionValue, onChange: (e) => {
setSelectedOptionValue(e.target.value);
}, children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "" }, ""),
options.map(
@@ -25100,7 +25109,9 @@ function Picker({
// src/App.module.css
var App_module_default = {
"app": "App-module__app_gPMrEW__001",
"picker": "App-module__picker_gPMrEW__001"
"form": "App-module__form_gPMrEW__001",
"picker": "App-module__picker_gPMrEW__001",
"underlyingPrice": "App-module__underlyingPrice_gPMrEW__001"
};
// node_modules/@kurkle/color/dist/color.esm.js
@@ -36540,7 +36551,7 @@ __publicField(TimeSeriesScale, "id", "timeseries");
__publicField(TimeSeriesScale, "defaults", TimeScale.defaults);
// node_modules/react-chartjs-2/dist/index.js
var import_react3 = __toESM(require_react(), 1);
var import_react4 = __toESM(require_react(), 1);
var defaultDatasetIdKey = "label";
function reforwardRef(ref, value) {
if (typeof ref === "function") {
@@ -36585,8 +36596,8 @@ function cloneData(data) {
}
function ChartComponent(props, ref) {
const { height = 150, width = 300, redraw = false, datasetIdKey, type, data, options, plugins = [], fallbackContent, updateMode, ...canvasProps } = props;
const canvasRef = (0, import_react3.useRef)(null);
const chartRef = (0, import_react3.useRef)();
const canvasRef = (0, import_react4.useRef)(null);
const chartRef = (0, import_react4.useRef)();
const renderChart = () => {
if (!canvasRef.current)
return;
@@ -36607,7 +36618,7 @@ function ChartComponent(props, ref) {
chartRef.current = null;
}
};
(0, import_react3.useEffect)(() => {
(0, import_react4.useEffect)(() => {
if (!redraw && chartRef.current && options) {
setOptions(chartRef.current, options);
}
@@ -36615,7 +36626,7 @@ function ChartComponent(props, ref) {
redraw,
options
]);
(0, import_react3.useEffect)(() => {
(0, import_react4.useEffect)(() => {
if (!redraw && chartRef.current) {
setLabels(chartRef.current.config.data, data.labels);
}
@@ -36623,7 +36634,7 @@ function ChartComponent(props, ref) {
redraw,
data.labels
]);
(0, import_react3.useEffect)(() => {
(0, import_react4.useEffect)(() => {
if (!redraw && chartRef.current && data.datasets) {
setDatasets(chartRef.current.config.data, data.datasets, datasetIdKey);
}
@@ -36631,7 +36642,7 @@ function ChartComponent(props, ref) {
redraw,
data.datasets
]);
(0, import_react3.useEffect)(() => {
(0, import_react4.useEffect)(() => {
if (!chartRef.current)
return;
if (redraw) {
@@ -36647,7 +36658,7 @@ function ChartComponent(props, ref) {
data.datasets,
updateMode
]);
(0, import_react3.useEffect)(() => {
(0, import_react4.useEffect)(() => {
if (!chartRef.current)
return;
destroyChart();
@@ -36655,21 +36666,21 @@ function ChartComponent(props, ref) {
}, [
type
]);
(0, import_react3.useEffect)(() => {
(0, import_react4.useEffect)(() => {
renderChart();
return () => destroyChart();
}, []);
return /* @__PURE__ */ import_react3.default.createElement("canvas", Object.assign({
return /* @__PURE__ */ import_react4.default.createElement("canvas", Object.assign({
ref: canvasRef,
role: "img",
height,
width
}, canvasProps), fallbackContent);
}
var Chart2 = /* @__PURE__ */ (0, import_react3.forwardRef)(ChartComponent);
var Chart2 = /* @__PURE__ */ (0, import_react4.forwardRef)(ChartComponent);
function createTypedChart(type, registerables) {
Chart.register(registerables);
return /* @__PURE__ */ (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ import_react3.default.createElement(Chart2, Object.assign({}, props, {
return /* @__PURE__ */ (0, import_react4.forwardRef)((props, ref) => /* @__PURE__ */ import_react4.default.createElement(Chart2, Object.assign({}, props, {
ref,
type
})));
@@ -36784,7 +36795,7 @@ function loadable(anAtom) {
}
// src/CalendarPricesChart.tsx
var import_react4 = __toESM(require_react(), 1);
var import_react5 = __toESM(require_react(), 1);
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
Chart.register(LineElement, plugin_tooltip, plugin_legend, CategoryScale, LinearScale, PointElement);
var $prices = loadable(atom(async (get) => {
@@ -36800,7 +36811,7 @@ var $prices = loadable(atom(async (get) => {
}));
function CalendarPricesChart() {
const prices = useAtomValue($prices);
(0, import_react4.useEffect)(() => {
(0, import_react5.useEffect)(() => {
console.log(prices);
}, [prices]);
if (prices.state === "hasData") {
@@ -36826,8 +36837,25 @@ function CalendarPricesChart() {
}
}
// src/App.tsx
// src/UnderlyingPrice.tsx
var import_react6 = __toESM(require_react(), 1);
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
function UnderlyingPrice({ $underlying, $quoteDate }) {
const underlying = useAtomValue($underlying);
const quoteDate = useAtomValue($quoteDate);
const $underlyingPrice = useLocalAtom("", [$underlying, $quoteDate]);
const [underlyingPrice, setUnderlyingPrice] = useAtom($underlyingPrice);
const handleInit = useCommand(() => {
fetch(`${baseUrl}/underlying_quotes/${underlying}/${quoteDate.substring(0, 10)}`).then((x) => x.json()).then((rows) => {
setUnderlyingPrice(rows[0].close.toString());
});
}, [underlying, quoteDate]);
(0, import_react6.useEffect)(handleInit, [underlying, quoteDate]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: underlyingPrice });
}
// src/App.tsx
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
var baseUrl = "http://127.0.0.1:8234";
var $underlyingsUrl = atom(`${baseUrl}/option_quotes/underlyings`);
var $selectedUnderlying = atom("");
@@ -36844,38 +36872,46 @@ var $backMonthExpirationPickerUrl = atom((get) => `${baseUrl}/option_quotes/${ge
var $isBackMonthExpirationPickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get($selectedUnderlying) !== "");
var $selectedBackExpiration = atom("");
function App() {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.app, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Header_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Underlying" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $underlyingsUrl, $selectedOption: $selectedUnderlying })
const selectedUnderlying = useAtomValue($selectedUnderlying);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.app, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Header_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.form, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.underlyingPrice, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Underlying: " }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: selectedUnderlying }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnderlyingPrice, { $underlying: $selectedUnderlying, $quoteDate: $selectedQuoteDate })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Underlying" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Picker, { $url: $underlyingsUrl, $selectedOptionValue: $selectedUnderlying })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Quote Date" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Picker, { $url: $quoteDatePickerUrl, $isEnabled: $isQuoteDatePickerEnabled, $selectedOptionValue: $selectedQuoteDate })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Strike" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Picker, { $url: $strikePickerUrl, $isEnabled: $isStrikePickerEnabled, $selectedOptionValue: $selectedStrike })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Front Expiration" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Picker, { $url: $frontMonthExpirationPickerUrl, $isEnabled: $isFrontMonthExpirationPickerEnabled, $selectedOptionValue: $selectedFrontExpiration })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Back Expiration" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Picker, { $url: $backMonthExpirationPickerUrl, $isEnabled: $isBackMonthExpirationPickerEnabled, $selectedOptionValue: $selectedBackExpiration })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Quote Date" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $quoteDatePickerUrl, $isEnabled: $isQuoteDatePickerEnabled, $selectedOption: $selectedQuoteDate })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Strike" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $strikePickerUrl, $isEnabled: $isStrikePickerEnabled, $selectedOption: $selectedStrike })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Front Expiration" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $frontMonthExpirationPickerUrl, $isEnabled: $isFrontMonthExpirationPickerEnabled, $selectedOption: $selectedFrontExpiration })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Back Expiration" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $backMonthExpirationPickerUrl, $isEnabled: $isBackMonthExpirationPickerEnabled, $selectedOption: $selectedBackExpiration })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CalendarPricesChart, {})
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CalendarPricesChart, {})
] });
}
var App_default = App;
// src/index.tsx
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
var rootEl = document.getElementById("app");
var Root = (0, import_client.createRoot)(rootEl);
Root.render(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(App_default, {}));
Root.render(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(App_default, {}));
/*! Bundled license information:
react/cjs/react.development.js: