@kyndryl-design-system/shidoka-charts 1.0.0-beta.1

package/README.md

@@ -0,0 +1,70 @@
+# Shidoka Web Components for Applications
+
+[![shidoka-charts](https://github.com/kyndryl-design-system/shidoka-charts/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/shidoka-charts/actions/workflows/actions.yml)
+
+# Contributing to this project
+
+Read the [Contributing Guide](https://github.com/kyndryl-design-system/shidoka-charts/blob/beta/CONTRIBUTING.md) here.
+
+# Using this library in another project
+
+## Install the package
+
+```bash
+# stable/main
+npm install @kyndryl-design-system/shidoka-charts -S
+
+# beta (use until first stable release)
+npm install @kyndryl-design-system/shidoka-charts@beta -S
+# when using beta, lock the version, as breaking changes can happen at any time
+```
+
+## Import the root stylesheet to your app's global styles
+
+The method used (SCSS @use, CSS @import, JS import, or <style> tag) will vary based on your framework/bundler. Some examples:
+
+### SCSS
+
+```css
+@use '~@kyndryl-design-system/shidoka-foundation/scss/root.scss';
+```
+
+### CSS
+
+```css
+@import '@kyndryl-design-system/shidoka-foundation/css/root.css';
+```
+
+### JS
+
+```js
+import '@kyndryl-design-system/shidoka-foundation/css/root.css';
+```
+
+## Start using components
+
+See [Storybook](https://kyndryl-design-system.github.io/shidoka-charts/) for the full components documentation.
+
+### Example
+
+```js
+import '@kyndryl-design-system/shidoka-charts/components/chart';
+```
+
+```html
+<kd-chart></kd-chart>
+```
+
+### React usage
+
+React does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.
+
+Some options for React wrapper libraries:
+
+1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)
+2. [wc-react](https://www.npmjs.com/package/wc-react)
+3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)
+
+### Server-Side Rendering (SSR)
+
+When using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.

package/_virtual/_tslib.js

@@ -0,0 +1,2 @@
+function e(e,t,r,o){var c,f=arguments.length,n=f<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var l=e.length-1;l>=0;l--)(c=e[l])&&(n=(f<3?c(n):f>3?c(t,r,n):c(t,r))||n);return f>3&&n&&Object.defineProperty(t,r,n),n}export{e as __decorate};
+//# sourceMappingURL=_tslib.js.map

package/_virtual/_tslib.js.map

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

package/common/config/chartTypes/bar.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=bar.js.map

package/common/config/chartTypes/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.js","sources":["../../../../src/common/config/chartTypes/bar.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/bubble.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=bubble.js.map

package/common/config/chartTypes/bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.js","sources":["../../../../src/common/config/chartTypes/bubble.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/bubbleMap.js

@@ -0,0 +1,2 @@
+const o=o=>({backgroundColor:"#29707A",borderColor:"#29707A"}),r=o=>({});export{r as datasetOptions,o as options};
+//# sourceMappingURL=bubbleMap.js.map

package/common/config/chartTypes/bubbleMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubbleMap.js","sources":["../../../../src/common/config/chartTypes/bubbleMap.js"],"sourcesContent":["export const options = (ctx) => {\n  return {\n    backgroundColor: '#29707A',\n    borderColor: '#29707A',\n  };\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","backgroundColor","borderColor","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,CACLC,gBAAiB,UACjBC,YAAa,YAIJC,EAAkBH,IACtB"}

package/common/config/chartTypes/choropleth.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=choropleth.js.map

package/common/config/chartTypes/choropleth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choropleth.js","sources":["../../../../src/common/config/chartTypes/choropleth.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/doughnut.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=doughnut.js.map

package/common/config/chartTypes/doughnut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"doughnut.js","sources":["../../../../src/common/config/chartTypes/doughnut.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/line.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=line.js.map

package/common/config/chartTypes/line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.js","sources":["../../../../src/common/config/chartTypes/line.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/pie.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=pie.js.map

package/common/config/chartTypes/pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie.js","sources":["../../../../src/common/config/chartTypes/pie.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/polarArea.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=polarArea.js.map

package/common/config/chartTypes/polarArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polarArea.js","sources":["../../../../src/common/config/chartTypes/polarArea.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/radar.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=radar.js.map

package/common/config/chartTypes/radar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar.js","sources":["../../../../src/common/config/chartTypes/radar.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/scatter.js

@@ -0,0 +1,2 @@
+const o=o=>({}),t=o=>({});export{t as datasetOptions,o as options};
+//# sourceMappingURL=scatter.js.map

package/common/config/chartTypes/scatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter.js","sources":["../../../../src/common/config/chartTypes/scatter.js"],"sourcesContent":["export const options = (ctx) => {\n  return {};\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,IAGIC,EAAkBD,IACtB"}

package/common/config/chartTypes/treemap.js

@@ -0,0 +1,2 @@
+const o=o=>({plugins:{legend:{display:!1}},labels:{align:"left",display:!0,color:"white",hoverColor:"white",font:{size:12},position:"top",overflow:"hidden"},captions:{align:"center",display:!0,color:"white",hoverColor:"white",font:{size:14}}}),e=o=>({});export{e as datasetOptions,o as options};
+//# sourceMappingURL=treemap.js.map

package/common/config/chartTypes/treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treemap.js","sources":["../../../../src/common/config/chartTypes/treemap.js"],"sourcesContent":["export const options = (ctx) => {\n  return {\n    plugins: {\n      legend: {\n        display: false,\n      },\n    },\n    labels: {\n      align: 'left',\n      display: true,\n      color: 'white',\n      hoverColor: 'white',\n      font: { size: 12 },\n      position: 'top',\n      overflow: 'hidden',\n    },\n    captions: {\n      align: 'center',\n      display: true,\n      color: 'white',\n      hoverColor: 'white',\n      font: {\n        size: 14,\n      },\n    },\n  };\n};\n\nexport const datasetOptions = (ctx) => {\n  return {};\n};\n"],"names":["options","ctx","plugins","legend","display","labels","align","color","hoverColor","font","size","position","overflow","captions","datasetOptions"],"mappings":"AAAY,MAACA,EAAWC,IACf,CACLC,QAAS,CACPC,OAAQ,CACNC,SAAS,IAGbC,OAAQ,CACNC,MAAO,OACPF,SAAS,EACTG,MAAO,QACPC,WAAY,QACZC,KAAM,CAAEC,KAAM,IACdC,SAAU,MACVC,SAAU,UAEZC,SAAU,CACRP,MAAO,SACPF,SAAS,EACTG,MAAO,QACPC,WAAY,QACZC,KAAM,CACJC,KAAM,OAMDI,EAAkBb,IACtB"}

package/common/config/colorPalettes.js

@@ -0,0 +1,2 @@
+var F=["#FF462D","#29707A","#E4F4F1","#187E3F","#9E9287","#F2F1EE","#3D3C3C","#8D8888","#667076"];export{F as default};
+//# sourceMappingURL=colorPalettes.js.map

package/common/config/colorPalettes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPalettes.js","sources":["../../../src/common/config/colorPalettes.js"],"sourcesContent":["export default [\n  '#FF462D',\n  '#29707A',\n  '#E4F4F1',\n  '#187E3F',\n  '#9E9287',\n  '#F2F1EE',\n  '#3D3C3C',\n  '#8D8888',\n  '#667076',\n];\n"],"names":["colorPalettes"],"mappings":"AAAA,IAAeA,EAAA,CACb,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA"}

package/common/config/globalOptions.js

@@ -0,0 +1,2 @@
+const c=c=>({resizeDelay:50,plugins:{chartjs2music:{internal:{},cc:c.ccDiv}}});export{c as default};
+//# sourceMappingURL=globalOptions.js.map

package/common/config/globalOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalOptions.js","sources":["../../../src/common/config/globalOptions.js"],"sourcesContent":["const defaultConfig = (ctx) => {\n  return {\n    resizeDelay: 50, //debounce the resize\n    plugins: {\n      chartjs2music: {\n        internal: {},\n        cc: ctx.ccDiv,\n      },\n    },\n  };\n};\n\nexport default defaultConfig;\n"],"names":["defaultConfig","ctx","resizeDelay","plugins","chartjs2music","internal","cc","ccDiv"],"mappings":"AAAK,MAACA,EAAiBC,IACd,CACLC,YAAa,GACbC,QAAS,CACPC,cAAe,CACbC,SAAU,CAAE,EACZC,GAAIL,EAAIM"}

package/common/helpers/helpers.d.ts

@@ -0,0 +1,13 @@
+export declare const debounce: (fn: Function, ms?: number) => (e: Event) => void;
+export declare const stringToReactHtml: (string: String) => {
+    __html: String;
+};
+/**
+ * Convert an object to an array of only its values.
+ * Used when importing enums in component stories for populating argType dropdowns.
+ * @param {*} options
+ *  imported enums object
+ */
+export declare function createOptionsArray(options?: any): any;
+export declare function convertChartDataToCSV(args: any): string | null;
+//# sourceMappingURL=helpers.d.ts.map

package/common/helpers/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/common/helpers/helpers.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,OAAQ,QAAQ,sBAEf,KAAK,SAI1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,WAAY,MAAM;;CAE/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,GAAQ,OAQnD;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,GAAG,iBA2B9C"}

package/common/helpers/helpers.js

@@ -0,0 +1,2 @@
+function l(l){const n=l.data.data||null;if(null==n||!n.length)return null;const t=l.labels||null;if(null==t||!t.length)return null;const e=l.columnDelimiter||",",r=l.lineDelimiter||"\n";let u=""+e;u+=t.join(e),u+=r,u+=l.data.label.toString();for(let l=0;l<n.length;l++)u+=e,u+=n[l];return u+=r,u}export{l as convertChartDataToCSV};
+//# sourceMappingURL=helpers.js.map

package/common/helpers/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/common/helpers/helpers.ts"],"sourcesContent":["export const debounce = (fn: Function, ms = 100) => {\n  let timer: ReturnType<typeof setTimeout>;\n  return function (e: Event) {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn.apply(e), ms);\n  };\n};\n\nexport const stringToReactHtml = (string: String) => {\n  return { __html: string };\n};\n\n/**\n * Convert an object to an array of only its values.\n * Used when importing enums in component stories for populating argType dropdowns.\n * @param {*} options\n *  imported enums object\n */\nexport function createOptionsArray(options: any = {}) {\n  const optionsArray: any = [];\n\n  Object.keys(options).map((key) => {\n    optionsArray.push(options[key]);\n  });\n\n  return optionsArray;\n}\n\nexport function convertChartDataToCSV(args: any) {\n  const data = args.data.data || null;\n  if (data == null || !data.length) {\n    return null;\n  }\n\n  const labels = args.labels || null;\n  if (labels == null || !labels.length) {\n    return null;\n  }\n\n  const columnDelimiter = args.columnDelimiter || ',';\n  const lineDelimiter = args.lineDelimiter || '\\n';\n\n  let result = '' + columnDelimiter;\n  result += labels.join(columnDelimiter);\n  result += lineDelimiter;\n\n  result += args.data.label.toString();\n\n  for (let i = 0; i < data.length; i++) {\n    result += columnDelimiter;\n    result += data[i];\n  }\n  result += lineDelimiter;\n\n  return result;\n}\n"],"names":["convertChartDataToCSV","args","data","length","labels","columnDelimiter","lineDelimiter","result","join","label","toString","i"],"mappings":"AA4BM,SAAUA,EAAsBC,GACpC,MAAMC,EAAOD,EAAKC,KAAKA,MAAQ,KAC/B,GAAY,MAARA,IAAiBA,EAAKC,OACxB,OAAO,KAGT,MAAMC,EAASH,EAAKG,QAAU,KAC9B,GAAc,MAAVA,IAAmBA,EAAOD,OAC5B,OAAO,KAGT,MAAME,EAAkBJ,EAAKI,iBAAmB,IAC1CC,EAAgBL,EAAKK,eAAiB,KAE5C,IAAIC,EAAS,GAAKF,EAClBE,GAAUH,EAAOI,KAAKH,GACtBE,GAAUD,EAEVC,GAAUN,EAAKC,KAAKO,MAAMC,WAE1B,IAAK,IAAIC,EAAI,EAAGA,EAAIT,EAAKC,OAAQQ,IAC/BJ,GAAUF,EACVE,GAAUL,EAAKS,GAIjB,OAFAJ,GAAUD,EAEHC,CACT"}

package/components/chart/chart.d.ts

@@ -0,0 +1,85 @@
+import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
+/**
+ * Chart.js wrapper component.
+ */
+export declare class KDChart extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Chart title. */
+    chartTitle: string;
+    /** Chart description. */
+    description: string;
+    /** Chart.js chart type. Can be 'bar', 'line', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter', 'choropleth', 'bubbleMap', 'treemap'. */
+    type: any;
+    /** Chart.js data.labels. */
+    labels: Array<string>;
+    /** Chart.js data.datasets. */
+    datasets: Array<any>;
+    /** Chart.js options. Can override Shidoka defaults. */
+    options: any;
+    /** Chart.js additional plugins. Must be registerable inline via Chart.plugins array, not globally via Chart.register. */
+    plugins: any;
+    /** Hides the description visually. */
+    hideDescription: boolean;
+    /** Hides the closed captions visually. */
+    hideCaptions: boolean;
+    /**
+     * Queries the container element.
+     * @ignore
+     */
+    container: HTMLCanvasElement;
+    /**
+     * Queries the canvas element.
+     * @ignore
+     */
+    canvas: HTMLCanvasElement;
+    /**
+     * Queries the closed caption div.
+     * @ignore
+     */
+    ccDiv: HTMLDivElement;
+    /** The chart instance.
+     * @ignore
+     */
+    chart: any;
+    /** Table view mode.
+     * @ignore
+     */
+    tableView: boolean;
+    /** Disable table view feature.
+     * @ignore
+     */
+    tableDisabled: boolean;
+    /** Merged options.
+     * @ignore
+     */
+    mergedOptions: any;
+    /** Merged datasets.
+     * @ignore
+     */
+    mergedDatasets: any;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProps: any): void;
+    /**
+     * Initializes a bar chart using the Chart.js library with provided labels, datasets,
+     * and options.
+     */
+    private initChart;
+    /**
+     * Merges various chart type options and dataset options to create a
+     * final set of options for a chart.
+     */
+    private mergeOptions;
+    private getTableAxisLabel;
+    private handleViewToggle;
+    private checkType;
+    private handleDownloadImage;
+    private handleDownloadCsv;
+    private handleFullscreen;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kd-chart': KDChart;
+    }
+}
+//# sourceMappingURL=chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAqBvC,OAAO,2DAA2D,CAAC;AAmBnE;;GAEG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAa;IAEnC,mBAAmB;IAEnB,UAAU,SAAM;IAEhB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,qJAAqJ;IAErJ,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,sCAAsC;IAEtC,eAAe,UAAS;IAExB,0CAA0C;IAE1C,YAAY,UAAS;IAErB;;;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;IAEhB,MAAM;IA0IN,OAAO,CAAC,YAAY,EAAE,GAAG;IA+BlC;;;OAGG;IACH,OAAO,CAAC,SAAS;IAejB;;;OAGG;YACW,YAAY;IAqE1B,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,gBAAgB;CAOzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/components/chart/chart.js

@@ -0,0 +1,99 @@
+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 r}from'./../../external/@lit/reactive-element/decorators/query.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{deepmerge as n,deepmergeCustom as c}from'./../../external/deepmerge-ts/dist/node/index.js';import l from'./../../external/chart.js/auto/auto.js';import d from'./../../external/chartjs-plugin-deferred/dist/chartjs-plugin-deferred.esm.js';import{ChoroplethController as m,BubbleMapController as p,GeoFeature as h,ColorScale as u,SizeScale as g,ProjectionScale as y}from'./../../external/chartjs-chart-geo/build/index.js';import{TreemapController as b,TreemapElement as f}from'./../../external/chartjs-chart-treemap/dist/chartjs-chart-treemap.esm.js';import v from'./../../external/chartjs-plugin-a11y-legend/dist/plugin.js';import j from'./../../external/chartjs-plugin-chart2music/dist/plugin.js';import T from'./../../external/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js';import{convertChartDataToCSV as w}from"../../common/helpers/helpers.js";import $ from"./chart.scss.js";import k from"../../common/config/globalOptions.js";import D from"../../common/config/colorPalettes.js";import'./../../external/@kyndryl-design-system/shidoka-foundation/components/icon/icon.js';import _ from'./../../external/@carbon/icons/es/chart--line/24.js';import x from'./../../external/@carbon/icons/es/data-table/24.js';import A from'./../../external/@carbon/icons/es/overflow-menu--vertical/24.js';import O from'./../../external/@carbon/icons/es/maximize/24.js';function C(t){switch(t){case"../../common/config/chartTypes/bar.js":return import("../../common/config/chartTypes/bar.js");case"../../common/config/chartTypes/bubble.js":return import("../../common/config/chartTypes/bubble.js");case"../../common/config/chartTypes/bubbleMap.js":return import("../../common/config/chartTypes/bubbleMap.js");case"../../common/config/chartTypes/choropleth.js":return import("../../common/config/chartTypes/choropleth.js");case"../../common/config/chartTypes/doughnut.js":return import("../../common/config/chartTypes/doughnut.js");case"../../common/config/chartTypes/line.js":return import("../../common/config/chartTypes/line.js");case"../../common/config/chartTypes/pie.js":return import("../../common/config/chartTypes/pie.js");case"../../common/config/chartTypes/polarArea.js":return import("../../common/config/chartTypes/polarArea.js");case"../../common/config/chartTypes/radar.js":return import("../../common/config/chartTypes/radar.js");case"../../common/config/chartTypes/scatter.js":return import("../../common/config/chartTypes/scatter.js");case"../../common/config/chartTypes/treemap.js":return import("../../common/config/chartTypes/treemap.js");default:return new Promise((function(e,o){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(o.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}l.register(d,T,m,p,h,u,g,y,b,f);let M=class extends o{constructor(){super(...arguments),this.chartTitle="",this.description="",this.type="",this.options={},this.plugins=[],this.hideDescription=!1,this.hideCaptions=!1,this.chart=null,this.tableView=!1,this.tableDisabled=!1,this.mergedOptions={},this.mergedDatasets={}}render(){return e`
+      <div class="container">
+        <div class="header">
+          <div class="title">${this.chartTitle}</div>
+
+          <div class="controls">
+            ${this.tableDisabled?null:e`
+                  <button
+                    title="Toggle View Mode"
+                    aria-label="Toggle View Mode"
+                    class="view-toggle"
+                    @click=${()=>this.handleViewToggle()}
+                  >
+                    <kd-icon
+                      .icon=${_}
+                      class="${this.tableView?"":"active"}"
+                    ></kd-icon>
+                    <kd-icon
+                      .icon=${x}
+                      class="${this.tableView?"active":""}"
+                    ></kd-icon>
+                  </button>
+                `}
+
+            <button
+              title="Toggle Fullscreen"
+              aria-label="Toggle Fullscreen"
+              @click=${()=>this.handleFullscreen()}
+            >
+              <kd-icon .icon=${O}></kd-icon>
+            </button>
+
+            <button
+              title="Overflow Menu"
+              aria-label="Overflow Menu"
+              class="overflow-button"
+            >
+              <kd-icon .icon=${A}></kd-icon>
+
+              <div class="overflow-menu">
+                ${this.tableDisabled?null:e` <a @click=${t=>this.handleDownloadCsv(t)}>
+                      Download as CSV
+                    </a>`}
+                <a @click=${t=>this.handleDownloadImage(t,!1)}>
+                  Download as PNG
+                </a>
+                <a @click=${t=>this.handleDownloadImage(t,!0)}>
+                  Download as JPG
+                </a>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <figure class="${this.tableView?"hidden":""}">
+          <canvas role="img"></canvas>
+          <figcaption>
+            <div
+              class="closed-caption ${this.hideCaptions?"hidden-visually":""}"
+            ></div>
+            <div
+              class="description ${this.hideDescription?"hidden-visually":""}"
+            >
+              ${this.description}
+            </div>
+          </figcaption>
+        </figure>
+
+        ${!this.tableDisabled&&this.tableView?e`
+              <div class="table">
+                <table>
+                  <thead>
+                    <tr>
+                      ${this.labels.length?e`<th>${this.getTableAxisLabel()}</th>`:null}
+                      ${this.datasets.map((t=>e`<th>${t.label}</th>`))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${this.datasets[0].data.map(((t,o)=>e`
+                        <tr>
+                          ${this.labels.length?e`<td>${this.labels[o]}</td>`:null}
+                          ${this.datasets.map((t=>{const s=t.data[o];return Array.isArray(s)?e`
+                                <td>${s[0]}, ${s[1]}</td>
+                              `:"object"!=typeof s||Array.isArray(s)||null===s?e`<td>${t.data[o]}</td>`:e`
+                                <td>
+                                  ${Object.keys(s).map((t=>e`
+                                      <span>${t}: ${s[t]}</span>
+                                    `))}
+                                </td>
+                              `}))}
+                        </tr>
+                      `))}
+                  </tbody>
+                </table>
+              </div>
+            `:null}
+      </div>
+    `}updated(t){this.chart&&(t.has("labels")||t.has("datasets"))&&this.mergeOptions().then((()=>{this.chart.data.labels=this.labels,this.chart.data.datasets=this.mergedDatasets,this.chart.update()})),this.chart&&t.has("options")&&(this.chart.options=this.mergedOptions,this.chart.update()),(t.has("type")||t.has("plugins"))&&(this.chart&&this.chart.destroy(),this.mergeOptions().then((()=>{this.initChart()})),this.checkType())}initChart(){this.chart=new l(this.canvas,{type:this.type,data:{labels:this.labels,datasets:this.mergedDatasets},options:this.mergedOptions,plugins:[v,j,...this.plugins]})}async mergeOptions(){const t=[];this.datasets.forEach((e=>{e.type&&t.push(function(t){switch(t){case"../../common/config/chartTypes/bar.js":return import("../../common/config/chartTypes/bar.js");case"../../common/config/chartTypes/bubble.js":return import("../../common/config/chartTypes/bubble.js");case"../../common/config/chartTypes/bubbleMap.js":return import("../../common/config/chartTypes/bubbleMap.js");case"../../common/config/chartTypes/choropleth.js":return import("../../common/config/chartTypes/choropleth.js");case"../../common/config/chartTypes/doughnut.js":return import("../../common/config/chartTypes/doughnut.js");case"../../common/config/chartTypes/line.js":return import("../../common/config/chartTypes/line.js");case"../../common/config/chartTypes/pie.js":return import("../../common/config/chartTypes/pie.js");case"../../common/config/chartTypes/polarArea.js":return import("../../common/config/chartTypes/polarArea.js");case"../../common/config/chartTypes/radar.js":return import("../../common/config/chartTypes/radar.js");case"../../common/config/chartTypes/scatter.js":return import("../../common/config/chartTypes/scatter.js");case"../../common/config/chartTypes/treemap.js":return import("../../common/config/chartTypes/treemap.js");default:return new Promise((function(e,o){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(o.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}(`../../common/config/chartTypes/${e.type}.js`))}));const e=await Promise.all([C(`../../common/config/chartTypes/${this.type}.js`),...t]);let o=k(this);const s=JSON.parse(JSON.stringify(this.datasets));e.forEach((t=>{o=n(o,t.options(this)),s.forEach(((e,o)=>{s[o]=n(e,t.datasetOptions(this))}))})),this.options&&(o=n(o,this.options)),this.mergedOptions=o,s.forEach(((t,e)=>{const o=c({mergeArrays:!1});s[e]=o(t,this.datasets[e])}));const i=["pie","dougnut","polarArea"];["choropleth","treemap","bubbleMap"].includes(this.type)||s.forEach(((t,e)=>{t.backgroundColor||(i.includes(this.type)?s[e].backgroundColor=D:(s[e].backgroundColor=D[e],s[e].borderColor=D[e]))})),this.mergedDatasets=s}getTableAxisLabel(){var t,e,o,s,i,a,r,n,c,l,d;let m="";return m="y"===(null===(t=this.options)||void 0===t?void 0:t.indexAxis)?(null===(i=null===(s=null===(o=null===(e=this.options)||void 0===e?void 0:e.scales)||void 0===o?void 0:o.y)||void 0===s?void 0:s.title)||void 0===i?void 0:i.text)?null===(a=this.options)||void 0===a?void 0:a.scales.y.title.text:"Y Axis":(null===(l=null===(c=null===(n=null===(r=this.options)||void 0===r?void 0:r.scales)||void 0===n?void 0:n.x)||void 0===c?void 0:c.title)||void 0===l?void 0:l.text)?null===(d=this.options)||void 0===d?void 0:d.scales.x.title.text:"X Axis",m}handleViewToggle(){this.tableView=!this.tableView}checkType(){this.tableDisabled=["choropleth","bubbleMap","treemap"].includes(this.type)}handleDownloadImage(t,e){t.preventDefault();const o=e?"image/jpeg":"image/png",s=e?"jpg":"png",i=document.createElement("a");i.href=this.chart.toBase64Image(o,1),i.download=this.chartTitle+"."+s,i.click()}handleDownloadCsv(t){t.preventDefault();let e="";for(let t=0;t<this.chart.data.datasets.length;t++)e+=w({data:this.chart.data.datasets[t],labels:this.labels});if(null==e)return;console.log(e);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()}};M.styles=$,t([i({type:String})],M.prototype,"chartTitle",void 0),t([i({type:String})],M.prototype,"description",void 0),t([i({type:String})],M.prototype,"type",void 0),t([i({type:Array})],M.prototype,"labels",void 0),t([i({type:Array})],M.prototype,"datasets",void 0),t([i({type:Object})],M.prototype,"options",void 0),t([i({type:Array})],M.prototype,"plugins",void 0),t([i({type:Boolean})],M.prototype,"hideDescription",void 0),t([i({type:Boolean})],M.prototype,"hideCaptions",void 0),t([r(".container")],M.prototype,"container",void 0),t([r("canvas")],M.prototype,"canvas",void 0),t([r(".closed-caption")],M.prototype,"ccDiv",void 0),t([a()],M.prototype,"chart",void 0),t([a()],M.prototype,"tableView",void 0),t([a()],M.prototype,"tableDisabled",void 0),t([a()],M.prototype,"mergedOptions",void 0),t([a()],M.prototype,"mergedDatasets",void 0),M=t([s("kd-chart")],M);export{M as KDChart};
+//# sourceMappingURL=chart.js.map

package/components/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":["../../../src/components/chart/chart.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { deepmerge, deepmergeCustom } from 'deepmerge-ts';\nimport Chart from 'chart.js/auto';\nimport ChartDeferred from 'chartjs-plugin-deferred';\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 a11yPlugin from 'chartjs-plugin-a11y-legend';\nimport musicPlugin from 'chartjs-plugin-chart2music';\nimport annotationPlugin from 'chartjs-plugin-annotation';\nimport { convertChartDataToCSV } from '../../common/helpers/helpers';\nimport ChartScss from './chart.scss';\nimport globalOptions from '../../common/config/globalOptions';\nimport colorPalettes from '../../common/config/colorPalettes';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport chartIcon from '@carbon/icons/es/chart--line/24';\nimport tableIcon from '@carbon/icons/es/data-table/24';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--vertical/24';\nimport maximizeIcon from '@carbon/icons/es/maximize/24';\n\nChart.register(\n  ChartDeferred,\n  annotationPlugin,\n  ChoroplethController,\n  BubbleMapController,\n  GeoFeature,\n  ColorScale,\n  SizeScale,\n  ProjectionScale,\n  TreemapController,\n  TreemapElement\n);\n\n/**\n * Chart.js wrapper component.\n */\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. Can be 'bar', 'line', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter', 'choropleth', 'bubbleMap', 'treemap'. */\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  /** 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  /**\n   * Queries the container element.\n   * @ignore\n   */\n  @query('.container')\n  container!: HTMLCanvasElement;\n\n  /**\n   * Queries the canvas element.\n   * @ignore\n   */\n  @query('canvas')\n  canvas!: HTMLCanvasElement;\n\n  /**\n   * Queries the closed caption div.\n   * @ignore\n   */\n  @query('.closed-caption')\n  ccDiv!: HTMLDivElement;\n\n  /** The chart instance.\n   * @ignore\n   */\n  @state()\n  chart: any = null;\n\n  /** Table view mode.\n   * @ignore\n   */\n  @state()\n  tableView = false;\n\n  /** Disable table view feature.\n   * @ignore\n   */\n  @state()\n  tableDisabled = false;\n\n  /** Merged options.\n   * @ignore\n   */\n  @state()\n  mergedOptions: any = {};\n\n  /** Merged datasets.\n   * @ignore\n   */\n  @state()\n  mergedDatasets: any = {};\n\n  override render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"header\">\n          <div class=\"title\">${this.chartTitle}</div>\n\n          <div class=\"controls\">\n            ${!this.tableDisabled\n              ? html`\n                  <button\n                    title=\"Toggle View Mode\"\n                    aria-label=\"Toggle View Mode\"\n                    class=\"view-toggle\"\n                    @click=${() => this.handleViewToggle()}\n                  >\n                    <kd-icon\n                      .icon=${chartIcon}\n                      class=\"${!this.tableView ? 'active' : ''}\"\n                    ></kd-icon>\n                    <kd-icon\n                      .icon=${tableIcon}\n                      class=\"${this.tableView ? 'active' : ''}\"\n                    ></kd-icon>\n                  </button>\n                `\n              : null}\n\n            <button\n              title=\"Toggle Fullscreen\"\n              aria-label=\"Toggle Fullscreen\"\n              @click=${() => this.handleFullscreen()}\n            >\n              <kd-icon .icon=${maximizeIcon}></kd-icon>\n            </button>\n\n            <button\n              title=\"Overflow Menu\"\n              aria-label=\"Overflow Menu\"\n              class=\"overflow-button\"\n            >\n              <kd-icon .icon=${overflowIcon}></kd-icon>\n\n              <div class=\"overflow-menu\">\n                ${!this.tableDisabled\n                  ? html` <a @click=${(e: Event) => this.handleDownloadCsv(e)}>\n                      Download as CSV\n                    </a>`\n                  : null}\n                <a @click=${(e: Event) => this.handleDownloadImage(e, false)}>\n                  Download as PNG\n                </a>\n                <a @click=${(e: Event) => this.handleDownloadImage(e, true)}>\n                  Download as JPG\n                </a>\n              </div>\n            </button>\n          </div>\n        </div>\n\n        <figure class=\"${this.tableView ? 'hidden' : ''}\">\n          <canvas role=\"img\"></canvas>\n          <figcaption>\n            <div\n              class=\"closed-caption ${this.hideCaptions\n                ? 'hidden-visually'\n                : ''}\"\n            ></div>\n            <div\n              class=\"description ${this.hideDescription\n                ? 'hidden-visually'\n                : ''}\"\n            >\n              ${this.description}\n            </div>\n          </figcaption>\n        </figure>\n\n        ${!this.tableDisabled && this.tableView\n          ? html`\n              <div class=\"table\">\n                <table>\n                  <thead>\n                    <tr>\n                      ${this.labels.length\n                        ? html`<th>${this.getTableAxisLabel()}</th>`\n                        : null}\n                      ${this.datasets.map((dataset) => {\n                        return html`<th>${dataset.label}</th>`;\n                      })}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    ${this.datasets[0].data.map((_value: any, i: number) => {\n                      return html`\n                        <tr>\n                          ${this.labels.length\n                            ? html`<td>${this.labels[i]}</td>`\n                            : null}\n                          ${this.datasets.map((dataset) => {\n                            const dataPoint = dataset.data[i];\n\n                            if (Array.isArray(dataPoint)) {\n                              // handle data in array format\n                              return html`\n                                <td>${dataPoint[0]}, ${dataPoint[1]}</td>\n                              `;\n                            } else if (\n                              typeof dataPoint === 'object' &&\n                              !Array.isArray(dataPoint) &&\n                              dataPoint !== null\n                            ) {\n                              // handle data in object format\n                              return html`\n                                <td>\n                                  ${Object.keys(dataPoint).map((key) => {\n                                    return html`\n                                      <span>${key}: ${dataPoint[key]}</span>\n                                    `;\n                                  })}\n                                </td>\n                              `;\n                            } else {\n                              // handle data in number/basic format\n                              return html`<td>${dataset.data[i]}</td>`;\n                            }\n                          })}\n                        </tr>\n                      `;\n                    })}\n                  </tbody>\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    // Update chart instance when data changes.\n    if (\n      this.chart &&\n      (changedProps.has('labels') || changedProps.has('datasets'))\n    ) {\n      this.mergeOptions().then(() => {\n        this.chart.data.labels = this.labels;\n        this.chart.data.datasets = this.mergedDatasets;\n        this.chart.update();\n      });\n    }\n\n    // Update chart instance when options change.\n    if (this.chart && changedProps.has('options')) {\n      this.chart.options = this.mergedOptions;\n      this.chart.update();\n    }\n\n    // Update chart instance when type or plugins change.\n    if (changedProps.has('type') || changedProps.has('plugins')) {\n      if (this.chart) {\n        this.chart.destroy();\n      }\n      this.mergeOptions().then(() => {\n        this.initChart();\n      });\n      this.checkType();\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    // Chart.defaults.font.family =\n    //   \"'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\";\n\n    this.chart = new Chart(this.canvas, {\n      type: this.type,\n      data: {\n        labels: this.labels,\n        datasets: this.mergedDatasets,\n      },\n      options: this.mergedOptions,\n      plugins: [a11yPlugin, musicPlugin, ...this.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    // get chart types from datasets so we can import additional configs\n    const additionalTypeImports: any = [];\n    this.datasets.forEach((dataset) => {\n      if (dataset.type) {\n        additionalTypeImports.push(\n          import(`../../common/config/chartTypes/${dataset.type}.js`)\n        );\n      }\n    });\n\n    // import main and combo chart type configs\n    const chartTypeConfigs = await Promise.all([\n      import(`../../common/config/chartTypes/${this.type}.js`),\n      ...additionalTypeImports,\n    ]);\n\n    let mergedOptions: any = globalOptions(this);\n    const mergedDatasets: any = JSON.parse(JSON.stringify(this.datasets));\n\n    chartTypeConfigs.forEach((chartType: any) => {\n      // merge all of the imported chart type options with the global options\n      mergedOptions = deepmerge(mergedOptions, chartType.options(this));\n\n      // merge all of the imported chart type dataset options\n      mergedDatasets.forEach((dataset: object, index: number) => {\n        mergedDatasets[index] = deepmerge(\n          dataset,\n          chartType.datasetOptions(this)\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    // inject color palette\n    const ignoredTypes = ['choropleth', 'treemap', 'bubbleMap'];\n    const singleDatasetTypes = ['pie', 'dougnut', 'polarArea'];\n    if (!ignoredTypes.includes(this.type)) {\n      mergedDatasets.forEach((dataset: any, index: number) => {\n        if (!dataset.backgroundColor) {\n          if (singleDatasetTypes.includes(this.type)) {\n            // single dataset colors\n            mergedDatasets[index].backgroundColor = colorPalettes;\n            // dataset.borderColor = colorPalettes;\n          } else {\n            // multi dataset colors\n            mergedDatasets[index].backgroundColor = colorPalettes[index];\n            mergedDatasets[index].borderColor = colorPalettes[index];\n          }\n        }\n      });\n    }\n\n    this.mergedDatasets = mergedDatasets;\n  }\n\n  private getTableAxisLabel() {\n    let label = '';\n\n    if (this.options?.indexAxis === 'y') {\n      if (this.options?.scales?.y?.title?.text) {\n        label = this.options?.scales.y.title.text;\n      } else {\n        label = 'Y Axis';\n      }\n    } else {\n      if (this.options?.scales?.x?.title?.text) {\n        label = this.options?.scales.x.title.text;\n      } else {\n        label = 'X Axis';\n      }\n    }\n\n    return label;\n  }\n\n  private handleViewToggle() {\n    this.tableView = !this.tableView;\n  }\n\n  private checkType() {\n    // chart types that can't have a data table view\n    const blacklist = ['choropleth', 'bubbleMap', 'treemap'];\n    this.tableDisabled = blacklist.includes(this.type);\n  }\n\n  private handleDownloadImage(e: Event, jpeg: boolean) {\n    e.preventDefault();\n\n    const imgFormat = jpeg ? 'image/jpeg' : 'image/png';\n    const fileExt = jpeg ? 'jpg' : 'png';\n    const a = document.createElement('a');\n\n    a.href = this.chart.toBase64Image(imgFormat, 1);\n    a.download = this.chartTitle + '.' + fileExt;\n\n    // trigger the download\n    a.click();\n  }\n\n  private handleDownloadCsv(e: Event) {\n    e.preventDefault();\n    let csv = '';\n\n    for (let i = 0; i < this.chart.data.datasets.length; i++) {\n      csv += convertChartDataToCSV({\n        data: this.chart.data.datasets[i],\n        labels: this.labels,\n      });\n    }\n    if (csv == null) return;\n    console.log(csv);\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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kd-chart': KDChart;\n  }\n}\n"],"names":["Chart","register","ChartDeferred","annotationPlugin","ChoroplethController","BubbleMapController","GeoFeature","ColorScale","SizeScale","ProjectionScale","TreemapController","TreemapElement","KDChart","LitElement","constructor","this","chartTitle","description","type","options","plugins","hideDescription","hideCaptions","chart","tableView","tableDisabled","mergedOptions","mergedDatasets","render","html","handleViewToggle","chartIcon","tableIcon","handleFullscreen","maximizeIcon","overflowIcon","e","handleDownloadCsv","handleDownloadImage","labels","length","getTableAxisLabel","datasets","map","dataset","label","data","_value","i","dataPoint","Array","isArray","Object","keys","key","updated","changedProps","has","mergeOptions","then","update","destroy","initChart","checkType","canvas","a11yPlugin","musicPlugin","async","additionalTypeImports","forEach","push","__variableDynamicImportRuntime0__","chartTypeConfigs","Promise","all","__variableDynamicImportRuntime1__","globalOptions","JSON","parse","stringify","chartType","deepmerge","index","datasetOptions","customDeepmerge","deepmergeCustom","mergeArrays","singleDatasetTypes","includes","backgroundColor","colorPalettes","borderColor","_a","indexAxis","_e","_d","_c","_b","scales","y","title","text","_f","_k","_j","_h","_g","x","_l","jpeg","preventDefault","imgFormat","fileExt","a","document","createElement","href","toBase64Image","download","click","csv","convertChartDataToCSV","console","log","filename","match","encodeURI","link","setAttribute","body","appendChild","removeChild","shadowRoot","fullscreenElement","exitFullscreen","container","requestFullscreen","styles","ChartScss","__decorate","property","String","prototype","Boolean","query","state","customElement"],"mappings":"84GA2BAA,EAAMC,SACJC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,GAOK,IAAMC,EAAN,cAAsBC,EAAtBC,kCAKLC,KAAUC,WAAG,GAIbD,KAAWE,YAAG,GAIdF,KAAIG,KAAQ,GAYZH,KAAOI,QAAQ,GAIfJ,KAAOK,QAAQ,GAIfL,KAAeM,iBAAG,EAIlBN,KAAYO,cAAG,EA2BfP,KAAKQ,MAAQ,KAMbR,KAASS,WAAG,EAMZT,KAAaU,eAAG,EAMhBV,KAAaW,cAAQ,GAMrBX,KAAcY,eAAQ,EAsVvB,CApVUC,SACP,OAAOC,CAAI;;;+BAGgBd,KAAKC;;;cAGrBD,KAAKU,cAkBJ,KAjBAI,CAAI;;;;;6BAKS,IAAMd,KAAKe;;;8BAGVC;+BACEhB,KAAKS,UAAuB,GAAX;;;8BAGnBQ;+BACCjB,KAAKS,UAAY,SAAW;;;;;;;;uBASpC,IAAMT,KAAKkB;;+BAEHC;;;;;;;;+BAQAC;;;kBAGZpB,KAAKU,cAIJ,KAHAI,CAAI,cAAeO,GAAarB,KAAKsB,kBAAkBD;;;4BAI9CA,GAAarB,KAAKuB,oBAAoBF,GAAG;;;4BAGzCA,GAAarB,KAAKuB,oBAAoBF,GAAG;;;;;;;;yBAQ7CrB,KAAKS,UAAY,SAAW;;;;sCAIfT,KAAKO,aACzB,kBACA;;;mCAGiBP,KAAKM,gBACtB,kBACA;;gBAEFN,KAAKE;;;;;WAKVF,KAAKU,eAAiBV,KAAKS,UAC1BK,CAAI;;;;;wBAKQd,KAAKwB,OAAOC,OACVX,CAAI,OAAOd,KAAK0B,2BAChB;wBACF1B,KAAK2B,SAASC,KAAKC,GACZf,CAAI,OAAOe,EAAQC;;;;sBAK5B9B,KAAK2B,SAAS,GAAGI,KAAKH,KAAI,CAACI,EAAaC,IACjCnB,CAAI;;4BAELd,KAAKwB,OAAOC,OACVX,CAAI,OAAOd,KAAKwB,OAAOS,UACvB;4BACFjC,KAAK2B,SAASC,KAAKC,IACnB,MAAMK,EAAYL,EAAQE,KAAKE,GAE/B,OAAIE,MAAMC,QAAQF,GAETpB,CAAI;sCACHoB,EAAU,OAAOA,EAAU;gCAGd,iBAAdA,GACNC,MAAMC,QAAQF,IACD,OAAdA,EAcOpB,CAAI,OAAOe,EAAQE,KAAKE,UAXxBnB,CAAI;;oCAELuB,OAAOC,KAAKJ,GAAWN,KAAKW,GACrBzB,CAAI;8CACDyB,MAAQL,EAAUK;;;+BAQnC;;;;;;cASjB;;KAGT,CAEQC,QAAQC,GAGbzC,KAAKQ,QACJiC,EAAaC,IAAI,WAAaD,EAAaC,IAAI,cAEhD1C,KAAK2C,eAAeC,MAAK,KACvB5C,KAAKQ,MAAMuB,KAAKP,OAASxB,KAAKwB,OAC9BxB,KAAKQ,MAAMuB,KAAKJ,SAAW3B,KAAKY,eAChCZ,KAAKQ,MAAMqC,QAAQ,IAKnB7C,KAAKQ,OAASiC,EAAaC,IAAI,aACjC1C,KAAKQ,MAAMJ,QAAUJ,KAAKW,cAC1BX,KAAKQ,MAAMqC,WAITJ,EAAaC,IAAI,SAAWD,EAAaC,IAAI,cAC3C1C,KAAKQ,OACPR,KAAKQ,MAAMsC,UAEb9C,KAAK2C,eAAeC,MAAK,KACvB5C,KAAK+C,WAAW,IAElB/C,KAAKgD,YAER,CAMOD,YAIN/C,KAAKQ,MAAQ,IAAIvB,EAAMe,KAAKiD,OAAQ,CAClC9C,KAAMH,KAAKG,KACX4B,KAAM,CACJP,OAAQxB,KAAKwB,OACbG,SAAU3B,KAAKY,gBAEjBR,QAASJ,KAAKW,cACdN,QAAS,CAAC6C,EAAYC,KAAgBnD,KAAKK,UAE9C,CAMO+C,qBAEN,MAAMC,EAA6B,GACnCrD,KAAK2B,SAAS2B,SAASzB,IACjBA,EAAQ1B,MACVkD,EAAsBE,m1CACpBC,CAAO,kCAAkC3B,EAAQ1B,WAEpD,IAIH,MAAMsD,QAAyBC,QAAQC,IAAI,CACzCC,EAAO,kCAAkC5D,KAAKG,cAC3CkD,IAGL,IAAI1C,EAAqBkD,EAAc7D,MACvC,MAAMY,EAAsBkD,KAAKC,MAAMD,KAAKE,UAAUhE,KAAK2B,WAE3D8B,EAAiBH,SAASW,IAExBtD,EAAgBuD,EAAUvD,EAAesD,EAAU7D,QAAQJ,OAG3DY,EAAe0C,SAAQ,CAACzB,EAAiBsC,KACvCvD,EAAeuD,GAASD,EACtBrC,EACAoC,EAAUG,eAAepE,MAC1B,GACD,IAGAA,KAAKI,UAEPO,EAAgBuD,EAAUvD,EAAeX,KAAKI,UAEhDJ,KAAKW,cAAgBA,EAGrBC,EAAe0C,SAAQ,CAACzB,EAAiBsC,KACvC,MAAME,EAAkBC,EAAgB,CACtCC,aAAa,IAEf3D,EAAeuD,GAASE,EAAgBxC,EAAS7B,KAAK2B,SAASwC,GAAO,IAIxE,MACMK,EAAqB,CAAC,MAAO,UAAW,aADzB,CAAC,aAAc,UAAW,aAE7BC,SAASzE,KAAKG,OAC9BS,EAAe0C,SAAQ,CAACzB,EAAcsC,KAC/BtC,EAAQ6C,kBACPF,EAAmBC,SAASzE,KAAKG,MAEnCS,EAAeuD,GAAOO,gBAAkBC,GAIxC/D,EAAeuD,GAAOO,gBAAkBC,EAAcR,GACtDvD,EAAeuD,GAAOS,YAAcD,EAAcR,IAErD,IAILnE,KAAKY,eAAiBA,CACvB,CAEOc,8CACN,IAAII,EAAQ,GAgBZ,OAZIA,EAF4B,OAAd,UAAd9B,KAAKI,eAAS,IAAAyE,OAAA,EAAAA,EAAAC,YACkB,QAA9BC,EAAuB,QAAvBC,UAAAC,EAAc,QAAdC,EAAAlF,KAAKI,eAAS,IAAA8E,OAAA,EAAAA,EAAAC,6BAAQC,SAAC,IAAAJ,OAAA,EAAAA,EAAEK,aAAK,IAAAN,OAAA,EAAAA,EAAEO,MACd,QAAZC,EAAAvF,KAAKI,eAAO,IAAAmF,OAAA,EAAAA,EAAEJ,OAAOC,EAAEC,MAAMC,KAE7B,UAGwB,QAA9BE,EAAuB,QAAvBC,UAAAC,EAAc,QAAdC,EAAA3F,KAAKI,eAAS,IAAAuF,OAAA,EAAAA,EAAAR,6BAAQS,SAAC,IAAAH,OAAA,EAAAA,EAAEJ,aAAK,IAAAG,OAAA,EAAAA,EAAEF,MACd,QAAZO,EAAA7F,KAAKI,eAAO,IAAAyF,OAAA,EAAAA,EAAEV,OAAOS,EAAEP,MAAMC,KAE7B,SAILxD,CACR,CAEOf,mBACNf,KAAKS,WAAaT,KAAKS,SACxB,CAEOuC,YAGNhD,KAAKU,cADa,CAAC,aAAc,YAAa,WACf+D,SAASzE,KAAKG,KAC9C,CAEOoB,oBAAoBF,EAAUyE,GACpCzE,EAAE0E,iBAEF,MAAMC,EAAYF,EAAO,aAAe,YAClCG,EAAUH,EAAO,MAAQ,MACzBI,EAAIC,SAASC,cAAc,KAEjCF,EAAEG,KAAOrG,KAAKQ,MAAM8F,cAAcN,EAAW,GAC7CE,EAAEK,SAAWvG,KAAKC,WAAa,IAAMgG,EAGrCC,EAAEM,OACH,CAEOlF,kBAAkBD,GACxBA,EAAE0E,iBACF,IAAIU,EAAM,GAEV,IAAK,IAAIxE,EAAI,EAAGA,EAAIjC,KAAKQ,MAAMuB,KAAKJ,SAASF,OAAQQ,IACnDwE,GAAOC,EAAsB,CAC3B3E,KAAM/B,KAAKQ,MAAMuB,KAAKJ,SAASM,GAC/BT,OAAQxB,KAAKwB,SAGjB,GAAW,MAAPiF,EAAa,OACjBE,QAAQC,IAAIH,GAEZ,MAAMI,EAAW7G,KAAKC,WAAa,OAC9BwG,EAAIK,MAAM,sBACbL,EAAM,+BAAiCA,GAIzC,MAAM1E,EAAOgF,UAAUN,GACjBO,EAAOb,SAASC,cAAc,KACpCY,EAAKC,aAAa,OAAQlF,GAC1BiF,EAAKC,aAAa,WAAYJ,GAC9BV,SAASe,KAAKC,YAAYH,GAC1BA,EAAKR,QACLL,SAASe,KAAKE,YAAYJ,EAC3B,CAEO9F,0BACa,UAAflB,KAAKqH,kBAAU,IAAAxC,OAAA,EAAAA,EAAEyC,mBACnBnB,SAASoB,iBAETvH,KAAKwH,UAAUC,mBAElB,GA5ae5H,EAAM6H,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAE1H,KAAM2H,UACFjI,EAAAkI,UAAA,kBAAA,GAIhBH,EAAA,CADCC,EAAS,CAAE1H,KAAM2H,UACDjI,EAAAkI,UAAA,mBAAA,GAIjBH,EAAA,CADCC,EAAS,CAAE1H,KAAM2H,UACHjI,EAAAkI,UAAA,YAAA,GAIfH,EAAA,CADCC,EAAS,CAAE1H,KAAMgC,SACKtC,EAAAkI,UAAA,cAAA,GAIvBH,EAAA,CADCC,EAAS,CAAE1H,KAAMgC,SACItC,EAAAkI,UAAA,gBAAA,GAItBH,EAAA,CADCC,EAAS,CAAE1H,KAAMkC,UACAxC,EAAAkI,UAAA,eAAA,GAIlBH,EAAA,CADCC,EAAS,CAAE1H,KAAMgC,SACAtC,EAAAkI,UAAA,eAAA,GAIlBH,EAAA,CADCC,EAAS,CAAE1H,KAAM6H,WACMnI,EAAAkI,UAAA,uBAAA,GAIxBH,EAAA,CADCC,EAAS,CAAE1H,KAAM6H,WACGnI,EAAAkI,UAAA,oBAAA,GAOrBH,EAAA,CADCK,EAAM,eACuBpI,EAAAkI,UAAA,iBAAA,GAO9BH,EAAA,CADCK,EAAM,WACoBpI,EAAAkI,UAAA,cAAA,GAO3BH,EAAA,CADCK,EAAM,oBACgBpI,EAAAkI,UAAA,aAAA,GAMvBH,EAAA,CADCM,KACiBrI,EAAAkI,UAAA,aAAA,GAMlBH,EAAA,CADCM,KACiBrI,EAAAkI,UAAA,iBAAA,GAMlBH,EAAA,CADCM,KACqBrI,EAAAkI,UAAA,qBAAA,GAMtBH,EAAA,CADCM,KACuBrI,EAAAkI,UAAA,qBAAA,GAMxBH,EAAA,CADCM,KACwBrI,EAAAkI,UAAA,sBAAA,GAxFdlI,EAAO+H,EAAA,CADnBO,EAAc,aACFtI"}

