leafer-echarts 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sergei Malygin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# leafer-echarts
+
+[![npm version](https://img.shields.io/npm/v/leafer-echarts.svg)](https://www.npmjs.com/package/leafer-echarts)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A custom Leafer UI element that renders **[ECharts](https://echarts.apache.org/)** charts as **SVG** inside a Leafer canvas.  
+Perfect for adding interactive data visualizations to your Leafer applications.
+
+## ✨ Features
+
+- Render any ECharts option as a scalable SVG image
+- Fully reactive – update chart data with `updateOption()`
+- Supports all ECharts features (tooltips, legends, animations – though animations are disabled in SSR mode)
+- Integrates seamlessly with Leafer UI's event system (draggable, editable, etc.)
+- Easy to use – just import and instantiate
+
+## 📦 Installation
+
+```bash
+npm install leafer-echarts
+```
+
+## Example
+```ts
+import { Leafer } from 'leafer-ui';
+import { LeaferECharts, defaultBarChartOption } from 'leafer-echarts';
+
+const leafer = new Leafer({ view: 'canvas' });
+
+const chart = new LeaferECharts({
+  option: defaultBarChartOption,
+  width: 600,
+  height: 400,
+  draggable: true,
+  editable: false,
+});
+
+leafer.add(chart);

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+import { Image } from 'leafer-ui';
+import { EChartsOption } from 'echarts';
+
+type LeaferEChartOptions = {
+    option?: EChartsOption;
+    width?: number;
+    height?: number;
+    draggable?: boolean;
+    editable?: boolean;
+};
+declare class LeaferECharts extends Image {
+    get __tag(): string;
+    option: EChartsOption;
+    constructor(options?: LeaferEChartOptions);
+    static renderSVG(option: EChartsOption, width: number, height: number): string;
+    updateOption(newOption: EChartsOption): void;
+}
+
+/** Mock bar chart (ECharts example) */
+declare const defaultBarChartOption: EChartsOption;
+
+export { type LeaferEChartOptions, LeaferECharts, defaultBarChartOption };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { Image } from 'leafer-ui';
+import { EChartsOption } from 'echarts';
+
+type LeaferEChartOptions = {
+    option?: EChartsOption;
+    width?: number;
+    height?: number;
+    draggable?: boolean;
+    editable?: boolean;
+};
+declare class LeaferECharts extends Image {
+    get __tag(): string;
+    option: EChartsOption;
+    constructor(options?: LeaferEChartOptions);
+    static renderSVG(option: EChartsOption, width: number, height: number): string;
+    updateOption(newOption: EChartsOption): void;
+}
+
+/** Mock bar chart (ECharts example) */
+declare const defaultBarChartOption: EChartsOption;
+
+export { type LeaferEChartOptions, LeaferECharts, defaultBarChartOption };

package/dist/index.js

@@ -0,0 +1,138 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LeaferECharts: () => LeaferECharts_default,
+  defaultBarChartOption: () => defaultBarChartOption
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/LeaferECharts.ts
+var import_leafer_ui = require("leafer-ui");
+var import_echarts = require("echarts");
+var LeaferECharts = class extends import_leafer_ui.Image {
+  get __tag() {
+    return "LeaferECharts";
+  }
+  constructor(options = {}) {
+    const {
+      option = {},
+      width = 400,
+      height = 400,
+      draggable = true,
+      editable = false
+    } = options;
+    const svgString = LeaferECharts.renderSVG(option, width, height);
+    const url = import_leafer_ui.Platform.toURL(svgString, "svg");
+    super({
+      width,
+      height,
+      draggable,
+      editable,
+      url
+    });
+    this.option = option;
+  }
+  static renderSVG(option, width, height) {
+    const chart = (0, import_echarts.init)(null, null, {
+      renderer: "svg",
+      ssr: true,
+      width,
+      height
+    });
+    chart.setOption({
+      animation: false,
+      animationDuration: 0,
+      animationDurationUpdate: 0,
+      animationEasing: "linear",
+      ...option
+    });
+    const svg = chart.renderToSVGString();
+    chart.dispose();
+    return svg;
+  }
+  updateOption(newOption) {
+    this.option = newOption;
+    const w = this.width ?? 400;
+    const h = this.height ?? 400;
+    const svgString = LeaferECharts.renderSVG(newOption, w, h);
+    this.url = import_leafer_ui.Platform.toURL(svgString, "svg");
+    this.forceRender();
+  }
+};
+__decorateClass([
+  (0, import_leafer_ui.boundsType)({})
+], LeaferECharts.prototype, "option", 2);
+LeaferECharts = __decorateClass([
+  (0, import_leafer_ui.registerUI)()
+], LeaferECharts);
+var LeaferECharts_default = LeaferECharts;
+
+// src/mockChartOption.ts
+var defaultBarChartOption = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow"
+    }
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      axisTick: {
+        alignWithLabel: true
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: "value"
+    }
+  ],
+  series: [
+    {
+      name: "Direct",
+      type: "bar",
+      barWidth: "60%",
+      data: [10, 52, 200, 334, 390, 330, 220]
+    }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LeaferECharts,
+  defaultBarChartOption
+});

package/dist/index.mjs

@@ -0,0 +1,113 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/LeaferECharts.ts
+import { Image, Platform, boundsType, registerUI } from "leafer-ui";
+import { init as initEChart } from "echarts";
+var LeaferECharts = class extends Image {
+  get __tag() {
+    return "LeaferECharts";
+  }
+  constructor(options = {}) {
+    const {
+      option = {},
+      width = 400,
+      height = 400,
+      draggable = true,
+      editable = false
+    } = options;
+    const svgString = LeaferECharts.renderSVG(option, width, height);
+    const url = Platform.toURL(svgString, "svg");
+    super({
+      width,
+      height,
+      draggable,
+      editable,
+      url
+    });
+    this.option = option;
+  }
+  static renderSVG(option, width, height) {
+    const chart = initEChart(null, null, {
+      renderer: "svg",
+      ssr: true,
+      width,
+      height
+    });
+    chart.setOption({
+      animation: false,
+      animationDuration: 0,
+      animationDurationUpdate: 0,
+      animationEasing: "linear",
+      ...option
+    });
+    const svg = chart.renderToSVGString();
+    chart.dispose();
+    return svg;
+  }
+  updateOption(newOption) {
+    this.option = newOption;
+    const w = this.width ?? 400;
+    const h = this.height ?? 400;
+    const svgString = LeaferECharts.renderSVG(newOption, w, h);
+    this.url = Platform.toURL(svgString, "svg");
+    this.forceRender();
+  }
+};
+__decorateClass([
+  boundsType({})
+], LeaferECharts.prototype, "option", 2);
+LeaferECharts = __decorateClass([
+  registerUI()
+], LeaferECharts);
+var LeaferECharts_default = LeaferECharts;
+
+// src/mockChartOption.ts
+var defaultBarChartOption = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow"
+    }
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      axisTick: {
+        alignWithLabel: true
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: "value"
+    }
+  ],
+  series: [
+    {
+      name: "Direct",
+      type: "bar",
+      barWidth: "60%",
+      data: [10, 52, 200, 334, 390, 330, 220]
+    }
+  ]
+};
+export {
+  LeaferECharts_default as LeaferECharts,
+  defaultBarChartOption
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "leafer-echarts",
+  "version": "0.1.0",
+  "description": "ECharts component for Leafer UI – render interactive charts as SVG inside Leafer canvas",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "echarts": ">=5.0.0 <6.0.0",
+    "leafer-ui": ">=2.0.0"
+  },
+  "devDependencies": {
+    "echarts": "^5.6.0",
+    "leafer-ui": "^2.0.8",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "leafer",
+    "leafer-ui",
+    "echarts",
+    "chart",
+    "svg",
+    "canvas"
+  ],
+  "author": "Sergei Malygin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sedrew/leafer-echarts"
+  }
+}