Merge pull request #1877 from carbon-design-system/bar-chart-editor

feat(dashboard-editor): Bar chart support for dashboard editor

Author: scottdickerson

src/components/BarChartCard/BarChartCard.jsx

@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   SimpleBarChart,
   StackedBarChart,
   GroupedBarChart,
 } from '@carbon/charts-react';
 import classnames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
-import memoize from 'lodash/memoize';
 
 import {
   BarChartCardPropTypes,
@@ -31,6 +30,7 @@ import { csvDownloadHandler } from '../../utils/componentUtilityFunctions';
 
 import {
   generateSampleValues,
+  generateSampleValuesForEditor,
   formatChartData,
   mapValuesToAxes,
   formatColors,
@@ -41,24 +41,25 @@ import {
 
 const { iotPrefix } = settings;
 
-const memoizedGenerateSampleValues = memoize(generateSampleValues);
-
 const BarChartCard = ({
   title: titleProp,
   content,
   children,
   size: sizeProp,
   values: initialValues,
+  availableDimensions,
   locale,
   i18n,
   isExpanded,
   isLazyLoading,
   isEditable,
+  isDashboardPreview,
   isLoading,
   isResizable,
   interval,
   className,
   domainRange,
+  timeRange,
   ...others
 }) => {
   const { noDataLabel } = i18n;
@@ -84,24 +85,57 @@ const BarChartCard = ({
 
   const resizeHandles = isResizable ? getResizeHandles(children) : [];
 
+  const memoizedGenerateSampleValues = useMemo(
+    () =>
+      generateSampleValues(
+        series,
+        timeDataSourceId,
+        interval,
+        timeRange,
+        categoryDataSourceId
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [series, interval, timeRange]
+  );
+
+  const memoizedGenerateSampleValuesForEditor = useMemo(
+    () =>
+      generateSampleValuesForEditor(
+        valuesProp,
+        categoryDataSourceId,
+        timeDataSourceId,
+        availableDimensions,
+        interval,
+        timeRange
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      availableDimensions,
+      categoryDataSourceId,
+      isDashboardPreview,
+      timeDataSourceId,
+      interval,
+      timeRange,
+      valuesProp,
+      series.length,
+    ]
+  );
+
   // If editable, show sample presentation data
   // If there is no series defined, there is no datasets to make sample data from
-  const values =
-    isEditable && !isEmpty(series)
-      ? memoizedGenerateSampleValues(
-          series,
-          timeDataSourceId,
-          interval,
-          categoryDataSourceId
-        )
-      : valuesProp;
+  const values = isDashboardPreview
+    ? memoizedGenerateSampleValuesForEditor
+    : isEditable && !isEmpty(series)
+    ? memoizedGenerateSampleValues
+    : valuesProp;
 
   const chartData = formatChartData(
     series,
     values,
     categoryDataSourceId,
     timeDataSourceId,
-    type
+    type,
+    isDashboardPreview
   );
 
   const isAllValuesEmpty = isEmpty(chartData);
@@ -127,7 +161,7 @@ const BarChartCard = ({
     ? [...new Set(chartData.map((dataset) => dataset.group))]
     : [];
   const colors = !isAllValuesEmpty
-    ? formatColors(series, uniqueDatasets, isEditable)
+    ? formatColors(series, uniqueDatasets, isDashboardPreview, type)
     : null;
 
   let tableColumns = [];
@@ -168,6 +202,7 @@ const BarChartCard = ({
       isLoading={isLoading}
       isResizable={isResizable}
       resizeHandles={resizeHandles}
+      timeRange={timeRange}
       {...others}>
       {!isAllValuesEmpty ? (
         <div
@@ -176,6 +211,13 @@ const BarChartCard = ({
             [`${iotPrefix}--bar-chart-container--editable`]: isEditable,
           })}>
           <ChartComponent
+            // When showing the dashboard editor preview, we need to recalculate the chart scale
+            // because the data is added and removed dynamically
+            key={
+              isDashboardPreview
+                ? `bar-chart_preview_${values.length}_${series.length}`
+                : 'bar-chart'
+            }
             data={chartData}
             options={{
               animations: false,

src/components/BarChartCard/barChartUtils.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import isNil from 'lodash/isNil';
 import isEmpty from 'lodash/isEmpty';
 import capitalize from 'lodash/capitalize';
+import omit from 'lodash/omit';
 
 import {
   BAR_CHART_TYPES,
@@ -21,8 +22,17 @@ export const generateSampleValues = (
   series,
   timeDataSourceId,
   timeGrain = 'day',
+  timeRange,
   categoryDataSourceId
 ) => {
+  // determine interval type
+  const timeRangeType = timeRange?.includes('this')
+    ? 'periodToDate'
+    : 'rolling';
+  // for month timeGrains, we need to determine whether to show 3 for a quarter or 12 for a year
+  const timeRangeInterval = timeRange?.includes('Quarter')
+    ? 'quarter'
+    : timeRange;
   let count = 7;
   switch (timeGrain) {
     case 'hour':
@@ -35,7 +45,7 @@ export const generateSampleValues = (
       count = 4;
       break;
     case 'month':
-      count = 12;
+      count = timeRangeInterval === 'quarter' ? 3 : 12;
       break;
     case 'year':
       count = 5;
@@ -47,7 +57,10 @@ export const generateSampleValues = (
 
   if (timeDataSourceId) {
     return series.reduce((sampleData, { dataSourceId }) => {
-      const now = moment().subtract(count, timeGrain);
+      const now =
+        timeRangeType === 'periodToDate' // handle "this" intervals like "this week"
+          ? moment().startOf(timeRangeInterval).subtract(1, timeGrain)
+          : moment().subtract(count, timeGrain);
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < count; i++) {
         const nextTimeStamp = now.add(1, timeGrain).valueOf();
@@ -85,6 +98,107 @@ export const generateSampleValues = (
   return sampleData;
 };
 
+/**
+ * Generate fake, sample values for isDashboardPreview state. This is needed to preview
+ * data grouped by the categoryDataSourceId prop
+ * @param {Array<Object>} values a list of metrics and the dimension values to group them by
+ *
+ * @returns {Array} array of value objects to show in the chart
+ */
+export const generateSampleValuesForEditor = (
+  data,
+  categoryDataSourceId,
+  timeDataSourceId,
+  availableDimensions,
+  timeGrain = 'day',
+  timeRange
+) => {
+  // determine interval type
+  const timeRangeType = timeRange?.includes('this')
+    ? 'periodToDate'
+    : 'rolling';
+  // for month timeGrains, we need to determine whether to show 3 for a quarter or 12 for a year
+  const timeRangeInterval = timeRange?.includes('Quarter')
+    ? 'quarter'
+    : timeRange;
+  let count = 7;
+  switch (timeGrain) {
+    case 'hour':
+      count = 24;
+      break;
+    case 'day':
+      count = 7;
+      break;
+    case 'week':
+      count = 4;
+      break;
+    case 'month':
+      count = timeRangeInterval === 'quarter' ? 3 : 12;
+      break;
+    case 'year':
+      count = 5;
+      break;
+    default:
+      count = 7;
+      break;
+  }
+
+  // need to remove the label if it is a categorized timeseries bar chart
+  const metrics = data;
+  const dimensions = [];
+  if (availableDimensions && availableDimensions[categoryDataSourceId]) {
+    availableDimensions[categoryDataSourceId].forEach((value) => {
+      dimensions.push({
+        dimension: categoryDataSourceId,
+        value,
+      });
+    });
+  }
+
+  if (timeDataSourceId) {
+    const sampleData = [];
+    metrics.forEach(({ dataSourceId }) => {
+      const now =
+        timeRangeType === 'periodToDate' // handle "this" intervals like "this week"
+          ? moment().startOf(timeRangeInterval).subtract(1, timeGrain)
+          : moment().subtract(count, timeGrain);
+      // create 4 random dataSets
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < count; i++) {
+        const nextTimeStamp = now.add(1, timeGrain).valueOf();
+        // include dimension category if there is one
+        if (categoryDataSourceId) {
+          dimensions.forEach((dimension) => {
+            sampleData.push({
+              [timeDataSourceId]: nextTimeStamp,
+              [dataSourceId]: Math.random() * 100,
+              [dimension.dimension]: dimension.value,
+            });
+          });
+        } else {
+          // otherwise we need explicit row
+          sampleData.push({
+            [timeDataSourceId]: nextTimeStamp,
+            [dataSourceId]: Math.random() * 100,
+          });
+        }
+      }
+    });
+    return sampleData;
+  }
+
+  // for every dimension value, create a value object that contains sample data for each metric
+  const valuesGeneratedByDimensions = dimensions.map((dimension) => {
+    const value = { [dimension.dimension]: dimension.value };
+    metrics.forEach((metric) => {
+      value[metric.dataSourceId] = Math.random() * 100;
+    });
+    return value;
+  });
+
+  return valuesGeneratedByDimensions;
+};
+
 /**
  * Translates our raw data into a language the carbon-charts understand
  * @param {Array<Object>} series, the definition of the plotted series
@@ -98,12 +212,24 @@ export const generateSampleValues = (
  * @returns {array} of formatted values: [group: string, value: number, key: string, date: date]
  */
 export const formatChartData = (
-  series,
+  seriesArg,
   values,
   categoryDataSourceId,
   timeDataSourceId,
-  type
+  type,
+  isDashboardPreview
 ) => {
+  let series = seriesArg;
+  // need to remove the label if it is a categorized timeseries bar chart in the dashboard editor
+  if (
+    type === BAR_CHART_TYPES.STACKED &&
+    timeDataSourceId &&
+    categoryDataSourceId &&
+    isDashboardPreview
+  ) {
+    series = series.map((item) => omit(item, 'label'));
+  }
+
   let data = values;
   if (!isNil(values) && !isEmpty(series)) {
     data = [];
@@ -196,7 +322,7 @@ export const formatChartData = (
     }
   }
 
-  return data;
+  return isDashboardPreview && isEmpty(series) ? [] : data;
 };
 
 /**
@@ -263,10 +389,24 @@ export const mapValuesToAxes = (
  *
  * @returns {Object} colors - formatted
  */
-export const formatColors = (series, datasetNames) => {
+export const formatColors = (
+  series,
+  datasetNames,
+  isDashboardPreview,
+  type
+) => {
   // first set the carbon charts config defaults
   const colors = { scale: {} };
 
+  if (isDashboardPreview && type === BAR_CHART_TYPES.SIMPLE) {
+    datasetNames.forEach((dataset) => {
+      if (series[0].color) {
+        colors.scale[dataset] = series[0].color;
+      }
+    });
+    return colors;
+  }
+
   // if color is an array, order doesn't matter so just map as many as possible
   if (series[0] && Array.isArray(series[0].color)) {
     series[0].color.forEach((color, index) => {