@kyndryl-design-system/shidoka-charts 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const t=getComputedStyle(document.documentElement).getPropertyValue("--kd-color-text-primary")||"#3d3c3c";var e={id:"doughnutLabel",beforeDraw:(e,o,n)=>{if("doughnut"===e.config.type&&!e.config.options.doughnutLabel?.disabled){const{ctx:o}=e,n=e.config.data.datasets[0].data.filter(((t,o)=>!e.legend.legendItems[o].hidden)).reduce(((t,e)=>t+e),0);o.textAlign="center",o.textBaseline="middle";var a=(e.chartArea.left+e.chartArea.right)/2,i=(e.chartArea.top+e.chartArea.bottom)/2-10;o.font='16px "Helvetica Neue", Helvetica, Arial, sans-serif',o.fillStyle=t;const l=e.config.options.doughnutLabel?.line1text,c=e.config.options.doughnutLabel?.line2text;let d=n,r=e.config.options.scales.y.title.text;(l||""===l)&&(d="function"==typeof l?l(d,o):l),(c||""===c)&&(r="function"==typeof c?c(r,o):c),o.fillText(d,a,i),o.fillText(r,a,i+20)}}};export{e as default};
|
|
2
2
|
//# sourceMappingURL=doughnutLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"doughnutLabel.js","sources":["../../../src/common/plugins/doughnutLabel.js"],"sourcesContent":["const TextColor =\n getComputedStyle(document.documentElement).getPropertyValue(\n '--kd-color-text-primary'\n ) || '#3d3c3c';\n\nexport default {\n id: 'doughnutLabel',\n beforeDraw: (chart, args, options) => {\n if (chart.config.type === 'doughnut') {\n const { ctx } = chart;\n\n // get sum of all visible data points\n const total = chart.config.data.datasets[0].data\n .filter((dataPoint, index) => !chart.legend.legendItems[index].hidden)\n .reduce((a, b) => a + b, 0);\n\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;\n var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2 - 10;\n ctx.font = '16px \"Helvetica Neue\", Helvetica, Arial, sans-serif';\n ctx.fillStyle = TextColor;\n\n //Draw text in center\n
|
|
1
|
+
{"version":3,"file":"doughnutLabel.js","sources":["../../../src/common/plugins/doughnutLabel.js"],"sourcesContent":["const TextColor =\n getComputedStyle(document.documentElement).getPropertyValue(\n '--kd-color-text-primary'\n ) || '#3d3c3c';\n\nexport default {\n id: 'doughnutLabel',\n beforeDraw: (chart, args, options) => {\n if (\n chart.config.type === 'doughnut' &&\n !chart.config.options.doughnutLabel?.disabled\n ) {\n const { ctx } = chart;\n\n // get sum of all visible data points\n const total = chart.config.data.datasets[0].data\n .filter((dataPoint, index) => !chart.legend.legendItems[index].hidden)\n .reduce((a, b) => a + b, 0);\n\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;\n var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2 - 10;\n ctx.font = '16px \"Helvetica Neue\", Helvetica, Arial, sans-serif';\n ctx.fillStyle = TextColor;\n\n //Draw text in center\n // get custom options for center text\n const Line1textOption = chart.config.options.doughnutLabel?.line1text;\n const Line2textOption = chart.config.options.doughnutLabel?.line2text;\n\n // set default values\n let Line1text = total;\n let Line2text = chart.config.options.scales.y.title.text;\n\n // determine if line1text option is given, is a function or not, and update text\n if (Line1textOption || Line1textOption === '') {\n Line1text =\n typeof Line1textOption === 'function'\n ? Line1textOption(Line1text, ctx)\n : Line1textOption;\n }\n\n // determine if line2text option is given, is a function or not, and update text\n if (Line2textOption || Line2textOption === '') {\n Line2text =\n typeof Line2textOption === 'function'\n ? Line2textOption(Line2text, ctx)\n : Line2textOption;\n }\n\n ctx.fillText(Line1text, centerX, centerY);\n ctx.fillText(Line2text, centerX, centerY + 20);\n }\n },\n};\n"],"names":["TextColor","getComputedStyle","document","documentElement","getPropertyValue","doughnutLabelPlugin","id","beforeDraw","chart","args","options","config","type","doughnutLabel","disabled","ctx","total","data","datasets","filter","dataPoint","index","legend","legendItems","hidden","reduce","a","b","textAlign","textBaseline","centerX","chartArea","left","right","centerY","top","bottom","font","fillStyle","Line1textOption","line1text","Line2textOption","line2text","Line1text","Line2text","scales","y","title","text","fillText"],"mappings":"AAAA,MAAMA,EACJC,iBAAiBC,SAASC,iBAAiBC,iBACzC,4BACG,UAEP,IAAeC,EAAA,CACbC,GAAI,gBACJC,WAAY,CAACC,EAAOC,EAAMC,KACxB,GACwB,aAAtBF,EAAMG,OAAOC,OACZJ,EAAMG,OAAOD,QAAQG,eAAeC,SACrC,CACA,MAAMC,IAAEA,GAAQP,EAGVQ,EAAQR,EAAMG,OAAOM,KAAKC,SAAS,GAAGD,KACzCE,QAAO,CAACC,EAAWC,KAAWb,EAAMc,OAAOC,YAAYF,GAAOG,SAC9DC,QAAO,CAACC,EAAGC,IAAMD,EAAIC,GAAG,GAE3BZ,EAAIa,UAAY,SAChBb,EAAIc,aAAe,SACnB,IAAIC,GAAWtB,EAAMuB,UAAUC,KAAOxB,EAAMuB,UAAUE,OAAS,EAC3DC,GAAW1B,EAAMuB,UAAUI,IAAM3B,EAAMuB,UAAUK,QAAU,EAAI,GACnErB,EAAIsB,KAAO,sDACXtB,EAAIuB,UAAYtC,EAIhB,MAAMuC,EAAkB/B,EAAMG,OAAOD,QAAQG,eAAe2B,UACtDC,EAAkBjC,EAAMG,OAAOD,QAAQG,eAAe6B,UAG5D,IAAIC,EAAY3B,EACZ4B,EAAYpC,EAAMG,OAAOD,QAAQmC,OAAOC,EAAEC,MAAMC,MAGhDT,GAAuC,KAApBA,KACrBI,EAC6B,mBAApBJ,EACHA,EAAgBI,EAAW5B,GAC3BwB,IAIJE,GAAuC,KAApBA,KACrBG,EAC6B,mBAApBH,EACHA,EAAgBG,EAAW7B,GAC3B0B,GAGR1B,EAAIkC,SAASN,EAAWb,EAASI,GACjCnB,EAAIkC,SAASL,EAAWd,EAASI,EAAU,GAC5C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../external/lit-element/lit-element.js';import{customElement as s}from'./../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as a}from'./../../external/@lit/reactive-element/decorators/state.js';import{query as n}from'./../../external/@lit/reactive-element/decorators/query.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{deepmerge as r,deepmergeCustom as c}from'./../../external/deepmerge-ts/dist/node/index.js';import'./../../external/chart.js/auto/auto.js';import'./../../external/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js';import{ChoroplethController as l,BubbleMapController as d,GeoFeature as h,ColorScale as p,SizeScale as m,ProjectionScale as u}from'./../../external/chartjs-chart-geo/build/index.js';import{TreemapController as g,TreemapElement as y}from'./../../external/chartjs-chart-treemap/dist/chartjs-chart-treemap.esm.js';import b from"../../common/plugins/canvasBackground.js";import f from"../../common/plugins/doughnutLabel.js";import v from'./../../external/chartjs-plugin-a11y-legend/dist/plugin.js';import j from'./../../external/chartjs-plugin-chart2music/dist/plugin.js';import w from'./../../external/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js';import T from'./../../external/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js';import{debounce as $,convertChartDataToCSV as k}from"../../common/helpers/helpers.js";import
|
|
1
|
+
import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../external/lit-element/lit-element.js';import{customElement as s}from'./../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as a}from'./../../external/@lit/reactive-element/decorators/state.js';import{query as n}from'./../../external/@lit/reactive-element/decorators/query.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{deepmerge as r,deepmergeCustom as c}from'./../../external/deepmerge-ts/dist/node/index.js';import'./../../external/chart.js/auto/auto.js';import'./../../external/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js';import{ChoroplethController as l,BubbleMapController as d,GeoFeature as h,ColorScale as p,SizeScale as m,ProjectionScale as u}from'./../../external/chartjs-chart-geo/build/index.js';import{TreemapController as g,TreemapElement as y}from'./../../external/chartjs-chart-treemap/dist/chartjs-chart-treemap.esm.js';import b from"../../common/plugins/canvasBackground.js";import f from"../../common/plugins/doughnutLabel.js";import v from'./../../external/chartjs-plugin-a11y-legend/dist/plugin.js';import j from'./../../external/chartjs-plugin-chart2music/dist/plugin.js';import w from'./../../external/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js';import T from'./../../external/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js';import{debounce as $,convertChartDataToCSV as k}from"../../common/helpers/helpers.js";import D from"./chart.scss.js";import _ from"../../common/config/globalOptions.js";import C from"../../common/config/globalOptionsNonRadial.js";import x from"../../common/config/globalOptionsRadial.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import A from'./../../external/@carbon/icons/es/chart--line/24.js';import E from'./../../external/@carbon/icons/es/table-of-contents/24.js';import O from'./../../external/@carbon/icons/es/download/20.js';import M from'./../../external/@carbon/icons/es/maximize/20.js';import V from'./../../external/@carbon/icons/es/minimize/20.js';import{Chart as L}from'./../../external/chart.js/dist/chart.js';function B(t){switch(t){case"../../common/config/chartTypes/bar.js":return import("../../common/config/chartTypes/bar.js");case"../../common/config/chartTypes/bubble.js":return import("../../common/config/chartTypes/bubble.js");case"../../common/config/chartTypes/bubbleMap.js":return import("../../common/config/chartTypes/bubbleMap.js");case"../../common/config/chartTypes/choropleth.js":return import("../../common/config/chartTypes/choropleth.js");case"../../common/config/chartTypes/doughnut.js":return import("../../common/config/chartTypes/doughnut.js");case"../../common/config/chartTypes/line.js":return import("../../common/config/chartTypes/line.js");case"../../common/config/chartTypes/pie.js":return import("../../common/config/chartTypes/pie.js");case"../../common/config/chartTypes/polarArea.js":return import("../../common/config/chartTypes/polarArea.js");case"../../common/config/chartTypes/radar.js":return import("../../common/config/chartTypes/radar.js");case"../../common/config/chartTypes/scatter.js":return import("../../common/config/chartTypes/scatter.js");case"../../common/config/chartTypes/treemap.js":return import("../../common/config/chartTypes/treemap.js");default:return new Promise((function(e,o){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(o.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}L.register(l,d,h,p,m,u,g,y);let F=class extends o{constructor(){super(...arguments),this.chartTitle="",this.description="",this.type="",this.options={},this.plugins=[],this.height=null,this.width=null,this.hideDescription=!1,this.hideCaptions=!1,this.hideHeader=!1,this.hideControls=!1,this.noBorder=!1,this.customLabels={toggleView:"Toggle View Mode",toggleFullscreen:"Toggle Fullscreen",downloadMenu:"Download Menu",downloadCsv:"Download as CSV",downloadPng:"Download as PNG",downloadJpg:"Download as JPG"},this.fullscreen=!1,this.chart=null,this.tableView=!1,this.tableDisabled=!1,this.mergedOptions={},this.mergedDatasets={}}render(){return e`
|
|
2
2
|
<div
|
|
3
3
|
class="container ${this.fullscreen?"fullscreen":""}
|
|
4
4
|
${this.noBorder?"no-border":""}"
|
|
@@ -7,7 +7,7 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
|
|
|
7
7
|
${this.hideHeader&&this.hideControls?null:e`
|
|
8
8
|
<div class="header">
|
|
9
9
|
${this.hideHeader?null:e`
|
|
10
|
-
<div>
|
|
10
|
+
<div id="titleDesc">
|
|
11
11
|
<div class="title">${this.chartTitle}</div>
|
|
12
12
|
<div
|
|
13
13
|
class="description ${this.hideDescription?"hidden-visually":""}"
|
|
@@ -91,7 +91,7 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
|
|
|
91
91
|
style="${this.width?`width: ${this.width}px;`:""}
|
|
92
92
|
${this.height?`height: ${this.height}px;`:""}"
|
|
93
93
|
>
|
|
94
|
-
<canvas role="img"></canvas>
|
|
94
|
+
<canvas role="img" aria-labelledby="titleDesc"></canvas>
|
|
95
95
|
</div>
|
|
96
96
|
<figcaption>
|
|
97
97
|
<div
|
|
@@ -129,5 +129,5 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
|
|
|
129
129
|
</div>
|
|
130
130
|
`:null}
|
|
131
131
|
</div>
|
|
132
|
-
`}connectedCallback(){super.connectedCallback();const t=this;null===window||void 0===window||window.addEventListener("resize",$((()=>{t._resizeChart()}),50))}disconnectedCallback(){const t=this;null===window||void 0===window||window.removeEventListener("resize",$((()=>{t._resizeChart()}),50)),super.disconnectedCallback()}_resizeChart(){this.chart&&this.chart.resize()}updated(t){this.chart&&(t.has("labels")||t.has("datasets")||t.has("options"))&&this.mergeOptions().then((()=>{this.chart.data.labels=this.labels,this.chart.options=this.mergedOptions,this.chart.data.datasets.forEach(((t,e)=>{this.mergedDatasets.find((e=>e.label===t.label))||this.chart.data.datasets.splice(e,1)})),this.mergedDatasets.forEach((t=>{const e=this.chart.data.datasets.find((e=>e.label===t.label));e?Object.keys(t).forEach((o=>{e[o]=t[o]})):this.chart.data.datasets.push(t)})),this.chart.update()}));let e=!1;this.datasets&&this.datasets.length&&this.datasets.forEach((t=>{e=t.data.length>0})),!this.chart&&this.type&&t.has("datasets")&&e&&(this.mergeOptions().then((()=>{this.initChart()})),this.checkType()),this.chart&&(t.has("type")||t.has("plugins")||t.has("width")||t.has("height"))&&(this.mergeOptions().then((()=>{this.initChart()})),this.checkType()),this.chart&&t.has("noBorder")&&this.chart.resize()}initChart(){L.defaults.color=getComputedStyle(document.documentElement).getPropertyValue("--kd-color-text-primary")||"#3d3c3c";let t=[b,f,...this.plugins];["choropleth","treemap","bubbleMap"].includes(this.type)||(t=[...t,v,j,T,w]),this.chart&&this.chart.destroy(),this.chart=new L(this.canvas,{type:this.type,data:{labels:this.labels,datasets:this.mergedDatasets},options:this.mergedOptions,plugins:t})}async mergeOptions(){const t=[];this.datasets.forEach((e=>{e.type&&t.push(function(t){switch(t){case"../../common/config/chartTypes/bar.js":return import("../../common/config/chartTypes/bar.js");case"../../common/config/chartTypes/bubble.js":return import("../../common/config/chartTypes/bubble.js");case"../../common/config/chartTypes/bubbleMap.js":return import("../../common/config/chartTypes/bubbleMap.js");case"../../common/config/chartTypes/choropleth.js":return import("../../common/config/chartTypes/choropleth.js");case"../../common/config/chartTypes/doughnut.js":return import("../../common/config/chartTypes/doughnut.js");case"../../common/config/chartTypes/line.js":return import("../../common/config/chartTypes/line.js");case"../../common/config/chartTypes/pie.js":return import("../../common/config/chartTypes/pie.js");case"../../common/config/chartTypes/polarArea.js":return import("../../common/config/chartTypes/polarArea.js");case"../../common/config/chartTypes/radar.js":return import("../../common/config/chartTypes/radar.js");case"../../common/config/chartTypes/scatter.js":return import("../../common/config/chartTypes/scatter.js");case"../../common/config/chartTypes/treemap.js":return import("../../common/config/chartTypes/treemap.js");default:return new Promise((function(e,o){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(o.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}(`../../common/config/chartTypes/${e.type}.js`))}));const e=await Promise.all([B(`../../common/config/chartTypes/${this.type}.js`),...t]);let o=
|
|
132
|
+
`}connectedCallback(){super.connectedCallback();const t=this;null===window||void 0===window||window.addEventListener("resize",$((()=>{t._resizeChart()}),50))}disconnectedCallback(){const t=this;null===window||void 0===window||window.removeEventListener("resize",$((()=>{t._resizeChart()}),50)),super.disconnectedCallback()}_resizeChart(){this.chart&&this.chart.resize()}updated(t){this.chart&&(t.has("labels")||t.has("datasets")||t.has("options"))&&this.mergeOptions().then((()=>{this.chart.data.labels=this.labels,this.chart.options=this.mergedOptions,this.chart.data.datasets.forEach(((t,e)=>{this.mergedDatasets.find((e=>e.label===t.label))||this.chart.data.datasets.splice(e,1)})),this.mergedDatasets.forEach((t=>{const e=this.chart.data.datasets.find((e=>e.label===t.label));e?Object.keys(t).forEach((o=>{e[o]=t[o]})):this.chart.data.datasets.push(t)})),this.chart.update()}));let e=!1;this.datasets&&this.datasets.length&&this.datasets.forEach((t=>{e=t.data.length>0})),!this.chart&&this.type&&t.has("datasets")&&e&&(this.mergeOptions().then((()=>{this.initChart()})),this.checkType()),this.chart&&(t.has("type")||t.has("plugins")||t.has("width")||t.has("height"))&&(this.mergeOptions().then((()=>{this.initChart()})),this.checkType()),this.chart&&t.has("noBorder")&&this.chart.resize()}initChart(){L.defaults.color=getComputedStyle(document.documentElement).getPropertyValue("--kd-color-text-primary")||"#3d3c3c";let t=[b,f,...this.plugins];["choropleth","treemap","bubbleMap"].includes(this.type)||(t=[...t,v,j,T,w]),this.chart&&this.chart.destroy(),this.chart=new L(this.canvas,{type:this.type,data:{labels:this.labels,datasets:this.mergedDatasets},options:this.mergedOptions,plugins:t})}async mergeOptions(){const t=[];this.datasets.forEach((e=>{e.type&&t.push(function(t){switch(t){case"../../common/config/chartTypes/bar.js":return import("../../common/config/chartTypes/bar.js");case"../../common/config/chartTypes/bubble.js":return import("../../common/config/chartTypes/bubble.js");case"../../common/config/chartTypes/bubbleMap.js":return import("../../common/config/chartTypes/bubbleMap.js");case"../../common/config/chartTypes/choropleth.js":return import("../../common/config/chartTypes/choropleth.js");case"../../common/config/chartTypes/doughnut.js":return import("../../common/config/chartTypes/doughnut.js");case"../../common/config/chartTypes/line.js":return import("../../common/config/chartTypes/line.js");case"../../common/config/chartTypes/pie.js":return import("../../common/config/chartTypes/pie.js");case"../../common/config/chartTypes/polarArea.js":return import("../../common/config/chartTypes/polarArea.js");case"../../common/config/chartTypes/radar.js":return import("../../common/config/chartTypes/radar.js");case"../../common/config/chartTypes/scatter.js":return import("../../common/config/chartTypes/scatter.js");case"../../common/config/chartTypes/treemap.js":return import("../../common/config/chartTypes/treemap.js");default:return new Promise((function(e,o){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(o.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}(`../../common/config/chartTypes/${e.type}.js`))}));const e=await Promise.all([B(`../../common/config/chartTypes/${this.type}.js`),...t]);let o=_(this);["pie","doughnut","radar","polarArea"].includes(this.type)?o=r(o,x()):["choropleth","treemap","bubbleMap"].includes(this.type)||(o=r(o,C(this)));const s=JSON.parse(JSON.stringify(this.datasets));e.forEach((t=>{o=r(o,t.options(this)),s.forEach(((e,o)=>{(!e.type&&t.type===this.type||e.type===t.type)&&(s[o]=r(e,t.datasetOptions(this,o)))}))})),this.options&&(o=r(o,this.options)),this.mergedOptions=o,s.forEach(((t,e)=>{const o=c({mergeArrays:!1});s[e]=o(t,this.datasets[e])})),this.mergedDatasets=s}getTableAxisLabel(){var t,e,o,s,i,a,n,r,c,l,d;let h="";return h="y"===(null===(t=this.options)||void 0===t?void 0:t.indexAxis)?(null===(i=null===(s=null===(o=null===(e=this.options)||void 0===e?void 0:e.scales)||void 0===o?void 0:o.y)||void 0===s?void 0:s.title)||void 0===i?void 0:i.text)?null===(a=this.options)||void 0===a?void 0:a.scales.y.title.text:"Y Axis":(null===(l=null===(c=null===(r=null===(n=this.options)||void 0===n?void 0:n.scales)||void 0===r?void 0:r.x)||void 0===c?void 0:c.title)||void 0===l?void 0:l.text)?null===(d=this.options)||void 0===d?void 0:d.scales.x.title.text:"X Axis",h}handleViewToggle(){this.tableView=!this.tableView}checkType(){this.tableDisabled=["choropleth","bubbleMap","treemap"].includes(this.type)}handleDownloadImage(t,e){t.preventDefault();const o=e?"image/jpeg":"image/png",s=e?"jpg":"png",i=document.createElement("a");i.href=this.chart.toBase64Image(o,1),i.download=this.chartTitle+"."+s,i.click()}handleDownloadCsv(t){t.preventDefault();let e="";for(let t=0;t<this.chart.data.datasets.length;t++)e+=k({data:this.chart.data.datasets[t],labels:this.labels});if(null==e)return;const o=this.chartTitle+".csv";e.match(/^data:text\/csv/i)||(e="data:text/csv;charset=utf-8,"+e);const s=encodeURI(e),i=document.createElement("a");i.setAttribute("href",s),i.setAttribute("download",o),document.body.appendChild(i),i.click(),document.body.removeChild(i)}handleFullscreen(){var t;(null===(t=this.shadowRoot)||void 0===t?void 0:t.fullscreenElement)?document.exitFullscreen():this.container.requestFullscreen()}handleFullscreenChange(){var t;this.fullscreen=null!==(null===(t=this.shadowRoot)||void 0===t?void 0:t.fullscreenElement)}};F.styles=D,t([i({type:String})],F.prototype,"chartTitle",void 0),t([i({type:String})],F.prototype,"description",void 0),t([i({type:String})],F.prototype,"type",void 0),t([i({type:Array})],F.prototype,"labels",void 0),t([i({type:Array})],F.prototype,"datasets",void 0),t([i({type:Object})],F.prototype,"options",void 0),t([i({type:Array})],F.prototype,"plugins",void 0),t([i({type:Number})],F.prototype,"height",void 0),t([i({type:Number})],F.prototype,"width",void 0),t([i({type:Boolean})],F.prototype,"hideDescription",void 0),t([i({type:Boolean})],F.prototype,"hideCaptions",void 0),t([i({type:Boolean})],F.prototype,"hideHeader",void 0),t([i({type:Boolean})],F.prototype,"hideControls",void 0),t([i({type:Boolean})],F.prototype,"noBorder",void 0),t([i({type:Object})],F.prototype,"customLabels",void 0),t([a()],F.prototype,"fullscreen",void 0),t([n(".container")],F.prototype,"container",void 0),t([n("canvas")],F.prototype,"canvas",void 0),t([n(".closed-caption")],F.prototype,"ccDiv",void 0),t([a()],F.prototype,"chart",void 0),t([a()],F.prototype,"tableView",void 0),t([a()],F.prototype,"tableDisabled",void 0),t([a()],F.prototype,"mergedOptions",void 0),t([a()],F.prototype,"mergedDatasets",void 0),F=t([s("kd-chart")],F);export{F as KDChart};
|
|
133
133
|
//# sourceMappingURL=chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.js","sources":["../../../src/components/chart/chart.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { deepmerge, deepmergeCustom } from 'deepmerge-ts';\nimport Chart from 'chart.js/auto';\nimport 'chartjs-adapter-date-fns';\nimport {\n ChoroplethController,\n BubbleMapController,\n GeoFeature,\n ColorScale,\n SizeScale,\n ProjectionScale,\n} from 'chartjs-chart-geo';\nimport { TreemapController, TreemapElement } from 'chartjs-chart-treemap';\nimport canvasBackgroundPlugin from '../../common/plugins/canvasBackground';\nimport doughnutLabelPlugin from '../../common/plugins/doughnutLabel';\nimport a11yPlugin from 'chartjs-plugin-a11y-legend';\nimport musicPlugin from 'chartjs-plugin-chart2music';\nimport datalabelsPlugin from 'chartjs-plugin-datalabels';\nimport annotationPlugin from 'chartjs-plugin-annotation';\nimport { convertChartDataToCSV, debounce } from '../../common/helpers/helpers';\nimport ChartScss from './chart.scss';\nimport globalOptions from '../../common/config/globalOptions';\nimport globalOptionsNonRadial from '../../common/config/globalOptionsNonRadial';\nimport globalOptionsRadial from '../../common/config/globalOptionsRadial';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport chartIcon from '@carbon/icons/es/chart--line/24';\nimport tableIcon from '@carbon/icons/es/table-of-contents/24';\nimport downloadIcon from '@carbon/icons/es/download/20';\nimport maximizeIcon from '@carbon/icons/es/maximize/20';\nimport minimizeIcon from '@carbon/icons/es/minimize/20';\n\nChart.register(\n ChoroplethController,\n BubbleMapController,\n GeoFeature,\n ColorScale,\n SizeScale,\n ProjectionScale,\n TreemapController,\n TreemapElement\n);\n\n/**\n * Chart.js wrapper component.\n * @slot unnamed - Slot for custom content between header and chart.\n * @slot controls - Slot for custom controls such as an overflow menu.\n */\n@customElement('kd-chart')\nexport class KDChart extends LitElement {\n static override styles = ChartScss;\n\n /** Chart title. */\n @property({ type: String })\n chartTitle = '';\n\n /** Chart description. */\n @property({ type: String })\n description = '';\n\n /** Chart.js chart type. */\n @property({ type: String })\n type: any = '';\n\n /** Chart.js data.labels. */\n @property({ type: Array })\n labels!: Array<string>;\n\n /** Chart.js data.datasets. */\n @property({ type: Array })\n datasets!: Array<any>;\n\n /** Chart.js options. Can override Shidoka defaults. */\n @property({ type: Object })\n options: any = {};\n\n /** Chart.js additional plugins. Must be registerable inline via Chart.plugins array, not globally via Chart.register. */\n @property({ type: Array })\n plugins: any = [];\n\n /** Chart.js canvas height (px). Disables maintainAspectRatio option. */\n @property({ type: Number })\n height: any = null;\n\n /** Chart.js canvas width (px). Disables maintainAspectRatio option. */\n @property({ type: Number })\n width: any = null;\n\n /** Hides the description visually. */\n @property({ type: Boolean })\n hideDescription = false;\n\n /** Hides the closed captions visually. */\n @property({ type: Boolean })\n hideCaptions = false;\n\n /** Hides the title & description. */\n @property({ type: Boolean })\n hideHeader = false;\n\n /** Hides the controls. */\n @property({ type: Boolean })\n hideControls = false;\n\n /** Removes the outer border and padding. */\n @property({ type: Boolean })\n noBorder = false;\n\n /** Customizable text labels. */\n @property({ type: Object })\n customLabels = {\n toggleView: 'Toggle View Mode',\n toggleFullscreen: 'Toggle Fullscreen',\n downloadMenu: 'Download Menu',\n downloadCsv: 'Download as CSV',\n downloadPng: 'Download as PNG',\n downloadJpg: 'Download as JPG',\n };\n\n /** Fullscreen state.\n * @ignore\n */\n @state()\n fullscreen = false;\n\n /**\n * Queries the container element.\n * @ignore\n */\n @query('.container')\n container!: HTMLCanvasElement;\n\n /**\n * Queries the canvas element.\n * @ignore\n */\n @query('canvas')\n canvas!: HTMLCanvasElement;\n\n /**\n * Queries the closed caption div.\n * @ignore\n */\n @query('.closed-caption')\n ccDiv!: HTMLDivElement;\n\n /** The chart instance.\n * @ignore\n */\n @state()\n chart: any = null;\n\n /** Table view mode.\n * @ignore\n */\n @state()\n tableView = false;\n\n /** Disable table view feature.\n * @ignore\n */\n @state()\n tableDisabled = false;\n\n /** Merged options.\n * @ignore\n */\n @state()\n mergedOptions: any = {};\n\n /** Merged datasets.\n * @ignore\n */\n @state()\n mergedDatasets: any = {};\n\n override render() {\n return html`\n <div\n class=\"container ${this.fullscreen ? 'fullscreen' : ''}\n ${this.noBorder ? 'no-border' : ''}\"\n @fullscreenchange=${() => this.handleFullscreenChange()}\n >\n ${!this.hideHeader || !this.hideControls\n ? html`\n <div class=\"header\">\n ${!this.hideHeader\n ? html`\n <div>\n <div class=\"title\">${this.chartTitle}</div>\n <div\n class=\"description ${this.hideDescription\n ? 'hidden-visually'\n : ''}\"\n >\n ${this.description}\n </div>\n </div>\n `\n : null}\n ${!this.hideControls\n ? html`\n <div class=\"controls\">\n ${!this.tableDisabled\n ? html`\n <button\n title=\"Toggle View Mode\"\n aria-label=\"Toggle View Mode\"\n class=\"view-toggle control-button\"\n @click=${() => this.handleViewToggle()}\n >\n <kd-icon\n .icon=${chartIcon}\n class=\"${!this.tableView ? 'active' : ''}\"\n ></kd-icon>\n <kd-icon\n .icon=${tableIcon}\n class=\"${this.tableView ? 'active' : ''}\"\n ></kd-icon>\n </button>\n `\n : null}\n\n <button\n title=${this.customLabels.toggleFullscreen}\n aria-label=${this.customLabels.toggleFullscreen}\n class=\"control-button\"\n @click=${() => this.handleFullscreen()}\n >\n <kd-icon\n .icon=${this.fullscreen\n ? minimizeIcon\n : maximizeIcon}\n ></kd-icon>\n </button>\n\n <div class=\"download\">\n <button\n title=${this.customLabels.downloadMenu}\n aria-label=${this.customLabels.downloadMenu}\n class=\"control-button download-button\"\n >\n <kd-icon .icon=${downloadIcon}></kd-icon>\n </button>\n\n <div class=\"download-menu\">\n ${!this.tableDisabled\n ? html`\n <button\n @click=${(e: Event) =>\n this.handleDownloadCsv(e)}\n >\n ${this.customLabels.downloadCsv}\n </button>\n `\n : null}\n <button\n @click=${(e: Event) =>\n this.handleDownloadImage(e, false)}\n >\n ${this.customLabels.downloadPng}\n </button>\n <button\n @click=${(e: Event) =>\n this.handleDownloadImage(e, true)}\n >\n ${this.customLabels.downloadJpg}\n </button>\n </div>\n </div>\n\n <slot name=\"controls\"></slot>\n </div>\n `\n : null}\n </div>\n `\n : null}\n\n <slot></slot>\n\n <figure class=\"${this.tableView ? 'hidden' : ''}\">\n <div\n class=\"canvas-container\"\n style=\"${this.width ? `width: ${this.width}px;` : ''}\n ${this.height ? `height: ${this.height}px;` : ''}\"\n >\n <canvas role=\"img\"></canvas>\n </div>\n <figcaption>\n <div\n class=\"closed-caption ${this.hideCaptions\n ? 'hidden-visually'\n : ''}\"\n ></div>\n </figcaption>\n </figure>\n\n ${!this.tableDisabled && this.tableView\n ? html`\n <div class=\"table\">\n <table>\n <thead>\n <tr>\n ${this.labels.length\n ? html`<th>${this.getTableAxisLabel()}</th>`\n : null}\n ${this.datasets.map((dataset) => {\n return html`<th>${dataset.label}</th>`;\n })}\n </tr>\n </thead>\n <tbody>\n ${this.datasets[0].data.map((_value: any, i: number) => {\n return html`\n <tr>\n ${this.labels.length\n ? html`<td>${this.labels[i]}</td>`\n : null}\n ${this.datasets.map((dataset) => {\n const dataPoint = dataset.data[i];\n\n if (Array.isArray(dataPoint)) {\n // handle data in array format\n return html`\n <td>${dataPoint[0]}, ${dataPoint[1]}</td>\n `;\n } else if (\n typeof dataPoint === 'object' &&\n !Array.isArray(dataPoint) &&\n dataPoint !== null\n ) {\n // handle data in object format\n return html`\n <td>\n ${Object.keys(dataPoint).map((key) => {\n return html`\n <span>${key}: ${dataPoint[key]}</span>\n `;\n })}\n </td>\n `;\n } else {\n // handle data in number/basic format\n return html`<td>${dataset.data[i]}</td>`;\n }\n })}\n </tr>\n `;\n })}\n </tbody>\n </table>\n </div>\n `\n : null}\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n const Parent = this;\n window?.addEventListener(\n 'resize',\n debounce(() => {\n Parent._resizeChart();\n }, 50)\n );\n }\n\n override disconnectedCallback() {\n const Parent = this;\n window?.removeEventListener(\n 'resize',\n debounce(() => {\n Parent._resizeChart();\n }, 50)\n );\n\n super.disconnectedCallback();\n }\n\n private _resizeChart() {\n if (this.chart) {\n this.chart.resize();\n }\n }\n\n override updated(changedProps: any) {\n // Update chart instance when data changes.\n if (\n this.chart &&\n (changedProps.has('labels') ||\n changedProps.has('datasets') ||\n changedProps.has('options'))\n ) {\n this.mergeOptions().then(() => {\n this.chart.data.labels = this.labels;\n this.chart.options = this.mergedOptions;\n\n // remove datasets not in mergedDatasets\n this.chart.data.datasets.forEach((dataset: any, index: number) => {\n const NewDataset = this.mergedDatasets.find(\n (newDataset: any) => newDataset.label === dataset.label\n );\n\n if (!NewDataset) {\n // remove\n this.chart.data.datasets.splice(index, 1);\n }\n });\n\n // update datasets, add new ones\n this.mergedDatasets.forEach((dataset: any) => {\n const OldDataset = this.chart.data.datasets.find(\n (oldDataset: any) => oldDataset.label === dataset.label\n );\n\n if (!OldDataset) {\n // add new dataset\n this.chart.data.datasets.push(dataset);\n } else {\n // update each key/entry in the dataset object\n Object.keys(dataset).forEach((key) => {\n OldDataset[key] = dataset[key];\n });\n }\n });\n\n this.chart.update();\n });\n }\n\n // init chart\n // check to make sure initial datasets + data have been provided\n let hasData = false;\n if (this.datasets && this.datasets.length) {\n this.datasets.forEach((dataset) => {\n hasData = dataset.data.length > 0;\n });\n }\n\n if (!this.chart && this.type && changedProps.has('datasets') && hasData) {\n this.mergeOptions().then(() => {\n this.initChart();\n });\n\n this.checkType();\n }\n\n // Re-init chart instance when type, plugins, colorPalette, width, or height change.\n if (\n this.chart &&\n (changedProps.has('type') ||\n changedProps.has('plugins') ||\n changedProps.has('width') ||\n changedProps.has('height'))\n ) {\n this.mergeOptions().then(() => {\n this.initChart();\n });\n\n this.checkType();\n }\n\n if (this.chart && changedProps.has('noBorder')) {\n this.chart.resize();\n }\n }\n\n /**\n * Initializes a bar chart using the Chart.js library with provided labels, datasets,\n * and options.\n */\n private initChart() {\n const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n\n // Chart.defaults.font.family = getComputedStyle(\n // document.documentElement\n // ).getPropertyValue('--kd-font-family-secondary');\n Chart.defaults.color =\n getComputedStyle(document.documentElement).getPropertyValue(\n '--kd-color-text-primary'\n ) || '#3d3c3c';\n\n let plugins = [\n canvasBackgroundPlugin,\n doughnutLabelPlugin,\n ...this.plugins,\n ];\n\n // only add certain plugins for standard chart types\n if (!ignoredTypes.includes(this.type)) {\n plugins = [\n ...plugins,\n a11yPlugin,\n musicPlugin,\n annotationPlugin,\n datalabelsPlugin,\n ];\n }\n\n if (this.chart) {\n this.chart.destroy();\n }\n\n this.chart = new Chart(this.canvas, {\n type: this.type,\n data: {\n labels: this.labels,\n datasets: this.mergedDatasets,\n },\n options: this.mergedOptions,\n plugins: plugins,\n });\n }\n\n /**\n * Merges various chart type options and dataset options to create a\n * final set of options for a chart.\n */\n private async mergeOptions() {\n const radialTypes = ['pie', 'doughnut', 'radar', 'polarArea'];\n const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n\n // get chart types from datasets so we can import additional configs\n const additionalTypeImports: any = [];\n this.datasets.forEach((dataset) => {\n if (dataset.type) {\n additionalTypeImports.push(\n import(`../../common/config/chartTypes/${dataset.type}.js`)\n );\n }\n });\n\n // import main and additional chart type configs\n const chartTypeConfigs = await Promise.all([\n import(`../../common/config/chartTypes/${this.type}.js`),\n ...additionalTypeImports,\n ]);\n\n // start with global options\n let mergedOptions: any = globalOptions(this);\n\n // merge global type options\n if (radialTypes.includes(this.type)) {\n mergedOptions = deepmerge(mergedOptions, globalOptionsRadial(this));\n } else if (!ignoredTypes.includes(this.type)) {\n mergedOptions = deepmerge(mergedOptions, globalOptionsNonRadial(this));\n }\n\n const mergedDatasets: any = JSON.parse(JSON.stringify(this.datasets));\n\n chartTypeConfigs.forEach((chartTypeConfig: any) => {\n // merge all of the imported chart type options with the global options\n mergedOptions = deepmerge(mergedOptions, chartTypeConfig.options(this));\n\n // merge all of the imported chart type dataset options\n mergedDatasets.forEach((dataset: any, index: number) => {\n if (\n (!dataset.type && chartTypeConfig.type === this.type) ||\n dataset.type === chartTypeConfig.type\n ) {\n mergedDatasets[index] = deepmerge(\n dataset,\n chartTypeConfig.datasetOptions(this, index)\n );\n }\n });\n });\n\n if (this.options) {\n // merge any consumer supplied options with defaults\n mergedOptions = deepmerge(mergedOptions, this.options);\n }\n this.mergedOptions = mergedOptions;\n\n // merge default chart type dataset options with consumer supplied datasets\n mergedDatasets.forEach((dataset: object, index: number) => {\n const customDeepmerge = deepmergeCustom({\n mergeArrays: false,\n });\n mergedDatasets[index] = customDeepmerge(dataset, this.datasets[index]);\n });\n\n this.mergedDatasets = mergedDatasets;\n }\n\n private getTableAxisLabel() {\n let label = '';\n\n if (this.options?.indexAxis === 'y') {\n if (this.options?.scales?.y?.title?.text) {\n label = this.options?.scales.y.title.text;\n } else {\n label = 'Y Axis';\n }\n } else {\n if (this.options?.scales?.x?.title?.text) {\n label = this.options?.scales.x.title.text;\n } else {\n label = 'X Axis';\n }\n }\n\n return label;\n }\n\n private handleViewToggle() {\n this.tableView = !this.tableView;\n }\n\n private checkType() {\n // chart types that can't have a data table view\n const blacklist = ['choropleth', 'bubbleMap', 'treemap'];\n this.tableDisabled = blacklist.includes(this.type);\n }\n\n private handleDownloadImage(e: Event, jpeg: boolean) {\n e.preventDefault();\n\n const imgFormat = jpeg ? 'image/jpeg' : 'image/png';\n const fileExt = jpeg ? 'jpg' : 'png';\n const a = document.createElement('a');\n\n a.href = this.chart.toBase64Image(imgFormat, 1);\n a.download = this.chartTitle + '.' + fileExt;\n\n // trigger the download\n a.click();\n }\n\n private handleDownloadCsv(e: Event) {\n e.preventDefault();\n let csv = '';\n\n for (let i = 0; i < this.chart.data.datasets.length; i++) {\n csv += convertChartDataToCSV({\n data: this.chart.data.datasets[i],\n labels: this.labels,\n });\n }\n if (csv == null) return;\n\n const filename = this.chartTitle + '.csv';\n if (!csv.match(/^data:text\\/csv/i)) {\n csv = 'data:text/csv;charset=utf-8,' + csv;\n }\n\n // not sure if anything below this comment works\n const data = encodeURI(csv);\n const link = document.createElement('a');\n link.setAttribute('href', data);\n link.setAttribute('download', filename);\n document.body.appendChild(link); // Required for FF\n link.click();\n document.body.removeChild(link);\n }\n\n private handleFullscreen() {\n if (this.shadowRoot?.fullscreenElement) {\n document.exitFullscreen();\n } else {\n this.container.requestFullscreen();\n }\n }\n\n private handleFullscreenChange() {\n this.fullscreen = this.shadowRoot?.fullscreenElement !== null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kd-chart': KDChart;\n }\n}\n"],"names":["Chart","register","ChoroplethController","BubbleMapController","GeoFeature","ColorScale","SizeScale","ProjectionScale","TreemapController","TreemapElement","KDChart","LitElement","constructor","this","chartTitle","description","type","options","plugins","height","width","hideDescription","hideCaptions","hideHeader","hideControls","noBorder","customLabels","toggleView","toggleFullscreen","downloadMenu","downloadCsv","downloadPng","downloadJpg","fullscreen","chart","tableView","tableDisabled","mergedOptions","mergedDatasets","render","html","handleFullscreenChange","handleViewToggle","chartIcon","tableIcon","handleFullscreen","minimizeIcon","maximizeIcon","downloadIcon","e","handleDownloadCsv","handleDownloadImage","labels","length","getTableAxisLabel","datasets","map","dataset","label","data","_value","i","dataPoint","Array","isArray","Object","keys","key","connectedCallback","super","Parent","window","addEventListener","debounce","_resizeChart","disconnectedCallback","removeEventListener","resize","updated","changedProps","has","mergeOptions","then","forEach","index","find","newDataset","splice","OldDataset","oldDataset","push","update","hasData","initChart","checkType","defaults","color","getComputedStyle","document","documentElement","getPropertyValue","canvasBackgroundPlugin","doughnutLabelPlugin","includes","a11yPlugin","musicPlugin","annotationPlugin","datalabelsPlugin","destroy","canvas","additionalTypeImports","__variableDynamicImportRuntime0__","chartTypeConfigs","Promise","all","__variableDynamicImportRuntime1__","globalOptions","deepmerge","globalOptionsRadial","globalOptionsNonRadial","JSON","parse","stringify","chartTypeConfig","datasetOptions","customDeepmerge","deepmergeCustom","mergeArrays","_a","indexAxis","_e","_d","_c","_b","scales","y","title","text","_f","_k","_j","_h","_g","x","_l","jpeg","preventDefault","imgFormat","fileExt","a","createElement","href","toBase64Image","download","click","csv","convertChartDataToCSV","filename","match","encodeURI","link","setAttribute","body","appendChild","removeChild","shadowRoot","fullscreenElement","exitFullscreen","container","requestFullscreen","styles","ChartScss","__decorate","property","String","prototype","Number","Boolean","state","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"chart.js","sources":["../../../src/components/chart/chart.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { deepmerge, deepmergeCustom } from 'deepmerge-ts';\nimport Chart from 'chart.js/auto';\nimport 'chartjs-adapter-date-fns';\nimport {\n ChoroplethController,\n BubbleMapController,\n GeoFeature,\n ColorScale,\n SizeScale,\n ProjectionScale,\n} from 'chartjs-chart-geo';\nimport { TreemapController, TreemapElement } from 'chartjs-chart-treemap';\nimport canvasBackgroundPlugin from '../../common/plugins/canvasBackground';\nimport doughnutLabelPlugin from '../../common/plugins/doughnutLabel';\nimport a11yPlugin from 'chartjs-plugin-a11y-legend';\nimport musicPlugin from 'chartjs-plugin-chart2music';\nimport datalabelsPlugin from 'chartjs-plugin-datalabels';\nimport annotationPlugin from 'chartjs-plugin-annotation';\nimport { convertChartDataToCSV, debounce } from '../../common/helpers/helpers';\nimport ChartScss from './chart.scss';\nimport globalOptions from '../../common/config/globalOptions';\nimport globalOptionsNonRadial from '../../common/config/globalOptionsNonRadial';\nimport globalOptionsRadial from '../../common/config/globalOptionsRadial';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport chartIcon from '@carbon/icons/es/chart--line/24';\nimport tableIcon from '@carbon/icons/es/table-of-contents/24';\nimport downloadIcon from '@carbon/icons/es/download/20';\nimport maximizeIcon from '@carbon/icons/es/maximize/20';\nimport minimizeIcon from '@carbon/icons/es/minimize/20';\n\nChart.register(\n ChoroplethController,\n BubbleMapController,\n GeoFeature,\n ColorScale,\n SizeScale,\n ProjectionScale,\n TreemapController,\n TreemapElement\n);\n\n/**\n * Chart.js wrapper component.\n * @slot unnamed - Slot for custom content between header and chart.\n * @slot controls - Slot for custom controls such as an overflow menu.\n */\n@customElement('kd-chart')\nexport class KDChart extends LitElement {\n static override styles = ChartScss;\n\n /** Chart title. */\n @property({ type: String })\n chartTitle = '';\n\n /** Chart description. */\n @property({ type: String })\n description = '';\n\n /** Chart.js chart type. */\n @property({ type: String })\n type: any = '';\n\n /** Chart.js data.labels. */\n @property({ type: Array })\n labels!: Array<string>;\n\n /** Chart.js data.datasets. */\n @property({ type: Array })\n datasets!: Array<any>;\n\n /** Chart.js options. Can override Shidoka defaults. */\n @property({ type: Object })\n options: any = {};\n\n /** Chart.js additional plugins. Must be registerable inline via Chart.plugins array, not globally via Chart.register. */\n @property({ type: Array })\n plugins: any = [];\n\n /** Chart.js canvas height (px). Disables maintainAspectRatio option. */\n @property({ type: Number })\n height: any = null;\n\n /** Chart.js canvas width (px). Disables maintainAspectRatio option. */\n @property({ type: Number })\n width: any = null;\n\n /** Hides the description visually. */\n @property({ type: Boolean })\n hideDescription = false;\n\n /** Hides the closed captions visually. */\n @property({ type: Boolean })\n hideCaptions = false;\n\n /** Hides the title & description. */\n @property({ type: Boolean })\n hideHeader = false;\n\n /** Hides the controls. */\n @property({ type: Boolean })\n hideControls = false;\n\n /** Removes the outer border and padding. */\n @property({ type: Boolean })\n noBorder = false;\n\n /** Customizable text labels. */\n @property({ type: Object })\n customLabels = {\n toggleView: 'Toggle View Mode',\n toggleFullscreen: 'Toggle Fullscreen',\n downloadMenu: 'Download Menu',\n downloadCsv: 'Download as CSV',\n downloadPng: 'Download as PNG',\n downloadJpg: 'Download as JPG',\n };\n\n /** Fullscreen state.\n * @ignore\n */\n @state()\n fullscreen = false;\n\n /**\n * Queries the container element.\n * @ignore\n */\n @query('.container')\n container!: HTMLCanvasElement;\n\n /**\n * Queries the canvas element.\n * @ignore\n */\n @query('canvas')\n canvas!: HTMLCanvasElement;\n\n /**\n * Queries the closed caption div.\n * @ignore\n */\n @query('.closed-caption')\n ccDiv!: HTMLDivElement;\n\n /** The chart instance.\n * @ignore\n */\n @state()\n chart: any = null;\n\n /** Table view mode.\n * @ignore\n */\n @state()\n tableView = false;\n\n /** Disable table view feature.\n * @ignore\n */\n @state()\n tableDisabled = false;\n\n /** Merged options.\n * @ignore\n */\n @state()\n mergedOptions: any = {};\n\n /** Merged datasets.\n * @ignore\n */\n @state()\n mergedDatasets: any = {};\n\n override render() {\n return html`\n <div\n class=\"container ${this.fullscreen ? 'fullscreen' : ''}\n ${this.noBorder ? 'no-border' : ''}\"\n @fullscreenchange=${() => this.handleFullscreenChange()}\n >\n ${!this.hideHeader || !this.hideControls\n ? html`\n <div class=\"header\">\n ${!this.hideHeader\n ? html`\n <div id=\"titleDesc\">\n <div class=\"title\">${this.chartTitle}</div>\n <div\n class=\"description ${this.hideDescription\n ? 'hidden-visually'\n : ''}\"\n >\n ${this.description}\n </div>\n </div>\n `\n : null}\n ${!this.hideControls\n ? html`\n <div class=\"controls\">\n ${!this.tableDisabled\n ? html`\n <button\n title=\"Toggle View Mode\"\n aria-label=\"Toggle View Mode\"\n class=\"view-toggle control-button\"\n @click=${() => this.handleViewToggle()}\n >\n <kd-icon\n .icon=${chartIcon}\n class=\"${!this.tableView ? 'active' : ''}\"\n ></kd-icon>\n <kd-icon\n .icon=${tableIcon}\n class=\"${this.tableView ? 'active' : ''}\"\n ></kd-icon>\n </button>\n `\n : null}\n\n <button\n title=${this.customLabels.toggleFullscreen}\n aria-label=${this.customLabels.toggleFullscreen}\n class=\"control-button\"\n @click=${() => this.handleFullscreen()}\n >\n <kd-icon\n .icon=${this.fullscreen\n ? minimizeIcon\n : maximizeIcon}\n ></kd-icon>\n </button>\n\n <div class=\"download\">\n <button\n title=${this.customLabels.downloadMenu}\n aria-label=${this.customLabels.downloadMenu}\n class=\"control-button download-button\"\n >\n <kd-icon .icon=${downloadIcon}></kd-icon>\n </button>\n\n <div class=\"download-menu\">\n ${!this.tableDisabled\n ? html`\n <button\n @click=${(e: Event) =>\n this.handleDownloadCsv(e)}\n >\n ${this.customLabels.downloadCsv}\n </button>\n `\n : null}\n <button\n @click=${(e: Event) =>\n this.handleDownloadImage(e, false)}\n >\n ${this.customLabels.downloadPng}\n </button>\n <button\n @click=${(e: Event) =>\n this.handleDownloadImage(e, true)}\n >\n ${this.customLabels.downloadJpg}\n </button>\n </div>\n </div>\n\n <slot name=\"controls\"></slot>\n </div>\n `\n : null}\n </div>\n `\n : null}\n\n <slot></slot>\n\n <figure class=\"${this.tableView ? 'hidden' : ''}\">\n <div\n class=\"canvas-container\"\n style=\"${this.width ? `width: ${this.width}px;` : ''}\n ${this.height ? `height: ${this.height}px;` : ''}\"\n >\n <canvas role=\"img\" aria-labelledby=\"titleDesc\"></canvas>\n </div>\n <figcaption>\n <div\n class=\"closed-caption ${this.hideCaptions\n ? 'hidden-visually'\n : ''}\"\n ></div>\n </figcaption>\n </figure>\n\n ${!this.tableDisabled && this.tableView\n ? html`\n <div class=\"table\">\n <table>\n <thead>\n <tr>\n ${this.labels.length\n ? html`<th>${this.getTableAxisLabel()}</th>`\n : null}\n ${this.datasets.map((dataset) => {\n return html`<th>${dataset.label}</th>`;\n })}\n </tr>\n </thead>\n <tbody>\n ${this.datasets[0].data.map((_value: any, i: number) => {\n return html`\n <tr>\n ${this.labels.length\n ? html`<td>${this.labels[i]}</td>`\n : null}\n ${this.datasets.map((dataset) => {\n const dataPoint = dataset.data[i];\n\n if (Array.isArray(dataPoint)) {\n // handle data in array format\n return html`\n <td>${dataPoint[0]}, ${dataPoint[1]}</td>\n `;\n } else if (\n typeof dataPoint === 'object' &&\n !Array.isArray(dataPoint) &&\n dataPoint !== null\n ) {\n // handle data in object format\n return html`\n <td>\n ${Object.keys(dataPoint).map((key) => {\n return html`\n <span>${key}: ${dataPoint[key]}</span>\n `;\n })}\n </td>\n `;\n } else {\n // handle data in number/basic format\n return html`<td>${dataset.data[i]}</td>`;\n }\n })}\n </tr>\n `;\n })}\n </tbody>\n </table>\n </div>\n `\n : null}\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n const Parent = this;\n window?.addEventListener(\n 'resize',\n debounce(() => {\n Parent._resizeChart();\n }, 50)\n );\n }\n\n override disconnectedCallback() {\n const Parent = this;\n window?.removeEventListener(\n 'resize',\n debounce(() => {\n Parent._resizeChart();\n }, 50)\n );\n\n super.disconnectedCallback();\n }\n\n private _resizeChart() {\n if (this.chart) {\n this.chart.resize();\n }\n }\n\n override updated(changedProps: any) {\n // Update chart instance when data changes.\n if (\n this.chart &&\n (changedProps.has('labels') ||\n changedProps.has('datasets') ||\n changedProps.has('options'))\n ) {\n this.mergeOptions().then(() => {\n this.chart.data.labels = this.labels;\n this.chart.options = this.mergedOptions;\n\n // remove datasets not in mergedDatasets\n this.chart.data.datasets.forEach((dataset: any, index: number) => {\n const NewDataset = this.mergedDatasets.find(\n (newDataset: any) => newDataset.label === dataset.label\n );\n\n if (!NewDataset) {\n // remove\n this.chart.data.datasets.splice(index, 1);\n }\n });\n\n // update datasets, add new ones\n this.mergedDatasets.forEach((dataset: any) => {\n const OldDataset = this.chart.data.datasets.find(\n (oldDataset: any) => oldDataset.label === dataset.label\n );\n\n if (!OldDataset) {\n // add new dataset\n this.chart.data.datasets.push(dataset);\n } else {\n // update each key/entry in the dataset object\n Object.keys(dataset).forEach((key) => {\n OldDataset[key] = dataset[key];\n });\n }\n });\n\n this.chart.update();\n });\n }\n\n // init chart\n // check to make sure initial datasets + data have been provided\n let hasData = false;\n if (this.datasets && this.datasets.length) {\n this.datasets.forEach((dataset) => {\n hasData = dataset.data.length > 0;\n });\n }\n\n if (!this.chart && this.type && changedProps.has('datasets') && hasData) {\n this.mergeOptions().then(() => {\n this.initChart();\n });\n\n this.checkType();\n }\n\n // Re-init chart instance when type, plugins, colorPalette, width, or height change.\n if (\n this.chart &&\n (changedProps.has('type') ||\n changedProps.has('plugins') ||\n changedProps.has('width') ||\n changedProps.has('height'))\n ) {\n this.mergeOptions().then(() => {\n this.initChart();\n });\n\n this.checkType();\n }\n\n if (this.chart && changedProps.has('noBorder')) {\n this.chart.resize();\n }\n }\n\n /**\n * Initializes a bar chart using the Chart.js library with provided labels, datasets,\n * and options.\n */\n private initChart() {\n const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n\n // Chart.defaults.font.family = getComputedStyle(\n // document.documentElement\n // ).getPropertyValue('--kd-font-family-secondary');\n Chart.defaults.color =\n getComputedStyle(document.documentElement).getPropertyValue(\n '--kd-color-text-primary'\n ) || '#3d3c3c';\n\n let plugins = [\n canvasBackgroundPlugin,\n doughnutLabelPlugin,\n ...this.plugins,\n ];\n\n // only add certain plugins for standard chart types\n if (!ignoredTypes.includes(this.type)) {\n plugins = [\n ...plugins,\n a11yPlugin,\n musicPlugin,\n annotationPlugin,\n datalabelsPlugin,\n ];\n }\n\n if (this.chart) {\n this.chart.destroy();\n }\n\n this.chart = new Chart(this.canvas, {\n type: this.type,\n data: {\n labels: this.labels,\n datasets: this.mergedDatasets,\n },\n options: this.mergedOptions,\n plugins: plugins,\n });\n }\n\n /**\n * Merges various chart type options and dataset options to create a\n * final set of options for a chart.\n */\n private async mergeOptions() {\n const radialTypes = ['pie', 'doughnut', 'radar', 'polarArea'];\n const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n\n // get chart types from datasets so we can import additional configs\n const additionalTypeImports: any = [];\n this.datasets.forEach((dataset) => {\n if (dataset.type) {\n additionalTypeImports.push(\n import(`../../common/config/chartTypes/${dataset.type}.js`)\n );\n }\n });\n\n // import main and additional chart type configs\n const chartTypeConfigs = await Promise.all([\n import(`../../common/config/chartTypes/${this.type}.js`),\n ...additionalTypeImports,\n ]);\n\n // start with global options\n let mergedOptions: any = globalOptions(this);\n\n // merge global type options\n if (radialTypes.includes(this.type)) {\n mergedOptions = deepmerge(mergedOptions, globalOptionsRadial(this));\n } else if (!ignoredTypes.includes(this.type)) {\n mergedOptions = deepmerge(mergedOptions, globalOptionsNonRadial(this));\n }\n\n const mergedDatasets: any = JSON.parse(JSON.stringify(this.datasets));\n\n chartTypeConfigs.forEach((chartTypeConfig: any) => {\n // merge all of the imported chart type options with the global options\n mergedOptions = deepmerge(mergedOptions, chartTypeConfig.options(this));\n\n // merge all of the imported chart type dataset options\n mergedDatasets.forEach((dataset: any, index: number) => {\n if (\n (!dataset.type && chartTypeConfig.type === this.type) ||\n dataset.type === chartTypeConfig.type\n ) {\n mergedDatasets[index] = deepmerge(\n dataset,\n chartTypeConfig.datasetOptions(this, index)\n );\n }\n });\n });\n\n if (this.options) {\n // merge any consumer supplied options with defaults\n mergedOptions = deepmerge(mergedOptions, this.options);\n }\n this.mergedOptions = mergedOptions;\n\n // merge default chart type dataset options with consumer supplied datasets\n mergedDatasets.forEach((dataset: object, index: number) => {\n const customDeepmerge = deepmergeCustom({\n mergeArrays: false,\n });\n mergedDatasets[index] = customDeepmerge(dataset, this.datasets[index]);\n });\n\n this.mergedDatasets = mergedDatasets;\n }\n\n private getTableAxisLabel() {\n let label = '';\n\n if (this.options?.indexAxis === 'y') {\n if (this.options?.scales?.y?.title?.text) {\n label = this.options?.scales.y.title.text;\n } else {\n label = 'Y Axis';\n }\n } else {\n if (this.options?.scales?.x?.title?.text) {\n label = this.options?.scales.x.title.text;\n } else {\n label = 'X Axis';\n }\n }\n\n return label;\n }\n\n private handleViewToggle() {\n this.tableView = !this.tableView;\n }\n\n private checkType() {\n // chart types that can't have a data table view\n const blacklist = ['choropleth', 'bubbleMap', 'treemap'];\n this.tableDisabled = blacklist.includes(this.type);\n }\n\n private handleDownloadImage(e: Event, jpeg: boolean) {\n e.preventDefault();\n\n const imgFormat = jpeg ? 'image/jpeg' : 'image/png';\n const fileExt = jpeg ? 'jpg' : 'png';\n const a = document.createElement('a');\n\n a.href = this.chart.toBase64Image(imgFormat, 1);\n a.download = this.chartTitle + '.' + fileExt;\n\n // trigger the download\n a.click();\n }\n\n private handleDownloadCsv(e: Event) {\n e.preventDefault();\n let csv = '';\n\n for (let i = 0; i < this.chart.data.datasets.length; i++) {\n csv += convertChartDataToCSV({\n data: this.chart.data.datasets[i],\n labels: this.labels,\n });\n }\n if (csv == null) return;\n\n const filename = this.chartTitle + '.csv';\n if (!csv.match(/^data:text\\/csv/i)) {\n csv = 'data:text/csv;charset=utf-8,' + csv;\n }\n\n // not sure if anything below this comment works\n const data = encodeURI(csv);\n const link = document.createElement('a');\n link.setAttribute('href', data);\n link.setAttribute('download', filename);\n document.body.appendChild(link); // Required for FF\n link.click();\n document.body.removeChild(link);\n }\n\n private handleFullscreen() {\n if (this.shadowRoot?.fullscreenElement) {\n document.exitFullscreen();\n } else {\n this.container.requestFullscreen();\n }\n }\n\n private handleFullscreenChange() {\n this.fullscreen = this.shadowRoot?.fullscreenElement !== null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kd-chart': KDChart;\n }\n}\n"],"names":["Chart","register","ChoroplethController","BubbleMapController","GeoFeature","ColorScale","SizeScale","ProjectionScale","TreemapController","TreemapElement","KDChart","LitElement","constructor","this","chartTitle","description","type","options","plugins","height","width","hideDescription","hideCaptions","hideHeader","hideControls","noBorder","customLabels","toggleView","toggleFullscreen","downloadMenu","downloadCsv","downloadPng","downloadJpg","fullscreen","chart","tableView","tableDisabled","mergedOptions","mergedDatasets","render","html","handleFullscreenChange","handleViewToggle","chartIcon","tableIcon","handleFullscreen","minimizeIcon","maximizeIcon","downloadIcon","e","handleDownloadCsv","handleDownloadImage","labels","length","getTableAxisLabel","datasets","map","dataset","label","data","_value","i","dataPoint","Array","isArray","Object","keys","key","connectedCallback","super","Parent","window","addEventListener","debounce","_resizeChart","disconnectedCallback","removeEventListener","resize","updated","changedProps","has","mergeOptions","then","forEach","index","find","newDataset","splice","OldDataset","oldDataset","push","update","hasData","initChart","checkType","defaults","color","getComputedStyle","document","documentElement","getPropertyValue","canvasBackgroundPlugin","doughnutLabelPlugin","includes","a11yPlugin","musicPlugin","annotationPlugin","datalabelsPlugin","destroy","canvas","additionalTypeImports","__variableDynamicImportRuntime0__","chartTypeConfigs","Promise","all","__variableDynamicImportRuntime1__","globalOptions","deepmerge","globalOptionsRadial","globalOptionsNonRadial","JSON","parse","stringify","chartTypeConfig","datasetOptions","customDeepmerge","deepmergeCustom","mergeArrays","_a","indexAxis","_e","_d","_c","_b","scales","y","title","text","_f","_k","_j","_h","_g","x","_l","jpeg","preventDefault","imgFormat","fileExt","a","createElement","href","toBase64Image","download","click","csv","convertChartDataToCSV","filename","match","encodeURI","link","setAttribute","body","appendChild","removeChild","shadowRoot","fullscreenElement","exitFullscreen","container","requestFullscreen","styles","ChartScss","__decorate","property","String","prototype","Number","Boolean","state","query","customElement"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-charts",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Shidoka Charts",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -15,15 +15,13 @@
|
|
|
15
15
|
"dev": "npm run storybook",
|
|
16
16
|
"storybook": "storybook dev -p 6006",
|
|
17
17
|
"build-storybook": "storybook build",
|
|
18
|
-
"deploy-storybook": "storybook-to-ghpages",
|
|
19
18
|
"build": "rollup -c",
|
|
20
19
|
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
|
21
20
|
"lint:eslint": "eslint . --ext .js,.ts",
|
|
22
21
|
"lint:lit-analyzer": "lit-analyzer",
|
|
23
22
|
"format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
|
|
24
23
|
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
|
|
25
|
-
"test": "
|
|
26
|
-
"test:coverage": "wtr --coverage",
|
|
24
|
+
"test": "test-storybook",
|
|
27
25
|
"prepare": "npx husky install"
|
|
28
26
|
},
|
|
29
27
|
"dependencies": {
|
|
@@ -55,7 +53,6 @@
|
|
|
55
53
|
"@commitlint/config-conventional": "^17.4.4",
|
|
56
54
|
"@custom-elements-manifest/analyzer": "^0.9.4",
|
|
57
55
|
"@kyndryl-design-system/shidoka-foundation": "^1.6.0",
|
|
58
|
-
"@open-wc/testing": "^3.1.7",
|
|
59
56
|
"@rollup/plugin-dynamic-import-vars": "^2.0.5",
|
|
60
57
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
61
58
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
@@ -64,12 +61,14 @@
|
|
|
64
61
|
"@storybook/addon-designs": "^7.0.9",
|
|
65
62
|
"@storybook/addon-docs": "8.0.4",
|
|
66
63
|
"@storybook/addon-essentials": "8.0.4",
|
|
64
|
+
"@storybook/addon-interactions": "^8.0.4",
|
|
67
65
|
"@storybook/addon-links": "8.0.4",
|
|
68
66
|
"@storybook/addon-storysource": "8.0.4",
|
|
69
67
|
"@storybook/addon-styling": "^1.3.7",
|
|
70
68
|
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
|
|
71
69
|
"@storybook/addons": "7.6.17",
|
|
72
|
-
"@storybook/
|
|
70
|
+
"@storybook/test": "^8.0.4",
|
|
71
|
+
"@storybook/test-runner": "^0.17.0",
|
|
73
72
|
"@storybook/theming": "8.0.4",
|
|
74
73
|
"@storybook/web-components": "8.0.4",
|
|
75
74
|
"@storybook/web-components-webpack5": "8.0.4",
|
|
@@ -78,19 +77,17 @@
|
|
|
78
77
|
"@types/sass": "^1.43.1",
|
|
79
78
|
"@typescript-eslint/eslint-plugin": "^5.48.1",
|
|
80
79
|
"@typescript-eslint/parser": "^5.48.1",
|
|
81
|
-
"
|
|
82
|
-
"@web/test-runner": "^0.15.0",
|
|
83
|
-
"@web/test-runner-playwright": "^0.9.0",
|
|
80
|
+
"axe-playwright": "^2.0.1",
|
|
84
81
|
"babel-loader": "^8.3.0",
|
|
82
|
+
"chromatic": "^11.2.0",
|
|
85
83
|
"clean-webpack-plugin": "^4.0.0",
|
|
86
84
|
"css-loader": "^6.7.3",
|
|
87
85
|
"eslint": "^8.31.0",
|
|
88
86
|
"eslint-plugin-storybook": "^0.8.0",
|
|
89
|
-
"extract-loader": "^5.1.0",
|
|
90
87
|
"husky": "^8.0.3",
|
|
91
88
|
"lint-staged": "^13.1.2",
|
|
92
|
-
"lit-analyzer": "^
|
|
93
|
-
"lit-
|
|
89
|
+
"lit-analyzer": "^2.0.3",
|
|
90
|
+
"lit-css-loader": "^3.0.0",
|
|
94
91
|
"postcss": "^8.4.21",
|
|
95
92
|
"prettier": "^2.8.2",
|
|
96
93
|
"react": "^18.2.0",
|
|
@@ -112,6 +109,7 @@
|
|
|
112
109
|
"rollup-plugin-typescript2": "^0.35.0",
|
|
113
110
|
"sass": "^1.57.1",
|
|
114
111
|
"sass-loader": "^13.2.0",
|
|
112
|
+
"shadow-dom-testing-library": "^1.11.2",
|
|
115
113
|
"storybook": "^8.0.4",
|
|
116
114
|
"storybook-addon-themes": "^6.1.0",
|
|
117
115
|
"storybook-preset-inline-svg": "^1.0.1",
|