fix(piechart): workaround colors issue

carbon-design-system · Nov 9, 2020 · 327f486 · 327f486
1 parent ab29665
commit 327f486
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 58 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -17,7 +17,10 @@
       "request": "launch",
       "name": "Jest All",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "env": { "NODE_ICU_DATA": "node_modules/full-icu", "TZ": "America/Chicago" },
+      "env": {
+        "NODE_ICU_DATA": "node_modules/full-icu",
+        "TZ": "America/Chicago"
+      },
       "args": ["--runInBand"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
@@ -33,8 +36,10 @@
       "name": "Jest Current File",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "args": ["${relativeFile}", "--config", "jest.config.js"],
-      "env": { "NODE_ICU_DATA": "node_modules/full-icu", "TZ": "America/Chicago" },
-      "console": "integratedTerminal",
+      "env": {
+        "NODE_ICU_DATA": "node_modules/full-icu",
+        "TZ": "America/Chicago"
+      },
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {

diff --git a/src/components/PieChartCard/PieChartCard.jsx b/src/components/PieChartCard/PieChartCard.jsx
@@ -4,7 +4,11 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import assign from 'lodash/assign';
 
-import { PieCardPropTypes, CardPropTypes } from '../../constants/CardPropTypes';
+import {
+  PieCardPropTypes,
+  CardPropTypes,
+  CHART_COLORS,
+} from '../../constants/CardPropTypes';
 import { CARD_SIZES } from '../../constants/LayoutConstants';
 import { settings } from '../../constants/Settings';
 import {
@@ -68,6 +72,37 @@ const generateTableColumns = (values, groupDataSourceId) => {
   }));
 };
 
