Merge pull request #86 from MarkLark86/SDESK-3936

[SDESK-3936] Enhance user experience
superdesk · Feb 8, 2019 · dab65f2 · dab65f2
2 parents 3213d0c + 81a626b
commit dab65f2
Show file tree

Hide file tree

Showing 30 changed files with 316 additions and 89 deletions.
diff --git a/client/charts/SDChart/Chart.js b/client/charts/SDChart/Chart.js
@@ -385,7 +385,7 @@ export class Chart {
             config.legend = {};
         }
 
-        if (!this.legendTitle && !this.legendFormatter && !this.legendFormat) {
+        if (this.legendTitle === undefined && this.legendFormatter === undefined && this.legendFormat === undefined) {
             config.legend.enabled = false;
         } else {
             config.legend.enabled = true;
@@ -484,7 +484,9 @@ export class Chart {
      */
     genPlotConfig(config) {
         if (!get(config, 'plotOptions')) {
-            config.plotOptions = {};
+            config.plotOptions = {series: {}};
+        } else if (!get(config, 'plotOptions.series')) {
+            config.plotOptions.series = {};
         }
 
         this.genPlotLabelConfig(config);
@@ -668,7 +670,7 @@ export class Chart {
 
         const headers = [axis.xTitle].concat(
             axis.series.map((series) => series.getName()),
-            'Total Stories'
+            'Total'
         );
 
         const rows = axis.getTranslatedCategories().map((category) => ([category]));

diff --git a/client/charts/SDChart/Series.js b/client/charts/SDChart/Series.js
@@ -132,6 +132,38 @@ export class Series {
          * @description If true, show the point names in the legend
          */
         this.showInLegend = undefined;
+
+        /**
+         * @ngdoc property
+         * @name SDChart.Series#groupPadding
+         * @type {Number}
+         * @description Padding between each value groups, in x axis units.
+         */
+        this.groupPadding = undefined;
+
+        /**
+         * @ngdoc property
+         * @name SDChart.Series#pointPadding
+         * @type {Number}
+         * @description Padding between each column or bar, in x axis units.
+         */
+        this.pointPadding = undefined;
+
+        /**
+         * @ngdoc property
+         * @name SDChart.Series#borderWidth
+         * @type {Number}
+         * @description The width of the border surrounding each column or bar.
+         */
+        this.borderWidth = undefined;
+
+        /**
+         * @ngdoc property
+         * @name SDChart.Series#maxPointWidth
+         * @type {Number}
+         * @description The maximum allowed pixel width for a column, translated to the height of a bar in a bar chart
+         */
+        this.maxPointWidth = undefined;
     }
 
     /**
@@ -255,13 +287,13 @@ export class Series {
             series.slicedOffset = 0;
         }
 
-        if (this.center !== undefined) {
-            series.center = this.center;
-        }
-
-        if (this.showInLegend !== undefined) {
-            series.showInLegend = this.showInLegend;
-        }
+        ['center', 'showInLegend', 'groupPadding', 'pointPadding', 'borderWidth', 'maxPointWidth'].forEach(
+            (field) => {
+                if (this[field] !== undefined) {
+                    series[field] = this[field];
+                }
+            }
+        );
     }
 
     /**
@@ -297,7 +329,6 @@ export class Series {
         this.setPointConfig(series);
         this.setStyleConfig(series);
 
-
         return series;
     }
 }
diff --git a/client/charts/services/ChartConfig.js b/client/charts/services/ChartConfig.js
@@ -333,54 +333,46 @@ export function ChartConfig(
                 defaultConfig: self.defaultConfig,
                 fullHeight: true,
                 shadow: this.shadow,
+                dataLabels: false,
             });
 
             chart.translations = self.translations;
             chart.tooltipPoint = '';
 
             const parent = this.getParent();
 
-            const axisOptions = {
-                type: 'category',
-                defaultChartType: this.chartType === 'table' ? 'column' : this.chartType,
-                yTitle: this.getYAxisTitle(),
-                xTitle: chart.getTranslationTitle(parent.field),
-                categoryField: parent.field,
-                categories: this.getSortedKeys(parent.data),
-            };
+            const axis = chart.addAxis()
+                .setOptions({
+                    type: 'category',
+                    defaultChartType: this.chartType === 'table' ? 'column' : this.chartType,
+                    yTitle: this.getYAxisTitle(),
+                    xTitle: chart.getTranslationTitle(parent.field),
+                    categoryField: parent.field,
+                    categories: this.getSortedKeys(parent.data),
+                    stackLabels: true,
+                });
 
             if (!this.isMultiSource()) {
                 chart.tooltipHeader = '{point.x}: {point.y}';
-                chart.dataLabels = true;
                 chart.colourByPoint = true;
 
-                chart.addAxis()
-                    .setOptions({
-                        ...axisOptions,
-                        stackLabels: false,
-                    })
-                    .addSeries()
+                axis.addSeries()
                     .setOptions({
                         field: parent.field,
                         data: _.map(
                             this.getSortedKeys(parent.data),
                             (source) => _.get(parent.data, source) || 0
                         ),
+                        stack: 0,
+                        stackType: 'normal',
                     });
             } else {
                 const child = this.getChild();
 
                 chart.legendTitle = this.getSourceName(child.field);
                 chart.tooltipHeader = '{series.name}/{point.x}: {point.y}';
-                chart.dataLabels = false;
                 chart.colourByPoint = false;
 
-                const axis = chart.addAxis()
-                    .setOptions({
-                        ...axisOptions,
-                        stackLabels: true,
-                    });
-
                 Object.keys(child.data).forEach((group) => {
                     axis.addSeries()
                         .setOptions({

diff --git a/client/charts/styles/charts.scss b/client/charts/styles/charts.scss
@@ -10,6 +10,34 @@ $colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b
     display: flex;
     flex-wrap: wrap;
     padding: 2rem;
+
+    .panel-info {
+        width: 100%;
+    }
+
+    .sda-chart__loader-container {
+        position: absolute;
+        top: 50px;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        .sda-chart__loader {
+            position: relative;
+            width: 100%;
+            height: 100%;
+
+            .sd-loader {
+                background-color: rgba(248, 248, 248, 0.85);
+            }
+        }
+    }
+}
+
+.open-filters {
+    .sda-chart__loader-container {
+        left: 36rem;
+    }
 }
 
 .sda-chart__chart {
@@ -69,7 +97,7 @@ $colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b
             display: block;
             position: absolute;
             right: 0;
-            bottom: 0;
+            top: 1rem;
         }
 
         .sd-pagination {

diff --git a/client/charts/tests/ChartConfig.spec.js b/client/charts/tests/ChartConfig.spec.js
@@ -97,7 +97,7 @@ describe('chartConfig', () => {
             }],
             yAxis: [{
                 title: {text: 'Published Stories'},
-                stackLabels: {enabled: false},
+                stackLabels: {enabled: true},
                 allowDecimals: false,
                 labels: {
                     enabled: true,
@@ -111,7 +111,7 @@ describe('chartConfig', () => {
                 pointFormat: '',
             },
             plotOptions: {
-                series: {dataLabels: {enabled: true}},
+                series: {dataLabels: {enabled: false}},
                 bar: {colorByPoint: true},
                 column: {colorByPoint: true},
             },
@@ -120,6 +120,8 @@ describe('chartConfig', () => {
                 data: [4, 3, 1],
                 type: 'bar',
                 xAxis: 0,
+                stacking: 'normal',
+                stack: 0,
             }],
             shadow: true,
             ...defaultConfig,
@@ -142,6 +144,8 @@ describe('chartConfig', () => {
             data: [1, 3, 4],
             type: 'bar',
             xAxis: 0,
+            stacking: 'normal',
+            stack: 0,
         }]);
 
         chart.sortOrder = 'desc';
@@ -157,6 +161,8 @@ describe('chartConfig', () => {
             data: [4, 3, 1],
             type: 'bar',
             xAxis: 0,
+            stacking: 'normal',
+            stack: 0,
         }]);
     });
 
@@ -318,6 +324,8 @@ describe('chartConfig', () => {
                 data: [4, 3, 1],
                 xAxis: 0,
                 type: 'column',
+                stacking: 'normal',
+                stack: 0,
             }],
             headers: ['Category', 'Published Stories'],
             rows: [
@@ -344,6 +352,8 @@ describe('chartConfig', () => {
             data: [1, 3, 4],
             xAxis: 0,
             type: 'column',
+            stacking: 'normal',
+            stack: 0,
         }]);
         expect(config.rows).toEqual([
             ['Cricket', 1],
@@ -364,6 +374,8 @@ describe('chartConfig', () => {
             data: [4, 3, 1],
             xAxis: 0,
             type: 'column',
+            stacking: 'normal',
+            stack: 0,
         }]);
         expect(config.rows).toEqual([
             ['Basketball', 4],
@@ -413,7 +425,7 @@ describe('chartConfig', () => {
                 stacking: 'normal',
                 stack: 0,
             }],
-            headers: ['Category', '1', '3', '5', 'Total Stories'],
+            headers: ['Category', '1', '3', '5', 'Total'],
             rows: [
                 ['Cricket', 2, 1, 1, 4],
                 ['Basketball', 1, 2, 0, 3],

diff --git a/client/charts/views/chart-container.html b/client/charts/views/chart-container.html
@@ -1,5 +1,6 @@
 <div class="sda-chart__container">
     <div ng-repeat="chart in reportConfigs.charts track by chart.id"
+         ng-if="reportConfigs.charts.length > 0"
          sda-chart
          class="sda-chart__chart"
          ng-class="{
@@ -11,4 +12,18 @@
          id="{{chart.id}}"
     >
     </div>
+    <div ng-if="!reportConfigs.loading && reportConfigs && reportConfigs.charts.length < 1"
+         class="panel-info"
+    >
+        <div class="panel-info__icon">
+            <i class="big-icon--comments"></i>
+        </div>
+        <h3 class="panel-info__heading">No data found</h3>
+        <p class="panel-info__description">Change your filters and try again</p>
+    </div>
+    <div ng-if="reportConfigs.loading" class="sda-chart__loader-container">
+        <div class="sda-chart__loader">
+            <div ng-if="reportConfigs.loading" class="sd-loader"></div>
+        </div>
+    </div>
 </div>
diff --git a/client/charts/views/chart-form-options.html b/client/charts/views/chart-form-options.html
@@ -41,13 +41,13 @@
 
 <div class="form__row" ng-if="params.chart.sort_order && enabled.sort">
     <div class="sd-line-input sd-line-input--is-select">
-        <label class="sd-line-input__label" translate>Order Categories In:</label>
+        <label class="sd-line-input__label" translate>Order Data In:</label>
         <select class="sd-line-input__select"
                 ng-model="params.chart.sort_order"
                 ng-change="updateChartConfig()"
         >
-            <option value="desc" translate>Descending Order of Stories</option>
-            <option value="asc" translate>Ascending Order of Stores</option>
+            <option value="desc" translate>Descending Order</option>
+            <option value="asc" translate>Ascending Order</option>
         </select>
     </div>
 </div>

diff --git a/client/content_publishing_report/controllers/ContentPublishingReportController.js b/client/content_publishing_report/controllers/ContentPublishingReportController.js
@@ -1,5 +1,6 @@
 import {getErrorMessage} from '../../utils';
 import {DATE_FILTERS} from '../../search/directives/DateFilters';
+import {CHART_TYPES} from '../../charts/directives/ChartOptions';
 
 ContentPublishingReportController.$inject = [
     '$scope',
@@ -61,6 +62,12 @@ export function ContentPublishingReportController(
             DATE_FILTERS.RANGE,
         ];
 
+        $scope.chartTypes = [
+            CHART_TYPES.BAR,
+            CHART_TYPES.COLUMN,
+            CHART_TYPES.TABLE,
+        ];
+
         this.initDefaultParams();
         savedReports.selectReportFromURL();
 
@@ -78,10 +85,6 @@ export function ContentPublishingReportController(
             ['published', 'killed', 'corrected', 'recalled']
         );
 
-        $scope.chart_types = chartConfig.filterChartTypes(
-            ['bar', 'column', 'table']
-        );
-
         $scope.report_groups = searchReport.filterDataFields(
             ['anpa_category.qcode', 'genre.qcode', 'source', 'urgency']
         );
@@ -127,7 +130,7 @@ export function ContentPublishingReportController(
                     },
                 },
                 chart: {
-                    type: _.get($scope, 'chart_types[0].qcode') || 'bar',
+                    type: CHART_TYPES.COLUMN,
                     sort_order: 'desc',
                     title: null,
                     subtitle: null,
@@ -245,6 +248,7 @@ export function ContentPublishingReportController(
      * @description Updates the Highchart configs in the report's content view
      */
     $scope.generate = () => {
+        $scope.beforeGenerateChart();
         $scope.changeContentView('report');
 
         const params = _.cloneDeep($scope.currentParams.params);

diff --git a/client/content_publishing_report/views/content-publishing-report-panel.html b/client/content_publishing_report/views/content-publishing-report-panel.html
@@ -72,6 +72,7 @@
                 <div sda-chart-options
                      ng-if="currentTab==='chartOptions'"
                      data-params="currentParams.params"
+                     data-chart-types="chartTypes"
                      data-title-placeholder="generateTitle()"
                      data-subtitle-placeholder="generateSubtitle()"
                      data-update-chart-config="updateChartConfig"
@@ -86,5 +87,6 @@
          data-get-report-params="getReportParams"
          data-is-dirty="isDirty"
          data-view-schedule="viewSchedule"
+         data-on-clear-filters="onClearFilters"
     ></div>
 </div>