[frontend] fix linechart rendering in barchart KO binding (#2844)

Co-authored-by: Björn Alm <[email protected]>

Author: bjornalm

desktop/core/src/desktop/js/ko/bindings/charts/ko.barChart.js

@@ -29,10 +29,19 @@ import {
 } from 'ko/bindings/charts/chartUtils';
 import huePubSub from 'utils/huePubSub';
 
+const getChartType = options => {
+  if (typeof options?.type === 'function') {
+    const typeResult = options.type();
+    return Array.isArray(typeResult) ? typeResult[0] : typeResult;
+  } else if (typeof console.warn !== 'undefined') {
+    console.warn('Expected chart options type to be a function');
+  }
+};
+
 ko.bindingHandlers.barChart = {
   init: function (element, valueAccessor) {
     const _options = ko.unwrap(valueAccessor());
-    if (_options.type && _options.type() === 'line') {
+    if (getChartType(_options) === 'line') {
       window.setTimeout(() => {
         lineChartBuilder(element, valueAccessor(), false);
       }, 0);
@@ -46,11 +55,16 @@ ko.bindingHandlers.barChart = {
   },
   update: function (element, valueAccessor) {
     const _options = ko.unwrap(valueAccessor());
-    if (_options.type && _options.type() !== $(element).data('type')) {
+    const chosenChartType = getChartType(_options);
+    const renderedChartType = $(element).data('type');
+    const chartTypeHasChanged = chosenChartType !== renderedChartType;
+    const chartNotBuilt = !$(element).data('chart');
+
+    if (chartTypeHasChanged || chartNotBuilt) {
       if ($(element).find('svg').length > 0) {
         $(element).find('svg').remove();
       }
-      if (_options.type() === 'line') {
+      if (chosenChartType === 'line') {
         window.setTimeout(() => {
           lineChartBuilder(element, valueAccessor(), false);
         }, 0);
@@ -59,7 +73,7 @@ ko.bindingHandlers.barChart = {
           barChartBuilder(element, valueAccessor(), false);
         }, 0);
       }
-      $(element).data('type', _options.type());
+      $(element).data('type', chosenChartType);
     }
     const _datum = _options.transformer(_options.datum);
     const _chart = $(element).data('chart');