+/**
+ * Formats and maps the colors to their corresponding datasets in the carbon pie chart card expected format
+ * @param {Array} values, an array of group, value objects for each pie label
+ * @param {string} groupDataSourceId, the group id to use to find the value
+ * @param {Object} colors an object of colors
+ * @returns {Object} colors - formatted
+ */
+export const formatColors = (values, groupDataSourceId, colors) => {
+  const formattedColors = {
+    scale: {},
+  };
+  if (Array.isArray(values)) {
+    values.forEach((value, index) => {
+      formattedColors.scale[value[groupDataSourceId]] = colors?.[
+        value[groupDataSourceId]
+      ]
+        ? colors[value[groupDataSourceId]] // look to find a matching color entry in our colors otherwise use defaults
+        : CHART_COLORS[index % CHART_COLORS.length];
+    });
+  } else if (!isEmpty(values)) {
+    // values is an object
+    Object.keys(values).forEach((key, index) => {
+      formattedColors.scale[key] = colors?.[key]
+        ? colors?.[key]
+        : CHART_COLORS[index % CHART_COLORS.length];
+    });
+  }
+
+  return formattedColors;
+};
+
 const propTypes = { ...CardPropTypes, ...PieCardPropTypes };
 
 const defaultProps = {
@@ -148,6 +183,7 @@ const PieChartCard = ({
         groupMapsTo: groupDataSourceId,
         loading: isLoading,
       },
+      color: formatColors(values, groupDataSourceId, colors),
       getFillColor: (...args) => getColor(colors, ...args),
       getStrokeColor: (...args) => getColor(colors, ...args),
       legend: {

diff --git a/src/components/PieChartCard/PieChartCard.test.jsx b/src/components/PieChartCard/PieChartCard.test.jsx
@@ -6,63 +6,84 @@ import { CARD_SIZES } from '../../constants/LayoutConstants';
 import Card from '../Card/Card';
 import Table from '../Table/Table';
 
-import PieChartCard from './PieChartCard';
+import PieChartCard, { formatColors } from './PieChartCard';
 
-describe('PieChartCard', () => {
-  let chartDataExample;
-  let pieChartCardProps;
-
-  beforeEach(() => {
-    chartDataExample = [
-      {
-        group: '2V2N 9KYPM',
-        category: 'cat A',
-        value: 1,
-      },
-      {
-        group: 'L22I P66EP L22I P66EP',
-        category: 'cat B',
-        value: 10,
-      },
-      {
-        group: 'JQAI 2M4L1',
-        category: 'cat C',
-        value: 20,
-      },
-      {
-        group: 'J9DZ F37AP',
-        category: 'cat D',
-        value: 50,
-      },
-      {
-        group: 'YEL48 Q6XK YEL48',
-        category: 'cat E',
-        value: 15,
-      },
-      {
-        group: 'Misc',
-        category: 'cat F',
-        value: 40,
-      },
-    ];
+const chartDataExample = [
+  {
+    group: '2V2N 9KYPM',
+    category: 'cat A',
+    value: 1,
+  },
+  {
+    group: 'L22I P66EP L22I P66EP',
+    category: 'cat B',
+    value: 10,
+  },
+  {
+    group: 'JQAI 2M4L1',
+    category: 'cat C',
+    value: 20,
+  },
+  {
+    group: 'J9DZ F37AP',
+    category: 'cat D',
+    value: 50,
+  },
+  {
+    group: 'YEL48 Q6XK YEL48',
+    category: 'cat E',
+    value: 15,
+  },
+  {
+    group: 'Misc',
+    category: 'cat F',
+    value: 40,
+  },
+];
 
-    pieChartCardProps = {
-      availableActions: { expand: true },
-      content: {
-        groupDataSourceId: 'group',
-        legendPosition: 'bottom',
-      },
-      id: 'pie-chart-card',
-      isLoading: false,
-      isExpanded: false,
-      onCardAction: jest.fn(),
-      size: CARD_SIZES.LARGE,
-      title: 'Schools',
-      testID: 'test-pie-chart-card',
-      values: chartDataExample,
+const pieChartCardProps = {
+  availableActions: { expand: true },
+  content: {
+    groupDataSourceId: 'group',
+    legendPosition: 'bottom',
+  },
+  id: 'pie-chart-card',
+  isLoading: false,
+  isExpanded: false,
+  onCardAction: jest.fn(),
+  size: CARD_SIZES.LARGE,
+  title: 'Schools',
+  testID: 'test-pie-chart-card',
+  values: chartDataExample,
+};
+describe('utility functions', () => {
+  it('formatColors with array', () => {
+    const mockColors = {
+      'cat A': 'purple',
     };
+    const formattedColors = formatColors(
+      chartDataExample,
+      'category',
+      mockColors
+    );
+    expect(formattedColors.scale['cat A']).toEqual('purple');
+    expect(formattedColors.scale['cat B']).toEqual('#1192e8');
   });
+  it('formatColors with object', () => {
+    const mockColors = {
+      'cat A': 'purple',
+    };
+    const formattedColors = formatColors(
+      { 'cat A': 124, 'cat B': 125 },
+      undefined,
+      mockColors
+    );
+    expect(formattedColors.scale['cat A']).toEqual('purple');
+    expect(formattedColors.scale['cat B']).toEqual('#1192e8');
+  });
+});
 
+describe('PieChartCard', () => {
   it('shows loading skeleton for isLoading even for empty data  ', () => {
     const loadingSkeletonQuery = '.iot--pie-chart-container svg.chart-skeleton';
     const { container, rerender } = render(
@@ -156,7 +177,7 @@ describe('PieChartCard', () => {
     );
 
     const slices = screen
-      .getByLabelText('slices')
+      .getAllByRole('group')[0]
       .getElementsByClassName('slice');
     const orderedColors = chartDataExample
       .sort((a, b) => b.value - a.value)
@@ -210,7 +231,7 @@ describe('PieChartCard', () => {
     expect(screen.getByText('Sample 1')).toBeVisible();
 
     const slices = screen
-      .getByLabelText('slices')
+      .getAllByRole('group')[0]
       .getElementsByClassName('slice');
     const firstSliceColor = slices.item(0).getAttribute('fill');
     const secondSliceColor = slices.item(1).getAttribute('fill');