Poc/pxweb2 105 standalone chart

[MikaelNordberg]

Build Web component that wrap the LineChart react component so it can be used standalone outside of PxWeb in for example a static html page.

1. Build command

• In package.json, build:web-component (npm run build:web-component) runs Vite with vite.web-component.config.ts.

2. What the build does

• Uses web-component.ts as entrypoint.
• Bundles a web component wrapper around the existing LineChart React component.

3. Build output

• Outputs to dist/web-component:
• pxweb-line-chart.wc.js
• pxweb-line-chart.wc.css

4. Main file roles

• web-component.ts: bootstraps and registers the web component API.
• PxwebLineChartElement.tsx: defines custom element (the wrapper).
• StandaloneLineChart.tsx: standalone React wrapper with loading/error states.
• LineChart.tsx: actual chart rendering logic.
• useStandalonePxTableData.ts and loadPxTableData.ts: data loading and mapping.
• verify-iis.html: Example html file of how to use the web component in a static html file.

5. End-to-end flow

• LineChart is wrapped in StandaloneLineChart, which is mounted by PxwebLineChartElement (web component).
• Host page uses <pxweb-line-chart data-url="..."></pxweb-line-chart>.
• Component fetches data, maps it to PxTable, and renders the wrapped LineChart.

How to test the web component

1. Copy the following files to your web site:

• pxweb-line-chart.wc.js
• pxweb-line-chart.wc.css
• verify-iis.html

2. In verify-iis.html, replace:

• API_BASE_URL
• TABLE_ID

3. Browse to the page through IIS