ref(charts): Change PercentageBarChart -> PercentageAreaChart

docs-ui/components/percentageBarChart.stories.js → docs-ui/components/percentageAreaChart.stories.js

@@ -3,22 +3,22 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
 
-import PercentageBarChart from 'app/components/charts/percentageBarChart';
+import PercentageAreaChart from 'app/components/charts/percentageAreaChart';
 
 const TOTAL = 6;
 
-storiesOf('Charts|PercentageBarChart', module).add(
-  'PercentageBarChart',
-  withInfo('Stacked PercentageBar')(() => {
+storiesOf('Charts|PercentageAreaChart', module).add(
+  'PercentageAreaChart',
+  withInfo('Stacked PercentageArea')(() => {
     const NOW = new Date().getTime();
     const getValue = () => Math.round(Math.random() * 1000);
     const getDate = num => NOW - (TOTAL - num) * 86400000;
 
     return (
       <div style={{padding: 20, backgroundColor: 'white'}}>
-        <h2>Percentage Bar Charts Over Time</h2>
+        <h2>Percentage Area Charts Over Time</h2>
 
-        <PercentageBarChart
+        <PercentageAreaChart
           style={{height: 400}}
           series={[
             {

src/sentry/static/sentry/app/components/charts/areaChart.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import theme from 'app/utils/theme';
-
 import AreaSeries from './series/areaSeries';
 import BaseChart from './baseChart';
 
@@ -14,25 +12,17 @@ class AreaChart extends React.Component {
 
   render() {
     const {series, stacked, ...props} = this.props;
-    const colors =
-      (series && series.length && theme.charts.getColorPalette(series.length)) || {};
 
     return (
       <BaseChart
         {...props}
-        series={series.map((s, i) =>
+        series={series.map(({seriesName, data, ...otherSeriesProps}, i) =>
           AreaSeries({
             stack: stacked ? 'area' : false,
-            name: s.seriesName,
-            data: s.data.map(({name, value}) => [name, value]),
-            lineStyle: {
-              color: '#fff',
-              width: 2,
-            },
-            areaStyle: {
-              color: colors[i],
-              opacity: 1.0,
-            },
+            areaStyle: {opacity: 1.0},
+            ...otherSeriesProps,
+            name: seriesName,
+            data: data.map(({name, value}) => [name, value]),
           })
         )}
       />

src/sentry/static/sentry/app/components/charts/percentageBarChart.jsx → src/sentry/static/sentry/app/components/charts/percentageAreaChart.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import moment from 'moment';
 
-import BarSeries from './series/barSeries.jsx';
+import AreaSeries from './series/areaSeries';
 import BaseChart from './baseChart';
 
 const FILLER_NAME = '__filler';
@@ -12,7 +12,7 @@ const FILLER_NAME = '__filler';
  *
  * See https://exceljet.net/chart-type/100-stacked-bar-chart
  */
-export default class PercentageBarChart extends React.Component {
+export default class PercentageAreaChart extends React.Component {
   static propTypes = {
     ...BaseChart.propTypes,
 
@@ -38,33 +38,19 @@ export default class PercentageBarChart extends React.Component {
     const totals = new Map(totalsArray);
     return [
       ...series.map(({seriesName, data}) =>
-        BarSeries({
+        AreaSeries({
           barCategoryGap: 0,
           name: seriesName,
-          stack: 'percentageBarChartStack',
+          lineStyle: {width: 1},
+          areaStyle: {opacity: 1},
+          smooth: true,
+          stack: 'percentageAreaChartStack',
           data: data.map(dataObj => [
             getDataItemName(dataObj),
             getValue(dataObj, totals.get(dataObj.name)),
           ]),
         })
       ),
-      // Bar outline/filler if entire column is 0
-      BarSeries({
-        name: FILLER_NAME,
-        stack: 'percentageBarChartStack',
-        silent: true,
-        itemStyle: {
-          normal: {
-            color: '#eee',
-          },
-        },
-        emphasis: {
-          itemStyle: {
-            color: '#eee',
-          },
-        },
-        data: totalsArray.map(([name, total]) => [name, total === 0 ? 100 : 0]),
-      }),
     ];
   }