@dschz/solid-highcharts
Version:
SolidJS wrapper for Highcharts
240 lines (235 loc) • 7.53 kB
TypeScript
import * as highcharts from 'highcharts';
import { AnimationOptionsObject } from 'highcharts';
import { JSX } from 'solid-js';
import * as highcharts_highcharts_gantt from 'highcharts/highcharts-gantt';
import * as highcharts_highmaps from 'highcharts/highmaps';
import * as highcharts_highstock from 'highcharts/highstock';
/**
* Represents the core Highcharts module type.
* This is the standard Highcharts library that provides basic chart functionality.
*
* @example
* ```typescript
* import Highcharts from 'highcharts';
* const Chart = createChart(Highcharts);
* ```
*/
type HighchartsCoreModule = typeof highcharts;
/**
* Represents the Highcharts Stock module type.
* This module extends Highcharts with advanced financial charting capabilities.
*
* @example
* ```typescript
* import Highcharts from 'highcharts/highstock';
* const StockChart = createStockChart(Highcharts);
* ```
*/
type HighchartsStockModule = typeof highcharts_highstock;
/**
* Represents the Highcharts Maps module type.
* This module provides geographical mapping and visualization capabilities.
*
* @example
* ```typescript
* import Highcharts from 'highcharts/highmaps';
* const MapChart = createMapChart(Highcharts);
* ```
*/
type HighchartsMapModule = typeof highcharts_highmaps;
/**
* Represents the Highcharts Gantt module type.
* This module provides project management and timeline visualization capabilities.
*
* @example
* ```typescript
* import Highcharts from 'highcharts/highcharts-gantt';
* const GanttChart = createGanttChart(Highcharts);
* ```
*/
type HighchartsGanttModule = typeof highcharts_highcharts_gantt;
type HighchartOptions = Highcharts.Options & {
/**
* Whether to animate the chart updates.
* If true, the chart will animate the updates.
* If false, the chart will not animate the updates.
* If an object, it will be passed to the Highcharts.Animation constructor.
*/
readonly animation?: boolean | Partial<AnimationOptionsObject>;
};
/**
* Props for Highcharts chart components.
* Extends Highcharts.Options with additional SolidJS-specific properties.
*
* @example
* ```tsx
* const chartProps: HighchartsComponentProps = {
* title: { text: 'My Chart' },
* series: [{ type: 'line', data: [1, 2, 3] }],
* onCreateChart: (chart) => console.log('Chart created:', chart),
* class: 'my-chart-container'
* };
* ```
*/
type HighchartsComponentProps = HighchartOptions & {
/** CSS class name to apply to the chart container. */
readonly class?: string;
/** CSS styles to apply to the chart container. */
readonly style?: JSX.CSSProperties;
/**
* Ref callback to access the chart container div element.
* Called with the HTMLDivElement that contains the chart.
*/
readonly ref?: (container: HTMLDivElement) => void;
/**
* Callback function called when the chart is successfully created.
* Receives the Highcharts chart instance as a parameter.
*/
readonly onCreateChart?: Highcharts.ChartCallbackFunction;
};
/**
* The Highcharts component.
*
* @param props - The props for the chart component.
* @returns A JSX element that renders the chart.
*/
type HighchartsComponent = (props: HighchartsComponentProps) => JSX.Element;
/**
* Creates a SolidJS component for rendering standard Highcharts charts.
*
* This is a convenience function that pre-configures `createChartComponent`
* with the "chart" constructor for standard chart types.
*
* @param HighchartsModule - The core Highcharts module
* @returns A SolidJS component for rendering standard charts
*
* @example
* ```tsx
* import Highcharts from 'highcharts';
* import { createChart } from '@dschz/solid-highcharts';
*
* const Chart = createChart(Highcharts);
*
* function App() {
* return (
* <Chart
* title={{ text: 'Sales Data' }}
* series={[{
* type: 'line',
* name: 'Sales',
* data: [29.9, 71.5, 106.4, 129.2]
* }]}
* />
* );
* }
* ```
*/
declare const createChart: (HighchartsModule: HighchartsCoreModule) => HighchartsComponent;
/**
* Creates a SolidJS component for rendering Highcharts Stock charts.
*
* This is a convenience function that pre-configures `createChartComponent`
* with the "stockChart" constructor for financial and time-series data visualization.
*
* @param HighchartsModule - The Highcharts Stock module
* @returns A SolidJS component for rendering stock charts
*
* @example
* ```tsx
* import Highcharts from 'highcharts/highstock';
* import { createStockChart } from '@dschz/solid-highcharts';
*
* const StockChart = createStockChart(Highcharts);
*
* function StockApp() {
* return (
* <StockChart
* title={{ text: 'AAPL Stock Price' }}
* series={[{
* type: 'candlestick',
* name: 'AAPL',
* data: ohlcData // [timestamp, open, high, low, close]
* }]}
* navigator={{ enabled: true }}
* scrollbar={{ enabled: true }}
* />
* );
* }
* ```
*/
declare const createStockChart: (HighchartsModule: HighchartsStockModule) => HighchartsComponent;
/**
* Creates a SolidJS component for rendering Highcharts Maps.
*
* This is a convenience function that pre-configures `createChartComponent`
* with the "mapChart" constructor for geographical data visualization.
*
* @param HighchartsModule - The Highcharts Maps module
* @returns A SolidJS component for rendering map charts
*
* @example
* ```tsx
* import Highcharts from 'highcharts/highmaps';
* import worldMap from '@highcharts/map-collection/custom/world.geo.json';
* import { createMapChart } from '@dschz/solid-highcharts';
*
* const MapChart = createMapChart(Highcharts);
*
* function MapApp() {
* return (
* <MapChart
* title={{ text: 'World Population Density' }}
* mapNavigation={{ enabled: true }}
* series={[{
* type: 'map',
* name: 'Countries',
* mapData: worldMap,
* data: populationData
* }]}
* />
* );
* }
* ```
*/
declare const createMapChart: (HighchartsModule: HighchartsMapModule) => HighchartsComponent;
/**
* Creates a SolidJS component for rendering Highcharts Gantt charts.
*
* This is a convenience function that pre-configures `createChartComponent`
* with the "ganttChart" constructor for project management and timeline visualization.
*
* @param HighchartsModule - The Highcharts Gantt module
* @returns A SolidJS component for rendering Gantt charts
*
* @example
* ```tsx
* import Highcharts from 'highcharts/highcharts-gantt';
* import { createGanttChart } from '@dschz/solid-highcharts';
*
* const GanttChart = createGanttChart(Highcharts);
*
* function ProjectApp() {
* return (
* <GanttChart
* title={{ text: 'Project Timeline' }}
* series={[{
* name: 'Project Tasks',
* data: [{
* name: 'Task 1',
* start: Date.UTC(2024, 0, 1),
* end: Date.UTC(2024, 0, 15),
* completed: 0.5
* }, {
* name: 'Task 2',
* start: Date.UTC(2024, 0, 10),
* end: Date.UTC(2024, 0, 25),
* dependency: 'Task 1'
* }]
* }]}
* />
* );
* }
* ```
*/
declare const createGanttChart: (HighchartsModule: HighchartsGanttModule) => HighchartsComponent;
export { type HighchartsComponent, type HighchartsComponentProps, createChart, createGanttChart, createMapChart, createStockChart };