From 7602bb5c34aca97f02ea8e713f841a4ce19929c7 Mon Sep 17 00:00:00 2001 From: wesyao Date: Fri, 29 Jul 2016 16:00:59 -0700 Subject: [PATCH] add static object property that toggles an axis --- capabilities.json | 13 ++++- src/barChart.ts | 86 +++++++++++++++++++++++++++++++-- src/objectEnumerationUtility.ts | 23 +++++++++ style/visual.less | 4 ++ tsconfig.json | 1 + 5 files changed, 123 insertions(+), 4 deletions(-) create mode 100644 src/objectEnumerationUtility.ts diff --git a/capabilities.json b/capabilities.json index 4a2f200..c6623e3 100644 --- a/capabilities.json +++ b/capabilities.json @@ -40,5 +40,16 @@ } } } - ] + ], + "objects": { + "enableAxis": { + "displayName": "Enable Axis", + "properties": { + "show": { + "displayName": "Enable Axis", + "type": { "bool": true } + } + } + } + } } \ No newline at end of file diff --git a/src/barChart.ts b/src/barChart.ts index d5ff0cc..f5b8bbb 100644 --- a/src/barChart.ts +++ b/src/barChart.ts @@ -9,6 +9,7 @@ module powerbi.extensibility.visual { interface BarChartViewModel { dataPoints: BarChartDataPoint[]; dataMax: number; + settings: BarChartSettings; }; /** @@ -28,6 +29,18 @@ module powerbi.extensibility.visual { selectionId: ISelectionId; }; + /** + * Interface for BarChart settings. + * + * @interface + * @property {{show:boolean}} enableAxis - Object property that allows axis to be enabled. + */ + interface BarChartSettings { + enableAxis: { + show: boolean; + }; + } + /** * Function that converts queried data into a view model that will be used by the visual. * @@ -39,9 +52,15 @@ module powerbi.extensibility.visual { */ function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel { let dataViews = options.dataViews; + let defaultSettings: BarChartSettings = { + enableAxis: { + show: false, + } + }; let viewModel: BarChartViewModel = { dataPoints: [], - dataMax: 0 + dataMax: 0, + settings: defaultSettings }; if (!dataViews @@ -60,6 +79,12 @@ module powerbi.extensibility.visual { let dataMax: number; let colorPalette: IColorPalette = createColorPalette(host.colors).reset(); + let objects = dataViews[0].metadata.objects; + let barChartSettings: BarChartSettings = { + enableAxis: { + show: getValue(objects, 'enableAxis', 'show', defaultSettings.enableAxis.show), + } + } for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) { barChartDataPoints.push({ category: category.values[i], @@ -74,7 +99,8 @@ module powerbi.extensibility.visual { return { dataPoints: barChartDataPoints, - dataMax: dataMax + dataMax: dataMax, + settings: barChartSettings, }; } @@ -84,12 +110,21 @@ module powerbi.extensibility.visual { private selectionManager: ISelectionManager; private barChartContainer: d3.Selection; private barContainer: d3.Selection; + private xAxis: d3.Selection; private bars: d3.Selection; + private barChartSettings: BarChartSettings; static Config = { xScalePadding: 0.1, solidOpacity: 1, transparentOpacity: 0.5, + margins: { + top: 0, + right: 0, + bottom: 25, + left: 30, + }, + xAxisFontMultiplier: 0.04, }; /** @@ -109,6 +144,9 @@ module powerbi.extensibility.visual { this.barContainer = svg.append('g') .classed('barContainer', true); + + this.xAxis = svg.append('g') + .classed('xAxis', true); } /** @@ -121,6 +159,8 @@ module powerbi.extensibility.visual { */ public update(options: VisualUpdateOptions) { let viewModel: BarChartViewModel = visualTransform(options, this.host); + let settings = this.barChartSettings = viewModel.settings; + let width = options.viewport.width; let height = options.viewport.height; @@ -129,13 +169,29 @@ module powerbi.extensibility.visual { height: height }); + if(settings.enableAxis.show) { + let margins = BarChart.Config.margins; + height -= margins.bottom; + } + + this.xAxis.style({ + 'font-size': d3.min([height, width]) * BarChart.Config.xAxisFontMultiplier, + }); + let yScale = d3.scale.linear() .domain([0, viewModel.dataMax]) .range([height, 0]); let xScale = d3.scale.ordinal() .domain(viewModel.dataPoints.map(d => d.category)) - .rangeRoundBands([0, width], BarChart.Config.xScalePadding); + .rangeRoundBands([0, width], BarChart.Config.xScalePadding, 0.2); + + let xAxis = d3.svg.axis() + .scale(xScale) + .orient('bottom'); + + this.xAxis.attr('transform', 'translate(0, ' + height + ')') + .call(xAxis); let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints); bars.enter() @@ -173,6 +229,30 @@ module powerbi.extensibility.visual { .remove(); } + /** + * Enumerates through the objects defined in the capabilities and adds the properties to the format pane + * + * @function + * @param {EnumerateVisualObjectInstancesOptions} options - Map of defined objects + */ + public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration { + let objectName = options.objectName; + let objectEnumeration: VisualObjectInstance[] = []; + + switch(objectName) { + case 'enableAxis': + objectEnumeration.push({ + objectName: objectName, + properties: { + show: this.barChartSettings.enableAxis.show, + }, + selector: null + }); + }; + + return objectEnumeration; + } + /** * Destroy runs when the visual is removed. Any cleanup that the visual needs to * do should be done here. diff --git a/src/objectEnumerationUtility.ts b/src/objectEnumerationUtility.ts new file mode 100644 index 0000000..2a497ae --- /dev/null +++ b/src/objectEnumerationUtility.ts @@ -0,0 +1,23 @@ +module powerbi.extensibility.visual { + /** + * Gets property value for a particular object. + * + * @function + * @param {DataViewObjects} objects - Map of defined objects. + * @param {string} objectName - Name of desired object. + * @param {string} propertyName - Name of desired property. + * @param {T} defaultValue - Default value of desired property. + */ + export function getValue(objects: DataViewObjects, objectName: string, propertyName: string, defaultValue: T ): T { + if(objects) { + let object = objects[objectName]; + if(object) { + let property: T = object[propertyName]; + if(property !== undefined) { + return property; + } + } + } + return defaultValue; + } +} \ No newline at end of file diff --git a/style/visual.less b/style/visual.less index 9b1f1dd..faa61f1 100644 --- a/style/visual.less +++ b/style/visual.less @@ -6,4 +6,8 @@ p { padding: 5px; } +} + +.xAxis path { + display: none; } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e6af218..b392da7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,6 +11,7 @@ ".api/v1.1.0/PowerBI-visuals.d.ts", "src/colorPalette.ts", "src/barChart.ts", + "src/objectEnumerationUtility.ts", "typings/index.d.ts" ] } \ No newline at end of file