@circutor/charts 0.1.0 → 0.2.0

package/dist/esm/charts.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index--cwjvYaF.js';
-export { s as setNonce } from './index--cwjvYaF.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-BPCJmLvQ.js';
+export { s as setNonce } from './index-BPCJmLvQ.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["itic-chart",[[1,"itic-chart",{"groups":[1]},null,{"groups":[{"onGroupsChange":0}]}]]]], options);
+  return bootstrapLazy([["itic-chart",[[1,"itic-chart",{"groups":[1],"xAxisName":[1,"x-axis-name"],"yAxisName":[1,"y-axis-name"],"tooltipFormatter":[16]},null,{"groups":[{"onOptionsChange":0}],"xAxisName":[{"onOptionsChange":0}],"yAxisName":[{"onOptionsChange":0}],"tooltipFormatter":[{"onOptionsChange":0}]}]]]], options);
 });

package/dist/esm/{index--cwjvYaF.js → index-BPCJmLvQ.js}

@@ -471,6 +471,25 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -1439,4 +1458,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/itic-chart.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index--cwjvYaF.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BPCJmLvQ.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -45141,36 +45141,63 @@ function escapeHtml(value) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
-function formatTooltip(groupName, [duration, voltage, ts]) {
+/** Default tooltip, in English. Escapes every value, since they come from the consumer. */
+const defaultTooltipFormatter = ({ duration, voltage, ts }, { groupName }) => {
     const rows = {
-        phase: escapeHtml(groupName),
-        duration: `${duration} ms`,
-        voltage: `${Math.round(voltage * 10) / 10}%`,
-        ts: dayjs(ts).locale('en').format('DD MMM, HH:mm:ss.SSS'),
+        phase: escapeHtml(String(groupName)),
+        duration: `${escapeHtml(String(duration))} ms`,
+        voltage: `${escapeHtml(String(Math.round(voltage * 10) / 10))}%`,
+        ts: escapeHtml(dayjs(ts).locale('en').format('DD MMM, HH:mm:ss.SSS')),
     };
     return Object.entries(rows)
         .map(([label, value]) => ` <strong>${label}</strong>: ${value}`)
         .join('<br/>');
-}
-function buildChartOptions(groups) {
-    return Object.assign(Object.assign({}, BASE_OPTIONS), { series: [
+};
+const DEFAULT_SETTINGS = {
+    xAxisName: 'Duration (ms)',
+    yAxisName: 'Voltage (% of nominal voltage)',
+    tooltipFormatter: defaultTooltipFormatter,
+};
+const isClickable = (point) => point.clickable !== false;
+function buildChartOptions(groups, settings = DEFAULT_SETTINGS) {
+    return Object.assign(Object.assign({}, BASE_OPTIONS), { xAxis: Object.assign(Object.assign({}, BASE_OPTIONS.xAxis), { name: settings.xAxisName }), yAxis: Object.assign(Object.assign({}, BASE_OPTIONS.yAxis), { name: settings.yAxisName }), series: [
             ...CURVE_SERIES,
-            ...groups.map(({ groupName, points, color }) => ({
+            ...groups.map((group) => ({
                 type: 'scatter',
-                name: groupName,
-                data: points.map(point => [point.duration, point.voltage, point.ts]),
+                name: group.groupName,
+                // ECharts 6 reads `cursor` per data item, although its types only declare it per series
+                data: group.points.map(point => ({
+                    value: [point.duration, point.voltage],
+                    cursor: isClickable(point) ? 'pointer' : 'default',
+                })),
                 symbolSize: 12,
                 z: 4,
                 itemStyle: {
-                    color,
+                    color: group.color,
                     opacity: 1,
                 },
                 tooltip: {
-                    formatter: params => formatTooltip(groupName, params.value),
+                    formatter: params => settings.tooltipFormatter(group.points[params.dataIndex], group),
                 },
             })),
         ] });
 }
+/**
+ * Maps an ECharts click back to the original point and group, which `buildChartOptions` draws as
+ * scatter series after the ITIC curve series, in the same order as `groups`.
+ * Returns `undefined` for clicks outside the points and on points that aren't clickable.
+ */
+function findClickedPoint(groups, { componentType, seriesIndex, dataIndex }) {
+    if (componentType !== 'series' || seriesIndex == null || dataIndex == null) {
+        return undefined;
+    }
+    const group = groups[seriesIndex - CURVE_SERIES.length];
+    const point = group === null || group === void 0 ? void 0 : group.points[dataIndex];
+    if (!point || !isClickable(point)) {
+        return undefined;
+    }
+    return { point, group };
+}
 const ITIC_CURVE_PROHIBITED_REGION = [
     [0.167, 500],
     [1, 200],
@@ -45197,7 +45224,8 @@ const BASE_OPTIONS = {
     },
     // ECharts 6 moved the default legend to the bottom; keep it on top as in previous versions
     legend: { top: 0 },
-    tooltip: {},
+    // Outside the shadow root, so containers with `overflow: hidden` don't clip it. Its styles are inline.
+    tooltip: { appendTo: 'body' },
     textStyle: {
         fontFamily: 'CDS-Regular, Arial',
     },
@@ -45205,7 +45233,6 @@ const BASE_OPTIONS = {
         type: 'log',
         min: 0.1,
         max: 100000,
-        name: 'Duration (ms)',
         nameGap: 30,
         nameLocation: 'middle',
         nameTextStyle: {
@@ -45221,7 +45248,6 @@ const BASE_OPTIONS = {
             fontSize: 16,
             fontWeight: 'bold',
         },
-        name: 'Voltage (% of nominal voltage)',
         nameRotate: 90,
         nameGap: 40,
         nameLocation: 'middle',
@@ -45326,18 +45352,32 @@ const CURVE_SERIES = [
     },
 ];
 
-const iticChartCss = () => `:host{display:block;height:400px}.chart{width:100%;height:100%}`;
+const iticChartCss = () => `:host{display:block;height:400px;background:var(--itic-chart-background, transparent)}.chart{width:100%;height:100%}`;
 
 // Register only what this chart uses, so bundles don't ship all of ECharts
 use([install$9, install$7, install$5, install$1, install$4, install]);
 const IticChart = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.pointClick = createEvent(this, "pointClick");
+        /**
+         * Name of the duration (X) axis.
+         */
+        this.xAxisName = DEFAULT_SETTINGS.xAxisName;
+        /**
+         * Name of the voltage (Y) axis.
+         */
+        this.yAxisName = DEFAULT_SETTINGS.yAxisName;
+        this.parsedGroups = [];
     }
-    onGroupsChange() {
+    onOptionsChange() {
         this.updateChart();
     }
     connectedCallback() {
+        // The chart is a canvas: expose it as an image, labelled with `aria-label`, unless the consumer sets a role
+        if (!this.el.hasAttribute('role')) {
+            this.el.setAttribute('role', 'img');
+        }
         // componentDidLoad only fires once, so re-create the chart when the element is re-attached
         this.initChart();
     }
@@ -45356,6 +45396,12 @@ const IticChart = class {
             return;
         }
         this.chart = init(this.container);
+        this.chart.on('click', params => {
+            const detail = findClickedPoint(this.parsedGroups, params);
+            if (detail) {
+                this.pointClick.emit(detail);
+            }
+        });
         if (typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver(() => { var _a; return (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resize(); });
             this.resizeObserver.observe(this.container);
@@ -45363,24 +45409,40 @@ const IticChart = class {
         this.updateChart();
     }
     updateChart() {
+        var _a;
         if (!this.chart) {
             return;
         }
-        let groups = [];
+        this.parsedGroups = [];
         try {
-            groups = parseGroups(this.groups);
+            this.parsedGroups = parseGroups(this.groups);
         }
         catch (error) {
             console.error('[itic-chart] Invalid "groups" prop:', error);
         }
-        this.chart.setOption(buildChartOptions(groups), { notMerge: true });
+        const options = buildChartOptions(this.parsedGroups, {
+            xAxisName: this.xAxisName,
+            yAxisName: this.yAxisName,
+            tooltipFormatter: (_a = this.tooltipFormatter) !== null && _a !== void 0 ? _a : DEFAULT_SETTINGS.tooltipFormatter,
+        });
+        this.chart.setOption(options, { notMerge: true });
     }
     render() {
-        return h("div", { key: '98e14b7d6df922dc2a17dd09913bfad089ec4bf2', class: "chart", ref: el => (this.container = el) });
+        return h("div", { key: '53914c2232775d69a35b846005931c5e20f2eee2', class: "chart", ref: el => (this.container = el) });
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "groups": [{
-                "onGroupsChange": 0
+                "onOptionsChange": 0
+            }],
+        "xAxisName": [{
+                "onOptionsChange": 0
+            }],
+        "yAxisName": [{
+                "onOptionsChange": 0
+            }],
+        "tooltipFormatter": [{
+                "onOptionsChange": 0
             }]
     }; }
 };

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index--cwjvYaF.js';
-export { s as setNonce } from './index--cwjvYaF.js';
+import { b as bootstrapLazy } from './index-BPCJmLvQ.js';
+export { s as setNonce } from './index-BPCJmLvQ.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["itic-chart",[[1,"itic-chart",{"groups":[1]},null,{"groups":[{"onGroupsChange":0}]}]]]], options);
+  return bootstrapLazy([["itic-chart",[[1,"itic-chart",{"groups":[1],"xAxisName":[1,"x-axis-name"],"yAxisName":[1,"y-axis-name"],"tooltipFormatter":[16]},null,{"groups":[{"onOptionsChange":0}],"xAxisName":[{"onOptionsChange":0}],"yAxisName":[{"onOptionsChange":0}],"tooltipFormatter":[{"onOptionsChange":0}]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/itic-chart/index.d.ts

@@ -1,13 +1,36 @@
-import { type ITICChartMarks } from './itic-chart.options';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ITICChartMarks, type ITICPointClickDetail, type ITICTooltipFormatter } from './itic-chart.options';
 export declare class IticChart {
+    el: HTMLElement;
     /**
-     * point groups
+     * Point groups, as an array or a JSON string. Extra fields in groups and points are kept and passed
+     * back in `pointClick` and `tooltipFormatter`.
      */
     groups: ITICChartMarks[] | string;
+    /**
+     * Name of the duration (X) axis.
+     */
+    xAxisName: string;
+    /**
+     * Name of the voltage (Y) axis.
+     */
+    yAxisName: string;
+    /**
+     * Returns the HTML of a point's tooltip. JS/React property only (not an HTML attribute).
+     * The HTML is inserted as is: escaping the values is up to the formatter.
+     * Defaults to an English tooltip with phase, duration, voltage and timestamp.
+     */
+    tooltipFormatter?: ITICTooltipFormatter;
+    /**
+     * Emitted when a clickable point is clicked (`clickable` isn't `false`). `detail` holds the original
+     * point and group objects.
+     */
+    pointClick: EventEmitter<ITICPointClickDetail>;
     private container?;
     private chart?;
     private resizeObserver?;
-    onGroupsChange(): void;
+    private parsedGroups;
+    onOptionsChange(): void;
     connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/itic-chart/itic-chart.options.d.ts

@@ -3,11 +3,32 @@ export type ITICPoint = {
     duration: number;
     voltage: number;
     ts: string;
+    /** Whether clicking the point emits `pointClick` and shows a pointer cursor. Defaults to `true`. */
+    clickable?: boolean;
+    /** Any other field is kept as is and passed back in `pointClick` and `tooltipFormatter`. */
+    [key: string]: unknown;
 };
 export type ITICChartMarks = {
     points: ITICPoint[];
     color: string;
     groupName: string;
+    /** Any other field is kept as is and passed back in `pointClick` and `tooltipFormatter`. */
+    [key: string]: unknown;
+};
+/** `detail` of the `pointClick` event: the objects passed in `groups`, not copies. */
+export type ITICPointClickDetail = {
+    point: ITICPoint;
+    group: ITICChartMarks;
+};
+/**
+ * Returns the tooltip content of a point as HTML. The result is inserted as is: escape any value
+ * that may contain HTML.
+ */
+export type ITICTooltipFormatter = (point: ITICPoint, group: ITICChartMarks) => string;
+export type ITICChartSettings = {
+    xAxisName: string;
+    yAxisName: string;
+    tooltipFormatter: ITICTooltipFormatter;
 };
 /**
  * Normalizes the `groups` prop, which arrives as an array from JS/React
@@ -15,5 +36,18 @@ export type ITICChartMarks = {
  */
 export declare function parseGroups(groups: ITICChartMarks[] | string | null | undefined): ITICChartMarks[];
 export declare function escapeHtml(value: string): string;
-export declare function formatTooltip(groupName: string, [duration, voltage, ts]: [number, number, string]): string;
-export declare function buildChartOptions(groups: ITICChartMarks[]): EChartsOption;
+/** Default tooltip, in English. Escapes every value, since they come from the consumer. */
+export declare const defaultTooltipFormatter: ITICTooltipFormatter;
+export declare const DEFAULT_SETTINGS: ITICChartSettings;
+export declare const isClickable: (point: ITICPoint) => boolean;
+export declare function buildChartOptions(groups: ITICChartMarks[], settings?: ITICChartSettings): EChartsOption;
+/**
+ * Maps an ECharts click back to the original point and group, which `buildChartOptions` draws as
+ * scatter series after the ITIC curve series, in the same order as `groups`.
+ * Returns `undefined` for clicks outside the points and on points that aren't clickable.
+ */
+export declare function findClickedPoint(groups: ITICChartMarks[], { componentType, seriesIndex, dataIndex }: {
+    componentType?: string;
+    seriesIndex?: number;
+    dataIndex?: number;
+}): ITICPointClickDetail | undefined;

package/dist/types/components.d.ts

@@ -5,18 +5,47 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ITICChartMarks } from "./components/itic-chart/itic-chart.options";
-export { ITICChartMarks } from "./components/itic-chart/itic-chart.options";
+import { ITICChartMarks, ITICPointClickDetail, ITICTooltipFormatter } from "./components/itic-chart/itic-chart.options";
+export { ITICChartMarks, ITICPointClickDetail, ITICTooltipFormatter } from "./components/itic-chart/itic-chart.options";
 export namespace Components {
     interface IticChart {
         /**
-          * point groups
+          * Point groups, as an array or a JSON string. Extra fields in groups and points are kept and passed back in `pointClick` and `tooltipFormatter`.
          */
         "groups": ITICChartMarks[] | string;
+        /**
+          * Returns the HTML of a point's tooltip. JS/React property only (not an HTML attribute). The HTML is inserted as is: escaping the values is up to the formatter. Defaults to an English tooltip with phase, duration, voltage and timestamp.
+         */
+        "tooltipFormatter"?: ITICTooltipFormatter;
+        /**
+          * Name of the duration (X) axis.
+          * @default 'Duration (ms)'
+         */
+        "xAxisName": string;
+        /**
+          * Name of the voltage (Y) axis.
+          * @default 'Voltage (% of nominal voltage)'
+         */
+        "yAxisName": string;
     }
 }
+export interface IticChartCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIticChartElement;
+}
 declare global {
+    interface HTMLIticChartElementEventMap {
+        "pointClick": ITICPointClickDetail;
+    }
     interface HTMLIticChartElement extends Components.IticChart, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIticChartElementEventMap>(type: K, listener: (this: HTMLIticChartElement, ev: IticChartCustomEvent<HTMLIticChartElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIticChartElementEventMap>(type: K, listener: (this: HTMLIticChartElement, ev: IticChartCustomEvent<HTMLIticChartElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIticChartElement: {
         prototype: HTMLIticChartElement;
@@ -29,13 +58,33 @@ declare global {
 declare namespace LocalJSX {
     interface IticChart {
         /**
-          * point groups
+          * Point groups, as an array or a JSON string. Extra fields in groups and points are kept and passed back in `pointClick` and `tooltipFormatter`.
          */
         "groups"?: ITICChartMarks[] | string;
+        /**
+          * Emitted when a clickable point is clicked (`clickable` isn't `false`). `detail` holds the original point and group objects.
+         */
+        "onPointClick"?: (event: IticChartCustomEvent<ITICPointClickDetail>) => void;
+        /**
+          * Returns the HTML of a point's tooltip. JS/React property only (not an HTML attribute). The HTML is inserted as is: escaping the values is up to the formatter. Defaults to an English tooltip with phase, duration, voltage and timestamp.
+         */
+        "tooltipFormatter"?: ITICTooltipFormatter;
+        /**
+          * Name of the duration (X) axis.
+          * @default 'Duration (ms)'
+         */
+        "xAxisName"?: string;
+        /**
+          * Name of the voltage (Y) axis.
+          * @default 'Voltage (% of nominal voltage)'
+         */
+        "yAxisName"?: string;
     }
 
     interface IticChartAttributes {
         "groups": ITICChartMarks[] | string;
+        "xAxisName": string;
+        "yAxisName": string;
     }
 
     interface IntrinsicElements {

package/dist/types/index.d.ts

@@ -8,4 +8,4 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export type * from './components';
-export type { ITICChartMarks, ITICPoint } from './components/itic-chart/itic-chart.options';
+export type { ITICChartMarks, ITICPoint, ITICPointClickDetail, ITICTooltipFormatter, } from './components/itic-chart/itic-chart.options';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@circutor/charts",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Charts used by the Circutor Cloud team, as framework-agnostic Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -21,9 +21,13 @@
       "types": "./dist/*",
       "import": "./dist/*"
     },
+    "./dist/bundler": {
+      "types": "./dist/bundler/index.d.ts",
+      "import": "./dist/bundler/index.js"
+    },
     "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
+      "types": "./dist/bundler/*.d.ts",
+      "import": "./dist/bundler/*.js"
     },
     "./loader": {
       "types": "./loader/index.d.ts",
@@ -40,7 +44,7 @@
     "loader/"
   ],
   "scripts": {
-    "build": "stencil build",
+    "build": "stencil build && stencil build --config stencil.config.bundler.ts && node ../../scripts/check-dist.mjs",
     "start": "stencil build --dev --watch --serve",
     "test:unit": "vitest run --project spec",
     "test:unit:watch": "vitest --project spec",
@@ -49,7 +53,9 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.13"
+  },
+  "peerDependencies": {
     "echarts": "^6.1.0"
   },
   "devDependencies": {
@@ -59,9 +65,10 @@
     "@types/node": "^22.20.5",
     "@vitest/browser-playwright": "5.0.5",
     "@vitest/coverage-v8": "^5.0.5",
+    "echarts": "^6.1.0",
     "playwright": "1.64.1",
     "vitest": "^5.0.5"
   },
   "license": "MIT",
-  "gitHead": "44a514e1c49b34d4ab2a9e52d1354c3753c76e0b"
+  "gitHead": "8a3014c8d5a5691aa784640a5ad5008c661e7a57"
 }