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

package/dist/dashboard.esm.js

@@ -10009,7 +10009,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()
   }));
 };
 
@@ -10173,6 +10175,11 @@ var CONSTANTS$j = {
       type: 'headline',
       title: 'Headline',
       description: ''
+    },
+    waterfall_colors: {
+      type: 'waterfallColors',
+      title: 'Color selector',
+      description: ''
     }
   }
 };
@@ -10212,6 +10219,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
@@ -10246,6 +10255,8 @@ var WaterfallChart = function WaterfallChart(config) {
         parameters: {},
         axisTitles: undefined,
         headline: undefined,
+        increaseColor: '#00FF00',
+        decreaseColor: '#FF0000',
         tags: [],
         approxXAxisLabelCount: 'auto',
         approxYAxisLabelCount: 'auto'
@@ -10300,7 +10311,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,
@@ -49159,30 +49170,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) {
@@ -49364,15 +49351,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'
@@ -49416,7 +49405,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;
@@ -49665,6 +49656,8 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
                   left: barGroup.x0,
                   children: barGroup.bars.map(function (bar) {
                     return jsx(Bar$1, {
+                      increaseColor: increaseColor,
+                      decreaseColor: decreaseColor,
                       bar: bar,
                       barGroup: barGroup,
                       yScale: yScale,
@@ -49685,7 +49678,9 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
       })]
     }), jsx(Legend$2, {
       showLegend: options.showLegend,
-      margin: margin
+      margin: margin,
+      increaseColor: increaseColor,
+      decreaseColor: decreaseColor
     }), jsx(Tooltip$2, {
       showTooltip: tooltipOpen,
       tooltipData: tooltipData,
@@ -49701,7 +49696,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));
@@ -49711,7 +49708,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)
   });
@@ -49987,7 +49984,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,
@@ -50081,7 +50080,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
               },
               theme: theme == null ? void 0 : theme.charts,
               chart: chartRepresentation,
-              steps: steps
+              steps: steps,
+              increaseColor: increaseColor,
+              decreaseColor: decreaseColor
             });
           }
         })
