@vizzly/dashboard 0.14.4-dev-3455fe16fbb312a7c23a46cc2f4bcf62b52bb944 → 0.14.4-dev-452014891c726bda8e71210563e32bb225b30c86

package/dist/dashboard.cjs.development.js

@@ -10018,7 +10018,9 @@ var attributesSchema$h = function attributesSchema(config) {
     parameters: parametersSchema(config.queryEngineConfig, config.attributesSchemaOptions),
     axisTitles: axisTitleSchema(),
     headline: headlineSchema(),
-    tags: tagsSchema()
+    tags: tagsSchema(),
+    increaseColor: Joi.string().required(),
+    decreaseColor: Joi.string().required()
   }));
 };
 
@@ -10182,6 +10184,11 @@ var CONSTANTS$j = {
       type: 'headline',
       title: 'Headline',
       description: ''
+    },
+    waterfall_colors: {
+      type: 'waterfallColors',
+      title: 'Color selector',
+      description: ''
     }
   }
 };
@@ -10221,6 +10228,8 @@ var WaterfallChart = function WaterfallChart(config) {
         axisTitles: dumped.axisTitles,
         displaySubject: dumped.displaySubject,
         displayTitle: dumped.displayTitle,
+        increaseColor: dumped.increaseColor,
+        decreaseColor: dumped.decreaseColor,
         protectedByOrganisation: dumped.protectedByOrganisation,
         type: dumped.type,
         offset: dumped.offset
@@ -10255,6 +10264,8 @@ var WaterfallChart = function WaterfallChart(config) {
         parameters: {},
         axisTitles: undefined,
         headline: undefined,
+        increaseColor: '#00FF00',
+        decreaseColor: '#FF0000',
         tags: [],
         approxXAxisLabelCount: 'auto',
         approxYAxisLabelCount: 'auto'
@@ -10309,7 +10320,7 @@ var WaterfallChart = function WaterfallChart(config) {
       }), namespace(CONSTANTS$j, 'sort'), namespace(CONSTANTS$j, 'filter'), namespace(CONSTANTS$j, 'custom_metrics'), namespace(CONSTANTS$j, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$j), chartStylesConstant(CONSTANTS$j, false, false), axisLabelsConstants(CONSTANTS$j)];
+      return [headingConstant(CONSTANTS$j), namespace(CONSTANTS$j, 'waterfall_colors'), chartStylesConstant(CONSTANTS$j, false, false), axisLabelsConstants(CONSTANTS$j)];
     },
     supportedCustomFields: {
       percentages: true,
@@ -49101,30 +49112,6 @@ var BarChartV2 = function BarChartV2(props) {
   });
 };
 
