feat(chart): create bare entrypoint to reduce bundle size

documents/src/pages/elements/chart.md

@@ -1225,3 +1225,23 @@ ef-chart {
 ```
 ::
 
+## Reduce bundle size
+
+`import "@refinitiv-ui/chart";` is a default way to add a module. This means your bundle file size will be needlessly large. Because it will get all features of Chart.js. To reduce it, `import "@refinitiv-ui/chart/bare";` is optional way to add nessassary features by your request. This way can most likely reduce the size around ~20%. Here is a list of nessessary of each chart type, [Chart.js integration](https://www.chartjs.org/docs/4.2.1/getting-started/integration.html). 
+
+```javascript
+// Examples of using doughnutCenterLabel plugin with doughnut chart.  
+import '@refinitiv-ui/elements/chart/bare';
+import { doughnutCenterLabelPlugin } from '@refinitiv-ui/elements/chart/plugins';
+
+import {
+  Chart as ChartJS,
+  DoughnutController,
+  ArcElement
+} from 'chart.js';
+ChartJS.register(
+  DoughnutController
+  ArcElement,
+  doughnutCenterLabelPlugin
+);
+```

packages/elements/package.json

@@ -71,6 +71,8 @@
     "./card/themes/solar/charcoal": "./lib/card/themes/solar/charcoal/index.js",
     "./card/themes/solar/pearl": "./lib/card/themes/solar/pearl/index.js",
     "./chart": "./lib/chart/index.js",
+    "./chart/bare": "./lib/chart/bare.js",
+    "./chart/plugins": "./lib/chart/plugins/index.js",
     "./chart/themes/halo/dark": "./lib/chart/themes/halo/dark/index.js",
     "./chart/themes/halo/light": "./lib/chart/themes/halo/light/index.js",
     "./chart/themes/solar/charcoal": "./lib/chart/themes/solar/charcoal/index.js",
@@ -366,4 +368,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/elements/src/chart/__test__/__snapshots__/chart.test.snap.js

@@ -2,22 +2,25 @@
 export const snapshots = {};
 
 snapshots["chart/Chart Check chart types DOM structure is correct"] = 
-`<div container="">
+`<div part="container">
   <div part="chart">
-    <canvas id="canvas">
+    <canvas>
     </canvas>
   </div>
 </div>
 `;
 /* end snapshot chart/Chart Check chart types DOM structure is correct */
 
 snapshots["chart/Chart Check chart types DOM structure of chart with config is correct"] = 
-`<div container="">
-  <ef-header level="2">
+`<div part="container">
+  <ef-header
+    level="2"
+    part="title"
+  >
     Line Chart - Price of TRI.N in 2016
   </ef-header>
   <div part="chart">
-    <canvas id="canvas">
+    <canvas>
     </canvas>
   </div>
 </div>

packages/elements/src/chart/bare.ts

@@ -0,0 +1 @@
+export * from './elements/chart.js';