@fluid-topics/ft-chart 1.0.34 → 1.0.36

package/build/ft-chart.js

@@ -155,6 +155,9 @@ let FtChart = class FtChart extends FtLitElement {
     }
     getData(valueIndex) {
         return this.data.map(v => {
+            if (this.isThisPeriod(moment.unix(v[0]), this.period)) {
+                return { value: [v[0], v[valueIndex + 1]], itemStyle: { opacity: 0.5 } };
+            }
             return { value: [v[0], v[valueIndex + 1]] };
         });
     }

package/build/ft-chart.light.js

@@ -13,4 +13,4 @@ u.version="2.29.4",r=jn,u.fn=Wi,u.min=function(){return In("isBefore",[].slice.c
     }
 `;var ve=function(t,n,i,e){for(var r,s=arguments.length,u=s<3?n:null===e?e=Object.getOwnPropertyDescriptor(n,i):e,o=t.length-1;o>=0;o--)(r=t[o])&&(u=(s<3?r(u):s>3?r(n,i,u):r(n,i))||u);return s>3&&u&&Object.defineProperty(n,i,u),u};null==window.echarts&&console.warn("Echarts is not available"),t.FtChart=class extends n.FtLitElement{constructor(){super(...arguments),this.xAxisName="date",this.yAxisName="",this.valueLabels=void 0,this.valueLabelsSingular=void 0,this.barChart=!1,this.period=t.Period.DAY,this.data=[]}render(){return i.html`
             <div class="sessions-chart"></div>
-        `}firstUpdated(t){var n;super.firstUpdated(t),this.myChart=null===(n=window.echarts)||void 0===n?void 0:n.init(this.container,void 0,{renderer:"svg"}),window.addEventListener("resize",(()=>{var t;null===(t=this.myChart)||void 0===t||t.resize()}))}updated(t){super.updated(t);const n=this.getOptions();n&&this.myChart&&this.myChart.setOption(n)}getOptions(){const n=this;return{tooltip:{trigger:"axis",formatter:t=>n.getTooltip(t)},grid:{left:"80px",right:"100px",top:"50px",bottom:"20px"},xAxis:{type:"category",name:this.xAxisName.toUpperCase(),axisTick:{alignWithLabel:!0},axisLabel:{formatter:i=>n.period===t.Period.DAY||n.period===t.Period.WEEK?u.utc(1e3*i).format("DD MMM YYYY"):(n.period,t.Period.MONTH,u.utc(1e3*i).format("MMMM YYYY"))}},yAxis:{type:"value",name:this.yAxisName.toUpperCase()},series:this.getSeries()}}getTooltip(n){const i=u.utc(1e3*n[0].data.value[0]),e=n.map((t=>t.data.value[1]));let r,s,o="";switch(this.period){case t.Period.DAY:r=i.format("DD MMM YYYY"),s="on",this.isThisPeriod(i,t.Period.DAY)&&(o=" so far");break;case t.Period.WEEK:r=i.format("DD MMM YYYY"),s="during the week of",this.isThisPeriod(i,t.Period.WEEK)&&(o=" so far");break;case t.Period.MONTH:s="in",r=i.format("MMMM YYYY"),this.isThisPeriod(i,t.Period.MONTH)&&(o=" so far")}let h="";for(let t=0;t<e.length;t++){let n=this.valueLabels?this.valueLabels[t]:this.yAxisName,i=this.valueLabelsSingular?this.valueLabelsSingular[t]:n;const u=1===e[t]?i:n;h+=`${e[t].toLocaleString()} ${u} ${s} ${r}${o}</br>`}return h.substring(0,h.length-5)}isThisPeriod(n,i,e=u.utc()){switch(i){case t.Period.DAY:return n.format("YYYY-MM-DD")===e.clone().startOf("day").format("YYYY-MM-DD");case t.Period.WEEK:return n.clone().startOf("isoWeek").format("YYYY-MM-DD")===e.clone().startOf("isoWeek").format("YYYY-MM-DD");case t.Period.MONTH:return n.month()===e.month()&&n.year()===e.year()}return!1}getSeries(){if(0==this.data.length)return[];const t=this.data[0].length-1;if(0==t)return[];let n=[];for(let i=0;i<t;i++)n[i]={type:this.barChart?"bar":"line",data:this.getData(i)};return n}getData(t){return this.data.map((n=>({value:[n[0],n[t+1]]})))}},t.FtChart.styles=me,ve([e.property({type:String})],t.FtChart.prototype,"xAxisName",void 0),ve([e.property({type:String})],t.FtChart.prototype,"yAxisName",void 0),ve([n.jsonProperty(void 0)],t.FtChart.prototype,"valueLabels",void 0),ve([n.jsonProperty(void 0)],t.FtChart.prototype,"valueLabelsSingular",void 0),ve([e.property({type:Boolean})],t.FtChart.prototype,"barChart",void 0),ve([e.property({type:String})],t.FtChart.prototype,"period",void 0),ve([n.jsonProperty([])],t.FtChart.prototype,"data",void 0),ve([e.query(".sessions-chart")],t.FtChart.prototype,"container",void 0),t.FtChart=ve([n.customElement("ft-chart")],t.FtChart),n.customElement("ft-chart")(t.FtChart),t.styles=me}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
+        `}firstUpdated(t){var n;super.firstUpdated(t),this.myChart=null===(n=window.echarts)||void 0===n?void 0:n.init(this.container,void 0,{renderer:"svg"}),window.addEventListener("resize",(()=>{var t;null===(t=this.myChart)||void 0===t||t.resize()}))}updated(t){super.updated(t);const n=this.getOptions();n&&this.myChart&&this.myChart.setOption(n)}getOptions(){const n=this;return{tooltip:{trigger:"axis",formatter:t=>n.getTooltip(t)},grid:{left:"80px",right:"100px",top:"50px",bottom:"20px"},xAxis:{type:"category",name:this.xAxisName.toUpperCase(),axisTick:{alignWithLabel:!0},axisLabel:{formatter:i=>n.period===t.Period.DAY||n.period===t.Period.WEEK?u.utc(1e3*i).format("DD MMM YYYY"):(n.period,t.Period.MONTH,u.utc(1e3*i).format("MMMM YYYY"))}},yAxis:{type:"value",name:this.yAxisName.toUpperCase()},series:this.getSeries()}}getTooltip(n){const i=u.utc(1e3*n[0].data.value[0]),e=n.map((t=>t.data.value[1]));let r,s,o="";switch(this.period){case t.Period.DAY:r=i.format("DD MMM YYYY"),s="on",this.isThisPeriod(i,t.Period.DAY)&&(o=" so far");break;case t.Period.WEEK:r=i.format("DD MMM YYYY"),s="during the week of",this.isThisPeriod(i,t.Period.WEEK)&&(o=" so far");break;case t.Period.MONTH:s="in",r=i.format("MMMM YYYY"),this.isThisPeriod(i,t.Period.MONTH)&&(o=" so far")}let h="";for(let t=0;t<e.length;t++){let n=this.valueLabels?this.valueLabels[t]:this.yAxisName,i=this.valueLabelsSingular?this.valueLabelsSingular[t]:n;const u=1===e[t]?i:n;h+=`${e[t].toLocaleString()} ${u} ${s} ${r}${o}</br>`}return h.substring(0,h.length-5)}isThisPeriod(n,i,e=u.utc()){switch(i){case t.Period.DAY:return n.format("YYYY-MM-DD")===e.clone().startOf("day").format("YYYY-MM-DD");case t.Period.WEEK:return n.clone().startOf("isoWeek").format("YYYY-MM-DD")===e.clone().startOf("isoWeek").format("YYYY-MM-DD");case t.Period.MONTH:return n.month()===e.month()&&n.year()===e.year()}return!1}getSeries(){if(0==this.data.length)return[];const t=this.data[0].length-1;if(0==t)return[];let n=[];for(let i=0;i<t;i++)n[i]={type:this.barChart?"bar":"line",data:this.getData(i)};return n}getData(t){return this.data.map((n=>this.isThisPeriod(u.unix(n[0]),this.period)?{value:[n[0],n[t+1]],itemStyle:{opacity:.5}}:{value:[n[0],n[t+1]]}))}},t.FtChart.styles=me,ve([e.property({type:String})],t.FtChart.prototype,"xAxisName",void 0),ve([e.property({type:String})],t.FtChart.prototype,"yAxisName",void 0),ve([n.jsonProperty(void 0)],t.FtChart.prototype,"valueLabels",void 0),ve([n.jsonProperty(void 0)],t.FtChart.prototype,"valueLabelsSingular",void 0),ve([e.property({type:Boolean})],t.FtChart.prototype,"barChart",void 0),ve([e.property({type:String})],t.FtChart.prototype,"period",void 0),ve([n.jsonProperty([])],t.FtChart.prototype,"data",void 0),ve([e.query(".sessions-chart")],t.FtChart.prototype,"container",void 0),t.FtChart=ve([n.customElement("ft-chart")],t.FtChart),n.customElement("ft-chart")(t.FtChart),t.styles=me}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);

