@circutor/charts 0.1.0 → 0.3.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],"locale":[1],"timeZone":[1,"time-zone"]},null,{"groups":[{"onGroupsChange":0}],"locale":[{"onLocaleChange":0}],"timeZone":[{"onTimeZoneChange":0}]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,16 +1,43 @@
-import { type ITICChartMarks } from './itic-chart.options';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ITICChartMarks, type ITICPointClickDetail } from './itic-chart.options';
 export declare class IticChart {
+    el: HTMLElement;
     /**
-     * point groups
+     * Point groups, as an array or a JSON string. Each group's `phase` code sets its name, color and order.
+     * Extra fields in groups and points are kept and passed back in `pointClick`.
      */
     groups: ITICChartMarks[] | string;
+    /**
+     * Language of the texts, dates and numbers: `ca`, `de`, `en`, `es`, `fr` or `pt`. Only the language
+     * is used (`es-ES` → `es`); any other value falls back to `en`.
+     */
+    locale: string;
+    /**
+     * IANA time zone of the dates in the tooltip (e.g. `Europe/Madrid`). Defaults to the browser's,
+     * which is also used, with a console error, when the value isn't valid.
+     */
+    timeZone?: string;
+    /**
+     * 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?;
+    private parsedGroups;
+    private validTimeZone?;
+    /** Last `aria-label` set by the chart: any other value was set by the consumer and is kept. */
+    private defaultAriaLabel?;
     onGroupsChange(): void;
+    onLocaleChange(): void;
+    onTimeZoneChange(): void;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private updateAriaLabel;
+    private validateTimeZone;
     private initChart;
     private updateChart;
     render(): any;

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

@@ -0,0 +1,13 @@
+import en from './i18n/en.json';
+/** Texts of the chart. `en.json` is the reference: every other language must have the same keys. */
+export type ITICMessages = typeof en;
+export declare const LOCALES: readonly ["ca", "de", "en", "es", "fr", "pt"];
+export type ITICLocale = (typeof LOCALES)[number];
+export declare const DEFAULT_LOCALE: ITICLocale;
+/** Keeps the language of a locale (`es-ES` → `es`), falling back to `en` when it isn't translated. */
+export declare function normalizeLocale(locale: string | null | undefined): ITICLocale;
+export declare const getMessages: (locale: ITICLocale) => ITICMessages;
+/** Translated event type, or the code as is when it isn't in the catalog. */
+export declare function translateEventType(messages: ITICMessages, code: string): string;
+/** Translated name of a phase code that has one (`ALL`, `NONE`), or `undefined`. */
+export declare function translatePhase(messages: ITICMessages, code: string): string | undefined;

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

@@ -1,19 +1,68 @@
 import type { EChartsOption } from 'echarts';
+import { type ITICLocale } from './itic-chart.i18n';
 export type ITICPoint = {
+    /** Duration of the event, in ms. */
     duration: number;
+    /** Voltage, in % of the nominal voltage. */
     voltage: number;
+    /** Date of the event, ISO 8601. */
     ts: string;
+    /** Whether clicking the point emits `pointClick` and shows a pointer cursor. Defaults to `true`. */
+    clickable?: boolean;
+    /** Event type code from the backend (e.g. `VOLTAGE_DIP`), translated in the tooltip. Unknown codes are shown as is. */
+    eventType?: string;
+    /** Status code from the backend, shown as is in the tooltip. */
+    status?: string;
+    /** Minimum voltage, in V. Hidden in the tooltip when missing or `0`. */
+    min?: number;
+    /** Maximum voltage, in V. Hidden in the tooltip when missing or `0`. */
+    max?: number;
+    /** Any other field is kept as is and passed back in `pointClick`. */
+    [key: string]: unknown;
 };
 export type ITICChartMarks = {
+    /** Phase code (`AN`, `AB,BC,CA`, `ALL`, `NONE`…): sets the group's name, color and order. */
+    phase: string;
+    /** Name of the asset, shown in the tooltip. */
+    assetName?: string;
     points: ITICPoint[];
-    color: string;
-    groupName: string;
+    /** Any other field is kept as is and passed back in `pointClick`. */
+    [key: string]: unknown;
 };
+/** `detail` of the `pointClick` event: the objects passed in `groups`, not copies. */
+export type ITICPointClickDetail = {
+    point: ITICPoint;
+    group: ITICChartMarks;
+};
+export type ITICChartSettings = {
+    locale: ITICLocale;
+    /** IANA time zone of the dates. `undefined` uses the browser's. Must be valid (see `isValidTimeZone`). */
+    timeZone?: string;
+};
+export declare const DEFAULT_SETTINGS: ITICChartSettings;
 /**
  * Normalizes the `groups` prop, which arrives as an array from JS/React
  * or as a JSON string when set as an HTML attribute.
  */
 export declare function parseGroups(groups: ITICChartMarks[] | string | null | undefined): ITICChartMarks[];
+export declare function isValidTimeZone(timeZone: string): boolean;
 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;
+/**
+ * Returns the tooltip HTML of a point: one row per field, in the chart's language. Rows without a value
+ * are left out, and every value is escaped, since it comes from the consumer's data.
+ */
+export declare function createTooltipFormatter({ locale, timeZone }: ITICChartSettings): (point: ITICPoint, group: ITICChartMarks) => string;
+/** Formats the axis labels in the chart's language; ECharts always uses English separators. */
+export declare function createAxisLabelFormatter(locale: ITICLocale): (value: number) => string;
+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. `buildChartOptions` draws the groups as
+ * scatter series after the ITIC curve series, sorted with `sortGroups`.
+ * 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/itic-chart/itic-chart.phases.d.ts

@@ -0,0 +1,17 @@
+import { type ITICMessages } from './itic-chart.i18n';
+export type ITICPhase = {
+    /** Name in the legend and the tooltip. Empty for `NONE`. */
+    name: string;
+    /** Fixed color, or `undefined` to use the ECharts palette. */
+    color?: string;
+};
+/** Name, in the given language, and color of a phase code. */
+export declare function getPhase(phase: unknown, messages: ITICMessages): ITICPhase;
+/**
+ * Sorts groups by phase name, then by code (e.g. `AN` and `AB` are both "L1"), with `NONE` and `ALL` last.
+ * Compares characters, not with a locale's rules, so the legend is the same in every language.
+ * Returns a new array with the same group objects; groups with the same code keep their order.
+ */
+export declare function sortGroups<T extends {
+    phase?: unknown;
+}>(groups: T[]): T[];

package/dist/types/components.d.ts

@@ -5,18 +5,42 @@
  * 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 } from "./components/itic-chart/itic-chart.options";
