@databrainhq/plugin 0.15.14 → 0.15.15

package/dist/components/Chart/SingleValueChart.d.ts

@@ -20,6 +20,8 @@ export type SingleValueChartProps = {
         }[];
         isEnableTruncate?: boolean;
         truncateValue?: number;
+        upVariant?: string;
+        downVariant?: string;
     };
     value: string | number;
     hideBorder?: boolean;

package/dist/components/ChartSettingsPopup/components/ChartConfigure/index.d.ts

@@ -6,6 +6,7 @@ export type ComparisonLagProps = {
     comparisonLagSettings: ComparisonLagSettings;
     dateTimeColumnList: FloatingDropDownOption[];
     onSaveComparisonLag: () => void;
+    onDisableComparisonSettings?: () => void;
 } | undefined;
 type Props = {
     chartSettings: ChartSettingsType;

package/dist/types/app.d.ts

@@ -110,6 +110,10 @@ export type CustomSettings = {
     customUppperLimit?: number;
     customLowerLimit?: number;
     isEnableInterchange?: boolean;
+    comparisonBadgeColor?: {
+        up?: string;
+        down?: string;
+    };
     linearGaugeV2?: {
         isEnableValue?: boolean;
         isEnableLabel?: boolean;

package/dist/webcomponents.es.js

@@ -2238,6 +2238,10 @@ const DEFAULT_CHART_SETTINGS = {
     isEnableFullScale: true,
     isEnableCustomLimits: false,
     isEnableTimezoneFormatting: false,
+    comparisonBadgeColor: {
+      up: "success",
+      down: "danger"
+    },
     repulsion: 50,
     linearGaugeV2: {
       isEnableLabel: true,
@@ -93809,7 +93813,7 @@ const getNoAxisChartOptions = ({
   chartAppearance,
   chartRef
 }) => {
-  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb, _lb, _mb, _nb, _ob, _pb, _qb, _rb, _sb, _tb, _ub, _vb, _wb, _xb, _yb, _zb, _Ab, _Bb, _Cb, _Db, _Eb, _Fb, _Gb, _Hb, _Ib, _Jb, _Kb, _Lb, _Mb, _Nb, _Ob, _Pb, _Qb, _Rb, _Sb, _Tb, _Ub, _Vb, _Wb, _Xb, _Yb, _Zb, __b, _$b, _ac, _bc, _cc, _dc, _ec, _fc, _gc, _hc, _ic, _jc, _kc, _lc, _mc, _nc, _oc, _pc, _qc, _rc, _sc, _tc, _uc, _vc, _wc, _xc, _yc, _zc, _Ac, _Bc, _Cc, _Dc, _Ec, _Fc, _Gc, _Hc, _Ic, _Jc, _Kc, _Lc, _Mc, _Nc, _Oc, _Pc, _Qc, _Rc, _Sc, _Tc, _Uc, _Vc, _Wc, _Xc, _Yc, _Zc, __c, _$c, _ad, _bd, _cd, _dd, _ed, _fd, _gd, _hd, _id2, _jd, _kd, _ld;
+  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb, _lb, _mb, _nb, _ob, _pb, _qb, _rb, _sb, _tb, _ub, _vb, _wb, _xb, _yb, _zb, _Ab, _Bb, _Cb, _Db, _Eb, _Fb, _Gb, _Hb, _Ib, _Jb, _Kb, _Lb, _Mb, _Nb, _Ob, _Pb, _Qb, _Rb, _Sb, _Tb, _Ub, _Vb, _Wb, _Xb, _Yb, _Zb, __b, _$b, _ac, _bc, _cc, _dc, _ec, _fc, _gc, _hc, _ic, _jc, _kc, _lc, _mc, _nc, _oc, _pc, _qc, _rc, _sc, _tc, _uc, _vc, _wc, _xc, _yc, _zc, _Ac, _Bc, _Cc, _Dc, _Ec, _Fc, _Gc, _Hc, _Ic, _Jc, _Kc, _Lc, _Mc, _Nc, _Oc, _Pc, _Qc, _Rc, _Sc, _Tc, _Uc, _Vc, _Wc, _Xc, _Yc, _Zc, __c, _$c, _ad, _bd, _cd, _dd, _ed, _fd, _gd, _hd, _id2, _jd, _kd, _ld, _md, _nd, _od;
   const legendPosition = findLegendPosition(
     ((_a2 = chartAppearance == null ? void 0 : chartAppearance.chartLegend) == null ? void 0 : _a2.fixedPosition) || ((_b2 = chartOptions2.legendSettings) == null ? void 0 : _b2.fixedPosition)
   );
@@ -95471,15 +95475,17 @@ const getNoAxisChartOptions = ({
           prefix: customSettings.singleValuePrefix || "",
           conditionalFormatter: customSettings.singleValConditionalFormatter || [],
           isEnableTruncate: customSettings == null ? void 0 : customSettings.enableSingleValueTruncate,
-          truncateValue: customSettings == null ? void 0 : customSettings.truncateValue
+          truncateValue: customSettings == null ? void 0 : customSettings.truncateValue,
+          upVariant: ((_dc = customSettings == null ? void 0 : customSettings.comparisonBadgeColor) == null ? void 0 : _dc.up) || "",
+          downVariant: ((_ec = customSettings == null ? void 0 : customSettings.comparisonBadgeColor) == null ? void 0 : _ec.down) || ""
         },
         value: value2,
         comparisonValue: isComparisonValue ? comparisonValue2 : void 0,
         trendLineOptions: comparisonValue2 && customSettings.isShowTrendLine ? {
           ...option3,
-          title: ((_dc = chartOptions2.customSettings) == null ? void 0 : _dc.enableTitleDesc) ? {
-            text: (_ec = chartOptions2.customSettings) == null ? void 0 : _ec.chartTitle,
-            subtext: (_fc = chartOptions2.customSettings) == null ? void 0 : _fc.chartDesc,
+          title: ((_fc = chartOptions2.customSettings) == null ? void 0 : _fc.enableTitleDesc) ? {
+            text: (_gc = chartOptions2.customSettings) == null ? void 0 : _gc.chartTitle,
+            subtext: (_hc = chartOptions2.customSettings) == null ? void 0 : _hc.chartDesc,
             ...titlePosition
           } : {},
           tooltip: {
@@ -95542,11 +95548,11 @@ const getNoAxisChartOptions = ({
           series: [
             {
               // sort data from old to new
-              data: (_gc = data == null ? void 0 : data.sort((a3, b3) => {
+              data: (_jc = (_ic = [...data]) == null ? void 0 : _ic.sort((a3, b3) => {
                 const dateA = new Date(a3 == null ? void 0 : a3._timestamp).getTime();
                 const dateB = new Date(b3 == null ? void 0 : b3._timestamp).getTime();
                 return dateA < dateB ? -1 : 1;
-              })) == null ? void 0 : _gc.map((d3) => [
+              })) == null ? void 0 : _jc.map((d3) => [
                 d3 == null ? void 0 : d3._timestamp,
                 d3 == null ? void 0 : d3[chartOptions2.singleValue || ""]
               ]),
@@ -95576,7 +95582,7 @@ const getNoAxisChartOptions = ({
           keys2.push(item.label);
           data2.push(item.data);
         });
-        for (let i2 = 0; i2 < ((_hc = data2[0]) == null ? void 0 : _hc.length); i2 += 1) {
+        for (let i2 = 0; i2 < ((_kc = data2[0]) == null ? void 0 : _kc.length); i2 += 1) {
           const obj = {};
           for (let j2 = 0; j2 < keys2.length; j2 += 1) {
             obj[keys2[j2]] = data2[j2][i2];
@@ -95613,7 +95619,7 @@ const getNoAxisChartOptions = ({
             data2.push(item.data);
           }
         });
-        for (let i2 = 0; i2 < ((_ic = data2[0]) == null ? void 0 : _ic.length); i2 += 1) {
+        for (let i2 = 0; i2 < ((_lc = data2[0]) == null ? void 0 : _lc.length); i2 += 1) {
           const obj = {};
           for (let j2 = 0; j2 < keys2.length; j2 += 1) {
             obj[keys2[j2]] = data2[j2][i2];
@@ -95708,7 +95714,7 @@ const getNoAxisChartOptions = ({
     case CHART_TYPES.geoMap: {
       let modifiedData = [];
       let values = [];
-      if ((chartOptions2 == null ? void 0 : chartOptions2.xAxis) && ((_jc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _jc.length)) {
+      if ((chartOptions2 == null ? void 0 : chartOptions2.xAxis) && ((_mc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _mc.length)) {
         modifiedData = data == null ? void 0 : data.map((item) => {
           var _a3;
           return {
@@ -95741,9 +95747,9 @@ const getNoAxisChartOptions = ({
         });
         Object.assign(option3, {
           ...option3,
-          title: ((_kc = chartOptions2.customSettings) == null ? void 0 : _kc.enableTitleDesc) ? {
-            text: (_lc = chartOptions2.customSettings) == null ? void 0 : _lc.chartTitle,
-            subtext: (_mc = chartOptions2.customSettings) == null ? void 0 : _mc.chartDesc,
+          title: ((_nc = chartOptions2.customSettings) == null ? void 0 : _nc.enableTitleDesc) ? {
+            text: (_oc = chartOptions2.customSettings) == null ? void 0 : _oc.chartTitle,
+            subtext: (_pc = chartOptions2.customSettings) == null ? void 0 : _pc.chartDesc,
             ...titlePosition
           } : {},
           toolbox: {
@@ -95753,7 +95759,7 @@ const getNoAxisChartOptions = ({
               }
             }
           },
-          backgroundColor: ((_nc = chartOptions2.customSettings) == null ? void 0 : _nc.enableBackgroundGradient) ? backgroundGradient : "",
+          backgroundColor: ((_qc = chartOptions2.customSettings) == null ? void 0 : _qc.enableBackgroundGradient) ? backgroundGradient : "",
           tooltip: {
             trigger: "item",
             showDelay: 0,
@@ -95803,7 +95809,7 @@ const getNoAxisChartOptions = ({
     case CHART_TYPES.geoBarMap: {
       let modifiedData = [];
       let values = [];
-      if ((chartOptions2 == null ? void 0 : chartOptions2.xAxis) && ((_oc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _oc.length)) {
+      if ((chartOptions2 == null ? void 0 : chartOptions2.xAxis) && ((_rc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _rc.length)) {
         modifiedData = data == null ? void 0 : data.map((item) => {
           var _a3;
           return {
@@ -95837,9 +95843,9 @@ const getNoAxisChartOptions = ({
         Object.assign(option3, {
           ...option3,
           geoOption: {
-            title: ((_pc = chartOptions2.customSettings) == null ? void 0 : _pc.enableTitleDesc) ? {
-              text: (_qc = chartOptions2.customSettings) == null ? void 0 : _qc.chartTitle,
-              subtext: (_rc = chartOptions2.customSettings) == null ? void 0 : _rc.chartDesc,
+            title: ((_sc = chartOptions2.customSettings) == null ? void 0 : _sc.enableTitleDesc) ? {
+              text: (_tc = chartOptions2.customSettings) == null ? void 0 : _tc.chartTitle,
+              subtext: (_uc = chartOptions2.customSettings) == null ? void 0 : _uc.chartDesc,
               ...titlePosition
             } : {},
             toolbox: {
@@ -95849,7 +95855,7 @@ const getNoAxisChartOptions = ({
                 }
               }
             },
-            backgroundColor: ((_sc = chartOptions2.customSettings) == null ? void 0 : _sc.enableBackgroundGradient) ? backgroundGradient : "",
+            backgroundColor: ((_vc = chartOptions2.customSettings) == null ? void 0 : _vc.enableBackgroundGradient) ? backgroundGradient : "",
             tooltip: {
               trigger: "item",
               showDelay: 0,
@@ -95919,7 +95925,7 @@ const getNoAxisChartOptions = ({
     case CHART_TYPES.geoScatterMap: {
       let modifiedData = [];
       let values = [];
-      if (chartOptions2.xAxis && ((_tc = chartOptions2.yAxisList) == null ? void 0 : _tc.length)) {
+      if (chartOptions2.xAxis && ((_wc = chartOptions2.yAxisList) == null ? void 0 : _wc.length)) {
         values = data == null ? void 0 : data.map((item) => {
           var _a3;
           return item[((_a3 = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _a3[0]) || ""];
@@ -95956,9 +95962,9 @@ const getNoAxisChartOptions = ({
         });
         Object.assign(option3, {
           ...option3,
-          title: ((_uc = chartOptions2.customSettings) == null ? void 0 : _uc.enableTitleDesc) ? {
-            text: (_vc = chartOptions2.customSettings) == null ? void 0 : _vc.chartTitle,
-            subtext: (_wc = chartOptions2.customSettings) == null ? void 0 : _wc.chartDesc,
+          title: ((_xc = chartOptions2.customSettings) == null ? void 0 : _xc.enableTitleDesc) ? {
+            text: (_yc = chartOptions2.customSettings) == null ? void 0 : _yc.chartTitle,
+            subtext: (_zc = chartOptions2.customSettings) == null ? void 0 : _zc.chartDesc,
             ...titlePosition
           } : {},
           toolbox: {
@@ -95968,7 +95974,7 @@ const getNoAxisChartOptions = ({
               }
             }
           },
-          backgroundColor: ((_xc = chartOptions2.customSettings) == null ? void 0 : _xc.enableBackgroundGradient) ? backgroundGradient : "",
+          backgroundColor: ((_Ac = chartOptions2.customSettings) == null ? void 0 : _Ac.enableBackgroundGradient) ? backgroundGradient : "",
           tooltip: {
             trigger: "item",
             showDelay: 0,
@@ -96036,7 +96042,7 @@ const getNoAxisChartOptions = ({
     case CHART_TYPES.worldMap: {
       let modifiedData = [];
       let values = [];
-      if ((chartOptions2 == null ? void 0 : chartOptions2.xAxis) && ((_yc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _yc.length)) {
+      if ((chartOptions2 == null ? void 0 : chartOptions2.xAxis) && ((_Bc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _Bc.length)) {
         modifiedData = data == null ? void 0 : data.map((item) => {
           var _a3;
           return {
@@ -96060,7 +96066,7 @@ const getNoAxisChartOptions = ({
               }
             }
           },
-          backgroundColor: ((_zc = chartOptions2.customSettings) == null ? void 0 : _zc.enableBackgroundGradient) ? backgroundGradient : "",
+          backgroundColor: ((_Cc = chartOptions2.customSettings) == null ? void 0 : _Cc.enableBackgroundGradient) ? backgroundGradient : "",
           tooltip: {
             trigger: "item",
             showDelay: 0,
@@ -96089,7 +96095,7 @@ const getNoAxisChartOptions = ({
           } : {},
           series: [
             {
-              name: (_Ac = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _Ac[0],
+              name: (_Dc = chartOptions2 == null ? void 0 : chartOptions2.yAxisList) == null ? void 0 : _Dc[0],
               type: "map",
               roam: true,
               map: "world",
@@ -96108,8 +96114,8 @@ const getNoAxisChartOptions = ({
       break;
     }
     case CHART_TYPES.progressBar: {
-      const max3 = (chartOptions2 == null ? void 0 : chartOptions2.progressMaxColumn) ? (_Bc = data == null ? void 0 : data[0]) == null ? void 0 : _Bc[(chartOptions2 == null ? void 0 : chartOptions2.progressMaxColumn) || ""] : null;
-      const min3 = (chartOptions2 == null ? void 0 : chartOptions2.progressMinColumn) ? (_Cc = data == null ? void 0 : data[0]) == null ? void 0 : _Cc[(chartOptions2 == null ? void 0 : chartOptions2.progressMinColumn) || ""] : null;
+      const max3 = (chartOptions2 == null ? void 0 : chartOptions2.progressMaxColumn) ? (_Ec = data == null ? void 0 : data[0]) == null ? void 0 : _Ec[(chartOptions2 == null ? void 0 : chartOptions2.progressMaxColumn) || ""] : null;
+      const min3 = (chartOptions2 == null ? void 0 : chartOptions2.progressMinColumn) ? (_Fc = data == null ? void 0 : data[0]) == null ? void 0 : _Fc[(chartOptions2 == null ? void 0 : chartOptions2.progressMinColumn) || ""] : null;
       Object.assign(option3, {
         ...option3,
         tooltip: {
@@ -96139,17 +96145,17 @@ const getNoAxisChartOptions = ({
             show: false
           },
           axisLine: {
-            show: ((_Dc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Dc.hideAxisLines) ? !((_Ec = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Ec.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
+            show: ((_Gc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Gc.hideAxisLines) ? !((_Hc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Hc.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
           },
           axisTick: {
-            show: ((_Fc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Fc.hideAxisLines) ? !((_Gc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Gc.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
+            show: ((_Ic = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Ic.hideAxisLines) ? !((_Jc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Jc.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
           },
           axisLabel: {
             show: true,
-            color: ((_Hc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Hc.color) || ((_Jc = (_Ic = chartOptions2.labelSettings) == null ? void 0 : _Ic.XAxisStyle) == null ? void 0 : _Jc.color) || "#000000",
-            fontSize: ((_Kc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Kc.fontSize) || ((_Mc = (_Lc = chartOptions2.labelSettings) == null ? void 0 : _Lc.XAxisStyle) == null ? void 0 : _Mc.size) || 14,
-            fontWeight: ((_Nc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Nc.fontWeight) || ((_Pc = (_Oc = chartOptions2.labelSettings) == null ? void 0 : _Oc.XAxisStyle) == null ? void 0 : _Pc.weight) || 400,
-            fontFamily: ((_Qc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Qc.fontFamily) || ((_Sc = (_Rc = chartOptions2.labelSettings) == null ? void 0 : _Rc.XAxisStyle) == null ? void 0 : _Sc.family),
+            color: ((_Kc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Kc.color) || ((_Mc = (_Lc = chartOptions2.labelSettings) == null ? void 0 : _Lc.XAxisStyle) == null ? void 0 : _Mc.color) || "#000000",
+            fontSize: ((_Nc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Nc.fontSize) || ((_Pc = (_Oc = chartOptions2.labelSettings) == null ? void 0 : _Oc.XAxisStyle) == null ? void 0 : _Pc.size) || 14,
+            fontWeight: ((_Qc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Qc.fontWeight) || ((_Sc = (_Rc = chartOptions2.labelSettings) == null ? void 0 : _Rc.XAxisStyle) == null ? void 0 : _Sc.weight) || 400,
+            fontFamily: ((_Tc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Tc.fontFamily) || ((_Vc = (_Uc = chartOptions2.labelSettings) == null ? void 0 : _Uc.XAxisStyle) == null ? void 0 : _Vc.family),
             formatter: (value2) => {
               if (value2 === null || value2 === 0) {
                 return "0";
@@ -96227,8 +96233,8 @@ const getNoAxisChartOptions = ({
               focus: "series"
             },
             label: {
-              show: !!((_Tc = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _Tc.position) || labelSettings.show,
-              position: ((_Uc = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _Uc.position) || labelSettings.position,
+              show: !!((_Wc = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _Wc.position) || labelSettings.show,
+              position: ((_Xc = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _Xc.position) || labelSettings.position,
               formatter(d3) {
                 return addPrefixAndSuffix(
                   numberFormatter(d3.data, customSettings.numberFormatter),
@@ -96284,17 +96290,17 @@ const getNoAxisChartOptions = ({
             show: false
           },
           axisLine: {
-            show: ((_Vc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Vc.hideAxisLines) ? !((_Wc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Wc.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
+            show: ((_Yc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Yc.hideAxisLines) ? !((_Zc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Zc.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
           },
           axisTick: {
-            show: ((_Xc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Xc.hideAxisLines) ? !((_Yc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Yc.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
+            show: ((__c = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : __c.hideAxisLines) ? !((_$c = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _$c.hideAxisLines) : !(customSettings == null ? void 0 : customSettings.hideXAxisLines)
           },
           axisLabel: {
             show: true,
-            color: ((_Zc = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _Zc.color) || ((_$c = (__c = chartOptions2.labelSettings) == null ? void 0 : __c.XAxisStyle) == null ? void 0 : _$c.color) || "#000000",
-            fontSize: ((_ad = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _ad.fontSize) || ((_cd = (_bd = chartOptions2.labelSettings) == null ? void 0 : _bd.XAxisStyle) == null ? void 0 : _cd.size) || 14,
-            fontWeight: ((_dd = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _dd.fontWeight) || ((_fd = (_ed = chartOptions2.labelSettings) == null ? void 0 : _ed.XAxisStyle) == null ? void 0 : _fd.weight) || 400,
-            fontFamily: ((_gd = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _gd.fontFamily) || ((_id2 = (_hd = chartOptions2.labelSettings) == null ? void 0 : _hd.XAxisStyle) == null ? void 0 : _id2.family),
+            color: ((_ad = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _ad.color) || ((_cd = (_bd = chartOptions2.labelSettings) == null ? void 0 : _bd.XAxisStyle) == null ? void 0 : _cd.color) || "#000000",
+            fontSize: ((_dd = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _dd.fontSize) || ((_fd = (_ed = chartOptions2.labelSettings) == null ? void 0 : _ed.XAxisStyle) == null ? void 0 : _fd.size) || 14,
+            fontWeight: ((_gd = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _gd.fontWeight) || ((_id2 = (_hd = chartOptions2.labelSettings) == null ? void 0 : _hd.XAxisStyle) == null ? void 0 : _id2.weight) || 400,
+            fontFamily: ((_jd = chartAppearance == null ? void 0 : chartAppearance.horizontalAxis) == null ? void 0 : _jd.fontFamily) || ((_ld = (_kd = chartOptions2.labelSettings) == null ? void 0 : _kd.XAxisStyle) == null ? void 0 : _ld.family),
             formatter: (value2) => {
               if (value2 === null || value2 === 0) {
                 return "0";
@@ -96376,7 +96382,7 @@ const getNoAxisChartOptions = ({
               color: "black"
             },
             symbolSize: chartHeight2 ? chartHeight2 >= 6 ? 20 : chartHeight2 >= 4 ? 10 : 5 : 20,
-            ...(customSettings == null ? void 0 : customSettings.isEnableLabelFormatting) && ((_jd = customSettings == null ? void 0 : customSettings.YaxislabelFormatters) == null ? void 0 : _jd.length) ? {} : {
+            ...(customSettings == null ? void 0 : customSettings.isEnableLabelFormatting) && ((_md = customSettings == null ? void 0 : customSettings.YaxislabelFormatters) == null ? void 0 : _md.length) ? {} : {
               markArea: {
                 silent: true,
                 label: {
@@ -96404,8 +96410,8 @@ const getNoAxisChartOptions = ({
               focus: "series"
             },
             label: {
-              show: !!((_kd = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _kd.position) || labelSettings.show,
-              position: ((_ld = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _ld.position) || labelSettings.position,
+              show: !!((_nd = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _nd.position) || labelSettings.show,
+              position: ((_od = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _od.position) || labelSettings.position,
               formatter(d3) {
                 return addPrefixAndSuffix(
                   numberFormatter(d3.data, customSettings.numberFormatter),
@@ -159396,6 +159402,16 @@ const getValuePositioningLabelOptions = (chartType2) => {
   }
   return options2;
 };
+const INDICATOR_OPTIONS = [
+  {
+    value: "success",
+    label: "Green for Up"
+  },
+  {
+    value: "danger",
+    label: "Red for Up"
+  }
+];
 const ChartConfigure = ({
   chartSettings: chartSettings2,
   setChartSettings,
@@ -160093,13 +160109,17 @@ const ChartConfigure = ({
                     name: "Comparison value",
                     enabled: (_z = chartSettings2.customSettings) == null ? void 0 : _z.comparisonValueShow,
                     onChange: () => {
-                      return setChartSettings((prev) => {
-                        var _a3;
+                      var _a3, _b3;
+                      if ((_a3 = chartSettings2.customSettings) == null ? void 0 : _a3.comparisonValueShow) {
+                        (_b3 = comparisonLagProps == null ? void 0 : comparisonLagProps.onDisableComparisonSettings) == null ? void 0 : _b3.call(comparisonLagProps);
+                      }
+                      setChartSettings((prev) => {
+                        var _a4;
                         return {
                           ...prev,
                           customSettings: {
                             ...prev.customSettings,
-                            comparisonValueShow: !((_a3 = prev.customSettings) == null ? void 0 : _a3.comparisonValueShow)
+                            comparisonValueShow: !((_a4 = prev.customSettings) == null ? void 0 : _a4.comparisonValueShow)
                           }
                         };
                       });
@@ -160266,6 +160286,39 @@ const ChartConfigure = ({
                       }
                     ) })
                   ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dbn-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    FloatingDropDown,
+                    {
+                      onChange: (value2) => setChartSettings((prev) => {
+                        var _a3;
+                        return {
+                          ...prev,
+                          customSettings: {
+                            ...prev.customSettings,
+                            comparisonBadgeColor: {
+                              ...(_a3 = prev.customSettings) == null ? void 0 : _a3.comparisonBadgeColor,
+                              up: value2.value,
+                              down: value2.value === "success" ? "danger" : "success"
+                            }
+                          }
+                        };
+                      }),
+                      selectedOption: INDICATOR_OPTIONS.find(
+                        (item) => {
+                          var _a3, _b3;
+                          return item.value === ((_b3 = (_a3 = chartSettings2 == null ? void 0 : chartSettings2.customSettings) == null ? void 0 : _a3.comparisonBadgeColor) == null ? void 0 : _b3.up);
+                        }
+                      ) || {
+                        value: "",
+                        label: ""
+                      },
+                      options: INDICATOR_OPTIONS,
+                      labelVariant: "static",
+                      buttonWidth: "100%",
+                      menuWidth: "100%",
+                      label: "Indicator Color"
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$P.wrapper, children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { variant: "body-text-sm", children: "Trendline" }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -168668,6 +168721,24 @@ const options = [
   { type: "year", label: "This Year", startOffset: 0, endOffset: 0 },
   { type: "all_time", label: "Life Time", startOffset: 0, endOffset: 0 }
 ];
+const formatDateAsUTC = (date2) => {
+  if (!date2)
+    return null;
+  const year = date2.getUTCFullYear();
+  const month = `0${date2.getUTCMonth() + 1}`.slice(-2);
+  const day = `0${date2.getUTCDate()}`.slice(-2);
+  return `${year}-${month}-${day}`;
+};
+const stripTimeToUTC = (date2) => {
+  if (!date2)
+    return null;
+  const newDate = new Date(date2);
+  newDate.setHours(0, 0, 0, 0);
+  const utcDate = new Date(
+    Date.UTC(newDate.getFullYear(), newDate.getMonth(), newDate.getDate())
+  );
+  return utcDate;
+};
 const DateRangePicker = ({
   label: fieldLabel2,
   placeholder = "Select Date Range",
@@ -168701,20 +168772,18 @@ const DateRangePicker = ({
   );
   const setOnDateChange2 = (start2, end2, timeGrain) => {
     if (start2 && end2) {
-      const startDateValue = new Date(
-        start2.getTime() - start2.getTimezoneOffset() * 60 * 1e3
-      );
-      const endDateValue = new Date(
-        end2.getTime() - end2.getTimezoneOffset() * 60 * 1e3
-      );
-      const startDateFormat = startDateValue.toISOString().slice(0, 10);
-      const endDateFormat = endDateValue.toISOString().slice(0, 10);
-      onChange == null ? void 0 : onChange({
-        value: `${startDateFormat} - ${endDateFormat}`,
-        startDate: startDateValue,
-        endDate: endDateValue,
-        timeGrainValue: timeGrain || `${startDateFormat} - ${endDateFormat}`
-      });
+      const startDateValue = stripTimeToUTC(start2);
+      const endDateValue = stripTimeToUTC(end2);
+      if (startDateValue && endDateValue) {
+        const startDateFormat = formatDateAsUTC(start2);
+        const endDateFormat = formatDateAsUTC(end2);
+        onChange == null ? void 0 : onChange({
+          value: `${startDateFormat} - ${endDateFormat}`,
+          startDate: startDateValue,
+          endDate: endDateValue,
+          timeGrainValue: timeGrain || `${startDateFormat} - ${endDateFormat}`
+        });
+      }
     }
   };
   const handleOptionClick = ({
@@ -168729,33 +168798,51 @@ const DateRangePicker = ({
     let start2 = /* @__PURE__ */ new Date();
     let end2 = /* @__PURE__ */ new Date();
     if (type3 === "all_time") {
-      start2.setFullYear(1, 0, 1);
-      setStartDate(start2);
-      setEndDate(end2);
+      start2 = new Date(Date.UTC(1, 0, 1));
+      end2 = new Date(
+        Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())
+      );
     } else if (type3 === "month") {
       if (label3 === "Last Month") {
-        start2 = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-        end2 = new Date(today.getFullYear(), today.getMonth(), 0);
+        start2 = new Date(
+          Date.UTC(today.getFullYear(), today.getMonth() - 1, 1)
+        );
+        end2 = new Date(Date.UTC(today.getFullYear(), today.getMonth(), 0));
       } else {
-        start2.setMonth(start2.getMonth() + startOffset);
+        start2 = new Date(
+          Date.UTC(today.getFullYear(), today.getMonth() + startOffset, 1)
+        );
         if (startOffset === 0) {
-          start2.setDate(1);
+          start2.setUTCDate(1);
         }
       }
     } else if (type3 === "year") {
-      start2.setFullYear(start2.getFullYear() + startOffset);
+      start2 = new Date(Date.UTC(today.getFullYear() + startOffset, 0, 1));
       if (startOffset === 0) {
-        start2.setMonth(0);
-        start2.setDate(1);
+        start2.setUTCMonth(0);
+        start2.setUTCDate(1);
       }
-      setStartDate(start2);
-      setEndDate(end2);
+      end2 = new Date(
+        Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())
+      );
     } else {
-      start2.setDate(start2.getDate() + startOffset);
-      end2.setDate(end2.getDate() + endOffset);
-      setStartDate(start2);
-      setEndDate(end2);
+      start2 = new Date(
+        Date.UTC(
+          today.getFullYear(),
+          today.getMonth(),
+          today.getDate() + startOffset
+        )
+      );
+      end2 = new Date(
+        Date.UTC(
+          today.getFullYear(),
+          today.getMonth(),
+          today.getDate() + endOffset
+        )
+      );
     }
+    setStartDate(start2);
+    setEndDate(end2);
     setOnDateChange2(start2, end2, label3);
     (_a2 = datePickerRef.current) == null ? void 0 : _a2.click();
   };
@@ -168787,27 +168874,29 @@ const DateRangePicker = ({
     }
   }, [isDateReset]);
   const onDateSelect = (dates) => {
-    const [start2, end2] = dates;
+    const [startD, endD] = dates;
+    const start2 = startD ? stripTimeToUTC(startD) : null;
+    const end2 = endD ? stripTimeToUTC(endD) : null;
     if (!isEnableSingleDate) {
       if (start2) {
-        const startDateFormat = start2.toISOString().slice(0, 10);
-        const endDateFormat = endDate == null ? void 0 : endDate.toISOString().slice(0, 10);
+        const startDateFormat = formatDateAsUTC(start2);
+        const endDateFormat = formatDateAsUTC(end2);
         setTimeGrainValue(`${startDateFormat} - ${endDateFormat}`);
         setStartDate(start2);
       } else {
         setStartDate(void 0);
       }
       if (end2) {
-        const endDateFormat = end2.toISOString().slice(0, 10);
-        const startDateFormat = startDate == null ? void 0 : startDate.toISOString().slice(0, 10);
+        const startDateFormat = formatDateAsUTC(start2);
+        const endDateFormat = formatDateAsUTC(end2);
         setTimeGrainValue(`${startDateFormat} - ${endDateFormat}`);
         setEndDate(end2);
       } else
         setEndDate(void 0);
     }
     if (isEnableSingleDate && start2 && end2) {
-      const startDateFormat = start2.toISOString().slice(0, 10);
-      const endDateFormat = end2.toISOString().slice(0, 10);
+      const startDateFormat = formatDateAsUTC(start2);
+      const endDateFormat = formatDateAsUTC(end2);
       setTimeGrainValue(`${startDateFormat} - ${endDateFormat}`);
       setStartDate(start2);
       setEndDate(end2);
@@ -218496,9 +218585,21 @@ const SingleValueChart = ({
             "span",
             {
               style: changeVariableFont,
-              className: parseFloat(comparisonValue2.toString()) > 0 ? style.positiveComparisonText : style.negativeComparisonText,
+              className: parseFloat(comparisonValue2.toString()) > 0 ? (settings2 == null ? void 0 : settings2.upVariant) && (settings2 == null ? void 0 : settings2.upVariant) === "danger" ? style.negativeComparisonText : style.positiveComparisonText : (settings2 == null ? void 0 : settings2.downVariant) && (settings2 == null ? void 0 : settings2.downVariant) === "success" ? style.positiveComparisonText : style.negativeComparisonText,
               children: [
-                parseFloat(comparisonValue2.toString()) > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icons, { name: "arrow-up", color: "success" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icons, { name: "arrow-down", color: "alert" }),
+                parseFloat(comparisonValue2.toString()) > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Icons,
+                  {
+                    name: "arrow-up",
+                    color: (settings2 == null ? void 0 : settings2.upVariant) === "danger" ? "alert" : "success"
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Icons,
+                  {
+                    name: "arrow-down",
+                    color: (settings2 == null ? void 0 : settings2.downVariant) === "success" ? "success" : "alert"
+                  }
+                ),
                 comparisonValue2,
                 " ",
                 settings2 == null ? void 0 : settings2.comparisonSuffix