@@ -60577,6 +60578,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$1(props.setAttributes, 200);
+  return jsx(Section, {
+    title: props == null ? void 0 : props.section.title,
+    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+    children: jsxs(Section.Grid, {
+      columns: 2,
+      children: [jsx("div", {
+        children: jsx(ColorInput, {
+          id: 'waterfall-increase-color',
+          label: textOverride('increase_color', 'Positive value'),
+          currentValue: increaseColor,
+          setColor: function setColor(increaseColor) {
+            return debouncedSetAttributes({
+              increaseColor: increaseColor
+            });
+          }
+        })
+      }), jsx("div", {
+        children: 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 jsx(EditorGrid, {
     children: props == null ? void 0 : props.formatPanelConfig.map(function (section, i) {
@@ -60607,6 +60649,8 @@ var FormatPanelFromConfig = function FormatPanelFromConfig(props) {
           section: section
         })), section.type === 'mapColors' && jsx(MapColorsSection, _extends({}, props, {
           section: section
+        })), section.type === 'waterfallColors' && jsx(WaterfallColorsSection, _extends({}, props, {
+          section: section
         })), section.type === 'conditionalFormatting' && jsx(ConditionalFormattingSection, _extends({}, props, {
           section: section
         })), section.type === 'goalLine' && jsx(GoalLineSection, _extends({}, props, {

package/dist/shared-logic/src/Component/types.d.ts

@@ -417,6 +417,8 @@ export declare namespace Component {
         parameters?: Parameters;
         axisTitles?: AxisTitles;
         headline?: Headline;
+        increaseColor: string;
+        decreaseColor: string;
     };
     export type ViewType = 'areaChart' | 'barChart' | 'basicTable' | 'bubbleChart' | 'comboChart' | 'custom' | 'dataTable' | 'funnelChart' | 'horizontalBarChart' | 'lineChart' | 'lineChartV2' | 'areaChartV2' | 'barChartV2' | 'mercatorMap' | 'pieChart' | 'progress' | 'richText' | 'scatterChart' | 'singleStat' | 'waterfallChart' | 'radarChart';
     export type Attributes = AreaChartAttributes | BarChartAttributes | BasicTableAttributes | BubbleChartAttributes | ComboChartAttributes | CustomViewAttributes | DataTableAttributes | FunnelChartAttributes | HorizontalBarChartAttributes | LineChartAttributes | LineChartV2Attributes | BarChartV2Attributes | AreaChartV2Attributes | MercatorMapAttributes | PieChartAttributes | ProgressAttributes | RichTextAttributes | ScatterChartAttributes | SingleStatAttributes | WaterfallChartAttributes | RadarChartAttributes;

package/dist/shared-logic/src/ComponentInterface/types/namespaces.types.d.ts

@@ -106,6 +106,7 @@ export interface FormatPanelNamespaces {
     };
     goal_line?: Section<'goalLine'>;
     map_colors?: Section<'mapColors'>;
+    waterfall_colors?: Section<'waterfallColors'>;
     headline?: Section<'headline'>;
     trends?: Section<'trends'>;
     prefixes?: Section<'prefixes'>;

package/dist/shared-logic/src/FormatPanelConfig/types.d.ts

@@ -26,6 +26,7 @@ export declare type AxisLabelsSection = Section<'axisLabels'> & {
 export declare type LabelsSection = Section<'statsLabels'> & LabelSection<'statsLabels'>;
 export declare type PrefixSection = Section<'prefixes'>;
 export declare type MapColorsSection = Section<'mapColors'>;
+export declare type WaterfallColorsSection = Section<'waterfallColors'>;
 export declare type HeadlineSection = Section<'headline'>;
 export declare type RichTextFormatSection = Section<'richText'>;
 export interface ConditionalFormattingSection extends Section<'conditionalFormatting'> {
@@ -41,5 +42,5 @@ export interface ProgressTypeSection<T> extends Omit<Section<T>, 'type'> {
     progressType?: Omit<Section<T>, 'type'>;
 }
 export declare type ProgressTypesSection = Section<'progressType'> & ProgressTypeSection<'progressType'>;
-export declare type FormatPanelSection = HeadingSection | FormatSection | ChartStylesSection | PrefixSection | AxisLabelsSection | LabelsSection | MapColorsSection | ConditionalFormattingSection | GoalLineSection | ProgressTypesSection | HeadlineSection | RichTextFormatSection | Section<'trends'>;
+export declare type FormatPanelSection = HeadingSection | FormatSection | ChartStylesSection | PrefixSection | AxisLabelsSection | LabelsSection | MapColorsSection | WaterfallColorsSection | ConditionalFormattingSection | GoalLineSection | ProgressTypesSection | HeadlineSection | RichTextFormatSection | Section<'trends'>;
 export declare type FormatPanelConfig = Array<FormatPanelSection>;

package/dist/shared-ui/src/library/StylePanel/WaterfallColorsSection.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { VizzlyComponents } from '../../types';
+import { WaterfallColorsSection as WaterfallColorsSectionType } from '../../../../shared-logic/src/FormatPanelConfig/types';
+import { Component } from '../../../../shared-logic/src/Component/types';
+declare type Props = VizzlyComponents.ComponentOverrides.Props.SectionProps<WaterfallColorsSectionType> & VizzlyComponents.EditorSectionProps<Component.Attributes>;
+export declare const WaterfallColorsSection: FunctionComponent<Props>;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.14.4-dev-3455fe16fbb312a7c23a46cc2f4bcf62b52bb944",
+  "version": "0.14.4-dev-452014891c726bda8e71210563e32bb225b30c86",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",

package/dist/charts/src/v2/components/WaterfallChart/getBarFill.d.ts

@@ -1,5 +0,0 @@
-import { ConditionalFormattingRule } from '../../../../../shared-logic/src/ChartsV2/types';
-import { LegendItem } from '../../../../../shared-logic/src/WaterfallChart/types';
-export declare function getBarFill(bars: LegendItem[], conditionalFormattingRules: ConditionalFormattingRule[], barKey: string, barValues?: {
-    [keyId: string]: string | number | Date | null;
-} | number): string | undefined;