@dschz/solid-highcharts/dist/index.js

SolidJS wrapper for Highcharts

import { template, use, effect, className, style } from 'solid-js/web';
import { mergeProps, splitProps, onMount, createEffect, onCleanup } from 'solid-js';

// src/createChartComponent.tsx
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
var baseClass = "solid-highcharts";
var createChartComponent = (HighchartsModule, constructor = "chart") => {
  if (typeof HighchartsModule[constructor] !== "function") {
    throw new Error(`[solid-highcharts] Constructor "${constructor}" not found on Highcharts module. Did you import the correct variant (e.g., highstock, highmaps)?`);
  }
  return (props) => {
    let container;
    const _props = mergeProps({
      animation: true
    }, props);
    const [local, options] = splitProps(_props, ["style", "class", "ref", "animation", "onCreateChart"]);
    onMount(() => {
      local.ref?.(container);
      const chart = HighchartsModule[constructor](container, options, local.onCreateChart);
      createEffect(() => {
        chart.update(options, true, true, local.animation);
      });
      onCleanup(() => {
        chart.destroy();
      });
    });
    const classes = () => local.class ? `${baseClass} ${local.class}` : baseClass;
    return (() => {
      var _el$ = _tmpl$();
      var _ref$ = container;
      typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
      effect((_p$) => {
        var _v$ = classes(), _v$2 = local.style;
        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
        _p$.t = style(_el$, _v$2, _p$.t);
        return _p$;
      }, {
        e: void 0,
        t: void 0
      });
      return _el$;
    })();
  };
};

// src/index.tsx
var createChart = (HighchartsModule) => createChartComponent(HighchartsModule, "chart");
var createStockChart = (HighchartsModule) => createChartComponent(HighchartsModule, "stockChart");
var createMapChart = (HighchartsModule) => createChartComponent(HighchartsModule, "mapChart");
var createGanttChart = (HighchartsModule) => createChartComponent(HighchartsModule, "ganttChart");

export { createChart, createGanttChart, createMapChart, createStockChart };