@iccandle/news-widget

React components for the TradingView Charting Library: chart wrapper and selector/scanner UI.

NewsWidget

NewsWidget wraps a TradingView chart instance and adds an economic calendar analysis panel. It displays news events as timescale marks on the chart and draws pip-range visualizations (high/low rectangles, trend lines, and pip annotations) around selected events, allowing users to compare historical price reactions across similar news releases.

Props

| Prop | Type | Description | | ---------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------- | | chartWidget | IChartingLibraryWidget \| null | The TradingView chart widget instance (from the charting library). | | children | ReactNode | Content rendered above the scanner UI (e.g. the chart container). | | widgetKey | string | API key used to authenticate requests to the ICCandle widget service. | | defaultSymbol | string | Default trading symbol to use when loading news events (e.g. "XAU_USD"). | | theme | "dark" \| "light" \| "system" | Color theme for the widget. "system" follows the OS preference. | | chartInterval | "1" \| "5" \| "15" \| "30" \| "60" | Chart candle interval in minutes. Defaults to "15". |

Usage

import { NewsWidget } from "@iccandle/news-widget"; // or from your path, e.g. "@/tradingview/news-widget"

function NewsChart() {
  const [chartWidget, setChartWidget] = useState<IChartingLibraryWidget | null>(
    null,
  );

  return (
    <NewsWidget chartWidget={chartWidget} widgetKey={widgetKey} theme={theme} chartInterval={chartInterval}>
      <TradingViewWidget onChartReady={(widget) => setChartWidget(widget)} />
    </NewsWidget>
  );
}

Datafeed integration

To display news events as timescale marks on the TradingView chart, add the following implementation to your data-feed.ts (inside the dataFeed object), replacing the existing getTimescaleMarks stub:

getTimescaleMarks: async (
  symbolInfo: LibrarySymbolInfo,
  from: number,
  to: number,
  onResult: GetMarksCallback<TimescaleMark>
) => {
  const marks: TimescaleMark[] = [];

  // ... add your code here
  try {
    const allNewsEvents = JSON.parse(
      localStorage.getItem("tv:current-news-event") || "[]"
    ) as NewsEventType[];

    allNewsEvents?.forEach(
      ({ id, timestamp, event_name, currency }) => {
        if (!id || !Number.isFinite(timestamp) || timestamp <= 0) return;
        const hasAlready = marks.some((m) => String(m.id) === String(id));
        if (hasAlready) return;

        marks.push({
          id,
          time: timestamp / 1000,
          color: "green",
          label: event_name.slice(0, 1) || "N",
          tooltip: [event_name],
          ...(currency
            ? { imageUrl: `/images/symbols/${currency}.svg` }
            : {}),
          showLabelWhenImageLoaded: true,
        });
      },
    );
  } catch {
    // no-op
  }

  onResult(marks);
}