Skip to content

Commit

Permalink
Merge pull request #84 from MarkLark86/SDESK-3935
Browse files Browse the repository at this point in the history 
[SDESK-3935] Publishing Actions Widget
  • Loading branch information
@MarkLark86
MarkLark86 authored Feb 8, 2019
2 parents be594e8 + 55c215c commit 3213d0c
Show file tree
Hide file tree
Showing 41 changed files with 1,776 additions and 795 deletions.
89 changes: 81 additions & 8 deletions client/charts/SDChart/Axis.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Series} from './Series';
import {map, get} from 'lodash';
import {map, get, sortBy, filter} from 'lodash';


/**
Expand Down Expand Up @@ -150,6 +150,25 @@ export class Axis {
* @description The maximum value on the x axis
*/
this.xMax = undefined;

/**
* @ngdoc property
* @name SDChart.Axis#sortOrder
* @type {String}
* @description If undefined, do not sort, otherwise sort categories in ascending or descending
* order based on series values (if series data is provided as an object)
*/
this.sortOrder = undefined;

/**
* @ngdoc property
* @name SDChart.Axis#excludeEmpty
* @type {Boolean}
* @description If true, remove values with 0 from the categories and series
*/
this.excludeEmpty = false;

this._sortedCategories = undefined;
}

