@circutor/charts 0.2.0 → 0.3.0

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["itic-chart.cjs",[[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);
+  return index.bootstrapLazy([["itic-chart.cjs",[[1,"itic-chart",{"groups":[1],"locale":[1],"timeZone":[1,"time-zone"]},null,{"groups":[{"onGroupsChange":0}],"locale":[{"onLocaleChange":0}],"timeZone":[{"onTimeZoneChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/itic-chart/index.js

@@ -3,22 +3,28 @@ import * as echarts from "echarts/core";
 import { LineChart, ScatterChart } from "echarts/charts";
 import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
-import { buildChartOptions, DEFAULT_SETTINGS, findClickedPoint, parseGroups, } from "./itic-chart.options";
+import { getMessages, normalizeLocale } from "./itic-chart.i18n";
+import { buildChartOptions, findClickedPoint, isValidTimeZone, parseGroups, } from "./itic-chart.options";
 // Register only what this chart uses, so bundles don't ship all of ECharts
 echarts.use([LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
 export class IticChart {
     constructor() {
         /**
-         * Name of the duration (X) axis.
+         * 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`.
          */
-        this.xAxisName = DEFAULT_SETTINGS.xAxisName;
-        /**
-         * Name of the voltage (Y) axis.
-         */
-        this.yAxisName = DEFAULT_SETTINGS.yAxisName;
+        this.locale = 'en';
         this.parsedGroups = [];
     }
-    onOptionsChange() {
+    onGroupsChange() {
+        this.updateChart();
+    }
+    onLocaleChange() {
+        this.updateAriaLabel();
+        this.updateChart();
+    }
+    onTimeZoneChange() {
+        this.validateTimeZone();
         this.updateChart();
     }
     connectedCallback() {
@@ -26,9 +32,13 @@ export class IticChart {
         if (!this.el.hasAttribute('role')) {
             this.el.setAttribute('role', 'img');
         }
+        this.updateAriaLabel();
         // componentDidLoad only fires once, so re-create the chart when the element is re-attached
         this.initChart();
     }
+    componentWillLoad() {
+        this.validateTimeZone();
+    }
     componentDidLoad() {
         this.initChart();
     }
@@ -39,6 +49,27 @@ export class IticChart {
         (_b = this.chart) === null || _b === void 0 ? void 0 : _b.dispose();
         this.chart = undefined;
     }
+    updateAriaLabel() {
+        const current = this.el.getAttribute('aria-label');
+        if (current !== null && current !== this.defaultAriaLabel) {
+            return;
+        }
+        this.defaultAriaLabel = getMessages(normalizeLocale(this.locale)).ariaLabel;
+        this.el.setAttribute('aria-label', this.defaultAriaLabel);
+    }
+    // Validated when it changes, not on every redraw, so an invalid value is only reported once
+    validateTimeZone() {
+        this.validTimeZone = undefined;
+        if (!this.timeZone) {
+            return;
+        }
+        if (isValidTimeZone(this.timeZone)) {
+            this.validTimeZone = this.timeZone;
+        }
+        else {
+            console.error(`[itic-chart] Invalid "timeZone" prop: "${this.timeZone}". Using the browser's time zone.`);
+        }
+    }
     initChart() {
         if (!this.container || this.chart) {
             return;
@@ -57,7 +88,6 @@ export class IticChart {
         this.updateChart();
     }
     updateChart() {
-        var _a;
         if (!this.chart) {
             return;
         }
@@ -69,14 +99,13 @@ export class IticChart {
             console.error('[itic-chart] Invalid "groups" prop:', error);
         }
         const options = buildChartOptions(this.parsedGroups, {
-            xAxisName: this.xAxisName,
-            yAxisName: this.yAxisName,
-            tooltipFormatter: (_a = this.tooltipFormatter) !== null && _a !== void 0 ? _a : DEFAULT_SETTINGS.tooltipFormatter,
+            locale: normalizeLocale(this.locale),
+            timeZone: this.validTimeZone,
         });
         this.chart.setOption(options, { notMerge: true });
     }
     render() {
-        return h("div", { key: '53914c2232775d69a35b846005931c5e20f2eee2', class: "chart", ref: el => (this.container = el) });
+        return h("div", { key: '2bb964d590a36c9c9501761c3f848ad364a29030', class: "chart", ref: el => (this.container = el) });
     }
     static get is() { return "itic-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -111,14 +140,14 @@ export class IticChart {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Point groups, as an array or a JSON string. Extra fields in groups and points are kept and passed\nback in `pointClick` and `tooltipFormatter`."
+                    "text": "Point groups, as an array or a JSON string. Each group's `phase` code sets its name, color and order.\nExtra fields in groups and points are kept and passed back in `pointClick`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "groups"
             },
-            "xAxisName": {
+            "locale": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -130,15 +159,15 @@ export class IticChart {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the duration (X) axis."
+                    "text": "Language of the texts, dates and numbers: `ca`, `de`, `en`, `es`, `fr` or `pt`. Only the language\nis used (`es-ES` \u2192 `es`); any other value falls back to `en`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "x-axis-name",
-                "defaultValue": "'Duration (ms)'"
+                "attribute": "locale",
+                "defaultValue": "'en'"
             },
-            "yAxisName": {
+            "timeZone": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -147,40 +176,15 @@ export class IticChart {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the voltage (Y) axis."
+                    "text": "IANA time zone of the dates in the tooltip (e.g. `Europe/Madrid`). Defaults to the browser's,\nwhich is also used, with a console error, when the value isn't valid."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "y-axis-name",
-                "defaultValue": "'Voltage (% of nominal voltage)'"
-            },
-            "tooltipFormatter": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "ITICTooltipFormatter",
-                    "resolved": "(point: ITICPoint, group: ITICChartMarks) => string",
-                    "references": {
-                        "ITICTooltipFormatter": {
-                            "location": "import",
-                            "path": "./itic-chart.options",
-                            "id": "src/components/itic-chart/itic-chart.options.ts::ITICTooltipFormatter",
-                            "referenceLocation": "ITICTooltipFormatter"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Returns the HTML of a point's tooltip. JS/React property only (not an HTML attribute).\nThe HTML is inserted as is: escaping the values is up to the formatter.\nDefaults to an English tooltip with phase, duration, voltage and timestamp."
-                },
-                "getter": false,
-                "setter": false
+                "attribute": "time-zone"
             }
         };
     }
@@ -213,16 +217,13 @@ export class IticChart {
     static get watchers() {
         return [{
                 "propName": "groups",
-                "methodName": "onOptionsChange"
-            }, {
-                "propName": "xAxisName",
-                "methodName": "onOptionsChange"
+                "methodName": "onGroupsChange"
             }, {
-                "propName": "yAxisName",
-                "methodName": "onOptionsChange"
+                "propName": "locale",
+                "methodName": "onLocaleChange"
             }, {
-                "propName": "tooltipFormatter",
-                "methodName": "onOptionsChange"
+                "propName": "timeZone",
+                "methodName": "onTimeZoneChange"
             }];
     }
 }

package/dist/collection/components/itic-chart/itic-chart.i18n.js

@@ -0,0 +1,26 @@
+import ca from "./i18n/ca.json";
+import de from "./i18n/de.json";
+import en from "./i18n/en.json";
+import es from "./i18n/es.json";
+import fr from "./i18n/fr.json";
+import pt from "./i18n/pt.json";
+export const LOCALES = ['ca', 'de', 'en', 'es', 'fr', 'pt'];
+export const DEFAULT_LOCALE = 'en';
+const MESSAGES = { ca, de, en, es, fr, pt };
+/** Keeps the language of a locale (`es-ES` → `es`), falling back to `en` when it isn't translated. */
+export function normalizeLocale(locale) {
+    const language = String(locale !== null && locale !== void 0 ? locale : '')
+        .split(/[-_]/)[0]
+        .toLowerCase();
+    return LOCALES.includes(language) ? language : DEFAULT_LOCALE;
+}
+export const getMessages = (locale) => MESSAGES[locale];
+const hasOwn = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
+/** Translated event type, or the code as is when it isn't in the catalog. */
+export function translateEventType(messages, code) {
+    return hasOwn(messages.eventTypes, code) ? messages.eventTypes[code] : code;
+}
+/** Translated name of a phase code that has one (`ALL`, `NONE`), or `undefined`. */
+export function translatePhase(messages, code) {
+    return hasOwn(messages.phases, code) ? messages.phases[code] : undefined;
+}

package/dist/collection/components/itic-chart/itic-chart.options.js

@@ -1,4 +1,6 @@
-import dayjs from "dayjs";
+import { DEFAULT_LOCALE, getMessages, translateEventType } from "./itic-chart.i18n";
+import { getPhase, sortGroups } from "./itic-chart.phases";
+export const DEFAULT_SETTINGS = { locale: DEFAULT_LOCALE };
 /**
  * Normalizes the `groups` prop, which arrives as an array from JS/React
  * or as a JSON string when set as an HTML attribute.
@@ -13,6 +15,15 @@ export function parseGroups(groups) {
     }
     return parsed;
 }
+export function isValidTimeZone(timeZone) {
+    try {
+        new Intl.DateTimeFormat('en', { timeZone });
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
 export function escapeHtml(value) {
     return value
         .replace(/&/g, '&')
@@ -21,57 +32,95 @@ export function escapeHtml(value) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
-/** Default tooltip, in English. Escapes every value, since they come from the consumer. */
-export const defaultTooltipFormatter = ({ duration, voltage, ts }, { groupName }) => {
-    const rows = {
-        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')),
+const isBlank = (value) => value == null || value === '';
+/**
+ * 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 function createTooltipFormatter({ locale, timeZone }) {
+    const messages = getMessages(locale);
+    const dateFormat = new Intl.DateTimeFormat(locale, {
+        day: '2-digit',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        // Short events are milliseconds apart
+        fractionalSecondDigits: 3,
+        hourCycle: 'h23',
+        timeZone,
+    });
+    const durationFormat = new Intl.NumberFormat(locale, { style: 'unit', unit: 'millisecond', maximumFractionDigits: 3 });
+    const voltageFormat = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 });
+    // `volt` isn't a unit supported by Intl
+    const voltsFormat = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    const formatDate = (ts) => {
+        const date = new Date(ts);
+        return Number.isNaN(date.getTime()) ? String(ts !== null && ts !== void 0 ? ts : '') : dateFormat.format(date);
     };
-    return Object.entries(rows)
-        .map(([label, value]) => ` <strong>${label}</strong>: ${value}`)
-        .join('<br/>');
-};
-export const DEFAULT_SETTINGS = {
-    xAxisName: 'Duration (ms)',
-    yAxisName: 'Voltage (% of nominal voltage)',
-    tooltipFormatter: defaultTooltipFormatter,
-};
+    const formatVolts = (value) => (Number(value) ? `${voltsFormat.format(Number(value))} V` : undefined);
+    return (point, group) => {
+        const rows = [
+            ['asset', isBlank(group.assetName) ? undefined : String(group.assetName)],
+            ['date', formatDate(point.ts)],
+            ['eventType', isBlank(point.eventType) ? undefined : translateEventType(messages, String(point.eventType))],
+            ['duration', durationFormat.format(Number(point.duration))],
+            // The value is already in %
+            ['voltage', voltageFormat.format(Number(point.voltage) / 100)],
+            ['status', isBlank(point.status) ? undefined : String(point.status)],
+            ['phase', getPhase(group.phase, messages).name || '-'],
+            ['min', formatVolts(point.min)],
+            ['max', formatVolts(point.max)],
+        ];
+        return rows
+            .filter((row) => row[1] !== undefined)
+            .map(([key, value]) => ` <strong>${messages.tooltip[key]}</strong>: ${escapeHtml(value)}`)
+            .join('<br/>');
+    };
+}
+/** Formats the axis labels in the chart's language; ECharts always uses English separators. */
+export function createAxisLabelFormatter(locale) {
+    const numberFormat = new Intl.NumberFormat(locale);
+    return value => numberFormat.format(value);
+}
 export const isClickable = (point) => point.clickable !== false;
 export 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: [
+    const messages = getMessages(settings.locale);
+    const formatTooltip = createTooltipFormatter(settings);
+    const axisLabel = { formatter: createAxisLabelFormatter(settings.locale) };
+    return Object.assign(Object.assign({}, BASE_OPTIONS), { xAxis: Object.assign(Object.assign({}, BASE_OPTIONS.xAxis), { name: messages.xAxisName, axisLabel }), yAxis: Object.assign(Object.assign({}, BASE_OPTIONS.yAxis), { name: messages.yAxisName, axisLabel }), series: [
             ...CURVE_SERIES,
-            ...groups.map((group) => ({
-                type: 'scatter',
-                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: group.color,
-                    opacity: 1,
-                },
-                tooltip: {
-                    formatter: params => settings.tooltipFormatter(group.points[params.dataIndex], group),
-                },
-            })),
+            ...sortGroups(groups).map((group) => {
+                const { name, color } = getPhase(group.phase, messages);
+                return {
+                    type: 'scatter',
+                    name,
+                    // 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,
+                    // Phases without a color take the next one of the ECharts palette
+                    itemStyle: color ? { color, opacity: 1 } : { opacity: 1 },
+                    tooltip: {
+                        formatter: params => formatTooltip(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`.
+ * 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 function findClickedPoint(groups, { componentType, seriesIndex, dataIndex }) {
     if (componentType !== 'series' || seriesIndex == null || dataIndex == null) {
         return undefined;
     }
-    const group = groups[seriesIndex - CURVE_SERIES.length];
+    const group = sortGroups(groups)[seriesIndex - CURVE_SERIES.length];
     const point = group === null || group === void 0 ? void 0 : group.points[dataIndex];
     if (!point || !isClickable(point)) {
         return undefined;
@@ -96,10 +145,11 @@ const ITIC_CURVE_NODAMAGE_REGION = [
     [10000, 90],
     [100000, 90],
 ];
+// Fixed ranges, as in Scout: ECharts clips points outside them (duration < 1 ms or voltage > 200%)
 const BASE_OPTIONS = {
     animation: false,
     grid: {
-        right: '40px',
+        right: '20px',
         left: '60px',
     },
     // ECharts 6 moved the default legend to the bottom; keep it on top as in previous versions
@@ -111,7 +161,7 @@ const BASE_OPTIONS = {
     },
     xAxis: {
         type: 'log',
-        min: 0.1,
+        min: 1,
         max: 100000,
         nameGap: 30,
         nameLocation: 'middle',
@@ -123,7 +173,7 @@ const BASE_OPTIONS = {
     yAxis: {
         type: 'value',
         min: 0,
-        max: 500,
+        max: 200,
         nameTextStyle: {
             fontSize: 16,
             fontWeight: 'bold',
@@ -133,6 +183,7 @@ const BASE_OPTIONS = {
         nameLocation: 'middle',
     },
 };
+// `silent`: the curve doesn't react to the mouse (no tooltip, cursor or click)
 const CURVE_SERIES = [
     {
         type: 'line',
@@ -144,6 +195,7 @@ const CURVE_SERIES = [
         lineStyle: {
             color: '#000',
         },
+        silent: true,
         showSymbol: false,
         emphasis: {
             disabled: true,
@@ -156,6 +208,7 @@ const CURVE_SERIES = [
             origin: 'start',
             color: '#FFF5DF',
         },
+        silent: true,
         showSymbol: false,
         lineStyle: {
             color: '#000',
@@ -171,6 +224,7 @@ const CURVE_SERIES = [
             origin: 100,
             color: '#DDFAF1',
         },
+        silent: true,
         showSymbol: false,
         lineStyle: {
             color: '#000',
@@ -186,6 +240,7 @@ const CURVE_SERIES = [
             origin: 100,
             color: '#DDFAF1',
         },
+        silent: true,
         showSymbol: false,
         lineStyle: {
             color: '#000',
@@ -204,6 +259,7 @@ const CURVE_SERIES = [
             origin: 100,
             color: '#DDFAF1',
         },
+        silent: true,
         showSymbol: false,
         lineStyle: {
             color: 'transparent',
@@ -222,6 +278,7 @@ const CURVE_SERIES = [
             origin: 100,
             color: '#DDFAF1',
         },
+        silent: true,
         showSymbol: false,
         lineStyle: {
             color: 'transparent',

package/dist/collection/components/itic-chart/itic-chart.phases.js

@@ -0,0 +1,55 @@
+import { translatePhase } from "./itic-chart.i18n";
+const L1 = '#a67c52';
+const L2 = '#20262C';
+const L3 = '#B9BDC0';
+const THREE_PHASE = '#00B388';
+// Same catalog as Scout. Names that change with the language (`ALL`, `NONE`) are in the i18n JSON files.
+const PHASES = {
+    AN: { name: 'L1', color: L1 },
+    BN: { name: 'L2', color: L2 },
+    CN: { name: 'L3', color: L3 },
+    AB: { name: 'L1', color: L1 },
+    BC: { name: 'L2', color: L2 },
+    CA: { name: 'L3', color: L3 },
+    'AN,BN,CN': { name: 'L1,L2,L3', color: THREE_PHASE },
+    'AB,BC,CA': { name: 'L1,L2,L3', color: THREE_PHASE },
+    ALL: { name: '', color: '#4C5CC5' },
+    A: { name: 'L1' },
+    B: { name: 'L2' },
+    C: { name: 'L3' },
+    'AN,BN': { name: 'L1,L2' },
+    'AN,CN': { name: 'L1,L3' },
+    'BN,CN': { name: 'L2,L3' },
+    'AB,BC': { name: 'L1,L2' },
+    'AB,CA': { name: 'L1,L3' },
+    'BC,CA': { name: 'L2,L3' },
+    NONE: { name: '' },
+};
+const phaseCode = (phase) => (phase == null ? '' : String(phase));
+// Unknown codes keep the code as name and have no color
+const catalogPhase = (code) => Object.prototype.hasOwnProperty.call(PHASES, code) ? PHASES[code] : { name: code };
+/** Name, in the given language, and color of a phase code. */
+export function getPhase(phase, messages) {
+    var _a;
+    const code = phaseCode(phase);
+    const known = catalogPhase(code);
+    return Object.assign(Object.assign({}, known), { name: (_a = translatePhase(messages, code)) !== null && _a !== void 0 ? _a : known.name });
+}
+// `NONE` (no name) goes after the named phases and `ALL` always last. Only these two names are translated,
+// so ranking them by code keeps the order the same in every language.
+const rank = (code) => (code === 'ALL' ? 2 : code === 'NONE' ? 1 : 0);
+/**
+ * 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 function sortGroups(groups) {
+    const keyed = groups.map(group => {
+        const code = phaseCode(group.phase);
+        return { group, code, rank: rank(code), name: catalogPhase(code).name };
+    });
+    return keyed
+        .sort((a, b) => a.rank - b.rank || compare(a.name, b.name) || compare(a.code, b.code))
+        .map(({ group }) => group);
+}
+const compare = (a, b) => (a < b ? -1 : a > b ? 1 : 0);