-function getBarFill$1(bars, conditionalFormattingRules, barKey, barValues) {
-  var _bars$find;
-  // Default fill color from the corresponding bar
-  var fill = (_bars$find = bars.find(function (chartBar) {
-    return chartBar.yKey === barKey;
-  })) == null ? void 0 : _bars$find.color;
-
-  // Determine the value based on barValues type
-  var value = typeof barValues === 'number' ? barValues : barValues == null ? void 0 : barValues[barKey];
-  if (typeof value === 'number') {
-    for (var _iterator = _createForOfIteratorHelperLoose(conditionalFormattingRules), _step; !(_step = _iterator()).done;) {
-      var rule = _step.value;
-      if (compare({
-        op: rule.operator,
-        value: rule.value
-      }, value)) {
-        fill = rule.color;
-        break;
-      }
-    }
-  }
-  return fill;
-}
-
 var ASSUMED_AVERAGE_CHAR_WIDTH$1 = 8.8;
 function calculateWordWidth$1(word, avgCharWidth) {
   if (avgCharWidth === void 0) {
@@ -49306,15 +49293,17 @@ var IconTrendingDown$1 = function IconTrendingDown() {
 
 var Legend$2 = function Legend(_ref) {
   var showLegend = _ref.showLegend,
-    margin = _ref.margin;
+    margin = _ref.margin,
+    increaseColor = _ref.increaseColor,
+    decreaseColor = _ref.decreaseColor;
   var items = [{
-    color: 'green',
+    color: increaseColor,
     yKey: 'increase',
     style: {
       type: 'bar'
     }
   }, {
-    color: 'red',
+    color: decreaseColor,
     yKey: 'decrease',
     style: {
       type: 'bar'
@@ -49358,7 +49347,9 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     options = _ref.options,
     chart = _ref.chart,
     steps = _ref.steps,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    increaseColor = _ref.increaseColor,
+    decreaseColor = _ref.decreaseColor;
   //Waterfall TODO: fix chart for other x types
   if (chart.x.scale.dataType === 'date_time' || chart.x.scale.dataType === 'number') {
     return null;
@@ -49607,6 +49598,8 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
                   left: barGroup.x0,
                   children: barGroup.bars.map(function (bar) {
                     return jsxRuntime.jsx(Bar$1, {
+                      increaseColor: increaseColor,
+                      decreaseColor: decreaseColor,
                       bar: bar,
                       barGroup: barGroup,
                       yScale: yScale,
@@ -49627,7 +49620,9 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
       })]
     }), jsxRuntime.jsx(Legend$2, {
       showLegend: options.showLegend,
-      margin: margin
+      margin: margin,
+      increaseColor: increaseColor,
+      decreaseColor: decreaseColor
     }), jsxRuntime.jsx(Tooltip$2, {
       showTooltip: tooltipOpen,
       tooltipData: tooltipData,
@@ -49643,7 +49638,9 @@ var Bar$1 = function Bar(_ref4) {
   var bar = _ref4.bar,
     barGroup = _ref4.barGroup,
     yScale = _ref4.yScale,
-    formattedChartDataForBarChart = _ref4.formattedChartDataForBarChart;
+    formattedChartDataForBarChart = _ref4.formattedChartDataForBarChart,
+    increaseColor = _ref4.increaseColor,
+    decreaseColor = _ref4.decreaseColor;
   var step = formattedChartDataForBarChart.steps[barGroup.index];
   var y = yScale(Math.max(step.start, step.end));
   var barHeight = Math.abs(yScale(step.start) - yScale(step.end));
@@ -49653,7 +49650,7 @@ var Bar$1 = function Bar(_ref4) {
       y: y,
       width: bar.width,
       height: barHeight,
-      fill: getBarFill$1(formattedChartDataForBarChart.bars, formattedChartDataForBarChart.conditionalFormattingRules, bar.key, bar.value),
+      fill: bar.value > 0 ? increaseColor : decreaseColor,
       rx: 4
     }, "bar-group-bar-" + barGroup.index + "-" + bar.index + "-" + bar.value + "-" + bar.key)
   });
@@ -49929,7 +49926,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
     xAxisPrefix = props.xAxisPrefix,
     yAxisFormat = props.yAxisFormat,
     yAxisPostfix = props.yAxisPostfix,
-    yAxisPrefix = props.yAxisPrefix;
+    yAxisPrefix = props.yAxisPrefix,
+    increaseColor = props.increaseColor,
+    decreaseColor = props.decreaseColor;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     textOverride = _useDashboardBehaviou.textOverride,
     valueAlias = _useDashboardBehaviou.valueAlias,
@@ -50023,7 +50022,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
               },
               theme: theme == null ? void 0 : theme.charts,
               chart: chartRepresentation,
-              steps: steps
+              steps: steps,
+              increaseColor: increaseColor,
+              decreaseColor: decreaseColor
             });
           }
         })
@@ -60519,6 +60520,47 @@ var RichTextFormatSection = function RichTextFormatSection(props) {
   });
 };
 
+var WaterfallColorsSection = function WaterfallColorsSection(props) {
+  var _props$section;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride;
+  if (props.attributes.type != 'waterfallChart') return null;
+  var _props$attributes = props.attributes,
+    increaseColor = _props$attributes.increaseColor,
+    decreaseColor = _props$attributes.decreaseColor;
+  var debouncedSetAttributes = _.debounce(props.setAttributes, 200);
+  return jsxRuntime.jsx(Section, {
+    title: props == null ? void 0 : props.section.title,
+    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+    children: jsxRuntime.jsxs(Section.Grid, {
+      columns: 2,
+      children: [jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx(ColorInput, {
+          id: 'waterfall-increase-color',
+          label: textOverride('increase_color', 'Positive value'),
+          currentValue: increaseColor,
+          setColor: function setColor(increaseColor) {
+            return debouncedSetAttributes({
+              increaseColor: increaseColor
+            });
+          }
+        })
+      }), jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx(ColorInput, {
+          id: 'waterfall-decrease-color',
+          label: textOverride('decrease_color', 'Negative value'),
+          currentValue: decreaseColor,
+          setColor: function setColor(decreaseColor) {
+            return debouncedSetAttributes({
+              decreaseColor: decreaseColor
+            });
+          }
+        })
+      })]
+    })
+  });
+};
+
 var FormatPanelFromConfig = function FormatPanelFromConfig(props) {
   return jsxRuntime.jsx(EditorGrid, {
     children: props == null ? void 0 : props.formatPanelConfig.map(function (section, i) {
@@ -60549,6 +60591,8 @@ var FormatPanelFromConfig = function FormatPanelFromConfig(props) {
           section: section
         })), section.type === 'mapColors' && jsxRuntime.jsx(MapColorsSection, _extends({}, props, {
           section: section
+        })), section.type === 'waterfallColors' && jsxRuntime.jsx(WaterfallColorsSection, _extends({}, props, {
+          section: section
         })), section.type === 'conditionalFormatting' && jsxRuntime.jsx(ConditionalFormattingSection, _extends({}, props, {
           section: section
         })), section.type === 'goalLine' && jsxRuntime.jsx(GoalLineSection, _extends({}, props, {