@circutor/charts 0.2.0 → 0.3.1

package/dist/bundler/itic-chart.js

@@ -1 +1 @@
-import{t,p as e,H as i,c as o,h as s}from"./index.js";import*as n from"echarts/core";import{LineChart as a,ScatterChart as r}from"echarts/charts";import{GridComponent as l,LegendComponent as h,TooltipComponent as c}from"echarts/components";import{CanvasRenderer as m}from"echarts/renderers";import p from"dayjs";function d(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}const y={xAxisName:"Duration (ms)",yAxisName:"Voltage (% of nominal voltage)",tooltipFormatter:({duration:t,voltage:e,ts:i},{groupName:o})=>{const s={phase:d(o+""),duration:d(t+"")+" ms",voltage:d(Math.round(10*e)/10+"")+"%",ts:d(p(i).locale("en").format("DD MMM, HH:mm:ss.SSS"))};return Object.entries(s).map((([t,e])=>` <strong>${t}</strong>: ${e}`)).join("<br/>")}},u=t=>!1!==t.clickable,g=[[.167,500],[1,200],[3,140],[3,120],[500,120],[500,110],[1e5,110]],x=[[20,0],[20,70],[500,70],[500,80],[1e4,80],[1e4,90],[1e5,90]],b={animation:!1,grid:{right:"40px",left:"60px"},legend:{top:0},tooltip:{appendTo:"body"},textStyle:{fontFamily:"CDS-Regular, Arial"},xAxis:{type:"log",min:.1,max:1e5,nameGap:30,nameLocation:"middle",nameTextStyle:{fontSize:16,fontWeight:"bold"}},yAxis:{type:"value",min:0,max:500,nameTextStyle:{fontSize:16,fontWeight:"bold"},nameRotate:90,nameGap:40,nameLocation:"middle"}},f=[{type:"line",data:g,areaStyle:{origin:"end",color:"#FFEDEA"},lineStyle:{color:"#000"},showSymbol:!1,emphasis:{disabled:!0}},{type:"line",data:x,areaStyle:{origin:"start",color:"#FFF5DF"},showSymbol:!1,lineStyle:{color:"#000"},emphasis:{disabled:!0}},{type:"line",data:x,areaStyle:{origin:100,color:"#DDFAF1"},showSymbol:!1,lineStyle:{color:"#000"},emphasis:{disabled:!0}},{type:"line",data:g,areaStyle:{origin:100,color:"#DDFAF1"},showSymbol:!1,lineStyle:{color:"#000"},emphasis:{disabled:!0}},{type:"line",data:[[.1,500],[.167,500]],areaStyle:{origin:100,color:"#DDFAF1"},showSymbol:!1,lineStyle:{color:"transparent"},emphasis:{disabled:!0}},{type:"line",data:[[.1,0],[20,0]],areaStyle:{origin:100,color:"#DDFAF1"},showSymbol:!1,lineStyle:{color:"transparent"},emphasis:{disabled:!0}}];n.use([a,r,l,h,c,m]);const S=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pointClick=o(this,"pointClick"),this.xAxisName=y.xAxisName,this.yAxisName=y.yAxisName,this.parsedGroups=[]}onOptionsChange(){this.updateChart()}connectedCallback(){this.el.hasAttribute("role")||this.el.setAttribute("role","img"),this.initChart()}componentDidLoad(){this.initChart()}disconnectedCallback(){var t,e;null===(t=this.resizeObserver)||void 0===t||t.disconnect(),this.resizeObserver=void 0,null===(e=this.chart)||void 0===e||e.dispose(),this.chart=void 0}initChart(){this.container&&!this.chart&&(this.chart=n.init(this.container),this.chart.on("click",(t=>{const e=function(t,{componentType:e,seriesIndex:i,dataIndex:o}){if("series"!==e||null==i||null==o)return;const s=t[i-f.length],n=null==s?void 0:s.points[o];return n&&u(n)?{point:n,group:s}:void 0}(this.parsedGroups,t);e&&this.pointClick.emit(e)})),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{var t;return null===(t=this.chart)||void 0===t?void 0:t.resize()})),this.resizeObserver.observe(this.container)),this.updateChart())}updateChart(){var t;if(!this.chart)return;this.parsedGroups=[];try{this.parsedGroups=function(t){if(null==t||""===t)return[];const e="string"==typeof t?JSON.parse(t):t;if(!Array.isArray(e))throw new TypeError('"groups" must be an array of point groups');return e}(this.groups)}catch(t){console.error('[itic-chart] Invalid "groups" prop:',t)}const e=function(t,e=y){return Object.assign(Object.assign({},b),{xAxis:Object.assign(Object.assign({},b.xAxis),{name:e.xAxisName}),yAxis:Object.assign(Object.assign({},b.yAxis),{name:e.yAxisName}),series:[...f,...t.map((t=>({type:"scatter",name:t.groupName,data:t.points.map((t=>({value:[t.duration,t.voltage],cursor:u(t)?"pointer":"default"}))),symbolSize:12,z:4,itemStyle:{color:t.color,opacity:1},tooltip:{formatter:i=>e.tooltipFormatter(t.points[i.dataIndex],t)}})))]})}(this.parsedGroups,{xAxisName:this.xAxisName,yAxisName:this.yAxisName,tooltipFormatter:null!==(t=this.tooltipFormatter)&&void 0!==t?t:y.tooltipFormatter});this.chart.setOption(e,{notMerge:!0})}render(){return s("div",{key:"53914c2232775d69a35b846005931c5e20f2eee2",class:"chart",ref:t=>this.container=t})}get el(){return this}static get watchers(){return{groups:[{onOptionsChange:0}],xAxisName:[{onOptionsChange:0}],yAxisName:[{onOptionsChange:0}],tooltipFormatter:[{onOptionsChange:0}]}}static get style(){return":host{display:block;height:400px;background:var(--itic-chart-background, transparent)}.chart{width:100%;height:100%}"}},[1,"itic-chart",{groups:[1],xAxisName:[1,"x-axis-name"],yAxisName:[1,"y-axis-name"],tooltipFormatter:[16]},void 0,{groups:[{onOptionsChange:0}],xAxisName:[{onOptionsChange:0}],yAxisName:[{onOptionsChange:0}],tooltipFormatter:[{onOptionsChange:0}]}]);function v(){"undefined"!=typeof customElements&&["itic-chart"].forEach((e=>{"itic-chart"===e&&(customElements.get(t(e))||customElements.define(t(e),S))}))}v();const A=S,F=v;export{A as IticChart,F as defineCustomElement}
+import{t as e,p as t,H as n,c as a,h as i}from"./index.js";import*as o from"echarts/core";import{LineChart as s,ScatterChart as r}from"echarts/charts";import{GridComponent as l,LegendComponent as c,TooltipComponent as u}from"echarts/components";import{CanvasRenderer as m}from"echarts/renderers";const h=["ca","de","en","es","fr","pt"],d={ca:{ariaLabel:"Corba ITIC",xAxisName:"Durada (ms)",yAxisName:"Voltatge (% del voltatge nominal)",tooltip:{asset:"Actiu",date:"Data",eventType:"Esdeveniment",duration:"Durada",voltage:"Voltatge",status:"Estat",phase:"Fase",min:"Mín.",max:"Màx."},eventTypes:{VOLTAGE_DIP:"Buit de tensió",VOLTAGE_SWELL:"Augment de tensió",POWER_INTERRUPT:"Interrupció",VOLTAGE_TRANSIENT:"Transitori de voltatge",VOLTAGE_VARIATION:"Variació de voltatge",OVER_VOLTAGE:"Sobretensió",SUB_VOLTAGE:"Subtensió"},phases:{ALL:"Totes",NONE:""}},de:{ariaLabel:"ITIC-Diagramm",xAxisName:"Dauer (ms)",yAxisName:"Spannung (% der Nennspannung)",tooltip:{asset:"Vermögenswert",date:"Datum",eventType:"Ereignis",duration:"Dauer",voltage:"Spannung",status:"Status",phase:"Phase",min:"Min.",max:"Max."},eventTypes:{VOLTAGE_DIP:"Spannungseinbruch",VOLTAGE_SWELL:"Spannungserhöhung",POWER_INTERRUPT:"Stromunterbrechung",VOLTAGE_TRANSIENT:"Spannungstransient",VOLTAGE_VARIATION:"Spannungsschwankung",OVER_VOLTAGE:"Überspannung",SUB_VOLTAGE:"Unterspannung"},phases:{ALL:"Alle",NONE:""}},en:{ariaLabel:"ITIC chart",xAxisName:"Duration (ms)",yAxisName:"Voltage (% of nominal voltage)",tooltip:{asset:"Asset",date:"Date",eventType:"Event",duration:"Duration",voltage:"Voltage",status:"Status",phase:"Phase",min:"Min",max:"Max"},eventTypes:{VOLTAGE_DIP:"Voltage dip",VOLTAGE_SWELL:"Voltage swell",POWER_INTERRUPT:"Power interruption",VOLTAGE_TRANSIENT:"Voltage transient",VOLTAGE_VARIATION:"Voltage variation",OVER_VOLTAGE:"Overvoltage",SUB_VOLTAGE:"Subvoltage"},phases:{ALL:"All",NONE:""}},es:{ariaLabel:"Curva ITIC",xAxisName:"Duración (ms)",yAxisName:"Voltaje (% del voltaje nominal)",tooltip:{asset:"Activo",date:"Fecha",eventType:"Evento",duration:"Duración",voltage:"Voltaje",status:"Estado",phase:"Fase",min:"Mín.",max:"Máx."},eventTypes:{VOLTAGE_DIP:"Hueco de tensión",VOLTAGE_SWELL:"Aumento de tensión",POWER_INTERRUPT:"Interrupción",VOLTAGE_TRANSIENT:"Transitorio de voltaje",VOLTAGE_VARIATION:"Variación de voltaje",OVER_VOLTAGE:"Sobretensión",SUB_VOLTAGE:"Subtensión"},phases:{ALL:"Todas",NONE:""}},fr:{ariaLabel:"Courbe ITIC",xAxisName:"Durée (ms)",yAxisName:"Tension (% de la tension nominale)",tooltip:{asset:"Dispositif",date:"Date",eventType:"Événement",duration:"Durée",voltage:"Tension",status:"Statut",phase:"Phase",min:"Min.",max:"Max."},eventTypes:{VOLTAGE_DIP:"Creux de tension",VOLTAGE_SWELL:"Augmentation de tension",POWER_INTERRUPT:"Interruption",VOLTAGE_TRANSIENT:"Tension transitoire",VOLTAGE_VARIATION:"Variation de tension",OVER_VOLTAGE:"Surtension",SUB_VOLTAGE:"Sous-tension"},phases:{ALL:"Toutes",NONE:""}},pt:{ariaLabel:"Curva ITIC",xAxisName:"Duração (ms)",yAxisName:"Tensão (% da tensão nominal)",tooltip:{asset:"Ativo",date:"Data",eventType:"Evento",duration:"Duração",voltage:"Tensão",status:"Status",phase:"Fase",min:"Mín.",max:"Máx."},eventTypes:{VOLTAGE_DIP:"Queda de tensão",VOLTAGE_SWELL:"Aumento de tensão",POWER_INTERRUPT:"Interrupção",VOLTAGE_TRANSIENT:"Tensão transitória",VOLTAGE_VARIATION:"Variação de tensão",OVER_VOLTAGE:"Sobretensão",SUB_VOLTAGE:"Subtensão"},phases:{ALL:"Todas",NONE:""}}};function p(e){const t=((null!=e?e:"")+"").split(/[-_]/)[0].toLowerCase();return h.includes(t)?t:"en"}const A=e=>d[e],L=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);function T(e,t){return L(e.eventTypes,t)?e.eventTypes[t]:t}function g(e,t){return L(e.phases,t)?e.phases[t]:void 0}const E="#a67c52",O="#20262C",y="#B9BDC0",N="#00B388",v={AN:{name:"L1",color:E},BN:{name:"L2",color:O},CN:{name:"L3",color:y},AB:{name:"L1",color:E},BC:{name:"L2",color:O},CA:{name:"L3",color:y},"AN,BN,CN":{name:"L1,L2,L3",color:N},"AB,BC,CA":{name:"L1,L2,L3",color:N},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:""}},b=e=>null==e?"":e+"",S=e=>Object.prototype.hasOwnProperty.call(v,e)?v[e]:{name:e};function V(e,t){var n;const a=b(e),i=S(a);return Object.assign(Object.assign({},i),{name:null!==(n=g(t,a))&&void 0!==n?n:i.name})}const x=e=>"ALL"===e?2:"NONE"===e?1:0;function I(e){return e.map((e=>{const t=b(e.phase);return{group:e,code:t,rank:x(t),name:S(t).name}})).sort(((e,t)=>e.rank-t.rank||f(e.name,t.name)||f(e.code,t.code))).map((({group:e})=>e))}const f=(e,t)=>e<t?-1:e>t?1:0,C={locale:"en"},D=e=>null==e||""===e;function _(e){const t=new Intl.NumberFormat(e);return e=>t.format(e)}const G=e=>!1!==e.clickable;const R=[[.167,500],[1,200],[3,140],[3,120],[500,120],[500,110],[1e5,110]],w=[[20,0],[20,70],[500,70],[500,80],[1e4,80],[1e4,90],[1e5,90]],B={animation:!1,grid:{right:"20px",left:"60px"},legend:{top:0},tooltip:{appendTo:"body"},textStyle:{fontFamily:"CDS-Regular, Arial"},xAxis:{type:"log",min:1,max:1e5,nameGap:30,nameLocation:"middle",nameTextStyle:{fontSize:16,fontWeight:"bold"}},yAxis:{type:"value",min:0,max:200,nameTextStyle:{fontSize:16,fontWeight:"bold"},nameRotate:90,nameGap:40,nameLocation:"middle"}},F=[{type:"line",data:R,areaStyle:{origin:"end",color:"#FFEDEA"},lineStyle:{color:"#000"},silent:!0,showSymbol:!1,emphasis:{disabled:!0}},{type:"line",data:w,areaStyle:{origin:"start",color:"#FFF5DF"},silent:!0,showSymbol:!1,lineStyle:{color:"#000"},emphasis:{disabled:!0}},{type:"line",data:w,areaStyle:{origin:100,color:"#DDFAF1"},silent:!0,showSymbol:!1,lineStyle:{color:"#000"},emphasis:{disabled:!0}},{type:"line",data:R,areaStyle:{origin:100,color:"#DDFAF1"},silent:!0,showSymbol:!1,lineStyle:{color:"#000"},emphasis:{disabled:!0}},{type:"line",data:[[.1,500],[.167,500]],areaStyle:{origin:100,color:"#DDFAF1"},silent:!0,showSymbol:!1,lineStyle:{color:"transparent"},emphasis:{disabled:!0}},{type:"line",data:[[.1,0],[20,0]],areaStyle:{origin:100,color:"#DDFAF1"},silent:!0,showSymbol:!1,lineStyle:{color:"transparent"},emphasis:{disabled:!0}}];o.use([s,r,l,c,u,m]);const P=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pointClick=a(this,"pointClick"),this.locale="en",this.parsedGroups=[]}onGroupsChange(){this.updateChart()}onLocaleChange(){this.updateAriaLabel(),this.updateChart()}onTimeZoneChange(){this.validateTimeZone(),this.updateChart()}connectedCallback(){this.el.hasAttribute("role")||this.el.setAttribute("role","img"),this.updateAriaLabel(),this.initChart()}componentWillLoad(){this.validateTimeZone()}componentDidLoad(){this.initChart()}disconnectedCallback(){var e,t;null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.resizeObserver=void 0,null===(t=this.chart)||void 0===t||t.dispose(),this.chart=void 0}updateAriaLabel(){const e=this.el.getAttribute("aria-label");null!==e&&e!==this.defaultAriaLabel||(this.defaultAriaLabel=A(p(this.locale)).ariaLabel,this.el.setAttribute("aria-label",this.defaultAriaLabel))}validateTimeZone(){this.validTimeZone=void 0,this.timeZone&&(function(e){try{return!!new Intl.DateTimeFormat("en",{timeZone:e}).resolvedOptions().timeZone}catch(e){return!1}}(this.timeZone)?this.validTimeZone=this.timeZone:console.error(`[itic-chart] Invalid "timeZone" prop: "${this.timeZone}". Using the browser's time zone.`))}initChart(){this.container&&!this.chart&&(this.chart=o.init(this.container),this.chart.on("click",(e=>{const t=function(e,{componentType:t,seriesIndex:n,dataIndex:a}){if("series"!==t||null==n||null==a)return;const i=I(e)[n-F.length],o=null==i?void 0:i.points[a];return o&&G(o)?{point:o,group:i}:void 0}(this.parsedGroups,e);t&&this.pointClick.emit(t)})),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{var e;return null===(e=this.chart)||void 0===e?void 0:e.resize()})),this.resizeObserver.observe(this.container)),this.updateChart())}updateChart(){if(!this.chart)return;this.parsedGroups=[];try{this.parsedGroups=function(e){if(null==e||""===e)return[];const t="string"==typeof e?JSON.parse(e):e;if(!Array.isArray(t))throw new TypeError('"groups" must be an array of point groups');return t}(this.groups)}catch(e){console.error('[itic-chart] Invalid "groups" prop:',e)}const e=function(e,t=C){const n=A(t.locale),a=function({locale:e,timeZone:t}){const n=A(e),a=new Intl.DateTimeFormat(e,{day:"2-digit",month:"short",hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3,hourCycle:"h23",timeZone:t}),i=new Intl.NumberFormat(e,{style:"unit",unit:"millisecond",maximumFractionDigits:3}),o=new Intl.NumberFormat(e,{style:"percent",maximumFractionDigits:1}),s=new Intl.NumberFormat(e,{minimumFractionDigits:2,maximumFractionDigits:2}),r=e=>{const t=new Date(e);return Number.isNaN(t.getTime())?(null!=e?e:"")+"":a.format(t)},l=e=>Number(e)?s.format(Number(e))+" V":void 0;return(e,t)=>[["asset",D(t.assetName)?void 0:t.assetName+""],["date",r(e.ts)],["eventType",D(e.eventType)?void 0:T(n,e.eventType+"")],["duration",i.format(Number(e.duration))],["voltage",o.format(Number(e.voltage)/100)],["status",D(e.status)?void 0:e.status+""],["phase",V(t.phase,n).name||"-"],["min",l(e.min)],["max",l(e.max)]].filter((e=>void 0!==e[1])).map((([e,t])=>` <strong>${n.tooltip[e]}</strong>: ${function(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}(t)}`)).join("<br/>")}(t),i={formatter:_(t.locale)};return Object.assign(Object.assign({},B),{xAxis:Object.assign(Object.assign({},B.xAxis),{name:n.xAxisName,axisLabel:i}),yAxis:Object.assign(Object.assign({},B.yAxis),{name:n.yAxisName,axisLabel:i}),series:[...F,...I(e).map((e=>{const{name:t,color:i}=V(e.phase,n);return{type:"scatter",name:t,data:e.points.map((e=>({value:[e.duration,e.voltage],cursor:G(e)?"pointer":"default"}))),symbolSize:12,z:4,itemStyle:i?{color:i,opacity:1}:{opacity:1},tooltip:{formatter:t=>a(e.points[t.dataIndex],e)}}}))]})}(this.parsedGroups,{locale:p(this.locale),timeZone:this.validTimeZone});this.chart.setOption(e,{notMerge:!0})}render(){return i("div",{key:"e202bbf61ad19502fd76a42f37a8ea69f2d8c58b",class:"chart",ref:e=>this.container=e})}get el(){return this}static get watchers(){return{groups:[{onGroupsChange:0}],locale:[{onLocaleChange:0}],timeZone:[{onTimeZoneChange:0}]}}static get style(){return":host{display:block;height:400px;background:var(--itic-chart-background, transparent)}.chart{width:100%;height:100%}"}},[1,"itic-chart",{groups:[1],locale:[1],timeZone:[1,"time-zone"]},void 0,{groups:[{onGroupsChange:0}],locale:[{onLocaleChange:0}],timeZone:[{onTimeZoneChange:0}]}]);function j(){"undefined"!=typeof customElements&&["itic-chart"].forEach((t=>{"itic-chart"===t&&(customElements.get(e(t))||customElements.define(e(t),P))}))}j();const W=P,U=j;export{W as IticChart,U as defineCustomElement}

package/dist/charts/charts.esm.js

@@ -1 +1 @@
-import{p as a,b as o}from"./p-BPCJmLvQ.js";export{s as setNonce}from"./p-BPCJmLvQ.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),a(s)})().then((async a=>(await t(),o([["p-943aa343",[[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}]}]]]],a))));
+import{p as o,b as e}from"./p-BPCJmLvQ.js";export{s as setNonce}from"./p-BPCJmLvQ.js";import{g as n}from"./p-DQuL1Twl.js";(()=>{const e=import.meta.url,n={};return""!==e&&(n.resourcesUrl=new URL(".",e).href),o(n)})().then((async o=>(await n(),e([["p-70293967",[[1,"itic-chart",{groups:[1],locale:[1],timeZone:[1,"time-zone"]},null,{groups:[{onGroupsChange:0}],locale:[{onLocaleChange:0}],timeZone:[{onTimeZoneChange:0}]}]]]],o))));