@kyndryl-design-system/shidoka-charts 2.1.3 → 2.2.0

package/common/config/globalOptions.js

@@ -1,2 +1,2 @@
-import{getTokenThemeVal as o}from'./../../external/@kyndryl-design-system/shidoka-foundation/common/helpers/color.js';const t=t=>{const e=o("--kd-color-text-level-secondary"),r=o("--kd-color-background-ui-default-dark"),a=o("--kd-color-text-variant-inversed");return{resizeDelay:50,maintainAspectRatio:!(null!==t.height||null!==t.width),plugins:{canvasBackground:{color:"transparent"},legend:{position:"bottom",labels:{boxWidth:16,boxHeight:16,borderRadius:2,useBorderRadius:!0,padding:8}},tooltip:{bodyColor:a,footerColor:a,titleColor:a,backgroundColor:r,multiKeyBackground:"transparent",titleFont:{weight:"400"},footerFont:{weight:"400"},titleMarginBottom:8,bodySpacing:4,footerMarginTop:10,cornerRadius:2,boxWidth:16,boxHeight:16,boxPadding:4},datalabels:{display:!1,color:e},chartjs2music:{internal:{},cc:t.ccDiv}}}};export{t as default};
+import{getTokenThemeVal as o}from'./../../external/@kyndryl-design-system/shidoka-foundation/common/helpers/color.js';const t=t=>{const e=o("--kd-color-text-level-secondary"),r=o("--kd-color-background-ui-default-dark"),a=o("--kd-color-text-variant-inversed");return{resizeDelay:50,maintainAspectRatio:!(null!==t.height||null!==t.width),plugins:{canvasBackground:{color:"transparent"},legend:{display:!1,position:"bottom",labels:{boxWidth:16,boxHeight:16,borderRadius:2,useBorderRadius:!0,padding:8}},tooltip:{bodyColor:a,footerColor:a,titleColor:a,backgroundColor:r,multiKeyBackground:"transparent",titleFont:{weight:"400"},footerFont:{weight:"400"},titleMarginBottom:8,bodySpacing:4,footerMarginTop:10,cornerRadius:2,boxWidth:16,boxHeight:16,boxPadding:4},datalabels:{display:!1,color:e},chartjs2music:{internal:{},cc:t.ccDiv}}}};export{t as default};
 //# sourceMappingURL=globalOptions.js.map

package/common/config/globalOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"globalOptions.js","sources":["../../../src/common/config/globalOptions.js"],"sourcesContent":["import { getTokenThemeVal } from '@kyndryl-design-system/shidoka-foundation/common/helpers/color';\n\nconst defaultConfig = (ctx) => {\n  const SecondaryTextColor = getTokenThemeVal(\n    '--kd-color-text-level-secondary'\n  );\n  const TooltipBgColor = getTokenThemeVal(\n    '--kd-color-background-ui-default-dark'\n  );\n  const TooltipTextColor = getTokenThemeVal('--kd-color-text-variant-inversed');\n  const ExplicitSize = ctx.height !== null || ctx.width !== null;\n\n  return {\n    resizeDelay: 50, //debounce the resize\n    maintainAspectRatio: !ExplicitSize,\n    plugins: {\n      canvasBackground: {\n        color: 'transparent',\n      },\n      legend: {\n        position: 'bottom',\n        labels: {\n          boxWidth: 16,\n          boxHeight: 16,\n          borderRadius: 2,\n          useBorderRadius: true,\n          padding: 8,\n        },\n        // onHover: handleLegendHover, // doesn't work with transparent or gradient bgs\n        // onLeave: handleLegendLeave,\n      },\n      tooltip: {\n        bodyColor: TooltipTextColor,\n        footerColor: TooltipTextColor,\n        titleColor: TooltipTextColor,\n        backgroundColor: TooltipBgColor,\n        multiKeyBackground: 'transparent',\n        titleFont: {\n          weight: '400',\n        },\n        footerFont: {\n          weight: '400',\n        },\n        titleMarginBottom: 8,\n        bodySpacing: 4,\n        footerMarginTop: 10,\n        cornerRadius: 2,\n        boxWidth: 16,\n        boxHeight: 16,\n        boxPadding: 4,\n      },\n      datalabels: {\n        display: false,\n        color: SecondaryTextColor,\n      },\n      chartjs2music: {\n        internal: {},\n        cc: ctx.ccDiv,\n      },\n    },\n  };\n};\n\nexport default defaultConfig;\n\n/**\n * The function `handleLegendHover` updates the background and border colors of a chart legend item\n * when it is hovered over.\n * @param e - The `e` parameter is an event object that represents the event that triggered the\n * function. It can be used to access information about the event, such as the target element or the\n * event type.\n * @param item - The `item` parameter represents the legend item that was hovered over. It contains\n * information about the dataset index and the index of the hovered item within that dataset.\n * @param legend - The `legend` parameter is the legend object of a chart. It contains information\n * about the chart's legend, such as the labels and colors of the legend items.\n */\nconst handleLegendHover = (e, item, legend) => {\n  const DatasetIndex = item.datasetIndex || 0;\n  const Datasets = legend.chart.data.datasets;\n  const Dataset = Datasets[DatasetIndex];\n  const AlphaHexLength = 9; // includes #\n  const Alpha = '4D'; // 30% opacity\n\n  if (Array.isArray(Dataset.backgroundColor)) {\n    Dataset.backgroundColor.forEach((color, index, colors) => {\n      colors[index] =\n        index === item.index || color.length === AlphaHexLength\n          ? color\n          : color + Alpha;\n    });\n  } else {\n    Datasets.forEach((dataset, index) => {\n      const backgroundColor = dataset.backgroundColor;\n      const borderColor = dataset.borderColor;\n\n      if (backgroundColor) {\n        dataset.backgroundColor =\n          index === DatasetIndex || backgroundColor.length === AlphaHexLength\n            ? backgroundColor\n            : backgroundColor + Alpha;\n      }\n\n      if (borderColor) {\n        dataset.borderColor =\n          index === DatasetIndex || borderColor.length === AlphaHexLength\n            ? borderColor\n            : borderColor + Alpha;\n      }\n    });\n  }\n\n  legend.chart.update();\n};\n\n/**\n * The function `handleLegendLeave` updates the background and border colors of a chart legend when the\n * mouse leaves the legend item.\n * @param e - The event object that triggered the legend leave event.\n * @param item - The `item` parameter represents the legend item that was interacted with. It contains\n * information about the dataset index and other properties related to the legend item.\n * @param legend - The `legend` parameter is the legend object of a chart. It contains information\n * about the chart's legend, such as the labels and colors of the legend items.\n */\nconst handleLegendLeave = (e, item, legend) => {\n  const DatasetIndex = item.datasetIndex || 0;\n  const Datasets = legend.chart.data.datasets;\n  const Dataset = Datasets[DatasetIndex];\n  const AlphaHexLength = 9;\n\n  if (Array.isArray(Dataset.backgroundColor)) {\n    Dataset.backgroundColor.forEach((color, index, colors) => {\n      colors[index] =\n        color.length === AlphaHexLength ? color.slice(0, -2) : color;\n    });\n  } else {\n    Datasets.forEach((dataset) => {\n      const backgroundColor = dataset.backgroundColor;\n      const borderColor = dataset.borderColor;\n\n      if (backgroundColor) {\n        dataset.backgroundColor =\n          backgroundColor.length === AlphaHexLength\n            ? backgroundColor.slice(0, -2)\n            : backgroundColor;\n      }\n\n      if (borderColor) {\n        dataset.borderColor =\n          borderColor.length === AlphaHexLength\n            ? borderColor.slice(0, -2)\n            : borderColor;\n      }\n    });\n  }\n\n  legend.chart.update();\n};\n"],"names":["defaultConfig","ctx","SecondaryTextColor","getTokenThemeVal","TooltipBgColor","TooltipTextColor","resizeDelay","maintainAspectRatio","height","width","plugins","canvasBackground","color","legend","position","labels","boxWidth","boxHeight","borderRadius","useBorderRadius","padding","tooltip","bodyColor","footerColor","titleColor","backgroundColor","multiKeyBackground","titleFont","weight","footerFont","titleMarginBottom","bodySpacing","footerMarginTop","cornerRadius","boxPadding","datalabels","display","chartjs2music","internal","cc","ccDiv"],"mappings":"wHAEK,MAACA,EAAiBC,IACrB,MAAMC,EAAqBC,EACzB,mCAEIC,EAAiBD,EACrB,yCAEIE,EAAmBF,EAAiB,oCAG1C,MAAO,CACLG,YAAa,GACbC,sBAJkC,OAAfN,EAAIO,QAAiC,OAAdP,EAAIQ,OAK9CC,QAAS,CACPC,iBAAkB,CAChBC,MAAO,eAETC,OAAQ,CACNC,SAAU,SACVC,OAAQ,CACNC,SAAU,GACVC,UAAW,GACXC,aAAc,EACdC,iBAAiB,EACjBC,QAAS,IAKbC,QAAS,CACPC,UAAWjB,EACXkB,YAAalB,EACbmB,WAAYnB,EACZoB,gBAAiBrB,EACjBsB,mBAAoB,cACpBC,UAAW,CACTC,OAAQ,OAEVC,WAAY,CACVD,OAAQ,OAEVE,kBAAmB,EACnBC,YAAa,EACbC,gBAAiB,GACjBC,aAAc,EACdjB,SAAU,GACVC,UAAW,GACXiB,WAAY,GAEdC,WAAY,CACVC,SAAS,EACTxB,MAAOV,GAETmC,cAAe,CACbC,SAAU,CAAE,EACZC,GAAItC,EAAIuC,QAGb"}
+{"version":3,"file":"globalOptions.js","sources":["../../../src/common/config/globalOptions.js"],"sourcesContent":["import { getTokenThemeVal } from '@kyndryl-design-system/shidoka-foundation/common/helpers/color';\n\nconst defaultConfig = (ctx) => {\n  const SecondaryTextColor = getTokenThemeVal(\n    '--kd-color-text-level-secondary'\n  );\n  const TooltipBgColor = getTokenThemeVal(\n    '--kd-color-background-ui-default-dark'\n  );\n  const TooltipTextColor = getTokenThemeVal('--kd-color-text-variant-inversed');\n  const ExplicitSize = ctx.height !== null || ctx.width !== null;\n\n  return {\n    resizeDelay: 50, //debounce the resize\n    maintainAspectRatio: !ExplicitSize,\n    plugins: {\n      canvasBackground: {\n        color: 'transparent',\n      },\n      legend: {\n        display: false,\n        position: 'bottom',\n        labels: {\n          boxWidth: 16,\n          boxHeight: 16,\n          borderRadius: 2,\n          useBorderRadius: true,\n          padding: 8,\n        },\n      },\n      tooltip: {\n        bodyColor: TooltipTextColor,\n        footerColor: TooltipTextColor,\n        titleColor: TooltipTextColor,\n        backgroundColor: TooltipBgColor,\n        multiKeyBackground: 'transparent',\n        titleFont: {\n          weight: '400',\n        },\n        footerFont: {\n          weight: '400',\n        },\n        titleMarginBottom: 8,\n        bodySpacing: 4,\n        footerMarginTop: 10,\n        cornerRadius: 2,\n        boxWidth: 16,\n        boxHeight: 16,\n        boxPadding: 4,\n      },\n      datalabels: {\n        display: false,\n        color: SecondaryTextColor,\n      },\n      chartjs2music: {\n        internal: {},\n        cc: ctx.ccDiv,\n      },\n    },\n  };\n};\n\nexport default defaultConfig;\n\n/**\n * The function `handleLegendHover` updates the background and border colors of a chart legend item\n * when it is hovered over.\n * @param e - The `e` parameter is an event object that represents the event that triggered the\n * function. It can be used to access information about the event, such as the target element or the\n * event type.\n * @param item - The `item` parameter represents the legend item that was hovered over. It contains\n * information about the dataset index and the index of the hovered item within that dataset.\n * @param legend - The `legend` parameter is the legend object of a chart. It contains information\n * about the chart's legend, such as the labels and colors of the legend items.\n */\nconst handleLegendHover = (e, item, legend) => {\n  const DatasetIndex = item.datasetIndex || 0;\n  const Datasets = legend.chart.data.datasets;\n  const Dataset = Datasets[DatasetIndex];\n  const AlphaHexLength = 9; // includes #\n  const Alpha = '4D'; // 30% opacity\n\n  if (Array.isArray(Dataset.backgroundColor)) {\n    Dataset.backgroundColor.forEach((color, index, colors) => {\n      colors[index] =\n        index === item.index || color.length === AlphaHexLength\n          ? color\n          : color + Alpha;\n    });\n  } else {\n    Datasets.forEach((dataset, index) => {\n      const backgroundColor = dataset.backgroundColor;\n      const borderColor = dataset.borderColor;\n\n      if (backgroundColor) {\n        dataset.backgroundColor =\n          index === DatasetIndex || backgroundColor.length === AlphaHexLength\n            ? backgroundColor\n            : backgroundColor + Alpha;\n      }\n\n      if (borderColor) {\n        dataset.borderColor =\n          index === DatasetIndex || borderColor.length === AlphaHexLength\n            ? borderColor\n            : borderColor + Alpha;\n      }\n    });\n  }\n\n  legend.chart.update();\n};\n\n/**\n * The function `handleLegendLeave` updates the background and border colors of a chart legend when the\n * mouse leaves the legend item.\n * @param e - The event object that triggered the legend leave event.\n * @param item - The `item` parameter represents the legend item that was interacted with. It contains\n * information about the dataset index and other properties related to the legend item.\n * @param legend - The `legend` parameter is the legend object of a chart. It contains information\n * about the chart's legend, such as the labels and colors of the legend items.\n */\nconst handleLegendLeave = (e, item, legend) => {\n  const DatasetIndex = item.datasetIndex || 0;\n  const Datasets = legend.chart.data.datasets;\n  const Dataset = Datasets[DatasetIndex];\n  const AlphaHexLength = 9;\n\n  if (Array.isArray(Dataset.backgroundColor)) {\n    Dataset.backgroundColor.forEach((color, index, colors) => {\n      colors[index] =\n        color.length === AlphaHexLength ? color.slice(0, -2) : color;\n    });\n  } else {\n    Datasets.forEach((dataset) => {\n      const backgroundColor = dataset.backgroundColor;\n      const borderColor = dataset.borderColor;\n\n      if (backgroundColor) {\n        dataset.backgroundColor =\n          backgroundColor.length === AlphaHexLength\n            ? backgroundColor.slice(0, -2)\n            : backgroundColor;\n      }\n\n      if (borderColor) {\n        dataset.borderColor =\n          borderColor.length === AlphaHexLength\n            ? borderColor.slice(0, -2)\n            : borderColor;\n      }\n    });\n  }\n\n  legend.chart.update();\n};\n"],"names":["defaultConfig","ctx","SecondaryTextColor","getTokenThemeVal","TooltipBgColor","TooltipTextColor","resizeDelay","maintainAspectRatio","height","width","plugins","canvasBackground","color","legend","display","position","labels","boxWidth","boxHeight","borderRadius","useBorderRadius","padding","tooltip","bodyColor","footerColor","titleColor","backgroundColor","multiKeyBackground","titleFont","weight","footerFont","titleMarginBottom","bodySpacing","footerMarginTop","cornerRadius","boxPadding","datalabels","chartjs2music","internal","cc","ccDiv"],"mappings":"wHAEK,MAACA,EAAiBC,IACrB,MAAMC,EAAqBC,EACzB,mCAEIC,EAAiBD,EACrB,yCAEIE,EAAmBF,EAAiB,oCAG1C,MAAO,CACLG,YAAa,GACbC,sBAJkC,OAAfN,EAAIO,QAAiC,OAAdP,EAAIQ,OAK9CC,QAAS,CACPC,iBAAkB,CAChBC,MAAO,eAETC,OAAQ,CACNC,SAAS,EACTC,SAAU,SACVC,OAAQ,CACNC,SAAU,GACVC,UAAW,GACXC,aAAc,EACdC,iBAAiB,EACjBC,QAAS,IAGbC,QAAS,CACPC,UAAWlB,EACXmB,YAAanB,EACboB,WAAYpB,EACZqB,gBAAiBtB,EACjBuB,mBAAoB,cACpBC,UAAW,CACTC,OAAQ,OAEVC,WAAY,CACVD,OAAQ,OAEVE,kBAAmB,EACnBC,YAAa,EACbC,gBAAiB,GACjBC,aAAc,EACdjB,SAAU,GACVC,UAAW,GACXiB,WAAY,GAEdC,WAAY,CACVtB,SAAS,EACTF,MAAOV,GAETmC,cAAe,CACbC,SAAU,CAAE,EACZC,GAAItC,EAAIuC,QAGb"}