/**
Expand All @@ -168,6 +187,9 @@ export class Axis {
* @param {string} [options.xTitle] - The title used on the x-axis
* @param {Number} [options.xMin] - The minimum value on the x axis
* @param {Number} [options.xMax] - The maximum value on the x axis
* @param {String} [options.sortOrder] - If undefined, do not sort, otherwise sort categories in
* ascending or descending order based on series values (if series data is provided as an object)
* @param {Boolean} [options.excludeEmpty=false] If true, remove values with 0 from the categories and series
* @return {SDChart.Axis}
* @description Sets the options for the axis
*/
Expand Down Expand Up @@ -199,16 +221,58 @@ export class Axis {
* @description Returns translated category field names
*/
getCategories() {
if (this.categories !== undefined && this.categoryField !== undefined) {
const names = this.chart.getTranslationNames(this.categoryField);
if (this._sortedCategories !== undefined) {
return this._sortedCategories;
}

return map(
this.categories,
(category) => get(names, category) || category
);
if (this.categories === undefined) {
return undefined;
}

return this.categories;
let categories = this.categories;

if (this.series.length === 1 && typeof this.series[0].data === 'object') {
const data = this.series[0].data;

if (this.excludeEmpty === true) {
categories = filter(
categories,
(categoryId) => data[categoryId]
);
}

if (this.sortOrder !== undefined) {
categories = sortBy(
categories,
(categoryId) => (
this.sortOrder === 'asc' ? data[categoryId] : -data[categoryId]
)
);
}
}

this._sortedCategories = categories;
return categories;
}

/**
* @ngdoc method
* @name SDChart.Axis#getTranslatedCategories
* @return {Array<String>}
* @description Returns categories sorted and translated
*/
getTranslatedCategories() {
let categories = this.getCategories();

if (!this.categoryField) {
return categories;
}

const names = this.chart.getTranslationNames(this.categoryField);

return categories.map(
(categoryId) => names[categoryId] || categoryId
);
}

/**
Expand All @@ -223,6 +287,15 @@ export class Axis {

if (this.categories !== undefined) {
axisConfig.categories = this.getCategories();

if (this.categoryField !== undefined) {
const names = this.chart.getTranslationNames(this.categoryField);

axisConfig.categories = map(
axisConfig.categories,
(categoryId) => get(names, categoryId) || categoryId
);
}
}

if (this.allowDecimals !== undefined) {
Expand Down
118 changes: 96 additions & 22 deletions client/charts/SDChart/Chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,12 @@ export class Chart {
* @param {Function} [options.tooltipFormatter] - Callback function to dynamically generate tooltips
* @param {Function} [options.onPointClick] - Callback function when a point is clicked
* @param {Object} [options.dataLabelConfig] - Custom config for dataLabels
* @params {Boolean} [options.invertAxes=false] - Invert the X and Y axes
* @params {Function} [options.legendFormatter] - Callback function to dynamically generate legend labels
* @param {Boolean} [options.invertAxes=false] - Invert the X and Y axes
* @param {Function} [options.legendFormatter] - Callback function to dynamically generate legend labels
* @param {String} [options.legendFormat] - The legend point format
* @param {Boolean} [options.shadow=true] - Creates a shadow around the chart container
* @param {Boolean} [options.exporting] - If false, then disables exporting options
* @param {Array<Number>} [options.legendOffset] - X/Y Offset for the legend position
* @description Initialise the data for the chart config
*/
constructor(options) {
Expand Down Expand Up @@ -66,6 +70,10 @@ export class Chart {
options.invertAxes = false;
}

if (!('shadow' in options)) {
options.shadow = true;
}

/**
* @ngdoc property
* @name SDChart.Chart#id
Expand Down Expand Up @@ -271,6 +279,38 @@ export class Chart {
* @description Callback function to dynamically generate legend labels
*/
this.legendFormatter = options.legendFormatter;

/**
* @ngdoc property
* @name SDChart.Chart#legendFormat
* @type {String}
* @description The legend point format
*/
this.legendFormat = options.legendFormat;

/**
* @ngdoc property
* @name SDChart.Chart#shadow
* @type {Boolean}
* @description Creates a shadow around the chart container
*/
this.shadow = options.shadow;

/**
* @ngdoc property
* @name SDChart.Chart#exporting
* @type {Boolean}
* @description If false, then disables exporting options
*/
this.exporting = options.exporting;

/**
* @ngdoc property
* @name SDChart.Chart#legendOffset
* @ype {Array<Number>}
* @description X/Y Offset for the legend position
*/
this.legendOffset = options.legendOffset;
}

/**
Expand All @@ -292,11 +332,14 @@ export class Chart {
genTitleConfig(config) {
const title = this.getTitle();

if (!get(config, 'title')) {
config.title = {};
}

if (title !== undefined) {
if (!get(config, 'title')) {
config.title = {};
}
config.title.text = title;
} else if (!get(config, 'title.text')) {
config.title.text = '';
}

return config;
Expand Down Expand Up @@ -342,16 +385,28 @@ export class Chart {
config.legend = {};
}

if (this.legendTitle === undefined) {
if (!this.legendTitle && !this.legendFormatter && !this.legendFormat) {
config.legend.enabled = false;
} else {
config.legend.enabled = true;
config.legend.title = {text: this.legendTitle};
}

if (this.legendFormatter !== undefined) {
config.legend.labelFormatter = this.legendFormatter;
config.legend.useHTML = true;

if (this.legendTitle) {
config.legend.title = {text: this.legendTitle};
}

if (this.legendFormatter) {
config.legend.labelFormatter = this.legendFormatter;
}

if (this.legendFormat) {
config.legend.labelFormat = this.legendFormat;
}

if (this.legendOffset) {
config.legend.x = this.legendOffset[0];
config.legend.y = this.legendOffset[1];
}
}

return config;
Expand All @@ -368,17 +423,22 @@ export class Chart {
config.tooltip = {};
}

if (this.tooltipHeader !== undefined) {
config.tooltip.headerFormat = this.tooltipHeader;
}
if (!this.tooltipHeader && !this.tooltipPoint && !this.tooltipFormatter) {
config.tooltip.enabled = false;
} else {
config.tooltip.enabled = true;
if (this.tooltipHeader !== undefined) {
config.tooltip.headerFormat = this.tooltipHeader;
}

if (this.tooltipPoint !== undefined) {
config.tooltip.pointFormat = this.tooltipPoint;
}
if (this.tooltipPoint !== undefined) {
config.tooltip.pointFormat = this.tooltipPoint;
}

if (this.tooltipFormatter !== undefined) {
config.tooltip.formatter = this.tooltipFormatter;
config.tooltip.useHTML = true;
if (this.tooltipFormatter !== undefined) {
config.tooltip.formatter = this.tooltipFormatter;
config.tooltip.useHTML = true;
}
}

return config;
Expand Down Expand Up @@ -529,6 +589,18 @@ export class Chart {
return config;
}

/**
* @ngdoc method
* @name SDChart.Chart#genExportingConfig
* @param {Object} config
* @description Generates the exporting config to use for the chart
*/
genExportingConfig(config) {
if (this.exporting === false) {
config.exporting = {enabled: false};
}
}

/**
* @ngdoc method
* @name SDChart.Chart#genHighchartsConfig
Expand All @@ -538,6 +610,7 @@ export class Chart {
genHighchartsConfig(config) {
config.id = this.id;
config.type = this.chartType;
config.shadow = this.shadow;

this.genChartConfig(config);
this.genTitleConfig(config);
Expand All @@ -546,6 +619,7 @@ export class Chart {
this.genLegendConfig(config);
this.genTooltipConfig(config);
this.genPlotConfig(config);
this.genExportingConfig(config);

this.axis.forEach((axis) => axis.genConfig(config));

Expand All @@ -563,7 +637,7 @@ export class Chart {
const headers = [axis.xTitle, axis.yTitle];
const rows = [];

forEach(axis.getCategories(), (category, index) => {
forEach(axis.getTranslatedCategories(), (category, index) => {
rows.push([
category,
axis.series[0].data[index],
Expand Down Expand Up @@ -597,7 +671,7 @@ export class Chart {
'Total Stories'
);

const rows = axis.getCategories().map((category) => ([category]));
const rows = axis.getTranslatedCategories().map((category) => ([category]));

forEach(axis.series, (series) => {
series.getData().forEach((count, index) => {
Expand Down
Loading

0 comments on commit 3213d0c

Please sign in to comment.