package/build/ft-chart.min.js

@@ -93,7 +93,7 @@ Nt.version="2.29.4",xt=ee,Nt.fn=qe,Nt.min=function(){return oe("isBefore",[].sli
     }
 `;var Wr=function(t,i,n,e){for(var r,s=arguments.length,o=s<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,n):e,u=t.length-1;u>=0;u--)(r=t[u])&&(o=(s<3?r(o):s>3?r(i,n,o):r(i,n))||o);return s>3&&o&&Object.defineProperty(i,n,o),o};null==window.echarts&&console.warn("Echarts is not available"),t.FtChart=class extends Mt{constructor(){super(...arguments),this.xAxisName="date",this.yAxisName="",this.valueLabels=void 0,this.valueLabelsSingular=void 0,this.barChart=!1,this.period=t.Period.DAY,this.data=[]}render(){return P`
             <div class="sessions-chart"></div>
-        `}firstUpdated(t){var i;super.firstUpdated(t),this.myChart=null===(i=window.echarts)||void 0===i?void 0:i.init(this.container,void 0,{renderer:"svg"}),window.addEventListener("resize",(()=>{var t;null===(t=this.myChart)||void 0===t||t.resize()}))}updated(t){super.updated(t);const i=this.getOptions();i&&this.myChart&&this.myChart.setOption(i)}getOptions(){const i=this;return{tooltip:{trigger:"axis",formatter:t=>i.getTooltip(t)},grid:{left:"80px",right:"100px",top:"50px",bottom:"20px"},xAxis:{type:"category",name:this.xAxisName.toUpperCase(),axisTick:{alignWithLabel:!0},axisLabel:{formatter:n=>i.period===t.Period.DAY||i.period===t.Period.WEEK?Nt.utc(1e3*n).format("DD MMM YYYY"):(i.period,t.Period.MONTH,Nt.utc(1e3*n).format("MMMM YYYY"))}},yAxis:{type:"value",name:this.yAxisName.toUpperCase()},series:this.getSeries()}}getTooltip(i){const n=Nt.utc(1e3*i[0].data.value[0]),e=i.map((t=>t.data.value[1]));let r,s,o="";switch(this.period){case t.Period.DAY:r=n.format("DD MMM YYYY"),s="on",this.isThisPeriod(n,t.Period.DAY)&&(o=" so far");break;case t.Period.WEEK:r=n.format("DD MMM YYYY"),s="during the week of",this.isThisPeriod(n,t.Period.WEEK)&&(o=" so far");break;case t.Period.MONTH:s="in",r=n.format("MMMM YYYY"),this.isThisPeriod(n,t.Period.MONTH)&&(o=" so far")}let u="";for(let t=0;t<e.length;t++){let i=this.valueLabels?this.valueLabels[t]:this.yAxisName,n=this.valueLabelsSingular?this.valueLabelsSingular[t]:i;const a=1===e[t]?n:i;u+=`${e[t].toLocaleString()} ${a} ${s} ${r}${o}</br>`}return u.substring(0,u.length-5)}isThisPeriod(i,n,e=Nt.utc()){switch(n){case t.Period.DAY:return i.format("YYYY-MM-DD")===e.clone().startOf("day").format("YYYY-MM-DD");case t.Period.WEEK:return i.clone().startOf("isoWeek").format("YYYY-MM-DD")===e.clone().startOf("isoWeek").format("YYYY-MM-DD");case t.Period.MONTH:return i.month()===e.month()&&i.year()===e.year()}return!1}getSeries(){if(0==this.data.length)return[];const t=this.data[0].length-1;if(0==t)return[];let i=[];for(let n=0;n<t;n++)i[n]={type:this.barChart?"bar":"line",data:this.getData(n)};return i}getData(t){return this.data.map((i=>({value:[i[0],i[t+1]]})))}},t.FtChart.styles=Cr,Wr([e({type:String})],t.FtChart.prototype,"xAxisName",void 0),Wr([e({type:String})],t.FtChart.prototype,"yAxisName",void 0),Wr([u(void 0)],t.FtChart.prototype,"valueLabels",void 0),Wr([u(void 0)],t.FtChart.prototype,"valueLabelsSingular",void 0),Wr([e({type:Boolean})],t.FtChart.prototype,"barChart",void 0),Wr([e({type:String})],t.FtChart.prototype,"period",void 0),Wr([u([])],t.FtChart.prototype,"data",void 0),Wr([
+        `}firstUpdated(t){var i;super.firstUpdated(t),this.myChart=null===(i=window.echarts)||void 0===i?void 0:i.init(this.container,void 0,{renderer:"svg"}),window.addEventListener("resize",(()=>{var t;null===(t=this.myChart)||void 0===t||t.resize()}))}updated(t){super.updated(t);const i=this.getOptions();i&&this.myChart&&this.myChart.setOption(i)}getOptions(){const i=this;return{tooltip:{trigger:"axis",formatter:t=>i.getTooltip(t)},grid:{left:"80px",right:"100px",top:"50px",bottom:"20px"},xAxis:{type:"category",name:this.xAxisName.toUpperCase(),axisTick:{alignWithLabel:!0},axisLabel:{formatter:n=>i.period===t.Period.DAY||i.period===t.Period.WEEK?Nt.utc(1e3*n).format("DD MMM YYYY"):(i.period,t.Period.MONTH,Nt.utc(1e3*n).format("MMMM YYYY"))}},yAxis:{type:"value",name:this.yAxisName.toUpperCase()},series:this.getSeries()}}getTooltip(i){const n=Nt.utc(1e3*i[0].data.value[0]),e=i.map((t=>t.data.value[1]));let r,s,o="";switch(this.period){case t.Period.DAY:r=n.format("DD MMM YYYY"),s="on",this.isThisPeriod(n,t.Period.DAY)&&(o=" so far");break;case t.Period.WEEK:r=n.format("DD MMM YYYY"),s="during the week of",this.isThisPeriod(n,t.Period.WEEK)&&(o=" so far");break;case t.Period.MONTH:s="in",r=n.format("MMMM YYYY"),this.isThisPeriod(n,t.Period.MONTH)&&(o=" so far")}let u="";for(let t=0;t<e.length;t++){let i=this.valueLabels?this.valueLabels[t]:this.yAxisName,n=this.valueLabelsSingular?this.valueLabelsSingular[t]:i;const a=1===e[t]?n:i;u+=`${e[t].toLocaleString()} ${a} ${s} ${r}${o}</br>`}return u.substring(0,u.length-5)}isThisPeriod(i,n,e=Nt.utc()){switch(n){case t.Period.DAY:return i.format("YYYY-MM-DD")===e.clone().startOf("day").format("YYYY-MM-DD");case t.Period.WEEK:return i.clone().startOf("isoWeek").format("YYYY-MM-DD")===e.clone().startOf("isoWeek").format("YYYY-MM-DD");case t.Period.MONTH:return i.month()===e.month()&&i.year()===e.year()}return!1}getSeries(){if(0==this.data.length)return[];const t=this.data[0].length-1;if(0==t)return[];let i=[];for(let n=0;n<t;n++)i[n]={type:this.barChart?"bar":"line",data:this.getData(n)};return i}getData(t){return this.data.map((i=>this.isThisPeriod(Nt.unix(i[0]),this.period)?{value:[i[0],i[t+1]],itemStyle:{opacity:.5}}:{value:[i[0],i[t+1]]}))}},t.FtChart.styles=Cr,Wr([e({type:String})],t.FtChart.prototype,"xAxisName",void 0),Wr([e({type:String})],t.FtChart.prototype,"yAxisName",void 0),Wr([u(void 0)],t.FtChart.prototype,"valueLabels",void 0),Wr([u(void 0)],t.FtChart.prototype,"valueLabelsSingular",void 0),Wr([e({type:Boolean})],t.FtChart.prototype,"barChart",void 0),Wr([e({type:String})],t.FtChart.prototype,"period",void 0),Wr([u([])],t.FtChart.prototype,"data",void 0),Wr([
 /**
      * @license
      * Copyright 2017 Google LLC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-chart",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "Display charts from data",
   "keywords": [
     "Lit"
@@ -19,7 +19,7 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "1.0.34",
+    "@fluid-topics/ft-wc-utils": "1.0.36",
     "lit": "2.7.2",
     "moment": "2.29.4"
   },
@@ -29,5 +29,5 @@
   "peerDependencies": {
     "echarts": "^5.3.0"
   },
-  "gitHead": "58212a7e56bb7f81046ebf1c0ac93a7dfca9d279"
+  "gitHead": "7ace912b9fec53f21ded2d3b32ba7d723118d334"
 }