package/common/legend/getLegendData.js

@@ -0,0 +1,2 @@
+function e(e){if(!e)return[];const t=[];if(!["bar","line","pie","doughnut","polarArea","radar","scatter","bubble"].includes(e.config.type))return[];if("doughnut"===e.config.type){if(e.data.datasets.some((e=>"needleValue"in e)))return[]}if(function(e){return!!(["pie","doughnut","polarArea"].includes(e.config.type)&&e.data.labels&&e.data.labels.length)||!(!e.data.labels||!e.data.labels.length||e.data.datasets.some((e=>e.label)))}(e)){const a=e.data.datasets[0];e.data.labels.forEach(((r,i)=>{let l;if(a){const e=a.backgroundColor;l=Array.isArray(e)?e[i%e.length]:"function"==typeof e?"#ccc":e}else l="#ccc";t.push({label:r,color:l,dataIndex:i,isHidden:!1===e.getDataVisibility(i),toggleVisibility:()=>{e.toggleDataVisibility(i),e.update()}})}))}else e.data.datasets.forEach((a=>{if(!a.label)return;const r=e.data.datasets.indexOf(a),i=e.getDatasetMeta(r);let l;if("line"!==e.config.type&&"line"!==a.type||!a.borderColor){const e=a.backgroundColor||a.borderColor||"#ccc";l=Array.isArray(e)?e[0]:"function"==typeof e?"#ccc":e}else{const e=a.borderColor;l=Array.isArray(e)?e[0]:"function"==typeof e?"#ccc":e}let n=l;if("line"===a.type||["bubble","line","radar","scatter"].indexOf(e.config.type)>-1)if(l.startsWith("#")){n=`rgba(${parseInt(l.slice(1,3),16)}, ${parseInt(l.slice(3,5),16)}, ${parseInt(l.slice(5,7),16)}, 0.4)`}else l.startsWith("rgb(")?n=l.replace("rgb(","rgba(").replace(")",", 0.4)"):l.startsWith("rgba(")&&(n=l.replace(/[\d.]+\)$/,"0.4)"));const s=a.type||e.config.type,o="bubble"===s||"scatter"===s||"line"===s||"radar"===s;t.push({label:a.label,color:l,colorWithAlpha:n,datasetIndex:r,isHidden:i.hidden,needsBorder:o,chartType:s,toggleVisibility:()=>{i.hidden=!i.hidden,e.update()}})}));return t}export{e as getLegendData};
+//# sourceMappingURL=getLegendData.js.map

