Merge 2a7b98d into b2d2ffd

app/views/dashboard/_status_chart_widget.html.erb

@@ -3,7 +3,7 @@
 </h4>
 <div id="host_configuration_chart">
 </div>
-<%= mount_react_component('PieChart', '#host_configuration_chart', get_overview_json(@data.report))%>
+<%= mount_react_component('DonutChart', '#host_configuration_chart', get_overview_json(@data.report))%>
 <ul class="ui-helper-hidden">
   <%= render "dashboard/status_links" %>
 </ul>

config/webpack.vendor.js

@@ -59,7 +59,6 @@ module.exports = [
   /**
    * Other packages
    */
-  'c3',
   'diff',
   'ipaddr.js',
   'jstz',

package.json

@@ -59,7 +59,6 @@
     "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "brace": "^0.10.0",
-    "c3": "^0.4.11",
     "datatables.net": "~1.10.12",
     "datatables.net-bs": "~1.10.12",
     "diff": "~3.0.0",

webpack/assets/javascripts/react_app/components/common/charts/DonutChart/DonutChart.fixtures.js

@@ -0,0 +1,47 @@
+export default [['column1', 100], ['column2', 50]];
+
+export const mockStoryData = {
+  donut: {
+    width: 15,
+    label: {
+      show: false,
+    },
+  },
+  data: {
+    columns: [['Fedora 21', 3], ['Ubuntu 14.04', 4], ['Centos 7', 2], ['Debian 8', 1]],
+    names: {
+      'Fedora 21': 'Fedora 21',
+      'Ubuntu 14.04': 'Ubuntu 14.04',
+      'Centos 7': 'Centos 7',
+      'Debian 8': 'Debian 8',
+    },
+  },
+  tooltip: {
+    show: true,
+  },
+  legend: {
+    show: false,
+  },
+  padding: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  noDataMsg: 'No data available',
+  tip: 'Expand the chart',
+  status: 'RESOLVED',
+  id: 'operatingsystem',
+  title: 'OS Distribution',
+  search: '/hosts?search=os_title=~VAL~',
+};
+
+export const emptyData = {
+  data: {
+    type: 'donut',
+    columns: [],
+    names: {
+    },
+  },
+  noDataMsg: 'No data available',
+};

webpack/assets/javascripts/react_app/components/common/charts/DonutChart/DonutChart.test.js

@@ -0,0 +1,22 @@
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { mockStoryData, emptyData } from './DonutChart.fixtures';
+import DonutChart from './';
+import * as chartService from '../../../../../services/ChartService';
+
+jest.unmock('./');
+describe('renders DonutChart', () => {
+  it('render donut chart', () => {
+    chartService.getDonutChartConfig = jest.fn(() => mockStoryData);
+    const wrapper = shallow(<DonutChart data={mockStoryData} />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+  it('render empty state', () => {
+    chartService.getDonutChartConfig = jest.fn(() => emptyData);
+    const wrapper = shallow(<DonutChart data={emptyData} />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});