chartjs-plugin-chart2music 0.6.1 → 0.7.0

package/dist/plugin.cjs

@@ -3,35 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _chart2music = _interopRequireDefault(require("chart2music"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var calcMedian = function calcMedian(nums) {
-  return nums.length % 2 ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
-};
-var fiveNumberSummary = function fiveNumberSummary(nums) {
-  var sortedNumbers = nums.sort();
-  var min, max, q1, q3;
-  var datamin = Math.min.apply(Math, _toConsumableArray(sortedNumbers));
-  var datamax = Math.max.apply(Math, _toConsumableArray(sortedNumbers));
-  var median = calcMedian(sortedNumbers);
-  var length = sortedNumbers.length;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const calcMedian = nums => nums.length % 2 ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
+const fiveNumberSummary = nums => {
+  const sortedNumbers = nums.sort();
+  let min, max, q1, q3;
+  const datamin = Math.min(...sortedNumbers);
+  const datamax = Math.max(...sortedNumbers);
+  const median = calcMedian(sortedNumbers);
+  const length = sortedNumbers.length;
   if (length % 2) {
     q1 = calcMedian(sortedNumbers.slice(0, Math.floor(length / 2)));
     q3 = calcMedian(sortedNumbers.slice(Math.ceil(length % 2)));
@@ -39,75 +21,70 @@ var fiveNumberSummary = function fiveNumberSummary(nums) {
     q1 = calcMedian(sortedNumbers.slice(0, length / 2 - 1));
     q3 = calcMedian(sortedNumbers.slice(length / 2));
   }
-  var iqr = q3 - q1;
+  const iqr = q3 - q1;
   if (datamax < q3 + iqr) {
     max = datamax;
   } else {
-    var _sortedNumbers$revers;
-    max = (_sortedNumbers$revers = sortedNumbers.reverse().find(function (num) {
-      return num < datamax;
-    })) !== null && _sortedNumbers$revers !== void 0 ? _sortedNumbers$revers : datamax;
+    max = sortedNumbers.reverse().find(num => num < datamax) ?? datamax;
   }
   if (datamin < q1 - iqr) {
     min = datamin;
   } else {
-    var _sortedNumbers$revers2;
-    min = (_sortedNumbers$revers2 = sortedNumbers.reverse().find(function (num) {
-      return num < datamin;
-    })) !== null && _sortedNumbers$revers2 !== void 0 ? _sortedNumbers$revers2 : datamin;
+    min = sortedNumbers.reverse().find(num => num < datamin) ?? datamin;
   }
-  var outlier = sortedNumbers.filter(function (num) {
-    return num < min || num > max;
-  });
-  return _objectSpread({
+  const outlier = sortedNumbers.filter(num => num < min || num > max);
+  return {
     low: min,
     high: max,
-    median: median,
-    q1: q1,
-    q3: q3
-  }, outlier.length > 0 ? {
-    outlier: outlier
-  } : {});
+    median,
+    q1,
+    q3,
+    ...(outlier.length > 0 ? {
+      outlier
+    } : {})
+  };
 };
-var whichBoxData = function whichBoxData(data) {
-  return data.map(function (row, index) {
-    if (_typeof(row) === "object" && "min" in row) {
-      return _objectSpread(_objectSpread({}, row), {}, {
+const whichBoxData = data => {
+  return data.map((row, index) => {
+    if (typeof row === "object" && "min" in row) {
+      return {
+        ...row,
         low: row.min,
         high: row.max,
-        x: index
-      }, "outliers" in row ? {
-        outlier: row.outliers
-      } : {});
+        x: index,
+        ...("outliers" in row ? {
+          outlier: row.outliers
+        } : {})
+      };
     }
     if (Array.isArray(row)) {
-      return _objectSpread(_objectSpread({}, fiveNumberSummary(row)), {}, {
+      return {
+        ...fiveNumberSummary(row),
         x: index
-      });
+      };
     }
   });
 };
-var processBoxData = function processBoxData(data) {
+const processBoxData = data => {
   if (data.datasets.length === 1) {
     return {
       data: whichBoxData(data.datasets[0].data)
     };
   }
-  var groups = [];
-  var result = {};
-  data.datasets.forEach(function (obj, index) {
-    var _obj$label;
-    var groupName = (_obj$label = obj.label) !== null && _obj$label !== void 0 ? _obj$label : "Group ".concat(index + 1);
+  const groups = [];
+  const result = {};
+  data.datasets.forEach((obj, index) => {
+    const groupName = obj.label ?? `Group ${index + 1}`;
     groups.push(groupName);
     result[groupName] = whichBoxData(obj.data);
   });
   return {
-    groups: groups,
+    groups,
     data: result
   };
 };
-var chartStates = new Map();
-var chartjs_c2m_converter = {
+const chartStates = new Map();
+const chartjs_c2m_converter = {
   bar: "bar",
   line: "line",
   pie: "pie",
@@ -116,24 +93,22 @@ var chartjs_c2m_converter = {
   boxplot: "box",
   radar: "bar",
   wordCloud: "bar",
-  scatter: "scatter"
+  scatter: "scatter",
+  matrix: "matrix"
 };
-var processChartType = function processChartType(chart) {
-  var topLevelType = chart.config.type;
-  var panelTypes = chart.data.datasets.map(function (_ref) {
-    var type = _ref.type;
-    return type !== null && type !== void 0 ? type : topLevelType;
-  });
-  var invalid = panelTypes.find(function (t) {
-    return !(t in chartjs_c2m_converter);
-  });
+const processChartType = chart => {
+  const topLevelType = chart.config.type;
+  const panelTypes = chart.data.datasets.map(({
+    type
+  }) => type ?? topLevelType);
+  const invalid = panelTypes.find(t => !(t in chartjs_c2m_converter));
   if (invalid) {
     return {
       valid: false,
       invalidType: invalid
     };
   }
-  if (_toConsumableArray(new Set(panelTypes)).length === 1) {
+  if ([...new Set(panelTypes)].length === 1) {
     return {
       valid: true,
       c2m_types: chartjs_c2m_converter[panelTypes[0]]
@@ -141,112 +116,160 @@ var processChartType = function processChartType(chart) {
   }
   return {
     valid: true,
-    c2m_types: panelTypes.map(function (t) {
-      return chartjs_c2m_converter[t];
-    })
+    c2m_types: panelTypes.map(t => chartjs_c2m_converter[t])
   };
 };
-var generateAxisInfo = function generateAxisInfo(chartAxisInfo, chart) {
-  var _chartAxisInfo$title;
-  var axis = {};
-  if ((chartAxisInfo === null || chartAxisInfo === void 0 ? void 0 : chartAxisInfo.min) !== undefined) {
+const generateAxisInfo = (chartAxisInfo, chart) => {
+  const axis = {};
+  if (chartAxisInfo?.min !== undefined) {
     if (typeof chartAxisInfo.min === "string") {
       axis.minimum = chart.data.labels.indexOf(chartAxisInfo.min);
     } else {
       axis.minimum = chartAxisInfo.min;
     }
   }
-  if ((chartAxisInfo === null || chartAxisInfo === void 0 ? void 0 : chartAxisInfo.max) !== undefined) {
+  if (chartAxisInfo?.max !== undefined) {
     if (typeof chartAxisInfo.max === "string") {
       axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
     } else {
       axis.maximum = chartAxisInfo.max;
     }
   }
-  var label = chartAxisInfo === null || chartAxisInfo === void 0 || (_chartAxisInfo$title = chartAxisInfo.title) === null || _chartAxisInfo$title === void 0 ? void 0 : _chartAxisInfo$title.text;
+  const label = chartAxisInfo?.title?.text;
   if (label) {
     axis.label = label;
   }
-  if ((chartAxisInfo === null || chartAxisInfo === void 0 ? void 0 : chartAxisInfo.type) === "logarithmic") {
+  if (chartAxisInfo?.type === "logarithmic") {
     axis.type = "log10";
   }
   return axis;
 };
-var generateAxes = function generateAxes(chart) {
-  var _chart$options, _chart$options2;
-  var axes = {
-    x: _objectSpread({}, generateAxisInfo((_chart$options = chart.options) === null || _chart$options === void 0 || (_chart$options = _chart$options.scales) === null || _chart$options === void 0 ? void 0 : _chart$options.x, chart)),
-    y: _objectSpread({
-      format: function format(value) {
-        return value.toLocaleString();
-      }
-    }, generateAxisInfo((_chart$options2 = chart.options) === null || _chart$options2 === void 0 || (_chart$options2 = _chart$options2.scales) === null || _chart$options2 === void 0 ? void 0 : _chart$options2.y, chart))
+const generateAxes = (chart, options) => {
+  const axes = {
+    x: {
+      ...generateAxisInfo(chart.options?.scales?.x, chart)
+    },
+    y: {
+      format: options?.axes?.y?.format || (value => value.toLocaleString()),
+      ...generateAxisInfo(chart.options?.scales?.y, chart)
+    }
   };
-  var xAxisValueLabels = chart.data.labels.slice(0);
+  const xAxisValueLabels = chart.data.labels.slice(0);
   if (xAxisValueLabels.length > 0) {
     axes.x.valueLabels = xAxisValueLabels;
   }
   return axes;
 };
-var whichDataStructure = function whichDataStructure(data) {
+const whichDataStructure = data => {
   if (Array.isArray(data[0])) {
-    return data.map(function (arr, x) {
-      var _arr$sort = arr.sort(),
-        _arr$sort2 = _slicedToArray(_arr$sort, 2),
-        low = _arr$sort2[0],
-        high = _arr$sort2[1];
+    return data.map((arr, x) => {
+      let [low, high] = arr.sort();
       return {
-        x: x,
-        low: low,
-        high: high
+        x,
+        low,
+        high
       };
     });
   }
   return data;
 };
-var scrubX = function scrubX(data) {
-  var blackboard = JSON.parse(JSON.stringify(data));
-  var labels = [];
+const labelIndex = (labels, value) => {
+  let index = labels.indexOf(value);
+  if (index === -1) {
+    labels.push(value);
+    index = labels.length - 1;
+  }
+  return index;
+};
+const processMatrixDataPoints = (data, datasetIndex, xLabels, yLabels) => {
+  return data.map((point, index) => {
+    const x = typeof point.x === "string" ? labelIndex(xLabels, point.x) : point.x;
+    const y = typeof point.y === "string" ? labelIndex(yLabels, point.y) : point.y;
+    return {
+      ...point,
+      x,
+      y,
+      custom: {
+        ...point.custom,
+        group: datasetIndex,
+        datasetIndex,
+        index
+      }
+    };
+  });
+};
+const processMatrixData = data => {
+  const xLabels = [];
+  const yLabels = [];
+  // Chart2Music represents matrix rows as groups and columns as points within
+  // each group. This preserves two-dimensional keyboard navigation.
+  const result = {};
+  data.datasets.forEach((obj, index) => {
+    const points = processMatrixDataPoints(obj.data, index, xLabels, yLabels);
+    points.forEach(point => {
+      const rowLabel = typeof point.y === "number" && yLabels[point.y] !== undefined ? yLabels[point.y] : String(point.y);
+      const groupName = data.datasets.length === 1 ? rowLabel : `${obj.label ?? `Group ${index + 1}`}: ${rowLabel}`;
+      if (!result[groupName]) {
+        result[groupName] = [];
+      }
+      result[groupName].push(point);
+    });
+  });
+  Object.values(result).forEach(row => row.sort((a, b) => a.x - b.x));
+  return {
+    groups: Object.keys(result),
+    data: result,
+    xLabels,
+    yLabels
+  };
+};
+const scrubX = data => {
+  const blackboard = JSON.parse(JSON.stringify(data));
+  let labels = [];
   if (Array.isArray(data)) {
     // console.log("not grouped");
     // Not grouped
-    blackboard.forEach(function (item, x) {
-      if (_typeof(item) === "object" && item !== null && "x" in item) {
+    blackboard.forEach((item, x) => {
+      if (typeof item === "object" && item !== null && "x" in item) {
         labels.push(item.x);
         item.x = x;
       }
     });
     return {
-      labels: labels,
+      labels,
       data: blackboard
     };
+  } else {
+    // Grouped
+    return undefined;
   }
 };
-var processData = function processData(data, c2m_types) {
+const processData = (data, c2m_types) => {
   if (c2m_types === "box") {
     return processBoxData(data);
   }
-  var groups = [];
+  if (c2m_types === "matrix") {
+    return processMatrixData(data);
+  }
+  let groups = [];
   if (data.datasets.length === 1) {
     return {
       data: whichDataStructure(data.datasets[0].data)
     };
   }
-  var result = {};
-  data.datasets.forEach(function (obj, index) {
-    var _obj$label2;
-    var groupName = (_obj$label2 = obj.label) !== null && _obj$label2 !== void 0 ? _obj$label2 : "Group ".concat(index + 1);
+  const result = {};
+  data.datasets.forEach((obj, index) => {
+    const groupName = obj.label ?? `Group ${index + 1}`;
     groups.push(groupName);
     result[groupName] = whichDataStructure(obj.data);
   });
   return {
-    groups: groups,
+    groups,
     data: result
   };
 };
-var determineChartTitle = function determineChartTitle(options) {
-  var _options$plugins;
-  if ((_options$plugins = options.plugins) !== null && _options$plugins !== void 0 && (_options$plugins = _options$plugins.title) !== null && _options$plugins !== void 0 && _options$plugins.text) {
+const determineChartTitle = options => {
+  if (options.plugins?.title?.text) {
     if (Array.isArray(options.plugins.title.text)) {
       return options.plugins.title.text.join(", ");
     }
@@ -254,62 +277,70 @@ var determineChartTitle = function determineChartTitle(options) {
   }
   return "";
 };
-var determineCCElement = function determineCCElement(canvas, provided) {
+const determineCCElement = (canvas, provided) => {
   if (provided) {
     return provided;
   }
-  var cc = document.createElement("div");
+  const cc = document.createElement("div");
   canvas.insertAdjacentElement("afterend", cc);
   return cc;
 };
-var displayPoint = function displayPoint(chart) {
+const createDataSnapshot = chart => {
+  return JSON.stringify({
+    datasets: chart.data.datasets.map(ds => ds.data),
+    labels: chart.data.labels
+  });
+};
+const displayPoint = chart => {
   if (!chartStates.has(chart)) {
     return;
   }
-  var _chartStates$get = chartStates.get(chart),
-    ref = _chartStates$get.c2m,
-    visible_groups = _chartStates$get.visible_groups;
-  var _ref$getCurrent = ref.getCurrent(),
-    point = _ref$getCurrent.point,
-    index = _ref$getCurrent.index;
+  const {
+    c2m: ref
+  } = chartStates.get(chart);
+  const {
+    point,
+    index
+  } = ref.getCurrent();
+  // Use Chart2Music's internal visible group tracking
+  // @ts-ignore - accessing internal Chart2Music property
+  const visibleGroupIndices = ref._visible_group_indices?.slice(1) || [];
   try {
-    var _chart$tooltip;
-    var highlightElements = [];
+    const highlightElements = [];
     if ("custom" in point) {
+      const customPoint = point;
       highlightElements.push({
-        // @ts-ignore
-        datasetIndex: point.custom.group,
-        // @ts-ignore
-        index: point.custom.index
+        datasetIndex: customPoint.custom.datasetIndex ?? customPoint.custom.group,
+        index: customPoint.custom.index
       });
     } else {
-      visible_groups.forEach(function (datasetIndex) {
+      // For stacked charts, Chart2Music includes an "All" group at index 0,
+      // so we subtract 1 to get the actual dataset index
+      visibleGroupIndices.forEach(groupIndex => {
         highlightElements.push({
-          datasetIndex: datasetIndex,
-          index: index
+          datasetIndex: groupIndex - 1,
+          index
         });
       });
     }
-    chart === null || chart === void 0 || chart.setActiveElements(highlightElements);
-    chart === null || chart === void 0 || (_chart$tooltip = chart.tooltip) === null || _chart$tooltip === void 0 || _chart$tooltip.setActiveElements(highlightElements, {});
-    chart === null || chart === void 0 || chart.update();
+    chart?.setActiveElements(highlightElements);
+    chart?.tooltip?.setActiveElements(highlightElements, {});
+    chart?.update();
   } catch (e) {
     // console.warn(e);
   }
 };
-var generateChart = function generateChart(chart, options) {
-  var _scrub$labels, _options$axes, _options$axes2, _scrub$data, _chart$config$options, _groups$map;
-  var _processChartType = processChartType(chart),
-    valid = _processChartType.valid,
-    c2m_types = _processChartType.c2m_types,
-    invalidType = _processChartType.invalidType;
+const generateChart = (chart, options) => {
+  const {
+    valid,
+    c2m_types,
+    invalidType
+  } = processChartType(chart);
   if (!valid) {
-    var _options$errorCallbac;
-    // @ts-ignore
-    (_options$errorCallbac = options.errorCallback) === null || _options$errorCallbac === void 0 || _options$errorCallbac.call(options, "Unable to connect chart2music to chart. The chart is of type \"".concat(invalidType, "\", which is not one of the supported chart types for this plugin. This plugin supports: ").concat(Object.keys(chartjs_c2m_converter).join(", ")));
+    options.errorCallback?.(`Unable to connect chart2music to chart. The chart is of type "${invalidType}", which is not one of the supported chart types for this plugin. This plugin supports: ${Object.keys(chartjs_c2m_converter).join(", ")}`);
     return;
   }
-  var axes = generateAxes(chart);
+  let axes = generateAxes(chart, options);
   if (chart.config.type === "wordCloud") {
     delete axes.x.minimum;
     delete axes.x.maximum;
@@ -323,96 +354,126 @@ var generateChart = function generateChart(chart, options) {
     }
   }
   // Generate CC element
-  var cc = determineCCElement(chart.canvas, options.cc);
-  var _processData = processData(chart.data, c2m_types),
-    data = _processData.data,
-    groups = _processData.groups;
+  const cc = determineCCElement(chart.canvas, options.cc);
+  const processedData = processData(chart.data, c2m_types);
+  const {
+    data
+  } = processedData;
   // lastDataObj = JSON.stringify(data);
-  var scrub = scrubX(data);
-  if (scrub !== null && scrub !== void 0 && scrub.labels && (scrub === null || scrub === void 0 || (_scrub$labels = scrub.labels) === null || _scrub$labels === void 0 ? void 0 : _scrub$labels.length) > 0) {
+  if (c2m_types === "matrix") {
+    if (processedData.xLabels?.length > 0) {
+      axes.x.valueLabels = processedData.xLabels.slice(0);
+    }
+    if (processedData.yLabels?.length > 0) {
+      // Category labels provide the Matrix Plot's Y-axis formatter.
+      // The general numeric formatter would otherwise announce row indexes.
+      delete axes.y.format;
+      axes.y.valueLabels = processedData.yLabels.slice(0);
+    }
+  }
+  let scrub = scrubX(data);
+  if (scrub?.labels && scrub?.labels?.length > 0) {
     // Something was scrubbed
     if (!chart.data.labels || chart.data.labels.length === 0) {
       axes.x.valueLabels = scrub.labels.slice(0);
     }
   }
   if (c2m_types === "scatter") {
-    scrub === null || scrub === void 0 || delete scrub.data;
+    delete scrub?.data;
     delete axes.x.valueLabels;
   }
-  axes = _objectSpread(_objectSpread({}, axes), {}, {
-    x: _objectSpread(_objectSpread({}, axes.x), (_options$axes = options.axes) === null || _options$axes === void 0 ? void 0 : _options$axes.x),
-    y: _objectSpread(_objectSpread({}, axes.y), (_options$axes2 = options.axes) === null || _options$axes2 === void 0 ? void 0 : _options$axes2.y)
-  });
-  var c2mOptions = {
-    cc: cc,
+  axes = {
+    ...axes,
+    x: {
+      ...axes.x,
+      ...options.axes?.x
+    },
+    y: {
+      ...axes.y,
+      ...options.axes?.y
+    }
+  };
+  // Start with plugin's internal onFocusCallback
+  const pluginOnFocusCallback = () => {
+    displayPoint(chart);
+  };
+  // Merge user's options, wrapping onFocusCallback if provided
+  const userOptions = options.options || {};
+  const userOnFocusCallback = userOptions.onFocusCallback;
+  const c2mOptions = {
+    cc,
     element: chart.canvas,
     type: c2m_types,
-    data: (_scrub$data = scrub === null || scrub === void 0 ? void 0 : scrub.data) !== null && _scrub$data !== void 0 ? _scrub$data : data,
+    data: scrub?.data ?? data,
     title: determineChartTitle(chart.options),
-    axes: axes,
+    axes,
     options: {
-      // @ts-ignore
-      onFocusCallback: function onFocusCallback() {
-        displayPoint(chart);
-      }
+      ...userOptions,
+      onFocusCallback: userOnFocusCallback ? point => {
+        pluginOnFocusCallback();
+        userOnFocusCallback(point);
+      } : pluginOnFocusCallback
     }
   };
   if (Array.isArray(c2mOptions.data)) {
     if (isNaN(c2mOptions.data[0])) {
-      c2mOptions.data = c2mOptions.data.map(function (point, index) {
-        return _objectSpread(_objectSpread({}, point), {}, {
+      c2mOptions.data = c2mOptions.data.map((point, index) => {
+        return {
+          ...point,
           custom: {
-            group: 0,
-            index: index
+            ...point.custom,
+            group: point.custom?.group ?? 0,
+            index: point.custom?.index ?? index
           }
-        });
+        };
       });
     } else {
-      c2mOptions.data = c2mOptions.data.map(function (num, index) {
+      c2mOptions.data = c2mOptions.data.map((num, index) => {
         return {
           x: index,
           y: num,
           custom: {
             group: 0,
-            index: index
+            index
           }
         };
       });
     }
   } else {
-    var _groups = Object.keys(c2mOptions.data);
-    _groups.forEach(function (groupName, groupNumber) {
-      if (!isNaN(c2mOptions.data[groupName][0])) {
-        c2mOptions.data[groupName] = c2mOptions.data[groupName].map(function (num, index) {
+    const dataObj = c2mOptions.data;
+    const groups = Object.keys(dataObj);
+    groups.forEach((groupName, groupNumber) => {
+      if (!isNaN(dataObj[groupName][0])) {
+        dataObj[groupName] = dataObj[groupName].map((num, index) => {
           return {
             x: index,
             y: num,
             custom: {
               group: groupNumber,
-              index: index
+              index
             }
           };
         });
       } else {
-        c2mOptions.data[groupName] = c2mOptions.data[groupName].map(function (point, index) {
-          return _objectSpread(_objectSpread({}, point), {}, {
+        dataObj[groupName] = dataObj[groupName].map((point, index) => {
+          return {
+            ...point,
             custom: {
-              group: groupNumber,
-              index: index
+              ...point.custom,
+              group: point.custom?.group ?? groupNumber,
+              index: point.custom?.index ?? index
             }
-          });
+          };
         });
       }
     });
   }
-  // @ts-ignore
-  if ((_chart$config$options = chart.config.options) !== null && _chart$config$options !== void 0 && (_chart$config$options = _chart$config$options.scales) !== null && _chart$config$options !== void 0 && (_chart$config$options = _chart$config$options.x) !== null && _chart$config$options !== void 0 && _chart$config$options.stacked) {
-    // @ts-ignore
-    c2mOptions.options.stack = true;
+  if (chart.config.options?.scales?.x?.stacked) {
+    if (c2mOptions.options) {
+      c2mOptions.options.stack = true;
+    }
   }
-  // @ts-ignore
   if (options.audioEngine) {
-    // @ts-ignore
     c2mOptions.audioEngine = options.audioEngine;
   }
   if (c2mOptions.data.length === 0) {
@@ -421,36 +482,51 @@ var generateChart = function generateChart(chart, options) {
   if (options.lang) {
     c2mOptions.lang = options.lang;
   }
-  var _c2mChart = (0, _chart2music["default"])(c2mOptions),
-    err = _c2mChart.err,
-    c2m = _c2mChart.data;
+  const {
+    err,
+    data: c2m
+  } = (0, _chart2music.default)(c2mOptions);
   /* istanbul-ignore-next */
   if (err) {
-    var _options$errorCallbac2;
-    // @ts-ignore
-    (_options$errorCallbac2 = options.errorCallback) === null || _options$errorCallbac2 === void 0 || _options$errorCallbac2.call(options, err);
+    options.errorCallback?.(err);
     return;
   }
   if (!c2m) {
     return;
   }
   chartStates.set(chart, {
-    c2m: c2m,
-    visible_groups: (_groups$map = groups === null || groups === void 0 ? void 0 : groups.map(function (g, i) {
-      return i;
-    })) !== null && _groups$map !== void 0 ? _groups$map : []
+    c2m,
+    lastDataSnapshot: createDataSnapshot(chart)
   });
+  if (c2m_types === "matrix") {
+    const matrixKeydown = event => {
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      const actions = c2m._availableActions;
+      if (event.key === "ArrowUp") {
+        actions.next_category();
+      } else {
+        actions.previous_category();
+      }
+    };
+    chart.canvas.addEventListener("keydown", matrixKeydown, true);
+    const state = chartStates.get(chart);
+    state.matrixKeydown = matrixKeydown;
+    state.matrixKeydownTarget = chart.canvas;
+  }
 };
-var plugin = exports["default"] = {
+const plugin = exports.default = {
   id: "chartjs2music",
-  afterInit: function afterInit(chart, args, options) {
+  afterInit: (chart, _args, options) => {
     if (!chartStates.has(chart)) {
       generateChart(chart, options);
       // Remove tooltip when the chart blurs
-      chart.canvas.addEventListener("blur", function () {
-        var _chart$tooltip2;
+      chart.canvas.addEventListener("blur", () => {
         chart.setActiveElements([]);
-        (_chart$tooltip2 = chart.tooltip) === null || _chart$tooltip2 === void 0 || _chart$tooltip2.setActiveElements([], {});
+        chart.tooltip?.setActiveElements([], {});
         try {
           chart.update();
         } catch (e) {
@@ -458,58 +534,85 @@ var plugin = exports["default"] = {
         }
       });
       // Show tooltip when the chart receives focus
-      chart.canvas.addEventListener("focus", function () {
+      chart.canvas.addEventListener("focus", () => {
         displayPoint(chart);
       });
     }
   },
-  afterDatasetUpdate: function afterDatasetUpdate(chart, args, options) {
+  afterDatasetUpdate: (chart, args, options) => {
     if (!args.mode) {
       return;
     }
     if (!chartStates.has(chart)) {
       generateChart(chart, options);
     }
-    var _chartStates$get2 = chartStates.get(chart),
-      ref = _chartStates$get2.c2m,
-      visible_groups = _chartStates$get2.visible_groups;
+    const {
+      c2m: ref
+    } = chartStates.get(chart);
     if (!ref) {
       return;
     }
-    // @ts-ignore
-    var groups = ref._groups.slice(0);
-    // @ts-ignore
-    if (ref._options.stack) {
+    const refInternal = ref;
+    const groups = refInternal._groups.slice(0);
+    if (refInternal._options.stack) {
       groups.shift();
     }
     if (args.mode === "hide") {
-      var err = ref.setCategoryVisibility(groups[args.index], false);
-      visible_groups.splice(args.index, 1);
+      const err = ref.setCategoryVisibility(groups[args.index], false);
       if (err) {
         console.error(err);
       }
       return;
     }
     if (args.mode === "show") {
-      var _err = ref.setCategoryVisibility(groups[args.index], true);
-      visible_groups.push(args.index);
-      if (_err) {
-        console.error(_err);
+      const err = ref.setCategoryVisibility(groups[args.index], true);
+      if (err) {
+        console.error(err);
       }
       return;
     }
   },
-  afterDestroy: function afterDestroy(chart) {
-    var _chartStates$get3 = chartStates.get(chart),
-      ref = _chartStates$get3.c2m;
-    if (!ref) {
+  afterDatasetsUpdate: (chart, _args, options) => {
+    const state = chartStates.get(chart);
+    if (!state?.c2m) return;
+    // Check if data has changed
+    const currentSnapshot = createDataSnapshot(chart);
+    if (currentSnapshot === state.lastDataSnapshot) {
+      return; // No data change, skip update
+    }
+    // Get chart type
+    const {
+      valid,
+      c2m_types
+    } = processChartType(chart);
+    if (!valid) return;
+    // Process data and generate axes
+    const {
+      data
+    } = processData(chart.data, c2m_types);
+    const axes = generateAxes(chart, options);
+    // Update Chart2Music with new data
+    state.c2m.setData(data, axes);
+    // Update snapshot
+    state.lastDataSnapshot = currentSnapshot;
+  },
+  afterDestroy: chart => {
+    const state = chartStates.get(chart);
+    if (!state?.c2m) {
       return;
     }
+    const {
+      c2m: ref
+    } = state;
+    if (state?.matrixKeydown && state.matrixKeydownTarget) {
+      state.matrixKeydownTarget.removeEventListener("keydown", state.matrixKeydown, true);
+    }
     ref.cleanUp();
   },
   defaults: {
     cc: null,
     audioEngine: null,
-    errorCallback: null
+    errorCallback: null,
+    options: {}
   }
 };