package/common/legend/getLegendData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getLegendData.js","sources":["../../../src/common/legend/getLegendData.js"],"sourcesContent":["/**\n * Generates legend data from a Chart.js chart instance without any DOM manipulation.\n * This function extracts the necessary data to build a custom legend.\n *\n * @param {Chart} chart - The Chart.js chart instance\n * @returns {Array} An array of legend items with properties for rendering\n */\nexport function getLegendData(chart) {\n  if (!chart) return [];\n\n  const legendItems = [];\n  const showLegendChartTypes = [\n    'bar',\n    'line',\n    'pie',\n    'doughnut',\n    'polarArea',\n    'radar',\n    'scatter',\n    'bubble',\n  ];\n\n  if (!showLegendChartTypes.includes(chart.config.type)) {\n    return [];\n  }\n\n  if (chart.config.type === 'doughnut') {\n    const hasMeterProperties = chart.data.datasets.some(\n      (dataset) => 'needleValue' in dataset\n    );\n    if (hasMeterProperties) {\n      return [];\n    }\n  }\n\n  function shouldUseLabelBasedLegend(chart) {\n    const labelBasedChartTypes = ['pie', 'doughnut', 'polarArea'];\n\n    if (\n      labelBasedChartTypes.includes(chart.config.type) &&\n      chart.data.labels &&\n      chart.data.labels.length\n    ) {\n      return true;\n    }\n\n    if (\n      chart.data.labels &&\n      chart.data.labels.length &&\n      !chart.data.datasets.some((ds) => ds.label)\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  if (shouldUseLabelBasedLegend(chart)) {\n    const dataset = chart.data.datasets[0];\n\n    chart.data.labels.forEach((label, index) => {\n      let color;\n      if (dataset) {\n        const bgColor = dataset.backgroundColor;\n\n        if (Array.isArray(bgColor)) {\n          color = bgColor[index % bgColor.length];\n        } else if (typeof bgColor === 'function') {\n          color = '#ccc';\n        } else {\n          color = bgColor;\n        }\n      } else {\n        color = '#ccc';\n      }\n\n      legendItems.push({\n        label,\n        color,\n        dataIndex: index,\n        isHidden: chart.getDataVisibility(index) === false,\n        // Function to toggle visibility\n        toggleVisibility: () => {\n          chart.toggleDataVisibility(index);\n          chart.update();\n        },\n      });\n    });\n  } else {\n    chart.data.datasets.forEach((dataset) => {\n      if (!dataset.label) return;\n\n      const index = chart.data.datasets.indexOf(dataset);\n      const meta = chart.getDatasetMeta(index);\n\n      let color;\n      if (\n        (chart.config.type === 'line' || dataset.type === 'line') &&\n        dataset.borderColor\n      ) {\n        const borderColor = dataset.borderColor;\n        color = Array.isArray(borderColor)\n          ? borderColor[0]\n          : typeof borderColor === 'function'\n          ? '#ccc'\n          : borderColor;\n      } else {\n        const bgColor =\n          dataset.backgroundColor || dataset.borderColor || '#ccc';\n        color = Array.isArray(bgColor)\n          ? bgColor[0]\n          : typeof bgColor === 'function'\n          ? '#ccc'\n          : bgColor;\n      }\n\n      let rgba = color;\n\n      if (\n        dataset.type === 'line' ||\n        ['bubble', 'line', 'radar', 'scatter'].indexOf(chart.config.type) > -1\n      ) {\n        if (color.startsWith('#')) {\n          const r = parseInt(color.slice(1, 3), 16);\n          const g = parseInt(color.slice(3, 5), 16);\n          const b = parseInt(color.slice(5, 7), 16);\n          rgba = `rgba(${r}, ${g}, ${b}, 0.4)`;\n        } else if (color.startsWith('rgb(')) {\n          rgba = color.replace('rgb(', 'rgba(').replace(')', ', 0.4)');\n        } else if (color.startsWith('rgba(')) {\n          rgba = color.replace(/[\\d.]+\\)$/, '0.4)');\n        }\n      }\n\n      const chartType = dataset.type || chart.config.type;\n      const needsBorder =\n        chartType === 'bubble' ||\n        chartType === 'scatter' ||\n        chartType === 'line' ||\n        chartType === 'radar';\n\n      legendItems.push({\n        label: dataset.label,\n        color,\n        colorWithAlpha: rgba,\n        datasetIndex: index,\n        isHidden: meta.hidden,\n        needsBorder,\n        chartType,\n        toggleVisibility: () => {\n          meta.hidden = !meta.hidden;\n          chart.update();\n        },\n      });\n    });\n  }\n\n  return legendItems;\n}\n"],"names":["getLegendData","chart","legendItems","includes","config","type","data","datasets","some","dataset","labels","length","ds","label","shouldUseLabelBasedLegend","forEach","index","color","bgColor","backgroundColor","Array","isArray","push","dataIndex","isHidden","getDataVisibility","toggleVisibility","toggleDataVisibility","update","indexOf","meta","getDatasetMeta","borderColor","rgba","startsWith","parseInt","slice","replace","chartType","needsBorder","colorWithAlpha","datasetIndex","hidden"],"mappings":"AAOO,SAASA,EAAcC,GAC5B,IAAKA,EAAO,MAAO,GAEnB,MAAMC,EAAc,GAYpB,IAX6B,CAC3B,MACA,OACA,MACA,WACA,YACA,QACA,UACA,UAGwBC,SAASF,EAAMG,OAAOC,MAC9C,MAAO,GAGT,GAA0B,aAAtBJ,EAAMG,OAAOC,KAAqB,CAIpC,GAH2BJ,EAAMK,KAAKC,SAASC,MAC5CC,GAAY,gBAAiBA,IAG9B,MAAO,EAEV,CAwBD,GAtBA,SAAmCR,GAGjC,SAF6B,CAAC,MAAO,WAAY,aAG1BE,SAASF,EAAMG,OAAOC,OAC3CJ,EAAMK,KAAKI,QACXT,EAAMK,KAAKI,OAAOC,YAMlBV,EAAMK,KAAKI,SACXT,EAAMK,KAAKI,OAAOC,QACjBV,EAAMK,KAAKC,SAASC,MAAMI,GAAOA,EAAGC,QAMxC,CAEGC,CAA0Bb,GAAQ,CACpC,MAAMQ,EAAUR,EAAMK,KAAKC,SAAS,GAEpCN,EAAMK,KAAKI,OAAOK,SAAQ,CAACF,EAAOG,KAChC,IAAIC,EACJ,GAAIR,EAAS,CACX,MAAMS,EAAUT,EAAQU,gBAGtBF,EADEG,MAAMC,QAAQH,GACRA,EAAQF,EAAQE,EAAQP,QACJ,mBAAZO,EACR,OAEAA,CAElB,MACQD,EAAQ,OAGVf,EAAYoB,KAAK,CACfT,QACAI,QACAM,UAAWP,EACXQ,UAA6C,IAAnCvB,EAAMwB,kBAAkBT,GAElCU,iBAAkB,KAChBzB,EAAM0B,qBAAqBX,GAC3Bf,EAAM2B,QAAQ,GAEhB,GAER,MACI3B,EAAMK,KAAKC,SAASQ,SAASN,IAC3B,IAAKA,EAAQI,MAAO,OAEpB,MAAMG,EAAQf,EAAMK,KAAKC,SAASsB,QAAQpB,GACpCqB,EAAO7B,EAAM8B,eAAef,GAElC,IAAIC,EACJ,GACyB,SAAtBhB,EAAMG,OAAOC,MAAoC,SAAjBI,EAAQJ,OACzCI,EAAQuB,YAQH,CACL,MAAMd,EACJT,EAAQU,iBAAmBV,EAAQuB,aAAe,OACpDf,EAAQG,MAAMC,QAAQH,GAClBA,EAAQ,GACW,mBAAZA,EACP,OACAA,CACL,KAfC,CACA,MAAMc,EAAcvB,EAAQuB,YAC5Bf,EAAQG,MAAMC,QAAQW,GAClBA,EAAY,GACW,mBAAhBA,EACP,OACAA,CACZ,CAUM,IAAIC,EAAOhB,EAEX,GACmB,SAAjBR,EAAQJ,MACR,CAAC,SAAU,OAAQ,QAAS,WAAWwB,QAAQ5B,EAAMG,OAAOC,OAAS,EAErE,GAAIY,EAAMiB,WAAW,KAAM,CAIzBD,EAAO,QAHGE,SAASlB,EAAMmB,MAAM,EAAG,GAAI,QAC5BD,SAASlB,EAAMmB,MAAM,EAAG,GAAI,QAC5BD,SAASlB,EAAMmB,MAAM,EAAG,GAAI,WAEvC,MAAUnB,EAAMiB,WAAW,QAC1BD,EAAOhB,EAAMoB,QAAQ,OAAQ,SAASA,QAAQ,IAAK,UAC1CpB,EAAMiB,WAAW,WAC1BD,EAAOhB,EAAMoB,QAAQ,YAAa,SAItC,MAAMC,EAAY7B,EAAQJ,MAAQJ,EAAMG,OAAOC,KACzCkC,EACU,WAAdD,GACc,YAAdA,GACc,SAAdA,GACc,UAAdA,EAEFpC,EAAYoB,KAAK,CACfT,MAAOJ,EAAQI,MACfI,QACAuB,eAAgBP,EAChBQ,aAAczB,EACdQ,SAAUM,EAAKY,OACfH,cACAD,YACAZ,iBAAkB,KAChBI,EAAKY,QAAUZ,EAAKY,OACpBzC,EAAM2B,QAAQ,GAEhB,IAIN,OAAO1B,CACT"}

package/common/legend/htmlRenderer.js

@@ -0,0 +1,2 @@
+import{getLegendData as e}from"./getLegendData.js";const t={className:"shidoka-legend",itemClassName:"shidoka-legend-item",boxWidth:14,boxHeight:14,borderRadius:2,maxHeight:100,layout:"horizontal",fontSize:"12px",boxMargin:8,onItemClick:null,adjustChartHeight:!0,reservedLegendHeight:40};function i(e,t){Object.assign(e.style,t)}function n(n,a,o){if(!n||!a)return a;a.innerHTML="";const l=e(n);if(!l.length)return a;const r={...t,...o},s=document.createElement("div");s.className=`${r.className}-container`,i(s,{width:"100%",paddingLeft:"20px",paddingRight:"20px",marginRight:"auto",marginLeft:"auto",boxSizing:"border-box"});const d=document.createElement("div");d.className=r.className,i(d,{width:"100%",maxHeight:`${r.maxHeight}px`,overflowY:"auto",boxSizing:"border-box"}),d.tabIndex=0,d.setAttribute("role","region"),d.setAttribute("aria-label","Chart legend items"),d.addEventListener("keydown",(e=>{"ArrowDown"===e.key?(d.scrollTop+=40,e.preventDefault()):"ArrowUp"===e.key?(d.scrollTop-=40,e.preventDefault()):"PageDown"===e.key?(d.scrollTop+=d.clientHeight,e.preventDefault()):"PageUp"===e.key?(d.scrollTop-=d.clientHeight,e.preventDefault()):"Home"===e.key?(d.scrollTop=0,e.preventDefault()):"End"===e.key&&(d.scrollTop=d.scrollHeight,e.preventDefault())}));const c=document.createElement("ul");c.className=`${r.className}-items`,i(c,{display:"flex",flexWrap:"wrap",justifyContent:"center",listStyle:"none",margin:"0",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"0",flexDirection:"vertical"===r.layout?"column":"row",gap:"12px",width:"100%"});const g=[];if(l.forEach((e=>{const t=document.createElement("li");t.className=r.itemClassName,t.setAttribute("data-legend-item",e.label),i(t,{display:"flex",alignItems:"center",cursor:"pointer",fontFamily:"var(--kd-font-family-body, inherit)",fontSize:r.fontSize,marginRight:"12px",height:"100%",userSelect:"none",opacity:e.isHidden?"0.5":"1",textDecoration:e.isHidden?"line-through":"none"});const o=document.createElement("button");o.className=`${r.itemClassName}-button`,o.setAttribute("data-color-name",e.label),i(o,{background:"none",border:"none",padding:"0",margin:"0",cursor:"pointer",display:"flex",alignItems:"center",width:"100%",height:"100%",fontFamily:"inherit",fontSize:"inherit",color:"inherit",textAlign:"left"}),o.setAttribute("aria-pressed",(!e.isHidden).toString()),o.setAttribute("aria-label",`${e.label}${e.isHidden?" (hidden)":""}`),o.addEventListener("focus",(()=>{o.style.outline="2px solid var(--kd-color-border-variants-focus)",o.style.outlineOffset="2px"})),o.addEventListener("blur",(()=>{o.style.outline="",o.style.outlineOffset=""})),t.setAttribute("role","listitem"),o.addEventListener("mouseover",(()=>{t.style.opacity="0.8"})),o.addEventListener("mouseout",(()=>{t.style.opacity=e.isHidden?"0.5":"1"}));const l=document.createElement("span");l.className=`${r.itemClassName}-color`,i(l,{width:`${r.boxWidth}px`,height:`${r.boxHeight}px`,borderRadius:`${r.borderRadius}px`,display:"inline-block",marginRight:`${r.boxMargin}px`,boxSizing:"border-box",backgroundColor:e.needsBorder?e.colorWithAlpha:e.color,border:e.needsBorder?`1.5px solid ${e.color}`:""});const s=document.createElement("span");s.className=`${r.itemClassName}-label`,s.textContent=e.label;o.addEventListener("click",(()=>{e.toggleVisibility();const i="dataIndex"in e?!1===n.getDataVisibility(e.dataIndex):n.getDatasetMeta(e.datasetIndex).hidden;t.style.opacity=i?"0.5":"1",t.style.textDecoration=i?"line-through":"none",o.setAttribute("aria-pressed",(!i).toString()),o.setAttribute("aria-label",`${e.label}${i?" (hidden)":""}`);const l={item:e,chart:n,isHidden:i,label:e.label,dataIndex:"dataIndex"in e?e.dataIndex:void 0,datasetIndex:"datasetIndex"in e?e.datasetIndex:void 0,element:t};"function"==typeof r.onItemClick&&r.onItemClick(l),a.dispatchEvent(new CustomEvent("legend-item-click",{detail:l,bubbles:!0,composed:!0}))})),o.appendChild(l),o.appendChild(s),t.appendChild(o),c.appendChild(t),g.push(o)})),g.length>0&&g.forEach(((e,t)=>{e.addEventListener("keydown",(e=>{if("ArrowRight"===e.key||"ArrowDown"===e.key){const i=(t+1)%g.length;g[i].focus(),e.preventDefault()}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const i=(t-1+g.length)%g.length;g[i].focus(),e.preventDefault()}}))})),d.appendChild(c),s.appendChild(d),a.appendChild(s),d.style.overflowY=d.scrollHeight>d.clientHeight?"scroll":"hidden",r.adjustChartHeight&&n.canvas){const e=Math.min(d.scrollHeight,r.maxHeight||d.scrollHeight);if(e+r.reservedLegendHeight>r.reservedLegendHeight){const t=n.canvas.parentElement;if(t){t.dataset.originalHeight||(t.dataset.originalHeight=t.style.height||"auto");const i=t.dataset.originalHeight,a="auto"!==i?`calc(${i} - ${e}px)`:`calc(100% - ${e}px)`;t.style.height=a,n.resize()}}}return a}export{n as renderHTMLLegend};
+//# sourceMappingURL=htmlRenderer.js.map

package/common/legend/htmlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlRenderer.js","sources":["../../../src/common/legend/htmlRenderer.js"],"sourcesContent":["import { getLegendData } from './getLegendData';\n\nconst defaultOpts = {\n  className: 'shidoka-legend',\n  itemClassName: 'shidoka-legend-item',\n  boxWidth: 14,\n  boxHeight: 14,\n  borderRadius: 2,\n  maxHeight: 100,\n  layout: 'horizontal',\n  fontSize: '12px',\n  boxMargin: 8,\n  onItemClick: null,\n  adjustChartHeight: true,\n  reservedLegendHeight: 40,\n};\n\nfunction applyStyles(el, styles) {\n  Object.assign(el.style, styles);\n}\n\nexport function renderHTMLLegend(chart, container, options) {\n  if (!chart || !container) return container;\n\n  container.innerHTML = '';\n  const items = getLegendData(chart);\n  if (!items.length) return container;\n\n  const opts = { ...defaultOpts, ...options };\n\n  const legendOuterContainer = document.createElement('div');\n  legendOuterContainer.className = `${opts.className}-container`;\n  applyStyles(legendOuterContainer, {\n    width: '100%',\n    paddingLeft: '20px',\n    paddingRight: '20px',\n    marginRight: 'auto',\n    marginLeft: 'auto',\n    boxSizing: 'border-box',\n  });\n\n  const scrollableContainer = document.createElement('div');\n  scrollableContainer.className = opts.className;\n  applyStyles(scrollableContainer, {\n    width: '100%',\n    maxHeight: `${opts.maxHeight}px`,\n    overflowY: 'auto',\n    boxSizing: 'border-box',\n  });\n\n  scrollableContainer.tabIndex = 0;\n  scrollableContainer.setAttribute('role', 'region');\n  scrollableContainer.setAttribute('aria-label', 'Chart legend items');\n  scrollableContainer.addEventListener('keydown', (e) => {\n    if (e.key === 'ArrowDown') {\n      scrollableContainer.scrollTop += 40;\n      e.preventDefault();\n    } else if (e.key === 'ArrowUp') {\n      scrollableContainer.scrollTop -= 40;\n      e.preventDefault();\n    } else if (e.key === 'PageDown') {\n      scrollableContainer.scrollTop += scrollableContainer.clientHeight;\n      e.preventDefault();\n    } else if (e.key === 'PageUp') {\n      scrollableContainer.scrollTop -= scrollableContainer.clientHeight;\n      e.preventDefault();\n    } else if (e.key === 'Home') {\n      scrollableContainer.scrollTop = 0;\n      e.preventDefault();\n    } else if (e.key === 'End') {\n      scrollableContainer.scrollTop = scrollableContainer.scrollHeight;\n      e.preventDefault();\n    }\n  });\n\n  const ul = document.createElement('ul');\n  ul.className = `${opts.className}-items`;\n  applyStyles(ul, {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    listStyle: 'none',\n    margin: '0',\n    paddingTop: '8px',\n    paddingBottom: '8px',\n    paddingLeft: '0',\n    flexDirection: opts.layout === 'vertical' ? 'column' : 'row',\n    gap: '12px',\n    width: '100%',\n  });\n\n  const legendItems = [];\n\n  items.forEach((item) => {\n    const li = document.createElement('li');\n    li.className = opts.itemClassName;\n    li.setAttribute('data-legend-item', item.label);\n    applyStyles(li, {\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      fontFamily: 'var(--kd-font-family-body, inherit)',\n      fontSize: opts.fontSize,\n      marginRight: '12px',\n      height: '100%',\n      userSelect: 'none',\n      opacity: item.isHidden ? '0.5' : '1',\n      textDecoration: item.isHidden ? 'line-through' : 'none',\n    });\n\n    const buttonWrapper = document.createElement('button');\n    buttonWrapper.className = `${opts.itemClassName}-button`;\n    buttonWrapper.setAttribute('data-color-name', item.label);\n    applyStyles(buttonWrapper, {\n      background: 'none',\n      border: 'none',\n      padding: '0',\n      margin: '0',\n      cursor: 'pointer',\n      display: 'flex',\n      alignItems: 'center',\n      width: '100%',\n      height: '100%',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      color: 'inherit',\n      textAlign: 'left',\n    });\n\n    buttonWrapper.setAttribute('aria-pressed', (!item.isHidden).toString());\n    buttonWrapper.setAttribute(\n      'aria-label',\n      `${item.label}${item.isHidden ? ' (hidden)' : ''}`\n    );\n\n    buttonWrapper.addEventListener('focus', () => {\n      buttonWrapper.style.outline =\n        '2px solid var(--kd-color-border-variants-focus)';\n      buttonWrapper.style.outlineOffset = '2px';\n    });\n\n    buttonWrapper.addEventListener('blur', () => {\n      buttonWrapper.style.outline = '';\n      buttonWrapper.style.outlineOffset = '';\n    });\n\n    li.setAttribute('role', 'listitem');\n\n    buttonWrapper.addEventListener('mouseover', () => {\n      li.style.opacity = '0.8';\n    });\n\n    buttonWrapper.addEventListener('mouseout', () => {\n      li.style.opacity = item.isHidden ? '0.5' : '1';\n    });\n\n    const colorBox = document.createElement('span');\n    colorBox.className = `${opts.itemClassName}-color`;\n    applyStyles(colorBox, {\n      width: `${opts.boxWidth}px`,\n      height: `${opts.boxHeight}px`,\n      borderRadius: `${opts.borderRadius}px`,\n      display: 'inline-block',\n      marginRight: `${opts.boxMargin}px`,\n      boxSizing: 'border-box',\n      backgroundColor: item.needsBorder ? item.colorWithAlpha : item.color,\n      border: item.needsBorder ? `1.5px solid ${item.color}` : '',\n    });\n\n    const label = document.createElement('span');\n    label.className = `${opts.itemClassName}-label`;\n    label.textContent = item.label;\n\n    const toggleItemVisibility = () => {\n      item.toggleVisibility();\n      const hidden =\n        'dataIndex' in item\n          ? chart.getDataVisibility(item.dataIndex) === false\n          : chart.getDatasetMeta(item.datasetIndex).hidden;\n      li.style.opacity = hidden ? '0.5' : '1';\n      li.style.textDecoration = hidden ? 'line-through' : 'none';\n      buttonWrapper.setAttribute('aria-pressed', (!hidden).toString());\n      buttonWrapper.setAttribute(\n        'aria-label',\n        `${item.label}${hidden ? ' (hidden)' : ''}`\n      );\n\n      const info = {\n        item,\n        chart,\n        isHidden: hidden,\n        label: item.label,\n        dataIndex: 'dataIndex' in item ? item.dataIndex : undefined,\n        datasetIndex: 'datasetIndex' in item ? item.datasetIndex : undefined,\n        element: li,\n      };\n\n      if (typeof opts.onItemClick === 'function') {\n        opts.onItemClick(info);\n      }\n\n      container.dispatchEvent(\n        new CustomEvent('legend-item-click', {\n          detail: info,\n          bubbles: true,\n          composed: true,\n        })\n      );\n    };\n\n    buttonWrapper.addEventListener('click', toggleItemVisibility);\n\n    buttonWrapper.appendChild(colorBox);\n    buttonWrapper.appendChild(label);\n    li.appendChild(buttonWrapper);\n    ul.appendChild(li);\n\n    legendItems.push(buttonWrapper);\n  });\n\n  if (legendItems.length > 0) {\n    legendItems.forEach((button, index) => {\n      button.addEventListener('keydown', (e) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n          const nextIndex = (index + 1) % legendItems.length;\n          legendItems[nextIndex].focus();\n          e.preventDefault();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n          const prevIndex =\n            (index - 1 + legendItems.length) % legendItems.length;\n          legendItems[prevIndex].focus();\n          e.preventDefault();\n        }\n      });\n    });\n  }\n\n  scrollableContainer.appendChild(ul);\n  legendOuterContainer.appendChild(scrollableContainer);\n  container.appendChild(legendOuterContainer);\n\n  scrollableContainer.style.overflowY =\n    scrollableContainer.scrollHeight > scrollableContainer.clientHeight\n      ? 'scroll'\n      : 'hidden';\n\n  if (opts.adjustChartHeight && chart.canvas) {\n    const legendHeight = Math.min(\n      scrollableContainer.scrollHeight,\n      opts.maxHeight || scrollableContainer.scrollHeight\n    );\n    const totalHeight = legendHeight + opts.reservedLegendHeight;\n\n    if (totalHeight > opts.reservedLegendHeight) {\n      const chartContainer = chart.canvas.parentElement;\n      if (chartContainer) {\n        if (!chartContainer.dataset.originalHeight) {\n          chartContainer.dataset.originalHeight =\n            chartContainer.style.height || 'auto';\n        }\n\n        const originalHeight = chartContainer.dataset.originalHeight;\n        const newHeight =\n          originalHeight !== 'auto'\n            ? `calc(${originalHeight} - ${legendHeight}px)`\n            : `calc(100% - ${legendHeight}px)`;\n\n        chartContainer.style.height = newHeight;\n        chart.resize();\n      }\n    }\n  }\n\n  return container;\n}\n"],"names":["defaultOpts","className","itemClassName","boxWidth","boxHeight","borderRadius","maxHeight","layout","fontSize","boxMargin","onItemClick","adjustChartHeight","reservedLegendHeight","applyStyles","el","styles","Object","assign","style","renderHTMLLegend","chart","container","options","innerHTML","items","getLegendData","length","opts","legendOuterContainer","document","createElement","width","paddingLeft","paddingRight","marginRight","marginLeft","boxSizing","scrollableContainer","overflowY","tabIndex","setAttribute","addEventListener","e","key","scrollTop","preventDefault","clientHeight","scrollHeight","ul","display","flexWrap","justifyContent","listStyle","margin","paddingTop","paddingBottom","flexDirection","gap","legendItems","forEach","item","li","label","alignItems","cursor","fontFamily","height","userSelect","opacity","isHidden","textDecoration","buttonWrapper","background","border","padding","color","textAlign","toString","outline","outlineOffset","colorBox","backgroundColor","needsBorder","colorWithAlpha","textContent","toggleVisibility","hidden","getDataVisibility","dataIndex","getDatasetMeta","datasetIndex","info","undefined","element","dispatchEvent","CustomEvent","detail","bubbles","composed","appendChild","push","button","index","nextIndex","focus","prevIndex","canvas","legendHeight","Math","min","chartContainer","parentElement","dataset","originalHeight","newHeight","resize"],"mappings":"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"}

package/common/plugins/htmlLegendPlugin.d.ts

@@ -0,0 +1,28 @@
+import { Chart } from 'chart.js';
+export interface LegendItemClickInfo {
+    item: any;
+    chart: Chart;
+    isHidden: boolean;
+    label: string;
+    dataIndex?: number;
+    datasetIndex?: number;
+    element: HTMLElement;
+}
+export interface HtmlLegendPluginOptions {
+    containerId: string;
+    boxWidth?: number;
+    boxHeight?: number;
+    borderRadius?: number;
+    className?: string;
+    itemClassName?: string;
+    maxHeight?: number;
+    layout?: 'horizontal' | 'vertical';
+    onItemClick?: (info: LegendItemClickInfo) => void;
+    adjustChartHeight?: boolean;
+    reservedLegendHeight?: number;
+}
+export declare const htmlLegendPlugin: {
+    id: string;
+    afterUpdate(chart: Chart, _: any, options: HtmlLegendPluginOptions): void;
+};
+//# sourceMappingURL=htmlLegendPlugin.d.ts.map

package/common/plugins/htmlLegendPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlLegendPlugin.d.ts","sourceRoot":"","sources":["../../../src/common/plugins/htmlLegendPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,CAAC;IACV,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB;;uBAER,KAAK,KAAK,GAAG,WAAW,uBAAuB;CAKnE,CAAC"}

package/components/chart/chart.d.ts

@@ -50,6 +50,12 @@ export declare class KDChart extends LitElement {
      * @ignore
      */
     fullscreen: boolean;
+    /** Use HTML legend instead of Chart.js built-in canvas legend.
+     * @public
+     */
+    useHtmlLegend: boolean;
+    /** Max height for HTML legend scroll container (px). */
+    htmlLegendMaxHeight: number;
     /**
      * Queries the container element.
      * @ignore
@@ -99,6 +105,7 @@ export declare class KDChart extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    private generateScrollableLegend;
     updated(changedProps: any): void;
     /**
      * Initializes a bar chart using the Chart.js library with provided labels, datasets,
@@ -114,6 +121,8 @@ export declare class KDChart extends LitElement {
     private handleViewToggle;
     private checkType;
     private handleDownloadImage;
+    private exportCanvasOnly;
+    private exportSimpleCanvasOnly;
     private handleDownloadCsv;
     private handleFullscreen;
     private handleFullscreenChange;

package/components/chart/chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;AA8ClC;;;;;;GAMG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAa;IAEnC,mBAAmB;IAEnB,UAAU,SAAM;IAEhB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,2BAA2B;IAE3B,IAAI,EAAE,GAAG,CAAM;IAEf,4BAA4B;IAE5B,MAAM,EAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEvB,8BAA8B;IAE9B,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB,uDAAuD;IAEvD,OAAO,EAAE,GAAG,CAAM;IAElB,yHAAyH;IAEzH,OAAO,EAAE,GAAG,CAAM;IAElB,wEAAwE;IAExE,MAAM,EAAE,GAAG,CAAQ;IAEnB,uEAAuE;IAEvE,KAAK,EAAE,GAAG,CAAQ;IAElB,sCAAsC;IAEtC,eAAe,UAAS;IAExB,0CAA0C;IAE1C,YAAY,UAAS;IAErB,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0BAA0B;IAE1B,YAAY,UAAS;IAErB,4CAA4C;IAE5C,QAAQ,UAAS;IAEjB,gCAAgC;IAEhC,YAAY;;;;;;;MAOV;IAEF;;OAEG;IAEH,UAAU,UAAS;IAEnB;;;OAGG;IAEH,SAAS,EAAG,iBAAiB,CAAC;IAE9B;;;OAGG;IAEH,MAAM,EAAG,iBAAiB,CAAC;IAE3B;;;OAGG;IAEH,KAAK,EAAG,cAAc,CAAC;IAEvB;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAQ;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,aAAa,EAAE,GAAG,CAAM;IAExB;;OAEG;IAEH,cAAc,EAAE,GAAG,CAAM;IAEzB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IACH,eAAe,EAAE,GAAG,CAIlB;IAEF,cAAc,EAAE,GAAG,CAMhB;IAEM,MAAM;IAwVf,OAAO,CAAC,YAAY;IAMX,iBAAiB;IASjB,oBAAoB;IAOpB,YAAY;IAKZ,OAAO,CAAC,YAAY,EAAE,GAAG;IA0FlC;;;OAGG;IACH,OAAO,CAAC,SAAS;IAgDjB;;;OAGG;YACW,YAAY;IAmE1B,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;CAG/B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;AA+ClC;;;;;;GAMG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAa;IAEnC,mBAAmB;IAEnB,UAAU,SAAM;IAEhB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,2BAA2B;IAE3B,IAAI,EAAE,GAAG,CAAM;IAEf,4BAA4B;IAE5B,MAAM,EAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEvB,8BAA8B;IAE9B,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB,uDAAuD;IAEvD,OAAO,EAAE,GAAG,CAAM;IAElB,yHAAyH;IAEzH,OAAO,EAAE,GAAG,CAAM;IAElB,wEAAwE;IAExE,MAAM,EAAE,GAAG,CAAQ;IAEnB,uEAAuE;IAEvE,KAAK,EAAE,GAAG,CAAQ;IAElB,sCAAsC;IAEtC,eAAe,UAAS;IAExB,0CAA0C;IAE1C,YAAY,UAAS;IAErB,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0BAA0B;IAE1B,YAAY,UAAS;IAErB,4CAA4C;IAE5C,QAAQ,UAAS;IAEjB,gCAAgC;IAEhC,YAAY;;;;;;;MAOV;IAEF;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,aAAa,UAAS;IAEtB,wDAAwD;IAExD,mBAAmB,SAAO;IAE1B;;;OAGG;IAEH,SAAS,EAAG,iBAAiB,CAAC;IAE9B;;;OAGG;IAEH,MAAM,EAAG,iBAAiB,CAAC;IAE3B;;;OAGG;IAEH,KAAK,EAAG,cAAc,CAAC;IAEvB;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAQ;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,aAAa,EAAE,GAAG,CAAM;IAExB;;OAEG;IAEH,cAAc,EAAE,GAAG,CAAM;IAEzB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IACH,eAAe,EAAE,GAAG,CAIlB;IAEF,cAAc,EAAE,GAAG,CAMhB;IAEM,MAAM;IA4Xf,OAAO,CAAC,YAAY;IAMX,iBAAiB;IASjB,oBAAoB;IAOpB,YAAY;IAKrB,OAAO,CAAC,wBAAwB;IAkBvB,OAAO,CAAC,YAAY,EAAE,GAAG;IA6FlC;;;OAGG;IACH,OAAO,CAAC,SAAS;IA2CjB;;;OAGG;YACW,YAAY;IAgF1B,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,mBAAmB;IA+F3B,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,sBAAsB;IAuD9B,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;CAG/B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/components/chart/chart.js

@@ -1,6 +1,6 @@
-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 s}from'./../../external/lit-element/lit-element.js';import{customElement as o}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 r}from'./../../external/@lit/reactive-element/decorators/query.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as n}from'./../../external/lit-html/directives/class-map.js';import{deepmerge as l,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 d,BubbleMapController as h,GeoFeature as m,ColorScale as p,SizeScale as u,ProjectionScale as g}from'./../../external/chartjs-chart-geo/build/index.js';import{TreemapController as y,TreemapElement as v}from'./../../external/chartjs-chart-treemap/dist/chartjs-chart-treemap.esm.js';import{MatrixController as b,MatrixElement as f}from'./../../external/chartjs-chart-matrix/dist/chartjs-chart-matrix.esm.js';import j from"../../common/plugins/canvasBackground.js";import T from"../../common/plugins/doughnutLabel.js";import $ from"../../common/plugins/meterGaugeNeedle.js";import w from"../../common/plugins/gradientLegend.js";import x from'./../../external/chartjs-plugin-a11y-legend/dist/plugin.js';import k from'./../../external/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js';import _ from'./../../external/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js';import{debounce as O,convertChartDataToCSV as D}from"../../common/helpers/helpers.js";import A from"./chart.scss.js";import C from"../../common/config/globalOptions.js";import L from"../../common/config/globalOptionsNonRadial.js";import M from"../../common/config/globalOptionsRadial.js";import V from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/analytics.svg.js';import E from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/table-view.svg.js';import S from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/download.svg.js';import B from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/expand.svg.js';import q from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/shrink.svg.js';import{unsafeSVG as F}from'./../../external/lit-html/directives/unsafe-svg.js';import{getTokenThemeVal as z}from'./../../external/@kyndryl-design-system/shidoka-foundation/common/helpers/color.js';import{Chart as R}from'./../../external/chart.js/dist/chart.js';function N(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/matrix.js":return import("../../common/config/chartTypes/matrix.js");case"../../common/config/chartTypes/meter.js":return import("../../common/config/chartTypes/meter.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,s){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}R.register(d,h,m,p,u,g,y,v,b,f,_,k);let P=class extends s{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={},this._widget=!1,this._resizeObserver=new ResizeObserver(O((()=>{this._resizeChart()}))),this._themeObserver=new MutationObserver((()=>{this.chart&&this.mergeOptions().then((()=>{this.initChart()}))}))}render(){var t,s,o,i,a,r,l,c,d;const h={container:!0,fullscreen:this.fullscreen,"no-border":this.noBorder||this._widget,widget:this._widget};return e`
+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{classMap as r}from'./../../external/lit-html/directives/class-map.js';import{deepmerge as l,deepmergeCustom as d}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 h,BubbleMapController as c,GeoFeature as p,ColorScale as m,SizeScale as u,ProjectionScale as g}from'./../../external/chartjs-chart-geo/build/index.js';import{TreemapController as y,TreemapElement as v}from'./../../external/chartjs-chart-treemap/dist/chartjs-chart-treemap.esm.js';import{MatrixController as b,MatrixElement as f}from'./../../external/chartjs-chart-matrix/dist/chartjs-chart-matrix.esm.js';import j from"../../common/plugins/canvasBackground.js";import $ from"../../common/plugins/doughnutLabel.js";import w from"../../common/plugins/meterGaugeNeedle.js";import x from"../../common/plugins/gradientLegend.js";import{renderHTMLLegend as T}from"../../common/legend/htmlRenderer.js";import k from'./../../external/chartjs-plugin-a11y-legend/dist/plugin.js';import O from'./../../external/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js';import C from'./../../external/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js';import{debounce as _,convertChartDataToCSV as L}from"../../common/helpers/helpers.js";import D from"./chart.scss.js";import A from"../../common/config/globalOptions.js";import S from"../../common/config/globalOptionsNonRadial.js";import M from"../../common/config/globalOptionsRadial.js";import E from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/analytics.svg.js';import H from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/table-view.svg.js';import V from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/download.svg.js';import B from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/expand.svg.js';import N from'./../../external/@kyndryl-design-system/shidoka-icons/svg/monochrome/16/shrink.svg.js';import{unsafeSVG as R}from'./../../external/lit-html/directives/unsafe-svg.js';import{getTokenThemeVal as q}from'./../../external/@kyndryl-design-system/shidoka-foundation/common/helpers/color.js';import{Chart as J}from'./../../external/chart.js/dist/chart.js';function z(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/matrix.js":return import("../../common/config/chartTypes/matrix.js");case"../../common/config/chartTypes/meter.js":return import("../../common/config/chartTypes/meter.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)))}))}}J.register(h,c,p,m,u,g,y,v,b,f,C,O);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.useHtmlLegend=!1,this.htmlLegendMaxHeight=100,this.chart=null,this.tableView=!1,this.tableDisabled=!1,this.mergedOptions={},this.mergedDatasets={},this._widget=!1,this._resizeObserver=new ResizeObserver(_((()=>{this._resizeChart()}))),this._themeObserver=new MutationObserver((()=>{this.chart&&this.mergeOptions().then((()=>{this.initChart()}))}))}render(){var t,o,s,i,a,n,l,d,h;const c={container:!0,fullscreen:this.fullscreen,"no-border":this.noBorder||this._widget,widget:this._widget};return e`
       <div
-        class=${n(h)}
+        class=${r(c)}
         @fullscreenchange=${()=>this.handleFullscreenChange()}
       >
         ${this.hideHeader&&this.hideControls?null:e`
@@ -30,7 +30,7 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
                                 title=${this.customLabels.toggleView}
                               >
                                 <span slot="icon">
-                                  ${this.tableView?F(V):F(E)}
+                                  ${this.tableView?R(E):R(H)}
                                 </span>
                               </button>
                             `}
@@ -42,7 +42,7 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
                           title=${this.customLabels.toggleFullscreen}
                         >
                           <span slot="icon">
-                            ${this.fullscreen?F(q):F(B)}
+                            ${this.fullscreen?R(N):R(B)}
                           </span>
                         </button>
 
@@ -54,7 +54,7 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
                             title=${this.customLabels.downloadMenu}
                           >
                             <span slot="icon">
-                              ${F(S)}
+                              ${R(V)}
                             </span>
                           </button>
 
@@ -105,25 +105,45 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
               class="closed-caption ${this.hideCaptions?"hidden-visually":""}"
             ></div>
           </figcaption>
+
+          <div
+            class="html-legend-container"
+            ?hidden=${!this.useHtmlLegend}
+          ></div>
         </figure>
 
         ${!this.tableDisabled&&this.tableView?e`
               <div class="table">
                 <table>
-                  ${"matrix"===this.type?e`
+                  ${["pie","doughnut","polarArea"].includes(this.type)?e`
+                        <thead>
+                          <tr>
+                            <th>Label</th>
+                            <th>Value</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          ${this.labels.map(((t,o)=>e`
+                              <tr>
+                                <td>${t}</td>
+                                <td>${this.datasets[0].data[o]}</td>
+                              </tr>
+                            `))}
+                        </tbody>
+                      `:"matrix"===this.type?e`
                         <thead>
                           <tr>
                             <th>
-                              ${(null===(i=null===(o=null===(s=null===(t=this.options)||void 0===t?void 0:t.scales)||void 0===s?void 0:s.y)||void 0===o?void 0:o.title)||void 0===i?void 0:i.text)||"Y Axis"}
+                              ${(null===(i=null===(s=null===(o=null===(t=this.options)||void 0===t?void 0:t.scales)||void 0===o?void 0:o.y)||void 0===s?void 0:s.title)||void 0===i?void 0:i.text)||"Y Axis"}
                             </th>
                             <th>
-                              ${(null===(c=null===(l=null===(r=null===(a=this.options)||void 0===a?void 0:a.scales)||void 0===r?void 0:r.x)||void 0===l?void 0:l.title)||void 0===c?void 0:c.text)||"X Axis"}
+                              ${(null===(d=null===(l=null===(n=null===(a=this.options)||void 0===a?void 0:a.scales)||void 0===n?void 0:n.x)||void 0===l?void 0:l.title)||void 0===d?void 0:d.text)||"X Axis"}
                             </th>
                             ${this.datasets.map((t=>e`<th>${t.label}</th>`))}
                           </tr>
                         </thead>
                         <tbody>
-                          ${this.datasets[0].data.map((t=>{var s,o;const i=Array.isArray(this.labels)?this.labels[t.x-1]||"":(null===(s=this.labels.x)||void 0===s?void 0:s[t.x-1])||"",a=Array.isArray(this.labels)?this.labels[t.y-1]||"":(null===(o=this.labels.y)||void 0===o?void 0:o[t.y-1])||"";return e`
+                          ${this.datasets[0].data.map((t=>{var o,s;const i=Array.isArray(this.labels)?this.labels[t.x-1]||"":(null===(o=this.labels.x)||void 0===o?void 0:o[t.x-1])||"",a=Array.isArray(this.labels)?this.labels[t.y-1]||"":(null===(s=this.labels.y)||void 0===s?void 0:s[t.y-1])||"";return e`
                               <tr>
                                 <td>${a}</td>
                                 <td>${i}</td>
@@ -134,7 +154,7 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
                       `:e`
                         <thead>
                           <tr>
-                            ${(null===(d=this.labels)||void 0===d?void 0:d.length)||"treemap"===this.type?e`<th>${this.getTableAxisLabel()}</th>`:null}
+                            ${(null===(h=this.labels)||void 0===h?void 0:h.length)||"treemap"===this.type?e`<th>${this.getTableAxisLabel()}</th>`:null}
                             ${this.datasets.map((t=>e`<th>${t.label}</th>`))}
                           </tr>
                         </thead>
@@ -146,37 +166,37 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
                                       </td>
                                       <td>${t[this.datasets[0].key]}</td>
                                     </tr>
-                                  `)):Object.entries(this.datasets[0].tree).map((t=>{const s=[];return t[1].value?s.push(e`
+                                  `)):Object.entries(this.datasets[0].tree).map((t=>{const o=[];return t[1].value?o.push(e`
                                         <tr>
                                           <td>${t[0]}</td>
                                           <td>${t[1].value}</td>
                                         </tr>
-                                      `):Object.entries(t[1]).map((t=>{t[1].value?s.push(e`
+                                      `):Object.entries(t[1]).map((t=>{t[1].value?o.push(e`
                                               <tr>
                                                 <td>${t[0]}</td>
                                                 <td>${t[1].value}</td>
                                               </tr>
-                                            `):Object.entries(t[1]).map((t=>{s.push(e`
+                                            `):Object.entries(t[1]).map((t=>{o.push(e`
                                                   <tr>
                                                     <td>${t[0]}</td>
                                                     <td>
                                                       ${t[1].value}
                                                     </td>
                                                   </tr>
-                                                `)}))})),s})):this.datasets[0].data.map(((t,s)=>{var o,i;const a=this.options.indexAxis||"x",r="x"===a?"y":"x";return e`
+                                                `)}))})),o})):this.datasets[0].data.map(((t,o)=>{var s,i,a,n;const r=this.options.indexAxis||"x",l="x"===r?"y":"x";return e`
                                     <tr>
-                                      ${this.labels.length?e`
-                                            ${"time"===(null===(i=null===(o=this.options)||void 0===o?void 0:o.scales[a])||void 0===i?void 0:i.type)?e`
+                                      ${(null===(s=this.labels)||void 0===s?void 0:s.length)?e`
+                                            ${"time"===(null===(n=null===(a=null===(i=this.options)||void 0===i?void 0:i.scales)||void 0===a?void 0:a[r])||void 0===n?void 0:n.type)?e`
                                                   <td>
-                                                    ${new Date(this.labels[s]).toLocaleString()}
+                                                    ${new Date(this.labels[o]).toLocaleString()}
                                                   </td>
                                                 `:e`
-                                                  <td>${this.labels[s]}</td>
+                                                  <td>${this.labels[o]}</td>
                                                 `}
                                           `:null}
-                                      ${this.datasets.map((t=>{var o,i;const a=t.data[s];return"bubbleMap"===this.type||"choropleth"===this.type?e`
-                                            <td>${t.data[s].value}</td>
-                                          `:"time"===(null===(i=null===(o=this.options)||void 0===o?void 0:o.scales[r])||void 0===i?void 0:i.type)?e`
+                                      ${this.datasets.map((t=>{var s,i;if(o>=t.data.length)return e`<td></td>`;const a=t.data[o];return"bubbleMap"===this.type||"choropleth"===this.type?e`
+                                            <td>${t.data[o].value}</td>
+                                          `:"time"===(null===(i=null===(s=this.options)||void 0===s?void 0:s.scales[l])||void 0===i?void 0:i.type)?e`
                                             <td>
                                               ${new Date(a).toLocaleString()}
                                             </td>
@@ -184,16 +204,16 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
                                             <td>
                                               ${a[0]}, ${a[1]}
                                             </td>
-                                          `:"object"!=typeof a||Array.isArray(a)||null===a?e`
-                                            <td>${t.data[s]}</td>
+                                          `:["pie","doughnut","polarArea"].includes(this.type)?e` <td>${a}</td> `:"object"!=typeof a||Array.isArray(a)||null===a?e`
+                                            <td>${t.data[o]}</td>
                                           `:e`
                                             <td>
-                                              ${Object.keys(a).map((t=>{var s,o,i;const r=(null===(o=null===(s=this.options.scales[t])||void 0===s?void 0:s.title)||void 0===o?void 0:o.text)||t,n="time"===(null===(i=this.options.scales[t])||void 0===i?void 0:i.type)?new Date(a[t]).toLocaleString():a[t];return e`
+                                              ${Object.keys(a).map((t=>{var o,s,i,n,r,l,d;const h=(null===(n=null===(i=null===(s=null===(o=this.options)||void 0===o?void 0:o.scales)||void 0===s?void 0:s[t])||void 0===i?void 0:i.title)||void 0===n?void 0:n.text)||t,c="time"===(null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.scales)||void 0===l?void 0:l[t])||void 0===d?void 0:d.type)&&a[t]?new Date(a[t]).toLocaleString():a[t];return e`
                                                     <div>
                                                       <strong>
-                                                        ${r}:
+                                                        ${h}:
                                                       </strong>
-                                                      ${n}
+                                                      ${c}
                                                     </div>
                                                   `}))}
                                             </td>
@@ -206,5 +226,5 @@ import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@l
               </div>
             `:null}
       </div>
-    `}_resizeChart(){this.chart&&this.chart.resize()}connectedCallback(){super.connectedCallback(),this._themeObserver.observe(document.querySelector('meta[name="color-scheme"]'),{attributes:!0})}disconnectedCallback(){this._resizeObserver.disconnect(),this._themeObserver.disconnect(),super.disconnectedCallback()}firstUpdated(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".canvas-container");this._resizeObserver.observe(e)}updated(t){var e,s;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((s=>{e[s]=t[s]})):this.chart.data.datasets.push(t)})),this.chart.update()}));let o=!1;if(this.datasets&&this.datasets.length)for(const t of this.datasets)if(o=(null===(e=t.data)||void 0===e?void 0:e.length)>0||(null===(s=t.tree)||void 0===s?void 0:s.length)>0||t.tree&&Object.keys(t.tree).length>0,!o){console.error("Missing data for one or more chart datasets.");break}!this.chart&&this.type&&t.has("datasets")&&o&&(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(){R.defaults.color=z("--kd-color-text-level-primary");const t="meter"===this.type?$:T;let e=[j,t,w,...this.plugins];["choropleth","treemap","bubbleMap"].includes(this.type)||(e=[...e,x]),this.chart&&this.chart.destroy(),this.chart=new R(this.canvas,{type:"meter"===this.type?"doughnut":this.type,data:{labels:this.labels,datasets:this.mergedDatasets},options:this.mergedOptions,plugins:e})}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/matrix.js":return import("../../common/config/chartTypes/matrix.js");case"../../common/config/chartTypes/meter.js":return import("../../common/config/chartTypes/meter.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,s){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}(`../../common/config/chartTypes/${e.type}.js`))}));const e=await Promise.all([N(`../../common/config/chartTypes/${this.type}.js`),...t]);let s=C(this);["pie","doughnut","radar","polarArea","meter"].includes(this.type)?s=l(s,M()):["choropleth","treemap","bubbleMap"].includes(this.type)||(s=l(s,L(this)));const o=JSON.parse(JSON.stringify(this.datasets));e.forEach((t=>{s=l(s,t.options(this)),o.forEach(((e,s)=>{(!e.type&&t.type===this.type||e.type===t.type)&&(o[s]=l(e,t.datasetOptions(this,s)))}))})),this.options&&(s=l(s,this.options)),this.mergedOptions=s,o.forEach(((t,e)=>{const s=c({mergeArrays:!1});o[e]=s(t,this.datasets[e])})),this.mergedDatasets=o}getTableAxisLabel(){var t,e,s,o,i,a,r,n,l,c,d;let h="";return h="y"===(null===(t=this.options)||void 0===t?void 0:t.indexAxis)?(null===(i=null===(o=null===(s=null===(e=this.options)||void 0===e?void 0:e.scales)||void 0===s?void 0:s.y)||void 0===o?void 0:o.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===(c=null===(l=null===(n=null===(r=this.options)||void 0===r?void 0:r.scales)||void 0===n?void 0:n.x)||void 0===l?void 0:l.title)||void 0===c?void 0:c.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=[].includes(this.type)}handleDownloadImage(t,e){t.preventDefault();const s=this.canvas.getContext("2d"),o=z("--kd-color-background-page-default");s.save(),s.globalCompositeOperation="destination-over",s.fillStyle=o,s.fillRect(0,0,this.canvas.width,this.canvas.height);const i=e?"image/jpeg":"image/png",a=e?"jpg":"png",r=document.createElement("a");r.href=this.chart.toBase64Image(i,1),r.download=this.chartTitle+"."+a,r.click(),s.restore()}handleDownloadCsv(t){t.preventDefault();let e="";for(let t=0;t<this.chart.data.datasets.length;t++)e+=D({data:this.chart.data.datasets[t],labels:this.labels});if(null==e)return;const s=this.chartTitle+".csv";e.match(/^data:text\/csv/i)||(e="data:text/csv;charset=utf-8,"+e);const o=encodeURI(e),i=document.createElement("a");i.setAttribute("href",o),i.setAttribute("download",s),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)}};P.styles=A,t([i({type:String})],P.prototype,"chartTitle",void 0),t([i({type:String})],P.prototype,"description",void 0),t([i({type:String})],P.prototype,"type",void 0),t([i({type:Array})],P.prototype,"labels",void 0),t([i({type:Array})],P.prototype,"datasets",void 0),t([i({type:Object})],P.prototype,"options",void 0),t([i({type:Array})],P.prototype,"plugins",void 0),t([i({type:Number})],P.prototype,"height",void 0),t([i({type:Number})],P.prototype,"width",void 0),t([i({type:Boolean})],P.prototype,"hideDescription",void 0),t([i({type:Boolean})],P.prototype,"hideCaptions",void 0),t([i({type:Boolean})],P.prototype,"hideHeader",void 0),t([i({type:Boolean})],P.prototype,"hideControls",void 0),t([i({type:Boolean})],P.prototype,"noBorder",void 0),t([i({type:Object})],P.prototype,"customLabels",void 0),t([a()],P.prototype,"fullscreen",void 0),t([r(".container")],P.prototype,"container",void 0),t([r("canvas")],P.prototype,"canvas",void 0),t([r(".closed-caption")],P.prototype,"ccDiv",void 0),t([a()],P.prototype,"chart",void 0),t([a()],P.prototype,"tableView",void 0),t([a()],P.prototype,"tableDisabled",void 0),t([a()],P.prototype,"mergedOptions",void 0),t([a()],P.prototype,"mergedDatasets",void 0),t([a()],P.prototype,"_widget",void 0),P=t([o("kd-chart")],P);export{P as KDChart};
+    `}_resizeChart(){this.chart&&this.chart.resize()}connectedCallback(){super.connectedCallback(),this._themeObserver.observe(document.querySelector('meta[name="color-scheme"]'),{attributes:!0})}disconnectedCallback(){this._resizeObserver.disconnect(),this._themeObserver.disconnect(),super.disconnectedCallback()}firstUpdated(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".canvas-container");this._resizeObserver.observe(e)}generateScrollableLegend(){var t;if(!this.chart||!this.useHtmlLegend)return;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".html-legend-container");if(!e)return;const o=this.mergedOptions.plugins.customLegend;T(this.chart,e,{maxHeight:this.htmlLegendMaxHeight,boxWidth:(null==o?void 0:o.boxWidth)||16,boxHeight:(null==o?void 0:o.boxHeight)||16,borderRadius:(null==o?void 0:o.borderRadius)||2})}updated(t){var e,o;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(),this.generateScrollableLegend()}));let s=!1;if(this.datasets&&this.datasets.length)for(const t of this.datasets)if(s=(null===(e=t.data)||void 0===e?void 0:e.length)>0||(null===(o=t.tree)||void 0===o?void 0:o.length)>0||t.tree&&Object.keys(t.tree).length>0,!s){console.error("Missing data for one or more chart datasets.");break}!this.chart&&this.type&&t.has("datasets")&&s&&(this.mergeOptions().then((()=>{this.initChart()})),this.checkType()),this.chart&&(t.has("type")||t.has("plugins")||t.has("width")||t.has("height")||t.has("useHtmlLegend"))&&(this.mergeOptions().then((()=>{this.initChart()})),this.checkType()),this.chart&&t.has("noBorder")&&this.chart.resize()}initChart(){J.defaults.color=q("--kd-color-text-level-primary");const t="meter"===this.type?w:$;let e=[j,t,x,...this.plugins];["choropleth","treemap","bubbleMap"].includes(this.type)||(e=[...e,k]),this.chart&&this.chart.destroy(),this.chart=new J(this.canvas,{type:"meter"===this.type?"doughnut":this.type,data:{labels:this.labels,datasets:this.mergedDatasets},options:this.mergedOptions,plugins:e}),this.generateScrollableLegend()}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/matrix.js":return import("../../common/config/chartTypes/matrix.js");case"../../common/config/chartTypes/meter.js":return import("../../common/config/chartTypes/meter.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([z(`../../common/config/chartTypes/${this.type}.js`),...t]);let o=A(this);this.useHtmlLegend||(o.plugins=o.plugins||{},o.plugins.legend=o.plugins.legend||{},o.plugins.legend.display=!0,o.plugins.customLegend&&(o.plugins.customLegend.display=!1)),["pie","doughnut","radar","polarArea","meter"].includes(this.type)?o=l(o,M()):["choropleth","treemap","bubbleMap"].includes(this.type)||(o=l(o,S(this)));const s=JSON.parse(JSON.stringify(this.datasets));e.forEach((t=>{o=l(o,t.options(this)),s.forEach(((e,o)=>{(!e.type&&t.type===this.type||e.type===t.type)&&(s[o]=l(e,t.datasetOptions(this,o)))}))})),this.options&&(o=l(o,this.options)),this.mergedOptions=o,s.forEach(((t,e)=>{const o=d({mergeArrays:!1});s[e]=o(t,this.datasets[e])})),this.mergedDatasets=s}getTableAxisLabel(){var t,e,o,s,i,a,n,r,l,d,h;let c="";return c="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===(d=null===(l=null===(r=null===(n=this.options)||void 0===n?void 0:n.scales)||void 0===r?void 0:r.x)||void 0===l?void 0:l.title)||void 0===d?void 0:d.text)?null===(h=this.options)||void 0===h?void 0:h.scales.x.title.text:"X Axis",c}handleViewToggle(){this.tableView=!this.tableView}checkType(){this.tableDisabled=[].includes(this.type)}handleDownloadImage(t,e){t.preventDefault();const o=e?"image/jpeg":"image/png",s=e?"jpg":"png";if(this.useHtmlLegend&&this.chart){if(["doughnut","pie"].includes(this.type))return void this.exportSimpleCanvasOnly(o,s);const t={options:JSON.parse(JSON.stringify(this.chart.options)),data:JSON.parse(JSON.stringify(this.chart.data)),type:this.chart.config.type},e=this.chart.data.datasets.map(((t,e)=>this.chart.getDatasetMeta(e).hidden));try{this.chart.options.plugins||(this.chart.options.plugins={}),this.chart.options.plugins.legend||(this.chart.options.plugins.legend={}),this.chart.options.plugins.legend.display=!0,this.chart.options.plugins.legend.position="bottom",this.chart.options.plugins.legend.labels={boxWidth:12,boxHeight:12,padding:10,font:{size:12}},this.chart.options.layout?this.chart.options.layout.padding?"number"==typeof this.chart.options.layout.padding?this.chart.options.layout.padding={top:this.chart.options.layout.padding,right:this.chart.options.layout.padding,bottom:Math.max(this.chart.options.layout.padding,40),left:this.chart.options.layout.padding}:this.chart.options.layout.padding&&(this.chart.options.layout.padding.bottom=Math.max(this.chart.options.layout.padding.bottom||0,40)):this.chart.options.layout.padding={bottom:40}:this.chart.options.layout={padding:{bottom:40}},this.chart.update("none");const i=this.canvas.getContext("2d");if(!i)throw new Error("Could not get canvas context");const a=q("--kd-color-background-page-default");i.save(),i.globalCompositeOperation="destination-over",i.fillStyle=a,i.fillRect(0,0,this.canvas.width,this.canvas.height);const n=this.chart.toBase64Image(o,1),r=document.createElement("a");r.href=n,r.download=this.chartTitle+"."+s,document.body.appendChild(r),r.click(),document.body.removeChild(r),i.restore(),this.chart.options=t.options,e.forEach(((t,e)=>{this.chart.getDatasetMeta(e).hidden=t})),this.chart.update()}catch(t){console.error("Error exporting chart with legend:",t),this.exportCanvasOnly(o,s)}}else this.exportCanvasOnly(o,s)}exportCanvasOnly(t,e){const o=this.canvas.getContext("2d");if(!o||!this.chart)return;const s=q("--kd-color-background-page-default");o.save(),o.globalCompositeOperation="destination-over",o.fillStyle=s,o.fillRect(0,0,this.canvas.width,this.canvas.height);const i=document.createElement("a");i.href=this.chart.toBase64Image(t,1),i.download=this.chartTitle+"."+e,document.body.appendChild(i),i.click(),document.body.removeChild(i),o.restore()}exportSimpleCanvasOnly(t,e){const o=this.canvas.getContext("2d");if(o&&this.chart)try{const s=JSON.parse(JSON.stringify(this.chart.options));o.save();const i=q("--kd-color-background-page-default");o.globalCompositeOperation="destination-over",o.fillStyle=i,o.fillRect(0,0,this.canvas.width,this.canvas.height),this.chart.options={...this.chart.options,plugins:{legend:{display:!0,position:"bottom",labels:{boxWidth:12,boxHeight:12,padding:10,font:{size:12}}},datalabels:{display:!1,formatter:null},tooltip:{enabled:!1},doughnutLabel:{enabled:!1}},layout:{padding:{bottom:40}}},this.chart.update("none");const a=this.chart.toBase64Image(t,1),n=document.createElement("a");n.href=a,n.download=this.chartTitle+"."+e,document.body.appendChild(n),n.click(),document.body.removeChild(n),o.restore(),this.chart.options=s,this.chart.update()}catch(o){console.error("Error in exportSimpleCanvasOnly:",o),this.exportCanvasOnly(t,e)}}handleDownloadCsv(t){t.preventDefault();let e="";for(let t=0;t<this.chart.data.datasets.length;t++)e+=L({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([i({type:Boolean})],F.prototype,"useHtmlLegend",void 0),t([i({type:Number,reflect:!0})],F.prototype,"htmlLegendMaxHeight",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),t([a()],F.prototype,"_widget",void 0),F=t([s("kd-chart")],F);export{F as KDChart};
 //# sourceMappingURL=chart.js.map

package/components/chart/chart.js.map

@@ -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 { classMap } from 'lit/directives/class-map.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 { MatrixController, MatrixElement } from 'chartjs-chart-matrix';\nimport canvasBackgroundPlugin from '../../common/plugins/canvasBackground';\nimport doughnutLabelPlugin from '../../common/plugins/doughnutLabel';\nimport meterGaugePlugin from '../../common/plugins/meterGaugeNeedle';\nimport gradientLegendPlugin from '../../common/plugins/gradientLegend';\nimport a11yPlugin from 'chartjs-plugin-a11y-legend';\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 chartIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/analytics.svg';\nimport tableIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/table-view.svg';\nimport downloadIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/download.svg';\nimport maximizeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/expand.svg';\nimport minimizeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/shrink.svg';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { getTokenThemeVal } from '@kyndryl-design-system/shidoka-foundation/common/helpers/color';\n\nChart.register(\n  ChoroplethController,\n  BubbleMapController,\n  GeoFeature,\n  ColorScale,\n  SizeScale,\n  ProjectionScale,\n  TreemapController,\n  TreemapElement,\n  MatrixController,\n  MatrixElement,\n  annotationPlugin,\n  datalabelsPlugin\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 * @slot tooltip - Slot for tooltip in header.\n * @slot draghandle - Slot for widget drag handle.\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  /** Is Widget. Inherited from kyn-widget.\n   * @internal\n   */\n  @state()\n  _widget = false;\n\n  /** ResizeObserver for canvas-container.\n   * @internal\n   */\n  _resizeObserver: any = new ResizeObserver(\n    debounce(() => {\n      this._resizeChart();\n    })\n  );\n\n  _themeObserver: any = new MutationObserver(() => {\n    if (this.chart) {\n      this.mergeOptions().then(() => {\n        this.initChart();\n      });\n    }\n  });\n\n  override render() {\n    const Classes = {\n      container: true,\n      fullscreen: this.fullscreen,\n      'no-border': this.noBorder || this._widget,\n      widget: this._widget,\n    };\n\n    return html`\n      <div\n        class=${classMap(Classes)}\n        @fullscreenchange=${() => this.handleFullscreenChange()}\n      >\n        ${!this.hideHeader || !this.hideControls\n          ? html`\n              <div class=\"header\">\n                ${!this.hideHeader\n                  ? html`\n                      <slot name=\"draghandle\"></slot>\n\n                      <div id=\"titleDesc\">\n                        <div class=\"title\">\n                          ${this.chartTitle}\n                          <slot name=\"tooltip\"></slot>\n                        </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                                class=\"control-button\"\n                                @click=${() => this.handleViewToggle()}\n                                aria-label=${this.customLabels.toggleView}\n                                title=${this.customLabels.toggleView}\n                              >\n                                <span slot=\"icon\">\n                                  ${this.tableView\n                                    ? unsafeSVG(chartIcon)\n                                    : unsafeSVG(tableIcon)}\n                                </span>\n                              </button>\n                            `\n                          : null}\n\n                        <button\n                          class=\"control-button\"\n                          @click=${() => this.handleFullscreen()}\n                          aria-label=${this.customLabels.toggleFullscreen}\n                          title=${this.customLabels.toggleFullscreen}\n                        >\n                          <span slot=\"icon\">\n                            ${this.fullscreen\n                              ? unsafeSVG(minimizeIcon)\n                              : unsafeSVG(maximizeIcon)}\n                          </span>\n                        </button>\n\n                        <div class=\"download\">\n                          <button\n                            tabindex=\"0\"\n                            class=\"control-button\"\n                            aria-label=${this.customLabels.downloadMenu}\n                            title=${this.customLabels.downloadMenu}\n                          >\n                            <span slot=\"icon\">\n                              ${unsafeSVG(downloadIcon)}\n                            </span>\n                          </button>\n\n                          <div class=\"download-menu\">\n                            ${!this.tableDisabled\n                              ? html`\n                                  <button\n                                    tabindex=\"0\"\n                                    @click=${(e: Event) =>\n                                      this.handleDownloadCsv(e)}\n                                  >\n                                    ${this.customLabels.downloadCsv}\n                                  </button>\n                                `\n                              : null}\n                            <button\n                              tabindex=\"0\"\n                              @click=${(e: Event) =>\n                                this.handleDownloadImage(e, false)}\n                            >\n                              ${this.customLabels.downloadPng}\n                            </button>\n                            <button\n                              tabindex=\"0\"\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        <div>\n          <slot></slot>\n        </div>\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                  ${this.type === 'matrix'\n                    ? html`\n                        <thead>\n                          <tr>\n                            <th>\n                              ${this.options?.scales?.y?.title?.text ||\n                              'Y Axis'}\n                            </th>\n                            <th>\n                              ${this.options?.scales?.x?.title?.text ||\n                              'X Axis'}\n                            </th>\n                            ${this.datasets.map(\n                              (dataset) => html`<th>${dataset.label}</th>`\n                            )}\n                          </tr>\n                        </thead>\n                        <tbody>\n                          ${this.datasets[0].data.map((cell: any) => {\n                            const xLabel = Array.isArray(this.labels)\n                              ? this.labels[cell.x - 1] || ''\n                              : (this.labels as any).x?.[cell.x - 1] || '';\n                            const yLabel = Array.isArray(this.labels)\n                              ? this.labels[cell.y - 1] || ''\n                              : (this.labels as any).y?.[cell.y - 1] || '';\n                            return html`\n                              <tr>\n                                <td>${yLabel}</td>\n                                <td>${xLabel}</td>\n                                ${this.datasets.map(\n                                  () => html`<td>${cell.value}</td>`\n                                )}\n                              </tr>\n                            `;\n                          })}\n                        </tbody>\n                      `\n                    : html`\n                        <thead>\n                          <tr>\n                            ${this.labels?.length || this.type === 'treemap'\n                              ? html`<th>${this.getTableAxisLabel()}</th>`\n                              : null}\n                            ${this.datasets.map(\n                              (dataset) => html`<th>${dataset.label}</th>`\n                            )}\n                          </tr>\n                        </thead>\n                        <tbody>\n                          ${this.type === 'treemap'\n                            ? Array.isArray(this.datasets[0].tree)\n                              ? this.datasets[0].tree.map(\n                                  (_value: any) => html`\n                                    <tr>\n                                      <td>\n                                        ${_value[this.datasets[0].labelKey]}\n                                      </td>\n                                      <td>${_value[this.datasets[0].key]}</td>\n                                    </tr>\n                                  `\n                                )\n                              : Object.entries(this.datasets[0].tree).map(\n                                  (_value: any) => {\n                                    const HtmlStrings = [];\n                                    if (_value[1].value) {\n                                      HtmlStrings.push(html`\n                                        <tr>\n                                          <td>${_value[0]}</td>\n                                          <td>${_value[1].value}</td>\n                                        </tr>\n                                      `);\n                                    } else {\n                                      Object.entries(_value[1]).map(\n                                        (_subValue: any) => {\n                                          if (_subValue[1].value) {\n                                            HtmlStrings.push(html`\n                                              <tr>\n                                                <td>${_subValue[0]}</td>\n                                                <td>${_subValue[1].value}</td>\n                                              </tr>\n                                            `);\n                                          } else {\n                                            Object.entries(_subValue[1]).map(\n                                              (_subSubValue: any) => {\n                                                HtmlStrings.push(html`\n                                                  <tr>\n                                                    <td>${_subSubValue[0]}</td>\n                                                    <td>\n                                                      ${_subSubValue[1].value}\n                                                    </td>\n                                                  </tr>\n                                                `);\n                                              }\n                                            );\n                                          }\n                                        }\n                                      );\n                                    }\n                                    return HtmlStrings;\n                                  }\n                                )\n                            : this.datasets[0].data.map(\n                                (_value: any, i: number) => {\n                                  const IndexAxis =\n                                    this.options.indexAxis || 'x';\n                                  const NonIndexAxis =\n                                    IndexAxis === 'x' ? 'y' : 'x';\n                                  return html`\n                                    <tr>\n                                      ${this.labels.length\n                                        ? html`\n                                            ${this.options?.scales[IndexAxis]\n                                              ?.type === 'time'\n                                              ? html`\n                                                  <td>\n                                                    ${new Date(\n                                                      this.labels[i]\n                                                    ).toLocaleString()}\n                                                  </td>\n                                                `\n                                              : html`\n                                                  <td>${this.labels[i]}</td>\n                                                `}\n                                          `\n                                        : null}\n                                      ${this.datasets.map((dataset) => {\n                                        const dataPoint = dataset.data[i];\n                                        if (\n                                          this.type === 'bubbleMap' ||\n                                          this.type === 'choropleth'\n                                        ) {\n                                          return html`\n                                            <td>${dataset.data[i].value}</td>\n                                          `;\n                                        } else if (\n                                          this.options?.scales[NonIndexAxis]\n                                            ?.type === 'time'\n                                        ) {\n                                          return html`\n                                            <td>\n                                              ${new Date(\n                                                dataPoint\n                                              ).toLocaleString()}\n                                            </td>\n                                          `;\n                                        } else if (Array.isArray(dataPoint)) {\n                                          return html`\n                                            <td>\n                                              ${dataPoint[0]}, ${dataPoint[1]}\n                                            </td>\n                                          `;\n                                        } else if (\n                                          typeof dataPoint === 'object' &&\n                                          !Array.isArray(dataPoint) &&\n                                          dataPoint !== null\n                                        ) {\n                                          return html`\n                                            <td>\n                                              ${Object.keys(dataPoint).map(\n                                                (key) => {\n                                                  const Label =\n                                                    this.options.scales[key]\n                                                      ?.title?.text || key;\n                                                  const DisplayData =\n                                                    this.options.scales[key]\n                                                      ?.type === 'time'\n                                                      ? new Date(\n                                                          dataPoint[key]\n                                                        ).toLocaleString()\n                                                      : dataPoint[key];\n                                                  return html`\n                                                    <div>\n                                                      <strong>\n                                                        ${Label}:\n                                                      </strong>\n                                                      ${DisplayData}\n                                                    </div>\n                                                  `;\n                                                }\n                                              )}\n                                            </td>\n                                          `;\n                                        } else {\n                                          return html`\n                                            <td>${dataset.data[i]}</td>\n                                          `;\n                                        }\n                                      })}\n                                    </tr>\n                                  `;\n                                }\n                              )}\n                        </tbody>\n                      `}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private _resizeChart() {\n    if (this.chart) {\n      this.chart.resize();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this._themeObserver.observe(\n      document.querySelector('meta[name=\"color-scheme\"]'),\n      { attributes: true }\n    );\n  }\n\n  override disconnectedCallback() {\n    this._resizeObserver.disconnect();\n    this._themeObserver.disconnect();\n\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated() {\n    const el = this.shadowRoot?.querySelector('.canvas-container');\n    this._resizeObserver.observe(el);\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      for (const dataset of this.datasets) {\n        hasData =\n          dataset.data?.length > 0 ||\n          dataset.tree?.length > 0 ||\n          (dataset.tree && Object.keys(dataset.tree).length > 0);\n\n        if (!hasData) {\n          console.error('Missing data for one or more chart datasets.');\n          break;\n        }\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 = getTokenThemeVal('--kd-color-text-level-primary');\n\n    // let plugins = [\n    //   canvasBackgroundPlugin,\n    //   doughnutLabelPlugin,\n    //   meterGaugePlugin,\n    //   ...this.plugins,\n    // ];\n\n    // Select plugin when type='meter'. Otherwise both plugins (meterGaugePlugin & doughnutLabelPlugin) are called\n    const pluginSelectForDoghnutMeter =\n      this.type === 'meter' ? meterGaugePlugin : doughnutLabelPlugin;\n\n    let plugins = [\n      canvasBackgroundPlugin,\n      pluginSelectForDoghnutMeter,\n      gradientLegendPlugin,\n      ...this.plugins,\n    ];\n\n    // only add certain plugins for standard chart types\n    if (!ignoredTypes.includes(this.type)) {\n      // plugins = [...plugins, a11yPlugin, musicPlugin];\n      plugins = [...plugins, a11yPlugin];\n    }\n\n    if (this.chart) {\n      this.chart.destroy();\n    }\n\n    this.chart = new Chart(this.canvas, {\n      //type: this.type,\n      type: this.type === 'meter' ? 'doughnut' : 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', 'meter'];\n    const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n\n    const additionalTypeImports: any = [];\n    this.datasets.forEach((dataset) => {\n      // get chart types from datasets so we can import additional configs\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: any = [];\n    this.tableDisabled = blacklist.includes(this.type);\n  }\n\n  private handleDownloadImage(e: Event, jpeg: boolean) {\n    e.preventDefault();\n\n    // add bg color to canvas\n    const context: any = this.canvas.getContext('2d');\n    const color = getTokenThemeVal('--kd-color-background-page-default');\n    context.save();\n    context.globalCompositeOperation = 'destination-over';\n    context.fillStyle = color;\n    context.fillRect(0, 0, this.canvas.width, this.canvas.height);\n\n    // set image format\n    const imgFormat = jpeg ? 'image/jpeg' : 'image/png';\n    const fileExt = jpeg ? 'jpg' : 'png';\n\n    // create a fake link to download the image\n    const a = document.createElement('a');\n    a.href = this.chart.toBase64Image(imgFormat, 1);\n    a.download = this.chartTitle + '.' + fileExt;\n\n    // trigger the download\n    a.click();\n\n    // remove canvas bg color\n    context.restore();\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","MatrixController","MatrixElement","annotationPlugin","datalabelsPlugin","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","_widget","_resizeObserver","ResizeObserver","debounce","_resizeChart","_themeObserver","MutationObserver","mergeOptions","then","initChart","render","Classes","container","widget","html","classMap","handleFullscreenChange","handleViewToggle","unsafeSVG","chartIcon","tableIcon","handleFullscreen","minimizeIcon","maximizeIcon","downloadIcon","e","handleDownloadCsv","handleDownloadImage","_d","_c","_b","_a","scales","y","title","text","_h","_g","_f","_e","x","datasets","map","dataset","label","data","cell","xLabel","Array","isArray","labels","yLabel","value","_j","length","getTableAxisLabel","tree","_value","labelKey","key","Object","entries","HtmlStrings","push","_subValue","_subSubValue","i","IndexAxis","indexAxis","NonIndexAxis","Date","toLocaleString","dataPoint","keys","Label","DisplayData","resize","connectedCallback","super","observe","document","querySelector","attributes","disconnectedCallback","disconnect","firstUpdated","el","shadowRoot","updated","changedProps","has","forEach","index","find","newDataset","splice","OldDataset","oldDataset","update","hasData","console","error","checkType","defaults","color","getTokenThemeVal","pluginSelectForDoghnutMeter","meterGaugePlugin","doughnutLabelPlugin","canvasBackgroundPlugin","gradientLegendPlugin","includes","a11yPlugin","destroy","canvas","additionalTypeImports","__variableDynamicImportRuntime0__","chartTypeConfigs","Promise","all","__variableDynamicImportRuntime1__","globalOptions","deepmerge","globalOptionsRadial","globalOptionsNonRadial","JSON","parse","stringify","chartTypeConfig","datasetOptions","customDeepmerge","deepmergeCustom","mergeArrays","_k","_l","jpeg","preventDefault","context","getContext","save","globalCompositeOperation","fillStyle","fillRect","imgFormat","fileExt","a","createElement","href","toBase64Image","download","click","restore","csv","convertChartDataToCSV","filename","match","encodeURI","link","setAttribute","body","appendChild","removeChild","fullscreenElement","exitFullscreen","requestFullscreen","styles","ChartScss","__decorate","property","String","prototype","Number","Boolean","state","query","customElement"],"mappings":"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"}
+{"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 { classMap } from 'lit/directives/class-map.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 { MatrixController, MatrixElement } from 'chartjs-chart-matrix';\nimport canvasBackgroundPlugin from '../../common/plugins/canvasBackground';\nimport doughnutLabelPlugin from '../../common/plugins/doughnutLabel';\nimport meterGaugePlugin from '../../common/plugins/meterGaugeNeedle';\nimport gradientLegendPlugin from '../../common/plugins/gradientLegend';\nimport { renderHTMLLegend } from '../../common/legend';\nimport a11yPlugin from 'chartjs-plugin-a11y-legend';\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 chartIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/analytics.svg';\nimport tableIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/table-view.svg';\nimport downloadIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/download.svg';\nimport maximizeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/expand.svg';\nimport minimizeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/shrink.svg';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { getTokenThemeVal } from '@kyndryl-design-system/shidoka-foundation/common/helpers/color';\n\nChart.register(\n  ChoroplethController,\n  BubbleMapController,\n  GeoFeature,\n  ColorScale,\n  SizeScale,\n  ProjectionScale,\n  TreemapController,\n  TreemapElement,\n  MatrixController,\n  MatrixElement,\n  annotationPlugin,\n  datalabelsPlugin\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 * @slot tooltip - Slot for tooltip in header.\n * @slot draghandle - Slot for widget drag handle.\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  /** Use HTML legend instead of Chart.js built-in canvas legend.\n   * @public\n   */\n  @property({ type: Boolean })\n  useHtmlLegend = false;\n\n  /** Max height for HTML legend scroll container (px). */\n  @property({ type: Number, reflect: true })\n  htmlLegendMaxHeight = 100;\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  /** Is Widget. Inherited from kyn-widget.\n   * @internal\n   */\n  @state()\n  _widget = false;\n\n  /** ResizeObserver for canvas-container.\n   * @internal\n   */\n  _resizeObserver: any = new ResizeObserver(\n    debounce(() => {\n      this._resizeChart();\n    })\n  );\n\n  _themeObserver: any = new MutationObserver(() => {\n    if (this.chart) {\n      this.mergeOptions().then(() => {\n        this.initChart();\n      });\n    }\n  });\n\n  override render() {\n    const Classes = {\n      container: true,\n      fullscreen: this.fullscreen,\n      'no-border': this.noBorder || this._widget,\n      widget: this._widget,\n    };\n\n    return html`\n      <div\n        class=${classMap(Classes)}\n        @fullscreenchange=${() => this.handleFullscreenChange()}\n      >\n        ${!this.hideHeader || !this.hideControls\n          ? html`\n              <div class=\"header\">\n                ${!this.hideHeader\n                  ? html`\n                      <slot name=\"draghandle\"></slot>\n\n                      <div id=\"titleDesc\">\n                        <div class=\"title\">\n                          ${this.chartTitle}\n                          <slot name=\"tooltip\"></slot>\n                        </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                                class=\"control-button\"\n                                @click=${() => this.handleViewToggle()}\n                                aria-label=${this.customLabels.toggleView}\n                                title=${this.customLabels.toggleView}\n                              >\n                                <span slot=\"icon\">\n                                  ${this.tableView\n                                    ? unsafeSVG(chartIcon)\n                                    : unsafeSVG(tableIcon)}\n                                </span>\n                              </button>\n                            `\n                          : null}\n\n                        <button\n                          class=\"control-button\"\n                          @click=${() => this.handleFullscreen()}\n                          aria-label=${this.customLabels.toggleFullscreen}\n                          title=${this.customLabels.toggleFullscreen}\n                        >\n                          <span slot=\"icon\">\n                            ${this.fullscreen\n                              ? unsafeSVG(minimizeIcon)\n                              : unsafeSVG(maximizeIcon)}\n                          </span>\n                        </button>\n\n                        <div class=\"download\">\n                          <button\n                            tabindex=\"0\"\n                            class=\"control-button\"\n                            aria-label=${this.customLabels.downloadMenu}\n                            title=${this.customLabels.downloadMenu}\n                          >\n                            <span slot=\"icon\">\n                              ${unsafeSVG(downloadIcon)}\n                            </span>\n                          </button>\n\n                          <div class=\"download-menu\">\n                            ${!this.tableDisabled\n                              ? html`\n                                  <button\n                                    tabindex=\"0\"\n                                    @click=${(e: Event) =>\n                                      this.handleDownloadCsv(e)}\n                                  >\n                                    ${this.customLabels.downloadCsv}\n                                  </button>\n                                `\n                              : null}\n                            <button\n                              tabindex=\"0\"\n                              @click=${(e: Event) =>\n                                this.handleDownloadImage(e, false)}\n                            >\n                              ${this.customLabels.downloadPng}\n                            </button>\n                            <button\n                              tabindex=\"0\"\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        <div>\n          <slot></slot>\n        </div>\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\n          <div\n            class=\"html-legend-container\"\n            ?hidden=${!this.useHtmlLegend}\n          ></div>\n        </figure>\n\n        ${!this.tableDisabled && this.tableView\n          ? html`\n              <div class=\"table\">\n                <table>\n                  ${['pie', 'doughnut', 'polarArea'].includes(this.type)\n                    ? html`\n                        <thead>\n                          <tr>\n                            <th>Label</th>\n                            <th>Value</th>\n                          </tr>\n                        </thead>\n                        <tbody>\n                          ${this.labels.map(\n                            (label, i) => html`\n                              <tr>\n                                <td>${label}</td>\n                                <td>${this.datasets[0].data[i]}</td>\n                              </tr>\n                            `\n                          )}\n                        </tbody>\n                      `\n                    : this.type === 'matrix'\n                    ? html`\n                        <thead>\n                          <tr>\n                            <th>\n                              ${this.options?.scales?.y?.title?.text ||\n                              'Y Axis'}\n                            </th>\n                            <th>\n                              ${this.options?.scales?.x?.title?.text ||\n                              'X Axis'}\n                            </th>\n                            ${this.datasets.map(\n                              (dataset) => html`<th>${dataset.label}</th>`\n                            )}\n                          </tr>\n                        </thead>\n                        <tbody>\n                          ${this.datasets[0].data.map((cell: any) => {\n                            const xLabel = Array.isArray(this.labels)\n                              ? this.labels[cell.x - 1] || ''\n                              : (this.labels as any).x?.[cell.x - 1] || '';\n                            const yLabel = Array.isArray(this.labels)\n                              ? this.labels[cell.y - 1] || ''\n                              : (this.labels as any).y?.[cell.y - 1] || '';\n                            return html`\n                              <tr>\n                                <td>${yLabel}</td>\n                                <td>${xLabel}</td>\n                                ${this.datasets.map(\n                                  () => html`<td>${cell.value}</td>`\n                                )}\n                              </tr>\n                            `;\n                          })}\n                        </tbody>\n                      `\n                    : html`\n                        <thead>\n                          <tr>\n                            ${this.labels?.length || this.type === 'treemap'\n                              ? html`<th>${this.getTableAxisLabel()}</th>`\n                              : null}\n                            ${this.datasets.map(\n                              (dataset) => html`<th>${dataset.label}</th>`\n                            )}\n                          </tr>\n                        </thead>\n                        <tbody>\n                          ${this.type === 'treemap'\n                            ? Array.isArray(this.datasets[0].tree)\n                              ? this.datasets[0].tree.map(\n                                  (_value: any) => html`\n                                    <tr>\n                                      <td>\n                                        ${_value[this.datasets[0].labelKey]}\n                                      </td>\n                                      <td>${_value[this.datasets[0].key]}</td>\n                                    </tr>\n                                  `\n                                )\n                              : Object.entries(this.datasets[0].tree).map(\n                                  (_value: any) => {\n                                    const HtmlStrings = [];\n                                    if (_value[1].value) {\n                                      HtmlStrings.push(html`\n                                        <tr>\n                                          <td>${_value[0]}</td>\n                                          <td>${_value[1].value}</td>\n                                        </tr>\n                                      `);\n                                    } else {\n                                      Object.entries(_value[1]).map(\n                                        (_subValue: any) => {\n                                          if (_subValue[1].value) {\n                                            HtmlStrings.push(html`\n                                              <tr>\n                                                <td>${_subValue[0]}</td>\n                                                <td>${_subValue[1].value}</td>\n                                              </tr>\n                                            `);\n                                          } else {\n                                            Object.entries(_subValue[1]).map(\n                                              (_subSubValue: any) => {\n                                                HtmlStrings.push(html`\n                                                  <tr>\n                                                    <td>${_subSubValue[0]}</td>\n                                                    <td>\n                                                      ${_subSubValue[1].value}\n                                                    </td>\n                                                  </tr>\n                                                `);\n                                              }\n                                            );\n                                          }\n                                        }\n                                      );\n                                    }\n                                    return HtmlStrings;\n                                  }\n                                )\n                            : this.datasets[0].data.map(\n                                (_value: any, i: number) => {\n                                  const IndexAxis =\n                                    this.options.indexAxis || 'x';\n                                  const NonIndexAxis =\n                                    IndexAxis === 'x' ? 'y' : 'x';\n                                  return html`\n                                    <tr>\n                                      ${this.labels?.length\n                                        ? html`\n                                            ${this.options?.scales?.[IndexAxis]\n                                              ?.type === 'time'\n                                              ? html`\n                                                  <td>\n                                                    ${new Date(\n                                                      this.labels[i]\n                                                    ).toLocaleString()}\n                                                  </td>\n                                                `\n                                              : html`\n                                                  <td>${this.labels[i]}</td>\n                                                `}\n                                          `\n                                        : null}\n                                      ${this.datasets.map((dataset) => {\n                                        if (i >= dataset.data.length)\n                                          return html`<td></td>`;\n\n                                        const dataPoint = dataset.data[i];\n                                        if (\n                                          this.type === 'bubbleMap' ||\n                                          this.type === 'choropleth'\n                                        ) {\n                                          return html`\n                                            <td>${dataset.data[i].value}</td>\n                                          `;\n                                        } else if (\n                                          this.options?.scales[NonIndexAxis]\n                                            ?.type === 'time'\n                                        ) {\n                                          return html`\n                                            <td>\n                                              ${new Date(\n                                                dataPoint\n                                              ).toLocaleString()}\n                                            </td>\n                                          `;\n                                        } else if (Array.isArray(dataPoint)) {\n                                          return html`\n                                            <td>\n                                              ${dataPoint[0]}, ${dataPoint[1]}\n                                            </td>\n                                          `;\n                                        } else if (\n                                          [\n                                            'pie',\n                                            'doughnut',\n                                            'polarArea',\n                                          ].includes(this.type)\n                                        ) {\n                                          return html` <td>${dataPoint}</td> `;\n                                        } else if (\n                                          typeof dataPoint === 'object' &&\n                                          !Array.isArray(dataPoint) &&\n                                          dataPoint !== null\n                                        ) {\n                                          return html`\n                                            <td>\n                                              ${Object.keys(dataPoint).map(\n                                                (key) => {\n                                                  const Label =\n                                                    this.options?.scales?.[key]\n                                                      ?.title?.text || key;\n                                                  const DisplayData =\n                                                    this.options?.scales?.[key]\n                                                      ?.type === 'time' &&\n                                                    dataPoint[key]\n                                                      ? new Date(\n                                                          dataPoint[key]\n                                                        ).toLocaleString()\n                                                      : dataPoint[key];\n                                                  return html`\n                                                    <div>\n                                                      <strong>\n                                                        ${Label}:\n                                                      </strong>\n                                                      ${DisplayData}\n                                                    </div>\n                                                  `;\n                                                }\n                                              )}\n                                            </td>\n                                          `;\n                                        } else {\n                                          return html`\n                                            <td>${dataset.data[i]}</td>\n                                          `;\n                                        }\n                                      })}\n                                    </tr>\n                                  `;\n                                }\n                              )}\n                        </tbody>\n                      `}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private _resizeChart() {\n    if (this.chart) {\n      this.chart.resize();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this._themeObserver.observe(\n      document.querySelector('meta[name=\"color-scheme\"]'),\n      { attributes: true }\n    );\n  }\n\n  override disconnectedCallback() {\n    this._resizeObserver.disconnect();\n    this._themeObserver.disconnect();\n\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated() {\n    const el = this.shadowRoot?.querySelector('.canvas-container');\n    this._resizeObserver.observe(el);\n  }\n\n  private generateScrollableLegend() {\n    if (!this.chart || !this.useHtmlLegend) return;\n\n    const legendContainer = this.shadowRoot?.querySelector(\n      '.html-legend-container'\n    );\n    if (!legendContainer) return;\n\n    const legendOptions = this.mergedOptions.plugins.customLegend;\n\n    renderHTMLLegend(this.chart, legendContainer as HTMLElement, {\n      maxHeight: this.htmlLegendMaxHeight,\n      boxWidth: legendOptions?.boxWidth || 16,\n      boxHeight: legendOptions?.boxHeight || 16,\n      borderRadius: legendOptions?.borderRadius || 2,\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        this.generateScrollableLegend();\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      for (const dataset of this.datasets) {\n        hasData =\n          dataset.data?.length > 0 ||\n          dataset.tree?.length > 0 ||\n          (dataset.tree && Object.keys(dataset.tree).length > 0);\n\n        if (!hasData) {\n          console.error('Missing data for one or more chart datasets.');\n          break;\n        }\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, height, or useHtmlLegend change.\n    if (\n      this.chart &&\n      (changedProps.has('type') ||\n        changedProps.has('plugins') ||\n        changedProps.has('width') ||\n        changedProps.has('height') ||\n        changedProps.has('useHtmlLegend'))\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    // Configure chart options\n    Chart.defaults.color = getTokenThemeVal('--kd-color-text-level-primary');\n\n    // We already handled legend config in mergeOptions\n\n    // Select plugin when type='meter'. Otherwise both plugins (meterGaugePlugin & doughnutLabelPlugin) are called\n    const pluginSelectForDoghnutMeter =\n      this.type === 'meter' ? meterGaugePlugin : doughnutLabelPlugin;\n\n    let plugins = [\n      canvasBackgroundPlugin,\n      pluginSelectForDoghnutMeter,\n      gradientLegendPlugin,\n      ...this.plugins,\n    ];\n\n    // only add certain plugins for standard chart types\n    if (!ignoredTypes.includes(this.type)) {\n      // plugins = [...plugins, a11yPlugin, musicPlugin];\n      plugins = [...plugins, a11yPlugin];\n    }\n\n    if (this.chart) {\n      this.chart.destroy();\n    }\n\n    this.chart = new Chart(this.canvas, {\n      //type: this.type,\n      type: this.type === 'meter' ? 'doughnut' : this.type,\n      data: {\n        labels: this.labels,\n        datasets: this.mergedDatasets,\n      },\n      options: this.mergedOptions,\n      plugins: plugins,\n    });\n\n    this.generateScrollableLegend();\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', 'meter'];\n    const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n\n    const additionalTypeImports: any = [];\n    this.datasets.forEach((dataset) => {\n      // get chart types from datasets so we can import additional configs\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    // Configure legend display based on useHtmlLegend property\n    if (!this.useHtmlLegend) {\n      // Enable built-in Chart.js legend when HTML legend is disabled\n      mergedOptions.plugins = mergedOptions.plugins || {};\n      mergedOptions.plugins.legend = mergedOptions.plugins.legend || {};\n      mergedOptions.plugins.legend.display = true;\n\n      // Disable customLegend options when using built-in legend\n      if (mergedOptions.plugins.customLegend) {\n        mergedOptions.plugins.customLegend.display = false;\n      }\n    }\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: any = [];\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\n    if (this.useHtmlLegend && this.chart) {\n      if (['doughnut', 'pie'].includes(this.type)) {\n        this.exportSimpleCanvasOnly(imgFormat, fileExt);\n        return;\n      }\n\n      const originalConfig = {\n        options: JSON.parse(JSON.stringify(this.chart.options)),\n        data: JSON.parse(JSON.stringify(this.chart.data)),\n        type: this.chart.config.type,\n      };\n\n      const originalHidden = this.chart.data.datasets.map(\n        (_: unknown, i: number) => this.chart.getDatasetMeta(i).hidden\n      );\n\n      try {\n        if (!this.chart.options.plugins) {\n          this.chart.options.plugins = {};\n        }\n\n        if (!this.chart.options.plugins.legend) {\n          this.chart.options.plugins.legend = {};\n        }\n\n        this.chart.options.plugins.legend.display = true;\n        this.chart.options.plugins.legend.position = 'bottom';\n        this.chart.options.plugins.legend.labels = {\n          boxWidth: 12,\n          boxHeight: 12,\n          padding: 10,\n          font: {\n            size: 12,\n          },\n        };\n\n        if (!this.chart.options.layout) {\n          this.chart.options.layout = { padding: { bottom: 40 } };\n        } else if (!this.chart.options.layout.padding) {\n          this.chart.options.layout.padding = { bottom: 40 };\n        } else if (typeof this.chart.options.layout.padding === 'number') {\n          this.chart.options.layout.padding = {\n            top: this.chart.options.layout.padding,\n            right: this.chart.options.layout.padding,\n            bottom: Math.max(this.chart.options.layout.padding, 40),\n            left: this.chart.options.layout.padding,\n          };\n        } else if (this.chart.options.layout.padding) {\n          this.chart.options.layout.padding.bottom = Math.max(\n            this.chart.options.layout.padding.bottom || 0,\n            40\n          );\n        }\n\n        this.chart.update('none');\n\n        const context = this.canvas.getContext('2d');\n        if (!context) throw new Error('Could not get canvas context');\n\n        const color = getTokenThemeVal('--kd-color-background-page-default');\n        context.save();\n        context.globalCompositeOperation = 'destination-over';\n        context.fillStyle = color;\n        context.fillRect(0, 0, this.canvas.width, this.canvas.height);\n\n        const imgData = this.chart.toBase64Image(imgFormat, 1);\n\n        const a = document.createElement('a');\n        a.href = imgData;\n        a.download = this.chartTitle + '.' + fileExt;\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n\n        context.restore();\n        this.chart.options = originalConfig.options;\n        originalHidden.forEach((hidden: boolean, i: number) => {\n          this.chart.getDatasetMeta(i).hidden = hidden;\n        });\n        this.chart.update();\n      } catch (error) {\n        console.error('Error exporting chart with legend:', error);\n        this.exportCanvasOnly(imgFormat, fileExt);\n      }\n    } else {\n      this.exportCanvasOnly(imgFormat, fileExt);\n    }\n  }\n\n  private exportCanvasOnly(imgFormat: string, fileExt: string) {\n    const context = this.canvas.getContext('2d');\n    if (!context || !this.chart) return;\n\n    const color = getTokenThemeVal('--kd-color-background-page-default');\n    context.save();\n    context.globalCompositeOperation = 'destination-over';\n    context.fillStyle = color;\n    context.fillRect(0, 0, this.canvas.width, this.canvas.height);\n\n    const a = document.createElement('a');\n    a.href = this.chart.toBase64Image(imgFormat, 1);\n    a.download = this.chartTitle + '.' + fileExt;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n\n    context.restore();\n  }\n\n  private exportSimpleCanvasOnly(imgFormat: string, fileExt: string) {\n    const context = this.canvas.getContext('2d');\n    if (!context || !this.chart) return;\n\n    try {\n      const originalOptions = JSON.parse(JSON.stringify(this.chart.options));\n\n      context.save();\n      const color = getTokenThemeVal('--kd-color-background-page-default');\n      context.globalCompositeOperation = 'destination-over';\n      context.fillStyle = color;\n      context.fillRect(0, 0, this.canvas.width, this.canvas.height);\n\n      this.chart.options = {\n        ...this.chart.options,\n        plugins: {\n          legend: {\n            display: true,\n            position: 'bottom',\n            labels: {\n              boxWidth: 12,\n              boxHeight: 12,\n              padding: 10,\n              font: { size: 12 },\n            },\n          },\n          datalabels: { display: false, formatter: null },\n          tooltip: { enabled: false },\n          doughnutLabel: { enabled: false },\n        },\n        layout: {\n          padding: { bottom: 40 },\n        },\n      };\n\n      this.chart.update('none');\n\n      const imgData = this.chart.toBase64Image(imgFormat, 1);\n\n      const a = document.createElement('a');\n      a.href = imgData;\n      a.download = this.chartTitle + '.' + fileExt;\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n\n      context.restore();\n      this.chart.options = originalOptions;\n      this.chart.update();\n    } catch (error) {\n      console.error('Error in exportSimpleCanvasOnly:', error);\n      this.exportCanvasOnly(imgFormat, fileExt);\n    }\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","MatrixController","MatrixElement","annotationPlugin","datalabelsPlugin","KDChart","LitElement","constructor","this","chartTitle","description","type","options","plugins","height","width","hideDescription","hideCaptions","hideHeader","hideControls","noBorder","customLabels","toggleView","toggleFullscreen","downloadMenu","downloadCsv","downloadPng","downloadJpg","fullscreen","useHtmlLegend","htmlLegendMaxHeight","chart","tableView","tableDisabled","mergedOptions","mergedDatasets","_widget","_resizeObserver","ResizeObserver","debounce","_resizeChart","_themeObserver","MutationObserver","mergeOptions","then","initChart","render","Classes","container","widget","html","classMap","handleFullscreenChange","handleViewToggle","unsafeSVG","chartIcon","tableIcon","handleFullscreen","minimizeIcon","maximizeIcon","downloadIcon","e","handleDownloadCsv","handleDownloadImage","includes","labels","map","label","i","datasets","data","_d","_c","_b","_a","scales","y","title","text","_h","_g","_f","_e","x","dataset","cell","xLabel","Array","isArray","yLabel","value","_j","length","getTableAxisLabel","tree","_value","labelKey","key","Object","entries","HtmlStrings","push","_subValue","_subSubValue","IndexAxis","indexAxis","NonIndexAxis","Date","toLocaleString","dataPoint","keys","Label","DisplayData","resize","connectedCallback","super","observe","document","querySelector","attributes","disconnectedCallback","disconnect","firstUpdated","el","shadowRoot","generateScrollableLegend","legendContainer","legendOptions","customLegend","renderHTMLLegend","maxHeight","boxWidth","boxHeight","borderRadius","updated","changedProps","has","forEach","index","find","newDataset","splice","OldDataset","oldDataset","update","hasData","console","error","checkType","defaults","color","getTokenThemeVal","pluginSelectForDoghnutMeter","meterGaugePlugin","doughnutLabelPlugin","canvasBackgroundPlugin","gradientLegendPlugin","a11yPlugin","destroy","canvas","additionalTypeImports","__variableDynamicImportRuntime0__","chartTypeConfigs","Promise","all","__variableDynamicImportRuntime1__","globalOptions","legend","display","deepmerge","globalOptionsRadial","globalOptionsNonRadial","JSON","parse","stringify","chartTypeConfig","datasetOptions","customDeepmerge","deepmergeCustom","mergeArrays","_k","_l","jpeg","preventDefault","imgFormat","fileExt","exportSimpleCanvasOnly","originalConfig","config","originalHidden","_","getDatasetMeta","hidden","position","padding","font","size","layout","top","right","bottom","Math","max","left","context","getContext","Error","save","globalCompositeOperation","fillStyle","fillRect","imgData","toBase64Image","a","createElement","href","download","body","appendChild","click","removeChild","restore","exportCanvasOnly","originalOptions","datalabels","formatter","tooltip","enabled","doughnutLabel","csv","convertChartDataToCSV","filename","match","encodeURI","link","setAttribute","fullscreenElement","exitFullscreen","requestFullscreen","styles","ChartScss","__decorate","property","String","prototype","Number","Boolean","state","reflect","query","customElement"],"mappings":"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"}

package/components/chart/chart.scss.js

@@ -119,7 +119,8 @@ figure.hidden {
 }
 
 canvas:focus-visible,
-div:focus-visible {
+div:focus-visible,
+.scrollable-legend:focus-visible {
   border-radius: 4px;
   outline: 2px solid var(--kd-color-border-variants-focus);
 }

package/components/chart/chart.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"chart.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-charts",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Shidoka Charts",
   "license": "MIT",
   "main": "index.js",
@@ -84,6 +84,7 @@
     "css-loader": "^6.7.3",
     "eslint": "^8.31.0",
     "eslint-plugin-storybook": "^0.11.3",
+    "html2canvas": "^1.4.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "lit-analyzer": "^2.0.3",