awing-library 2.1.39 → 2.1.40

package/lib/AWING/Chart/BarLineComponent.js

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
 var Helpers_1 = require("../../Utils/Helpers");
 require("chartjs-adapter-moment");
 var moment_1 = __importDefault(require("moment"));
@@ -73,6 +74,10 @@ var BarLineComponent = function (props) {
                     lineHeight: 1.5,
                 },
             },
+            htmlLegend: {
+                // ID of the container to put the legend in
+                containerID: 'legend-container',
+            },
             legend: {
                 position: 'bottom',
                 labels: {
@@ -88,7 +93,7 @@ var BarLineComponent = function (props) {
                         lineHeight: 1.5,
                     },
                 },
-                display: true,
+                display: false,
             },
         },
         scales: {
@@ -182,10 +187,83 @@ var BarLineComponent = function (props) {
         }),
     };
     var Chart = chart;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    var getOrCreateLegendList = function (chart, id) {
+        var legendContainer = document.getElementById(id);
+        var listContainer = legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.querySelector('ul');
+        if (!listContainer) {
+            listContainer = document.createElement('ul');
+            listContainer.style.display = 'flex';
+            listContainer.style.flexDirection = 'row';
+            listContainer.style.margin = '0';
+            listContainer.style.padding = '0';
+            legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.appendChild(listContainer);
+        }
+        return listContainer;
+    };
+    var htmlLegendPlugin = {
+        id: 'htmlLegend',
+        afterUpdate: function (chart, args, options) {
+            var ul = getOrCreateLegendList(chart, options.containerID);
+            // Remove old legend items
+            while (ul.firstChild) {
+                ul.firstChild.remove();
+            }
+            // Reuse the built-in legendItems generator
+            var items = chart.options.plugins.legend.labels.generateLabels(chart);
+            items.forEach(function (item) {
+                var li = document.createElement('li');
+                li.style.alignItems = 'center';
+                li.style.cursor = 'pointer';
+                li.style.display = 'flex';
+                li.style.flexDirection = 'row';
+                li.style.marginLeft = '10px';
+                li.onclick = function () {
+                    var type = chart.config.type;
+                    if (type === 'pie' || type === 'doughnut') {
+                        // Pie and doughnut charts only have a single dataset and visibility is per item
+                        chart.toggleDataVisibility(item.index);
+                    }
+                    else {
+                        chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+                    }
+                    chart.update();
+                };
+                // Color box
+                var boxSpan = document.createElement('span');
+                boxSpan.style.background = item.fillStyle;
+                boxSpan.style.borderColor = item.strokeStyle;
+                boxSpan.style.borderWidth = item.lineWidth + 'px';
+                boxSpan.style.display = 'inline-block';
+                boxSpan.style.flexShrink = '0';
+                boxSpan.style.height = '20px';
+                boxSpan.style.marginRight = '10px';
+                boxSpan.style.width = '20px';
+                boxSpan.style.borderRadius = '20px';
+                // Text
+                var textContainer = document.createElement('p');
+                textContainer.style.color = item.fontColor;
+                textContainer.style.margin = '0';
+                textContainer.style.padding = '0';
+                textContainer.style.textDecoration = item.hidden
+                    ? 'line-through'
+                    : '';
+                var text = document.createTextNode(item.text);
+                textContainer.appendChild(text);
+                li.appendChild(boxSpan);
+                li.appendChild(textContainer);
+                ul.appendChild(li);
+            });
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             width: width,
             height: height,
             position: 'relative',
-        }, children: (0, jsx_runtime_1.jsx)(Chart, { data: chartData, type: type, options: (0, Helpers_1.updateObjectFields)(options, optionCustom) }) }));
+            marginBottom: '80px',
+        }, children: [(0, jsx_runtime_1.jsx)(Chart, { data: chartData, type: type, options: (0, Helpers_1.updateObjectFields)(options, optionCustom), plugins: [htmlLegendPlugin] }), (0, jsx_runtime_1.jsx)(material_1.Box, { id: "legend-container", sx: {
+                    marginTop: '35px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                } })] }));
 };
 exports.default = BarLineComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "awing-library",
-  "version": "2.1.39",
+  "version": "2.1.40",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",