+
+ );
+}
+
+// 3. Export the wrapped version.
+export const MyChart = withViewComponent(MyChartInner);
+```
+
+> The inner function is **not** exported. Only the wrapped export is public. This prevents accidental use of the unwrapped version.
+
+---
+
+### Step 2 — Add to `WrappedComponents.ts`
+
+```ts
+// Dashboard
+import { MyChart } from "../View/Component/Dashboard/MyChart";
+
+export const WrappedMyChart = withViewComponent(MyChart);
+```
+
+Wait — `MyChart` is already wrapped inside its `.tsx` file. **Do not double-wrap it.** Instead, just re-export it with the `Wrapped` naming convention for consistency:
+
+```ts
+// Dashboard
+export { MyChart as WrappedMyChart } from "../View/Component/Dashboard/MyChart";
+```
+
+Or skip `WrappedComponents.ts` entirely for TSX components and import directly from the source file:
+
+```tsx
+import { MyChart } from "../View/Component/Dashboard/MyChart";
+```
+
+---
+
+### Step 3 — Register in `registerComponents.ts`
+
+Same as JSX — add an entry to `componentConfigs` in `open-fin-al/src/hoc/registerComponents.ts`.
+
+```ts
+{
+ id: "my-chart",
+ config: {
+ label: "My Chart",
+ description: "Displays data as a chart",
+ tags: ["chart", "dashboard", "data"],
+ height: 300,
+ width: 700,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ widthRatio: 16,
+ heightRatio: 9,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+},
+```
+
+---
+
+### Step 4 — Use the component
+
+```tsx
+import { MyChart } from "../View/Component/Dashboard/MyChart";
+import { useMemo } from "react";
+import { ViewComponent } from "../types/ViewComponent";
+
+function SomePage() {
+ const chartConfig = useMemo(() => new ViewComponent({
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ label: "My Chart", description: "...",
+ tags: ["chart"], minimumProficiencyRequirements: {}, requiresInternet: false,
+ }), []);
+
+ return {label}
+ {/* use data to render chart */} +{props.preparationError}
) : ( <> -Downloading data resources...
+ {props.statusMessage ? + ( +{props.statusMessage}
+ ) : ( +Starting system resources...
+ )}This may take a few minutes
diff --git a/open-fin-al/src/View/App/SidecarPreparing.jsx b/open-fin-al/src/View/App/SidecarPreparing.jsx new file mode 100644 index 00000000..c2e5a86e --- /dev/null +++ b/open-fin-al/src/View/App/SidecarPreparing.jsx @@ -0,0 +1,36 @@ +// No Warranty +// This software is provided "as is" without any warranty of any kind, express or implied. This includes, but is not limited to, the warranties of merchantability, fitness for a particular purpose, and non-infringement. +// +// Disclaimer of Liability +// The authors of this software disclaim all liability for any damages, including incidental, consequential, special, or indirect damages, arising from the use or inability to use this software. + +import React, { useEffect } from "react"; + +//Imports for react pages and assets +import logo from "../../Asset/Image/logo-dark.png"; + +export function AppSidecarPreparing(props) { + return ( +
+
+ );
+}
diff --git a/open-fin-al/src/View/Component/Learn/PowerPointComponent.tsx b/open-fin-al/src/View/Component/Learn/PowerPointComponent.tsx
new file mode 100644
index 00000000..86c17be6
--- /dev/null
+++ b/open-fin-al/src/View/Component/Learn/PowerPointComponent.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useRef, useState } from "react";
+import { withViewComponent, WithViewComponentProps } from "../../../hoc/withViewComponent";
+import { PowerPoint } from "../../LearningModule/Slideshow/PowerPoint.jsx";
+
+interface PowerPointInnerProps extends WithViewComponentProps {
+ pptxPath: string;
+}
+
+function PowerPointInner({ pptxPath, viewConfig }: PowerPointInnerProps) {
+ const containerRef = useRef
+ 
+
+
+ {props.sidecarPreparationError ? (
+
+ {props.sidecarPreparationError}
+ ) : ( + <> + {props.statusMessage ? + ( +{props.statusMessage}
+ ) : ( +Starting system resources...
+ )} +This may take a few minutes
+ + + )} +
+ {multiplier > 0 && (
+
+ );
+}
+
+export const PowerPointComponent = withViewComponent(PowerPointInner);
\ No newline at end of file
diff --git a/open-fin-al/src/View/Forecast.jsx b/open-fin-al/src/View/Forecast.jsx
index 356f0148..887b073c 100644
--- a/open-fin-al/src/View/Forecast.jsx
+++ b/open-fin-al/src/View/Forecast.jsx
@@ -6,8 +6,8 @@
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
-import binaryHeader from "../Asset/Image/binary_header.jpg";
-import aiHeader from "../Asset/Image/ai_header.jpg";
+import binaryHeader from "../Asset/Image/binary_header.png";
+import aiHeader from "../Asset/Image/ai_header.png";
import { HeaderContext } from "./App/LoadedLayout";
class Forecast extends Component {
diff --git a/open-fin-al/src/View/ForecastFeature.jsx b/open-fin-al/src/View/ForecastFeature.jsx
index 24bb8225..25d1a85f 100644
--- a/open-fin-al/src/View/ForecastFeature.jsx
+++ b/open-fin-al/src/View/ForecastFeature.jsx
@@ -1,11 +1,18 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
+import { withViewComponent } from "../hoc/withViewComponent";
+import { ViewComponent } from "../types/ViewComponent";
import { TickerSearchBar } from "./Stock/TickerSearchBar";
-import { DataContext } from "./App";
import { RSIChart } from "./RSIChart";
import { MovingAvgChart } from "./MovingAVGChart";
import { ROCChart } from "./ROCChart";
+const WrappedTickerSearchBar = withViewComponent(TickerSearchBar);
+const WrappedRSIChart = withViewComponent(RSIChart);
+const WrappedMovingAvgChart = withViewComponent(MovingAvgChart);
+const WrappedROCChart = withViewComponent(ROCChart);
+import { DataContext } from "./App";
+
function ForecastFeaturesPage(props) {
const location = useLocation();
const { state, setState } = useContext(DataContext);
@@ -26,14 +33,46 @@ function ForecastFeaturesPage(props) {
setSelectedChart(event.target.value);
};
- return (
+ const tickerSearchConfig = useMemo(() => new ViewComponent({
+ height: 50, width: 400, isContainer: false, resizable: false,
+ maintainAspectRatio: false, widthRatio: 1, heightRatio: 1,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ label: "Ticker Search Bar", description: "Search bar for looking up stock ticker symbols",
+ tags: ["search", "ticker", "stock"], minimumProficiencyRequirements: {}, requiresInternet: true,
+ }), []);
+
+ const rsiChartConfig = useMemo(() => new ViewComponent({
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ label: "RSI Chart", description: "Relative Strength Index chart",
+ tags: ["chart", "RSI", "indicator"], minimumProficiencyRequirements: {}, requiresInternet: true,
+ }), []);
+
+ const movingAvgConfig = useMemo(() => new ViewComponent({
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ label: "Moving Average Chart", description: "Moving average indicators chart",
+ tags: ["chart", "moving average", "indicator"], minimumProficiencyRequirements: {}, requiresInternet: true,
+ }), []);
+
+ const rocChartConfig = useMemo(() => new ViewComponent({
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ label: "ROC Chart", description: "Rate of Change chart",
+ tags: ["chart", "ROC", "indicator"], minimumProficiencyRequirements: {}, requiresInternet: true,
+ }), []);
+
+ return (
Forecast Features
{state ? (
<>
-
{selectedChart === "RSIChart" ? (
- Loading...
) : state.error ? ( @@ -52,11 +91,11 @@ function ForecastFeaturesPage(props) {
{this.state.marketData ?
- this.state.marketData.map((market) => {
+ this.state.marketData.map((market, index) => {
return (
-
+
The {market.type} Market is: {market.status.toUpperCase()}
) }) @@ -351,22 +372,25 @@ class Home extends Component {trending_up Total Value
-{this.formatter.format(this.state.portfolioValue)} =0 ? {color:"green"}: {color:"red"}}>{this.calculatePercentChange()>0 ? "+" : ""}{this.percentFormatter.format(this.calculatePercentChange())}
++ {this.formatter.format(this.state.portfolioValue)} + {(this.state.portfolioValue ? =0 ? {color:"green"}: {color:"red"}}> {this.calculatePercentChange()>0 ? "+" : ""}{this.percentFormatter.format(this.calculatePercentChange())} : )} +
account_balance_wallet Total Buying Power
-{this.formatter.format(this.state.buyingPower)} ({this.percentFormatter.format(this.state.buyingPower/this.state.portfolioValue)} cash)
+{this.formatter.format(this.state.buyingPower)}
{this.state.name ? this.state.name : "Economic Data"}
-
{this.state.newsData ?
-
+
:
null
}
diff --git a/open-fin-al/src/View/Learn.jsx b/open-fin-al/src/View/Learn.jsx
index 1e223022..a519e563 100644
--- a/open-fin-al/src/View/Learn.jsx
+++ b/open-fin-al/src/View/Learn.jsx
@@ -88,8 +88,6 @@ export function Learn() {
}
};
- window.console.log(window.electronApp.getAssetPath());
-
return (
+
+ {this.state.twoYearRisk?.rows ?
+ this.state.twoYearRisk.rows.map((asset, index) => (
+
+
+
+ )) :
+ null
+ }
+ {asset.ticker}
+ {this.percentFormatter.format(asset.weight)}
+ {this.percentFormatter.format(asset.mcr)}
+ {this.percentFormatter.format(asset.pctRc)}
+
+ {this.state.twoYearRisk?.corr ? this.renderCorrHeatmap(this.state.twoYearRisk.corr) : null}
+
+
+
+
+
+ );
+ }
+
+ renderStockCard(company, symbol, currentPrice, purchasePrice, quantity, gains, percentGain) {
+ return (
+ {title}
+
+
+
+
+ {tickers.map(t => (
+
+
+ ))}
+
+
+ {t}
+
+ ))}
+
+ {tickers.map(r => (
+ {r}
+ {tickers.map(c => {
+ const cell = cells.find(x => x.row === r && x.col === c);
+ const v = cell?.value ?? 0;
+ return (
+
+ {v.toFixed(2)}
+
+ );
+ })}
+
+ Values near +1 move together; values near -1 move opposite; values near 0 are weakly related.
+
+
+
+ );
+ }
+}
+
+export default RiskAnalysis;
diff --git a/open-fin-al/src/View/Settings.jsx b/open-fin-al/src/View/Settings.jsx
index ffd3c3a4..fef02bb4 100644
--- a/open-fin-al/src/View/Settings.jsx
+++ b/open-fin-al/src/View/Settings.jsx
@@ -1,8 +1,12 @@
-import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
+import React, { useRef, useEffect, useState, useLayoutEffect, useMemo } from "react";
import { useNavigate, useLocation } from 'react-router-dom';
import { SettingsInteractor } from "../Interactor/SettingsInteractor";
import { JSONRequest } from "../Gateway/Request/JSONRequest";
+import { withViewComponent } from "../hoc/withViewComponent";
+import { ViewComponent } from "../types/ViewComponent";
import { SettingsRow } from "./Settings/Row";
+
+const WrappedSettingsRow = withViewComponent(SettingsRow);
import { InitializationInteractor } from "../Interactor/InitializationInteractor";
import { useHeader } from "./App/LoadedLayout";
@@ -143,6 +147,14 @@ function Settings(props) {
getDarkMode();
}, []);
+ const settingsRowConfig = useMemo(() => new ViewComponent({
+ height: 48, width: 600, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 1, heightRatio: 1,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ label: "Settings Row", description: "A single row in the settings panel",
+ tags: ["settings", "row", "configuration"], minimumProficiencyRequirements: {}, requiresInternet: false,
+ }), []);
+
const navigate = useNavigate();
const location = useLocation();
@@ -172,7 +184,7 @@ function Settings(props) {
{sections.response && sections.response.results.length > 0 && sections.response.results.map((section) => (
- {company} ({symbol})
+Current Price: ${currentPrice.toFixed(2)}
+Purchase Price: ${purchasePrice.toFixed(2)}
+Quantity: {quantity}
+Gains: = 0 ? 'positive' : 'negative'}`}>${gains.toFixed(2)}
+% Gain: = 0 ? 'positive' : 'negative'}`}>{percentGain.toFixed(2)}%
+
+
))}
{section.label}
@@ -180,9 +192,7 @@ function Settings(props) {
{section.configurations.map((configuration) => (
- <>
- Value
diff --git a/open-fin-al/src/View/Stock.jsx b/open-fin-al/src/View/Stock.jsx
index f1c8709e..017be43a 100644
--- a/open-fin-al/src/View/Stock.jsx
+++ b/open-fin-al/src/View/Stock.jsx
@@ -4,11 +4,12 @@
// Disclaimer of Liability
// The authors of this software disclaim all liability for any damages, including incidental, consequential, special, or indirect damages, arising from the use or inability to use this software.
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
import { NavLink, useLocation } from "react-router-dom";
-import { TimeSeriesChart } from "./Stock/TimeSeriesChart";
-import { TickerSearchBar } from "./Stock/TickerSearchBar";
-import { TickerSidePanel } from "./Stock/TickerSidePanel";
+
+import { WrappedTickerSearchBar, WrappedTimeSeriesChart, WrappedTickerSidePanel } from "../hoc/WrappedComponents";
+import { ViewComponent } from "../types/ViewComponent";
+
import { DataContext } from "./App";
import { SecInteractor } from "../Interactor/SecInteractor";
@@ -26,6 +27,9 @@ function Stock(props) {
const { setHeader } = useHeader();
+
+
+
useEffect(() => {
setHeader({
title: "Trade",
@@ -134,7 +138,7 @@ function Stock(props) {
const reportResults10K = await secInteractor.get(req10K);
const reportResults10Q = await secInteractor.get(req10Q);
-
+ window.console.log(reportResults10K, reportResults10Q);
if(reportResults10K && reportResults10Q) {
// Update the DataContext state to include reportLinks if they exist
setState((prevState) => ({
@@ -152,44 +156,116 @@ function Stock(props) {
}
}, [state?.cik, state?.ticker, state?.data, setState]); // Added setState to dependency
- return (
+ // ── ViewComponent configs — useMemo prevents recreation on every render ──
+ const tickerSearchConfig = useMemo(() => new ViewComponent({
+ height: 50,
+ width: 400,
+ isContainer: false,
+ resizable: false,
+ maintainAspectRatio: false,
+ heightRatio: 1,
+ widthRatio: 8,
+ heightWidthRatioMultiplier: 0.125,
+ visible: true,
+ enabled: true,
+ label: "Ticker Search Bar",
+ description: "Search bar for looking up stock ticker symbols",
+ tags: ["search", "ticker", "stock", "input"],
+ minimumProficiencyRequirements: { "basic": 1 },
+ requiresInternet: true,
+ }), []);
+
+ const timeSeriesConfig = useMemo(() => new ViewComponent({
+ height: 400,
+ width: 800,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ heightRatio: 1,
+ widthRatio: 2,
+ heightWidthRatioMultiplier: 0.5,
+ visible: true,
+ enabled: true,
+ label: "Time Series Chart",
+ description: "Chart displaying stock price and volume over time",
+ tags: ["chart", "price", "volume", "stock"],
+ minimumProficiencyRequirements: { "basic": 1 },
+ requiresInternet: true,
+ }), []);
+
+ const sidePanelConfig = useMemo(() => new ViewComponent({
+ height: 600,
+ width: 300,
+ isContainer: true,
+ resizable: false,
+ maintainAspectRatio: false,
+ heightRatio: 1,
+ widthRatio: 1,
+ heightWidthRatioMultiplier: 1,
+ visible: true,
+ enabled: true,
+ label: "Ticker Side Panel",
+ description: "Side panel displaying SEC fundamental data and AI analysis",
+ tags: ["panel", "fundamentals", "sec", "analysis"],
+ minimumProficiencyRequirements: { "intermediate": 2 },
+ requiresInternet: true,
+ }), []);
+
+return (
);
}
-// In case hooks are needed for this class. Can remove later if not necessary
export function TimeSeries() {
- return
- {props.state.secData ?
- <>
-
- {state ?
- (
- <>
-
-
- { state.isLoading === true ? (
- <>
-
Loading...
- + {state ? ( + <> +
+
+
+
+
) : state.error ? (
- Retreiving data...
+ +The ticker you entered is not valid or no data is available for this stock.
- ) : ( -Data Source: {state.dataSource}
- )} - -Loading Context...
) - } ++ The ticker you entered is not valid or no data is available for this stock. +
+ ) : state.dataSource ? ( ++ Data Source: {state.dataSource} +
+ ) : null} +Loading Context...
+ )}
- { state && state.secData ? (
- <>
-
-
+ {data &&
+
+
+ +
{isModalOpen && ( <> {
@@ -327,7 +380,7 @@ function TimeSeriesChart(props) {
)}
+ }
+
+ {props.state.secData ?
+ <>
{ props.fundamentalAnalysis ?
<>
;
+ export default component;
+ export { component };
+}
+
+/*
+
+This one file covers **every `.jsx` import across your entire project** — no matter how many components you add in the future.
+
+
+**The full picture of how type safety still works**
+
+Even with the global declaration silencing the import error, your type safety is **not lost** because:
+
+WrappedComponents.ts ← still .ts, still typed
+ ↓
+withViewComponent.tsx ← still enforces ViewComponent interface
+ ↓
+Stock.jsx ← viewConfig is still typed at point of use
+
+*/
\ No newline at end of file
diff --git a/open-fin-al/src/global.d.ts b/open-fin-al/src/global.d.ts
new file mode 100644
index 00000000..c48c26b4
--- /dev/null
+++ b/open-fin-al/src/global.d.ts
@@ -0,0 +1 @@
+declare module "*.jsx";
\ No newline at end of file
diff --git a/open-fin-al/src/hoc/WrappedComponents.ts b/open-fin-al/src/hoc/WrappedComponents.ts
new file mode 100644
index 00000000..bd69efe7
--- /dev/null
+++ b/open-fin-al/src/hoc/WrappedComponents.ts
@@ -0,0 +1,109 @@
+import { withViewComponent } from "./withViewComponent";
+
+// Stock
+import { TimeSeriesChart } from "../View/Stock/TimeSeriesChart";
+import { TickerSearchBar } from "../View/Stock/TickerSearchBar";
+import { TickerSidePanel } from "../View/Stock/TickerSidePanel";
+
+// Dashboard
+import { EconomicChart } from "../View/Dashboard/EconomicChart";
+
+// Learning Module
+import { Slide } from "../View/LearningModule/Slideshow/Slide";
+import { SlideshowWindow } from "../View/LearningModule/Slideshow/SlideshowWindow";
+import { LearningModuleDetails } from "../View/LearningModule/LearningModuleDetails";
+import { LearningModulePage } from "../View/LearningModule/LearningModulePage";
+
+// News
+import { NewsListingSummary } from "../View/News/Listing/Summary";
+import { NewsSearchBar } from "../View/News/SearchBar";
+import { NewsBrowser } from "../View/News/Browser";
+import { NewsListing } from "../View/News/Listing";
+
+// Portfolio
+import { PortfolioCreation } from "../View/Portfolio/Creation";
+
+// Settings
+import { SettingsRow } from "../View/Settings/Row";
+import { SettingsRowLabel } from "../View/Settings/RowLabel";
+import { SettingsRowValue } from "../View/Settings/RowValue";
+
+// Shared
+import { SymbolSearchBar } from "../View/Shared/SymbolSearchBar";
+
+// Top-level views
+import About from "../View/About";
+import { Analysis } from "../View/Analysis";
+import BuyReport from "../View/BuyReport";
+import Chatbot from "../View/Chatbot";
+import Forecast from "../View/Forecast";
+import { ForecastFeature } from "../View/ForecastFeature";
+import ForecastModel from "../View/ForecastModel";
+import Home from "../View/Home";
+import InvestmentPool from "../View/InvestmentPool";
+import { Learn } from "../View/Learn";
+import { MovingAvgChart } from "../View/MovingAVGChart";
+import { News } from "../View/News";
+import Portfolio from "../View/Portfolio";
+import RiskAnalysis from "../View/RiskAnalysis";
+import RiskSurvey from "../View/RiskSurvey";
+import { ROCChart } from "../View/ROCChart";
+import { RSIChart } from "../View/RSIChart";
+import { Settings } from "../View/Settings";
+import { TimeSeries } from "../View/Stock";
+import StockAnalysis from "../View/StockAnalysis";
+import { StockAnalysisSearchBar } from "../View/StockAnalysisSearchBar";
+
+// Stock
+export const WrappedTickerSearchBar = withViewComponent(TickerSearchBar);
+export const WrappedTimeSeriesChart = withViewComponent(TimeSeriesChart);
+export const WrappedTickerSidePanel = withViewComponent(TickerSidePanel);
+
+// Dashboard
+export const WrappedEconomicChart = withViewComponent(EconomicChart);
+
+// Learning Module
+export const WrappedSlide = withViewComponent(Slide);
+export const WrappedSlideshowWindow = withViewComponent(SlideshowWindow);
+export const WrappedLearningModuleDetails = withViewComponent(LearningModuleDetails);
+export const WrappedLearningModulePage = withViewComponent(LearningModulePage);
+
+// News
+export const WrappedNewsListingSummary = withViewComponent(NewsListingSummary);
+export const WrappedNewsSearchBar = withViewComponent(NewsSearchBar);
+export const WrappedNewsBrowser = withViewComponent(NewsBrowser);
+export const WrappedNewsListing = withViewComponent(NewsListing);
+
+// Portfolio
+export const WrappedPortfolioCreation = withViewComponent(PortfolioCreation);
+
+// Top-level views
+export const WrappedAbout = withViewComponent(About);
+export const WrappedAnalysis = withViewComponent(Analysis);
+export const WrappedBuyReport = withViewComponent(BuyReport);
+export const WrappedChatbot = withViewComponent(Chatbot);
+export const WrappedForecast = withViewComponent(Forecast);
+export const WrappedForecastFeature = withViewComponent(ForecastFeature);
+export const WrappedForecastModel = withViewComponent(ForecastModel);
+export const WrappedHome = withViewComponent(Home);
+export const WrappedInvestmentPool = withViewComponent(InvestmentPool);
+export const WrappedLearn = withViewComponent(Learn);
+export const WrappedMovingAvgChart = withViewComponent(MovingAvgChart);
+export const WrappedNews = withViewComponent(News);
+export const WrappedPortfolio = withViewComponent(Portfolio);
+export const WrappedRiskAnalysis = withViewComponent(RiskAnalysis);
+export const WrappedRiskSurvey = withViewComponent(RiskSurvey);
+export const WrappedROCChart = withViewComponent(ROCChart);
+export const WrappedRSIChart = withViewComponent(RSIChart);
+export const WrappedSettings = withViewComponent(Settings);
+export const WrappedTimeSeries = withViewComponent(TimeSeries);
+export const WrappedStockAnalysis = withViewComponent(StockAnalysis);
+export const WrappedStockAnalysisSearchBar = withViewComponent(StockAnalysisSearchBar);
+
+// Settings
+export const WrappedSettingsRow = withViewComponent(SettingsRow);
+export const WrappedSettingsRowLabel = withViewComponent(SettingsRowLabel);
+export const WrappedSettingsRowValue = withViewComponent(SettingsRowValue);
+
+// Shared
+export const WrappedSymbolSearchBar = withViewComponent(SymbolSearchBar);
diff --git a/open-fin-al/src/hoc/registerComponents.ts b/open-fin-al/src/hoc/registerComponents.ts
new file mode 100644
index 00000000..16ce017e
--- /dev/null
+++ b/open-fin-al/src/hoc/registerComponents.ts
@@ -0,0 +1,642 @@
+import { ComponentRegistry } from "../types/ComponentRegistry";
+import { ViewComponent } from "../types/ViewComponent";
+
+const registry = ComponentRegistry.getInstance();
+
+const componentConfigs: Array<{ id: string; config: any }> = [
+ // Stock
+ {
+ id: "time-series-chart",
+ config: {
+ label: "Time Series Chart",
+ description: "Displays stock price history as a time series chart",
+ tags: ["chart", "stock", "time series", "price", "graph"],
+ height: 300,
+ width: 700,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ widthRatio: 16,
+ heightRatio: 9,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+ {
+ id: "ticker-search-bar",
+ config: {
+ label: "Ticker Search Bar",
+ description: "Search bar for finding and selecting stock tickers",
+ tags: ["search", "ticker", "stock", "search bar"],
+ height: 50,
+ width: 400,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+ {
+ id: "ticker-side-panel",
+ config: {
+ label: "Ticker Side Panel",
+ description: "Side panel displaying financial metrics for the selected ticker",
+ tags: ["panel", "ticker", "stock", "side panel", "metrics", "financial"],
+ height: 600,
+ width: 300,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 2,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+
+ // Dashboard
+ {
+ id: "economic-chart",
+ config: {
+ label: "Economic Chart",
+ description: "Displays macroeconomic data as a chart",
+ tags: ["chart", "economic", "macro", "graph", "economy"],
+ height: 300,
+ width: 700,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ widthRatio: 16,
+ heightRatio: 9,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+
+ // Learning Module
+ {
+ id: "slide",
+ config: {
+ label: "Slide",
+ description: "Individual slide in a slideshow presentation",
+ tags: ["slide", "presentation", "slideshow", "learning"],
+ height: 450,
+ width: 800,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ widthRatio: 16,
+ heightRatio: 9,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+ {
+ id: "slideshow-window",
+ config: {
+ label: "Slideshow Window",
+ description: "Window for displaying slideshow presentations",
+ tags: ["slideshow", "presentation", "window", "learning"],
+ height: 450,
+ width: 800,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ widthRatio: 16,
+ heightRatio: 9,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+ {
+ id: "learning-module-details",
+ config: {
+ label: "Learning Module Details",
+ description: "Displays details and information about a learning module",
+ tags: ["learning", "module", "details", "education"],
+ height: 400,
+ width: 600,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 3,
+ heightRatio: 2,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+ {
+ id: "learning-module-page",
+ config: {
+ label: "Learning Module Page",
+ description: "Full page view for a learning module",
+ tags: ["learning", "module", "page", "education"],
+ height: 600,
+ width: 800,
+ isContainer: true,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 4,
+ heightRatio: 3,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+ {
+ id: "powerpoint",
+ config: {
+ label: "PowerPoint Learning Module",
+ description: "Component for displaying PowerPoint presentations",
+ tags: ["PowerPoint", "Presentation", "Slideshow", "Learning Module"],
+ height: null,
+ width: null,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: true,
+ widthRatio: 16,
+ heightRatio: 9,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+
+ // News
+ {
+ id: "news-listing-summary",
+ config: {
+ label: "News Listing Summary",
+ description: "Summary view of a news article in a listing",
+ tags: ["news", "summary", "listing", "article"],
+ height: 120,
+ width: 600,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 5,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+ {
+ id: "news-search-bar",
+ config: {
+ label: "News Search Bar",
+ description: "Search bar for finding news articles",
+ tags: ["news", "search", "search bar"],
+ height: 50,
+ width: 400,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+ {
+ id: "news-browser",
+ config: {
+ label: "News Browser",
+ description: "Browser for viewing and navigating news articles",
+ tags: ["news", "browser", "articles"],
+ height: 600,
+ width: 800,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 4,
+ heightRatio: 3,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+ {
+ id: "news-listing",
+ config: {
+ label: "News Listing",
+ description: "List view of news articles",
+ tags: ["news", "listing", "articles", "list"],
+ height: 600,
+ width: 400,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 2,
+ heightRatio: 3,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+
+ // Settings
+ {
+ id: "settings-row",
+ config: {
+ label: "Settings Row",
+ description: "A single row in the settings panel",
+ tags: ["settings", "row", "configuration"],
+ height: 48,
+ width: 600,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+ {
+ id: "settings-row-label",
+ config: {
+ label: "Settings Row Label",
+ description: "Label element for a settings row",
+ tags: ["settings", "label", "configuration"],
+ height: 48,
+ width: 200,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+ {
+ id: "settings-row-value",
+ config: {
+ label: "Settings Row Value",
+ description: "Value element for a settings row",
+ tags: ["settings", "value", "configuration"],
+ height: 48,
+ width: 400,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: false,
+ },
+ },
+
+ // Shared
+ {
+ id: "symbol-search-bar",
+ config: {
+ label: "Symbol Search Bar",
+ description: "Shared search bar for finding financial symbols",
+ tags: ["search", "symbol", "ticker", "shared", "search bar"],
+ height: 50,
+ width: 400,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 1,
+ heightRatio: 1,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+
+ // Top-level views
+ {
+ id: "about",
+ config: {
+ label: "About",
+ description: "About page for the application",
+ tags: ["about", "info", "information"],
+ height: 600, width: 800, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: false,
+ },
+ },
+ {
+ id: "analysis",
+ config: {
+ label: "Analysis",
+ description: "Stock and financial analysis view",
+ tags: ["analysis", "stock", "financial", "research"],
+ height: 600, width: 1000, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "buy-report",
+ config: {
+ label: "Buy Report",
+ description: "Report view for buy recommendations",
+ tags: ["buy", "report", "recommendation", "stock"],
+ height: 600, width: 800, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "chatbot",
+ config: {
+ label: "Chatbot",
+ description: "AI chatbot for financial questions and commands",
+ tags: ["chatbot", "ai", "assistant", "chat"],
+ height: 500, width: 400, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 2, heightRatio: 5,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "forecast",
+ config: {
+ label: "Forecast",
+ description: "Stock price forecast view",
+ tags: ["forecast", "prediction", "stock", "price"],
+ height: 600, width: 800, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "forecast-feature",
+ config: {
+ label: "Forecast Feature",
+ description: "Individual feature input for the forecast model",
+ tags: ["forecast", "feature", "input", "model"],
+ height: 80, width: 400, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 1,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: false,
+ },
+ },
+ {
+ id: "forecast-model",
+ config: {
+ label: "Forecast Model",
+ description: "Configuration and display of the forecast model",
+ tags: ["forecast", "model", "machine learning", "prediction"],
+ height: 600, width: 800, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "home",
+ config: {
+ label: "Home",
+ description: "Application home page and dashboard",
+ tags: ["home", "dashboard", "overview"],
+ height: 600, width: 1000, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "investment-pool",
+ config: {
+ label: "Investment Pool",
+ description: "View for managing investment pools",
+ tags: ["investment", "pool", "portfolio", "management"],
+ height: 600, width: 800, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "learn",
+ config: {
+ label: "Learn",
+ description: "Learning hub for financial education modules",
+ tags: ["learn", "education", "modules", "courses"],
+ height: 600, width: 1000, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: false,
+ },
+ },
+ {
+ id: "moving-avg-chart",
+ config: {
+ label: "Moving Average Chart",
+ description: "Chart displaying moving average indicators for a stock",
+ tags: ["chart", "moving average", "indicator", "stock", "technical analysis"],
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "news",
+ config: {
+ label: "News",
+ description: "Financial news page",
+ tags: ["news", "articles", "financial news"],
+ height: 600, width: 800, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "portfolio",
+ config: {
+ label: "Portfolio",
+ description: "Portfolio management and overview page",
+ tags: ["portfolio", "investments", "holdings", "management"],
+ height: 600, width: 1000, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "risk-analysis",
+ config: {
+ label: "Risk Analysis",
+ description: "Risk analysis view for evaluating investment risk",
+ tags: ["risk", "analysis", "investment", "assessment"],
+ height: 600, width: 1000, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "risk-survey",
+ config: {
+ label: "Risk Survey",
+ description: "Survey for assessing user risk tolerance",
+ tags: ["risk", "survey", "questionnaire", "tolerance"],
+ height: 600, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: false,
+ },
+ },
+ {
+ id: "roc-chart",
+ config: {
+ label: "ROC Chart",
+ description: "Rate of Change chart for technical stock analysis",
+ tags: ["chart", "ROC", "rate of change", "indicator", "technical analysis"],
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "rsi-chart",
+ config: {
+ label: "RSI Chart",
+ description: "Relative Strength Index chart for technical stock analysis",
+ tags: ["chart", "RSI", "relative strength index", "indicator", "technical analysis"],
+ height: 300, width: 700, isContainer: false, resizable: true,
+ maintainAspectRatio: true, widthRatio: 16, heightRatio: 9,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "settings",
+ config: {
+ label: "Settings",
+ description: "Application settings and configuration page",
+ tags: ["settings", "configuration", "preferences", "options"],
+ height: 600, width: 700, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 4, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: false,
+ },
+ },
+ {
+ id: "time-series",
+ config: {
+ label: "Time Series",
+ description: "Full stock time series view with charts and data",
+ tags: ["stock", "time series", "chart", "price history"],
+ height: 600, width: 1000, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "stock-analysis",
+ config: {
+ label: "Stock Analysis",
+ description: "Detailed stock analysis page with multiple indicators",
+ tags: ["stock", "analysis", "indicators", "technical analysis"],
+ height: 600, width: 1000, isContainer: true, resizable: true,
+ maintainAspectRatio: false, widthRatio: 5, heightRatio: 3,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+ {
+ id: "stock-analysis-search-bar",
+ config: {
+ label: "Stock Analysis Search Bar",
+ description: "Search bar for the stock analysis page",
+ tags: ["search", "stock", "analysis", "search bar"],
+ height: 50, width: 400, isContainer: false, resizable: true,
+ maintainAspectRatio: false, widthRatio: 1, heightRatio: 1,
+ heightWidthRatioMultiplier: 0, visible: true, enabled: true,
+ minimumProficiencyRequirements: {}, requiresInternet: true,
+ },
+ },
+
+ // Portfolio
+ {
+ id: "portfolio-creation",
+ config: {
+ label: "Portfolio Creation",
+ description: "Interface for creating and managing investment portfolios",
+ tags: ["portfolio", "creation", "investment", "management"],
+ height: 600,
+ width: 800,
+ isContainer: false,
+ resizable: true,
+ maintainAspectRatio: false,
+ widthRatio: 4,
+ heightRatio: 3,
+ heightWidthRatioMultiplier: 0,
+ visible: true,
+ enabled: true,
+ minimumProficiencyRequirements: {},
+ requiresInternet: true,
+ },
+ },
+];
+
+export function registerAllComponents(): void {
+ for (const { id, config } of componentConfigs) {
+ if (!registry.getById(id)) {
+ registry.register(id, new ViewComponent(config));
+ }
+ }
+}
diff --git a/open-fin-al/src/hoc/withViewComponent.tsx b/open-fin-al/src/hoc/withViewComponent.tsx
new file mode 100644
index 00000000..b5151a63
--- /dev/null
+++ b/open-fin-al/src/hoc/withViewComponent.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { ViewComponent } from "../types/ViewComponent";
+
+// The props the HOC injects — every wrapped component gets these
+export interface WithViewComponentProps {
+ viewConfig: ViewComponent;
+}
+
+// The HOC — wraps any .jsx component and enforces ViewComponent type safety
+export function withViewComponentOpenFinAL: Open-source Financial Adaptive Learning System
+
-
{header}
+Purchase {header}
AI Fundamental Analysis
diff --git a/open-fin-al/src/declarations.d.ts b/open-fin-al/src/declarations.d.ts new file mode 100644 index 00000000..be48951e --- /dev/null +++ b/open-fin-al/src/declarations.d.ts @@ -0,0 +1,23 @@ +declare module "*.jsx" { + import React from "react"; + const component: React.ComponentType( + WrappedComponent: React.ComponentType
+) { + const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component"; + + function ViewComponentWrapper(props: P & WithViewComponentProps) { + const { viewConfig, ...rest } = props; + + // Guard against missing viewConfig (e.g. component rendered without prop) + if (!viewConfig) return null; + + // Centralized visibility guard — no need to handle this in each .jsx file + if (!viewConfig.getVisible()) return null; + + return ( +
+
+ );
+ }
+
+ ViewComponentWrapper.displayName = `WithViewComponent(${displayName})`;
+
+ return ViewComponentWrapper;
+}
diff --git a/open-fin-al/src/index.css b/open-fin-al/src/index.css
index 97c22402..f6d696f6 100644
--- a/open-fin-al/src/index.css
+++ b/open-fin-al/src/index.css
@@ -18,9 +18,11 @@
--text-color-medium-dark: #333333;
--row-primary-color: #FFFFFF;
--row-alternating-color: #c1c9ff;
+ --always-black: #000000;
--footer-height: 90px;
--sidebar-width: 220px;
--sidebar-footer-width: 190px;
+ --pptx-scale: 1;
}
body.dark-mode {
@@ -41,6 +43,7 @@ body.dark-mode {
--text-color-medium-dark: #BBBBBB;
--row-primary-color: #2d3748;
--row-alternating-color: #4a5568;
+ --always-black: #000000;
}
body {
@@ -384,10 +387,17 @@ code {
background-color: var(--background-color);
}
-.pptx-preview-wrapper {
+.slideshowContainer {
margin: 0 !important;
padding: 0 !important;
- overflow: hidden !important;
+ position: relative;
+ overflow: hidden;
+}
+
+.pptx-preview-wrapper {
+ transform-origin: top left;
+ transform: scale(var(--pptx-scale, 1));
+ overflow: hidden;
}
.slide {
@@ -490,7 +500,10 @@ code {
background-color: var(--secondary-color);
color: var(--text-color-light);
border-radius: 10px 10px 0px 0px;
- height: 200px
+ height: 200px;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
}
.cardContainer {
@@ -511,6 +524,7 @@ code {
.chartContainer {
width: 700px;
margin-left: 10px;
+ margin-top: 20px;
}
.stockDetails {
@@ -552,13 +566,20 @@ code {
padding: 0;
}
+.priceSearchFormContainer form {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
.priceSearchBar {
padding: 8px;
- width: 400px;
+ flex: 1;
+ min-width: 200px;
border: 1px solid black;
height: 30px;
border-radius: 4px;
- margin-right: 8px;
+ margin-right: 0;
}
.priceSearchButton {
@@ -658,7 +679,7 @@ code {
.popoverContent {
max-width: 200px;
- padding: 5px;
+ padding: 15px;
border-radius: 10px;
background-color: rgba(29, 32, 40, 0.9);
color: var(--text-color-light)
@@ -820,6 +841,10 @@ code {
}
.portfolio-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
background-color: var(--background-color);
padding: 20px;
border-radius: 5px;
@@ -827,8 +852,12 @@ code {
text-align: center;
}
+.portfolio-card h3 {
+ margin: 0px;
+}
+
.portfolio-value, .buying-power {
- font-size: 24px;
+ font-size: 20px;
font-weight: bold;
}
@@ -1305,6 +1334,11 @@ nav ul li a:hover {
color: var(--text-color-medium-dark);
}
+.loader-container {
+ display: flex;
+ align-items: center;
+}
+
.small-loader {
visibility: visible;
border: 12px solid #f3f3f3;
@@ -1322,6 +1356,25 @@ nav ul li a:hover {
display: none;
}
+.tiny-loader {
+ visibility: visible;
+ border: 7px solid #f3f3f3;
+ border-top: 7px solid #3498db;
+ border-radius: 50%;
+ width: 7px;
+ height: 7px;
+ margin-left: 10px;
+ margin-right: 10px;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ animation: spin 2s linear infinite;
+ display: inline-block;
+}
+
+.tiny-loader.hidden {
+ display: none;
+}
+
.error {
color: red;
}
diff --git a/open-fin-al/src/index.html b/open-fin-al/src/index.html
index 698597a2..743a5370 100644
--- a/open-fin-al/src/index.html
+++ b/open-fin-al/src/index.html
@@ -4,6 +4,7 @@