0% found this document useful (0 votes)
25 views4 pages

Bollinger Bands with KLineCharts

Uploaded by

Amit Yadav
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views4 pages

Bollinger Bands with KLineCharts

Uploaded by

Amit Yadav
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

FindScan – Frontend Intern Assignment:

Bollinger Bands (KLineCharts)


Goal: Build a production-ready Bollinger Bands indicator for our charting module using
KLineCharts only. The indicator must expose the specified settings (with defaults), render
correctly, and feel close to TradingView in behavior and UI.

1) Tech Constraints
●​ Required: React + [Link] + TypeScript + TailwindCSS + KLineCharts (indicator).
●​ Do not use any other charting library or paid component.
●​ You may use any basic helper/math packages if needed (or write your own small
utilities).

2) Features & Settings (all mandatory)


Implement Bollinger Bands with the following user-configurable settings. All settings are
mandatory and must have the defaults below.

Inputs

●​ Length: 20
●​ Basic MA Type: SMA (for this assignment, SMA support is sufficient; expose the field
with SMA as the default)
●​ Source: Close (use close price)
●​ StdDev (multiplier): 2
●​ Offset: 0 (shift the bands by N bars; positive values shift forward)

Style

Provide a Style tab similar to TradingView with at least:

●​ Basic (middle band): visibility toggle + color + line width + line style (solid/dashed)
●​ Upper band: visibility toggle + color + line width + line style
●​ Lower band: visibility toggle + color + line width + line style
●​ Background fill (area between Upper & Lower): visibility toggle + opacity

UI reference: In TradingView → Indicators → Bollinger Bands → Settings


(Inputs/Style). Replicate the spirit and simplicity of that UI using Tailwind (no need
to pixel-match).

3) Data
●​ Use demo OHLCV data (CSV/JSON) with at least 200 candles on any reasonable
timeframe (e.g., 1m/5m/1D).
●​ Render a standard candlestick series plus the Bollinger Bands overlay.

4) Calculations (Expected Formulas)


●​ Basis (middle band) = SMA(source, length)
●​ StdDev = standard deviation of the last length values of source (document clearly
whether you used population or sample; either is acceptable if consistent)
●​ Upper = Basis + (StdDev multiplier * StdDev)
●​ Lower = Basis - (StdDev multiplier * StdDev)
●​ Offset: shift the three series by offset bars on the chart

Recompute bands on every data update and on every input change. Updates should feel
instantaneous on the dataset size above.

5) UX Expectations
●​ Indicator can be added once via a simple button/menu.
●​ A Settings modal/panel with two tabs: Inputs and Style.
●​ Changing any setting updates the chart immediately (no page refresh).
●​ Sensible default colors; respect dark backgrounds.
●​ Tooltip/crosshair should show Basis/Upper/Lower values for the hovered candle.

6) Deliverables
1.​ GitHub repository (public or view-access link) or a ZIP with:
○​ Source code ([Link] + TS).
○​ [Link] including:
■​ Setup/run instructions (npm i && npm run dev).
■​ Short note on formulas and which StdDev variant you used.
■​ KLineCharts version.
■​ Two screenshots or a short GIF of the indicator + settings.
2.​ (Optional) Hosted demo (Vercel/Netlify) – helpful but not required.

7) Acceptance Criteria
●​ Correctness: Bands match expected behavior for the given inputs; Basis tracks MA,
Upper/Lower expand/contract with volatility; Offset shifts bands correctly.
●​ UI/UX: Clean, simple settings UI inspired by TradingView; visibility/opacity/line controls
function as expected.
●​ Performance: Smooth interaction on 200–1,000 candles (no jank on settings changes).
●​ Code Quality: Type-safe, modular (e.g., a small computeBollingerBands() utility),
readable structure, minimal coupling to page components.
●​ KLineCharts Only: No alternative charting libraries.

8) Suggested Project Structure (example)


/ ([Link] app)
/app
/[Link] # renders chart + add-indicator button + settings modal
/components
[Link] # wraps KLineCharts init & updates
[Link] # inputs + style UI
/lib
indicators/
[Link] # computeBollingerBands(data, options)
[Link] # OHLCV & indicator types
/public/data/[Link] # demo data
[Link]

9) Submission
●​ Share the repo/ZIP and (if available) live demo link.
●​ Include a brief note on any trade-offs or known issues.
●​ Deadline: Submit within 3 days of receiving this assignment.

10) Reference Links


●​ KLineCharts official docs/demo: [Link]
●​ TradingView (for UI reference): [Link]

