Merge pull request #423 from Esri/feat/stylesAndPie

styles for margins and pie implemented

packages/cedar-amcharts/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Added
+- One can now add a `style` property which contains `padding` and `pie` properties to `definition`
+### changed
+- popup text for pie charts has a new format
+
 ## 1.0.0-beta.4
 ### Changed
 - treat arcgis libraries as external

packages/cedar-amcharts/src/render/render.ts

@@ -51,7 +51,7 @@ function getPieBalloonText(definition: any) {
   return `${categoryLabel}[[title]] [[percents]]% (${valueLabel}[[value]])`
 }
 
-export function fillInSpec(spec: any, definition: any) {
+export function fillInSpec(spec: any, definition: any) { // TODO: Figure out how to split this function up
   // Grab the graphSpec from the spec
   const graphSpec = spec.graphs.pop()
   const isJoined = definition.datasets.length > 1
@@ -113,6 +113,34 @@ export function fillInSpec(spec: any, definition: any) {
     }
   }
 
+  // Handle styles...
+  /* istanbul ignore if */
+  if (definition.style) {
+    // snag out style
+    const style = definition.style
+    // handle margins
+    /* istanbul ignore if */
+    if (style.padding) {
+      const padding = style.padding
+      // Assume we need to set auto margins false
+      spec.autoMargins = false
+      if (padding.hasOwnProperty('top')) { spec.marginTop = padding.top }
+      if (padding.hasOwnProperty('bottom')) { spec.marginBottom = padding.bottom }
+      if (padding.hasOwnProperty('left')) { spec.marginLeft = padding.left }
+      if (padding.hasOwnProperty('right')) { spec.marginRight = padding.right }
+    }
+    // If there is a pie property
+    /* istanbul ignore if */
+    if (style.pie) {
+      const pie = style.pie
+      // A range from 0 - n where n is the inner radius of the pie chart. Anything above a 0
+      // turns the chart into a donut chart. Can be a number for pixels or a percent.
+      if (pie.hasOwnProperty('innerRadius')) { spec.innerRadius = pie.innerRadius }
+      // How far a pie chart slice will pull out when selected. Can be a number for pixels or a percent
+      if (pie.hasOwnProperty('expand')) { spec.pullOutRadius = pie.expand }
+    }
+  }
+
   // Iterate over datasets
   definition.datasets.forEach((dataset, d) => {
     const datasetName = dataset.name

packages/cedar-amcharts/test/render/render.spec.ts

@@ -1,7 +1,7 @@
 /* globals global:false */
 /* globals AmCharts:false */
 import { } from 'jest'
-import { fetchSpec, fillInSpec, getPieBalloonText, renderChart } from '../../src/render/render'
+import { fetchSpec, fillInSpec, renderChart } from '../../src/render/render'
 import bar from '../../src/specs/bar'
 import scatter from '../../src/specs/scatter'
 import timeline from '../../src/specs/timeline'
@@ -135,6 +135,53 @@ describe('when overriding legend defaults', () => {
   })
 })
 
+describe('When filling in style', () => {
+  let result
+  let definition
+  beforeAll(() => {
+    definition = definitions.pie
+    definition.style = {
+      pie: {
+        innerRadius: '50%',
+        expand: 0
+      },
+      padding: {
+        top: 10,
+        bottom: 10,
+        right: 10,
+        left: 10
+      }
+    }
+    const spec = fetchSpec(definition.type)
+    result = fillInSpec(spec, definition)
+  })
+  test('spec.innerRadius should be 50% if definition.style.pie.innerRadius: 50% is passed in', () => {
+    expect(result.innerRadius).toEqual('50%')
+  })
+  test('spec.pullOutRadius should be 0 if definition.style.pie.expand: 0 is passed in', () => {
+    expect(result.pullOutRadius).toEqual(0)
+  })
+  test('spec.autoMargins should be false if definition.style.padding exists', () => {
+    expect(result.autoMargins).toBeFalsy()
+  })
+  test('spec.marginTop should be 10 if definition.style.padding.top: 10 is passed in', () => {
+    expect(result.marginTop).toEqual(10)
+  })
+  test('spec.marginBottom should be 10 if definition.style.padding.bottom: 10 is passed in', () => {
+    expect(result.marginBottom).toEqual(10)
+  })
+  test('spec.marginLeft should be 10 if definition.style.padding.left: 10 is passed in', () => {
+    expect(result.marginLeft).toEqual(10)
+  })
+  test('spec.marginRight should be 10 if definition.style.padding.right: 10 is passed in', () => {
+    expect(result.marginRight).toEqual(10)
+  })
+  afterAll(() => {
+    // clean up
+    delete definition.style
+  })
+})
+
 describe('when filling in a line spec', () => {
   let result
   beforeAll(() => {

packages/cedar/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Added
+- One can now add a `style` property which contains `padding` and `pie` properties to `definition`
+
 ## [1.0.0-beta.4]
 ### Changed
 - treat arcgis libraries as external

packages/cedar/src/Chart.ts

@@ -8,17 +8,35 @@ function clone(json) {
 
 // TODO: where should these interfaces live?
 export interface ILegend {
-  visible?: boolean,
+  visible?: boolean
   position?: 'top' | 'bottom' | 'left' | 'right'
 }
 
+export interface IPie {
+  innerRadius?: number | string
+  expand?: number | string
+}
+
+export interface IPadding {
+  top?: number
+  bottom?: number
+  left?: number
+  right?: number
+}
+
+export interface IStyle {
+  pie?: IPie
+  padding?: IPadding
+}
+
 export interface IDefinition {
-  datasets?: IDataset[],
-  series?: ISeries[],
+  datasets?: IDataset[]
+  series?: ISeries[]
   type?: string
   specification?: {}
-  overrides?: {},
+  overrides?: {}
   legend?: ILegend
+  style?: IStyle
 }
 
 export default class Chart {
@@ -86,6 +104,12 @@ export default class Chart {
     return this._definitionAccessor('legend', newLegend)
   }
 
+  public style(newStyle: IStyle): Chart
+  public style(): IStyle
+  public style(newStyle?: any): any {
+    return this._definitionAccessor('style', newStyle)
+  }
+
   // data is read only
   public data() {
     return this._data

packages/cedar/test/Chart.spec.ts

@@ -58,6 +58,9 @@ describe('new Chart w/o definition', () => {
   test('legend should set the definition.legend', () => {
     expect(chart.legend(barDefinition.legend).legend()).toEqual(barDefinition.legend)
   })
+  test('style should set the definition.style', () => {
+    expect(chart.style(barDefinition.style).style()).toEqual(barDefinition.style)
+  })
 })
 
 describe('when updating data', () => {

packages/cedar/test/data/definitions.ts

@@ -33,6 +33,18 @@ export const bar = {
   "legend": {
     "visible": true,
     "position": "right"
+  },
+  "style": {
+    "pie": {
+      "expand": 0,
+      "innerRadius": "50%"
+    },
+    "padding": {
+      "top": 10,
+      "bottom": 10,
+      "left": 10,
+      "right": 10
+    }
   }
 }