package/components/chart/chart.scss.js

@@ -0,0 +1,122 @@
+import'./../../external/@lit/reactive-element/reactive-element.js';import'./../../external/lit-html/lit-html.js';import'./../../external/lit-element/lit-element.js';import{css as o}from'./../../external/@lit/reactive-element/css-tag.js';var e=o`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-grid-max-width: 99rem;
+}
+
+:host {
+  display: block;
+}
+
+.container {
+  background: var(--kd-color-background-ui-default);
+}
+
+figure {
+  margin: 0;
+}
+figure.hidden {
+  display: none;
+}
+
+figcaption {
+  margin-top: 8px;
+}
+
+.hidden-visually {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+canvas:focus,
+div:focus {
+  border-radius: 4px;
+  outline: 2px solid var(--kd-color-border-focus);
+}
+
+.table {
+  width: 100%;
+  max-height: 300px;
+  overflow: auto;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+table th {
+  text-align: left;
+  font-weight: 500;
+  padding: 8px 16px;
+  background: var(--kd-color-background-accent-subtle);
+}
+table td {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--kd-color-background-accent-tertiary);
+}
+table td span:after {
+  content: ",";
+}
+table td span:last-child:after {
+  content: none;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-weight: 500;
+}
+
+.controls button {
+  display: inline-block;
+  border-radius: 4px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.controls button:focus {
+  outline: 2px solid var(--kd-color-border-focus);
+}
+.controls .view-toggle kd-icon {
+  display: block;
+}
+.controls .view-toggle kd-icon.active {
+  display: none;
+}
+.controls .overflow-button {
+  position: relative;
+}
+.controls .overflow-button:focus-within .overflow-menu {
+  display: block;
+}
+.controls .overflow-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background: var(--kd-color-background-ui-default);
+  display: none;
+  box-shadow: var(--kd-shadow-menu);
+  text-align: left;
+}
+.controls .overflow-menu > * {
+  display: block;
+  padding: 8px;
+  white-space: nowrap;
+}
+.controls .overflow-menu > *:hover {
+  background-color: var(--kd-color-background-ui-subtle);
+}`;export{e as default};
+//# sourceMappingURL=chart.scss.js.map

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

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

package/components/chart/index.d.ts

@@ -0,0 +1,2 @@
+export { KDChart } from './chart';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/components/chart/index.js

@@ -0,0 +1,2 @@
+export{KDChart}from"./chart.js";
+//# sourceMappingURL=index.js.map