+export { ITICChartMarks, ITICPointClickDetail } from "./components/itic-chart/itic-chart.options";
 export namespace Components {
     interface IticChart {
         /**
-          * point groups
+          * Point groups, as an array or a JSON string. Each group's `phase` code sets its name, color and order. Extra fields in groups and points are kept and passed back in `pointClick`.
          */
         "groups": ITICChartMarks[] | string;
+        /**
+          * Language of the texts, dates and numbers: `ca`, `de`, `en`, `es`, `fr` or `pt`. Only the language is used (`es-ES` → `es`); any other value falls back to `en`.
+          * @default 'en'
+         */
+        "locale": string;
+        /**
+          * IANA time zone of the dates in the tooltip (e.g. `Europe/Madrid`). Defaults to the browser's, which is also used, with a console error, when the value isn't valid.
+         */
+        "timeZone"?: 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 +53,28 @@ declare global {
 declare namespace LocalJSX {
     interface IticChart {
         /**
-          * point groups
+          * Point groups, as an array or a JSON string. Each group's `phase` code sets its name, color and order. Extra fields in groups and points are kept and passed back in `pointClick`.
          */
         "groups"?: ITICChartMarks[] | string;
+        /**
+          * Language of the texts, dates and numbers: `ca`, `de`, `en`, `es`, `fr` or `pt`. Only the language is used (`es-ES` → `es`); any other value falls back to `en`.
+          * @default 'en'
+         */
+        "locale"?: 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;
+        /**
+          * IANA time zone of the dates in the tooltip (e.g. `Europe/Madrid`). Defaults to the browser's, which is also used, with a console error, when the value isn't valid.
+         */
+        "timeZone"?: string;
     }
 
     interface IticChartAttributes {
         "groups": ITICChartMarks[] | string;
+        "locale": string;
+        "timeZone": 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, } from './components/itic-chart/itic-chart.options';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@circutor/charts",
-  "version": "0.1.0",
+  "version": "0.3.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",
@@ -48,8 +52,7 @@
     "test:visual": "vitest run --project visual",
     "generate": "stencil generate"
   },
-  "dependencies": {
-    "dayjs": "^1.11.13",
+  "peerDependencies": {
     "echarts": "^6.1.0"
   },
   "devDependencies": {
@@ -59,9 +62,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": "00048fd4dea626e18224e8d3da1205d32f14e441"
 }