11) Notes
●​ Feel free to structure components your way; the outline above is just an example.
●​ Keep the scope to the features above. If you’d like to add more polish, keep it isolated
and documented.

Common questions

Powered by AI

The assignment ensures correctness by requiring that the bands match expected behaviors for given inputs. Specific formulas are provided, such as the calculation of the basis (middle band) using SMA, and how the upper and lower bands are derived by applying the standard deviation multiplier to the standard deviation of the selected source's last length values. Correct calculations impact the final product by providing users with trustworthy indicators that accurately reflect volatility and trend conditions. This precision is crucial for technical analysts to make informed decisions based on the chart data .

The assignment's emphasis on modular and type-safe code aligns with modern software development practices, which prioritize maintainability, scalability, and reliability in front-end applications. Modularity allows developers to build reusable components, facilitating easier testing and debugging. Type-safe code reduces runtime errors by catching potential issues during the development phase, enhancing code reliability. Together, these practices ensure that the application is robust, easier to manage over time, and contributes to a higher overall code quality, which is critical in the fast-evolving landscape of front-end development .

Limiting the use to only KLineCharts and specified technologies like React, Next.js, TypeScript, and TailwindCSS ensures a streamlined development process focused on leveraging the strengths of these technologies. This impact is beneficial in maintaining a cohesive and standardized approach across the project, which reduces complexity and potential integration issues. However, it also restricts the flexibility developers might have in choosing tools that they find more efficient or familiar, potentially increasing the learning curve for those unfamiliar with KLineCharts. Nonetheless, these limitations enforce focus and can lead to deeper expertise in the mandated technologies .

The requirement to use demo OHLCV data and a standard candlestick series contributes to the effectiveness by ensuring that the Bollinger Bands indicator is tested and demonstrated with real-world-like conditions. This approach provides a realistic context for evaluating the indicator's functionality and performance. By using a standard format, developers can focus on the reliable computation and representation of the bands, ensuring they function correctly and provide accurate insights into market volatility, thus enhancing the credibility of the implementation .

The performance criteria specified include ensuring smooth interaction even with 200-1,000 candles, avoiding jank during settings changes. These criteria are crucial for maintaining a smooth user experience because any lag or delay when adjusting settings or rendering data can frustrate users and hinder their ability to make timely investment decisions. A responsive and seamless interface is essential for keeping users engaged and providing them with an efficient tool for real-time analysis .

The assignment ensures usability and clarity of the user interface by requiring a Style tab similar to TradingView, which includes toggles for visibility, color options, line width, and line style controls for each band. This approach simplifies the user experience by providing familiar UI components. Additionally, by respecting dark backgrounds and utilizing sensible default colors, the interface maintains readability and aesthetic appeal. The focus on immediate chart updates with setting changes ensures the interface is responsive and dynamic, enhancing user engagement .

The primary features and settings to be implemented include the Bollinger Bands with user-configurable settings such as Length, Basic MA Type, Source, StdDev (multiplier), and Offset. Style settings include options for visibility, color, line width, and line style for each band and the background fill. These contributions improve the functionality by allowing users to customize the appearance and behavior of the bands according to their analysis needs, offering a tailored and flexible charting experience. The ability to adjust these settings provides users with greater control over their technical analysis, enhancing the utility of the charting module .

The main technical constraints for building the Bollinger Bands indicator include the mandatory use of React, Next.js, TypeScript, TailwindCSS, and KLineCharts. Other charting libraries or paid components are not allowed. These constraints are significant as they ensure consistency in development practices, focus developers on specific technologies, and facilitate easier integration with existing systems. By adhering to these constraints, developers maintain compatibility with the specified tech stack and focus on utilizing the assigned libraries effectively .

The UX expectations include a simple button/menu to add the indicator and a settings modal with Inputs and Style tabs. It emphasizes immediate updates to the chart when settings are changed without requiring a page refresh, and includes sensible default colors that respect dark backgrounds. These expectations aim to mirror established industry standards by providing a seamless and intuitive experience similar to popular platforms like TradingView, ensuring that users can quickly adapt to the tool with minimal learning curve .

The proposed UI design intends to resemble TradingView by replicating its spirit and simplicity, particularly in the settings interface where users can control band visibility, color, line width, and style. This mimicry is significant for user adoption because TradingView is a widely recognized platform for technical analysis, known for its effective interface design. By resembling TradingView, the UI design leverages familiar elements, reducing the learning curve for users who are already accustomed to TradingView’s interface, thus facilitating smoother adoption and increasing user satisfaction .

You might also like